Interaction Design: Communicating Effectively

© 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

© 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

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

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

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

User-Centered Design and
Development Process

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

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

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

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

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

Interaction
Characteristics
Standards and heuristics
Conversational aspects
Informational/assisting aspects
 Minimizing error
 Responding
 Encouraging interaction
Organizational aspects: Navigation

Standards and Heuristics
A bit of a red herring
Know your users!
No real Web standards

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

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

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

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

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

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

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

Hierarchical Linking:
Systematic Secondary
Links (Dave Farkas)
First Level
Second Level
Third Level
Links

Associative Secondary
Links (Dave Farkas)
First Level
Second Level
Third Level
Links
A
ssociative
Secondary
Link

Converging Primary
Links (Dave Farkas)
First Level
Second Level
Third Level
Links
Converging
Primary Links

Opportunistic Linking
(Dave Farkas)
Used to spotlight content
 Shortcut links
 Duplicate links
 Ad hoc links
Ad Hoc
Link
Shortcut
Link
Duplicate
Link

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)

Linear, like tutorials
Matrix, like fatbrain
Multipath, like wizards
Web, like chaos 
Alternatives to
Hierarchies

Matrix Example:
fatbrain
Bestsellers
New Titles
Monthly Promotions
All Subjects
Computing& Internet
Business
Engineering & Science
Medicine & Biotech
Training &
Certification
General Interest

Navigation Design
Principles
(JenniferFleming, WebNavigation)
Navigation should
Be easy to learn
Remain consistent
Provide feedback
Appear in context
Offer alternatives

Navigation Design
Principles (cont.)
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)

Navigation Design
Principles (cont.)
Finally, navigation should
Be appropriate to the site’s purpose
(know your user!)
Support users’ goals and behaviors
(know your user!)

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

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

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)

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

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)

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)

Things That Bug Us
Blinking
Gratuitous animation and multimedia
Rude, obscure, and
inconsistent behavior
Interrupting tasks

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

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

HTML DOM
A hierarchy
Window (optional)
Document
Form (if present)
Object
Property (attribute)/method
Value/action
Provides mechanism to name and
locate objects

Web-Based Interaction
Technolgies: Flash
 Developed by
Macromedia
 Requires installing
Flash
 Animation tool
 Develop interfaces like
interactive film/movie
 Macromedia Director
was precursor

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

What About Writing and
Information??
Information architecture
Online document design
Interaction design
Modular writing
Minimalism

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/

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

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

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

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

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

Contacting Andrea
Web: www.ucentrics.com (coming
soon!)
or www.verbal-imagery.com
E-mail: andrea@ucentrics.com
Phone: 650.365.7520

Interaction Design: Communicating Effectively

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (12)

Similar a Interaction Design: Communicating Effectively

Similar a Interaction Design: Communicating Effectively (20)

Más de Andrea L. Ames

Más de Andrea L. Ames (19)

Último

Último (20)

Interaction Design: Communicating Effectively

Notas del editor