Usability Testing and Web Design

Dr. Will Kurlinkus

Question

1. Find an example of a bad website that youve had to

use in the past year to accomplish something. This could
be a college website (advising, for instance), a
restaurant website, etc.

2. Write a few words in a blog post on why this website is so

bad.
 What is a Usability Test?
In this assignment you will find a
poorly designed website; you will
create a usability test to get
feedback on how successfully or
poorly that site is designed for its
intended users and purposes;
you will run a usability test with 2
users; and you will create a lab
report proposing suggestions for
improvement.
1. Website Redesign
Evaluation
2. Usability Protocol Memo
3. Final Lab Report
Watching people try to use
what youre creating/designing/
building (or something youve
already created/designed/built)
with the intention of (a) making it
easier for people to use or (b)
proving that it is easy to use.
Steve Krug, Rocket
Surgery Made Easy
Rocket Surgery Made Easy

Watching users makes you a better designer. Why?

We are performing a qualitative test in hopes to improve a

pre-existing website. We cant prove something from
qualitative data, but we can suggest improvements.

Usability testing can be exceedingly easy, but it often isnt

done simply because designers think that they are their
users. If the designer/engineer understands it, then the user
will understand it. WRONG!

Usability testing can be done on any design that has a user.

It is a useful tool for all designers, engineers, and scientists
who create things.
What Were Doing: Overview

Teams of 3-4

Writing for a client testing 1 website and 3 pages in that

site

Testing 2 participants: ~45 minutes each

Designing a scripted think-aloud-protocol including a

homepage tour and several common scenarios for
participants to go through

Record the screen (screen capture software) and the

usability test room (with a small video camera)
 Web Design: Dont Make Me Think
Dont Make Me Think: Web design should be obvious and self-
explanatory. Dont create frustration and confusion. Let a user
accomplish tasks as easily as possible.

Open up the pizza shuttle, Norman website.

 Web Design: Home Page

Goals: What is this website? Whats the company? How

can I get from here to the place I need to be? Should
spell out the big picture of the site.
Clear navigation
Clear imagery and logo
Search bar
Avoids needless words
Resonates with target audience

Lets evaluate one of your examples.

 Web Design: Site Structure

There generally should only have to be three levels of a site

structure: Homepage>Level 1>Level 2>Level 3

Getting to these lower-level pages should be easy and

obvious

Understanding what content belongs in what section and

how to get a user to that content is the most difficult parts of
web design

Usability: Card sorting for webdesign and writing

Find the Graduation Checklist: http://www.ou.edu/coe.html

 Web Design: Page Structure

Clear visual hierarchy

Size, spacing, font

Nesting

Chunk pages into clear

sections

Avoid having too much on

any page

Beware of content below

the fold

Lets evaluate one of your

examples.
Web Design: Page Structure
 Web Design: Navigation 1

Let me get where I want to

go

Make terms obvious

Give a search bar

Navigation should stay the

same across all pages

Navigation should tell us

where we are

Usability: Renaming
navigation

http://som.ou.edu/
index.php
 Web Design: Navigation 2

Sign Posting: Once Im on a page I should be able to see the title

of the specific page, have a visual marker of the page Im on (a
button is lit up), and know the path I took to get to that page
(breadcrumb trail).

Uniformity: When I click something, the title of the button should

match the title of the page Im sent to.
Web Design: Trunk Test

Usability: The Trunk Test: http://som.ou.edu/index.php/

academics/future

Imagine that youve been blindfolded and locked in the

trunk of a car, then driven around for a while and dumped
on a page somewhere deep in the bowels of a Web site. If
the page is well designed, when your vision clears you
should be able to answer these questions without hesitation:
1. What site is this? (Site ID)
2. What page am I on? (Page name)
3. What are the major sections of this site? (Sections)
4. What are my options at this level? (Local navigation)
5. Where am I in the scheme of things? (You are here indicators)
6. How can I search?
 Web Design: Beautification

Uniformity: Using the same navigation,

hierarchy scheme, titles, etc., across
the entire site.

White Space: Give your information

and images breathing room. Clutter is
the opposite of white space. The more
white space on a site, generally, the
more ethos the site has. White space
doesnt have to be white.

Color Scheme: Repeated, meaningful,

colors. Goal is the 3 color 60-30-10 rule.

Visual Hierarchy: Is consistent

Image Driven

Scannability: Uses headings, small

paragraphs, pull quotes, bullets, etc.