MTMG Executive: Inclusive Design Workshop - Milano May 18 2018
1. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
2. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Inclusive Design
MTMG Workshop May 18/18 Milano
• 2017-07-05
Corey Timpson
Corey Timpson Design Inc.
coreytimpson.com
@coreytimpson
3. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Agenda
. introductions
. overview of 5 vectors
. review of participant examples
. break
. lecture
. workshop solutions to examples
. present ideas for inclusion to examples
. conclusions
4. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Ecosystem
1. Graphic Design
2. Environmental Design
3. Interface Design
4. Software Design and Development
5. Media Design & Production
5. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Design Practice
6. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Overview
Premise/Direction
Design Development & Production
Testing, Prototyping, Testing
Fundamentals
7. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Premise
Rather than design and develop something and then
figure out how to make it accessible, we design with
all audiences, and all abilities, in mind from the outset.
“Inclusion” would also address cultural, linguistic, and
other dynamics of difference.
8. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Premise
Exclusion is the result of mismatched interactions.
Our responsibility is to know how our designs affect these interactions
and create mismatches.
Points of exclusion help us generate new ideas and inclusive designs.
9. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Inclusive Design
Methodology of inclusion has several outputs. One of
these outputs is accessibility.
10. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Scan
Canadian Museum for Human Rights Guidelines
Smithsonian Accessibility Guidelines
Museum of Science London, Building Accessible
Exhibitions
Musée de la civilisation Québec
National/State/Provincial Building Codes
WCAG 2.0
+ more
11. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Ecosystem
12. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Ecosystem
The user exists within both physical and digital spaces.
Consideration of the building without the installations cannot be
done.
Consideration of the digital installation cannot be done in
isolation.
Many variables combine to define the user experience.
13. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Ecosystem
1. Graphic Design
2. Environmental Design
3. Interface Design
4. Software Design and Development
5. Media Design & Production
14. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
15. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
Anatomy of Type
16. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
Type Testing
17. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
Text Layout
18. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
Text Layout
I cnduo't bvleiee taht I culod aulaclty uesdtannrd waht I
was rdnaieg. Unisg the icndeblire pweor of the hmuan
mnid, aocdcrnig to rseecrah at Cmabrigde Uinervtisy, it
dseno't mttaer in waht oderr the lterets in a wrod are,
the olny irpoamtnt tihng is taht the frsit and lsat ltteer
be in the rhgit pclae. The rset can be a taotl mses and
you can sitll raed it whoutit a pboerlm. Tihs is bucseae
the huamn mnid deos not raed ervey ltteer by istlef, but
the wrod as a wlohe. Aaznmig, huh? Yaeh and I
awlyas tghhuot slelinpg was ipmorantt!
19. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
Text Layout
20. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
Text Layout
21. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
Visual Hierarchies
22. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
Colour Contrast
23. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
Overprinting
24. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Graphic Design
Text
1. Reading Levels
2. Nomenclature
3. Character Counts
4. Style Guide Development
- consistency across media
- learnability > usability
25. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
26. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
Primary Accessible Zone
27. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
Distance vs Size (Type)
28. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
Spacing & Pacing
1. Negative space
2. Personal space
3. Respite
4. Sweet spot - somewhat variable based on installation
5. 1.2m for pathways
29. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
Seating (Strength, Rest, Support, Reach, Integration)
30. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
Sound Management
1. Consider the entire program during development
2. Hardware spec. (directional, adjustable)
3. Testing and Prototyping
4. Volume Control
5. Induction Technology
6. In-situ tuning
7. 70 dBs
31. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
Sound Design Considerations
● An earcon is a brief, distinctive sound used to
represent a specific event or convey information
(Abstract).
● Auditory Icons are the auditory equivalent of visual
icons (Representational).
32. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
Lighting
1. 50-100 LUX for low vision
2. Artefacts/conservation requirements
3. Small form LED lights can be added to edges in
order to distinguish shapes of furniture within low light
environments. (ie. edges of Kiosks, Tables)
4. Glare (angle of lightning vs angle of viewing vs
material and surface)
33. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
Lighting
34. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
Digital Prerequisites (Reach)
35. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Environmental Design
Digital Prerequisites
1. Reach/Touchable Zones
2. Horizontal and Vertical
3. 685mm (27”) height to tables
4. Angled vs Flat
5. Hardware Specs. (reflection, responsiveness)
36. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Interface Design
37. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Interface Design
Start with conceptual model
A mental model represents a person’s thought process
for how something works and understanding of the
world.
Mental models are based on lived experiences and
intuitive perceptions.
38. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Interface Design
Start with conceptual model
The degree to with a user’s mental model matches a
UI’s conceptual model, will determine how intuitive a
UI will be for the user. (Xerox)
39. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Interface Design
Data-to-ink ratio
Keep data-ink to ink ratio high
40. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Interface Design
UI for Blind and Low Vision Users
Must rely on memory and on a rich vocabulary of
gestures to interact with touchscreen interfaces.
Designers should strive to minimize the cognitive load
for screen reader users.
41. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Interface Design
Navigation, Function Definitions
42. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Interface Design
Navigation, Function Definitions
1. Functional standardization
2. Design standards (nomenclature, iconography)
3. Gesture and behavioural standards
Learnability, Usability, Accessibility
43. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Software Design & Development
44. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Software Design & Development
Semantics, Structure, Standards
1. Software/Programming Languages
2. Why should the visitor care?
3. W3C/WCAG goes only so far
4. Consistency
5. Behaviour and expectations are key considerations
6. Learnability
7. Scalability
45. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Software Design & Development
Semantics, Structure, Standards
46. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Software Design & Development
RFP / RPQ
“Software design must meet internationally recognized
W3C Web Content Accessibility Guidelines (WCAG)
v2.0 Level AA [and revised section 508 standards of the
ADA]. Vendor must include an identification of tools,
best practices, processes, and strategy for
implementation.”
47. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Media Design & Production
48. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Media Design & Production
Linear Media (Theatre)
49. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Media Design & Production
Linear Media (Kiosk)
50. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Media Design & Production
Components
1. Primary Asset (ie. Film)
2. Child Assets
- ASL
- Description Track
- Transcription
- Text-to-Speech
3. Ducking
51. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Media Design & Production
Components
Note:
. Production Sequencing and Project Schedule
. Captions are not Subtitles
52. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Inclusive, Accessible
53. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Inclusive Design
Media Design (Theatre)
54. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Inclusive Design
Media Design (Kiosk)
55. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Inclusive, Accessible
The Sum of All Parts (Digital Kiosk)
56. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Inclusive, Accessible
The Sum of All Parts (Digital Kiosk)
57. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Inclusive, Accessible
The Sum of All Parts (Digital Surface)
58. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Inclusive, Accessible
The Sum of All Parts (Tangible Interface/Mixed media)
59. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Inclusive Design
60. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
61. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
62. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
63. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
Linear Media Installation (360° Film)
64. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
Linear Media Installation (360° Film)
65. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
Mixed-Media Installation
66. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
Mixed-Media Installation
67. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
Mixed-Media Installation
68. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
Prototyping & Testing are critical.
Especially in mixed, busy, multi-user environments.
Developing tools in order to solicit usable and pointed
feedback.
69. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
Soliciting Good Feedback (ie. constructive criticism)
70. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
Soliciting Good Feedback (ie. constructive criticism)
71. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
User / Experts
A user/expert is a person who has developed expertise
by means of their lived experience in dealing with the
challenges of the environment due to a physical,
sensory, and/or cognitive functional limitation.
72. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
User / Experts
73. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Testing & Prototyping
User / Experts
74. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Innovation
75. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Access Point (UAP)
System of 5 components
1. Cane detectable floor strip
2. Tactile marker
3. Mobile App
4. iBeacon
5. Content Management System
76. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Access Point (UAP)
Cane-detectable tactile floor strip
77. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Access Point (UAP)
Tactile marker
78. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Access Point (UAP)
iBeacon
79. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Access Point (UAP)
Mobile app
80. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Access Point (UAP)
UAP in mixed-media installation
81. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Access Point (UAP)
UAP Scalability
82. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Keypad (UKP)
Navigation of digital interfaces
Navigation of tangible interfaces
Standardized approach through all instances of digital
interaction.
+ zoom, volume control, wrist support
83. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Keypad (UKP)
Concept Design
84. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Keypad (UKP)
Sematic software standardization
85. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Keypad (UKP)
Prototype
86. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Keypad (UKP)
In-situ UKP-I
87. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Keypad (UKP)
In-situ UKP-I
88. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Universal Keypad (UKP)
In-situ UKP-A
89. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Mobile Application
Driver for development was Inclusive Design
Available for iOS and Android
Available in English and French
90. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Mobile Application
Driver for development was Inclusive Design
Available for iOS, Android
Available in English, French
Available in ASL, LSQ
Available in AD English, AD French
91. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Mobile Application
ASL, LSQ, AD Eng, AD Fra Self Guided Tours
92. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
93. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Beyond the Gallery
94. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Beyond the Gallery
Visitor Experience
95. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Beyond the Gallery
Visitor Experience
96. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Beyond the Gallery
Visitor Experience
97. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Beyond the Gallery
Visitor Experience
98. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Beyond the Gallery
Visitor Experience
99. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Beyond the Gallery
Visitor Experience
100. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Fundamentals
101. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Fundamentals
Ecosystem, each component needs consideration but
within the context of the system as a whole.
Testing. Prototyping (wash, rinse, repeat)
Standards, evolution, scalability.
Redundancy. Redundancy.
102. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Fundamentals
Establishing Standards to Work From
103. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Fundamentals
Establishing Standards to Work From
104. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Fundamentals
Establishing Standards to Work From
105. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Fundamentals
Establishing Standards to Work From
106. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
107. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Virtual Reality
. captioning
. signed interpretation
. descriptive audio
Fundamentals
Establishing Standards to Work From
108. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Fundamentals
Redundancy
109. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Fundamentals
Redundancy
110. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Fundamentals
Redundancy
111. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Strategic Implications
112. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Strategic Implications
Budget constraints = myth
Aesthetic or design intent are compromised = false
113. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Strategic Implications
There are only 2 requirements:
. good project management (planning/scheduling)
. the will
114. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Strategic Implications
. Project Management
- scheduling
- sequencing of tasks
. Budget
- negligible impact
- greatest costs remain content development
- existing = start small
- new = start inclusively
115. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Strategic Implications
There are no barriers unless we create them.
116. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Strategic Implications
There are no barriers unless we create them.
But there is opportunity:
larger audience demographic
longer audience loyalty
increased usability for everyone
117. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Strategic Implications
There are no barriers unless we create them.
But there is opportunity:
greater visitation
greater reach
larger appropriation & earned revenue
(Canada = $25B annually)
118. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Strategic Implications
Even further:
. greater audience engagement
. greater return on investment
. mandate fulfillment
(Italy 5% population is declared. Tourism implications?)
(2016 Legislation)
119. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Critical Findings
The work is never done.
Fostering a culture of iterative and consistent evolution
is key.
Accepting and embracing criticism and using it as fuel.
Be deliberate.
120. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Conclusions
The methodology is the most important. Everything
else is an output.
Inclusive thinking has becoming a key characteristic of
the corporate culture.
And this is the measure of success.
121. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Corey Timpson
Corey Timpson Design Inc.
coreytimpson.com
@coreytimpson
122. Click to edit Master title style
Click to edit Master subtitle style
Edit Master text styles
Greensboro Counter
Editor's Notes
IHCD core: Variation in human ability is ordinary, not special, and affects most of us for some part of our lives.
Poet rhyme.
Overprinting (type on an imaged background) is unreadable for people with low vision and perceptual difficulties
Glare makes text unreadable for many people with low vision.