Skip to Content Skip to Navigation

User Experience Toolkit

Show System Status

Provide feedback of where the user is and where the system is at any point in time.

Show Time & Progress

The type of feedback to display depends on the response time

Less than 1 second
Show outcome (no feedback necessary)
Greater than 1 second - several seconds
Show feedback that activity is underway (indeterminate spinner, hourglass, etc). See Modal Loading Implementation
More than several seconds
Show fractional progress (estimated progress). This could be the progress of a process such as an upload or background process, or progress through parts of a step-process such as an application form. See Step Process Wizard Implementation
animated loading gif progress indicator TaxAct progress indicator

indeterminate spinner, fractional progress bar, TaxAct step process wizard

Show Space

Space constraints and current status should be presented to the user if they need to be aware

gmail storage space evernote upload space

Gmail storage capacity, Evernote upload allowance

Show Change

Show and highlight changes or the need to save changes.

autocad save changes

Show Action

A stop light is a good example of a system communicating action in dual coding - by using color and placement, it makes it faster to recognize and is usable to both normal sighted users and the color impaired. The Google Calendar notification below could be enhanced with dual coding if both color and icon were used. The Amazon gift card redemption message uses the dual coding well.

red stop light Google Calendar notification

Show Next Steps

Let the user know what can or should happen next.

Amazon gift card redemption confirmation UX javascript is disabled message

Show Completion

Handbrake completion message

Thanks for the feedback! It will help us improve your experience.