Downloaded 55 times
Interfaces, Accessibility & Superheroes
- 1. Interfaces, Accessibility & Superheroes SXSW Interactive Workshop, 2013 Yvonne So & Livia Veneziano #superable 1
- 2. Hello - We’reDesigners 2
- 3.
- 4.
- 5. What is AccessibleDesign? 5
- 6. Definition: Universal Design Universal Design n. “...the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” http://www.ncsu.edu/www/ncsu/design/sod5/cud/about_ud/about_ud.htm 6
- 7. Definition: Disability Disability n. “...is a complex phenomenon, reflecting an interaction between feature of a person’s body and features of the society in which he or she lives.” “Disabilities”. World Health Organization. Retrieved 11 August, 2012. 7
- 8. Definition: Accessibility Accessibility n. “...the degree to which a product, service, or environment is available to as many people as possible.” “Accessibility – Brain Injury Resource | BrainLine.org.” Accessibility – Brain Injury Resource. N.p., n.d. Web. 16, Jan, 2013 8
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. Four principles ofAccessible Design P.O.U.R. As defined by w3.org 21
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. Basic Elements ofAccessible Design 27
- 28. What is Legibility? Legibility equals Understanding 28
- 29. The Elements ofLegibility Hierarchy Iconography Color & Legibility Sound Contrast Touch & Typography Haptics 29
- 30. Questions to TestLegibility Can my audience understand it? How can the platform help my users understand? Does the platform suggest particular usability patterns? How difficult is it to learn? (Learned behavior vs. established patterns) 30
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. What is Color? Color Hue Chromaticity Saturation Value Contrast 36
- 37. Colorblindness Colorblindness affects approximately 8% of males and 0.5% of females. www.colorblindor.com 37
- 38.
- 39.
- 40.
- 41. What is Typography? Typography Font Size Weight Uniformity Contrast 41
- 42.
- 43.
- 44.
- 45. Examples of Easy-to-ReadTypefaces Helvetica Geneva Arial Gotham Calibri Times 45
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55. Design Resources: Tools Checklists, Validators, and Design Tools Validate HTML/CSS Color Contrast Checker iOS Human Interface Guidelines Firefox Accessibility Toolbar Android Accessibility Guide Readability Test Tool Windows Mobile Design Guide Discover more… 55
- 56. FUN STUFF! 56
- 57. Exercise: Example Interfaces Southwest & FlightView Bloomberg & Flipboard Target & Gucci Yelp & Groupon Starbucks & PayPal Skype & Google Voice 57
- 58.
- 59. Part 2 59
- 60.
- 61.
- 62.
- 63. Common Built-in Features Increasetext size Text-to-speech Pinch and zoom screen Text magnification Text highlight Alternate gestures Custom ring and vibration patterns Color/brightness contrast Haptic feedback 63
- 64.
- 65. Video Resources How theBlind Use iPhones How the Blind Use Instagram Raising the Floor’s GPII Web Accessibility by STAFFNet Google I/O: Making Android Apps Accessible 65
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75. What We CanLearn Leverage existing alternate technologies we already see being used in interfaces today. Introduce gestures into top level interaction as a fun feature for all users and creates a new channel to access features. Offering feedback whether it is sound, haptic, or visual cues can be simple, novel, and useful. 75
- 76.
- 77. Exercise: Suggest Improvement Select one of your services and suggest an improvement for the element you found most restrictive. 77
- 78.
- 79. Discussion: Questions toAsk Why did I make this decision? Who is this geared towards? Does it work for all audiences? Is it a nice experience? 79
- 80. Designers and EngineersToday, Superheroes Tomorrow 80
- 81.
- 82.
- 83. Thank you! 83
- 84. Want to chatmore? @yvonniks @gingerstormy 84
Editor's Notes
- #2 Welcome to Interfaces, Accessibility and Superheroes; a workshop that focuses on approaches, challenges and best practices for designing for accessibility. Presented by Yvonne So and LiviaVeneziano. South by Southwest, 2013.
- #3 Yvonne So and LiviaVeneziano are both designers and met in 2011. With a common passion for accessibility and clever design solutions, they decided to work on a side project about the growing importance of accessibility considerations in today’s mobile solutions. Their work was published in UX Magazine and the project grew to become a proposal to speak at SXSW and inspire others to make the same inclusive and universal design decisions. They are also stunning.
- #4 There is a distinction between making a design accessible and creating innovative interaction patterns that are inclusive. Today we will cover both. Applying good accessible design practices to existing services is an important part of making today’s designs compatible with accessibility technology, but being smart about design decisions upfront can open the door to new ways of organizing information.We should be sensitive to native patterns that can help us structure information, however using them as tools rather than strict direction can lead to interesting, straightforward and much more universal applications.
- #5 First, a challenge. You will need a smartphone or tablet for this exercise. With your eyes closed, navigate to your email. Create a new message and email a note to a friend. You may try this exercise with your hands clenched into a fist as well.Not easy, right? Most smartphones, tablets and computers today have some sort of accessibility features that are found under settings. They offer alternative ways of getting information that is presented on the screen and interacting physically with the device. While many of us may not need to use assistive technologies, understanding how others use them, what they offer and what their limitations are is an important part of accessible design. Additionally, keeping in mind the various challenges people face when trying to use any device can lead to more thoughtful designs upfront that rely less on additional accessibility features.
- #6 The most important step is understanding what accessible design is. Let’s go through some basic terminology that we will use a lot today.
- #7 Universal design is one of the foundational pillars of all design practice; creating products that as many people as possible can use and understand, regardless of ability, cultural differences and other differentiating factors.
- #8 It is essential to remember that disability is relative, and is a measurement between the function or feature of an individual in contrast to their environment as defined socially. It is not, in itself, a universal or singular standard or definition.
- #9 Hand-in-hand with universal design, accessibility is the measurement of how easily something is understood and interacted with by the widest range of users.
- #10 Who are these users?
- #11 Many times, when we hear or talk about accessibility, we think of this model: There’s “us” and there’s “them”.Consider this: The World Health Organization reports that nearly 1 of 7 of the world’s population has some form of disability. This means that each of us will encounter some form of disability in our lives. Additionally, the growing number of people over 65 is rapidly losing ability in physical, sensorial and cognitive ways.
- #12 There is no longer a division between “us” and “them”. We are designing for us. Ourselves, neighbors, people who use our products and the people they share them with. We are designing and creating for people.
- #13 The World Health Organization reports that one out of seven of the world’s population has some form of disability. Important variables to consider are physical, sensorial, cognitive disabilities, and how their abilities affect daily functions as well as the growing number of people over the age of 65 losing abilities as they age. As new technologies rapidly emerge for people to engage in, creating products and services that don’t include alternate interaction models is a failure on a global scale. It is our duty as designers and engineers to create, understand and practice accessible design to maintain or improve the quality of life for disabled individuals.
- #14 Overall, over 21% of people over 15 years and over 49% of people over the age of 65 have some form of disability.
- #15 The projected population growth of people over 65 exceeds that of any other age group.
- #16 Instances of disability of any kind grow quickly as we age.
- #17 The 2010 US Census outlines the number of people with disabilities by age and by disability classification. This graph visualizes that data. It shows that 12.8% of children from ages 5-15 have some form of disability. 12.6% of people ages 15+ have an impairment in mobility, 6.3% cognitive impairment, and 6.2% vision or hearing. When we get to the aging population of people 65+, we see 39.4% mobility, 17.9% seeing and hearing, and 7.8% cognitive. Overall, over 21.3% of people over 15 years and over 49.8% of people over the age of 65 have some form of disability, keeping in mind that individuals can have one or more types of disability.
- #19 Much information technology we know and see today requires legal compliance. Many regulations, laws, and guidelines have been implemented over the years to enforce accessibility. The Americans with Disabilities Act (ADA) prohibited discrimination against people with disabilities. This act was implemented before the Internet was commonplace for people to communicate/ get information. Section 508 is an amendment to the Rehabilitation Act of 1973, which requires all electronic information presented by federal or government agencies to be accessible to people with disabilities. The World Wide Web Consortium (W3C) published WCAG 1.0, which are the web content guidelines for creating accessible websites. WCAG 2.0 is the latest and updated version. The 21st Century Communications and Video Accessibility Act (CCVA) requires all videos used for communicating on the web and on mobile devices and all video programming to communicate emergency information to include captioning. Canada has Common Look and Feel Standards. Australia, Ireland, UK has the laws against disability discrimination. The British Standards Institute issued a Code of Practice for Web Accessibility in 2010. Japan has their web content guidelines under the Japanese Industrial Standards.
- #22 When approaching the problem of designing for accessibility, there are some principles to follow to help guide the process. These are known as the four principles of accessible design, as defined by w3.org. These were published in 2008 as the guiding principles from the WCAG 2.0 guidelines. A good way to remember them is to remember the acronym “POUR.”
- #23 Perceivable:The user must be able to perceive information being presented.Can the user hear or see the information? Can he do so through the browser or through assistive technologies? Operable: Are any of the UI elements interactive? Can the user interact with all controls? If it’s touch, can he navigate to them easily? If on desktop, can he interact with the elements using a mouse, keyboard, or alternative assistive technology? Understandable:Is the information presented easy to understand? Or does it cause more confusion or ambiguity? Does the user understand how to use the app or website? Or is the onboarding/ learning process too long or too tough to handle?Robust:Can the interface and content be easily interpreted by customized interfaces? By different devices? Or by different operating systems or browsers?
- #27 With these guiding principles we can measure the usability of existing pages and create new pages that can be enjoyed and accessed by everyone.
- #28 Guidelines for mobile are being created, but the experience on the web is different on a desktop or laptop and phone or mobile device. here is where an understanding of the basic elements of design and their purpose can help navigate this relatively new space:Designers will be familiar with a lot of the terms in this section, but it’s important to get an overview and remember that each ingredient in the design has an affect on its legibility.
- #29 Legibility means that the user has an understanding of 1) what the content is, 2) what the content is communicating based on how it is organized, and 3) what the logical next step is. At it’s core, legibility equals understanding
- #30 Creating content that is legible is a complex task, requiring a balance of several elements. When designing for digital, we can use a few multisensory factors. The six we will talk about today are: Hierarchy, iconography, color and contrast, sound, typography and touch and haptics.
- #31 When testing a concept for one or more of these elements of legibility, it is important to ask these three questions. Can my audience understand it? This includes those who require accessibility features. How can the platform help my users understand? Is this behavior something that already exists and users will be familiar with it, or am I teaching my users something new?
- #32 Hierarchy describes a visual or cognitive order to elements and information. The order in which users see and process information can drastically affect their understanding of an interface or set of instructions, so maintaining a clear hierarchy through order and visual language is essential.
- #33 Each color has a learned meaning associated with it. Red means stop, yellow means caution, and green means go.
- #34 Traffic lights also give us direction by being consistent in the way they give us this color-coded direction. Here is an example of a basic UI of a traffic light. The action that is “on” is white and the actions that are off are in black. This is much like a selected state on a UI document.
- #37 When we talking about color, it is important to make a few distinctions between terms that are used to describe the qualities of colors. Hue is the difference between colors. For example, red and blue are distinctly different hues, while red and a reddish orange are similar hues.Chromaticity is a way of describing the purity or intensity of a color. Saturation is a term used to describe the apparent pigment in a color value. Value can be understood as “lightness” or “darkness” of a color. For example, pastel colors have a low value. The way value appears to us can change depending on lighting conditions, however on digital interfaces, colors are displayed relatively consistently.Contrast describes the difference between qualities of two colors. This can be applied to many different qualities, for example, having high contrast in value can simply mean that one color is light and another is dark. Contrast between hue can be both a contrast in value and a contrast in the apparent color. Yellow and blue, for example, have a high contrast in both value and in hue.
- #39 The greyscale in 10 steps.
- #40 The Munsell Color System is a way of giving numerical values to colors, much like RGB or CMYK. For the today’s presentation, we will use these colors to look at what happens when a range of colorblindness factors are applied.
- #41 Shown here are the standard 10 Munsell colors and below how they appear with four types of colorblindness. What is important to note is that contrast is much more than a difference in the value of black; a design may be very colorful but still maintains enough detectible contrast.
- #42 A lot of applications are heavily text based. The way text is formatted, from a single button to a paragraph in a book, is an essential part of making sure content is legible. Designers will be familiar with typographic properties. We’ll go over just a few for review. Fonts are a collection of letters, numbers and other glyph characters. Helvetica Regular, for example, is a font.Type is measured in points. “Standard” 12pt type is roughly 1/6 inch tall. How large and how flexible type is in digital is one of the biggest hurdles in legibility for someone who has difficulty seeing. Weight refers to how thick the lines on a letter are. Often there are light, regular, and bold variations, but sometimes there are many more. Each weight is an individual font and together, they make a font family, e.g. Helvetica. Uniformity refers to how consistent the stroke of a letter is. You may come across fonts that are referred to as “geometric”, and often they will have very little or no variation in the stroke weight. It is common for sans serif fonts (fonts without “feet”) to be more uniform, as opposed to serif fonts, which can have very thick and very thin components. Finally, contrast in the context of typography has both to do with color as well as space within letterforms. For example, a condensed typeface will have very little contrast and may look like a black bar from far away.
- #43 When putting lines of text together, the spacing between lines can affect legibility as well. You can think of it as giving enough space for the user’s eye to find the next line. Design programs often do a good job in automating the spacing, but on small screens, it’s good to do some experimenting.
- #44 Here we see an example of different weights of the letter Q in the same typeface. With the correct color and size, all weights can be legible (though very thin typefaces can be more of a hassle to deal with).
- #45 Shown is an example of uniformity and symmetry in a typeface. The line that makes the letter is the same weight in all parts of the letterform.
- #46 There are some basic fonts that have good contrast, weight and geometric balance that are widely used and available. Many are sans-serif because this style of typeface often has a less dramatic difference between thin and thick parts of letters, thus increasing contrast and legibility.
- #47 Dyslexie is a font designed by Christian Boer for people with dyslexia. Characters are visually bottom-heavy and exaggerate direction to differentiate between characters with higher levels of symmetry. While it is not an elegant design solution, it is a demonstration of how the shape of letters can drastically affect the ease of reading.
- #48 Iconography expresses ideas, actions, direction and emotion in a single image. They can replace text while still expressing meaningful direction.
- #49 When icons are simple and clear, text isn’t required. Here we can see iconmonstr.com navigation icons. However, alt text is needed for every image.
- #50 If there is no alt text, some screenreaders will just read it as “image.” Some screenreaders will default to the filename so having the correct, contextual filename is important, but alt text is the main element needed when describing an image.
- #51 Auditory cues should be used alongside visual cues within interfaces. Auditory cues have been incorporated into our everyday lives that we don’t even notice how essential it can be. For example, when you receive a text message or email or missed call on your phone, you may receive different sounds as notifications, reminders, or alerts. We sometimes refer to these as “earcons,” which is auditory equivalent for visual icons. What about outside mobile interfaces? When the dishwasher or washing machine or microwave is done, you may hear a beeping sound. For every button your touch on the microwave, it makes a sound. Siri is just a modern day example of utilizing sound and voice to get information or perform tasks. How about getting creative with sound as responsive feedback? During a loading indicator/ spinner/ progress bar, users have universally learned this as a sign to wait for something to load. How about an auditory cue such as elevator music? Additional notes: We should perhaps look into phone service industry as their services are often limited to primarily auditory cues rather than visual. We spend so much of our time looking at our devices and relying heavily on visual cues. How can we apply their knowledge and apply their thinking to interactions on interfaces?
- #52 Touch and haptics are used in some apps, but they’re not used very often. Touch and haptics are useful and essential to indicate an occurrence, such as a error or completion of a task. The app Bump uses haptic feedback to let users know when they’ve completed a bump transaction or when they’ve received a file. How about using haptic feedback to notify users of an error such as logging in with the wrong user name or password or network connection error? How about after I just uploaded a large file successfully or unsuccessfully? A good use of touch is when the user does a long press or ‘touch and hold’ to invoke an action. On Android devices, users must do a long press to move apps to the home screen or remove items from the home screen. On iPhones, users long press to launch the edit state of the home screen where they can remove apps entirely by tapping on the “x.”
- #53 There are many tools to test visual designs for color and contrast. Color Oracle is an app that simulates common color blindness and impairments.
- #54 Adobe Photoshop CS6 offers soft proofing or preview of color blindness.
- #55 VisionSim is an app that simulates vision of persons with specific eye diseases.
- #56 Start exploring some of the many resources out there on mobile accessibility. These contain checklists, general principles, best practices for creating or publishing design or content on the web or mobile devices.
- #58 Forming groups, you will be given a pair of services to explore. Become familiar with how they work and try to access them with some accessibility features on your phone. Imagine having to interact with the service in as many ways as possible. Identify the most prominent pain points to share with the group.
- #61 Born with achromatopsia (complete color blindness) Neil Harbisson, founder of the Cyborg Foundation, developed a device that translates colors into sounds called the Eyeborg.See the video about Neil here: http://vimeo.com/51920182#at=0
- #63 Android, iOS, Windows, Blackberry, Symbian, WebOS are the most popular mobile operating systems existing today. Each operating system has accessibility features and functionalities built into them to help individuals that need specific assistance use their devices to their fullest (i.e. Apple iOS’ VoiceOver feature, Android’s TalkBack feature offers text-to-speech functionality for blind or low vision users). Firefox OS is a new web platform operating system with a deeper focus on HTML5.
- #64 These common built-in features appear in iOS and Android. They are important to keep in mind when creating a design. As mentioned earlier in the presentation, even something like the name of an icon can affect how text-to-speech functions.
- #65 There are many assistive technologies and services that exist today. Alternative keyboards, jumbo remote controls, screen magnifiers are physical examples that are helpful for people with low vision. Most mobile devices support braille readers and hearing aids to be attached. Screen readers are built in to most mobile operating systems. Many utility and accessibility apps can be downloadable on mobile devices to help people see or hear or navigate their devices better.
- #66 We recommend watching these videos to learn more or get a better understanding of accessibility.
- #68 Google, Audi and Toyota have been introducing self driving cars. These vehicles offer an innovative solution for the blind and visually impaired as they can be driven where they need to go by giving commands.
- #69 Pretty much everyone knows about Siri, but it was a revolutionary feature built in to iOS. It uses speech functionality to search for information, send messages, navigate, etc.
- #70 Bump is an app that uses geolocation and like GPS and gyroscope to send or transfer files between devices. Haptic feedback from the device indicates that the bump was completed.
- #71 Fleksy is an app that allows for more accurate text input. When you make typos, Fleksy can predict what you wanted to type and correct you. It claims to be much more accurate than iPhone and Android auto-correct, allowing you to type without even looking. As a blind or low vision user, this app is great bc you can make as many mistakes as you like while inputting text, and Fleksy can still predict what you are trying to type.
- #72 TouchFire Keyboard allows you to feel the keys. Allows more comfortable, faster, and accurate typing.
- #73 Blind Maps is a physical piece that can be attached to the mobile device which offers constantly updated haptic pins basing off of Google Maps navigation. For full article: http://www.fastcodesign.com/1671924/iphone-maps-for-the-blind-using-haptic-tech
- #74 BrailleTouch is an app that allows users to type in Braille. Users that know the Braille alphabet system can potentially type faster than using regular iPhone keyboard.
- #75 Recently approved by the FDA, the Argus II is a pair of glasses (used in conjunction with surgically implanted electrodes in the eyes) that translates images to light so users may see movement. Full article: http://www.nytimes.com/2013/02/15/health/fda-approves-technology-to-give-limited-vision-to-blind-people.html?_r=0
- #78 Select one of the services you compared and suggest an improvement. This can be a suggestion about the architecture of the service, hierarchy of information, gesture controls, steps in a process, etc.
- #79 Identify a product or service that you believe is missing in the marketplace. Brainstorm around how your service will be helpful to your audience. Try to think about how it will be used with accessibility tools available on a variety of platforms and also how it can be used without these tools. Describe them in writing, sketch or quick paper prototype.
- #81 It seems daunting, but there are a few simple steps we can take as designers and engineers to be aware of a wider umbrella of our audience. As new technologies rapidly emerge for people to engage in, creating products and services that don’t include alternate interaction models is a failure on a global scale. It is our duty as designers and engineers to create, understand and practice accessible design to maintain or improve the quality of life for disabled individuals. Taking the first step and initiating the conversation in our offices and applying them to designs is difficult, but using some of both the short and long term approaches we’ve looked at today, you can start making a difference.
- #83 Remember, we’re designing for us.
- #84 Thank you for participating in the Interfaces, Accessibility & Superheroes workshop. While this presentation barely scratches the surface of the world of accessible design, we hope it has offered an overview of both the practice and possibilities. If you would like to talk more with us about accessible design and assistive technologies for digital services, just holler!Livia.veneziano@gmail.comyoyososo@gmail.com
- #85 Thank you for participating in the Interfaces, Accessibility & Superheroes workshop. While this presentation barely scratches the surface of the world of accessible design, we hope it has offered an overview of both the practice and possibilities. If you would like to talk more with us about accessible design and assistive technologies for digital services, just holler!Livia.veneziano@gmail.comyoyososo@gmail.com