Interaction Design: Communicating Effectively

Click here to load reader

download Interaction Design: Communicating Effectively

of 50

  • date post

    27-Jan-2015
  • Category

    Design

  • view

    112
  • download

    3

Embed Size (px)

description

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

Transcript of 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) 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 usabilityanalysis, 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 Shouldnt be a big surpriseyouve 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 SpoolsUsers 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 InterfacesInformation: Architecture and designInteraction: Navigation architectureand interaction designVisual: Layout/placement andillustrationAlgorithm: 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 Dont 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 needsConsiderate of human frailtiesUsers 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) 12InteractionCharacteristicsStandards and heuristicsConversational aspectsInformational/assisting aspects Minimizing error Responding Encouraging interactionOrganizational aspects: Navigation 13. 2001 Andrea L. Ames/Ucentrics ( 1995-2000 verbal imagery) 13Standards and HeuristicsA bit of a red herringKnow 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 ErrorMust validate (usability test) for this toworkWatch 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 InteractionReally must understand audience well(analysis) for this to workAdaptive interfaces Interface changes as user learns anduses it Example: MS Office short menusControversial 17. 2001 Andrea L. Ames/Ucentrics ( 1995-2000 verbal imagery) 17NavigationAvoid it (the fewer clicks, the better)Provides a way for users to makechoices, refining contentSuggests structure andorganization; closelylinked with informationarchitecture and filearchitecture 18. 2001 Andrea L. Ames/Ucentrics ( 1995-2000 verbal imagery) 18Navigation ProvidesContextTells me:Where I amWhere Ive been and how I can getbackWhere 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) 26Linear, like tutorialsMatrix, like fatbrainMultipath, like wizardsWeb, 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 shouldBe easy to learnRemain consistentProvide feedbackAppear in contextOffer alternatives 29. 2001 Andrea L. Ames/Ucentrics ( 1995-2000 verbal imagery) 29Navigation DesignPrinciples (cont.)(JenniferFleming, WebNavigation)Navigation should alsoRequire 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 shouldBe appropriate to the sites purpose(know your user!)Support users goals and behaviors(know your user!) 31. 2001 Andrea L. Ames/Ucentrics ( 1995-2000 verbal imagery) 31Common InteractionMechanismsNavigation mechanismsHiding and showingor expandingand contractingtextForm elementsPop-ups or openinga new windowNon-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 theyre needed Combines information for printing Mechanisms HTML Help Active X controle.g., Online Help Journal tag + JavaScripte.g., AutoCAD Help (Polar command) Layers (

and 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 widgetsimplem