Web Usability

Web Usability

http://kb.vteamslabs.com 1

By: Shahid Maqsood

Session Agenda• What is Usability?• Why it matters?• Users? How to Identify them?• Usability Quality Components• How to ensure Usability?• Usability Heuristics• Why usability fails?• Next session

2http://kb.vteamslabs.com

Usability?

Usability is a quality attribute that assesses how easy user interfaces are to use.

Also refers to methods for improving ease-of-use during the design process.


Why usability matters?

• 62% of web shoppers gave up looking for an item. (Zona study)

• 50% of web sales are lost because visitors can’t easily find content. (Gartner Group)

• 40% of repeat visitors do not return due to a negative experience. (Zona study)

• 85% of visitors abandon a new site due to poor design. (cPulse)

• Only 51% of sites complied with simple web usability principles. (Forrester study of 20 major sites) http://kb.vteamslabs.com 4

Users?

How to identify users?


User Identification -- Personas

• Who are the users, what do they know, what can they learn?

• What do users want or need to do?• What is the users' general background?

– Experience – Age groups– Similar applications in use

• What is the users' context for working?• Business Nature

• Etc etchttp://kb.vteamslabs.com 6

Why a user comes on a web application or a website?


User Goals

– To get information– To perform a specific task


For a web application or any other product or service to be usable, what attributes should it have?


Usability

Learnability

Efficiency

MemorabilityErrors

Satisfaction

Usability Quality Components

• Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?

– Usually measured in percentage of goals/tasks achieved (success rate)


Usability Quality Components Cont…

• Efficiency: Once users have learned the design, how quickly can they perform tasks?

– relates to the quickness with which the user’s goal can be accomplished accurately and completely and is usually a measure of time• For example, you might set a usability testing

benchmark that says – 95% of all users will be able to load the software within

10 minutes



• Memorability: When users return to the design after a period of not using it, how easily can they re-establish 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? – refers to the user’s perceptions, feelings, and

opinions of the product, usually captured through both written and oral questioning• Users are more likely to perform well on a

product that meets their needs and provides satisfaction than one that does not


How to ensure usability?

The bottom line is

“Don’t make your users think on your web application”


Trunk Test

• What site is this? (Site ID)• What page am I on? (Page name)• What are the major sections of this site?

(Sections and subsections)• What are my options at this level? (Local

Navigation)• Where am I in the scheme of things? (“You are

here” indicators)• How can I search?


Usability Heuristics

• Rules of thumb• The 10 most general principles for user

interface design. They are called "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines.


1 – Visibility of system status

• The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

• Example:


2 – Match between system and the real world • The system should speak the users' language,

with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

• Example:


3 – User control and freedom

• This guideline is talking about the navigation and items to help a user to find his / her way through the site, be it to find a page or product, or to find the way back if they accidentally clicked on the wrong button or link.

• The easiest way to find out if your website complies with this point is by asking these three questions:– Where am I?– How did I get here?– How do I get back to where I came from?

• Example:


4 – Consistency and standards

• Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

• Keeping consistency with similar labels and items means that users do not spend their time learning how to use your website but to actually go through your website in order to find what they were looking for. After all, the competition is only one click away.


5 – Error prevention

• Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

• Examples: – displaying which fields are mandatory– form validation– giving clear instructions during checkout– “Are you sure?” messages– clear labels (i.e. “Checkout”)– etc


6 – Recognition rather than recall

• Minimize the user's memory load by making objects, actions, and options visible.

• The user should not have to remember information from one part of the dialogue to another.

• Instructions for use of the system should be visible or easily retrievable whenever appropriate.


7 – Flexibility and efficiency of use

• Accelerators -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users.

• Once you get used to the site and use it more often you start finding short cuts, quick-links or (in many cases) you create bookmarks to find content you are using regularly quicker.

• Examples:– quick-links – saved searches– items you recently looked at– save query for later


8 – Aesthetic and minimalist design

• Website should look great, powerful, bold, but at the same time the elements of the design should not obstruct the function, they should work together and not distract from the actual message / call to action required.

• White color is your friend.

• Examples:– reducing clutter, – clear call to actions, – no annoying flashing eye-candy


9 – Help users recognize and recover from errors• Error messages should be expressed in plain language (no

codes)• Precisely indicate the problem• And constructively suggest a way out of that error.

• Examples:– Useful error messages (“Your password is incorrect, please ensure your CAPS

LOCK key is off”), Form validation highlighting the error field, related links (“Did you mean…”)

– The application has encountered a technical problem, we are fixing it. Please leave your email to get notification when we are back live.


10 – Help and documentation

• Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation.

• Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

• Examples:– FAQs– “?” icons, – advanced search, – clear labels on form fields and sections – pop-up help, online / live chat etc


Why usability Fail?

• Common five reason for the delivery of less usable products are:– Development focuses on the system– Target audiences change and adapt– Designing usable products is difficult– Team specialists don’t always work in integrated

ways– Design and implementation don’t always match


Next Session

• Evaluating designs for usability• Usability Testing Mechanisms


Usability.gov’sStep-by-Step Guide


Thank you!

Questions please?


Web Usability

Documents

Transcript of Web Usability