Superheroes SXSW 2013

  • Published on
    08-Jul-2015

  • View
    1.572

  • Download
    0

Embed Size (px)

DESCRIPTION

BAM! POW! Beloved superhero Daredevil squelches his enemies with speed and precision, completely uninhibited by his blindness. Overcoming adversity, discovering superpowers, and saving the world are common themes in comics and graphic novels. Our mission is to bring those themes into the world of accessible design. The World Heath Organization and the World Bank report that nearly 1 out of 7 of the world's population has some form of disability. Creating products and services that don't include alternate interaction models is a failure on a global scale. Designers and engineers are the middlemen between disability and super-ability, and it is our duty to help break interface barriers. This session will explore examples and methods for understanding and practicing accessible design.

Transcript

<p>PowerPoint Presentation</p> <p>SXSW Interactive Workshop, 2013Yvonne So &amp; Livia VenezianoInterfaces, Accessibility &amp; Superheroes1#superableWelcome to Interfaces, Accessibility and Superheroes; a workshop that focuses on approaches, challenges and best practices for designing for accessibility. Presented by Yvonne So and Livia Veneziano. South by Southwest, 2013.</p> <p>1</p> <p>Hello - Were Designers2Yvonne So and Livia Veneziano 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 todays 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.23Designing for AccessibilityThere 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 todays designs compatible with accessibility technology, but being smart about design decisions upfront can open the door to new ways of organizing information.</p> <p>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. 34First, a ChallengeFirst, a challenge. </p> <p>You will need a smartphone or tablet for this exercise. </p> <p>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.</p> <p>Not easy, right? </p> <p>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. </p> <p>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.4What is Accessible Design?5The most important step is understanding what accessible design is. Lets go through some basic terminology that we will use a lot today.5Universal Design n.</p> <p>...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.htm6Definition: Universal DesignUniversal 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. 6Disability n.</p> <p>...is a complex phenomenon, reflecting an interaction between feature of a persons body and features of the society in which he or she lives.Disabilities. World Health Organization. Retrieved 11 August, 2012.7Definition: DisabilityIt 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.7Accessibility n.</p> <p>...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, 20138Definition: AccessibilityHand-in-hand with universal design, accessibility is the measurement of how easily something is understood and interacted with by the widest range of users.89</p> <p>Who Are We Designing For?Who are these users?9</p> <p>Challenging Convention10Many times, when we hear or talk about accessibility, we think of this model: Theres us and theres them.</p> <p>Consider this: The World Health Organization reports that nearly 1 of 7 of the worlds population has some form of disability. This means that each of us will encounter some form of disability in our lives. </p> <p>Additionally, the growing number of people over 65 is rapidly losing ability in physical, sensorial and cognitive ways. </p> <p>10</p> <p>11</p> <p>Challenging ConventionThere is no longer a division between us and them. </p> <p>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. </p> <p>11World Heath Organization Disability Report12One out of seven of the worlds population has some form of disability.- World Health Organization</p> <p>The World Health Organization reports that one out of seven of the worlds 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. </p> <p>As new technologies rapidly emerge for people to engage in, creating products and services that dont 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.</p> <p>12</p> <p>2010 Census: Disability by Age13</p> <p>Overall instances of disability in the U.S. by age.People over 15 years old21.3%People over 65 years old49.8%</p> <p>Overall, over 21% of people over 15 years and over 49% of people over the age of 65 have some form of disability. </p> <p>132010 Census: Population Growth of 65+14Projected growth of population 65 years and older.</p> <p>The projected population growth of people over 65 exceeds that of any other age group. 14</p> <p>2010 Census: Disability Occurrence by Age15</p> <p>Overall instances of disability in the U.S. by age.Instances of disability of any kind grow quickly as we age. 15</p> <p>2010 Census: Disability by Age &amp; Type16Instances of disability in the U.S. by age &amp; typePeople over 15 years oldPeople over 65 years old</p> <p>MentalMobilityHearing, Sight &amp; Speech</p> <p>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.</p> <p>16Regulations and Guidelines1717181990: Americans with Disabilties Act (ADA)</p> <p>1998: Section 5081999: WCAG 1.0</p> <p>2008: WCAG 2.02010: 21st Century Communications and Video Accessibility Act (CCVA)</p> <p>Regulations &amp; GuidelinesU.S. RegulationsMuch information technology we know and see today requires legal compliance. Many regulations, laws, and guidelines have been implemented over the years to enforce accessibility. </p> <p>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. </p> <p>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. </p> <p>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. </p> <p>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. </p> <p>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. 18Superheroes of Today191920Overcome adversityFight for goodAdhere to principles, guidelines, and lawsUse existing infrastructure in new waysUse innovative technology Look great in a cape</p> <p>Rules for being a Superhero</p> <p>Superhero Checklist20As defined by w3.orgFour principles of Accessible DesignP.O.U.R.21When 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. </p> <p>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. </p> <p>2122PerceivableOperableUnderstandableRobustPerceivable: 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? </p> <p>Operable: Are any of the UI elements interactive? Can the user interact with all controls? If its touch, can he navigate to them easily? If on desktop, can he interact with the elements using a mouse, keyboard, or alternative assistive technology? </p> <p>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?</p> <p>Robust: Can the interface and content be easily interpreted by customized interfaces? By different devices? Or by different operating systems or browsers? </p> <p>22Perceivable23</p> <p>e.g. FlipboardProviding alternative text on images </p> <p>Captions or transcripts for video and audio</p> <p>Good color contrast </p> <p>Avoid marquees or movement23Providing access to navigation and controls through alternative means (e.g. Tab) </p> <p>Dont make buttons too tiny</p> <p>24</p> <p>Operablee.g. New York Times Mobile2425</p> <p>UnderstandableContent is clearly and logically presented </p> <p>Wording should be simple and concisee.g. Dropbox2526</p> <p>Semantic markupsValidate code Responsive designRobuste.g. Netflix</p> <p>With these guiding principles we can measure the usability of existing pages and create new pages that can be enjoyed and accessed by everyone. </p> <p>26Basic Elements of Accessible Design27Guidelines 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:</p> <p>Designers will be familiar with a lot of the terms in this section, but its important to get an overview and remember that each ingredient in the design has an affect on its legibility. 27What is Legibility?Legibility equalsUnderstanding28Legibility 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 its core, legibility equals understanding28LegibilityHierarchyColor &amp; ContrastTypographyIconographySoundTouch &amp; Haptics</p> <p>The Elements of Legibility29Creating 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. 29Can my audience understand it?</p> <p>How can the platform help my users understand? Does the platform suggest particular usability patterns?</p> <p>How difficult is it to learn? (Learned behavior vs. established patterns)Questions to Test Legibility30When 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?30HierarchyWhat is Hierarchy?OrderSizeAction31</p> <p>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. 31Stop</p> <p>Caution</p> <p>GoTraffic Light Example32Each color has a learned meaning associated with it. Red means stop, yellow means caution, and green means go. 32</p> <p>On</p> <p>Off</p> <p>OffUI of a Traffic Light33Traffic 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. 33Low BatteryBattery Level Example34Battery Charged34UI of a Battery Level35OnOn35What is Color?36ColorHueChromaticitySaturationValueContrastWhen 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. 36Colorblindness affects approximately 8% of males and 0.5% of females.www.colorblindor.comColorblindness3737</p> <p>GreyscaleThe Greyscale38The greyscale in 10 steps.38</p> <p>Munsell Color SystemMunsell Color System39The Munsell Color System is a way of giving numerical values to colors, much like RGB or CMYK. For the todays presentation, we w...</p>