The Flash Usability Guide

Interacting with Flash MX

Chris MacGregor Crystal Waters

David Doult Bob Regan

Andrew Kirkpatrick Peter Pinch

The IFlash Usability Guide Interacting with Flash MX

© 2002 Apress

Originally published by friends of ED in 2002

All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.

The authors and publisher have made every effort in the preparation of this book to ensure the accuracy of the information. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, friends of ED nor its dealers or distributors will be held liable for any damages caused or alleged to be caused either directly or indirectly by this book.

First Printed August 2002

Trademark Acknowledgements

friends of ED has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, friends of ED cannot guarantee the accuracy of this information.

Extracts from adidas websites are reproduced by consent of adidas International a.v. adidas, the adidas logo and the three stripe trade mark are registered trade marks of the adidas-Salomon group.

ISBN 978-1-59059-201-4 ISBN 978-1-4302-5465-2 (eBook) DOI 10.1007/978-1-4302-5465-2

The IFlash Usability Guide Interacting with Flash MX

Credits

Authors Chris MacGregor

Crystal Waters David Doull Bob Regan

Andrew Kirkpatrick Peter Pinch

Commissioning Editor Ben Renow-Clarke

Graphic Editor Ty Bhogal

Cover Design Katy Freer

Editors Paul Thewlis

Dan Squier Alan McCann

Author Agent Gaynor Riopedre

Project Manager Richard Harrison

Indexer Simon Collins

Technical Reviewers Marco Baraldi Eng Wei Chua Clifton Evans Steve Kirby Vibha Roy Eric Vardon

Proofreaders Ben Renow-Clarke Simon Collins Richard Harrison Fiona Murray Paul Thewlis

Managing Editor Ben Huczek

The Flash Usability Guide

Chris MacGregor www.macgregor.net Chris is an Interaction Designer with MacGregor Media in Houston, Texas. He consults with clients across the world to improve the usability of their Flash projects. In addition to his award-winning work, he is recognized as a leading proponent of Flash and usability. He is the publisher of Flazoom.com, a popular Flash critique site and author of a number of articles focusing on deploying usable Flash content. In 2001 Macromedia published his Flash usability white paper entitled "Developing User-Friendly Flash Content."

Crystal Waters www.typo.com Crystal has been writing about consumer-oriented technology since the 80s, back when 5MB hard drives were a novel upgrade. She is author of two books, Web Concept & Design, and Universal Web Design (New Riders), and of many, many articles. She has been an editor at a number of magazines and was director of MFWeb conferences, among other roles, and is a long-distance charity cyclist and avid kayak-fisherman. She lives and fishes with her boyfriend Dwayne (who took this photo) and dog Nellie (pictured) in Vermont. Her sites are typo.com and girlbike.com. She likes parentheses (obviously)­and, erm, dashes.

David Doult www.artifactinteractive.com.au David is an Australian freelance developer specializing in building applications in Flash. He's based in Adelaide and is best known for his sites smallblueprinter.com, urbanev.com and artifactinteractive.com.au.

Author Biographies

Bob Regan Bob is the senior product manager for accessibility at Macromedia. In that role, he works with designers, developers, and engineers from around the world to communicate existing strategies for accessibility as well as develop new strategies. He works with engineers and designers within Macromedia to develop new techniques and improve the accessibility of Macromedia tools.

Bob has a Masters degree from Columbia University in Education. He is currently a doctoral student in Education at the University of Wisconsin, Madison where he lives now. Bob spent six years as a teacher and technology leader in Chicago and New York City.

Andrew Kirkpatrick Andrew is Project Manager for the Access to Rich Media Project at the CPBIWGBH National Center for Accessible Media (NCAM) in Boston. He is focused on Web accessibility, with emphasis on streaming and interactive media accessibility. Andrew is involved with NCAM's work with the accessibility efforts of companies such as Macromedia and AOL, and is on the development team for NCAM's software for creating captions and audio descriptions, MAGpie. Andrew's work creating an online resource for developers interested in making accessible rich media can be accessed at http://ncam.wgbh.orglrichmedia.

Peter Pinch Peter is Director of Technology for Interactive Content at WGBH Interactive, part of the WGBH Educational Foundation in Boston. WGBH Interactive produces educational web sites, DVDs, and Interactive Television for programs such as This Old House, NOVA, Arthur and many others. Peter's most recent Flash project was "Zoot Suit Culture" for the PBS program American Experience. Peter has taught Flash labs at Yale and Harvard, and currently teaches Educational Web Design at Marlboro College.

The Flash Usability Guide

Introduction What this book is about ............................................................................................................................ 1 What we expect you to know ......................................... ; ........................................................................ 2 How the book looks ................................................................................................................................... .3

