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?
How does an interface communicate?
Wait a minute—does an interface
communicate? Communicate what? Is
that what it’s for?
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
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
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
http://www.jnd.org/dn.mss/affordances-anddesign.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
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?
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
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?
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
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?
User research
Data analysis
Brainstorming
Epinions.com Use and Interaction
Model
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?
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?
Interfaces communicate with
Text – labels, instructions
Pictures – icons, widgets
Sounds – feedback
Structure – process
How do you make sure your users ‘get
it’
Be explicit and clear
Words are clearer than
pictures
vs.
Get email!
Use full phrases
Use icons to support
text, not in place of
vs.
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
Which is most appropriate?
Media
Player
Winamp
Quicktime
“Crank it up!”
“Turn that down!”
Volume is up/down
Control Panel
Communicate with appropriate imagery
Not for the *interface* but to create a gestalt
Non geeks beware!
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…
Amazon
Lycos
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!
Raymond Pirouz’s Original Notes. The
following slides are all him
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 buttonmaking.
C. Interface design IS about humanizing the
non-human.
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
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
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?
V.
Top 10 Misconceptions Regarding
Web GUI Design
1. All sites need to look like Amazon or Yahoo –
FALSE
2. An interface “metaphor” MUST exist –
FALSE
3. Site maps MUST be made available –
FALSE
4. Hypertext navigation is ALL YOU NEED –
FALSE
5. People are lame and won’t get it…they need
help – FALSE
6. DHTML makes for the coolest nav. elements
– FALSE
7. Always design with technology in mind –
FALSE
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.
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
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
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?