WQusability.comWhitney Quesenberywhitneyq@wqusability.comA Web ForEveryone6 Awesomely Practical TipsMaking content betterf...
Tip 6Think accessibility firsthttp://en.wikipedia.org/wiki/Oscar_Pistorius2Like mobile first, design for constraintsand cl...
Asssistive Technology shown: Refreshable Braille, mouth stick, using a screen reader, screen magnifier (high contrast),Gle...
User experience is about people4
Accessibility as innovation5
Have a conversationwith the audiencehttp://petanque-c.com/are-you-a-conversation-hog-8-tips-to-better-conversations/6Antic...
A good conversation includes listeningor7Not ‗broadcasting‘ but really listening. This is especially important now that an...
Conversations cross boundariesThis conversationincluded: Phone Web Email Twitter In-person8
The text in the image says:Living with MS.Michael, diagnosed in 2004 (shown with his wife)Speak directly to the audiencena...
People can be hidden in the conversation§ 408.315. Who may sign your application?(a) When you must sign. If you are mental...
Conversations take place over timeAn activity or task can crossdevices, or require a series ofactions at different times....
Break downwalls of wordshttp://www.washingtonpost.com/12No one wants to read a large,unbroken block of text. Breaking down...
Design and write for reading patterns13F-Pattern reading – scanningthe pageMore focused reading,looking at a whole paragraph
Design and write for reading patternsReading patterns on a singlepage can include bothnavigation (scanning) andconcentrate...
People read with different levels of literacyBelow basic – only the mostsimple and concrete reading skillsBasic – able to ...
Help readers navigate within the pageProvide good landmarks Page title Summary Headings Bullets Related links Captio...
Good headings break up walls of wordsMake headings active, so theyconnect to the reader Verb phrasesshow action Question...
Headings show structure18 Skipping a level in thehierarchy is difficult forsome screen readers. One H1 per page. This s...
Recognition,not recall19It‘s not a game! Don‘t make usersguess, or remember. Put informationon the screen in the right pla...
Don’t force users to hunt within pageEven complex pages workwith good orientation cuesScreen readers can use WAI-ARIA rol...
Don’t make users guess about what will happenCommunicate context andrequirements: What they will do The steps in the act...
Leap and land on the same wordsGive links a good ―scent ofinformation‖Confirm that the page is theone users expectedHT to ...
Describe imagesmeaningfully23A picture is only worth 1000 words ifyou know what it says.There are many reasons whysomeone ...
ALT means ALTERNATIVEText alternative to an image thatsubstitutes for the visual. Brief description of the content ofthe ...
Alt text is contextualImage credit: J. and K. Hollingsworth/USFWSShould this be described as: Fox Red fox Red fox at Sa...
Alt text tells the storyPhoto of the WeekRed fox at Sachuest PointNational Wildlife Refuge inRhode Island.Image credit: J....
When the image is a link...If the image is alone: Add text to describe thefunction.If there is text with the image Don‘t...
Alt text repeats the textThe most basic function of alttext is to communicate any textin the image.Should this alt text re...
Alt text is part of contentstrategyThis page has A title that is meaningful: ―MoreEducation Means More Money‖ A summary ...
Tips for writing alt text If there is text in the image, repeat it in the alt text. Make the descrition meaningful in co...
Design for all senses:design for everyone31
Use visual design for meaning32Target ClearRx drug labels, designed by Deborah Adler
Don’t rely on color aloneProvide multiple cues Stop signs:ShapeColorText Choice tableShapeColorPosition33
Make it keyboard accessibleMake the keyboadexperience good, too Don‘t jumparound in thecontent Make sureeverythingintera...
Provide alternatives for visual and audio informationGraham Pullen, author of Design Meets Disabilityhttp://research.micro...
Design for all senses, because people...Read with different degrees of literacyRead in a hurry or without full attentionOr...
Think in a new wayPhotos: mtstcil.org and http://blog.metmuseum.org/alexandermcqueen/tag/no-13/ 37Why do we have to strugg...
Storytelling for User Experiencewith Kevin BrooksGlobal UXwith Daniel SzucA Web for Everyonewith Sarah HortonA Web forEver...
Whitney QuesenberyWQusability.comwhitney@wqusability.comusabilityinciviclife.orgTwitter @whitneyqSlideshare: whitney and S...
Upcoming SlideShare
Loading in …5
×