Flash vs. Usability 1 Flash in control .............................................................................................................................................. 8

Too much power? ................................................................................................................................ 9 Too little restraint? ............................................................................................................................ 11 Whose computer is it anyway? ...................................................................................................... 14 Designers use the Web differently ................................................................................................ 15 Who has the need for speed? ........................................................................................................ 18 Biting the hand that feeds .............................................................................................................. 19

Year 2000: the Flash backlash ................................................................................................................ 23 Addressing the critics ........................................................................................................................ 24

Accessibility ................................................................................................................................ 28 Modified links ............................................................................................................................ 28 Plug-ins ........................................................................................................................................ 28 Internationalization and localization .................................................................................... 29

Whose contribution counts where? 2

Taking it easy, making it easy ................................................................................................................. .36 What's intuitive for you may not be intuitive to them ......................................................... .37

What is an average user? ....................................................................................................................... .40 The access method ............................................................................................................................ 42

User hardware and software limitations ............................................................................ 44 The people factor ............................................................................................................................. .50

The language gap ..................................................................................................................... .5 1 "How much?!" ........................................................................................................................... .52 User disabilities .......................................................................................................................... 54

So many people, so little control ......................................................................................................... .55 We can't be our own beta testers ............................................................................................... .57 Education is a two-way street ....................................................................................................... .58

Your client as student .............................................................................................................. 59 The client as teacher .............................................................................................................. 60

Choosing Flash 3 HTMl vs. Flash - comparing technologies .......................................................................................... 65 HTMl in perspective .................................................................................................................................. 67

Responding to the user ............................................................................................................ 68 Waiting for the server .............................................................................................................. 68

Flash in perspective .......................................................................................................................... 70 More responsive systems ........................................................................................................ 71 More intuitive interactions ...................................................................................................... 72 Browser and platform-independent interactions ........................................................... .74 Cost-competitive ....................................................................................................................... .75 New ways to present information ....................................................................................... .76

Future Fridges Conference web site .................................................................................................... 81

Table of Contents

The brief - defining the project's scope .................................................................................... 81 Company Overview .................................................................................................................. 82 Requirements Definition .......................................................................................................... 82 Site Overview .............................................................................................................................. 82 Functional Requirements ...................................................................................................... 83 The User Experience ................................................................................................................ 84 Deliverables ................................................................................................................................ 84

Response to the brief ...................................................................................................................... 84 Accessibility Issues .................................................................................................................... 86 Other scope issues .................................................................................................................... 87

Best practices for Flash development .................................................................................................. 89 Ask yourself: do you need Flash? .................................................................................................. 89

Can Flash simplify the user's task? ...................................................................................... 91 Or will Flash complicate things? ............................................................................................ 95 Does Flash add anything to the experience? .................................................................... 97

Find a useful balance of HTML and Flash .................................................................................. 98 Tips for HTMUFlash integration ............................................................................................ 99

Choosing usability 4 What does usability mean in practice? .............................................................................................. 106

Easy ...................................................................................................................................................... 108 Intuitive .............................................................................................................................................. 110 Efficient .............................................................................................................................................. 115 Satisfying ............................................................................................................................................ 117

Usability is not for browsing ................................................................................................................ 119 Responding to client feedback ............................................................................................................ 120

What if the client doesn't accept our recommendation? .................................................... 122 Why usability matters .............................................................................................................................. 124

Poor usability affects communication ........................................................................................ 124 Poor usability affects the brand .................................................................................................. 125 Users break the system .................................................................................................................. 126 The competition is just a click away... .. .................................................................................... 128 Usability is a key to success .......................................................................................................... 129 Good usability will help users achieve their goals ................................................................ 129 Good usability will bring users back .......................................................................................... 130 Good usability can help to build a brand ................................................................................ 131

Selling usability to clients ...................................................................................................................... 132 Developing a user profile ...................................................................................................................... 133

Research the users .......................................................................................................................... 135 Establish dichotomies about users .............................................................................................. 135

Building user profiles .............................................................................................................................. 138 Who are our users? ........................................................................................................................ 138

Information from the client ................................................................................................ 139 Clues from marketing ............................................................................................................ 141 Users from the media ............................................................................................................ 143

Building a dichotomy ...................................................................................................................... 144 User profile overview ...................................................................................................................... 145 Sample users .................................................................................................................................... 146

The Flash Usability Guide

Conventions and metaphors 5 Lessons from history .............................................................................................................................. 152

Learning curve .................................................................................................................................. 152 Trust .................................................................................................................................................... 153 Portability .......................................................................................................................................... 154

How can we make things seem familiar? .......................................................................................... 157 Standardization ................................................................................................................................ 157 Representation .................................................................................................................................. 158

