GENERAL USABILITY CONSIDERATIONS

Overview of usability Aspects of usability – Learnability, memorability, efficiency, error reduction Techniques for enhancing usability – Keep it simple – Avoid wasteful clicks – Emphasize selectively – Conform to expectations – Visual similarity should parallel functional similarity – Visual hierarchy should parallel functional hierarchy – Indicate the current status – Keep it responsive – Indicate progress on long tasks Methods to evaluate and improve usability – Paper prototyping, formal usability studies

Learnability Make it easy for people to figure out how to use your web site – The needed links, form widgets, etc, should all be FRONT AND CENTER, staring the user in the face – Don't require users to learn concepts before they can use the site. – Don't present unpleasant surprises E.g., After the user has started using the site, then your site shows an error message to the effect of, "oh, bummer, you have to go back and create an account"

Memorability Make it easy for people to remember how to use your web site – Use colored icons with memorable shapes to make it easy for users to find functionality – Don't move functionality around on the screen if you can avoid it – Don't "change the rules" of the site (e.g., the order in which things must be done) unless absolutely necessary

Efficiency Minimize the number of actions required to use your web site – The most important functionality should be usable in the fewest number of mouse/keyboard clicks – The next most important functionality should be the next easiest to use – The functionality that almost nobody uses can be tucked away behind lots of clicks

Error reduction Make it easy for people to avoid errors, or to correct errors after they occur – Make it perfectly clear what each link and button will do to the client or server – Ask the user to confirm all deletions And/or provide a way to undo all deletions – And ditto for other changes to the server that might be a pain to undo, otherwise

Techniques for enhancing usability Keep it simple Avoid wasteful clicks Emphasize selectively Conform to expectations Visual similarity should parallel functional similarity Visual hierarchy should parallel functional hierarchy Indicate the current status Keep it responsive Indicate progress on long tasks

Keep it simple There should be a primary task supported – And a clear, 100% obvious path for that task 90/10 rule – 90% of users will use only 10% of the features

Avoid wasteful clicks Examples of wasteful clicks: – Putting up a "splash screen" so that users have to "click to continue" – Making your content so wide (typically > 1000px) so that users have to scroll horizontally to see it all And FYI, if a page is so long that a vertical scrollbar appears, then the important stuff should appear near the top of the screen, so the user doesn’t need to scroll in order to get to it

Emphasize selectively Emphasize only what matters most – With big, bold fonts – With color – With eye-catching images Examples: – Things that the user should click on – Error messages – Heading to tell user what page is showing

Conform to expectations Be similar to other sites – Put your navigation near the top or left side – Put a heading near the top of the page – Put form labels above or left of form fields – Put a submit button at the bottom of the form – Don't open popups unless you really have to blah OR window.open("register.html", "anotherwindow")

Visual similarity should parallel functional similarity If two items on the screen have a similar purpose, then they should appear similarly. – Similar font – Similar color – Similar shape – Similar position on the screen Example: – Navigation tabs to the site's different sections – Text boxes for different fields of a web form

Visual hierarchy should parallel functional hierarchy Lower-level details or functionality should be visually "nested" inside of higher-level information and functionality – Use larger font size for headings, smaller text for less important information – Put functions that are logical "parts" of other functions either inside a certain part of the screen, or inside a certain section of the site

Indicate the current status The user needs to know where he or she is in the site, as well as progress toward the task. Examples: – Highlight the "current tab" that the user is on (section within the site) – Show a "breadcrumb" (list of links back to higher levels in the hierarchy) – Error messages indicating if something has gone wrong

Keep it responsive Responsiveness != performance – Does the app react quickly vs does the system complete work quickly/scalably Main key: Do long operations asynchronously – E.g., network operations, big database operations – E.g., In JavaScript, use function objects, closures, and events and/or setTimeout()

Indicate progress on long tasks Acknowledge input immediately Show user the progress so far Show user estimate of how long to wait Let user do work while waiting for long tasks Let users cancel long-running tasks 80% complete

Methods for enhancing usability How do you figure out when you need to apply those techniques, or when you are applying the techniques incorrectly? That's where these methods come in… – Paper prototyping – Formal usability studies

Paper prototyping Before you implement the web site, sketch out the user interface on paper Then, have some users interact with the paper as if it is the computer – As they click links and/or fill out forms, you can show other sheets of paper and/or write on the pieces of paper to show what would happen

Paper prototyping: Listen and Learn If something is confusing to people who are using your paper prototype, then CHANGE the DESIGN!!! – You can even edit on the papers right while the user is trying it out. Just fix the design. Do not try to "explain away" problems with the web site, and do not "coach" the user. – If the user can't figure out how to use the site with your mouth shut, then the site needs to be fixed.

More formal usability studies Usability can be tested 1.Implement some or all of the site 2.Sit a user down at a computer 3.Have the user perform a specified task 4.Record the user's interaction with the site Using Camtasia or another screen capture tool Using a webcam to see the user's face

Formal studies: Look and learn Analyze: – How long it took user to learn to use the site – Whether the user was able to remember how to use parts of the site (e.g., navigating back to pages later in task) – How many clicks and minutes the task needed – Whether the user made errors along the way Fix the site as needed, then retest until you can't see any way to further improve in terms of learnability, memorability, efficiency, and errors.

Cheap and easy usability in practice 1.Figure out what is the MOST important functionality 2.Check out the appearance of other sites with similar functionality 3.Sketch out your site on paper, using a similar appearance Keeping all the techniques of this lecture in mind 4.Test the paper prototype with users Informally pay attention to problems with learnability, memorability, efficiency, errors 5.Revise, retest, implement, retest, revise, retest 6.If the site is going to be really expensive, then follow with a formal usability study