Usability is Important (Even for Flash Designers)

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