Usability Testing and Web Design Dr. Krista Bryson

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.

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

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

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)

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

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

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 Card Sorting

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.

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

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.

Web Design: Trunk Test Usability: The Trunk Test: http://som.ou.edu/index.php/academics/future 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?

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 60-30-10 rule. Visual Hierarchy: Is consistent Image Driven Scannability: Uses headings, small paragraphs, pull quotes, bullets, etc. http://www.baddaytow.com http://www.angelfire.com/super/badwebs/ http://www.apple.com