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.

Creating Usable Websites: An Introduction

315 views

Published on

Training session delivered at the Tohono O'odham Department of Education by Rebecca Blakiston, Shoshana Mayden, and Donovan Pete. As the staff recently received access to a website and would be creating web pages for the first time, we focused on key principles of web usability, planning web content, and writing web content.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Creating Usable Websites: An Introduction

  1. 1. creating usable websites an introduction Department of Education Tohono O’odham Nation Friday, May 26, 2017
  2. 2. who we are Rebecca Blakiston public services, reference, & instruction | user experience librarian author, Usability Testing and Writing Effectively in Print and on the Web Shoshana Mayden writing, training, & coordination | content strategist copy editor, Weave: the Journal of Library User Experience Donovan Pete design, usability testing, & preservation | communications assistant student, School of Information
  3. 3. your turn what is your program or division? what is your biggest challenge related to the new website? what are you hoping to learn today?
  4. 4. outline I. key concepts of web usability II. planning your web content III. writing your web content
  5. 5. web usability key concepts
  6. 6. don’t make them think When I look at a web page it should be self- evident. Obvious. Self-explanatory. ”- Steve Krug “
  7. 7. design with users in mind
  8. 8. people visit your website for a reason to get a question answered to complete a task
  9. 9. who visits your website? what do they want to know? what do they want to do?
  10. 10. interviews question logs surveys similar websites other? ways to find out
  11. 11. visitors skim content to try and reach a goal
  12. 12. visitors will be impatient 55% of visitors spend less than 15 seconds on your website
  13. 13. prioritize content and make next steps obvious the most important stuff should be crystal clear
  14. 14. use conventions
  15. 15. make links look like links underlining is the convention don’t rely on hover
  16. 16. what can I click on?
  17. 17. what can I click on?
  18. 18. what can I click on?
  19. 19. don’t make non-links look like links Only underline links. Nothing else.
  20. 20. planning your web content
  21. 21. getting organized
  22. 22. who is your primary audience?
  23. 23. what do you know about them? experience with the web devices they use reading level educational background
  24. 24. what are your users’ primary questions? what do they need to know? what do they want to do? (call to action)
  25. 25. what is the focus of your web page? what are your department’s goals? what do your users care most about?
  26. 26. focus on essential messages
  27. 27. layer information identify what information is needed when don’t put too much content on one page
  28. 28. be intentional about how you order content Adapted from Writing Effectively in Print and On the Web, Table 3.2, p. 27 Type of content Possible way to order Instructions Chronologically Funding opportunities By audience type (e.g. students, teachers) Frequently asked questions By order users might ask them
  29. 29. draft headings to use for structure
  30. 30. competitive analysis some examples
  31. 31. http://navajonationdode.org/
  32. 32. content in their Resources menu calendar of events Board of Education directory
  33. 33. http://www.fmyn.org/departments/education-division/
  34. 34. http://www.hopi-nsn.gov/tribal-services/department-of-education/
  35. 35. http://www.lagunaed.net/
  36. 36. http://www.pascuayaqui-nsn.gov/index.php/education-home
  37. 37. your turn With others in your unit/division, use the handout to plan your web page.
  38. 38. share Who is your audience? What is your key message?
  39. 39. writing your web page
  40. 40. treat it as a conversation
  41. 41. write like you talk
  42. 42. use plain language : writing designed to ensure the reader understands as quickly, easily, and completely as possible
  43. 43. avoid jargon
  44. 44. read it aloud
  45. 45. Passive Active Customers must sign in to renew books. Sign in to renew books. Eligibility will be verified by the library. We’ll verify your eligibility. The Library Instruction Consultation Request Form may be used for requests. Request an instruction consultation. use active voice
  46. 46. use the power of parallelism
  47. 47. which is easier to read? 1. Complete a library application 2. Provide photo ID and proof of permanent address 3. Present all the above information to the library desk 1. Complete a library application 2. You must provide a photo ID and proof of permanent address 3. Above information should be presented to the library desk how to get a library card: Option A Option B
  48. 48. Parallel grammatical structure makes content easier to scan, read, and comprehend.
  49. 49. try using all active verbs
  50. 50. try using all gerunds
  51. 51. keep paragraphs short One sentence in a paragraph? No problem. More than three sentences or six lines in a paragraph? Try cutting or splitting up.
  52. 52. sentences per paragraph: 3 3 1
  53. 53. keep sentences short Try to keep sentences under 25 words. Fragments ok.
  54. 54. words per sentence: 10 14 (6) 10 12
  55. 55. fragments are a-ok
  56. 56. learn to love white space between menu items between lines and paragraphs around images wrapped in text
  57. 57. use tables for related content
  58. 58. use bulleted lists for items/options
  59. 59. use numbered lists for steps in a process
  60. 60. Your objective should always be to eliminate instructions entirely by making everything self- explanatory, or as close to it as possible. When instructions are absolutely necessary, cut them back to a bare minimum. but keep instructions to a minimum “ ” - Steve Krug
  61. 61. be nice
  62. 62. write meaningful labels
  63. 63. Click Here More
  64. 64. Original link Revised link The November newsletter is now available. The November newsletter is now available. Mentor applicants, please use this form. Apply to be a mentor. Use this link to log into the registration system. Log into the registration system. From Writing Effectively in Print and On the Web, Table 10.4, p. 109
  65. 65. cut, cut, cut Get rid of half the words on each page, then get rid of half of what’s left. - Steve Krug “ ”
  66. 66. remove the unnecessary Please note… It should be noted that... It is interesting to note that... We should point out that... You will find that...
  67. 67. remove the unnecessary Please… Be sure to... You may want to... Don’t forget to...
  68. 68. on forms, only include fields that are necessary
  69. 69. try to simplify systems, too
  70. 70. format for readability & accessibility
  71. 71. justified text is hard to read
  72. 72. so is centered text
  73. 73. left justify rag right
  74. 74. never underline Use heading styles to title sections. Use bold for emphasis. If you underline something, people will think it’s a link.
  75. 75. avoid ALL CAPS ALL CAPS ARE REALLY HARD TO READ. AND THEY MAKE IT SOUND LIKE YOU’RE SHOUTING.
  76. 76. avoid needless capitalization The Staff of the Education Department require Valid Identification for Prior Form Submission Approval. The staff of the Education Department require valid identification for prior form submission approval. 1. Request an Application 2. Fill out the Application 3. Confirm Application Submission 1. Request an application 2. Fill out the application 3. Confirm application submission
  77. 77. careful with italics, too Italics can also be hard to read when used for more than a couple of words. They also lose meaning (emphasis) when used a lot. If you use them, only use them for a word or two that matters. See. This is better. Or this.
  78. 78. consider color contrast
  79. 79. use one space after punctuation, not two
  80. 80. use semantic headings Headings should be actual headings (h1, h2, etc). Just using bold or larger font size doesn’t help people with screen readers navigate.
  81. 81. use ALT text for images
  82. 82. review for errors
  83. 83. review for typos
  84. 84. review for typos (and incomplete content!)
  85. 85. review for typos
  86. 86. review for broken links
  87. 87. seek other feedback • subject matter experts • colleagues • members of your audience
  88. 88. plan for updates who is responsible? how often will content get reviewed? what’s coming up that might require updates?
  89. 89. your turn With others in your unit/division, plan for web page updates.
  90. 90. share and wrap-up How do you plan to keep content up-to-date? Other final thoughts? Questions?

×