what makes an interface communicate?

34
What Makes an Interface Communicate? Peter Merholz Work: http://epinions.com Play: http://peterme.com/ This talk: http://peterme.com/web00

Upload: mac

Post on 10-Feb-2016

24 views

Category:

Documents


0 download

DESCRIPTION

What Makes an Interface Communicate? . Peter Merholz Work: http://epinions.com Play: http://peterme.com/ This talk: http://peterme.com/web00. Is that the right question?. How does an interface communicate? - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: What Makes an  Interface Communicate?

What Makes an Interface Communicate?

Peter MerholzWork: http://epinions.comPlay: http://peterme.com/

This talk: http://peterme.com/web00

Page 2: What Makes an  Interface Communicate?

Is that the right question?

How does an interface communicate?Wait a minute—does an interface

communicate? Communicate what? Is that what it’s for?

Page 3: What Makes an  Interface Communicate?

Interfaces enable tool use

They allow users to accomplish a goal, usually through a set of tasks

Interface design allows users to manipulate a system to get desired results

“Communication” would get in the way of that, right? A hammer doesn’t tell me anything about itself through its interface, right?

Page 4: What Makes an  Interface Communicate?

Well, no

Interface communication is important in two primary respects

What you can do with the systemFeedback from the system

Page 5: What Makes an  Interface Communicate?

1. What you can do with the systemWhen looking at an interface, it should

communicate the tool’s purpose and capabilities

Such communication can be done through explicit instruction, but is most powerful through “affordances”

Page 6: What Makes an  Interface Communicate?

Affordances – The strongest communication toolhttp://www.jnd.org/dn.mss/affordances-and-design.htmlCoined by JJ Gibson, popularized by

Don Norman in Design of Everyday Things

What interactions does the interface seem to afford?

Page 7: What Makes an  Interface Communicate?

Users seek affordances

Who here hasn’t rolled their cursor over a web page, looking to see what turns the arrow into a hand?

Page 8: What Makes an  Interface Communicate?

So, isn’t that like metaphor?

Bevels on screen buttons are in order to make them look like ‘real world’ buttons

Metaphors are helpful to a point – provide familiarity with a new experience

Tabs!

But beware of too much metaphor

Page 9: What Makes an  Interface Communicate?

2. Feedback from the system

Interfaces communicate what’s happening ‘behind the scenes’

Sometimes explicit through messagesTypically implied through form

Page 10: What Makes an  Interface Communicate?

Wait a minute. Isn’t “interface communication” about branding?In partTo the degree it helps remind people

where they are—a very important quality of interface in the contextless morass that is The Web

Page 11: What Makes an  Interface Communicate?

Develop a conceptual model

Create a singular, overarching theme that provides the backbone for your design

Ensures unity of designUnexpected ideas inevitably emerge

Page 12: What Makes an  Interface Communicate?

How to develop a model?

User researchData analysisBrainstorming

Page 13: What Makes an  Interface Communicate?

Epinions.com Use and Interaction Model

Page 14: What Makes an  Interface Communicate?

Wait a minute. Isn’t that like a metaphor?Well, yes.But don’t express it literally.

Page 15: What Makes an  Interface Communicate?

Okay. I’ve got a model. Now what?From Tog on Interface:

“The system image is an illusion designed to convey the design model. Have it communicate the design model clearly and concisely.”

There’s that word!(For our needs, “system image” can be

thought of as “web site”)

Page 16: What Makes an  Interface Communicate?

How do you communicate the model?Interfaces communicate with

Text – labels, instructionsPictures – icons, widgetsSounds – feedbackStructure – process

Page 17: What Makes an  Interface Communicate?

How do you make sure your users ‘get it’Be explicit and clearWords are clearer than

picturesUse full phrasesUse icons to support

text, not in place of

Get email!

vs.

vs.

Page 18: What Makes an  Interface Communicate?

A different kind of metaphor

All language is ruled by metaphorSuch conceptual metaphors both determine

and illuminate how we thinkMetaphors We Live By, Lakoff and JohnsonThe future is AHEAD of us, the past BEHIND usTime is MONEY

Page 19: What Makes an  Interface Communicate?

Expressions of conceptual metaphor – Setting volumeWhich is most appropriate?

QuicktimeWinamp

MediaPlayer

Control Panel“Crank it up!”“Turn that down!”Volume is up/down

Page 20: What Makes an  Interface Communicate?

