© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 1
Interaction Design
Communicating Effectively with Interaction
Andrea L. AmesOwner/Consultant, UcentricsRegion 8 Director-Sponsor, STCCertificate Coordinator and Instructor, UCSC Ext.Principal Technical Writer, Vertical Networks
© 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
© 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
© 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 5
Prerequisite: A User-Centered Process, Esp. Audience Analysis Before 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 6
User-Centered Design and Development Process
© 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 8
GUI Design Principles(Jeff Johnson, GUI Bloopers)
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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 9
More GUI Design Principles: “The Humane Interface”(Jef Raskin, The Human Interface)
Responsive to human needsConsiderate of human frailtiesUsers should set the pace of interaction
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 10
Principles of Good Design (of “Things”)(Don Norman, The Design of Everyday Things, 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 11
Principles of Good Design (of “Things”) (cont.)(Don Norman, The Design of Everyday Things, 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 12
Interaction CharacteristicsStandards and heuristicsConversational aspects Informational/assisting aspects
Minimizing error Responding Encouraging interaction
Organizational aspects: Navigation
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 13
Standards and HeuristicsA bit of a red herringKnow your users!No real Web standards
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 14
Think of Interaction As Conversation Make it useful, helpful, and “polite” Alan Cooper, The Inmates 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 15
Minimizing ErrorMust 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 16
Responding and Encouraging InteractionReally 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 17
NavigationAvoid 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 18
Navigation Provides ContextTells me:Where I amWhere I’ve been and how I can get back
Where I can go from here and how I can get there
© 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
© 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 21
Hierarchical Linking:Systematic Secondary Links (Dave Farkas)
First Level
Second Level
Third Level
Systematic SecondaryLinks
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 22
Hierarchical Linking:Associative Secondary Links (Dave Farkas)
First Level
Second Level
Third Level
Systematic SecondaryLinks
Ass
ocia
tive
Second
ary
Link
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 23
Hierarchical Linking:Converging Primary Links (Dave Farkas)
First Level
Second Level
Third Level
Systematic SecondaryLinks
ConvergingPrimary Links
© 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 HocLink
ShortcutLink
DuplicateLink
© 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)
© 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 27
Matrix Example:fatbrain
BestsellersNew TitlesMonthly PromotionsAll SubjectsComputing & InternetBusinessEngineering & ScienceMedicine & BiotechTraining & CertificationGeneral Interest
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 28
Navigation Design Principles (Jennifer Fleming, Web Navigation)
Navigation shouldBe easy to learnRemain consistentProvide feedbackAppear in contextOffer alternatives
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 29
Navigation Design Principles (cont.)(Jennifer Fleming, Web Navigation)
Navigation should alsoRequire 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)
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 30
Navigation Design Principles (cont.)(Jennifer Fleming, Web Navigation)
Finally, navigation shouldBe appropriate to the site’s purpose (know your user!)
Support users’ goals and behaviors (know your user!)
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 31
Common Interaction MechanismsNavigation mechanismsHiding and showing—or expanding and contracting—text
Form elements“Pop-ups” or opening a new window
Non-scrolling regions
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 32
Navigation Mechanisms “Traditional” access methods
e.g., TOCs, indexes, etc.
Rolloverse.g., STC Region 8 Web site
Controlling the appearance of linkse.g., Dreamweaver help
Pull-down or pop-up menuse.g., fatbrain
Navigation bars/buttonbarse.g., Dreamweaver help, VNI training
© 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 controle.g., Online Help Journal
<iframe> tag + JavaScripte.g., AutoCAD Help (Polar command)
Layers (<DIV> and <SPAN> tags) + JavaScripte.g., Visio Help (Close Window topic in Favorites)
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 34
Form Elements 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
© 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 JavaScripte.g., Visio Help (Creating Flowcharts topic in Favorites: Example link)
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 36
Non-Scrolling RegionsSupports navigationKeeps 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)
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 37
Things That Bug UsBlinkingGratuitous animation and multimedia
Rude, obscure, and inconsistent behavior
Interrupting tasks
© 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
© 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 40
HTML DOMA hierarchy
Window (optional) Document Form (if present) Object Property (attribute)/method Value/action
Provides mechanism to name and locate objects
© 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 42
Where to Go From Here: Skills and Knowledge Focus on technologies, not 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 43
What About Writing and Information?? Information architectureOnline document design Interaction designModular writingMinimalism
© 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/
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 45
Resources:Print Books and Articles Beyer, Hugh and Karen Holtzblatt,
Contextual Design: A Customer-Centered Approach to Systems Design
Constantine, Larry and Lucy Lockwood, Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design
Cooper, Alan The Inmates Are Running the Asylum
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 46
Resources:Print Books and Articles (cont.)
Farkas, David and Jean, Principles of Website Design (to be released late in 2001)
Fleming, Jennifer, Web Navigation Hackos, JoAnn and Janice (Ginny) Redish,
User and Task Analysis for Interface Design Johnson, Jeff, GUI Bloopers: Don’ts and Dos
for Software Developers and Web Designers. Nielsen, Jakob, Designing Web Usability: The
Practice of Simplicity
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 47
Resources:Print Books and Articles (cont.)
Normal, Don, The Design of Everyday Things and The Psychology of Everyday Things
Raskin, Jef, The Humane Interface Redish, Janice C. and Judith A. Ramey,
“Special section: Measuring the value added by professional technical communicators.” Technical Communication, 42(1), 2/95
© 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
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 49
Resources:Professional OrganizationsUsability Professionals’ Association (www.upassoc.org)
STC’s Usability SIG (www.stc.org/pics/usability/)
ACM’s SIGCHI (www.acm.org/chi/)
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 50
Contacting AndreaWeb: www.ucentrics.com (coming soon!) or www.verbal-imagery.com
E-mail: [email protected]: 650.365.7520
Top Related