usability

Olaa Motwalli
CIS764 , DR Bill KSU

Overview

Usability factors. Usability guidelines. Software application. Website. Common mistakes. Good and bad examples.

usability
Can usability be measured? Usability factors: Ease of learning: How fast can a user learn the system sufficiently to

accomplish basic tasks? Efficiency of use: A user's ability to quickly accomplish tasks and find information with ease and without frustration. Memorability: can a user remember enough information to use the application effectively next time? Error frequency: How often do users make errors while using the system, and how do users recover from these errors? Satisfaction: How much a user enjoys using the Web site or the application?.

Usability guidelines application/website

Involving Users in the Design Process: Know Your Audience. identifying the needs of your users. Reflect the Users Mental Model. Build Prototypes. Observe Users once you have a prototype. Use the information recorded from your user tests. 2. Use Real-World Metaphors.
1.
Take advantage of peoples knowledge of the world by using metaphors to convey concepts and features of your application.

Usability guidelines application/website

3. Keep It Simple and Pretty.

Making Design Decisions for adding features in your application or website. Every time you add a feature to your application or website, Your application or website gets larger, slower, and Your applications human interface become more complex.

Usability guidelines application/website

4. Allow Direct Manipulation.

an example of an implied action that allows users to feel that they are controlling the objects represented

5. Provide Rapid Response. 6. Keep Interfaces Natural.

Try not to overwhelm users by presenting too much information at once Dont overload windows and dialogs Use high-quality graphics and icons.

7. Make Navigation Easy. 8. Make Your Application Consistent. 9. Give the User immediate Feedback when user perform action.

Usability guidelines application/website

10- Anticipate Errors.

Provide useful error messages to users avoid modes, features only in toolbars

11- Give the User Control 12- Forgive the User. 13. improve structure:
1.

2.
3.

Chunk information into visual groups, based on topic or functional similarity from the audience's perspective. Offer several ways to find information navigational elements, search functions, or a site map. Use meaningful and consistent button names.

Usability guidelines application/website

13. improve structure:
5. Most navigation pages should not scroll. 7. put navigation elements or navbars in a consistent and/or predictable location. 8. Never make the viewer scroll to locate important navigation buttons such as "Buy now 9. Make it easy for users to skim; provide clues that allow users to find the information by scanning rather than reading. 10. Do not give all the object same level of contrast.

Usability guidelines for App and Website

14- Make your application or website accessible to people with disabilities.
Visual Disabilities Color blindness. Hearing Disabilities

15- design your software for reliability.

Make sure your user interface behaves in a predictable way. The same set of actions should generate the same results each time.

Suggestion

Offer an application guidelines.

KDE Human Interface Guidelines. GNOME Human Interface Guidelines.

Offer a website guidelines.

W3C Web Standards (world wide web consortium).

Example for KDE Human Interface Guidelines

mix of interface elements: a dialog box with a menu bar

Don't put status information in the menubar. Use a statusbar for that!

Usability guidelines for website

why usability is important in the website

On the Web, usability is a necessary condition for survival. If a website is difficult to use, users get lost on it, or a website's information is hard to read or doesn't answer users' key questions, people leave.

To create a website that satisfies the use, it should be easy to use and to learn as well as earn the user trust.

More detailed website guidelines

Text:

Make text easy to read. Medium-sized fonts. Mixed case for text rather than all capital letters. Line lengths less than 50 to 60 characters. High contrast between text and background colors to increase legibility. Dark text against a light background is most legible. Avoid using graphics as links or content. Have small graphics. GIF vs. JPEG: Which should you choose?

Image:

More detailed website guidelines

Link:

Make link obvious by use colored, underlined text link (don't underline nonlink text). Differentiate visited and unvisited links. Don't use "click here" or other non-descriptive link text. don't open pages in new windows.

Background:

Keeping a consistent background from page to page to let a user know where he or she is. Avoid using less contrast color together
using red and blue/ white and Yalow.

Catman's Color Brightness, Contrast, and Harmony Tool

More detailed website guidelines

Color:

Don't overuse color.

Font:

Major font reading time in second. Times and Tahoma more readable.

Form:

Avoid brake the form. Support different address formats. Let users enter data in the format they prefer.
Telephone Number ( ) -

Avoid a common mistakes

Do not have JavaScript which works only in internet Explorer. Do not have archives for old good information. Do not use PDF Files for Online Reading-hard to navigate - PDF is great for printing.

bad Example

bad Example

Good Example

References
1- Apple Human Interface Guidelines
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGui delines/OSXHIGuidelines.pdf

2- Motif Style Guide http://www.s-and-b.ru/syshlp/motif_guide/MotifStyleGuide/TOC.html 3- KDE user interface guidelines http://usability.kde.org/hig/ 4- GNOME Human Interface Guidelines (1.0) http://developer.gnome.org/projects/gup/hig/1.0/index.html 5- msdn- Improving Web Site Usability and Appeal
http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnsiteplan/html/ving siteusa.asp

References
6- Top Ten Mistakes in Web Design http://www.useit.com/alertbox/9605.html 7- The Usability Company, part of Foviance http://www.theusabilitycompany.com/index.html 8- Usability Engineering Team Design Guidelines http://www.grc.nasa.gov/WWW/usability/colorcss.html good example link http://www.lakeshorebaptist.net/ bad example links http://www.lakeshorebaptist.net/hycws/ http://www.geocities.com/Paris/1594/

Questions