"On the Value of Design Thinking: Design for the Visually Impaired" presented by Red Pill Now Creative and UX Director, Bob Kadrie and guest, Roy Rumaner

1. DESIGN FOR THE VISUALLY IMPAIRED
ON THE VALUE OF DESIGN THINKING

2. PETER PRESNELLCEO RED PILL NOW MASTER OF CEREMONIES
PETERPRESNELLPETER@REDPILLNOW.COM

3. RED PILL NOW

4. ROY RUMANERCONSULTANT ACCESSIBILITY EXPERT
RRUMANERRRUMANER@GMAIL.COM

5. BOB KADRIECREATIVE/UX DIRECTOR RED PILL NOW
BOBKADRIEBOB@REDPILLNOW.COM

6. ON THE VALUE OF DESIGN THINKING
THE CONCEPT OF MATCHING
PEOPLE'S NEEDS WITH A
VIABLE BUSINESS CASE AND
TECHNOLOGY SOLUTION –
ASSURING CUSTOMER VALUE
AND MARKET OPPORTUNITY

7. THE HUMAN RULE
THE AMBIGUITY RULE
THE REDESIGN RULE
THE TANGIBILITY RULE
STANFORD’S
FOUR PRINCIPLES
OF SUCCESSFUL
DESIGN THINKING

8. THE HUMAN RULE
THE AMBIGUITY RULE
THE REDESIGN RULE
THE TANGIBILITY RULE
STANFORD’S
FOUR PRINCIPLES
OF SUCCESSFUL
DESIGN THINKING

9. THE HUMAN RULE
THE AMBIGUITY RULE
THE REDESIGN RULE
THE TANGIBILITY RULE
STANFORD’S
FOUR PRINCIPLES
OF SUCCESSFUL
DESIGN THINKING

10. THE HUMAN RULE
THE AMBIGUITY RULE
THE REDESIGN RULE
THE TANGIBILITY RULE
STANFORD’S
FOUR PRINCIPLES
OF SUCCESSFUL
DESIGN THINKING

11. DESIGN THINKING
START AT THE END

12. DESIGN THINKING
CONDUCT RESEARCH

13. DESIGN THINKING
CREATE WIRE FRAMES
AND MOCKUPS

14. DESIGN THINKING
LOGO
LOGIN AND SEARCH
SOCIAL NAVIGATION
OPTIONAL SECONDARY NAVIGATION
LOCAL
NAVIGATION
PRIMARY CONTENT
BREADCRUMB NAVIGATION
COPYRIGHT | FOOTER | CONTACT
PRIMARY CONTENT

15. DESIGN THINKING

16. DESIGN THINKING
TEST AND ITERATE

17. DESIGN FOR
THE VISUALLY
IMPAIRED

18. DESIGN BASICS
3 IMPORTANT RULES:
BE CONSISTENT
KEEP IT SIMPLE (7 2 RULE)
GROUP LIKE ELEMENTS
+/-

19. COLOR
YOUR APPLICATION
DESIGN SHOULD NEVER
RELY ON COLOR OR
PHOTOS FOR SUCCESSFUL
COMMUNICATION

20. COLOR
253 MILLION

21. COLOR
36 MILLION

22. COLOR
81%

23. SPENDING POWER
$8 TRILLIONGartner Group - 2013

24. DESIGN THINKING
“DESIGNING FOR THE VISUALLY
IMPAIRED IS NOT JUST THE
RIGHT THING TO DO – IT’S ALSO
GOOD BUSINESS.”

25. DESIGN THINKING
TO MAKE A WEBSITE
ACCESSIBLE:
UNDERSTAND YOUR OBLIGATIONS
UNDERSTAND REQUIREMENTS AND BEST PRACTICES
IMPLEMENT STANDARDS WITH EMPATHY

26. DESIGN THINKING
STANDARDS AND THE LAW
ADA
SECTION 508
WCAG
W3C

27. DESIGN THINKING
UNDERSTAND ACCESSIBILITY
SCREEN READERS
MAGNIFICATION
SPEECH CONTROLLERS
ALTERNATIVE INPUT DEVICES
BRAILLE DISPLAYS
COLOR PALETTE
MARKUP AND FORMAT

