The Flash Usability Guide

Size: px

Start display at page:

Download "The Flash Usability Guide"

Oliver Farmer
6 years ago
Views:

1 The Flash Usability Guide Interacting with Flash MX Chris MacGregor Crystal Waters David Doult Bob Regan Andrew Kirkpatrick Peter Pinch

2 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 DOI / ISBN (ebook)

3 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.

In addition to his award-winning work, he is recognized as a leading proponent of Flash and usability. He is the publisher of Flazoom.

In 2001 Macromedia published his Flash usability white paper entitled "Developing User-Friendly Flash Content." Crystal Waters www.typo.

She is author of two books, Web Concept & Design, and Universal Web Design (New Riders), and of many, many articles.

4 The Flash Usability Guide Chris MacGregor 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 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 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.

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.

Andrew Kirkpatrick Andrew is Project Manager for the Access to Rich Media Project at the CPBIWGBH National Center for Accessible Media (NCAM) in Boston.

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

5 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 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.

6 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? Whose computer is it anyway? Designers use the Web differently Who has the need for speed? Biting the hand that feeds Year 2000: the Flash backlash Addressing the critics Accessibility Modified links Plug-ins Internationalization and localization Whose contribution counts where? 2 Taking it easy, making it easy What's intuitive for you may not be intuitive to them What is an average user? The access method User hardware and software limitations The people factor The language gap "How much?!" User disabilities So many people, so little control We can't be our own beta testers Education is a two-way street Your client as student The client as teacher Choosing Flash 3 HTMl vs. Flash - comparing technologies HTMl in perspective Responding to the user Waiting for the server Flash in perspective More responsive systems More intuitive interactions Browser and platform-independent interactions Cost-competitive New ways to present information Future Fridges Conference web site... 81

7 Table of Contents The brief - defining the project's scope Company Overview Requirements Definition Site Overview Functional Requirements The User Experience Deliverables Response to the brief Accessibility Issues Other scope issues Best practices for Flash development Ask yourself: do you need Flash? Can Flash simplify the user's task? Or will Flash complicate things? Does Flash add anything to the experience? Find a useful balance of HTML and Flash Tips for HTMUFlash integration Choosing usability 4 What does usability mean in practice? Easy Intuitive Efficient Satisfying Usability is not for browsing Responding to client feedback What if the client doesn't accept our recommendation? Why usability matters Poor usability affects communication Poor usability affects the brand Users break the system The competition is just a click away Usability is a key to success Good usability will help users achieve their goals Good usability will bring users back Good usability can help to build a brand Selling usability to clients Developing a user profile Research the users Establish dichotomies about users Building user profiles Who are our users? Information from the client Clues from marketing Users from the media Building a dichotomy User profile overview Sample users

8 The Flash Usability Guide Conventions and metaphors 5 Lessons from history Learning curve Trust Portability How can we make things seem familiar? Standardization Representation Design conventions Conventions for multimedia content Conventions for the session planner Using metaphors within the design process The journey metaphor for creating usable Flash Using the journey metaphor Meeting the client's goal Client goals So what is our content? Structuring Flash 6 Information hierarchies Information Architecture What is IA? So why is IA a good thing? Developing an IA for our site Our 'first-cut' IA Building on the first-cut IA Our 'second cut' IA Paper Prototyping Storyboarding What does Storyboarding do for us? Strengths of Storyboarding Weaknesses of Storyboarding Can we apply Storyboarding anywhere? Choosing how to organize your site content Usable interactions 7 What use is a UI? Elements of a good user interface Clarity Consistency Simplicity User control Responsiveness Safety Aesthetics Without navigation the user is lost Toys in the interface Building buttons Apply Fitt's Law to button design

9 Table of Contents The Motion commotion Sounds like a good idea Color and contrast Color characteristics Multi-colored backgrounds Picking colors Color blindness Rein in the excess Designing the user interface Primary navigation Top bar Left bar..., Secondary navigation and content Typical secondary navigation structures Below the navigation... 24B Pop-out menu Expanding list Recommended navigation Draft interface layout Draft interface layout with top navigation Draft interface layout with left-hand navigation Back to our users Results of the interface testing Looking pretty Pre-flight check Draft design concepts Client response to interface concepts The interactive prototype A new request from the client Showing users respect 8 The balance of power Visual cues Controlling typeface Protecting content The P in PC stands for personal Let the user take the wheel Making a good impression Don't confuse the user Not all sites have to look alike The eyes have it Common sense is the best remedy Integrating the content Separation of the content and the interface Loading the text content Content management as a usability issue Including text and making it usable Selectable text Readable text Scannable text Fitting text onto the screen

10 The Flash Usability Guide Using a scrollbar Using separate pages User-friendly audio and video Video Audio interviews The playback interface Getting the download time down How can we continue to keep the file size down? Letting users bookmark. print. and to a friend Bookmarking to a friend Printing Think Accessibility 9 What is accessibility? Defining disabilities Assistive technologies Accessibility standards Flash and accessibility standards Flash MX accessibility overview Flash Player Flash MX Users with disabilities Case 1 - Ann Exposing structure Navigation - naming buttons Coping with change Revealing state Speaking and tab order Case 2 - Michael Tab order Keyboard shortcuts Hybrid pages Case 3 - Delores Delivering captions and subtitles Adding captions manually Macromedia Flash in Real and QT Import captioned QT movie Caption data from an XML file Accessibility and our site Validation and Testing for Accessibility Testing Keyboard Access Testing Captions Testing with Screen Readers First impressions 10 Smoothing the jolt into Flash Working from extreme feedback Tell users your site contains Flash Add a short tutorial

11 Table of Contents Don't use Flash if there's no need Offering choices and feedback Choosing browser window size Skip Intro Forms and applications The registration form Session details and the session planner Constructing a mini-application Browsing the session details Searching the session details My session plan Offline Flash 11 Flash on CD-ROMs Usability tips for Flash on CD-ROM Creating a projector file Auto-run feature Creating a PC auto-run CD-ROM: Creating a Macintosh auto-run CD-ROM Exiting Full-screen toggle CD burning issues Flash on kiosks So, how does the client exit? Flash on PDAs Offline Flash Our site on CD-ROM Considering the context of our content Testing before production Kiosks at the conference A session planner for Pocket PCs User testing 12 Practical approaches to user testing Designing a test Types of test Types of result Your role as designer Where do you find users? Setting up scenarios Cost factors Testing, testing, one, two, three Testing things yourself Final testing Testing the navigation Testing the content Appendix: Resources and Articles on the Web Web sites Reports and white papers Articles Accessibility Usable web applications Search Engine Strategies Miscellaneous

From Photoshop to Dreamweaver

From Photoshop to Dreamweaver 3 Steps to Great Visual Web Design Colin Smith Crystal Waters From Photoshop to Dreamweaver 3 Steps to Great Visual Web Design Apress 2002 Originally published by Friends