Design conventions .................................................................................................................................. 165 Conventions for multimedia content ........................................................................................ 165 Conventions for the session planner ........................................................................................ 166

Using metaphors within the design process .................................................................................... 167 The journey metaphor for creating usable Flash .................................................................. 167 Using the journey metaphor ........................................................................................................ 168

Meeting the client's goal ...................................................................................................... 169 Client goals ................................................................................................................................................ 171

So what is our content? ................................................................................................................ 172

Structuring Flash 6 Information hierarchies .......................................................................................................................... 178 Information Architecture ...................................................................................................................... 185

What is IA? ........................................................................................................................................ 185 So why is IA a good thing? .......................................................................................................... 191

Developing an IA for our site .............................................................................................................. 193 Our 'first-cut' IA ...................................................................................................................... 195 Building on the first-cut IA .................................................................................................. 198 Our 'second cut' IA ................................................................................................................ 202

Paper Prototyping ............................................................................................................................ 203 Storyboarding ............................................................................................................................................ 206

What does Storyboarding do for us? ........................................................................................ 206 Strengths of Storyboarding .......................................................................................................... 209 Weaknesses of Storyboarding ...................................................................................................... 210

Can we apply Storyboarding anywhere? .......................................................................................... 211 Choosing how to organize your site content .................................................................................. 216

Usable interactions 7

What use is a UI? ...................................................................................................................................... 221 Elements of a good user interface ............................................................................................ 222

Clarity .......................................................................................................................................... 222 Consistency ................................................................................................................................ 222 Simplicity .................................................................................................................................... 223 User control .............................................................................................................................. 224 Responsiveness ........................................................................................................................ 225 Safety ........................................................................................................................................ 227 Aesthetics .................................................................................................................................. 228

Without navigation the user is lost ............................................................................................ 228 Toys in the interface ...................................................................................................................... 230

Building buttons ...................................................................................................................................... 231 Apply Fitt's Law to button design .............................................................................................. 231

Table of Contents

The Motion commotion ................................................................................................................ 234 Sounds like a good idea ........................................................................................................................ 235 Color and contrast .................................................................................................................................. 235

Color characteristics ........................................................................................................................ 236 Multi-colored backgrounds .......................................................................................................... 237 Picking colors .................................................................................................................................... 239 Color blindness ................................................................................................................................ 239

Rein in the excess .................................................................................................................................... 240 Designing the user interface ................................................................................................................ 242

Primary navigation .......................................................................................................................... 242 Top bar ...................................................................................................................................... 243 Left bar .......................................................................... , ........................................................... 244

Secondary navigation and content ............................................................................................ 244 Typical secondary navigation structures .......................................................................... 247 Below the navigation .............................................................................................................. 24B Pop-out menu .......................................................................................................................... 248 Expanding list ............................................................................................................................ 249

Recommended navigation ............................................................................................................ 250 Draft interface layout .................................................................................................................... 250

Draft interface layout with top navigation ...................................................................... 251 Draft interface layout with left-hand navigation ............................................................ 254

Back to our users ............................................................................................................................ 255 Results of the interface testing .......................................................................................... 256

Looking pretty .................................................................................................................................. 257 Pre-flight check ........................................................................................................................ 257 Draft design concepts ............................................................................................................ 258

Client response to interface concepts ...................................................................................... 259 The interactive prototype .................................................................................................... 260 A new request from the client ............................................................................................ 263

Showing users respect 8 The balance of power ............................................................................................................................ 268

Visual cues ........................................................................................................................................ 269 Controlling typeface ........................................................................................................................ 269 Protecting content .......................................................................................................................... 270

The P in PC stands for personal .......................................................................................................... 275 Let the user take the wheel .......................................................................................................... 277

Making a good impression .................................................................................................................... 278 Don't confuse the user .................................................................................................................. 281

Not all sites have to look alike ............................................................................................................ 284 The eyes have it .............................................................................................................................. 284 Common sense is the best remedy ............................................................................................ 287

Integrating the content .......................................................................................................................... 288 Separation of the content and the interface .......................................................................... 288

Loading the text content ...................................................................................................... 288 Content management as a usability issue ........................................................................ 289

Including text and making it usable .......................................................................................... 290 Selectable text .......................................................................................................................... 290 Readable text ............................................................................................................................ 291 Scannable text .......................................................................................................................... 291 Fitting text onto the screen .................................................................................................. 292

The Flash Usability Guide

Using a scrollbar ...................................................................................................................... 293 Using separate pages .............................................................................................................. 294

User-friendly audio and video ...................................................................................................... 295 Video .......................................................................................................................................... 295 Audio interviews ...................................................................................................................... 298 The playback interface .......................................................................................................... 298

