1. Interactive Design
by Danielle Sannuto
Web Artist Jonathan Harris Illustrates How We Interact Online. Photograph. Digital Journal: A Global Digital Media Network.
By David Silverberg. 5 Apr. 2008. Web. 15 Nov. 2010. <http://www.digitaljournal.com/article/252657>.

2. Interactive Design
is the design of systems (web sites, cell phones, appliances, devices, etc)
that are intended to be utilized by humans
• In 1986, both Bill Moggridge and Bill Verplank were the first to use the
expression “interaction design” as a way of referring to user-interface
design
"Interaction Design." Wikipedia, the Free Encyclopedia. 21 Oct. 2010. Web. 12 Nov. 2010. <http://en.wikipedia.org/wiki/Interaction_design>.
"Professional." Bill Verplank. Web. 12 Nov. 2010. <http://www.billverplank.com/professional.html>.
“Lecture.” Bill Verplank. Web. 12 Nov. 2010. <http://www.billverplank.com/Lecture/>.

3. Bill Moggridge
became interested in this field of work through his participation in
designing the form of one of the worldʼs first laptops
• upon testing the first functional prototype, he became incredibly engaged
in its software
• he came to the realization that he would have to do more than just design
the deviceʼs form in order to create the user experience; he would need to
design the interactive part of it as well
Introduction. Perf. Bill Moggridge. Designing Interactions. Web. 12 Nov. 2010.
<http://www.designinginteractions.com/chapters/introduction>.

4. BillVerplank
is an interaction designer, who is mainly known for
illustrating diagrams that represent the process
behind building an interactive medium
• he outlines 3 steps:
1. the user does something
2. the machine responds to that action a certain way
3. the user can unconsciously create a “mental map”
of how to navigate through the system
Verplank, Bill. "Bill Verplank." Interview. Designing Interactions. Web. 12 Nov. 2010. <http://www.designinginteractions.com/interviews/BillVerplank>.
Verplank, Bill. Untitled Document. Digital image. Bill Verplank. Web. 12 Nov. 2010. <http://www.billverplank.com/Lecture/>.

5. Key Principles
• the key principle of interactive design is the user experience
• thus the design of interactive mediums should be centered around its
target audienceʼs needs and goals
• this is known as “user-centered design”

6. User-Centered Design (UCD) involves:
• functionality: What do you need and want the system to be able to
do for its users?
examples:
• with the ebay site you want your users to be able to
buy, sell, browse and comment
• a portfolio siteʼs function is to showcase someoneʼs
work so it will be largely image based
"User Interface Design." Wikipedia, the Free Encyclopedia. 14 Sept. 2010. Web. 12 Nov. 2010.
<http://en.wikipedia.org/wiki/User_interface_design>.

7. User-Centered Design (UCD) involves:
• information architecture: How will all the functions and content of the system be
categorized in an idealistic way so that the user can
find what they are looking for most efficiently?
examples:
• alphabetical, chronological, geographical, topics, audience, etc.
"User-centered Design." Wikipedia, the Free Encyclopedia. 31 Oct. 2010. Web. 12 Nov. 2010.
<http://en.wikipedia.org/wiki/User-centered_design>.

8. User-Centered Design (UCD) involves:
• visibility: Can the user easily navigate their way through the site or system?
Does the system make use of common visual indicators so that
the viewer can easily figure out how the system works?
• global navigation so that the user still knows they are within the same site
from one page to another since it maintains consistency. They can also easily
go where they need to without having to rely on the back button.
• some kind of visual indicator that lets them know what page they are on
examples:
• the links should provide feedback so that the viewer knows it is an active
button and in turn predict its effect
"User-centered Design." Wikipedia, the Free Encyclopedia. 31 Oct. 2010. Web. 12 Nov. 2010.
<http://en.wikipedia.org/wiki/User-centered_design>.

9. User-Centered Design (UCD) involves:
• aesthetics: Do the graphics fit the content of the system? Or does it
overpower the content? Do the graphics enhance the user
experience or complicate things?
• you want your site to be visually interesting so that it enhances the user
experience however, you still want it to be understandable for the user

