Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility

3,648 views

Published on

Presentation by Lisa Battle and Jennifer Chaffee from Design for Context, and Marguerite Bergel from Fidelity, at the 2014 User Experience Professional Association (UXPA) conference in London on July 24, 2014.

Communicating status and providing signposts to tell users where they are within an application or process is essential to a good user experience. Some clients still believe they can’t use graphics or color for important cues because of accessibility. In reality, graphic design and accessibility can work together nicely. Our presentation provides case studies in we consider these questions from a visual design, user interaction, and accessibility perspective:

- How can we make notifications “pop” on cluttered screens?

- What treatments are most effective for field-level errors?

- How can we handle multiple, simultaneous alerts to users of assistive technology?

We examine tradeoffs between different design solutions, and explore how good graphic design and accessibility can work together to improve experiences for the broadest range of users.

Published in: Technology

Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility

  1. 1. Red Alert Communica)ng status through great UX, graphics and accessibility Lisa Ba<le Jennifer Chaffee Marguerite Bergel
  2. 2. USER EXPERIENCE & USABILITY Understand user needs and tasks. Design applica)ons that work the way people expect them to. Red Alert! | UXPA Conference July 2 2014 | London 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. Lisa Ba?le Marguerite Bergel Jennifer Chaffee
  3. 3. Red Alert! | UXPA Conference July 3 2014 | London Photo bkg Text in a paragraph format goes here. Smaller text goes below if necessary. This is more detail. WAYFINDING is the art of using landmarks, signage, pathways and other cues to help people navigate and understand where they are.
  4. 4. Red Alert! | UXPA Conference July 4 2014 | London Photo bkg Text in a paragraph format goes here. Smaller text goes below if necessary. This is more detail. SIGNPOSTING helps people find their desired path in a complex and unfamiliar space. .
  5. 5. LANDMARKS help people orient themselves and create MENTAL MODELS Red Alert! | UXPA Conference July 5 2014 | London Photo bkg Text in a paragraph format goes here. Smaller text goes below if necessary. This is more detail. of a space.
  6. 6. Red Alert! | UXPA Conference July 6 2014 | London Photo bkg Text in a paragraph format goes here. Smaller text goes below if necessary. This is more detail. Signage provides important STATUS INFORMATION, lePng people know when there is a problem, and how to get around it.
  7. 7. Red Alert! | UXPA Conference July 7 2014 | London Photo bkg Text in a paragraph format goes here. Smaller text goes below if necessary. This is more detail. Some signs provide TIMELY, dynamically changing informaQon to let people know what is happening and what to expect.
  8. 8. SignposSng is leWng the user know… Red Alert! | UXPA Conference July 8 2014 | London How do I get back? What’s going on now? What’s most important? What do I need to do? Is there a problem? Where am I?
  9. 9. Red Alert! | UXPA Conference July 9 2014 | London GRAPHIC ACCESSIBILITY DESIGN USABILITY / HUMAN FACTORS = great user experience
  10. 10. Red Alert! | UXPA Conference July 10 2014 | London USABILITY/ HUMAN FACTORS PRINCIPLES 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.
  11. 11. CONTRAST The degree of of difference between elements in color, value and size, or shape ALIGNMENT The arrangement of elements in a line that visually connects them Red Alert! | UXPA Conference July 11 2014 | London 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 PROXIMITY The distance between elements, that connects or disconnects them WHITE SPACE The space between elements that gives them breathing room GRAPHIC DESIGN PRINCIPLES 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.
  12. 12. 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. Red Alert! | UXPA Conference July 1122 22001144 || LLoonnddoonn GRAPHIC DESIGN ELEMENTS 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. LINE A mark between two points. Lines can be used to connect or separate elements, highlight or isolate elements. 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.
  13. 13. Red Alert! | UXPA Conference July 13 2014 | London ACCESSIBILITY PRINCIPLES 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. Red Alert! | UXPA Conference July 2014 | London
  14. 14. Pa_erns for CommunicaSng Status NoQficaQons 1 Red Alert! | UXPA Conference July 14 and Alerts 2014 | London Work Item 2 Lists Progress 3 Indicators Criteria 4 Selected Error 5 Messages Dashboards 6 Maps 7
  15. 15. A noQficaQon or alert lets the user know about a potenQal problem, incoming request, status change, or reminder. Red Alert! | UXPA Conference July 15 NoSficaSons and Alerts 2014 | London
  16. 16. NoQficaQons and Alerts Red Alert! | UXPA Conference July 16 2014 | London EXAMPLE 1
  17. 17. NoQficaQons and Alerts Red Alert! | UXPA Conference July 17 2014 | London EXAMPLE 2 Mobile example
  18. 18. NoQficaQons and Alerts Red Alert! | UXPA Conference July 18 2014 | London 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.
  19. 19. NoQficaQons and Alerts Red Alert! | UXPA Conference July 19 2014 | London DESIGN APPROACH Color used for contrast to draw the eye to informaQon Simple shapes and icons draw low key a?enQon
  20. 20. NoQficaQons and Alerts Red Alert! | UXPA Conference July 20 2014 | London 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.
  21. 21. NoQficaQons and Alerts Red Alert! | UXPA Conference July 21 2014 | London DESIGN APPROACH Ensure adequate contrast via colour contrast analyser For PC & Mac Scores vs WCAG 2.0 Then use Webaim.org’s contrast checker
  22. 22. NoQficaQons and Alerts Red Alert! | UXPA Conference July 22 2014 | London 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.
  23. 23. Pa_erns for CommunicaSng Status Red Alert! | UXPA Conference July 23 2014 | London Work Item 2 Lists Progress 3 Indicators Criteria 4 Selected Error 5 Messages Dashboards 6 Maps 7 NoQficaQons 1 and Alerts
  24. 24. 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 24 Work Item Lists 2014 | London
  25. 25. Red Alert! | UXPA Conference July 25 2014 | London 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.
  26. 26. Red Alert! | UXPA Conference July 26 2014 | London 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?
  27. 27. Red Alert! | UXPA Conference July 27 2014 | London Work Item Lists EXAMPLE 3 Mobile example To do list app The user configures their own color coding and categories; redundant cues are used.
  28. 28. Red Alert! | UXPA Conference July 28 2014 | London 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
  29. 29. Red Alert! | UXPA Conference July 29 2014 | London 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.
  30. 30. Shape, color and repeQQve pa?ern Red Alert! | UXPA Conference July 30 2014 | London Work Item Lists DESIGN APPROACH Shape and color 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.
  31. 31. Red Alert! | UXPA Conference July 31 2014 | London 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
  32. 32. Pa_erns for CommunicaSng Status NoQficaQons 1 Red Alert! | UXPA Conference July 32 and Alerts 2014 | London Work Item 2 Lists Progress 3 Indicators Criteria 4 Selected Error 5 Messages Dashboards 6 Maps 7
  33. 33. 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 33 Progress Indicators 2014 | London
  34. 34. Progress Indicator Red Alert! | UXPA Conference July 34 EXAMPLE 1 2014 | London A linear process
  35. 35. Red Alert! | UXPA Conference July 35 2014 | London A non-­‐linear process Progress Indicator EXAMPLE 2
  36. 36. Progress Indicator Red Alert! | UXPA Conference July 36 EXAMPLE 3 2014 | London A user-­‐iniQated process running in the background
  37. 37. Progress Indicator 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 37 DESIGN APPROACH 2014 | London
  38. 38. Progress Indicator Red Alert! | UXPA Conference July 38 DESIGN APPROACH 2014 | London 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.
  39. 39. Progress Indicator Red Alert! | UXPA Conference July 39 DESIGN APPROACH 2014 | London 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.
  40. 40. Pa_erns for CommunicaSng Status Red Alert! | UXPA Conference July 40 2014 | London Criteria 4 Selected Error 5 Messages NoQficaQons 1 and Alerts Work Item 2 Lists Progress 3 Indicators Dashboards 6 Maps 7
  41. 41. When filtering large data sets, let users see the criteria they have chosen and modify their selecQons. Red Alert! | UXPA Conference July 41 Criteria Selected 2014 | London
  42. 42. Criteria Selected Red Alert! | UXPA Conference July 42 EXAMPLE 1 2014 | London
  43. 43. Criteria Selected Red Alert! | UXPA Conference July 43 EXAMPLE 2 2014 | London
  44. 44. Criteria Selected Users choose criteria they want (green) and criteria to Red Alert! | UXPA Conference July 44 EXAMPLE 3 2014 | London 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.
  45. 45. Criteria Selected Indicate if a list is filtered Provide easy way to turn selecQons on and off Red Alert! | UXPA Conference July 45 DESIGN APPROACH 2014 | London Summarize selected criteria Allow user to reset filters
  46. 46. Criteria Selected 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 46 DESIGN APPROACH 2014 | London
  47. 47. Pa_erns for CommunicaSng Status NoQficaQons 1 Red Alert! | UXPA Conference July 47 and Alerts 2014 | London Work Item 2 Lists Progress 3 Indicators Criteria 4 Selected Error 5 Messages Dashboards 6 Maps 7
  48. 48. Systems provide error messages to let the user know when a problem occurs in compleQng a task. Red Alert! | UXPA Conference July 48 Error Messages 2014 | London
  49. 49. Red Alert! | UXPA Conference July 49 2014 | London Error Messages EXAMPLE 1 Field level error messages
  50. 50. Red Alert! | UXPA Conference July 50 2014 | London 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.
  51. 51. Red Alert! | UXPA Conference July 51 2014 | London Error Messages EXAMPLE 2 System error messages
  52. 52. Red Alert! | UXPA Conference July 52 2014 | London 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).
  53. 53. Red Alert! | UXPA Conference July 53 2014 | London Error Messages DESIGN APPROACH Provide immediate feedback for field-­‐level issues when possible
  54. 54. Red Alert! | UXPA Conference July 54 2014 | London 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.
  55. 55. Red Alert! | UXPA Conference July 55 2014 | London 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.
  56. 56. Pa_erns for CommunicaSng Status NoQficaQons 1 and Alerts Dashboards 6 Red Alert! | UXPA Conference July 56 2014 | London Work Item 2 Lists Progress 3 Indicators Criteria 4 Selected Maps 7 Error 5 Messages
  57. 57. Dashboards & Monitoring Dashboards ohen summarize a great deal of informaQon about status and trends at a glance. Red Alert! | UXPA Conference July 57 2014 | London
  58. 58. Red Alert! | UXPA Conference July 58 2014 | London Dashboards EXAMPLE 1 Logo
  59. 59. Red Alert! | UXPA Conference July 59 2014 | London Dashboards EXAMPLE 2 Mobile example
  60. 60. Red Alert! | UXPA Conference July 60 2014 | London Monitoring EXAMPLE 3
  61. 61. Red Alert! | UXPA Conference July 61 2014 | London Monitoring EXAMPLE 4 AnimaQon shows changes in performance of various stocks over a chosen period of Qme.
  62. 62. Red Alert! | UXPA Conference July 62 2014 | London 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.
  63. 63. Red Alert! | UXPA Conference July 63 2014 | London Dashboards DESIGN APPROACH Font size conveys importance and makes the numbers a visual element. Color is used to convey meaning.
  64. 64. Red Alert! | UXPA Conference July 64 2014 | London Dashboards DESIGN APPROACH Network monitoring dashboard shows connecQvity states and severity of the problem using color and shape of the node.
  65. 65. Red Alert! | UXPA Conference July 65 2014 | London 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.
  66. 66. Pa_erns for CommunicaSng Status Red Alert! | UXPA Conference July 66 2014 | London Maps 7 NoQficaQons 1 and Alerts Work Item 2 Lists Progress 3 Indicators Criteria 4 Selected Error 5 Messages Dashboards 6
  67. 67. Red Alert! | UXPA Conference July 67 2014 | London Maps Maps convey many facets of informaQon instantly about a geographical space, and the status and features of items within the space.
  68. 68. Red Alert! | UXPA Conference July 68 2014 | London Maps EXAMPLE 1
  69. 69. Red Alert! | UXPA Conference July 69 2014 | London Maps EXAMPLE 2
  70. 70. Red Alert! | UXPA Conference July 70 2014 | London 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
  71. 71. Red Alert! | UXPA Conference July 71 2014 | London 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
  72. 72. Red Alert! | UXPA Conference July 72 2014 | London 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?
  73. 73. Red Alert! | UXPA Conference July 73 2014 | London 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.
  74. 74. Red Alert! | UXPA Conference July 74 2014 | London Maps DESIGN APPROACH Text equivalent for heat maps is a data table, accessible via a ‘View as table’.
  75. 75. Red Alert! | UXPA Conference July 75 2014 | London 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.’
  76. 76. Pa_erns for CommunicaSng Status Red Alert! | UXPA Conference July 76 2014 | London Maps 7 NoQficaQons 1 and Alerts Work Item 2 Lists Progress 3 Indicators Criteria 4 Selected Error 5 Messages Dashboards 6
  77. 77. Red Thanks! Alert Communica)ng status through great UX, graphics and accessibility Lisa Ba?le lisa@designforcontext.com Jennifer Chaffee jenniferc@designforcontext.com Marguerite Bergel Marguerite.bergel@fmr.com

×