interaction design: communicating effectively

50
© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 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

Upload: andrea-l-ames

Post on 27-Jan-2015

119 views

Category:

Design


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Interaction Design: Communicating Effectively

© 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

Page 2: Interaction Design: Communicating Effectively

© 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

Page 3: Interaction Design: Communicating Effectively

© 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

Page 4: Interaction Design: Communicating Effectively

© 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

Page 5: Interaction Design: Communicating Effectively

© 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

Page 6: Interaction Design: Communicating Effectively

© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 6

User-Centered Design and Development Process

Page 7: Interaction Design: Communicating Effectively

© 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

Page 8: Interaction Design: Communicating Effectively

© 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

Page 9: Interaction Design: Communicating Effectively

© 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

Page 10: Interaction Design: Communicating Effectively

© 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

Page 11: Interaction Design: Communicating Effectively

© 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

Page 12: Interaction Design: Communicating Effectively

© 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

Page 13: Interaction Design: Communicating Effectively

© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 13

Standards and HeuristicsA bit of a red herringKnow your users!No real Web standards

Page 14: Interaction Design: Communicating Effectively

© 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

Page 15: Interaction Design: Communicating Effectively

© 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

Page 16: Interaction Design: Communicating Effectively

© 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

Page 17: Interaction Design: Communicating Effectively

© 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

Page 18: Interaction Design: Communicating Effectively

© 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

Page 19: Interaction Design: Communicating Effectively

© 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

Page 20: Interaction Design: Communicating Effectively

© 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

Page 21: Interaction Design: Communicating Effectively

© 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

Page 22: Interaction Design: Communicating Effectively

© 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

Page 23: Interaction Design: Communicating Effectively

© 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

Page 24: Interaction Design: Communicating Effectively

© 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

Page 25: Interaction Design: Communicating Effectively

© 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)

Page 26: Interaction Design: Communicating Effectively

© 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

Page 27: Interaction Design: Communicating Effectively

© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 27

Matrix Example:fatbrain

BestsellersNew TitlesMonthly PromotionsAll SubjectsComputing & InternetBusinessEngineering & ScienceMedicine & BiotechTraining & CertificationGeneral Interest

Page 28: Interaction Design: Communicating Effectively

© 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

Page 29: Interaction Design: Communicating Effectively

© 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)

Page 30: Interaction Design: Communicating Effectively

© 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!)

Page 31: Interaction Design: Communicating Effectively

© 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

Page 32: Interaction Design: Communicating Effectively

© 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

Page 33: Interaction Design: Communicating Effectively

© 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)

Page 34: Interaction Design: Communicating Effectively

© 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

Page 35: Interaction Design: Communicating Effectively

© 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)

Page 36: Interaction Design: Communicating Effectively

© 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)

Page 37: Interaction Design: Communicating Effectively

© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 37

Things That Bug UsBlinkingGratuitous animation and multimedia

Rude, obscure, and inconsistent behavior

Interrupting tasks

Page 38: Interaction Design: Communicating Effectively

© 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

Page 39: Interaction Design: Communicating Effectively

© 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

Page 40: Interaction Design: Communicating Effectively

© 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

Page 41: Interaction Design: Communicating Effectively

© 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

Page 42: Interaction Design: Communicating Effectively

© 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

Page 43: Interaction Design: Communicating Effectively

© 2001 Andrea L. Ames/Ucentrics (© 1995-2000 verbal imagery) 43

What About Writing and Information?? Information architectureOnline document design Interaction designModular writingMinimalism

Page 44: Interaction Design: Communicating Effectively

© 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/

Page 45: Interaction Design: Communicating Effectively

© 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

Page 46: Interaction Design: Communicating Effectively

© 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

Page 47: Interaction Design: Communicating Effectively

© 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

Page 48: Interaction Design: Communicating Effectively

© 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

Page 49: Interaction Design: Communicating Effectively

© 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/)

Page 50: Interaction Design: Communicating Effectively

© 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