Slide 1

Slide 1 text

DESIGN for UX & accessibility

Slide 2

Slide 2 text

USER EXPERIENCE ACCESSIBILITY ? USE R EXPERIE NCE A CCESSIBILI TY

Slide 3

Slide 3 text

ACCESSIBILITY ?

Slide 4

Slide 4 text

? Does accessible design deliver good user experience

Slide 5

Slide 5 text

USER EXPERIENCE ?

Slide 6

Slide 6 text

? Does good user experience include accessibility

Slide 7

Slide 7 text

USE R EXPERIE NCE A CCESSIBILI TY

Slide 8

Slide 8 text

user experience // accessibility design consistency language hierarchy semantics context use of icons content alternatives transcripts colour responsive design interaction presentation video audio images captions typesetting layout forms contrast IA structure

Slide 9

Slide 9 text

USE R EXPERIE NCE A CCESSIBILI TY

Slide 10

Slide 10 text

TO INCLUDE ACCESSIBILITY MEANS • to consider all your users and situations. • to deliver content in different formats. • to consider assistive technologies. • to ensure access to all content regardless of how it is viewed/read. • to follow best practices and consider common patterns. DESIGN FOR INCLUSION. This will support a good user experience.

Slide 11

Slide 11 text

DESIGN FOR INCLUSION. physical sensory cognitive physical sensory physical sensory cognitive cognitive physical sensory cognitive ACCESSIBILITY CONSIDER ALL ABILITIES.

Slide 12

Slide 12 text

DESIGN FOR INCLUSION. physical sensory cognitive physical Modern Times Charlie Chaplin ACCESSIBILITY CONSIDER ALL ABILITIES.

Slide 13

Slide 13 text

DESIGN FOR INCLUSION. Film summary: The film opens with an overhead shot of a flock of sheep jostling in their sheep pen, and rushing through a chute. Instantly, the sheep dissolve into a similar overhead shot of industrial workers pushing out of a subway station at rush hour on their way to work... listen to film summary Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. transcript sensory sensory cognitive Modern Times Charlie Chaplin ACCESSIBILITY CONSIDER ALL ABILITIES.

Slide 14

Slide 14 text

DESIGN FOR INCLUSION. Modern Times Charlie Chaplin Film summary: The film opens with an overhead shot of a flock of sheep jostling in their sheep pen, and rushing through a chute. Instantly, the sheep dissolve into a similar overhead shot of industrial workers pushing out of a subway station at rush hour on their way to work... listen to film summary Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. transcript Home Flower Car Sunshine Clouds ACCESSIBILITY CONSIDER ALL ABILITIES. cognitive cognitive

Slide 15

Slide 15 text

ACCESSIBILITY CONSIDER ALL ABILITIES. Food Lovers design task:
 Dessert section :: recipe finder

Slide 16

Slide 16 text

ACCESSIBILITY CONSIDER ALL ABILITIES.

Slide 17

Slide 17 text

DESIGN FOR INCLUSION. ACCESSIBILITY CONSIDER ALL ABILITIES.

Slide 18

Slide 18 text

ACCESSIBILITY CONSIDER ALL ABILITIES. DESIGN FOR INCLUSION. Carefully plan both content structure and menu setup. What are users’ expectations?
 What are are their goals? How will your choice of menu system affect your users? How can the content be optimised? How can it be accessed most easily? What menu setup will be most effective and user-friendly?

Slide 19

Slide 19 text

ACCESSIBILITY CONSIDER DEVICES AND SITUATIONS. DESIGN FOR INCLUSION. Don’t assume anything. … using an old desktop computer. … using a mobile device. … on a very slow connection. … using assistive technologies. … viewing your site in a niche browser. Your users might be…

Slide 20

Slide 20 text

TO DESIGN A GOOD USER EXPERIENCE MEANS • to know your users and their preferences. • to create a positive experience during all interactions on the site. • to ensure easy access to all content and functions. • to set up forms which are a delight to use. • to give suitable feedback on all interaction. DESIGN FOR DELIGHT. This will support accessibility.

Slide 21

Slide 21 text

USER EXPERIENCE DESIGN FOR DELIGHT. CONSIDER ALL PEOPLE & SITUATIONS. Don’t assume anything. … calm and rational Your users might be… … viewing your site in a situation you cannot even imagine. … in a rush … or relaxed and with time to spare. … tech savvy … or fairly inexperienced. … or in distress.

Slide 22

Slide 22 text

Designing for Crisis 
 by Eric Meyer
 An Event Apart video → vimeo.com/148927676 talk: Design for real life 
 by Eric Meyer & Sara Wachter-Boettcher
 A Book Apart book: photo © Adrian Q 2008

Slide 23

Slide 23 text

