Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making the Web Easy

21,821 views

Published on

Your website's users want to get stuff done, and you probably aren't making it easy for them. When users encounter forms with unnecessary steps, content that requires too many clicks to access, or things that just don't make sense, they often give up. In this talk, you’ll see some practical examples of sites that do a good job of making interactions and content easy to follow and understand, and you'll learn how to help your users get to where they want to be without annoying them on the way there.

Presented in 2016 at ConFoo.

Published in: Design
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Making the Web Easy

  1. 1. Photo credit: Jeremy Brooks via Creative Commons Making the Web @clarissa
  2. 2. Photo credit:The Adventures of Kristin & Adam via Creative Commons
  3. 3. Photo credit: Simone Bosotti via Creative Commons
  4. 4. Photo credit: Jeff Turner via Creative Commons
  5. 5. Photo credit: Paul Swansen via Creative Commons
  6. 6. Photo credit:Aaron Fulkerson via Creative Commons
  7. 7. Photo credit:Thomas Link via Creative Commons
  8. 8. https://twitter.com/halvorson/status/686569663761891328
  9. 9. What Is This Website?
  10. 10. The One Piece of Information
  11. 11. Don't Hide Things
  12. 12. Splash Screens? Almost Never
  13. 13. No
  14. 14. Start Here
  15. 15. Form Fields
  16. 16. <input'type="text"'name="username"> Text
  17. 17. <input'type="date"'name="birthday"> Date
  18. 18. <input'type="time"'name="start5time"> Time
  19. 19. <input'type="email"'name="email5address"> Email
  20. 20. <input'type="url"'name="website"> URL
  21. 21. <input'type="number"'name="amount"> Number
  22. 22. <input'type="tel"'name="phone5number"> Telephone
  23. 23. Define What's Needed
  24. 24. Show Password
  25. 25. Avoid Drop-downs For Short Lists
  26. 26. Ask For Less
  27. 27. Show Which Fields Are Required
  28. 28. <label> First'Name'<span>(required)</span> <input'type="email"' name="email5address"'required' aria5required="true"> </label>
  29. 29. input[required]'{border:'1px' dashed'#f00;}' or input:required'{border:'1px' dashed'#f00;}
  30. 30. Validate Immediately
  31. 31. Use Placeholders
  32. 32. <label> Email'Address <input'type="email"'name="email5 address"'placeholder=' "name@domain.com"> </label>
  33. 33. Line Height (Leading)
  34. 34. p'{'line5height:'1;'}
  35. 35. p'{'line5height:'2;'}
  36. 36. p'{'line5height:'1.4;'}
  37. 37. p'{'line5height:'1.3'} @media'only'screen'and'(min5 width:'30em)'{ ''''p'{'line5height:'1.4'} } @media'only'screen'and'(min5 width:'60em)'{ ''''p'{'line5height:'1.5'} }
  38. 38. Vertical Margins
  39. 39. p'{ ''''line5height:'1.5; ''''margin5top:'1.5em; ''''margin5bottom:'1.5em; }
  40. 40. Line Length (Measure)
  41. 41. 45-75 Characters
  42. 42. 65 58 65 73 68 67 66 74 72 69 69
  43. 43. <p>These'stories'are'true.'Although'I'have' left'<span'class="testing">the'strict'line of'historical</span>'truth'in'many'places,' the'animals'in'this'book'were'all'real' characters.</p> .testing'{'color:'red;'}
  44. 44. <p>These'stories'are'true.'Although'I'have' left'<span'class="testing">the'strict'line of'historical</span>'truth'in'many'places,' the'animals'in'this'book'were'all'real' characters.</p> .testing'{'color:'red;'}
  45. 45. http://codepen.io/chriscoyier/pen/atebf
  46. 46. Plain Language
  47. 47. Source: Canadian Literacy and Learning Network 42% of Canadian adults between 16-65 have low literacy skills.
  48. 48. If you can't explain it simply, you don't understand it well enough. - possibly Albert Einstein
  49. 49. Before: When the process of freeing a vehicle that has been stuck results in ruts or holes, the operator will fill the rut or hole created by such activity before removing the vehicle from the immediate area. After: If you make a hole while freeing a stuck vehicle, you must fill the hole before you drive away.
  50. 50. Page Structure
  51. 51. Get rid of half the words on each page, then get rid of half of what’s left. - Steve Krug
  52. 52. Top Level Heading Second Level Heading Third Level Heading
  53. 53. Credit: Rosenfeld Media via Creative Commons
  54. 54. Search Results
  55. 55. Colour Blindness
  56. 56. Normal Deuteranope Protanope Tritanope
  57. 57. Credit: thecrazyfilmgirl https://flic.kr/p/5X3ixX
  58. 58. Credit: Rosenfeld Media via Creative Commons
  59. 59. Print It
  60. 60. 7/7/2015 Traybaked Keralan fish curry | Jamie Oliver | Food | Jamie Oliver (UK) Toogle menu Right Menu Home Recipes > Shop Restaurants Videos Discover > -- Features -- Galleries -- News Foundation Careers Help & More Advertise With Us < Back Recipes home Chicken Beef Pasta Seafood Rice Fish Lamb Pork Game Duck Vegetables Chocolate Bread Cheese Eggs Fruit Turkey < Back Recipes Videos
  61. 61. <link'rel="stylesheet"'href="styles.css"> <link'rel="stylesheet"'href="printstyles.css"' media="print">
  62. 62. Make It Responsive
  63. 63. Links
  64. 64. <a' href="mailto:test@example.com"> test@example.com</a>
  65. 65. <a'href="tel:15877522555266"> 15877'CALL'BMO'(22555266)</a>
  66. 66. Tap Targets
  67. 67. Photo credit:Toshiyuki IMAI via Creative Commons
  68. 68. Photo credit: Japanexperterna via Creative Commons
  69. 69. Testing
  70. 70. Photo credit: Robert S. Donovan via Creative Commons
  71. 71. Performance
  72. 72. Photo: Bortzmeyer via Creative Commons
  73. 73. Source: CNN
  74. 74. <script'type="text/javascript"'defer> ''''... </script> <script'async'src="example.js"> ''''... </script>
  75. 75. Photo credit: Kaz K via Creative Commons
  76. 76. https://developers.google.com/speed/pagespeed/
  77. 77. http://yslow.org/
  78. 78. Not Everything Should Be Easy
  79. 79. Photo credit: GotCredit.com via Creative Commons
  80. 80. Clarissa Peterson clarissapeterson.com @clarissa

×