1. Usability Testing and Web Design
Dr. Krista Bryson

2. Question
Find an example of a bad website that you’ve had to use in the past year to accomplish something. This could be a college website (advising, for instance), a restaurant website, etc.
Write a few words in your notes on why this website is so bad.

3. 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 it’s intended users and purposes; you will run a usability test with 2 users; and you will create a lab report proposing suggestions for improvement.
Website Redesign Evaluation
Usability Protocol Memo
Final Lab Report
Group Presentation on Your Findings
“Watching people try to use what you’re creating/designing/building (or something you’ve 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

4. 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 can’t prove something from qualitative data, but we can suggest improvements.
Usability testing can be exceedingly easy, but it often isn’t 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.
Look at pizza shuttle

5. What We’re Doing: Overview
Teams of 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)

6. Web Design: Don’t Make Me Think
Don’t Make Me Think: Web design should be obvious and self- explanatory. Don’t create frustration and confusion. Let a user accomplish tasks as easily as possible.
Open up the pizza shuttle, Norman website.
Pizza Shuttle example

7. Web Design: Home Page
Goals: What is this website? What’s 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
Let’s evaluate one of your examples.
Usability test element for each part: card sorting, trunk test, scenarios

8. 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:
Card Sorting

9. 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
Let’s evaluate one of your examples.

10. Web Design: Page Structure

11. 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 p
Test out on the engineering website

12. Web Design: Navigation 2
Sign Posting: Once I’m on a page I should be able to see the title of the specific page, have a visual marker of the page I’m 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 I’m sent to.

13. Web Design: Trunk Test
Usability: The Trunk Test:
Imagine that you’ve 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:
What site is this? (Site ID)
What page am I on? (Page name)
What are the major sections of this site? (Sections)
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?

14. 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 doesn’t have to be white.
Color Scheme: Repeated, meaningful, colors. Goal is the 3 color rule.
Visual Hierarchy: Is consistent
Image Driven
Scannability: Uses headings, small paragraphs, pull quotes, bullets, etc.