What Makes an Interface Communicate - PowerPoint PPT Presentation

Loading...

PPT – What Makes an Interface Communicate PowerPoint presentation | free to download - id: 3882d-NGJmM



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

What Makes an Interface Communicate

Description:

How does an interface communicate? Wait a minute does an interface ... Winamp. Media. Player. Control Panel 'Crank it up!' 'Turn that down!' Volume is up/down ... – PowerPoint PPT presentation

Number of Views:49
Avg rating:3.0/5.0
Slides: 35
Provided by: investment6
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: What Makes an Interface Communicate


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

2
Is that the right question?
  • How does an interface communicate?
  • Wait a minutedoes an interface communicate?
    Communicate what? Is that what its for?

3
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 doesnt tell me anything about
    itself through its interface, right?

4
Well, no
  • Interface communication is important in two
    primary respects
  • What you can do with the system
  • Feedback from the system

5
1. What you can do with the system
  • When looking at an interface, it should
    communicate the tools purpose and capabilities
  • Such communication can be done through explicit
    instruction, but is most powerful through
    affordances

6
Affordances The strongest communication tool
  • http//www.jnd.org/dn.mss/affordances-and-design.h
    tml
  • Coined by JJ Gibson, popularized by Don Norman in
    Design of Everyday Things
  • What interactions does the interface seem to
    afford?

7
Users seek affordances
  • Who here hasnt rolled their cursor over a web
    page, looking to see what turns the arrow into a
    hand?

8
So, isnt 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

9
2. Feedback from the system
  • Interfaces communicate whats happening behind
    the scenes
  • Sometimes explicit through messages
  • Typically implied through form

10
Wait a minute. Isnt interface communication
about branding?
  • In part
  • To the degree it helps remind people where they
    area very important quality of interface in the
    contextless morass that is The Web

11
Develop a conceptual model
  • Create a singular, overarching theme that
    provides the backbone for your design
  • Ensures unity of design
  • Unexpected ideas inevitably emerge

12
How to develop a model?
  • User research
  • Data analysis
  • Brainstorming

13
Epinions.com Use and Interaction Model
14
Wait a minute. Isnt that like a metaphor?
  • Well, yes.
  • But dont express it literally.

15
Okay. Ive 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.
  • Theres that word!
  • (For our needs, system image can be thought of
    as web site)

16
How do you communicate the model?
  • Interfaces communicate with
  • Text labels, instructions
  • Pictures icons, widgets
  • Sounds feedback
  • Structure process

17
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.
18
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

19
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
20
Communicate with appropriate imagery
  • Not for the interface but to create a gestalt

Non geeks beware!
21
Interfaces cant 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 condescendingbut it isnt

22
Case StudyLets Wander Around…
  • Amazon
  • Lycos

23
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

24
Thanks!
25
Raymond Pirouzs Original Notes. The following
slides are all him
26
 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.  

27
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.  

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

29
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?

30
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 wont get it…they
    need help FALSE 6. DHTML makes for the coolest
    nav. elements FALSE 7.  Always design with
    technology in mind FALSE 8.  Stay away from
    certain colors or ONLY USE certain colors
    FALSE 9. Use Flash whenever possible
    FALSE 10.When using Flash, ALWAYS incorporate
    Techno music FALSE  

31
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 users
    attention to experience rather than the
    experience of use.  

32
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?  

33
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.  

34
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 sites 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?          
About PowerShow.com