28. DESIGN THINKING
FOUR PRINCIPLES OF
ACCESSIBILITY
CONTENT MUST BE PERCEIVABLE
INTERFACE COMPONENTS IN THE CONTENT MUST BE OPERABLE
CONTENT AND CONTROLS MUST BE UNDERSTANDABLE
CONTENT SHOULD BE ROBUST ENOUGH TO WORK
WITH CURRENT AND FUTURE USER AGENTS

29. DESIGN THINKING
AWARENESS IS KEY

30. DESIGN THINKING

31. DESIGN THINKING
ACCESSIBILITY
$

32. DESIGN THINKING
LEADERSHIP
POLICY
IMPLEMENTATION

33. COLOR TOOLS
LET’S LOOK AT SOME EXAMPLES

34. DESIGN THINKING
COLOR BLINDNESS
RED-GREEN
BLUE-YELLOW
MONOCHROMACY

35. COLOR

36. COLOR TOOLS
https://coolors.co
TEXT PRIMARY SECONDARY BACKGROUND ACCENT

37. COLOR TOOLS

38. COLOR TOOLS

39. WCAG GUIDELINES
WCAG GUIDELINES

40. WCAG GUIDELINES
PERCEIVABLE
PROVIDE TEXT ALTERNATIVES FOR ANY NON-TEXT CONTENT
PROVIDE ALTERNATIVES FOR TIME BASED MEDIA
SEPARATE CONTENT FROM STYLE
MAKE IT EASIER FOR USERS TO SEE AND HEAR CONTENT

41. WCAG GUIDELINES
OPERABLE
MAKE ALL FUNCTIONALITY AVAILABLE FROM A KEYBOARD
PROVIDE USERS ENOUGH TIME TO READ AND USE CONTENT
DO NOT DESIGN CONTENT KNOWN TO CAUSE SEIZURES
PROVIDE WAYS TO HELP USERS NAVIGATE, FIND CONTENT AND
DETERMINE WHERE THEY ARE

42. COLOR TOOLS
UNDERSTANDABLE
SIMPLIFY TEXT CONTENT
ASSURE FUNCTIONAL PREDICTABILITY
HELP AVOID MISTAKES

43. COLOR TOOLS
ROBUST
MAXIMIZE COMPATIBILITY WITH OTHER PRODUCTS,
INCLUDING ASSISTIVE TECHNOLOGIES

44. MARKUP
<h1>GRANITE Sessions</h1>
<h2>System Administration</h2>
<h2>Application Development</h2>
<h3>Do you see what I see?</h3>
<h3>Extreme Development: Pair Programming</h3>
<h3>Hello and Welcome to NotesIn9</h3>
<h2>Innovation</h2>
<h3>Design Matter 2.0</h3>
<h3>Think Outside the Sphere! Box for IBM Professionals</h3>
<h2>Best Practices</h2>
HEADINGS

45. MARKUP
CSS
<style>
h1 {font-size:1.4em; font-weight:bold; color:#000;}
h2 {font-size:1.2em; font-weight:bold; color:#222;}
h3 {font-size:1em; font-weight:bold; color:#444;}
</style>
<h1>GRANITE Sessions</h1>
<h2>System Administration</h2>
<h2>Application Development</h2>
<h3>Do you see what I see?</h3>
<h3>Extreme Development: Pair Programming</h3>
<h3>Hello and Welcome to NotesIn9</h3>
<h2>Innovation</h2>
<h3>Design Matter 2.0</h3>
<h3>Think Outside the Sphere! Box for IBM Professionals</h3>
<h2>Best Practices</h2>

46. MARKUP
META DATA<img src= “CVI-LOGO.jpg” alt= “CVI Logo for home page“>

47. MARKUP
META DATA
<img src= “Cliffs-story.jpg” alt= “Photo of blind man with his guide dog“>

48. “IF YOU CAN DEVELOP A
WEBSITE, YOU CAN DEVELOP
AN ACCESSIBLE ONE.”
- UNIVERSITY OF WASHINGTON
DESIGN FOR THE VISUALLY IMPAIRED

49. DESIGN FOR THE VISUALLY IMPAIRED
THANK YOU