6 Awesomely Practical Tips: Making content better for everyone

2,161 views
2,104 views

Published on

Tips 6 - 12 from 31 Awesomely Practical Tips, a one-day online conference by Rosenfeld Media and Environments for Humans. Recordings available: http://rosenfeldmedia.com/events/practical-ux-tips/

Published in: Design, Technology, Education
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,161
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • Accessibility first: because innovations for disabilities can easily become innovations for everyoneEyeglasses > fashionPostal carts > women postal carriersCurb cuts: wheelchairs > bikes, carriages, luggage, wheeled cardsOxo grips: arthritis > everyone
  • Hidden users – still works
  • There are many reasons why someone might not see an image. Maybe it didn’t download correctly. They are using a tiny screen and the image is hard to see. They may not be a visual learner, or the image relies on a cultural interpretation that they just don’t get. Or they are listening to the page instead of looking at it, as we head into a better and better voice recognition and text-to-speech. But I’m particularly thinking of people who simpy cannot see the image: they are blind and using a screen reader. They have one of many other visual disabilities and have to adjust their screen – for example to extreme magnification. Or they are color blind and the image doesn’t “read” informatively.
  • Subtitles – language translationCaptions – transcript of the same languageAudio description – adds captions for non-speech audioVideo description – describes action not spoken in the dialotTools getting better and more available
  • Too often we are dragged, kicking and screaming, into a new way of thinking.Aimee Mullin carved leg by Alexander McQueen
  • 6 Awesomely Practical Tips: Making content better for everyone

    1. 1. WQusability.comWhitney Quesenberywhitneyq@wqusability.comA Web ForEveryone6 Awesomely Practical TipsMaking content betterfor everyoneWhitney QuesenberyFrom 31 Awesomely Practical UX Tipshttp://rosenfeldmedia.com/events/practical-ux-tips/
    2. 2. Tip 6Think accessibility firsthttp://en.wikipedia.org/wiki/Oscar_Pistorius2Like mobile first, design for constraintsand clarity. It takes both technologyand a change in attitude to think aboutthe widest audience.
    3. 3. Asssistive Technology shown: Refreshable Braille, mouth stick, using a screen reader, screen magnifier (high contrast),Glenda Watson Hyatt and her iPad (http://doitmyselfblog.com)Responsive to devices. Responsive to assistivetechnology.3Both rely on flexibility and standards to adapt to the hardware context.
    4. 4. User experience is about people4
    5. 5. Accessibility as innovation5
    6. 6. Have a conversationwith the audiencehttp://petanque-c.com/are-you-a-conversation-hog-8-tips-to-better-conversations/6Anticipate what they will need to knowor want to do, so the experience feelslike a live conversation.HT to Ginny Redishhttp://www.slideshare.net/GinnyRedish
    7. 7. A good conversation includes listeningor7Not ‗broadcasting‘ but really listening. This is especially important now that aninteraction can range across different devices and contexts.For more about listening, see my book with Kevin Brooks, Storytelling forUser Experience
    8. 8. Conversations cross boundariesThis conversationincluded: Phone Web Email Twitter In-person8
    9. 9. The text in the image says:Living with MS.Michael, diagnosed in 2004 (shown with his wife)Speak directly to the audiencenationalmssociety.org 9Whether you just received a diagnosis ofMS or have been living with it for a longtime—this section is filled with informationand tips on how to maintain your qualityof life in the years ahead. Read aboutstrategies to enhance your health andwellness, maximize your productivity andindependence, and deal with emotional,social, and vocational challenges.
    10. 10. People can be hidden in the conversation§ 408.315. Who may sign your application?(a) When you must sign. If you are mentally competent, and physically able to doso, you must sign your own application.(b) When someone else may sign for you. (1) If you are mentally incompetent, orphysically unable to sign, your application may be signed by a court-appointedrepresentative or a person who is responsible for your care, including a relative.If you are in the care of an institution, the manager or principal officer of theinstitution may sign your application.(2) If it is necessary to protect you from losing benefits and there is good causewhy you could not sign the application, we may accept an application signed bysomeone other than you or a person described in paragraph (b)(1) of thissection.10
    11. 11. Conversations take place over timeAn activity or task can crossdevices, or require a series ofactions at different times. Keep the conversationgoing seamlessly Keep track of theprocess and keep theaudience orientedSimple.com 11
    12. 12. Break downwalls of wordshttp://www.washingtonpost.com/12No one wants to read a large,unbroken block of text. Breaking downwalls of words helps people navigatewithin the information or page.
    13. 13. Design and write for reading patterns13F-Pattern reading – scanningthe pageMore focused reading,looking at a whole paragraph
    14. 14. Design and write for reading patternsReading patterns on a singlepage can include bothnavigation (scanning) andconcentrated reading.This page shows skippingthrough the page, until findingthe section of interest.On This Page (anchor) linkscan help readers jump quicklyto the information they want ona long page.14
    15. 15. People read with different levels of literacyBelow basic – only the mostsimple and concrete reading skillsBasic – able to manage everydaytasksIntermediate – moderatelychallenging activities likeconsulting reference materialProficient – interpreting text,comparing viewpointsU.S. National Assessment of Adult Literacy http://nces.ed.gov/naal/kf_demographics.asp 15
    16. 16. Help readers navigate within the pageProvide good landmarks Page title Summary Headings Bullets Related links Captions16
    17. 17. Good headings break up walls of wordsMake headings active, so theyconnect to the reader Verb phrasesshow action Questionssignal what the section willanswer Sentences or phrasesmake a statement orprovide informationUse the same style for allheadings17Examples from: http://www.plainlanguage.gov/howto/guidelines/headings.cfmVerb phrasesGetting a permitFilling out the permitQuestionsDo I need a permit?How do I get a permitSentencesYou must get a permit to operate a vehicleGet a permit at any Motor Vehicles Office
    18. 18. Headings show structure18 Skipping a level in thehierarchy is difficult forsome screen readers. One H1 per page. This should notbe a heading!
    19. 19. Recognition,not recall19It‘s not a game! Don‘t make usersguess, or remember. Put informationon the screen in the right place, at theright time, and in the right format.
    20. 20. Don’t force users to hunt within pageEven complex pages workwith good orientation cuesScreen readers can use WAI-ARIA roles forregions of the page Headings forsections within aregion Skip (anchor) linksOpenIDEO.com 20
    21. 21. Don’t make users guess about what will happenCommunicate context andrequirements: What they will do The steps in the activityor task What they need tohave at hand21
    22. 22. Leap and land on the same wordsGive links a good ―scent ofinformation‖Confirm that the page is theone users expectedHT to Caroline Jarrett for the phrase ―leap and land‖ 22
    23. 23. Describe imagesmeaningfully23A picture is only worth 1000 words ifyou know what it says.There are many reasons whysomeone might not see an image.
    24. 24. ALT means ALTERNATIVEText alternative to an image thatsubstitutes for the visual. Brief description of the content ofthe image Communicates any text in theimage Identifies its meaning in context Works with other content orcaptions<imgsrc=“altkey.jpg”alt=“Alt key on acomputer keyboard”height=“201width=“162”>24
    25. 25. Alt text is contextualImage credit: J. and K. Hollingsworth/USFWSShould this be described as: Fox Red fox Red fox at SachuestPoint National WildlifeRefuge A red fox, standing aloneon a pile of rocks, looksback at the camera.25
    26. 26. Alt text tells the storyPhoto of the WeekRed fox at Sachuest PointNational Wildlife Refuge inRhode Island.Image credit: J. and K. Hollingsworth/USFWSOn a photo site, with additionaltext around the image the alttext might be: Red fox standing on aboulder A red fox, standing aloneon a pile of rocks, looksback at the camera.26
    27. 27. When the image is a link...If the image is alone: Add text to describe thefunction.If there is text with the image Don‘t duplicate the text. Use null alt text Enclose the text andimage in one linkEmailPrintSave<a href...><img src="icons/email.gi<a href...><img src="icons/print.gi<a href...><img src="icons/save.gifEmailPrintSave<a href...><img src="icons/email.gif<a href...><img src="icons/print.gif<a href...><img src="icons/save.gif<a href=...><imgsrc=“mail.jpg”alt=“Email”></a><a href=...><imgsrc=“mail.jpg”alt=“ ”>Email</a>27
    28. 28. Alt text repeats the textThe most basic function of alttext is to communicate any textin the image.Should this alt text read: 31 UX tips, 6 experts, 1day, 31 AwesomelyPractical UX Tips, May29, 2013, A One-DayVirtual Conference 31 Awesomely PracticalUX Tips, May 29, 2013,A One-Day VirtualConferenceWeve asked six of the smartest people in the UXindustry to share the most essential tips thatdesigners and researchers need to know. Theycame up with 31 incredibly valuable pieces ofadvice that will dramatically improve andstrengthen your UX practice.28
    29. 29. Alt text is part of contentstrategyThis page has A title that is meaningful: ―MoreEducation Means More Money‖ A summary paragraph The data in an image with alttext that identifies theit as a graph A table with the data presentedin the chartExample from Career One Stop http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21 29
    30. 30. Tips for writing alt text If there is text in the image, repeat it in the alt text. Make the descrition meaningful in context. Don‘t duplicate information in the page content or a caption. If the image is purely decorative or duplicates information on thepage, use a null alt text (alt=― ―). If the image is a link, it must have a brief description of the linkfunction or target page. If the image needs a longer description, include it on the page, orby providing a link to another page. Keep it short. (Aim for 5-15 words.) Don‘t repeat the word ‗image‘ or list technical details like the filename or image size.Remember: every image must include an alt attribute.30
    31. 31. Design for all senses:design for everyone31
    32. 32. Use visual design for meaning32Target ClearRx drug labels, designed by Deborah Adler
    33. 33. Don’t rely on color aloneProvide multiple cues Stop signs:ShapeColorText Choice tableShapeColorPosition33
    34. 34. Make it keyboard accessibleMake the keyboadexperience good, too Don‘t jumparound in thecontent Make sureeverythinginteractive is inthe [Tab] order34
    35. 35. Provide alternatives for visual and audio informationGraham Pullen, author of Design Meets Disabilityhttp://research.microsoft.com/apps/video/default.aspx?id=103405 35
    36. 36. Design for all senses, because people...Read with different degrees of literacyRead in a hurry or without full attentionOr in poor reading conditionsMay not know (or read) the language wellMay have a cognitive or learning disabilityOr a visual disability that can affect readingOr a physical disability that affects interactionOr may just prefer their own way to work36
    37. 37. Think in a new wayPhotos: mtstcil.org and http://blog.metmuseum.org/alexandermcqueen/tag/no-13/ 37Why do we have to struggle to get new ideas accepted, even when they becomevaluable to everyone. Why not look at the problem in a new way, as Aimee McMullinand Alexander McQueen did?
    38. 38. Storytelling for User Experiencewith Kevin BrooksGlobal UXwith Daniel SzucA Web for Everyonewith Sarah HortonA Web forEveryone
    39. 39. Whitney QuesenberyWQusability.comwhitney@wqusability.comusabilityinciviclife.orgTwitter @whitneyqSlideshare: whitney and StorytellingUX

    ×