Making it Easy Designing for Web Users Prepared by Nick Merrigan
1
What is Usability? According to Jakob Nielsen of Useit.com, usability is defined by five quality components: • “Learnability”: How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency: Once users have learned the design, how quickly can they perform tasks? • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction: How pleasant is it to use the design? Source: www.useit.com
2
“On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave” (Nielsen, 2009).
3
Section 508 In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Inaccessible technology interferes with an individual's ability to obtain and use information quickly and easily. Section 508 was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508 (29 U.S.C. ‘ 794d), agencies must give disabled employees and members of the public access to information that is comparable to the access available to others.
4
Section 508 Standards for Web-based intranet and internet information and applications. § 1194.22 (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (d) Documents shall be organized so they are readable without requiring an associated style sheet. (e) Redundant text links shall be provided for each active region of a server-side image map. (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. (g) Row and column headers shall be identified for data tables. (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (i) Frames shall be titled with text that facilitates frame identification and navigation. (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. (o) A method shall be provided that permits users to skip repetitive navigation links. (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. 5 (q) Screen readers, which translate what’s on a computer screen into automated audible output.
What usability tests say? 1. People read webpages in the shape of an F. 2. People are drawn to photographs of other people. 3. People spend more time at the beginning of a page. 4. People quickly resort to scanning – reading fewer words. 5. People frequently do not finish reading lines completely.
Source: http://www.useit.com/
6
Eye Tracking • What is the importance of eye tracking? – Allows designers to know what part of a website is getting the most attention – If a consumer is asked to find something on the website, eye tracking will show the designer where the consumer would look first. – Shows patterns in which users look at the site. http://www.youtube.com/watch?v=75RpQ2Z6nYc 7
8
Every page in your web site should allow users to answer the following questions, without hesitation 1. What is this site? 2. What page am I on? 3. What are the major sections in the site? 4. What are my options at this level? 5. Where am I in the scheme of things? 6. How can I search?
Go to a subpage on your favorite website and see how quickly you can locate the following: -Site ID
-Page name
-Sections & subsections
-Local navigation
-“You are here” indicator
-Search 9
14 Guidelines For Good Usability Design
10
1. Make the page elements obvious, using patterns and alignment. • People are pattern oriented. For example users typically look for a search box in the upper right corner of a webpage.
• If bulleted lists are slightly indented on one page users expect the same format on successive pages. • Users scan information faster on websites with consistent design throughout. • Complaints about “busy” pages or clutter indicate problems with alignment. • Left align text.
11
EXERCISE Go to your favorite web site. List patterns found throughout the web site.
1. Where is the search box? 2. Are headings formatted the same on each page?
3. Are bulleted lists the same on each page? 4. Anything else?
12
2. Consider the entire site when planning the design • “Your site visitors don’t know – or care – that different people may be responsible for different parts of the site” (Redish, 2007). • Create consistent design by using common colors, fonts, and formatting.
• Where pages need different patterns or alignment, make those as compatible as possible.
13
EXERCISE List some of the common design elements on your favorite web site. 1. Color 2. Heading font size 3. Font type 4. Bullets
5. Graphics 6. Anything else?
14
3. Templates make life easy. • Templates allow you to concentrate on the information. • Use the templates in the content management system.
15
4. Use space effectively • Make good use of screen real estate. • Too little space makes it difficult to skim, scan, find, and read. Give the eye a place to rest. • Too much space in the wrong place will mislead people about whether the page is finished. • Passive Space: space outside the main content area such as margins. • Active Space: space inside the main content area such as white space between paragraphs. Active space allows readers to separate and group information.
How to create active space: 1. Break text into small chunks 2. Use lots of headings 3. Shorten paragraphs and add space between them 4. Turn sentences into more visual forms (lists and tables) 5. Double-space lists 6. Add photographs and graphics with space around them 16
5. Beware of false bottoms • False bottoms: Horizontal lines and large blocks of space stop users. “They think they have reached the end of a page” (Redish, 2007). • Screen resolution and monitor size determine what your visitors see.
17
EXERCISE 1. Go to a web page on the internet.
2. Minimize your browser. 3. Right click on your computer desktop and choose Properties. 4. Click Settings. Set the Screen resolution to 800 x 600. Click OK. 5. Return to the webpage you opened in step 1. Notice how much of the page is displayed. 6. Minimize the webpage again and return to the screen settings. Choose 1280 by 720 for the screen resolution. Click OK. 7. Reopen the webpage you minimized earlier and note how much of the page is displayed. 8. How does the screen resolution impact where you place information on a web page?
18
6. Don’t let headings float • Position headings directly above the text.
Research Join faculty and conduct research in the jungles of Central America, Elwha River Project, Olympic National Forest, and the Olympic Coast National Marine Sanctuary.
Research Join faculty and conduct research in the jungles of Central America, Elwha River Project, Olympic National Forest, and the Olympic Coast National Marine Sanctuary.
News and Events Quality education at an affordable cost. Enrolling in the Massage Therapy Program at Peninsula College will help prepare you for a profession in the healing arts.
News and Events Quality education at an affordable cost. Enrolling in the Massage Therapy Program at Peninsula College will help prepare you for a profession in the healing arts. 19
7. Don’t center text • “Centered text is harder on the eyes” (Redish, 2007, p. 143) • Centered text violates the need for patterns and obvious alignment. Description The orca is a stout, streamlined animal. It has a round head that is tapered, with an indistinct beak and straight mouth line. The orca has a striking color pattern made up of well-defined areas of shiny black and cream or white. The dorsal is black, with a pale white to gray "saddle" behind the dorsal fin. It has an oval, white eye patch behind and above each eye.
Description The orca is a stout, streamlined animal. It has a round head that is tapered, with an indistinct beak and straight mouth line. The orca has a striking color pattern made up of well-defined areas of shiny black and cream or white. The dorsal is black, with a pale white to gray "saddle" behind the dorsal fin. It has an oval, white eye patch behind and above each eye.
Social Organization Whales make their home wherever they happen to be in their aquatic environment, unlike terrestrial mammals which live in a den or nest. In killer whales it is a social bond that binds families together in their aquatic environment. Killer whale pods are matriarchal, meaning that sons and daughters stay with their mother throughout their lives, even after they have offspring of their own. These family units in the resident community are known as matrilines.
Social Organization Whales make their home wherever they happen to be in their aquatic environment, unlike terrestrial mammals which live in a den or nest. In killer whales it is a social bond that binds families together in their aquatic environment. Killer whale pods are matriarchal, meaning that sons and daughters stay with their mother throughout their lives, even after they have offspring of their own. These family units in the resident community are known as matrilines.
Genetics There is a clear link between the calls that killer whales make and who they mate with. The more similar the dialects of two groups, the more related they are. Killer whales tend to mate with partners that don't sound like themselves. Transient and resident killer whales represent distinct lineages with little or no exchange of individuals or interbreeding. The differences are so great that they have likely been isolated genetically for many thousands of years.
Genetics There is a clear link between the calls that killer whales make and who they mate with. The more similar the dialects of two groups, the more related they are. Killer whales tend to mate with partners that don't sound like themselves. Transient and resident killer whales represent distinct lineages with little or no exchange of individuals or interbreeding. The differences are so great that they have likely been isolated genetically for many thousands of years.
20
8. Use sans serif fonts • Sans is the french word for without. A sans serif font is a font without a serif. • Serif is a short line at the end of the main stroke of a character. • Sans serif fonts are easier to read on the web than serif fonts. • Arial, verdana, and tahoma are examples of san serif fonts. • Times new roman, Copperplate, and book antiqua are examples of serif fonts.
21
Friends don’t let friends use bad fonts!
Mykl Roventine presents "When good people pick bad fonts” at Ignite Minneapolis. April 22, 2009.
http://www.youtube.com/watch?v=ULb_xtz_SE0
22
9. Think Broadly about your users Font sizes are rendered differently according to: 1. Windows or MAC computers 2. Screen resolution Set your font size to 12 or higher.
23
10. Use a fluid layout with a medium line length as default • Consider how your page will look on different monitor resolutions. • The wider the screen the more difficult it is for readers to follow the line. • Long lines are tiring to read. (see Redish, page 150) • Short lines are difficult to understand.
24
11. Do not write in ALL CAPS • Using all caps is a carry over from typewriter days. We have more options today. • Use all caps for only a SINGLE word. • Use bold or color to make your headings stand out.
Why is all caps difficult to read? • The shape of a word gives clues to the reader about the word. • Readers make assumptions about the shape of a word as they read.
• All caps removes those clues and thus slows down reading.
Compare: STUDENT DEVELOPMENT CENTER
Student development center 25
12. Only links should be underlined. Use italics and bold sparingly • Underlined text is assumed to be a link to another page. • Italics should be used as a light form of highlighting. • Do not use italics for headings • Over formatted text interferes with the clues readers use to quickly recognize words. • Do not bold entire paragraphs. Italic Bold
Italic
Whales make their home wherever they happen to be in their aquatic environment, unlike terrestrial mammals which live in a den or nest. In killer whales it is a social bond that binds families together in their aquatic environment. Killer whale pods are matriarchal, meaning that sons and daughters stay with their mother throughout their lives, even after they have offspring of their own. These family units in the resident community are known as matrilines. A pod is a larger unit that is made up of one or more matrilines that travel together and may be related.
Whales make their home wherever they happen to be in their aquatic environment, unlike terrestrial mammals which live in a den or nest. In killer whales it is a social bond that binds families together in their aquatic environment. Killer whale pods are matriarchal, meaning that sons and daughters stay with their mother throughout their lives, even after they have offspring of their own. These family units in the resident community are known as matrilines. A pod is a larger unit that is made up of one or more matrilines that travel together and may be related.
26
13. Provide good contrast between text and the background • Avoid the “ransom note effect” • Use a light background color and dark text
Low Contrast
Text
Text
Text
Text
High Contrast
Text
Text
Text
Text 27
14. Think about all your site visitors when you choose colors • Be sensitive to color blind site visitors. • Section 508: Web pages shall be designed so that all information conveyed with color is also available without color.
Can you read the numbers in the circles above?
What a color blind person sees.
28
Colorblind web page filter 1. Go to http://colorfilter.wickline.org/ 2. Type the web address of a web page into the URL box. 3. Choose grayscale/achromatopsia from the “pick a color filter” box.
4. Click the Fetch and Filter button. 5. If the contrast is low the web site colors should be adjusted.
29
Usability for the vision impaired Visual perception versus screen reader interaction. 1. Screen readers convert information on a webpage into vocals. 2. The screen reader interprets the code as it was written and arranges the page content in the form of a single column. 3. Blind users do not typically use a mouse, they prefer to use keyboard commands. 4. Visually impaired users who use screen readers or magnifiers often lose overall context of the page. 5. Information overload is caused by excessive sequential reading. Each time a screen reader visits a site it rereads everything, even non essential information. 6. Incorporate meaningful words into links. 30
Criteria for improving usability • Group information and links, etc in logical categories: This will allow screen readers to skip from section to section. • Use bookmarks or anchors on a page to allow the user to “skip to content”, or “go to top”. • Avoid too many links: Long lists of links take a long time for readers to scan and read. • Specific sections: Help users find new information and updates by posting a section listing the new elements by date. • Label links with clear descriptive text, don’t use more or click here.
31
Quick Tips to Make Accessible Web Sites 1. Images & animations: Use the alt attribute to describe the function of each visual 2. Multimedia. Provide captioning and transcripts of audio, and descriptions of video. 3. Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here." 4. Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible. 5. Graphs & charts. Summarize or use the longdesc attribute. Longdesc is often used by screen readers to display image information. 6. Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported. 7. Tables. Make line-by-line reading sensible. Summarize. 8. Check your work. Validate. (http://validator.w3.org/) Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG © W3C (MIT, INRIA, Keio) 2001/01 32
Top 10 Mistakes in Web Design
33
1. Bad Search • A bad search can occur when there are typos, plurals, hyphens, etc. • When people are searching for your site, you must make sure you are optimizing important things for the company such as products
34
2. PDF Files for Online Reading • PDF files are nice for printing, but bad for reading on the web. • PDF files take away from the smooth scrolling that text on the web provides. PDF files make you download or open for the web which disrupts the user from continuing with the site
35
3. Not Changing the Color of Visited Links • Changing the color of visited links is vital when it comes to navigating a site. • If you don’t change a color, users will get confused on where they have been. • Users may get frustrated when they visit the same page continuously when they are searching for something else.
36
4. Non-Scannable Text • When writing for the web, you must use headings, bullets, and short paragraphs. • With users wanting specific things, headings will allow the user to find what they are looking for. • With long block text, users will want to skip the section because it will take to much time. 37
5. Fixed Font Size • If you have a fixed font size on the site, users who have a hard time reading won’t be able to adjust the size for readablity
38
6. Page Title with Low Search Engine Visibility • When creating page titles you must always remember the user will want to know what’s on the page • For book marks or favorites, do not put “Welcome To…” as your title unless you want to be alphabetized under W • On your home page, make sure you have a description of what will be found on your site. 39
7. Anything Looks Like an Advertisement • People have learned to ignore advertisements, so do not design elements that look like ads. • Don’t place pictures with text that look like banners. • Don’t place blinking or flashing pictures or text.
40
Violating Design Conventions • When designing you want to make your site consistent so users can navigate easier. • Don’t use a different layout, the user may think they have left the site. • Make the links and search boxes in the same area so the user knows where they are. 41
9. Opening New Browser Windows • If a user wanted a new browser window open, they would do it themselves. • Opening a new window disables the backwards button. • Opening a new browser will confuse the user on why the page won’t open or why they can’t go back.
42
10. Not Answering Users Questions • Users are on your site for a reason. If you don’t answer the questions they want answered, THEY WILL NOT RETURN. • If you are a site that sells items, not giving a price will discourage the user from returning because there wasn’t enough information.
43
Other Mistakes People Make •
Putting urgency over understanding your target market. – Designer wants to get it done fast without doing much research.
•
Designing too busy or flashy. – Flashy/busy designs don’t look good on phones or tablets – People are looking for something specific, make it easy to find.
•
Out-of-date content – Customers are looking for the newest, up to date information.
•
Targeting everyone – Your site will be a mess if you are trying to accommodate for everyone
44
Resources British Columbia Wild Killer Whale Adoption Program. Available online at http://www.killerwhale.org/index2.html Information Providers’ Guide. Available online at http://ec.europa.eu/ipg/content/tips/index_en.htm Krug, S. (2006). Don’t Make Me Think A Common Sense Approach to Web Usability. Berkeley: New Riders. Meadows, D. H. (1999). State of the Village Report. Nielsen, J. (2008). How little do users read? Available online at www.useit.com PowerPoint Clip Art and Images. Redish,J. G. (2007). Letting go of the Words, Writing Web Content that Works. San Francisco: Morgan Kaufmannr. World Wide Web Consortium (W3C) Roventine, M. (2009) Mykl Roventine presents When good people pick bad fonts. Available online at http://www.youtube.com/watch?v=ULb_xtz_SE0 45
Pozin, Ilya. (2012) Top 7 Web Design Mistakes Small Businesses Make. Available online at www.forbes.com/sites/ilyaposin/2012/03/27/top-7-web-design-mistakes-small-
