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

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

Post on 01-Nov-2014

302 views

Category:

Technology

12 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

<ul><li> 1. Red Alert Communica)ng status through great UX, graphics and accessibility Lisa Ba</li><li> 2. USER EXPERIENCE &amp; 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 &amp; GRAPHIC DESIGN Unifying graphics and an idea, which is placed in context to solve a problem. Visual and conceptual problem solving. USER EXPERIENCE &amp; ACCESSIBILITY Address accessibility in ways that improve the experience for all users no ma</li><li> 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. </li> <li> 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. . </li> <li> 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. </li> <li> 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. </li> <li> 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. </li> <li> 8. SignposSng is leWng the user know Red Alert! | UXPA Conference July 8 2014 | London How do I get back? Whats going on now? Whats most important? What do I need to do? Is there a problem? Where am I? </li> <li> 9. Red Alert! | UXPA Conference July 9 2014 | London GRAPHIC ACCESSIBILITY DESIGN USABILITY / HUMAN FACTORS = great user experience </li> <li> 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 users a</li><li> 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</li><li> 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</li><li> 13. Red Alert! | UXPA Conference July 13 2014 | London ACCESSIBILITY PRINCIPLES Add text equivalents For all that isnt text. Dont 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 Dont: Override pinch-zoom. Hard code fonts. Require )med responses that users cant extend. Red Alert! | UXPA Conference July 2014 | London </li> <li> 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 </li> <li> 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 </li> <li> 16. NoQficaQons and Alerts Red Alert! | UXPA Conference July 16 2014 | London EXAMPLE 1 </li> <li> 17. NoQficaQons and Alerts Red Alert! | UXPA Conference July 17 2014 | London EXAMPLE 2 Mobile example </li> <li> 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 youve read them before. Dismiss alerts when done. Allow alerts to decay gracefully. </li> <li> 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 </li> <li> 20. NoQficaQons and Alerts Red Alert! | UXPA Conference July 20 2014 | London DESIGN APPROACH How does a user get there? Theyre 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. </li> <li> 21. NoQficaQons and Alerts Red Alert! | UXPA Conference July 21 2014 | London DESIGN APPROACH Ensure adequate contrast via colour contrast analyser For PC &amp; Mac Scores vs WCAG 2.0 Then use Webaim.orgs contrast checker </li> <li> 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. </li> <li> 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 </li> <li> 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 </li> <li> 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. </li> <li> 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? </li> <li> 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. </li> <li> 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 dont 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 </li> <li> 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. </li> <li> 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. </li> <li> 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 &gt; Proof Setup &gt; Color Blindness Deuteronopia trouble seeing green Protaonopia trouble seeing reds Photoshop Proof Colors </li> <li> 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 </li> <li> 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 </li> <li> 34. Progress Indicator Red Alert! | UXPA Conference July 34 EXAMPLE 1 2014 | London A linear process </li> <li> 35. Red Alert! | UXPA Conference July 35 2014 | London A non-linear process Progress Indicator EXAMPLE 2 </li> <li> 36. Progress Indicator Red Alert! | UXPA Conference July 36 EXAMPLE 3 2014 | London A user-iniQated process running in the background </li> <li> 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 </li> <li> 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. </li> <li> 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 doesnt 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 , if possible. </li> <li> 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 </li> <li> 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 </li> <li> 42. Criteria Selected Red Alert! | UXPA Conference July 42 EXAMPLE 1 2014 | London </li> <li> 43. Criteria Selected Red Alert! | UXPA Conference July 43 EXAMPLE...</li></ul>