Interaction Design: Communicating Effectively
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Interaction Design: Communicating Effectively

on

  • 411 views

Presentation to the Canada West Coast chapter of STC in January 2003.

Presentation to the Canada West Coast chapter of STC in January 2003.

Statistics

Views

Total Views
411
Views on SlideShare
411
Embed Views
0

Actions

Likes
2
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • © 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)

Interaction Design: Communicating Effectively Presentation Transcript

  • 1. © 20 0 1 Andre a L. Am e s /Uce ntrics (© 1 9 9 5-20 0 0 ve rbalim ag e ry) 1Interaction DesignCommunicating Effectivelywith InteractionAndrea L. AmesOwner/Consultant, UcentricsRegion 8 Director-Sponsor, STCCertificate Coordinator and Instructor, UCSCExt.Principal Technical Writer, Vertical Networks
  • 2. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 2About 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 andinteractive information systems, including Web Coordinator of two University of California, SantaCruz, Extension technical communicationcertificates Society for Technical Communication Board ofDirectors
  • 3. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 3Discussion 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) 4Why You Should BeConcerned WithInteraction Shouldn’t be a big surprise—you’ve probably beenconcerned with interaction for a long time Communicates the organization, access, andmeaning of text Develop structures to make this easier How? Approach online-information designas user interface design Adopt a dynamic, participative model ofuser interface design
  • 5. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 5Prerequisite: 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) 6User-Centered Design andDevelopment Process
  • 7. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 7Designing Software andInteractive InformationSystem InterfacesInformation: Architecture and designInteraction: Navigation architectureand interaction designVisual: Layout/placement andillustrationAlgorithm: Behind-the-scenes supportfor interactions, including filearchitecture
  • 8. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 8GUI Design Principles(Jeff Johnson, GUIBloopers) Focus on users and their tasks, not thetechnology 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) 9More GUI DesignPrinciples:“The Humane Interface”(Jef Raskin, TheHumanInterface)Responsive to human needsConsiderate of human frailtiesUsers should set the pace ofinteraction
  • 10. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 10Principles 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 andresults Coherent, consistent system image
  • 11. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 11Principles of Good Design(of “Things”) (cont.)(Don Norman, TheDesignof EverydayThings, etc.) Good mappings: User can determinerelationships 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) 12InteractionCharacteristics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) 13Standards 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) 14Thinkof Interaction AsConversation Make it useful, helpful, and “polite” Alan Cooper, The Inm ate s are Running theAsylum H. Paul Grice (psychologist), regardingconversation Quality: Say true things Quantity: Say neither too muchnor too little Relevance: Say things that relate tothe topic at hand Clarity: Say things clearly and well
  • 15. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 15Minimizing ErrorMust validate (usability test) for this toworkWatch for Errors made repeatedly when using forthe first time Things advanced users do to work arounddesign problems
  • 16. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 16Responding andEncouraging InteractionReally must understand audience well(analysis) for this to workAdaptive interfaces Interface changes as user learns anduses it Example: MS Office “short” menusControversial
  • 17. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 17NavigationAvoid it (the fewer clicks, the better)Provides a way for users to makechoices, refining contentSuggests structure andorganization; closelylinked with informationarchitecture and filearchitecture
  • 18. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 18Navigation ProvidesContextTells me:Where I amWhere I’ve been and how I can getbackWhere I can go from here and how Ican get there
  • 19. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 19Hypertext NavigationSystems: Hierarchy Most navigationsystems begin thisway or are this waythroughout Typical(strict, linear) Radial(hub-and-spoke)First LevelSecond LevelThird Level
  • 20. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 20Fundamental HierarchicalLinking(Dave Farkas) Systematic secondary links Associative secondary links Converging primary links Fundamental links may be Upward-pointing to home page or higher-levelnode 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) 21Hierarchical Linking:Systematic SecondaryLinks (Dave Farkas)First LevelSecond LevelThird LevelSystematic SecondaryLinks
  • 22. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 22Hierarchical Linking:Associative SecondaryLinks (Dave Farkas)First LevelSecond LevelThird LevelSystematic SecondaryLinksAssociativeSecondaryLink
  • 23. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 23Hierarchical Linking:Converging PrimaryLinks (Dave Farkas)First LevelSecond LevelThird LevelSystematic SecondaryLinksConvergingPrimary Links
  • 24. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 24Opportunistic Linking(Dave Farkas)Used to spotlight content Shortcut links Duplicate links Ad hoc linksAd HocLinkShortcutLinkDuplicateLink
  • 25. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 25Navigation By Any OtherName… Global/site: Employs standard rules and typicallycomplements hierarchical navigation systems(systematic secondary linking) Local/sub-site: Used on a collection of pages withina larger site with a common style and sharednavigation mechanism unique to those pages(systematic linking on tertiary pages) Editorial (links embedded within text): Editorial vs.architectural; editor/content specialist determinesappropriate 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 toHierarchies
  • 27. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 27Matrix Example:fatbrainBestsellersNew TitlesMonthly PromotionsAll SubjectsComputing& InternetBusinessEngineering & ScienceMedicine & BiotechTraining &CertificationGeneral Interest
  • 28. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 28Navigation DesignPrinciples(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) 29Navigation DesignPrinciples (cont.)(JenniferFleming, WebNavigation)Navigation should alsoRequire an economy of action andtime (“Are we there, yet?”)Provide clear visual messages (notjust “lipstick on the pig”)Use clear and understandable labels(information)
  • 30. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 30Navigation DesignPrinciples (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) 31Common InteractionMechanismsNavigation mechanismsHiding and showing—or expandingand contracting—textForm elements“Pop-ups” or openinga new windowNon-scrolling regions
  • 32. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 32Navigation Mechanisms “Traditional” access methodse.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
  • 33. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 33Hiding/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)
  • 34. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 34FormElements Take advantage of GUIstandards/heuristics May be very familiar tousers of particularsoftware/OS platform (e.g.,Mac or Windows) Mechanisms Typical user-interface widgetsimplemented in HTML Back-end functionality requiresserver-side scripts/programs
  • 35. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 35Pop-Ups orOpening 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)
  • 36. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 36Non-Scrolling RegionsSupports navigationKeeps menus, etc., persistent (alwaysvisible)Mechanisms HTML onlye.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) 37Things That Bug UsBlinkingGratuitous animation and multimediaRude, obscure, andinconsistent behaviorInterrupting tasks
  • 38. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 38More 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) 39Web-Based InteractionTechnolgies: DHTML Components HTML: Markup language and itsDocument Object Model (DOM) JavaScript, VBScript, etc.: Scriptinglanguage Cascading Style Sheets (CSS): Stylelanguage No client installation
  • 40. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 40HTML DOMA hierarchyWindow (optional)DocumentForm (if present)ObjectProperty (attribute)/methodValue/actionProvides mechanism to name andlocate objects
  • 41. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 41Web-Based InteractionTechnolgies: Flash Developed byMacromedia Requires installingFlash Animation tool Develop interfaces likeinteractive film/movie Macromedia Directorwas precursor
  • 42. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 42Where to Go From Here:Skills and Knowledge Focus on technologies, no t tools Cognitive psychology (how people learnand remember) Human factors, usability (including usabilitytesting), and user-centered developmentprocesses Audience analysis—esp. contextual inquiry Visual design User-interface design
  • 43. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 43What About Writing andInformation??Information architectureOnline document designInteraction designModular writingMinimalism
  • 44. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 44Resources:Learning the Skills andGaining the Knowledge HTML Writers Guide (HWG) online courses in Web-based technologies: www.hwg.org Bentley College online courses in informationdesign: www.bentley.edu University of California, Los Angeles, Extensionprogram in technical communication:www.unex.ucla.edu Christchurch (NZ) Polytechnic Instituteof Technology’s Graduate Diploma ofTechnical Communication:courseweb.chchpoly.ac.nz:8083/techwrit/
  • 45. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 45Resources:Print Books and Articles Beyer, Hugh and Karen Holtzblatt,Co nte xtualDe sig n: ACusto m e r-Ce nte re dAppro ach to Syste m s De sig n Constantine, Larry and LucyLockwood, So ftware fo r Use :APracticalGuide to the Mo de lsand Me tho ds o f Usag e -Ce nte re d De sig n Cooper, Alan The Inm ate s Are Running theAsylum
  • 46. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 46Resources:Print Books andArticles (cont.) Farkas, David and Jean, Principle s o fWe 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 andDo s fo r So ftware De ve lo pe rs and We bDe 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) 47Resources:Print Books andArticles (cont.) Normal, Don, The De sig n o f Eve rydayThing s and The Psycho lo g y o f Eve rydayThing s Raskin, Jef, The Hum ane Inte rface Redish, Janice C. and Judith A. Ramey,“Special section: Measuring the value addedby professional technical communicators.”Te chnicalCo m m unicatio n, 42(1), 2/95
  • 48. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 48Resources:Web Sites IBM’s Ease of Use site: www.ibm.com/easy/ uidesign.net Interaction DesignWebzine: 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 favoritesearch engine
  • 49. © 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 49Resources:ProfessionalOrganizations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) 50Contacting AndreaWeb: www.ucentrics.com (comingsoon!)or www.verbal-imagery.comE-mail: andrea@ucentrics.comPhone: 650.365.7520