Creating Usable Websites: An Introduction
•Download as PPTX, PDF•
1 like•415 views
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.
Recommended
More Related Content
More from Rebecca Blakiston
More from Rebecca Blakiston (20)
Recently uploaded
Recently uploaded (20)
Creating Usable Websites: An Introduction
- 1. creating usable websites an introduction Department of Education Tohono O’odham Nation Friday, May 26, 2017
- 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. 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. outline I. key concepts of web usability II. planning your web content III. writing your web content
- 6. don’t make them think When I look at a web page it should be self- evident. Obvious. Self-explanatory. ”- Steve Krug “
- 7. design with users in mind
- 8. people visit your website for a reason to get a question answered to complete a task
- 9. who visits your website? what do they want to know? what do they want to do?
- 10. interviews question logs surveys similar websites other? ways to find out
- 12. visitors skim content to try and reach a goal
- 13. visitors will be impatient 55% of visitors spend less than 15 seconds on your website
- 14. prioritize content and make next steps obvious the most important stuff should be crystal clear
- 17. use conventions
- 18. make links look like links underlining is the convention don’t rely on hover
- 19. what can I click on?
- 20. what can I click on?
- 21. what can I click on?
- 22. don’t make non-links look like links Only underline links. Nothing else.
- 23. planning your web content
- 25. who is your primary audience?
- 26. what do you know about them? experience with the web devices they use reading level educational background
- 27. what are your users’ primary questions? what do they need to know? what do they want to do? (call to action)
- 28. what is the focus of your web page? what are your department’s goals? what do your users care most about?
- 32. layer information identify what information is needed when don’t put too much content on one page
- 33. 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
- 37. content in their Resources menu calendar of events Board of Education directory
- 42. your turn With others in your unit/division, use the handout to plan your web page.
- 43. share Who is your audience? What is your key message?
- 45. treat it as a conversation
- 49. use plain language : writing designed to ensure the reader understands as quickly, easily, and completely as possible
- 50. avoid jargon
- 51. read it aloud
- 52. 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
- 53. use the power of parallelism
- 54. 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
- 55. Parallel grammatical structure makes content easier to scan, read, and comprehend.
- 56. try using all active verbs
- 58. try using all gerunds
- 59. 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.
- 61. keep sentences short Try to keep sentences under 25 words. Fragments ok.
- 62. words per sentence: 10 14 (6) 10 12
- 64. learn to love white space between menu items between lines and paragraphs around images wrapped in text
- 65. use tables for related content
- 67. use bulleted lists for items/options
- 68. use numbered lists for steps in a process
- 70. 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
- 72. be nice
- 74. Click Here More
- 75. 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
- 78. cut, cut, cut Get rid of half the words on each page, then get rid of half of what’s left. - Steve Krug “ ”
- 79. 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...
- 80. remove the unnecessary Please… Be sure to... You may want to... Don’t forget to...
- 81. on forms, only include fields that are necessary
- 82. try to simplify systems, too
- 83. format for readability & accessibility
- 84. justified text is hard to read
- 85. so is centered text
- 87. never underline Use heading styles to title sections. Use bold for emphasis. If you underline something, people will think it’s a link.
- 88. avoid ALL CAPS ALL CAPS ARE REALLY HARD TO READ. AND THEY MAKE IT SOUND LIKE YOU’RE SHOUTING.
- 90. 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
- 91. 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.
- 94. use one space after punctuation, not two
- 95. 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.
- 96. use ALT text for images
- 98. review for typos
- 99. review for typos (and incomplete content!)
- 100. review for typos
- 101. review for broken links
- 102. seek other feedback • subject matter experts • colleagues • members of your audience
- 103. plan for updates who is responsible? how often will content get reviewed? what’s coming up that might require updates?
- 107. your turn With others in your unit/division, plan for web page updates.
- 108. share and wrap-up How do you plan to keep content up-to-date? Other final thoughts? Questions?
Editor's Notes
- Rebecca Section 1: Introduction (1:00-1:15)
- Donovan Section 2: web usability (1:15-1:35)
- Steve Krug’s “first law of usability” is to not make your website visitors think. Make it simple and intuitive. Save the time of the user.
- Another key principle of web usability is to design with your users (your website visitors) in mind. Every decision you make should be with your users in mind. You should try to be familiar with their motivations, challenges, and goals.
- And users are coming to your website for a reason. They need to get a specific question answered, or they need to complete a specific task.
- So one of the first things for you to think about is, who visits your website, or who do you anticipate visiting your website? Who is your website serving? Think about what those people want to know (questions they have), and what they want to do (tasks they want to complete). And how do you know who your users are? How do you know what questions they have? Do you have a good sense of this already? What are some ways you could find out? (Ask the audience).
- Here are some ways to find out about your users: Interview staff who provide customer service/answer questions (could be as easy as talking to the person who answers the phone – what are the most common questions they get?) Interview members of your actual audience Review any questions logs or other ways you track questions/inquiries Survey your community or staff Look at similar websites to see what information they provide Other ideas?
- At the UA library, we created personas that represent our primary and secondary audiences. Personas are fictional characters that help us keep our users in mind as we make website decisions. Our personas are based on real user data including interviews, question logs, focus groups, usability testing, surveys, and web analytics (usage) data. Here is an example – Renee Johnson – of our faculty persona. She is a 41-year-old assistant professor who teaches math at the UA, and she uses the library to help teach her courses and conduct her research to work toward tenure. You might want to create a persona for your audience, but even if you don’t create one, try to always keep your audience in mind.
- No matter who your audience is, your website visitors are generally skimming to find what they need. Deep reading is really rare on the web. A quote from Krug: “When we’re creating sites, we act as though people are going to pore over each page, reading all of our carefully crafted text, figuring out how we’ve organized things, and weighing their options before deciding which link to click. What they actually do most of the time (if we’re lucky) is glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. There are almost always large parts of the page that they don’t even look at. “ Here is a real heat map that shows where people go on our “Contact us” page (it tracks where the mouse goes and where people click). You can see that there are some key things they focus on, in particular the staff directory, live chat, and frequently asked questions.
- Keep in mind that your website visitors will be impatient when they are on their site. They want to find the answer to their question and be done with it. Data from a 2014 study showed that 55% of visitors spend less than 15 seconds on your website. So you don’t have a lot of time with them! http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/
- Because of how people use websites, it’s important that you prioritize content and make any next steps obvious. Focus on what is most important and then make the most important stuff crystal clear.
- Let’s look at an example. This is the homepage of the Pet Partners of Southern Arizona website. What is this website about? What is the most important thing on this page? What are the things you can do here? There is a lot of competing text, and it makes it difficult for the eye to know where to go. And it’s not clear at all what you can do here. (Sidenote: Rebecca went to this website a few weeks ago because she was interested in learning about therapy dogs after the Finals Study Break at the library that was sponsored by Pet Partners. Specifically she wanted to know how she could train her own dog to become a therapy dog. She was disappointed, because she couldn’t easily find out on this website!).
- Here is an example from the physical world. Rebecca was at Fry’s grocery store and saw this notice up in the soda isle. Take a moment to read this. What is this trying to tell me? How does it affect me? What can I do with this information? Even though it’s not a lot of text, it is confusing to read. What is the main point? The key message is lost here.
- Another principle of web usability is to use conventions. People use websites daily, so follow patterns they are familiar with. Here is another real-world example. What do you notice about these baking instructions that is different from what you might normally see? It asks you to heat the oven to 385 degrees. That’s not the convention – the convention is 350 or 375. Many ovens don’t even let you heat to 385! An example of a convention on a website is to make the title of the website be a link that takes you back to the homepage. Can you think of other website conventions? (Other examples: links are underlined or in a different color, forms have a button at the end that lets you submit, site searches are at the top right of the page).
- Here is a convention you should follow: make links look like links. Websites include lots of links to connect content together – you might be linking to outside websites or other pages within the same site. It’s important to make these links look like links. They should be obviously clickable. In this example, you can see that the links are in a different color from the rest of the text and they are underlined. This is a good example from: https://fortsillapache-nsn.gov/about-the-fort-sill-apache-tribe/tribal-government/
- Here is an example where links are not obvious. What do you think you can click on here? (Ask the audience). Each title is clickable, and so is “View All Upcoming Webinars,” but you wouldn’t know it by the design, since all the text looks the same. If you hover over the text, you can see that it is a link (because the text gets underlined), but in the touch screen world “hover” doesn’t exist, and you don’t want to make your users wander through your web page hoping that something might be a link. (Example from: https://floridalibrarywebinars.org/)
- Here is another example. These examples are from the same site on different web pages. Everything listed under “Downloads” is a link, but you can see they are inconsistent in how they styled them. Notice that the blue text makes these look much more like links! (Example from https://www.kiowatribe.org.)
- And here is an example from the Tohono O’odham homepage. What do you think you can click on? The headings, headlines, and links aren’t easily distinguishable – they are all the same color. “Learn more about…” is clickable, but “New Information!” is not clickable, even though they are styled the same. This could cause usability problems. So it is something worth thinking about on your new site – making sure links look like links consistently. http://www.tonation-nsn.gov/
- On the opposite end of the spectrum, you have to make sure that you don’t make non-link content look like links. In other words, don’t ever use underlining in your content unless it’s a link. If a website visitor sees something underlined, they will assume it’s a link.
- Shoshana: Section 3: planning content (1:35-2:00)
- The blank page can be intimidating, so a good way to start is by organizing your thoughts. Along the lines of who (is your audience), what (do they need), and how (can you best present it).
- What are your users goals?
- With this in mind, it’s important to focus on your essential messages. The answers to your users’ key questions should be front and center. If you’ve ever taken in a course in journalism, you’ve likely heard of the “inverted pyramid.” In this framework, the most important content should be obvious and near the top of the page. Similarly, underneath each section, or each header, content should be organized in this same way – with the most important thing first. So for the entire page, or for each section within the page, decide which question matters the most to most of your users. Put the less important content next – perhaps that content that only some of your users care about. Save the least important content for last.
- The Navajo Nation has an entire website for their Department of Dine education.
- 10 minutes-ish
- Section 3: writing – Rebecca (2:00-2:30)
- If you pay attention to web pages and how content is written, you’ll notice that most good web content is written in a conversational style. It’s active voice. It’s talking directly to the web user. It uses “you” to address you as the web user, and “we” or “us” to talk about the organization. Take a look at these examples. Asana is a project management tool. I’m a new visitor coming to their website and I want to know what the product can do for me. Notice how they phrase this: “Organize your efforts.” Hey, it will help me organize! Now look at the SurveyMonkey example. One of the things it will do for me is collect responses. Again, notice the conversational style: “Gather responses with one handy URL by including your link on emails, websites, Twitter, Facebook, and more. All of our survey templates meet accessibility standards.” And finally, look at the Ustream example. They ask a question directly to the website visitor, “Need help determining which package is best for you? Use our calculator.” One helpful tip is to read your web copy out loud. Perhaps read it out loud to a colleague and see how it sounds. When you read it out loud, you’ll get a much better sense of how it will sound to your website visitors, and if it sounds like a conversation.
- Even error messages can sound human and be useful.
- As you review a web page you want to improve, pay attention to how the user is being addressed. See if you can make the tone more conversational and active. Here are some examples of passive voice and active voice. Notice the sentence, “Library customers must sign into their library account to renew books.” This is passive voice, where the subject of the sentence isn’t actively doing anything. In fact, in passive sentences, it can be hard to even make out what the subject is. Passive sentences are vague, hard to follow, and boring to read. In this case, you want to talk directly to the user, since they are the library customer. So, “Sign in to your library account to renew books” is a much better version. Similarly, “Improvements have been made to reduce duplication in search results.” What is the subject of this sentence? Who made the improvements? If any person was involved, you can make that clear. You can say “we” or “the library” or in this case, “our discovery team.” Try to avoid saying “the library” or “the libraries” unless it’s absolutely necessary for clarity. Rather, replace this with “we” or “us.” So instead of saying, “Eligibility will be verified by the library,” you can say, “We’ll verify your eligibility.” One last example demonstrates not only the trouble with passive voice, but the trouble with too many nouns in a row, which is often difficult to read and interpret. You can usually fix the “too-many-nouns-in-a-row” problem by using active voice. For instance, rather than “Library Instruction Consultation Request Form” we can say, “Request and instruction consultation.”
- Another thing that will make your content easier to skim and digest is parallelism. This refers to parallel grammatical structure, and it can be used in lists, headings, menus, and even individual sentences.
- Take a look at these two lists. Which list is easier to read? Did you choose List A on the left? That’s the one that uses parallel grammatical structure. Notice that each of the 3 steps described in List A starts with a verb in the present tense. Each step is described using a similar sentence structure. The steps in List B, however, each read differently. Our brains are very pattern oriented. List A is faster and easier to read for the user because it uses parallel sentence structure, creating a pattern that makes it easier and faster for the user to understand. As much as possible, use parallelism in lists of content: this includes numbered lists, bulleted lists, and menu items displayed in a list.
- Take a look at these two lists. Which list is easier to read? Did you choose List A on the left? That’s the one that uses parallel grammatical structure. Notice that each of the 3 steps described in List A starts with a verb in the present tense. Each step is described using a similar sentence structure. The steps in List B, however, each read differently. Our brains are very pattern oriented. List A is faster and easier to read for the user because it uses parallel sentence structure, creating a pattern that makes it easier and faster for the user to understand. As much as possible, use parallelism in lists of content: this includes numbered lists, bulleted lists, and menu items displayed in a list.
- Let’s take a look at parallelism in action with some examples of parallelism in headings. Here is a page about checking out and renewing items. You can see that the three sections are parallel – they all begin with an active verb: “Check out,” “Apply,” and “Renew.” This is also a good example of language that is active and succinct. The content speaks directly to the reader, as in “Use your CatCard” and “You can renew library materials…” The headings are also are also short enough to allow for easy scanning to find what you’re looking for.
- With this in mind, it’s important to focus on your essential messages. The answers to your users’ key questions should be front and center. If you’ve ever taken in a course in journalism, you’ve likely heard of the “inverted pyramid.” In this framework, the most important content should be obvious and near the top of the page. Similarly, underneath each section, or each header, content should be organized in this same way – with the most important thing first. So for the entire page, or for each section within the page, decide which question matters the most to most of your users. Put the less important content next – perhaps that content that only some of your users care about. Save the least important content for last.
- Notice each description starts with a fragment.
- Give your content room to breathe. Walls of text are intimidating and hard to scan. Empty, negative, “white” space on your pages makes them more approachable, readable, and accessible to your visitors.
- Example of really long instructional and policy content at the start of a form.
- Now let’s talk about labels. The nature of the web and websites is often that of a bunch of information linked together. One page leads you to another page and so forth. It is important to provide clear and concise link labels to lead your users to the content they are seeking. Labels can be used on menus, buttons, navigation elements, or more traditional links within body text. What’s important is that they provide clear connections between content. Labels can take many forms: full sentences, questions, phrases, or category labels. Users should be able to understand from the words in your label what they will get when they click on it. This is important for all website users, but is crucial for visually impaired users who navigate your website with a screen reader. Effective use of links make your website more accessible. For example, users will ask their screen reader to skip through the text and read the links on a page. So phrases such as “click here,” “more,” “click for details” can be meaningless when read out of context.
- A common mistake in using links is titling them general phrases such as “More” or “Click Here”. This is an old example from the Center for Creative Photography. Notice on this page the two “click here” links. Using “Click Here” tells you nothing about where you are going or what you are going to get when you click on “Click here”. “Click here” is never necessary – most users today assume that something that looks like a link is a link. Just put what people will get by “clicking here” into your link format. For example, on this page you could just link the text “Read recent reviews of this exhibition” and eliminate “click here and here”.
- Make your link labels meaningful and unambiguous. They should reflect where they will take the user. One easy way to do this is to match the link with the page title where it takes them. Or at least really close to it. Simple enough, just pay attention to context so that it makes sense. Notice in this first example that the “now available” text is linked, but in the revision it is much clearer where the link will take you: to the November newsletter. If you have a clear call to action, or you are taking the user to a form for them to fill out, try using an active verb. You can see in the second example, the word “form” is linked, but without context it is unclear what the form is for. In the revision, the short phrase, “apply to be a mentor,” is linked. This makes it clear that you’ll be taken to a place (a form) where you can apply to be a mentor. Use link titles that let users know what to expect. There should be no surprises when they end up at the next page. Before even clicking the link, they should have a good idea where they’ll end up.
- Notice some of the links on the UNC Chapel Hill Libraries home page. You can see that most of the links they have used are short action phrases with verbs such as “Renew books” and “Find places to study.” Also notice the good example of parallelism. Six of the seven links in the first column, under “Research Tools,” are nouns, such as “Catalog,” “WorldCat,” and “E-Journals.” In the second column, all the links are active phrases that complete the “I Want To..” sentence, such as “Renew books,” “Access course reserves” and “Give to the library.” This allows for easy skimming, and the links are descriptive enough that you know what to expect when you click on one of them.
- Here is another example, this one from the University of Arizona Libraries, that illustrates some different ways to make your links meaningful. You can see that there are some short nouns that take users to web pages about related services, such as “express retrieval” and “interlibrary loan.” There are some that are active phrases that reflect related calls to action: “Suggest a purchase,” “Sign in to your account,” and “Check out & renew items.” And then there is another label on a button – the main call to action – reflected in a single term, “Search.”
- https://www.kiowatribe.org/ http://www.ashiwi.org/
- http://www.pascuayaqui-nsn.gov/index.php/tech-ania-program https://www.washoetribe.us/contents/organization/education-services
- Don’t center text. Don’t justify text. It harms readability.
- https://www.kiowatribe.org/ http://lagunadec.ss3.sharpschool.com/
- Two spaces make it harder to skim and read. https://xkcd.com/1285/
- If for some reason your image goes missing, the ALT text displays in its place. For visually impaired users that rely on screen readers, the alt text will describe the image for them. https://www.greengeeks.com/kb/wp-content/uploads/2016/01/alt-text.jpg
- Every page under the Dept of Education section on the Hopi website just says “welcome to the X page.” It’s unclear when they launched the site, but it’s likely that these pages have sat incomplete for awhile.
- Notice the “state ofArizona” is missing a space. From this page: http://www.tonation-nsn.gov/tohono-oodham-history/
- Notice the “state ofArizona” is missing a space. From this page: http://www.tonation-nsn.gov/tohono-oodham-history/
- Notice the “state ofArizona” is missing a space. From this page: http://www.tonation-nsn.gov/tohono-oodham-history/
- From: http://www.fmyn.org/departments/education-division/parent-resources/
- How can you help encourage frequent updates? Keeping content fresh and relevant?
- This was created in fall of 2016 – is there an expectation it will be updated? How frequently? By who?