Flash Design Heuristics

Flash presents a unique subset of design challenges and opportunities, many of which may be unfamiliar to a person who’s long worked in conventional Web UI’s.

I believe that design heuristics work better when they’re more focused to your design medium.  So I’ve put together a set of guidelines, below, to assist designers working with Flash-based applications.  I’ve done a fair amount of Flash design, and these are the principles that have helped me in the past.

Mirror well-established conventions
Avoid presenting interface elements in new ways when established conventions are available.  Rely most strongly on the conventions common to the web, followed by those common to desktop software.  Controls should support all the same behaviors in a Flash interface as they do elsewhere.

Allow user control over progress
The rate of progress should be controllable by the user at any point (outside of loading times).  Provide next and back buttons for serial progression.  Provide a timeline slider and other playback controls for video and audio.  Allow users to cancel self-running interface elements.

Error prevention
Minimize opportunities for the user to make an error.  Eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Readability
Ensure that onscreen text is adequately readable.  Do not anti-alias small fonts.  Bring animated text to a stop to allow users to read it.  Maximize the contrast between text and background.  Avoid overlaying text on busy images that can interfere with the appearance of lettering.

Passive comprehensibility
Users should be able to anticipate an object’s function simply by looking at it.  Users should not have to actively move the mouse cursor over a control to reveal its function.

Avoid downtime
Users have minimal tolerance for unproductive time when using the web.  Do not use splash animations.  Allow users to accomplish something while an application loads. 

Minimal requirement of mouse skill
Assume coarse mouse movement.  Do not punish users for using the mouse as they are accustomed in software.  Observe Fitts’ law.  Support keyboard input.

Provide actionable next steps
Don’t let the application come to a dead end.  If there is an end state, invite users to take next steps.  Allow them to review what they have already seen, modify parameters, provide feedback, link to related information, or access similar applications.  Keep the interaction alive.

Controlled use of animation
Use animation as primary content or to draw the eye to important elements of the interface, but avoid superfluous animations that are peripheral to the user experience.  Do not loop animations indefinitely.  Avoid using animations in a way that may make the interface resemble an advertisement.

Support accessibility
Ensure that users with disabilities can perform the same functions as those without.  Keep download times and processor-intensive operations within reasonable limits.  Computer speakers are often turned off or absent, so don’t rely strictly upon the audio channel to convey information.

Advertisements

1 comment so far

  1. ks on

    Awesome … I’ve been having this exact discussion with folks on my current project. Now I have a bit more to work with.

    Great stuff, many thanks.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: