Red Alert
1
Communica)ng status through great UX, graphics and accessibility
Lisa Ba<le Jennifer Chaffee
Marguerite Bergel
Red Alert! | UXPA Conference July 2014 | London 2
USER EXPERIENCE & USABILITY Understand user needs and tasks. Design applica)ons that work the way people expect them to.
USER EXPERIENCE & GRAPHIC DESIGN Unifying graphics and an idea, which is placed in context to solve a problem. Visual and conceptual problem solving.
USER EXPERIENCE & ACCESSIBILITY Address accessibility in ways that improve the experience for all users – no ma<er their age, technology or ability.
Who we are
Lisa Ba?le Jennifer Chaffee Marguerite Bergel
Red Alert! | UXPA Conference July 2014 | London 3
Photo bkg
Text in a paragraph format goes here.
Smaller text goes below if necessary. This is more detail.
Way finding
WAYFINDING is the art of using
landmarks, signage, pathways and
other cues to help people navigate
and understand where they are.
3
Red Alert! | UXPA Conference July 2014 | London 4
Photo bkg
Text in a paragraph format goes here.
Smaller text goes below if necessary. This is more detail.
Signage
SIGNPOSTING helps
people find their
desired path in a
complex and
unfamiliar space.
.
4
Red Alert! | UXPA Conference July 2014 | London 5
Photo bkg
Text in a paragraph format goes here.
Smaller text goes below if necessary. This is more detail.
Landmarks and mental models
LANDMARKS help
people orient
themselves and create
MENTAL MODELS of a
space.
5
Red Alert! | UXPA Conference July 2014 | London 6
Photo bkg
Text in a paragraph format goes here.
Smaller text goes below if necessary. This is more detail.
Status
Signage provides
important STATUS INFORMATION,
lePng people know
when there is a
problem, and how
to get around it.
6
Red Alert! | UXPA Conference July 2014 | London 7
Photo bkg
Text in a paragraph format goes here.
Smaller text goes below if necessary. This is more detail.
Dynamic informaSon
Some signs provide TIMELY,
dynamically changing informaQon to
let people know what is happening
and what to expect.
7
Red Alert! | UXPA Conference July 2014 | London 8
SignposSng is leWng the user know…
How do I get back?
What’s most important?
What’s going on now?
What do I need to do?
Is there a problem?
Where am I?
Red Alert! | UXPA Conference July 2014 | London 9
A great user experience
ACCESSIBILITY GRAPHIC DESIGN
USABILITY / HUMAN FACTORS
great user experience =
Red Alert! | UXPA Conference July 2014 | London 10
Who is the user?
What is their task and context?
• Get the user’s a<en)on.
• Avoid interrup)ng the task (unless it’s truly urgent).
• Convey priority, urgency, next steps.
• Provide cues that are appropriate to the user, task and context.
USABILITY/ HUMAN FACTORS PRINCIPLES
Red Alert! | UXPA Conference July 2014 | London 10
Red Alert! | UXPA Conference July 2014 | London 11
ALIGNMENT The arrangement of elements in a line that visually connects them
CONTRAST The degree of of difference between elements in color, value and size, or shape
REPETITION The ac)on of repea)ng, forming a pa<ern or style crea)ng consistency.
BALANCE The arrangement of elements crea)ng symmetry or asymmetry
WHITE SPACE The space between elements that gives them breathing room
PROXIMITY The distance between elements, that connects or disconnects them
Red Alert! | UXPA Conference July 2014 | London 11
The principles of design suggest how a designer can best arrange the various components of a page layout in connec)on to the overall design and to each other.
GRAPHIC DESIGN PRINCIPLES
Red Alert! | UXPA Conference July 2014 | London 12 Red Alert! | UXPA Conference July 2014 | London 12
The elements of design are the building blocks for design. These design principles and elements play an important role in communica)ng status to users.
GRAPHIC DESIGN ELEMENTS
LINE A mark between two points. Lines can be used to connect or separate elements, highlight or isolate elements.
SHAPES A form or configura)on. Shapes are any type of form or configura)on, abstract or literal such as a bullet or an icon, a box or a circle, etc. Shapes are o[en used to draw a<en)on.
MASS A grouping of elements within a space. Mass determines amount large or small, can include body copy, or areas of color, grouping of items areas or regions.
TEXTURE The surface of an object can have various types of texture crea)ng visual interest to draw a<en)on to an area or create a mood.
COLOR Color is used to add appeal and draw a<en)on, to symbolize, evoke a feeling or create a mood.
Red Alert! | UXPA Conference July 2014 | London 13
Add text equivalents • For all that isn’t text. • Don’t rely on images or styles
alone.
Support all input methods • Keyboard, touch, speech • Make content order logical.
Use proper seman)c structure • Makes naviga)ng easier • Communicates what each item
is, and its state.
Give users control Don’t: • Override pinch-‐zoom. • Hard code fonts. • Require )med responses that
users can’t extend.
ACCESSIBILITYPRINCIPLES
Red Alert! | UXPA Conference July 2014 | London
Red Alert! | UXPA Conference July 2014 | London 14
Pa_erns for CommunicaSng Status
NoQficaQons and Alerts 1 Work Item
Lists 2
Progress Indicators 3 Criteria
Selected 4 Error Messages 5
Dashboards 6 Maps
7
Red Alert! | UXPA Conference July 2014 | London 15
NoSficaSons and Alerts
A noQficaQon or alert lets the user know about a potenQal problem, incoming request, status change, or reminder.
Red Alert! | UXPA Conference July 2014 | London 16
NoQficaQons and Alerts EXAMPLE 1
Red Alert! | UXPA Conference July 2014 | London 17
NoQficaQons and Alerts EXAMPLE 2
Mobile example
Red Alert! | UXPA Conference July 2014 | London 18
NoQficaQons and Alerts DESIGN APPROACH
Make it easy to drill down to addiQonal informaQon and relevant acQons. Get back to alerts even if you’ve read them before. Dismiss alerts when done.
Allow alerts to decay gracefully.
Red Alert! | UXPA Conference July 2014 | London 19
NoQficaQons and Alerts DESIGN APPROACH
Color used for contrast to draw the eye to informaQon
Simple shapes and icons draw low key a?enQon
Red Alert! | UXPA Conference July 2014 | London 20
NoQficaQons and Alerts DESIGN APPROACH
How does a user get there? • They’re already at top of page • Placing a (hidden) heading just before • ARIA landmarks • Can Ctrl+F and search alt text (alt=“Alerts”)
Need text equivalents? Usually, the number is actually text. So nothing else needed.
Red Alert! | UXPA Conference July 2014 | London 21
NoQficaQons and Alerts DESIGN APPROACH
Ensure adequate contrast via colour contrast analyser For PC & Mac Scores vs WCAG 2.0
Then use Webaim.org’s contrast checker
Red Alert! | UXPA Conference July 2014 | London 22
NoQficaQons and Alerts DESIGN APPROACH
How does a user get there? • Ensure focus shihs into / out of dialogs • When dialog closes, return focus to ‘point of origin' If a Smed response is required, warn users and let them extend.
Red Alert! | UXPA Conference July 2014 | London 23
Pa_erns for CommunicaSng Status
Work Item Lists 2
Progress Indicators 3 Criteria
Selected 4 Error Messages 5
Dashboards 6 Maps
7
Work Item Lists 2 NoQficaQons
and Alerts 1
Red Alert! | UXPA Conference July 2014 | London 24
Work Item Lists
Knowing which tasks are assigned to you, the type of tasks, when they are due, and which are most important, helps you be producQve.
Red Alert! | UXPA Conference July 2014 | London 25
Work Item Lists EXAMPLE 1
Learning management system The user sees a list of their upcoming training when they log in, along with due dates.
Red Alert! | UXPA Conference July 2014 | London 26
Work Item Lists EXAMPLE 2
Call Center app Stars represent 3 different states: new case (blue), same account (orange), different social security number (green). Are toolQps enough?
Red Alert! | UXPA Conference July 2014 | London 27
Work Item Lists EXAMPLE 3
Mobile example
To do list app The user configures their own color coding and categories; redundant cues are used.
Red Alert! | UXPA Conference July 2014 | London 28
Work Item Lists DESIGN APPROACH
Is it something I really have to do? Or just something I could do? When is it due? (but don’t stress me out!) Type of task
Read/unread A change in the item since I last saw it (e.g. new documents have come in, the customer called) AcQons I can take on the item
Red Alert! | UXPA Conference July 2014 | London 29
Work Item Lists DESIGN APPROACH
Color used sparingly, in the icon, draws a?enQon to specific areas.
Icons represenQng status use different shape and color.
Red Alert! | UXPA Conference July 2014 | London 30
Work Item Lists DESIGN APPROACH
Shape and color
Shape, color and repeQQve pa?ern Shape, color and repeQQve pa?ern
The table on the le[ shows what the client was using using to indicate alarms. Varia)ons of colored ellipse shapes with a line inside the ellipse, angled in different posi)ons.
The table on the right shows alarms as bells. The level of alarm cri)cality is indicated by the number of bells. Color is used for only the bells that are more important.
Red Alert! | UXPA Conference July 2014 | London 31
Work Item Lists DESIGN APPROACH
Vet colors via color blindness filters • Convert to RGB color mode for accuracy • View > Proof Setup > Color Blindness
Deuteronopia trouble seeing green
Protaonopia trouble seeing reds
Photoshop Proof Colors
Red Alert! | UXPA Conference July 2014 | London 32
Pa_erns for CommunicaSng Status
NoQficaQons and Alerts 1 NoQficaQons and Alerts
Work Item Lists 2
Progress Indicators 3 Criteria
Selected 4 Error Messages 5
Dashboards 6 Maps
7
Red Alert! | UXPA Conference July 2014 | London 33
Progress Indicators
In a mulQ-‐step task, let the users know which steps have been completed and which remain, or how close they are to compleQon.
Red Alert! | UXPA Conference July 2014 | London 34
Progress Indicator EXAMPLE 1
A linear process
Red Alert! | UXPA Conference July 2014 | London 35
A non-‐linear process
Progress Indicator EXAMPLE 2
Red Alert! | UXPA Conference July 2014 | London 36
Progress Indicator EXAMPLE 3
A user-‐iniQated process running in the background
Red Alert! | UXPA Conference July 2014 | London 37
Progress Indicator DESIGN APPROACH
In a linear process: Number of steps Current step Whether or not step is done Navigate back to previously visited step CondiQonal steps In a non-‐linear one: Indicate degree of compleQon Navigate to any available step (skip around) Indicate things that are required, or that have a higher value In an automated process: Indicate degree of compleQon Provide the outcome of each step Show if a problem occurred
Red Alert! | UXPA Conference July 2014 | London 38
Progress Indicator DESIGN APPROACH
Contrast: Bold or higher contrasQng font used to draw a?enQon to a specific locaQon RepeSSon: repeaQng of a symbol in a conQnuous sequence suggests a sequence or path. Symbol or shape: The current step has a unique look to draw a?enQon to it.
Red Alert! | UXPA Conference July 2014 | London 39
Progress Indicator DESIGN APPROACH
OpQons: • Adding inline images for addiQon of alt text. Alt displays for sighted users if
images fail to load. • Off-‐screen text works but doesn’t do the above. Harder to maintain. • Aria-‐label and aria-‐labelledby also work, but sQll not as broadly supported. • Re-‐emphasize context by repeaQng the step name in the <h1>, if possible.
Red Alert! | UXPA Conference July 2014 | London 40
Pa_erns for CommunicaSng Status
Criteria Selected 4 Error
Messages 5
NoQficaQons and Alerts 1 Work Item
Lists 2
Progress Indicators 3
Dashboards 6 Maps
7
Red Alert! | UXPA Conference July 2014 | London 41
Criteria Selected
When filtering large data sets, let users see the criteria they have chosen and modify their selecQons.
Red Alert! | UXPA Conference July 2014 | London 42
Criteria Selected EXAMPLE 1
Red Alert! | UXPA Conference July 2014 | London 43
Criteria Selected EXAMPLE 2
Red Alert! | UXPA Conference July 2014 | London 44
Criteria Selected EXAMPLE 3
Users choose criteria they want (green) and criteria to exclude (red). Reds + greens are mixed together, possibly making it harder to parse than if they were grouped. Color is the sole differenQator. Adding labels before each grouping may help make this more scannable for all.
Red Alert! | UXPA Conference July 2014 | London 45
Criteria Selected DESIGN APPROACH
Indicate if a list is filtered
Provide easy way to turn selecQons on and off
Summarize selected criteria
Allow user to reset filters
Red Alert! | UXPA Conference July 2014 | London 46
Criteria Selected DESIGN APPROACH
SemanSc structure ARIA Live Regions (HTML5) causes updates to be read aher user stops their current task. Keyboard/all inputs Links are naQvely focusable. Text equivalents Alt for [x] image tells the user what clicking each link does.
Red Alert! | UXPA Conference July 2014 | London 47
Pa_erns for CommunicaSng Status
NoQficaQons and Alerts 1 Work Item
Lists 2
Progress Indicators 3 Criteria
Selected 4 Error Messages 5
Dashboards 6 Maps
7
5
Red Alert! | UXPA Conference July 2014 | London 48
Error Messages
Systems provide error messages to let the user know when a problem occurs in compleQng a task.
Red Alert! | UXPA Conference July 2014 | London 49
Error Messages EXAMPLE 1
Field level error messages
Red Alert! | UXPA Conference July 2014 | London 50
Error Messages EXAMPLE 1
Page level error messages. This example has an intrapage link in the page-‐level error that navigates to the error. Good for everyone.
Red Alert! | UXPA Conference July 2014 | London 51
Error Messages EXAMPLE 2
System error messages
Red Alert! | UXPA Conference July 2014 | London 52
Error Messages DESIGN APPROACH
Use plain language, clarify what is wrong and what the user can do to fix it (the example below does not).
Red Alert! | UXPA Conference July 2014 | London 53
Error Messages DESIGN APPROACH
Provide immediate feedback for field-‐level issues when possible
Red Alert! | UXPA Conference July 2014 | London 54
Error Messages DESIGN APPROACH
Use icon and color to convey criQcality & differenQate errors from other types of messages.
This ‘error’ doesn’t tell you how to fix things. You can also simply dismiss it.
Red Alert! | UXPA Conference July 2014 | London 55
Error Messages DESIGN APPROACH
RecommendaSons This example uses CSS changes to show/hide checkmarks (class=“icon-‐small-‐Qck-‐pass”). But screen readers can’t “see” styles. So blind users will only hear the text (‘8 to 32 characters’) with no sense for whether their password has met this criteria or not DON’T use CSS to show/hide errors. Instead, inject errors into page. Reason: users who use their own CSS or disable it, will see all errors at once on screen.
Red Alert! | UXPA Conference July 2014 | London 56
Pa_erns for CommunicaSng Status
Dashboards 6
NoQficaQons and Alerts 1 Work Item
Lists 2
Progress Indicators 3 Criteria
Selected 4
Maps 7
Error Messages 5
Red Alert! | UXPA Conference July 2014 | London 57
Dashboards & Monitoring
Dashboards ohen summarize a great deal of informaQon about status and trends at a glance.
Red Alert! | UXPA Conference July 2014 | London 58
Dashboards EXAMPLE 1
Logo
Red Alert! | UXPA Conference July 2014 | London 59
Dashboards EXAMPLE 2
Mobile example
Red Alert! | UXPA Conference July 2014 | London 60
Monitoring EXAMPLE 3
Red Alert! | UXPA Conference July 2014 | London 61
Monitoring EXAMPLE 4
AnimaQon shows changes in performance of various stocks over a chosen period of Qme.
Red Alert! | UXPA Conference July 2014 | London 62
Dashboards DESIGN APPROACH
Layout and size can emphasize the most important items. Simplify the display, provide overview with drilldown. Let users configure. Communicate trend, volume, and severity.
Red Alert! | UXPA Conference July 2014 | London 63
Dashboards DESIGN APPROACH
Font size conveys importance and makes the numbers a visual element.
Color is used to convey meaning.
Red Alert! | UXPA Conference July 2014 | London 64
Dashboards DESIGN APPROACH
Network monitoring dashboard shows connecQvity states and severity of the problem using color and shape of the node.
Red Alert! | UXPA Conference July 2014 | London 65
Dashboards DESIGN APPROACH
SemanSc structure Headings make it easy to jump between secQons. Text equivalents Color is redundant cue. Numbers and locaQon on gauge helps communicate progress.
TacSle feedback sent to Flex when thresholds reached.
Red Alert! | UXPA Conference July 2014 | London 66
Pa_erns for CommunicaSng Status
Maps 7
NoQficaQons and Alerts 1 Work Item
Lists 2
Progress Indicators 3 Criteria
Selected 4 Error Messages 5
Dashboards 6
Red Alert! | UXPA Conference July 2014 | London 67
Maps
Maps convey many facets of informaQon instantly about a geographical space, and the status and features of items within the space.
Red Alert! | UXPA Conference July 2014 | London 68
Maps EXAMPLE 1
Red Alert! | UXPA Conference July 2014 | London 69
Maps EXAMPLE 2
Red Alert! | UXPA Conference July 2014 | London 70
Maps DESIGN APPROACH
Simplicity in appearance Granularity of informaQon displayed at each zoom level User control over many different types of informaQon they may want to see
Red Alert! | UXPA Conference July 2014 | London 71
Maps DESIGN APPROACH
Layering of informaQon Get informaQon easily and drill down where you are in context (without having to go somewhere else)
RelaQonship between map and list view
Red Alert! | UXPA Conference July 2014 | London 72
Maps DESIGN APPROACH
Pin icons and symbols The pin is a pointer to a very specific area, but needs a symbol to indicate type of property shown Indicate if user saved a property If you have a lot of pins in a small area, what should you do?
Red Alert! | UXPA Conference July 2014 | London 73
Maps DESIGN APPROACH
Provides granularity, but you have to work for it (mouseover). Also requires knowledge of geography.
Nice summary data of #ETFs by region using text and graphics that place it in context.
Red Alert! | UXPA Conference July 2014 | London 74
Maps DESIGN APPROACH
Text equivalent for heat maps is a data table, accessible via a ‘View as table’.
Red Alert! | UXPA Conference July 2014 | London 75
Maps DESIGN APPROACH
Visual equivalents for text! Clicking a map locaQon displays a photo of it from the street. In tesQng, users with ‘low vision’ considered this very helpful.
‘On the street, I may not spot the sign. But spo6ng the building is a whole lot easier.’
Red Alert! | UXPA Conference July 2014 | London 76
Pa_erns for CommunicaSng Status
Maps 7
NoQficaQons and Alerts 1 Work Item
Lists 2
Progress Indicators 3 Criteria
Selected 4 Error Messages 5
Dashboards 6
Red Alert
77
Communica)ng status through great UX, graphics and accessibility
Thanks!
Lisa Ba?le [email protected]
Jennifer Chaffee [email protected]
Marguerite Bergel [email protected]