10. Jonathan Harris
writes systems that analyze trails of information that
people leave behind online, such as their personal
information, feelings, thoughts, etc.
• he then creates stories and draws conclusions from the
data he collects
Jonathan Harris. Photograph. The Wild Wild East Dailies. By David Everitt-Carlson. Blogspot, 20 Jan. 2010. Web. 14 Nov. 2010.
<wildwildeastdailies.blogspot.com>.
"Jonathan Harris: the Web's Secret Stories | Video on TED.com." TED: Ideas worth Spreading. TED Talks, July 2007. Web. 12 Nov. 2010.
<http://www.ted.com/talks/jonathan_harris_tells_the_web_s_secret_stories.html>.

11. Jonathan Harris
check it out here:
http://tenbyten.org/10x10.html
10x10. Photograph. Cool Hunting. By Josh Rubin. 8 Nov. 2004. Web. 14 Nov. 2010.
<http://www.coolhunting.com/archives/2004/11/08/>.

12. 10x10
• itʼs a simple and nice way to visually represent the top news and world events
of that hour
• the aesthetics and interactive part of it makes news a bit more exciting to read
• the viewer is able to efficiently scour through the archive of news and make their
own connections
• clear information hierarchy as it ranks the top world events from 1-100; more
important to least important
• itʼs aesthetically pleasing yet still maintains the familiar elements of image and
text as buttons, along with rollovers
• the design doesnʼt take away from the content itself
Harris, Jonathan. "About 10x10." 10x10 / 100 Words and Pictures That Define the Time. 2004. Web. 15 Nov. 2010. <http://tenbyten.org/about.html>.

13. I want you to want me
by Jonathan Harris & Sep Kamvar
• an interactive installation that is displayed
on a 56 inch touch screen, which is hung
on a wall in low lighting conditions
• finds a visually interesting way to represent
the cultural phenomenon of online dating
Harris, Jonathan, and Sep Kamvar. "Statement." I Want You To Want Me / by Jonathan Harris and Sep Kamvar. Feb. 2008. Web. 13 Nov. 2010.
<http://iwantyoutowantme.org/statement.html>.
I Want You to Want Me. Photograph. In The Space Between - Postscape Design Blog. 10 June 2008. Web. 14 Nov. 2010.
<http://inthespacebetween.com/>.

14. I want you to want me
• broken down into 5 parts:
who i am: displays peopleʼs descriptions of themselves
that begin with the expression “I am...”
what i want: illustrates what people are looking for in others
snippets: presents the opening lines, closing lines, and tag
lines to an individualʼs profile
matchmaker: mathematically pairs off profiles based on their
personality and what they are in search of
breakdowns: visually represents the most frequent
first-dates, turn-ons, interests, etc, that people have
Harris, Jonathan, and Sep Kamvar. "Statement." I Want You To Want Me / by Jonathan Harris and Sep Kamvar. Feb. 2008. Web. 13 Nov. 2010.
<http://iwantyoutowantme.org/statement.html>.
Open Balloons Distort the DNA. Photograph. I Want You To Want Me / by Jonathan Harris and Sep Kamvar. By Jonathan Harris and Sep Kamvar. Feb. 2008. Web. 15 Nov. 2010.
<http://www.iwantyoutowantme.org/movements.html>.

15. I want you to want me
I Want You to Want Me. Dir. Jonathan Harris and Sep Kamvar. Youtube. Museum of Modern Art, 17 Apr. 2008. Web. 12 Nov. 2010.
<http://www.youtube.com/watch?v=GZUaXDm4qik>.

16. Cultural Impact
• our culture is becoming more technological each and everyday, as the
need for self-expression and human interaction has moved online
• social networking and the communication of thoughts has now
become easier with skype, facebook, blogs, etc.
• Jonathan just visualizes these human interactions in a new and
interesting way
• he heightens the overall user experience
"Jonathan Harris: the Web's Secret Stories | Video on TED.com." TED: Ideas worth Spreading. TED Talks, July 2007. Web. 12 Nov. 2010.
<http://www.ted.com/talks/jonathan_harris_tells_the_web_s_secret_stories.html>.