NYU Web Intensive - Week 3 Class 2


Published on

Published in: Design, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

NYU Web Intensive - Week 3 Class 2

  2. 2. WELL, WHAT IS USABILITY?“Usability really just means making sure that somethingworks well: that a person of average (or even below average)ability and experience can use the thing - whether its a Website, a fighter jet, or a revolving door - for its intendedpurpose without getting hopelessly frustrated.” (Steve Krug)
  3. 3. USABILITY TESTINGTesting is a technique to ensure that the intended users canperform the intended tasks efficiently, effectively andsatisfactorily. Without frustration!
  4. 4. WHAT TOOLS ARE AVAILABLE? Surveys Interviews Eyetracking studies Usability testing Online testing tools
  5. 5. SURVEYSAllow users to review the site.Distribute surveys.Ask them to answer questions Survey
  6. 6. INTERVIEWSAllow users to review the site.Make user comfortable.Ask users questions.See handout. Interview
  8. 8. EYETRACKING AND THE EYEEyetracking is following the trail of where a person is looking.Equipment can be built into the computer.Eyetracking software keeps track of what’s on screen whileuser is looking at it. How does it work?
  9. 9. FIXATIONWhen the eye is resting on something.Last between one-tenth and one-half.Red spots are fixations.
  10. 10. SACCADESThe eye’s rapid movements from one fixation to the next.Last between one-hundredth and one-tenth of a second.Thin red line connecting the dots are saccades betweenfixations. Eyetracking Study
  11. 11. HEAT MAPSVisualization technique for eyetracking studies.A color-coded screenshot that shows the user’s fixations.Red: where users looked most.Yellow: indicate fewer fixations.Blue: indicate least view areas.Gray: no fixations. Facebook Heatmap
  12. 12. F - PATTERN
  16. 16. USABILITY TESTINGSeries of tasks for participants to perform on an actualwebsite or prototype.Tasks are formulated from user and business goals.Measures the success of failure of a design.What you need?Pen and clipboard, computer with Internet connection,perhaps a tape recorder.
  17. 17. STEPS
  18. 18. #1 INTRODUCTION (5-10 MINS)Make participant feel comfortable.Let them know they can have a break any time.If video taping, get permission.Ask questions about them – include demographics,occupation, education level, Internet experience.Explain equipment if necessary.Assure them that there is no right or wrong.
  19. 19. #2 TASKS (10 - 15 MINS )Be sure to read the task aloud.Encourage participant to think aloud.Have a written version that you leave in front of the user.DO NOT HELP THE USER THROUGH THE TASK.No small talk!
  20. 20. TECHNOLOGYMorae®: A recorder that captures onscreen activity of theuser’s computer and a camera video of the user.Creates a synchronized index of events occurring behind thescenes in applications and in the operating system. Morae Website
  21. 21. COMMON ERRORSStrategic Errors - premature testing, not enough time orwill to make changes.Inadequate Planning - do a pilot test to uncover problemswith plan and materials.Read script aloud.Allow enough time between test sessions (minimum 30minutes)
  22. 22. COMMON ERRORSPoor Task Design - test core functionality and areasidentified as problematic.If scenarios were used, convert into tasks to ensure keyinteractions are studied.Accidental Revelation - revealing too much. Watch yourlanguage.Unprofessional Demeanor - need to be professionallydetached and neutral. Don’t finish user’s sentence!
  23. 23. TEST PARTICIPANTSGet representative users - Craig’s list, LinkedIn,employmentagencies, market research agencies.Use questionnaires to screen.Offer incentives.Send reminders.
  25. 25. TEST PARTICIPANTSSchedule 5 - 8 users.Only need 5 - account for no shows, botched tests.Test up to 3 groups of 5 - 1 test after iterations made.
  26. 26. http://www.xperienceconsulting.com/en/research/lab_usability_test.php
  27. 27. http://happyuser.xperienceconsulting.com/tag/test-de-usuarios/
  28. 28. http://usit.com.au/introducing-cider-or-why-i-dont-like-the-term
  29. 29. USING THE DATA
  30. 30. USING THE DATATransform both qualitative and quantitative data to makerecommendations
  31. 31. QUANTITATIVE DATAAny information that can be measured:Ease of useSatisfactionVerbal descriptions of people’s experiencesExamples: The time it takes to complete a task, or thecompletion rate of a task.
  32. 32. QUALITATIVE DATAInformation that requires interpretationIdentifies trends or categories of user’s behaviorExample: How well users can complete a taskWhere they are encountering problemsLevel of frustration
  33. 33. COMB THE DATA
  34. 34. FROM INTERVIEWS Preferences Needs Stories Current Behaviors Pain Points Satisfaction Level
  35. 35. FROM USER TESTING Success New Behaviors Usage Patterns Pain Points Time to complete Assists required
  36. 36. ONLINE TESTING TESTING SITES - Usabilla - Infomaki - Chalkmark CARD SORTING - Optimal Sort - XSort (desktop app for Mac) NAVIGATION TESTING - Treejack - Five Second Test
  37. 37. ORGANIZING THE DATAOrganize the data into categories or findings.Find themes and put in table.
  38. 38. AFFINITY DIAGRAMSOrganizes items into common themes.Helpful when you have a large amount of data.You have many facts or ideas in apparent chaos.When issues seem too large and complex.When group consensus is needed.
  39. 39. AFFINITY DIAGRAMS 1. Record each idea on sticky note and layout on wall 2. Look for groups 3. Repeat till all notes are grouped 4. If a note seems to belong in two groups, make a second note 5. Discuss patterns and reason for groupings 6. Find headers
  40. 40. SPREADSHEETSUse to track stories, needs, pain points, successesProvides Quantitative layer over Qualitative informationMore difficult to collaborate than affinity diagrams Example
  41. 41. WORKSHOP # 1 - USABILITY TEST Please break into twos. Person A tests Person B Follow format: Orientation Tasks - read aloud to participant - careful not to “help” - be sure to ask about expectations - let mistakes happen Debriefing
  42. 42. WORKSHOP # 1 - USABILITY TEST Anything surprise you? Any new insight? Anything go wrong? Was the site used in a way that you did not expect? Did you discover any usability problems?
  43. 43. WORKSHOP # 1a- USABILITY TEST Please break into twos. Person B tests Person A Follow format: Orientation Tasks - read aloud to participant - careful not to “help” - be sure to ask about expectations - let mistakes happen Debriefing
  44. 44. WORKSHOP # 1a - USABILITY TEST Anything surprise you? Any new insight? Anything go wrong? Was the site used in a way that you did not expect? Did you discover any usability problems?
  46. 46. USER EXPERIENCE"User experience isnt a layer or component of a product orservice. Its really about the design of the whole systems andtheir interconnections."- Andre Hinton, Senior IA at Vanguard
  47. 47. WHY TEST?If a user can’t find a product, they won’t buy.If they can’t find what they are looking for, they will lookelsewhere.The holder of the mouse rules!
  49. 49. NAVIGATION“Navigation isn’t just a feature of a website, it is the web site,in the same way that the building, the shelves, and thecash register are Sears. Without it, there’s no there there.”-Steve Krug
  50. 50. WAYFINDINGCoined by Kevin Lynch in The Image of the City, 1960.Describes the elements that allow us to navigate successfullyin cities and towns.
  51. 51. 4 CORE COMPONENTS1. Orientation: Where am I now?2. Route decisions: Can I find the way to where I want to go?3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?4. Closure: Can I recognize that I have arrived in the right place?
  52. 52. ELEMENTS OF MENTAL MAPS1. Paths: streets, transit lines, canals, railroads - channelsthat people regularly move.2. Edges: physical barriers; walls, fences, rivers, shore -boundaries that create linear breaks in continuity/separateand relate two distinct regions.3. Districts: Major sections of a city that have a commonidentifying character: Chinatown, Wall Street, GreenwichVillage.
  53. 53. ELEMENTS OF MENTAL MAPS4. Nodes: Intersections, enclosed squares, street corners,subway stations - all serve as points of reference, transitionand destination.5. Landmarks: Towering buildings, golden domes,mountains, signs, storefronts, trees - physical objects thatserve as spatial reference points.
  54. 54. ON THE WEBNo sense of scale or movement in space.No compass: no direction.You are here: navigation interface.Paths: lead the way: site navigation, breadcrumbs.
  55. 55. PATHSConsistent, predictable navigational links.Appear the same throughout the site.Can be habitual.Explicit elements: breadcrumbs.
  56. 56. EDGES & DISTRICTSEffective interface design uses consistent page grid,terminology, navigation links.Uses visual flexibility to create identifiable regions andedges within the larger space.
  57. 57. Landmarks along the wayREGION REGION REGION REGION REGION REGION
  58. 58. NODESThe local coffee shop or Times Square?Too much choice causes stress, slows decisions, makes usless satisfied and more likely to walk away.
  59. 59. LANDMARKS “YOU ARE HERE”Search function cuts across all the normal wayfindingboundaries.Orientation cues are particularly important since users oftenarrive at a page without having followed a deliberate andrepeatable path.
  60. 60. Headers: “You are here” markers
  61. 61. SUMMARY1. Paths: create consistent, well-marked navigation paths.2. Regions: create a unique but related identity for each site region.3. Nodes: don’t confuse the user with too many choices.4. Landmarks: use consistent landmarks in site navigation and graphics to keep the user oriented.Web Style Guide, 3rd Edition
  62. 62. PAGE LAYOUT
  63. 63. ELEGANCE & SIMPLICITYUse economy of expression.Most powerful designs are result of a process ofsimplification and refinement.
  64. 64. MINIMALISM“A designer knows he has achieved perfection not whenthere is nothing left to add, but when there is nothing left totake away.”- Anoine de Saint Exupéry-
  65. 65. ADVANTAGES Approachability: easy to tell at a glance what it is and designs invite further exploration. Recognizability: recognized easily, easily assimilated, understood and…REMEMBERED. Immediacy: have greater impact because they can be immediately recognized and understood with minimal effort. Usability: simplicity enhances usability.
  66. 66. PRINCIPLES Unity Refinement Fitness All the elements must be unified to produce a coherent whole. The parts and whole must be refined to focus user attention and the fitness of the solution to the communication problem must be ensured at every level.
  67. 67. HOW Reduction Regularization Leverage Reduce the design to its essence, regularize the elements of the design, then combine them for maximum leverage.
  68. 68. INFORMATION...... consists of differences that make a difference.- Edward Tufte, Envisioning Information
  69. 69. SCALE, CONTRAST, PROPORTIONThe subtle interrelationship of scale, contrast andproportion can be seen in all harmonious designs.
  70. 70. SCALEDescribes the relative size of a design element in relation tothe other design elements and the composition as a whole.
  71. 71. CONTRASTResults from the differences that can be seen between thedesign elements.Provides visual distinctions in: shape, size, color, texture,position, orientation, and movement.
  72. 72. PROPORTIONDetermines the balance and harmony of the relationshipbetween the elements.
  73. 73. ORGANIZATION & STRUCTUREProvide the user with visual pathways needed to experiencea site in a systematic way.Must be introduced by establishing relationships among thedesign elements.
  74. 74. PRINCIPLES Grouping Hierarchy Relationships Balance
  75. 75. GROUPINGStart by grouping display elements into higher order units.(Note: words in a book are grouped into columns,paragraphs, sections etc).Higher-level structures orient the user.Binds functional units tightly together.Use spacing and alignment for effectiveness.
  76. 76. HIERARCHYEye looks for visual hierarchies for orientation.Most important elements must be large enough to draw theviewer closer.Specifics follow.
  77. 77. RELATIONSHIPSGrouping and hierarchy are reinforced when visualelements are related.Position, size and value provide visual cues.Alignment helps form visual relations.
  78. 78. BALANCEEnsures that the elements remain stable in their position onthe page.A composition is balanced when the visual weight of theelements on either side of the piece are approximately equal.
  79. 79. WORKSHOP # 2 - PAGE LAYOUT Please break into three groups. Find websites that illustrate: 1. Scale 5. Grouping 2. Contrast 6. Hierarchy 3. Proportion 7. Relationships 4. Organization & Structure 8. Balance
  80. 80. HOMEPAGES
  81. 81. FIRST CHANCEcan be your first (and possibly last) chance to attract a user
  82. 82. IDENTITYinclude a tag line that summarizes what the company does
  83. 83. FRONT PAGEshould be like the front page of a newspaper
  84. 84. TELL YOUR STORYshould say who you are, what you do or what products your offer and what sets you apart from the competition
  86. 86. PRIORITYemphasize highest priority tasks so there is a clear starting point
  87. 87. SHOULD BE UNIQUEdesign to be clearly different from all other pages on the site
  90. 90. THE FINE PRINTgroup all corporate information in one distinct area
  92. 92. CALLS TO ACTIONreveal site content with calls to action
  95. 95. Link to home page Primary location for search, shopping carts LOGO Calender | A-Z Index Search This Site GO Navigation and search The tagline would go here... Identity and titles Header Navigation links Navigation | Navigation | Navigation | Navigation Tab navigation Selected Tab Unselected Tab Unselected Tab Navigation Home page > Section > Page Breadcrumb trail Alternate right location Navigation for scan column Navigation navigation and searchLocal Navigation Navigation Navigation Common location for Navigation banner ads Navigation Navigation Search, banner ads, Left scan column Right scan column Main content column contact (optional) (optional) information Contact information, Footer Copyright 2012 | Company Name | Company Address | New York, NY | 555-555-5555 copyrights, dates
  96. 96. WEB STANDARDS“The experienced web designer, like the talented newspaperart director, accepts that many projects she works on willhave headers and columns and footers. Her job is not towhine about emerging commonalities but to use them tocreate pages that are distinctive, natural, brand-appropriate,subtly memorable and quietly but unmistakably engaging.”- Jeffery Zeldman-
  97. 97. ABOVE THE FOLDAbove the fold - a graphic design concept that refers to thelocation of an important news story or a visually appealingphotograph on the upper half of the front page of anewspaper.In web design, top 600 to 700 pixels (on 19” - 22” monitor)Just a guideline.
  98. 98. BREAKING THE RULESMore sites now will put important content beneath the fold.People will scroll if the content is interesting. 37signals Acumen Fund Zipcare
  99. 99. PURPOSE OF GRAPHIC DESIGNUnlike a print, web users interact with information.GUI (graphic user interface) must convey function andmeaning.Graphics are integral to the user’s experience.
  100. 100. PURPOSE OF GRAPHIC DESIGNCreate visual hierarchy so you can see what’s important.Define functional regions of the page.Group page elements that are related, so you can seestructure in the content.
  101. 101. CONSISTENT LAYOUTHeader - mini versions of the homepage.Footer - about house keeping and and legal matters.Global NavigationLocal NavigationContent, Features, ProductsBanner Ads
  102. 102. PAGES SHOULD INCLUDE Informative title Identity Copyright statement Link back to home Navigational links Heading or title to clarify content Link to contact information Alternate (alt) text identifying graphics on the page
  103. 103. WHAT GOES INTO A HEADER? Site identity Major navigation links/utility navigation Search box (not always) Link back to home
  104. 104. POSSIBLE HEADER COMPONENTSIndividual designs rarely use them all. Advertising Search This Site GO Cart Navigation | Navigation | Navigation | Navigation LOGO Site titles, section identity, or advertising Selected Tab Unselected Tab Unselected Tab
  105. 105. Variations
  106. 106. WHAT GOES INTO A FOOTER? Contact information. Copyright statement. Page author. Links to related sites or to larger enterprise. Utility links can go here. Redundant navigation for long pages.
  108. 108. CONTENT IS KING“Ultimately, users visit your website for its content.Everything else is just the backdrop. The design is there toallow people access to the content.”- Jakob Nielsen-
  109. 109. PAPER VERSUS MONITORBecause screen resolution is low (72 to 110 dpi), it places astrain on the human eye.Because we read on a screen, we are forced to view from amore or less fixed position - with print you can readanywhere in any position.Can lay papers out on the floor. (Can’t do a search though.)
  110. 110. PAPER VERSUS MONITORScreen glare is not an obstacle when reading on paper.Monitor Flick: looks like a solid image, but the screen isrefreshing so fast that you are fooled into seeing a solidimage, but the brain is alway correcting for the flicker.Reading is 25% slower on a screen. (Jacob Nielsen)
  111. 111. READING ON THE WEB - Scrolling is clumsy - people don’t like it and they lose their place. - Readers scan on-screen, then print content for reading. - Web reading is not stationary - text jumps from link to link and page to page. - Many web pages end up as fragments of information taken from larger context.
  112. 112. 3 GUIDELINES 1. Be succinct - write no more than 50% of the text that you would have used in print. 2. Write for scanability - use short paragraphs, subheadings, bulleted lists. 3. Use hypertext to split up long information into multiple pages.
  113. 113. SCANABILITY - Studies show that almost 80% of users initially scan a webpage. - Users pick out key words, sentences and paragraphs of interest - They skip over the text they are not concerned with. - Write articles with two or three levels of headlines for easy scanability. - Use general page headings plus subheads and sub-subheads if needed.
  114. 114. SCANABILITY - Use meaningful headlines - Tell the user what the page or section is about. - Use bulleted lists and similar design elements to break text blocks. - Use highlighting and emphasis to catch the users eye. - Be sure to distinguish from link colors so as to avoid confusion.
  115. 115. USE PLAIN LANGUAGE - Start each page with the conclusion - most important material should come up front. - Users should be able to tell in a glance what the page is about. - Users often only read the first line of a paragraph - use topic sentences, one idea per paragraph. - Use simple sentence structure - avoid convoluted writing and complex words. - Use caution with metaphors and humor - readers may take you literally.
  116. 116. CHUNKING - Use hyperlinks to make text short. - Keep links visible, ideally above the fold. - Split the information into “chunks” that focus on a certain topic. - Move long, detailed info to secondary pages. - Avoid using links to break long articles into separate pages - is disruptive and makes printing difficult.
  117. 117. HEADLINES - Online headlines are different than printed headlines. - Online headlines are often displayed out of context: as part of an article, in a search list, in a bookmark list. - Headline must stand on it’s own even when the rest of content is unavailable. - Online headlines and their content are often hard to see in a single glance on the window so it is difficult for the user to learn enough just from the surrounding data.
  118. 118. LEGIBILITY Use colors that have a high contrast between the text and the background. Use plain color-backgrounds or subtle patterns. Use fonts big enough that people can read. Make the text stand still – moving blinking or zooming text is hard to read. Keep sentences to 7 - 10 words as that is what the eye can comfortably track.
  119. 119. LEGIBILITY Try to left justify text when possible.
  121. 121. REMEMBER Explain what the article is about in terms that relate to the user. Write in plain language. Avoid teasers that try to entice people to click. Try to make the first word an important, information-carrying one.
  122. 122. WORKSHOP # 3 HEADLINES Stay in your groups. Remove every word you can from the passages below and create a catching headline. 1. Government officials involved in the Olympics call it a fiasco, that is, the extent of chaos that has thrown security plans into disarray upon learning that of the shortfall of civilian guards. 2. If “Ghosts in the Machine” an ambitious exhibition at the Met were itself a machine, it would have lots of moving parts but not all would be performing with equal efficiency. 3. Apple announced that its’ bestselling MacBook laptop just got its newest makeover. It’s a thing of beauty, clad in aluminum like its more expensive Pro siblings.
  123. 123. WEB TYPOGRAPHY
  124. 124. TYPOGRAPHYTypography is the process of arranging letters, manyterms are left over from the days of letterpressOn computers we use fonts, whether for digital printing oron the web.
  125. 125. HISTORY OF WEB TYPOGRAPHYAt first browsers had no way of embedding fonts.1995: Netscape introduces <font> tag1998: CSS2 allows for more type configuration2005: CSS3 introduces @font-face, allowing fonts to behosted online
  126. 126. WEB-SAFE FONTSCome preinstalled on most computers.Arial, Comic Sans MS, Courier,Georgia, Impact, TahomaTimes New Roman, Verdana
  127. 127. @FONT-FACELets the browser load a font from a remote server, meaningthat pages can display text in the specified font even if theuser does not have it installed on their computer.Allows for greater design customization without sacrificingaccessibility or SEO.
  128. 128. IMAGE REPLACEMENTGood for logos. Bad for accessibility and SEO.
  130. 130. SERIF VS SANS SERIFSerifSans SerifSlab SerifDisplay
  131. 131. HEADERS VS COPYYou can use decorative fonts for headers...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales,sapien ut porta blandit, metus dui imperdiet ipsum, id eleifend est nulla euorci. Mauris lectus eros, rutrum at lobortis ut, eleifend eget eros. Nulla atfelis eget neque aliquam convallis.
  132. 132. X-HEIGHTLorem ipsum Lorem ipsumLorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consecteturadipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien utporta blandit, metus dui imperdiet ipsum, id porta blandit, metus dui imperdiet ipsum, ideleifend est nulla eu orci. Mauris lectus eros, eleifend est nulla eu orci. Mauris lectus eros,rutrum at lobortis ut, eleifend eget eros. Nulla rutrum at lobortis ut, eleifend eget eros. Nullaat felis eget neque aliquam convallis. at felis eget neque aliquam convallis.
  133. 133. OUR FAVORITESOur favorite web fonts available for free from Google Fonts.Open Sans Open Sans Open Sans Open Sans Open SansLato Lato Lato LatoVollkorn Vollkorn Vollkorn Vollkorn
  135. 135. INCREASE LEADINGLine height should be at least 120% of font size.Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consecteturadipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien utporta blandit, metus dui imperdiet ipsum, id porta blandit, metus dui imperdiet ipsum, ideleifend est nulla eu orci. Mauris lectus eros,rutrum at lobortis ut, eleifend eget eros. Nulla eleifend est nulla eu orci. Mauris lectus eros,at felis eget neque aliquam convallis. rutrum at lobortis ut, eleifend eget eros. Nulla at felis eget neque aliquam convallis.
  136. 136. DO
  137. 137. DON’T
  138. 138. MAINTAIN LEGIBILITYLight colors are hard to read, even on white. Beware of #666.Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consecteturadipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien utporta blandit, metus dui imperdiet ipsum, id porta blandit, metus dui imperdiet ipsum, ideleifend est nulla eu orci. Mauris lectus eros, eleifend est nulla eu orci. Mauris lectus eros,rutrum at lobortis ut, eleifend eget eros. Nulla rutrum at lobortis ut, eleifend eget eros. Nullaat felis eget neque aliquam convallis. at felis eget neque aliquam convallis.Test your legibility with AccessColor.
  139. 139. DO
  140. 140. DON’T
  141. 141. COLUMN WIDTHThe eye can only comfortable track 7-10 words per line,which is about 40 to 80 characters.Multiply your text size by 30 to determine maximumcolumn width.10px type x 30 = 300px column width
  142. 142. DO
  143. 143. DON’T
  144. 144. IMPLEMENT HIERARCHYUse multiple typefaces to differentiate between elements onthe page.Mix between categories (serif, sans serif, slab serif, display)Don’t go too crazy! Don’t use more than 2 or 3 fonts.
  145. 145. DO
  146. 146. DON’T
  148. 148. WORKSHOP # 4 CREATE SITE Please go into the group you worked with when creating personas. CREATE CONTENT FOR THE WEBSITE USING THE PERSONAS AND SCENARIOS. What content would the user you defined find on the site? Establish content Establish information architecture Create site map Create navigation Create wireframes or other prototype Do a prototype test Make improvements
  149. 149. WORKSHOP #4 SCENARIOS GROUP #1: Site is to provide info for people starting own business; some of them have experience in he business world; others this is their first exposure to issues running a business. GROUP #2: Site is to provide info for people looking to place parents in assisted living. GROUP #3: Site is to provide info for people looking to compare car insurance.
  151. 151. UNIVERSAL USABILITY...is 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
  152. 152. UNIVERSAL USABILITY ...is informed by Accessibility Usability Universal Design
  153. 153. 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.
  154. 154. USABILITYArises from User Centered Design (UCD).Includes a broad and inclusive view of the user.
  155. 155. UNIVERSAL DESIGNNot just alternative designs to meet specific needs.Accounts for users of all ages, experience levels, andphysical or sensory limitations.
  156. 156. The Principles of Powered door with sensors is convenient for all shoppers, especially if hands are full. Universal Design The design of products and environments to be usable by all people, to the greatest Public emergency stations utilize recognized emergency colors and a simple design to quickly extent possible, without the need convey function to passers-by. for adaptation or specialized design. Flexibility in Use The design accommodates a wide range of individual preferences and abilities. Simple and Intuitive Use Use of the design is easy to understand, Equitable Use regardless of the user’s 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 University’s College of Design (www.design.ncsu.edu/cud/about_udprinciples.htm) 2 Perceptible Information The design communicates necessary information Large-grip scissors accommodates use effectively to the user, regardless of ambient Small bumps on a cell phone keypad tell the user where with either hand and allows alternation conditions or the user’s sensory abilities. important keys are without requiring 1 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 elbow. as commuters with packages or luggage. Tolerance for Error The design minimizes hazards and the adverse consequences of accidental or unintended actions. Size and Space for Approach and Use Center for Low Physical Effort Appropriate size and space is provided for approach, The design can be used efficiently and comfortably and reach, manipulation, and use regardless of user’s body Universal Design Web: design.ncsu.edu/cud E-mail: cud@ncsu.edu with a minimum of fatigue. size, posture, or mobility. at NC State 500 copies of this public document were printed at a cost of $1.34 each. Recycled paper and soy-based inks
  157. 157. UNIVERSAL DESIGN PRINCIPLES These are most applicable to the web.
  158. 158. #1 EQUITABLE USE“The design is useful and marketable to people with diverseabilities. Provide the same means of use for all users: identicalwhenever possible; equivalent when not.”
  159. 159. #2 FLEXIBILITY IN USE“The design accommodates a wide range of individualpreferences and abilities. Provide choice in methods of use.”
  160. 160. #3 SIMPLE AND INTUITIVE USE“Use of the design is easy to understand, regardless of the user’sexperience, knowledge, language skills, or current concentrationlevel. Eliminate unnecessary complexity and arrange informationconsistent with its importance.”
  161. 161. #4 PERCEPTIBLE INFORMATION“The design communicates necessary information effectively tothe user, regardless of ambient conditions or the user’s 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.”
  162. 162. 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.
  163. 163. TYPES OF DISABILITIES Visual impairments Hearing impairments Mobile impairments Cognitive impairments
  164. 164. STANDARD
  166. 166. ENLARGED TEXT
  169. 169. JAWSScreen reading software. JAWS SAMPLE
  170. 170. USE DESCRIPTIVE HEADINGSHelps users understand page structures.Screen readers don’t look at web pages, they read HTMLcode.Can call up a list of on page headings and jump to thesection of a page
  171. 171. Here’s what this headings box for the BBC homepage looks like in JAWS, one ofthe most popular screen readers:
  172. 172. WRITE DESCRIPTIVE LINK TEXTScreen reader users can call up a list of on page links.Avoid “Click Here”, “Read More”
  173. 173. Here’s what this links list dialog displays for the BBC homepage in JAWS:
  174. 174. 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 <li> tag
  175. 175. USE LOGICAL LINEARIZATIONScreen readers read top to bottom, left to right.Avoid putting important information at the bottom (e.g.instructions for forms).
  176. 176. 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.
  177. 177. 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.
  178. 178. WRITE DESCRIPTIVE PAGE TITLESThis is the first thing a screen reader user hears.Helps orient the user.
  179. 179. 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).
  180. 180. normal
  181. 181. protanopia-red green
  182. 182. deuteranopia - red green
  183. 183. tritanopia - blue yellow
  184. 184. http://www.vischeck.com/
  185. 185. Sales by productSales by product
  186. 186. This is difficult to read. This is easy to read.
  187. 187. ACCESSIBILITY RESOURCES Universal Design Usability.gov
  188. 188. WORKSHOP # 1 TEST SITE Please go into the group you worked with when creating personas. AFTER CREATING PROTOTYPE: Do a prototype test with another group Make improvements with original group
  189. 189. FORMS
  190. 190. SIGN UP FORMSRemove ALL barriers to account creation.Don’t make them recreate what they’ve already done.
  191. 191. WHY FORMS EXISTEvery form exists for one of three main reasons:- Commerce- Community- ProductivityWeb From Design: Filling in the Blanks, Luke Wroblewski
  192. 192. Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks.
  193. 193. RELATIONSHIPA form is a way to establish a relationship with the user and the organization.
  194. 194. TRUSTAchieved through logo, color, typography, and wording.
  195. 195. GOALSWhat is the goal of the form?
  196. 196. PURPOSEBase the name of the form on its purpose so users know whatand why.
  197. 197. APPROPRIATE LANGUAGEBalance business needs with user needs.
  198. 198. NO SUPERFLUOUS QUESTIONSToo many questions cause user to question motivation.
  199. 199. NO SUDDEN CHANGE...in behavior or appearance – will make the user anxious.
  200. 200. Make it easy for registered users to log in and for new users to register
  201. 201. Simplify the process for registered and new customers
  202. 202. CONVERSATIONA form is a two-way conversation between the user and the organization.
  203. 203. CONVERSE, DON’T INTERROGATEAvoid aggressive wording.
  204. 204. ORDER LABELS LOGICALLYShould reflect the flow of a conversation.
  205. 205. MORE INVOLVED QUESTIONS...should come towards the end.
  206. 206. GROUP RELATED INFORMATIONAddress one topic at a time.
  207. 207. Groups are related through purple headings and fine lines
  208. 208. Content is related, but the groups are separated too much. Potential for confusion.
  209. 209. ONE AT A TIMEThe flow from one set of questions to the next should resemblea conversation.
  210. 210. REMOVE CLUTTERBanners, unnecessary navigation, anything that might distract.
  211. 211. Effective use of white space
  212. 212. Tone is appealing, form has no superfluous questions
  213. 213. 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
  214. 214. #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
  215. 215. Pretty, but difficult to scan
  216. 216. Individual words would have sufficed
  217. 217. #2 INPUT FIELDSDon’t 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
  218. 218. Vertical: when user types data their eyes are fixed across the vertical axis at the left to the input field
  219. 219. Eye needs to jump from one field to the other. Too much distraction.
  220. 220. 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.
  221. 221. RADIO BUTTONSEasy to scan.But if list is long, it’s hard for user to scanLimit to groups of four to six options.
  222. 222. CHECK BOXESAllow for multiple selections.Use single checkboxes for binary choices (yes, no).
  223. 223. #3 ACTIONSAvoid generic words like “Submit” as they lend a genericimpression of the form.Use descriptive words such as “Join LinkedIn”.
  224. 224. PRIMARY VS. SECONDARYPrimary actions are links and buttons that performessential “final” functionality (Save, Submit).Secondary actions allow users to retract data that they haveentered (Back, Cancel).These should have less visual weight than primary actionsas they have undesired consequences.
  225. 225. Imagine clicking “Reset Form” by accident
  226. 226. “Register with us” would have been more helpful than submit
  227. 227. #4 HELPYou should never have to explain how to use a form!Use accompanying copy only where needed: Such as WHY you need their phone number; How a birth date will be used; Link to Terms & conditions.Copy is usually ignored so may it short and sweet.Show an icon that users can click if they need help.
  228. 228. user-triggered helpdynamic help Both user-triggered help and dynamic help
  229. 229. #5 MESSAGESError message – emphasize through color, recognizableicons, placement, large font or a combination.Success message - use to notify users they have reached ameaningful milestone.Encourages user to continue a filling out a lengthy form.
  230. 230. #6 VALIDATIONUse only where needed – excessive validation is as bad asnone.Use only to confirm key points, ensuring realistic answersand suggesting responses.Use smart defaults – helps make the completion of the formfaster and more accuratePre-select user’s country based on IP address.
  231. 231. { dynamic helpsmart default Uses dynamic validation and smart defaults
  232. 232. FORMS: THINGS TO CONSIDERWhat you call the sign up form.Where do you place the link?If a user can’t find a sign up form, they can’t sign up!Over 75% of websites place it in header.Over 21% find a prominent place on the homepage.Rarely placed in the sidebar.
  233. 233. 5% 2% 17% 18% 40% 18%Create Account Register Join Sign Up Start Here Other
  234. 234. BOTTOM LINE ON SIGN UP FORMS The registration link is titled “sign up” (40%) and placed in the right upper corner. Sign-up forms have a simplified layout to avoid distractions for users (61%). Sign-up forms are one-page-forms (93%). Sign up forms attract visitors by explaining the benefits of registration (41%).
  235. 235. BOTTOM LINE ON SIGN UP FORMS Titles of the input fields are highlighted bold (62%). No trend in the label alignment can be identified. Designers tend to use few mandatory fields. Designers tend to use few optional fields. Vertically arranged fields are preferred to horizontally arranged fields (86%).http://uxdesign.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
  236. 236. FURTHER READINGForms That Work: Designing Web Forms for Usability,Caroline Jarrett and Gerry GaffneyWeb Form Design, Filling in the Blanks, Luke WroblewskiSignup Forms - Luke Wroblewski
  237. 237. WORKSHOP #4 US CENSUS Please divide into three groups. Design a web page for delivering the US Census What special considerations will you make for business and user needs? Sketch quickly, write legibly Try to approximate actual size of objects and fonts You have 20 minutes Hint: It’s probably some kind of form
  238. 238. WORKSHOP #4 US CENSUS Considerations: The census site must gather the following: • Name • Gender • Age • What the participant’s relationship to the householder is Are there any special considerations to make towards business objectives? How will the information be used or processed? What affordances/signifiers will you make in your design to accommodate diverse populations? What happens after the form is submitted?
  239. 239. WORKSHOP #4 US CENSUS Definition of householder: The householder refers to the person (or one of the people) in whose name the housing unit is owned or rented (maintained) or, if there is no such person, any adult member, excluding roomers, boarders, or paid employees. If the house is owned or rented jointly by a married couple, the householder may be either the husband or the wife. The person designated as the householder is the "reference person" to whom the relationship of all other household members, if any, is recorded. The number of householders is equal to the number of households. Also, the number of family householders is equal to the number of families. Source: http://www.census.gov/population/www/cps/cpsdef.html
  241. 241. PRETTY THINGS WORK BETTER.Norman D., 2004 Emotional Design: Why we love (or hate) everyday things
  242. 242. PROCESSING DESIGN Self-image Reflective Memories Usefulness Behavioral Performance Visceral AppearanceModified from Norman D., 2004 Emotional Design: Why we love (or hate) everyday things
  243. 243. VISCERAL LEVELAutomatic, biological, universal.Attractive faces,symmetrical objects, round objects,soothing colors and sounds.Design implications in images, graphics, visual design,aesthetics.
  244. 244. FRIENDLY FACESWe are drawn to friendly authentic faces. Not stock images.Don’t use stock images.
  245. 245. WOMEN
  246. 246. MENMen
  247. 247. BEHAVIORAL LEVELPerformance - how well a product works.Usefulness - how useful is a product.Function rules!Usability is king!
  248. 248. BEHAVIORAL DESIGN is user friendly
  249. 249. http://www.mamamarketing.nl/wp-content/uploads/2011/01/hakken.jpg
  250. 250. 315
  251. 251. TOP SEARCH ON YAHOO.COM“www.google.com”
  252. 252. REFLECTIVE LEVELStays long than visceral level.Sense of exclusivity.Sensitive to experiences, training, education.Cultural differences relevant.
  254. 254. Behavioral Reflective
  256. 256. CULTURAL COLOR THEORYRed - China, prosperity, happiness/South Africa, mourningYellow - Egypt, mourning/Japan, courageGreen - Middle East luck/Indonesia, forbidden colorBlack - China, trust, high quality
  257. 257. FURTHER READINGThinking Fast and Slow, Kahneman, D. 2011Emotional Design: Why we love (or hate) everyday things,Norman, D. 2004Designing for the Social Web, Porter, J. 2008Mental Models: Aligning Design Strategy with HumanBehavior, Young, I. 2008Neuro Web Design, Weinschenk, Ph.D., 2009
  258. 258. WORKSHOP #2 EMOTION & DESIGN Break into three groups: Find 3 sites that play well on emotions through design.