★ offer easily digestible/consumable content to all ★ design with people, for people ★ have conversations, be social, learn. ★ aim to create familiarity and trust ★ create consistency between all elements ★ be conscious of cultural/social context ★ focus on creating a positive experience 
 across the entire site and its interactions USER EXPERIENCE CONSIDER ALL PEOPLE & SITUATIONS. DESIGN FOR DELIGHT.

Slide 24

Slide 24 text

DESIGN FOR DELIGHT. DESIGN FOR INCLUSION.

Slide 25

Slide 25 text

?

Slide 26

Slide 26 text

The White Hat calls for information known or needed. "The facts, just the facts." The Yellow Hat symbolizes brightness and optimism. Under this hat you explore the positives and probe for value and benefit. The Black Hat is judgment - the devil's advocate or why something may not work. Spot the difficulties and dangers; where things might go wrong. Probably the most powerful and useful of the Hats but a problem if overused. The Red Hat signifies feelings, hunches and intuition. When using this hat you can express emotions and feelings and share fears, likes, dislikes, loves, and hates. The Green Hat focuses on creativity; the possibilities, alternatives, and new ideas. It's an opportunity to express new concepts and new perceptions. The Blue Hat is used to manage the thinking process. It's the control mechanism that ensures the Six Thinking Hats® guidelines are observed. Dr. Edward de Bono, 1985 [ISBN 0-316-17831-4] [The De Bono Group LLC | debonogroup.com] SIX THINKING HATS

Slide 27

Slide 27 text

SIX THINKING HAT PERSONAS the rational mind ‣ fact-driven ‣ text-orientated ‣ values clarity over visual flair ‣ often uses tab to navigate sites

Slide 28

Slide 28 text

SIX THINKING HAT PERSONAS ‣ patient and calm browsing habits ‣ internet use mainly leisurely, 
 allowing time to consume content ‣ interest to explore site likely ‣ prefers navigation with mouse, 
 or use of tablet the optimist

Slide 29

Slide 29 text

SIX THINKING HAT PERSONAS the sceptic ‣ confident tech user, used to fast pace digital work ‣ impatient browsing habits, using many tabs and keyboard shortcuts ‣ quick skim reader, relying on 
 good visual hierarchy ‣ risk of abandoning site high

Slide 30

Slide 30 text

SIX THINKING HAT PERSONAS the intuitive mind ‣ confident tech user ‣ prefers familiar patterns to unusual approaches ‣ responds strongly to visual design ‣ prefers mixed content combining media and text

Slide 31

Slide 31 text

SIX THINKING HAT PERSONAS the creative mind ‣ easily swayed by visual design ‣ engaged by unique and 
 strong ideas ‣ tends to wander off / 
 may be easily distracted ‣ prefers to use open source apps/browsers

Slide 32

Slide 32 text

SIX THINKING HAT PERSONAS the analyst ‣ objective and analytical ‣ usually rushing / skim reading ‣ likes consistency & logic ‣ main net use: mobile / tablet

Slide 33

Slide 33 text

GETTING PEOPLE INVOLVED & COLLECTING FEEDBACK Example: Variation Validation [ helio.zurb.com ] 1 2 3

Slide 34

Slide 34 text

GETTING PEOPLE INVOLVED & COLLECTING FEEDBACK Silverback [silverbackapp.com]

Slide 35

Slide 35 text

GETTING PEOPLE INVOLVED & COLLECTING FEEDBACK [ hotjar.com ] screenshot of recording

Slide 36

Slide 36 text

DESIGN FOR INCLUSION & DELIGHT. DESIGN WITH PEOPLE FOR PEOPLE.

Slide 37

Slide 37 text

EFFECTIVE INCLUSIVE UX DESIGN ★ focus on your users.
 study & learn from their behaviour.
 listen & observe | review | iterate | repeat ★ consistency is key.
 establish your approach and stick to it, across all aspects:
 content | copy | design | interaction ★ provide alternatives to all media.
 text alternatives | captions | transcripts. ★ offer a positive experience.
 quality of content | tone of language | delight to use/access.


Slide 38

Slide 38 text

WORK WITH EMOTION. DESIGN FOR DELIGHT. CREATE AN ATMOSPHERE. GET TO KNOW YOUR USERS. OBSERVE - REVIEW - ITERATE. ACCESSBILITY ACCESSBILITY FOUNDATION OF USER EXPERIENCE

Slide 39

Slide 39 text

RECOMMENDED READING ★ 52weeksofux.com ★ uie.com Joshua Porter & Josh Brewer Jared Spool ★ inclusivenewmedia.org Inclusive New Media Design ★ a11yproject.com

Slide 40

Slide 40 text

Prisca Schmarsow [email protected] eyedeastudio.london @prisca_eyedea