website usability | day 4

Download Website Usability | Day 4

Post on 27-Jan-2015




4 download

Embed Size (px)





2. ACCESSIBILITY 3. UNIVERSAL a goal, not an outcome.To achieve universal usability, designers need to support awide range of technologies, to accommodate diverse usersand to help users brides the gap between what they knowand what they need to know.Web Style Guide, 3rd Edition 4. UNIVERSAL USABILITY informed by Accessibility Usability Universal Design 5. ACCESSIBILITY1999: World Wide Web Consortium establishes the WebAccessibility Initiative (WAI).Promotes best practices to make the web accessible to peoplewith disabilities.Ensures that the tools and technologies that designers needare available to create designs that work in different contexts.Basically refers to how well a site can be used by as manypeople as possible. 6. USABILITYArises from User Centered Design (UCD).Includes a broad and inclusive view of the user. 7. UNIVERSAL DESIGNNot just alternative designs to meet specific needs.Accounts for users of all ages, experience levels, andphysical or sensory limitations. 8. The Principles ofPowered door with sensors isconvenient for all shoppers,especially if hands are full. Universal Design The design of products and environments to be usable by all people, to the greatestPublic emergency stations utilizerecognized emergency colorsand a simple design to quickly extent possible, without the needconvey function to passers-by. for adaptation or specialized design.Flexibility in UseThe design accommodates a wide range ofindividual preferences and abilities. Simple and Intuitive Use Use of the design is easy to understand, Equitable Use regardless of the users experience, knowledge, language skills, or education level. The design is useful and marketable to people with diverse abilities.A sequential-trip trigger on a nailgun requires the user to 1 activatethe safety before 2 pulling thetrigger, minimizing accidents thatoccur when a user accidentallyhits an object or personwhile pulling the trigger.As per Center for Universal Design at North Carolina State Universitys College of Design( Perceptible Information The design communicates necessary informationLarge-grip scissors accommodates use effectively to the user, regardless of ambient Small bumps on a cell phone keypad tell the user wherewith either hand and allows alternation conditions or the users sensory abilities. important keys are without requiring1 between the two in highly repetitive tasks.the user to look at the keys. Door lever does not require grip Wide gates at subway stations strength to operate, and can even be accommodate wheelchair users as well operated by a closed fist or commuters with packages or luggage.Tolerance for ErrorThe design minimizes hazards and theadverse consequences of accidental orunintended actions.Size and Spacefor Approach and UseCenter forLow Physical Effort Appropriate size and space is provided for approach,The design can be used efficiently and comfortably andreach, manipulation, and use regardless of users bodyUniversal a minimum of fatigue.size, posture, or NC State500 copies of this public document were printed at a cost of $1.34 each.Recycled paper and soy-based inks 9. UNIVERSAL DESIGN PRINCIPLESThese are most applicable to the web. 10. #1 EQUITABLE USEThe design is useful and marketable to people with diverseabilities. Provide the same means of use for all users: identicalwhenever possible; equivalent when not. 11. #2 FLEXIBILITY IN USEThe design accommodates a wide range of individualpreferences and abilities. Provide choice in methods of use. 12. #3 SIMPLE AND INTUITIVE USEUse of the design is easy to understand, regardless of the usersexperience, knowledge, language skills, or current concentrationlevel. Eliminate unnecessary complexity and arrange informationconsistent with its importance. 13. #4 PERCEPTIBLE INFORMATIONThe design communicates necessary information effectively tothe user, regardless of ambient conditions or the users sensoryabilities. Use different modes (pictorial, verbal, tactile) forredundant presentation of essential information and providecompatibility with a variety of techniques or devices used bypeople with sensory limitations. 14. PEOPLE WITH DISABILITIES1 in 5 people in the United States.Number of people with disabilities rose 25% in last decade.In 2010 21.5 million people were visually impaired or blind. 15. TYPES OF DISABILITIESVisual impairmentsHearing impairmentsMobile impairmentsCognitive impairments 16. STANDARD 17. HIGH- CONTRAST TEXT 18. ENLARGED TEXT 19. WITHOUT STYLING 20. DESIGNING FOR SCREEN READERS 21. JAWSScreen reading software. JAWS SAMPLE 22. USE DESCRIPTIVE HEADINGSHelps users understand page structures.Screen readers dont look at web pages, they read HTMLcode.Can call up a list of on page headings and jump to thesection of a page 23. Heres what this headings box for the BBC homepage looks like in JAWS, one ofthe most popular screen readers: 24. WRITE DESCRIPTIVE LINK TEXTScreen reader users can call up a list of on page links.Avoid Click Here, Read More 25. Heres what this links list dialog displays for the BBC homepage in JAWS: 26. PROVIDE INFORMATION IN LISTSScreen readers call out the number of items in each listbefore reading them, much like an answering machine.Mark up is in code tag 27. USE LOGICAL LINEARIZATIONScreen readers read top to bottom, left to right.Avoid putting important information at the bottom (e.g.instructions for forms). 28. USE SHORT SUCCINCT ALT TEXTALT text is a description of the images on a page that screenreaders read aloud.Use succinct text to avoid long drawn out speech. 29. WRITE SHORT PARAGRAPHSConclusion first, followed by the what, why, when whereand how.This allows users to quickly understand what the paragraphis about.This benefits sighted users as well. 30. WRITE DESCRIPTIVE PAGE TITLESThis is the first thing a screen reader user hears.Helps orient the user. 31. COLOR BLINDNESSInability to perceive difference between some colors.Affects 5 to 8% of males, 0.5% of females (Wikipedia).Safest colors to use are black and white.Use colors for emphasis, not visual cues.Provide redundant cues (textures, text labels). 32. normal 33. protanopia-red green 34. deuteranopia - red green 35. tritanopia - blue yellow 36. 37. Sales by productSales by product 38. This is difcult to read. This is easy to read. 39. ACCESSIBILITY RESOURCES Universal Design 40. WORKSHOP # 1 TEST SITEPlease go into the group you worked with when creatingpersonas.AFTER CREATING PROTOTYPE:Do a prototype test with another groupMake improvements with original group 41. FORMS 42. SIGN UP FORMSRemove ALL barriers to account creation.Dont make them recreate what theyve already done. 43. WHY FORMS EXISTEvery form exists for one of three main reasons:- Commerce- Community- ProductivityWeb From Design: Filling in the Blanks, Luke Wroblewski 44. Uses of forms, based on Luke Wroblewskis Web Form Design: Filling in the Blanks. 45. RELATIONSHIPA form is a way to establish a relationship withthe user and the organization. 46. TRUSTAchieved through logo, color, typography, and wording. 47. GOALSWhat is the goal of the form? 48. PURPOSEBase the name of the form on its purpose so users know whatand why. 49. APPROPRIATE LANGUAGEBalance business needs with user needs. 50. NO SUPERFLUOUS QUESTIONSToo many questions cause user to question motivation. 51. NO SUDDEN behavior or appearance will make the user anxious. 52. Make it easy for registered users to log in and for new users to register 53. Simplify the process for registered and new customers 54. CONVERSATIONA form is a two-way conversation betweenthe user and the organization. 55. CONVERSE, DONT INTERROGATEAvoid aggressive wording. 56. ORDER LABELS LOGICALLYShould reflect the flow of a conversation. 57. MORE INVOLVED QUESTIONS...should come towards the end. 58. GROUP RELATED INFORMATIONAddress one topic at a time. 59. Groups are related through purple headings and fine lines 60. Content is related, but the groups are separated too much. Potential for confusion. 61. ONE AT A TIMEThe flow from one set of questions to the next should resemblea conversation. 62. REMOVE CLUTTERBanners, unnecessary navigation, anything that might distract. 63. Effective use of white space 64. Tone is appealing, form has no superfluous questions 65. 6 COMPONENTS OF FORMS Labels tell users what the input fields mean Input Fields text fields, password fields, check boxes, radio buttons, sliders, etc Actions when clicked these perform an action, such as submitting a form Help provides assistance on how to fill out the form Messages provides feedback based on user input Validation ensures that data inputted conforms to acceptable parameters 66. #1 LABELSWords vs sentencesTry to use words, but if needed, add a phrase to eliminateambiguitySentence case vs. title caseSentence case is slightly easier to readAVOID ALL CAPS AS THEY ARE HARD TO SCAN 67. Pretty, but difficult to scan 68. Individual words would have sufficed 69. #2 INPUT FIELDSDont invent new fields simple is bestDistinguish which input fields are required convention isan asterisk *Colons at the end of a label matter of preferenceTop vs left vs right alignment of labels- each has advantagesand disadvantages 70. Vertical: when user types data their eyes are fixed across the vertical axis at the left to the input field 71. Eye needs to jump from one field to the other. Too much distraction. 72. SELECT MENUSMany choices in a small space.Hard to use especially when there are many choices.Easier to enter state or country code than to choose. 73. RADIO BUTTONSEasy to scan.But if list is long, its hard for user to