What makes an interface communicate
This presentation is the property of its rightful owner.
Sponsored Links
1 / 34

What Makes an Interface Communicate? PowerPoint PPT Presentation


  • 48 Views
  • Uploaded on
  • Presentation posted in: General

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?

Download Presentation

What Makes an Interface Communicate?

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


What makes an interface communicate

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

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?


Interfaces enable tool use

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?


Well no

Well, no

  • Interface communication is important in two primary respects

  • What you can do with the system

  • Feedback from the system


1 what you can do with the system

1. What you can do with the system

  • When 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”


Affordances the strongest communication tool

Affordances – The strongest communication tool

  • http://www.jnd.org/dn.mss/affordances-and-design.html

  • Coined by JJ Gibson, popularized by Don Norman in Design of Everyday Things

  • What interactions does the interface seem to afford?


Users seek affordances

Users seek affordances

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


So isn t that like metaphor

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


2 feedback from the system

2. Feedback from the system

  • Interfaces communicate what’s happening ‘behind the scenes’

  • Sometimes explicit through messages

  • Typically implied through form


Wait a minute isn t interface communication about branding

Wait a minute. Isn’t “interface communication” about branding?

  • In part

  • To the degree it helps remind people where they are—a very important quality of interface in the contextless morass that is The Web


Develop a conceptual model

Develop a conceptual model

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

  • Ensures unity of design

  • Unexpected ideas inevitably emerge


How to develop a model

How to develop a model?

  • User research

  • Data analysis

  • Brainstorming


Epinions com use and interaction model

Epinions.com Use and Interaction Model


Wait a minute isn t that like a metaphor

Wait a minute. Isn’t that like a metaphor?

  • Well, yes.

  • But don’t express it literally.


Okay i ve got a model now what

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”)


How do you communicate the model

How do you communicate the model?

  • Interfaces communicate with

    • Text – labels, instructions

    • Pictures – icons, widgets

    • Sounds – feedback

    • Structure – process


How do you make sure your users get it

How do you make sure your users ‘get it’

  • Be explicit and clear

  • Words are clearer than pictures

  • Use full phrases

  • Use icons to support text, not in place of

vs.

Get email!

vs.


A different kind of metaphor

A different kind of metaphor

  • All language is ruled by metaphor

  • Such conceptual metaphors both determine and illuminate how we think

  • Metaphors We Live By, Lakoff and Johnson

  • The future is AHEAD of us, the past BEHIND us

  • Time is MONEY


Expressions of conceptual metaphor setting volume

Expressions of conceptual metaphor – Setting volume

  • Which is most appropriate?

MediaPlayer

Winamp

Quicktime

“Crank it up!”

“Turn that down!”

Volume is up/down

Control Panel


Communicate with appropriate imagery

Communicate with appropriate imagery

  • Not for the *interface* but to create a gestalt

Non geeks beware!


Interfaces can t not communicate

Interfaces can’t NOT communicate

  • People will react as if communicated with

  • The Media Equation, Reeves and Nass

    • Assumed: feelings, politeness, flattery, etc.

    • Watch out for abruptness and rudeness

    • It seems condescending—but it isn’t


Case study let s wander around

Case Study—Let’s Wander Around…

  • Amazon

  • Lycos


Resources

Resources

  • Tog on Interface, Tognazzini

  • Metaphors We Live By, Lakoff and Johnson

  • The Media Equation, Reeves and Nass,

  • Designing the User Interface, Shneiderman

  • Interface Culture, Johnson

  • The Humane Interface, Raskin

  • The Art of Human-Computer Interface Design, Laurel


Thanks

Thanks!


Raymond pirouz s original notes the following slides are all him

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


I interface design

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.


Ii interface design a matter of usability

II.Interface Design : A Matter of Usability

  • A.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.


Iii the challenge

III.The Challenge

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


Iv the interface design discipline teams working to create balance

IV.The Interface Design Discipline : Teams Working to Create Balance

  • A.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?


Top 10 misconceptions regarding web gui design

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


Future direction of ui

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.


Vii pay attention to the process ask questions

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?


Viii put the g back into ui

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.


Ix ultimate global issues to address in interface design

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?


  • Login