the flash usability guide - springer978-1-4302-5465-2/1.pdf · the flash usability guide ......
TRANSCRIPT
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