Getting the download time down ............................................................................................. .301 How can we continue to keep the file size down? ..................................................... .302

Letting users bookmark. print. and e-mail to a friend ....................................................... .305 Bookmarking ................................................................................................................................... .305

E-mail to a friend ................................................................................................................... .307 Printing ..................................................................................................................................... .308

Think Accessibility 9

What is accessibility? ............................................................................................................................. .313 Defining disabilities ................................................................................................................................. .314 Assistive technologies ........................................................................................................................... .316

Accessibility standards ................................................................................................................... .317 Flash and accessibility standards ............................................................................................... .319 Flash MX accessibility overview ................................................................................................. .320

Flash Player 6 ............................................................................................................................ 320 Flash MX ................................................................................................................................... .320

Users with disabilities ........................................................................................................................... .322 Case 1 - Ann .................................................................................................................................... 323

Exposing structure ................................................................................................................. .323 Navigation - naming buttons ............................................................................................. .325 Coping with change ............................................................................................................... .327 Revealing state ......................................................................................................................... .328 Speaking and tab order ....................................................................................................... .330

Case 2 - Michael ............................................................................................................................. .331 Tab order ................................................................................................................................. .331 Keyboard shortcuts ............................................................................................................... .333 Hybrid pages ........................................................................................................................... .334

Case 3 - Delores ........................................................................................................................... .335 Delivering captions and subtitles ....................................................................................... .337 Adding captions manually ................................................................................................... .337 Macromedia Flash in Real and QT ..................................................................................... .338 Import captioned QT movie ............................................................................................... .338 Caption data from an XML file ........................................................................................... .338

Accessibility and our site ............................................................................................................. .342 Validation and Testing for Accessibility ........................................................................................... .343

Testing Keyboard Access ............................................................................................................... .343 Testing Captions ............................................................................................................................. .343 Testing with Screen Readers ....................................................................................................... .344

First impressions 10

Smoothing the jolt into Flash .............................................................................................................. 347 Working from extreme feedback ............................................................................................... .349 Tell users your site contains Flash ............................................................................................. .349 Add a short tutorial ....................................................................................................................... .349

Table of Contents

Don't use Flash if there's no need ............................................................................................. .353 Offering choices and feedback ........................................................................................................... .359

Choosing browser window size ................................................................................................... .360 Skip Intro ........................................................................................................................................... .363

Forms and applications ......................................................................................................................... .365 The registration form ...................................................................................................................... 365 Session details and the session planner .................................................................................... 371

Constructing a mini-application .......................................................................................... 372 Browsing the session details ................................................................................................ 373 Searching the session details ............................................................................................. .376 My session plan ....................................................................................................................... .377

Offline Flash 11

Flash on CD-ROMs .................................................................................................................................. 382 Usability tips for Flash on CD-ROM ......................................................................................... .384

Creating a projector file ....................................................................................................... .384 Auto-run feature ..................................................................................................................... .385 Creating a PC auto-run CD-ROM: ...................................................................................... 386 Creating a Macintosh auto-run CD-ROM ........................................................................ 387 Exiting ......................................................................................................................................... .388 Full-screen toggle ................................................................................................................... .389 CD burning issues ................................................................................................................... .389

Flash on kiosks .......................................................................................................................................... 391 So, how does the client exit? ..................................................................................................... .391

Flash on PDAs ............................................................................................................................................ 397 Offline Flash .............................................................................................................................................. 401

Our site on CD-ROM ...................................................................................................................... 401 Considering the context of our content .......................................................................... 402 Testing before production .................................................................................................... 402

Kiosks at the conference .............................................................................................................. 403 A session planner for Pocket PCs ................................................................................................ 405

User testing 12

Practical approaches to user testing ................................................................................................. .412 Designing a test. ............................................................................................................................... 413

Types of test .............................................................................................................................. 414 Types of result .......................................................................................................................... 416

Your role as designer ...................................................................................................................... 417 Where do you find users? ............................................................................................................ 418 Setting up scenarios ........................................................................................................................ 418 Cost factors ........................................................................................................................................ 418 Testing, testing, one, two, three... . ............................................................................................. 420

Testing things yourself ............................................................................................................................ 420 Final testing ................................................................................................................................................ 425

Testing the navigation .................................................................................................................... 425 Testing the content ........................................................................................................................ 428

Appendix: Resources and Articles on the Web Web sites ................................................................................................................................................... .433 Reports and white papers ...................................................................................................................... 434 Articles ........................................................................................................................................................ 435

Accessibility ........................................................................................................................................ 436 Usable web applications ................................................................................................................ 437 Search Engine Strategies ................................................................................................................ 438 Miscellaneous ................................................................................................................................... .438