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