red alert! communicating status through great ux, graphics, and accessibility

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


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


Photo bkg



Signage

SIGNPOSTING helps

people find their

desired path in a

complex and

unfamiliar space.

.

4


Photo bkg



Landmarks and mental models

LANDMARKS help

people orient

themselves and create

MENTAL MODELS of a

space.

5


Photo bkg



Status

Signage provides

important STATUS INFORMATION,

lePng people know

when there is a

problem, and how

to get around it.

6


Photo bkg



Dynamic informaSon

Some signs provide TIMELY,

dynamically changing informaQon to

let people know what is happening

and what to expect.

7


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?


A great user experience

ACCESSIBILITY GRAPHIC DESIGN

USABILITY / HUMAN FACTORS

great user experience =


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



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


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.


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


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


NoSficaSons and Alerts

A noQficaQon or alert lets the user know about a potenQal problem, incoming request, status change, or reminder.


NoQficaQons and Alerts EXAMPLE 1


NoQficaQons and Alerts EXAMPLE 2

Mobile example


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.



Color used for contrast to draw the eye to informaQon

Simple shapes and icons draw low key a?enQon



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.



Ensure adequate contrast via colour contrast analyser For PC & Mac Scores vs WCAG 2.0

Then use Webaim.org’s contrast checker



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.



Work Item Lists 2



Dashboards 6 Maps

7

Work Item Lists 2 NoQficaQons

and Alerts 1


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.


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.



Call Center app Stars represent 3 different states: new case (blue), same account (orange), different social security number (green). Are toolQps enough?



Mobile example

To do list app The user configures their own color coding and categories; redundant cues are used.


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



Color used sparingly, in the icon, draws a?enQon to specific areas.

Icons represenQng status use different shape and color.



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.



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



NoQficaQons and Alerts 1 NoQficaQons and Alerts

Work Item Lists 2



Dashboards 6 Maps

7


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.


Progress Indicator EXAMPLE 1

A linear process


A non-‐linear process




A user-‐iniQated process running in the background


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



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.



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.



Criteria Selected 4 Error

Messages 5


Lists 2

Progress Indicators 3

Dashboards 6 Maps

7


Criteria Selected

When filtering large data sets, let users see the criteria they have chosen and modify their selecQons.


Criteria Selected EXAMPLE 1



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.


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


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.




Lists 2



Dashboards 6 Maps

7

5


Error Messages

Systems provide error messages to let the user know when a problem occurs in compleQng a task.


Error Messages EXAMPLE 1

Field level error messages



Page level error messages. This example has an intrapage link in the page-‐level error that navigates to the error. Good for everyone.



System error messages


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).



Provide immediate feedback for field-‐level issues when possible



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.



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.



Dashboards 6


Lists 2


Selected 4

Maps 7

Error Messages 5


Dashboards & Monitoring

Dashboards ohen summarize a great deal of informaQon about status and trends at a glance.


Dashboards EXAMPLE 1

Logo


Dashboards EXAMPLE 2

Mobile example


Monitoring EXAMPLE 3


Monitoring EXAMPLE 4

AnimaQon shows changes in performance of various stocks over a chosen period of Qme.


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.



Font size conveys importance and makes the numbers a visual element.

Color is used to convey meaning.



Network monitoring dashboard shows connecQvity states and severity of the problem using color and shape of the node.



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.



Maps 7


Lists 2



Dashboards 6


Maps

Maps convey many facets of informaQon instantly about a geographical space, and the status and features of items within the space.


Maps EXAMPLE 1


Maps EXAMPLE 2


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



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



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?



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.



Text equivalent for heat maps is a data table, accessible via a ‘View as table’.



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.’



Maps 7


Lists 2



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]

red alert! communicating status through great ux, graphics, and accessibility

Technology

london design approach

user experience

london error messages

alerts red alert

ng status

red alert

smaller text

great ux