Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Usability is Important (Even for Flash Designers)

1,342 views

Published on

Presented 03 September, 2010 at Flash Camp St. Louis.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Usability is Important (Even for Flash Designers)

  1. 1. Usability is Important(Even for Flash Designers)<br />Danielle Gobert Cooley<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />1<br />
  2. 2. About this talk<br />Make your Flash more usable, accessible and searchable. In this session, I will discuss the “whys” and “hows” of usability and how it relates to Flash in the browser.<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />2<br />
  3. 3. Always start with a joke!<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />3<br />
  4. 4. People love kids<br />Paul Trani said so!<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />4<br />
  5. 5. Bio<br />12 years as user researcher/usability specialist<br />BE, Biomedical & Electrical Engineering<br />MS, Human Factors in Information Design<br />Selected Employers & Clients<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />5<br />dcooley@4ORCEdigital.com<br />@dgcooley<br />
  6. 6. Making Flash more usable<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />6<br />Still true?<br />
  7. 7. The good<br />Real time validation!<br />Conditionally enabling fields!<br />Keyboard support!<br />The bad<br />Encourages gratuitous graphics<br />Breaks web fundamentals<br />Distracts from a site’s core values<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />7<br />Most research is O L D<br />Really? Wow.<br />
  8. 8. Bad Flash: Huggies<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />8<br />
  9. 9. Really bad Flash<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />9<br />http://theoatmeal.com/comics/websites_stop<br />
  10. 10. Good Flash: Garnier<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />10<br />
  11. 11. 10 Usability Heuristics<br />Visibility of system status <br />Match between system and the real world <br />User control and freedom <br />Consistency and standards <br />Error prevention <br />Recognition rather than recall <br />Flexibility and efficiency of use <br />Aesthetic and minimalist design <br /> Help users recognize, diagnose, and recover from errors <br />Help and documentation <br />#FLashCampSTL @DGCooley @4ORCEDigital<br />11<br />
  12. 12. Visibility of system status<br />Let the user know what’s going on<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />12<br />
  13. 13. Visibility of system status<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />13<br />20 seconds<br />
  14. 14. Match between system and the real world<br />Speak the user’s language<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />14<br />
  15. 15. User control and freedom<br />“emergency exit”<br />Support undo/redo<br />For the love of god, don’t resize their browser<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />15<br />
  16. 16. Consistency and standards<br />Be consistent within your own site(s)<br />Follow platform conventions<br />Where do your users spend most of their time online?<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />16<br />
  17. 17. Error prevention<br />Error prevention > good error messages<br />Confirm delete<br />Conditional field show/hide enable/disable<br />Dropdown vs. text field<br />Data entry format <br />(555) 314-1212 vs. 555.314.1212<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />17<br />
  18. 18. Recognition rather than recall<br />Minimize memory load<br />“After you click this link, go to “view,” then “presentation views,” then “slide master.” ( don’t do this)<br />Account numbers are particularly ridiculous.<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />18<br />
  19. 19. Flexibility and efficiency of use<br />Include accelerators for expert users<br />SUPPORT KEYBOARD USE<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />19<br />
  20. 20. Aesthetic and minimalist design<br />Avoid unnecessary things.<br />Always consider signal:noise ratio<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />20<br />
  21. 21. Error recovery<br />Use plain language<br />Tell the user what happened<br />Be specific<br />ALSO TELL THEM HOW TO FIX IT<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />21<br />
  22. 22. Help and documentation<br />Searchable<br />List concrete steps for each task<br />Should run in parallel with your tool/app/site<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />22<br />
  23. 23. Content strategy<br />Needs to stay current – flash tends to be developed once and then ignored. <br />Who’s going to update it?<br />How often?<br />Proofreading workflow?<br />Do we archive it?<br />How far back? <br />#FLashCampSTL @DGCooley @4ORCEDigital<br />23<br />
  24. 24. Design Patterns<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />24<br />http://patterns.endeca.com<br />http://developer.yahoo.com/ypatterns/<br />http://www.patternry.com/<br />http://patterntap.com/<br />
  25. 25. Making Flash more accessible<br />Consider assistive technologies<br />Screen reader: http://bit.ly/9rteL8<br />Click Here<br />Skip stuff<br />Navigation<br /><a class=offscreenhref=http://maps.google.com/m?oi=screenreader>Screen reader users: click here for plain HTML</a><input type=hidden id=csi /><br />#FLashCampSTL @DGCooley @4ORCEDigital<br />25<br />http://webaim.org/techniques/flash/<br />http://www.adobe.com/accessibility/products/flash/tutorial/<br />
  26. 26. Replacement Content<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />26<br />
  27. 27. Making Flash more searchable<br />SWF Object 2.0<br />“It offers one solution for everybody and promotes the use of Web standards and alternative content.” (Google)<br />Write for keywords<br />Language > images, use video transcripts<br />Include links in replacement content<br />Don’t be spammy<br />They’re on to you!<br />Remember download time<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />27<br />http://searchengineland.com/seo-or-flash-a-tough-choice-no-more-15505<br />
  28. 28. Additional resources<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />28<br />
  29. 29. Questions<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />29<br />

×