Usability is Important (Even for Flash Designers)


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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Field research has considerable advantages over other types of user research, but it also presents some challenges.There are many different types of field research, at least one of which will probably add value to your project.Like other forms of user research, field research must be done with care to avoid bias and leading the user.Visual aids, photos, videos, and copies of physical materials are helpful in remembering what happened during a field research session and in communicating your findings to others.Really, visiting people and collecting artifacts is a ton of fun. You're almost always learning something that no one else really knows.Analysis of field research findings can take a long time – affinity diagramming and mind mapping are helpful tools to speed the process while making sure you don't forget anything.
  • 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 /><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 /><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 /><br /><br /><br /><br />
    25. 25. Making Flash more accessible<br />Consider assistive technologies<br />Screen reader:<br />Click Here<br />Skip stuff<br />Navigation<br /><a class=offscreenhref=>Screen reader users: click here for plain HTML</a><input type=hidden id=csi /><br />#FLashCampSTL @DGCooley @4ORCEDigital<br />25<br /><br /><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 /><br />
    28. 28. Additional resources<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />28<br />
    29. 29. Questions<br />#FLashCampSTL @DGCooley @4ORCEDigital<br />29<br />