Presentation is loading. Please wait.

Presentation is loading. Please wait.

USABILITY An Introduction. Usability “..usability really just means making sure that something works well: that a person of average (or even below average)

Similar presentations


Presentation on theme: "USABILITY An Introduction. Usability “..usability really just means making sure that something works well: that a person of average (or even below average)"— Presentation transcript:

1 USABILITY An Introduction

2 Usability “..usability really just means making sure that something works well: that a person of average (or even below average) ability and experience can use the thing— whether it’s a Web site, a fighter jet, or a revolving door— for its intended purpose without getting hopelessly frustrated.” — Steve Krug, Don’t Make Me Think

3 Usability If something is difficult to use people won’t use it as much The competition is one click away; if you frustrate users they’ll head somewhere else Goal: reduce the amount of thinking the user has to do— make things as obvious as you can

4 Usability Conventions are your friend

5 Usability

6 Navigation should be persistent (on every page)

7 Usability Include page names on every page Make sure the page name matches the navigation

8 Usability Create a clear visual hierarchy

9 Usability Break up pages into clearly defined areas

10 Usability Include “you are here” indicators on navigation

11 Usability Make it obvious what’s clickable

12 Usability Omit needless words

13 Usability Reduce the noise to a dull roar “Busy-ness” (lack of white space):

14 Usability Reduce the noise to a dull roar “Busy-ness” (lack of white space):

15 ACCESSIBILITY An Introduction

16 Accessibility Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible. Accessibility can be viewed as the “ability to access” and benefit from some system or entity.

17 Accessibility Use up-to-date, well-formed HTML and CSS Use all recommended tags (!DOCTYPE, title, meta, etc.) Make sure all tags are properly nested and closed Make sure styles written correctly Don’t use deprecated tags like, Don’t use deprecated attributes like align=“” See http://www.tutorialspoint.com/html/html_deprecated_tags.htm

18 Accessibility Make sure each page has a unique, descriptive title Poor Good

19 Accessibility Provide metadata that identifies author, type of content, keywords, character set, etc.

20 Accessibility Make proper hierarchical use of headings (h1 first, followed by h2 for the first level of subheading, etc.).

21 Accessibility Mark up quotations properly; use tags around quotes and around actual blockquotes. Do not use quotation markup for formatting effects such as indentation. Place the tag with a title attribute around any (and every) abbreviation. For example: KISS. Use real horizontal rules, not images.

22 Accessibility Make sure all images have alt attributes. For example:

23 Accessibility Clearly identify the target of each link. For example, don't write: “For more information about baseball click here.”click here Instead write something more specific like: “ See more information about baseball.” See more information about baseball

24 Accessibility Add title attributes to link tags, especially if the target of the link is not clear from the context. For example: See more information about baseball

25 Accessibility Navigation menus should be grouped and labeled. For example, use an ordered or unordered list with an ID Another possibility is surrounding a group of links with a either a set of tags or tags with an ID

26 Accessibility Provided non-link, printable characters (surrounded by spaces) between adjacent links. For example: Home | Search | Contact –or– [Home] [Search] [Contact] [Site map] HomeSearchContactHomeSearchContactSite map

27 Accessibility Use navigation mechanisms in a consistent manner— navigation menus should look and behave the same on all pages (persistent navigation). Don’t use images as links

28 Accessibility If you choose to use graphic text—whether it be page titles, site ID's, fancy headings or buttons—make sure there is a text alternative, either visible on the page, or hidden in such a way that it will become visible when images are hidden and/or CSS turned-off. One way we can accomplish this by using a CSS-based image replacement method.

29 Accessibility Use high contrast for text. GoodBad

30 Accessibility Dark text on light backgrounds is preferable to light text on dark backgrounds GoodBad

31 Accessibility Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.

32 Accessibility Put navigation links and menus after the page's main content in the markup. You can reposition the navigation using CSS.

33 Accessibility Put navigation links and menus after the page's main content in the markup. You can reposition the navigation using CSS. Alternatively, you could provide a "skip to main content" link at the top of each page.


Download ppt "USABILITY An Introduction. Usability “..usability really just means making sure that something works well: that a person of average (or even below average)"

Similar presentations


Ads by Google