Communicate with appropriate imageryNot for the *interface* but to create a

gestalt

Non geeks beware!

Page 21: What Makes an  Interface Communicate?

Interfaces can’t NOT communicatePeople will react as if communicated withThe Media Equation, Reeves and Nass

Assumed: feelings, politeness, flattery, etc.Watch out for abruptness and rudenessIt seems condescending—but it isn’t

Page 22: What Makes an  Interface Communicate?

Case Study—Let’s Wander Around…AmazonLycos

Page 23: What Makes an  Interface Communicate?

Resources

Tog on Interface, TognazziniMetaphors We Live By, Lakoff and JohnsonThe Media Equation, Reeves and Nass,Designing the User Interface, ShneidermanInterface Culture, JohnsonThe Humane Interface, RaskinThe Art of Human-Computer Interface Design, Laurel

Page 24: What Makes an  Interface Communicate?

Thanks!

Page 25: What Makes an  Interface Communicate?

Raymond Pirouz’s Original Notes. The following slides are all him

Page 26: What Makes an  Interface Communicate?

 I.  Interface Design

A.     A term used to describe the act of creating a way for people to easily and seamlessly interact with complex objects or technology.B.     Interface design is NOT decorative button-making.C.     Interface design IS about humanizing the non-human. 

Page 27: What Makes an  Interface Communicate?

II.  Interface Design : A Matter of UsabilityA.     Interfaces have to be visually approachable,

comprehensible and navigable.B.     Interfaces are tools that are meant to be USED in order to achieve a specific function. In the case of web design, interfaces communicate the location of specific areas within a web site and are there to LEAD users, not confuse them. 

Page 28: What Makes an  Interface Communicate?

III.  The Challenge

A.     The challenge in interface design is to enhance usability while maintaining a balance between communication, visual design and technology. 

Page 29: What Makes an  Interface Communicate?

IV. The Interface Design Discipline : Teams Working to Create BalanceA.     Information Architects : Create Logical

Pathways.1.      What is the message (marketing message or

communication objective)?2.      How can we quickly present the user with that message? How many layers of information need to be created to achieve this goal while maintaining information cohesion and message communication?

Page 30: What Makes an  Interface Communicate?

V. Top 10 Misconceptions Regarding Web GUI Design

1. All sites need to look like Amazon or Yahoo – FALSE2. An interface “metaphor” MUST exist – FALSE3. Site maps MUST be made available – FALSE4. Hypertext navigation is ALL YOU NEED – FALSE5. People are lame and won’t get it…they need help – FALSE6. DHTML makes for the coolest nav. elements – FALSE7.  Always design with technology in mind – FALSE8.  Stay away from certain colors or ONLY USE certain colors – FALSE9. Use Flash whenever possible – FALSE10.When using Flash, ALWAYS incorporate Techno music – FALSE 

Page 31: What Makes an  Interface Communicate?

VI. Future Direction of UI

A.     Take the G out of GUI.B.     Focus on information delivery in the age of information.C.     Reduce cosmetics down to functional form.D.     Integrate UI into the content and avoid separation, focusing the user’s attention to experience rather than the experience of use. 

Page 32: What Makes an  Interface Communicate?

VII.  Pay Attention to the Process - Ask Questions:A.     Why the UI?

B.     Can the information be accessible without the UI?C.     Can the UI be integrated into the content?D.     Can the content be enhanced by the UI? 

Page 33: What Makes an  Interface Communicate?

VIII. Put the G back into UI

A.     Once the content has been enhanced and the UI minimized, how does it look?B.     How does the UI communicate in conjunction to the look and feel of the page? C.     Is it well integrated?D.     What is the context within which the UI is expected to perform? How many knobs on a washing machine?E.      Turn the UI into a cohesive sub-structure of the overall branding, look, feel and content of the web site. 

Page 34: What Makes an  Interface Communicate?

IX. Ultimate Global Issues to Address in Interface Design

A.     Accessibility: Bandwidth, Netscape/IE/Opera, file size issues, alt tags for visually impaired, plug-ins.B.     Navigability: How well is the site’s architecture integrated and designed for ease of motion within the site? C.     Continuity: Page to page flow issues.D.     Scalability: Can you add to the structure or modify it? Is it a modular or dead-end design?E.      Context Sensitivity: How does the interface reinforce the content of the web site and positively reinforce the brand?