Weitere ähnliche Inhalte
Ähnlich wie Interaction Design: Communicating Effectively (20)
Mehr von Andrea L. Ames (19)
Kürzlich hochgeladen (20)
Interaction Design: Communicating Effectively
- 1. © 20 0 1 Andre a L. Am e s /Uce ntrics (© 1 9 9 5-20 0 0 ve rbalim ag e ry) 1
Interaction Design
Communicating Effectively
with Interaction
Andrea L. Ames
Owner/Consultant, Ucentrics
Region 8 Director-Sponsor, STC
Certificate Coordinator and Instructor, UCSC
Ext.
Principal Technical Writer, Vertical Networks
- 2. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 2
About Andrea
Technical communicator since 1983
Online information presentation focus since 1989
Consultant since 1995
User-centered design and development process and start-
to-finish usability—analysis, design, testing
Focus primarily on software product user interfaces and
interactive information systems, including Web
Coordinator of two University of California, Santa
Cruz, Extension technical communication
certificates
Society for Technical Communication Board of
Directors
- 3. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 3
Discussion Topics
Why you should care about interaction
How interaction fits into a user-centered process
User-interface design principles
Characteristics of interaction
Common interaction mechanisms
Things that bug us
Web-based interaction technologies
Where to go from here: Skills and knowledge
Resources
- 4. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 4
Why You Should Be
Concerned With
Interaction
Shouldn’t be a big surprise—you’ve probably been
concerned with interaction for a long time
Communicates the organization, access, and
meaning of text
Develop structures to make this easier
How?
Approach online-information design
as user interface design
Adopt a dynamic, participative model of
user interface design
- 5. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 5
Prerequisite: A User-
Centered Process, Esp.
Audience Analysis
Be fo re design
User and task analysis: Observing,
interviewing, surveys/questionnaires
Contextual inquiry (aka, Jared Spool’s
“Users in the Mist,” site visits, field studies)
Users
Goals and tasks
Environment
- 6. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 6
User-Centered Design and
Development Process
- 7. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 7
Designing Software and
Interactive Information
System Interfaces
Information: Architecture and design
Interaction: Navigation architecture
and interaction design
Visual: Layout/placement and
illustration
Algorithm: Behind-the-scenes support
for interactions, including file
architecture
- 8. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 8
GUI Design Principles
(Jeff Johnson, GUIBloopers)
Focus on users and their tasks, not the
technology
Consider function first, presentation later
Conform to the users’ view of the task
Don’t complicate the users’ task
Promote learning
Deliver information, not just data
Design for responsiveness
Try it out on users, then fix it
- 9. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 9
More GUI Design
Principles:
“The Humane Interface”
(Jef Raskin, TheHumanInterface)
Responsive to human needs
Considerate of human frailties
Users should set the pace of
interaction
- 10. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 10
Principles of Good Design
(of “Things”)
(Don Norman, TheDesignof EverydayThings, etc.)
Visibility: User can tell
State of the device
Alternatives for action
Good conceptual model
Consistency in presentation of operations and
results
Coherent, consistent system image
- 11. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 11
Principles of Good Design
(of “Things”) (cont.)
(Don Norman, TheDesignof EverydayThings, etc.)
Good mappings: User can determine
relationships between
Actions and results
Controls and their effects
System state and what is visible
Feedback
Good and continuous
About results of actions
- 12. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 12
Interaction
Characteristics
Standards and heuristics
Conversational aspects
Informational/assisting aspects
Minimizing error
Responding
Encouraging interaction
Organizational aspects: Navigation
- 13. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 13
Standards and Heuristics
A bit of a red herring
Know your users!
No real Web standards
- 14. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 14
Thinkof Interaction As
Conversation
Make it useful, helpful, and “polite”
Alan Cooper, The Inm ate s are Running the
Asylum
H. Paul Grice (psychologist), regarding
conversation
Quality: Say true things
Quantity: Say neither too much
nor too little
Relevance: Say things that relate to
the topic at hand
Clarity: Say things clearly and well
- 15. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 15
Minimizing Error
Must validate (usability test) for this to
work
Watch for
Errors made repeatedly when using for
the first time
Things advanced users do to work around
design problems
- 16. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 16
Responding and
Encouraging Interaction
Really must understand audience well
(analysis) for this to work
Adaptive interfaces
Interface changes as user learns and
uses it
Example: MS Office “short” menus
Controversial
- 17. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 17
Navigation
Avoid it (the fewer clicks, the better)
Provides a way for users to make
choices, refining content
Suggests structure and
organization; closely
linked with information
architecture and file
architecture
- 18. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 18
Navigation Provides
Context
Tells me:
Where I am
Where I’ve been and how I can get
back
Where I can go from here and how I
can get there
- 19. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 19
Hypertext Navigation
Systems: Hierarchy
Most navigation
systems begin this
way or are this way
throughout
Typical
(strict, linear)
Radial
(hub-and-spoke)
First Level
Second Level
Third Level
- 20. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 20
Fundamental Hierarchical
Linking
(Dave Farkas)
Systematic secondary links
Associative secondary links
Converging primary links
Fundamental links may be
Upward-pointing to home page or higher-level
node
Links to utility pages (help, search, site map, etc.)
External links to pages outside the site
- 21. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 21
Hierarchical Linking:
Systematic Secondary
Links (Dave Farkas)
First Level
Second Level
Third Level
Systematic Secondary
Links
- 22. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 22
Hierarchical Linking:
Associative Secondary
Links (Dave Farkas)
First Level
Second Level
Third Level
Systematic Secondary
Links
A
ssociative
Secondary
Link
- 23. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 23
Hierarchical Linking:
Converging Primary
Links (Dave Farkas)
First Level
Second Level
Third Level
Systematic Secondary
Links
Converging
Primary Links
- 24. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 24
Opportunistic Linking
(Dave Farkas)
Used to spotlight content
Shortcut links
Duplicate links
Ad hoc links
Ad Hoc
Link
Shortcut
Link
Duplicate
Link
- 25. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 25
Navigation By Any Other
Name…
Global/site: Employs standard rules and typically
complements hierarchical navigation systems
(systematic secondary linking)
Local/sub-site: Used on a collection of pages within
a larger site with a common style and shared
navigation mechanism unique to those pages
(systematic linking on tertiary pages)
Editorial (links embedded within text): Editorial vs.
architectural; editor/content specialist determines
appropriate places for these (associative linking)
- 26. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 26
Linear, like tutorials
Matrix, like fatbrain
Multipath, like wizards
Web, like chaos
Alternatives to
Hierarchies
- 27. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 27
Matrix Example:
fatbrain
Bestsellers
New Titles
Monthly Promotions
All Subjects
Computing& Internet
Business
Engineering & Science
Medicine & Biotech
Training &
Certification
General Interest
- 28. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 28
Navigation Design
Principles
(JenniferFleming, WebNavigation)
Navigation should
Be easy to learn
Remain consistent
Provide feedback
Appear in context
Offer alternatives
- 29. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 29
Navigation Design
Principles (cont.)
(JenniferFleming, WebNavigation)
Navigation should also
Require an economy of action and
time (“Are we there, yet?”)
Provide clear visual messages (not
just “lipstick on the pig”)
Use clear and understandable labels
(information)
- 30. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 30
Navigation Design
Principles (cont.)
(JenniferFleming, WebNavigation)
Finally, navigation should
Be appropriate to the site’s purpose
(know your user!)
Support users’ goals and behaviors
(know your user!)
- 31. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 31
Common Interaction
Mechanisms
Navigation mechanisms
Hiding and showing—or expanding
and contracting—text
Form elements
“Pop-ups” or opening
a new window
Non-scrolling regions
- 32. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 32
Navigation Mechanisms
“Traditional” access methods
e.g., TOCs, indexes, etc.
Rollovers
e.g., STC Region 8 Web site
Controlling the appearance of links
e.g., Dreamweaver help
Pull-down or pop-up menus
e.g., fatbrain
Navigation bars/buttonbars
e.g., Dreamweaver help, VNI training
- 33. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 33
Hiding/Showing,
Expanding/Contracting
Resolves some topic-length issues
Hides details until they’re needed
Combines information for printing
Mechanisms
HTML Help Active X control
e.g., Online Help Journal
<iframe> tag + JavaScript
e.g., AutoCAD Help (Polar command)
Layers (<DIV> and <SPAN> tags) + JavaScript
e.g., Visio Help (Close Window topic in Favorites)
- 34. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 34
FormElements
Take advantage of GUI
standards/heuristics
May be very familiar to
users of particular
software/OS platform (e.g.,
Mac or Windows)
Mechanisms
Typical user-interface widgets
implemented in HTML
Back-end functionality requires
server-side scripts/programs
- 35. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 35
Pop-Ups or
Opening a New Window
Helps manage screen real estate
Indicates sub-processes
Hides details until they’re needed
Mechanisms
Can be done with HTML only
IE does it one way
Navigator does it another
Pretty simple JavaScript
e.g., Visio Help (Creating Flowcharts topic in Favorites:
Example link)
- 36. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 36
Non-Scrolling Regions
Supports navigation
Keeps menus, etc., persistent (always
visible)
Mechanisms
HTML only
e.g., Dreamweaver Help navigation bar
Easiest way is with frames
Can also use layers (<DIV> and <SPAN>
tags)
- 37. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 37
Things That Bug Us
Blinking
Gratuitous animation and multimedia
Rude, obscure, and
inconsistent behavior
Interrupting tasks
- 38. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 38
More Things That Bug Us
“Too much” scrolling
“Too many” clicks
Frames
Might take up screen real estate
Might slow display speed
Don’t fit with page/screen model—confusing
Add layer of complexity
Can’t bookmark content pages within frames
- 39. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 39
Web-Based Interaction
Technolgies: DHTML
Components
HTML: Markup language and its
Document Object Model (DOM)
JavaScript, VBScript, etc.: Scripting
language
Cascading Style Sheets (CSS): Style
language
No client installation
- 40. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 40
HTML DOM
A hierarchy
Window (optional)
Document
Form (if present)
Object
Property (attribute)/method
Value/action
Provides mechanism to name and
locate objects
- 41. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 41
Web-Based Interaction
Technolgies: Flash
Developed by
Macromedia
Requires installing
Flash
Animation tool
Develop interfaces like
interactive film/movie
Macromedia Director
was precursor
- 42. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 42
Where to Go From Here:
Skills and Knowledge
Focus on technologies, no t tools
Cognitive psychology (how people learn
and remember)
Human factors, usability (including usability
testing), and user-centered development
processes
Audience analysis—esp. contextual inquiry
Visual design
User-interface design
- 43. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 43
What About Writing and
Information??
Information architecture
Online document design
Interaction design
Modular writing
Minimalism
- 44. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 44
Resources:
Learning the Skills and
Gaining the Knowledge
HTML Writers Guide (HWG) online courses in Web-
based technologies: www.hwg.org
Bentley College online courses in information
design: www.bentley.edu
University of California, Los Angeles, Extension
program in technical communication:
www.unex.ucla.edu
Christchurch (NZ) Polytechnic Institute
of Technology’s Graduate Diploma of
Technical Communication:
courseweb.chchpoly.ac.nz:8083/techwrit/
- 45. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 45
Resources:
Print Books and Articles
Beyer, Hugh and Karen Holtzblatt,
Co nte xtualDe sig n: ACusto m e r-Ce nte re d
Appro ach to Syste m s De sig n
Constantine, Larry and Lucy
Lockwood, So ftware fo r Use :
APracticalGuide to the Mo de ls
and Me tho ds o f Usag e -Ce nte re d De sig n
Cooper, Alan The Inm ate s Are Running the
Asylum
- 46. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 46
Resources:
Print Books and
Articles (cont.)
Farkas, David and Jean, Principle s o f
We bsite De sig n (to be released late in 2001)
Fleming, Jennifer, We b Navig atio n
Hackos, JoAnn and Janice (Ginny) Redish,
Use r and Task Analysis fo r Inte rface De sig n
Johnson, Jeff, GUIBlo o pe rs: Do n’ts and
Do s fo r So ftware De ve lo pe rs and We b
De sig ne rs.
Nielsen, Jakob, De sig ning We b Usability:
The Practice o f Sim plicity
- 47. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 47
Resources:
Print Books and
Articles (cont.)
Normal, Don, The De sig n o f Eve ryday
Thing s and The Psycho lo g y o f Eve ryday
Thing s
Raskin, Jef, The Hum ane Inte rface
Redish, Janice C. and Judith A. Ramey,
“Special section: Measuring the value added
by professional technical communicators.”
Te chnicalCo m m unicatio n, 42(1), 2/95
- 48. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 48
Resources:
Web Sites
IBM’s Ease of Use site: www.ibm.com/easy/
uidesign.net Interaction Design
Webzine: www.uidesign.net
Usable Web: www.usableweb.com
Jakob Nielsen’s site: www.useit.com
Ask Tog: www.asktog.com
C|Net Builder’s cool tools: www.builder.com
Search for Javascript using your favorite
search engine
- 49. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 49
Resources:
Professional
Organizations
Usability Professionals’ Association
(www.upassoc.org)
STC’s Usability SIG
(www.stc.org/pics/usability/)
ACM’s SIGCHI
(www.acm.org/chi/)
- 50. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 50
Contacting Andrea
Web: www.ucentrics.com (coming
soon!)
or www.verbal-imagery.com
E-mail: andrea@ucentrics.com
Phone: 650.365.7520
Hinweis der Redaktion
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)
- © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery)