Increasing Student Success with your Web Site Jerilyn Veldof University of Minnesota Twin Cities

My Background Web Redesign Projects –U of AZ’s homepage - ‘96-97 White Paper –U of AZ Library’s web gateway- ‘95, ‘97-’98 –U of MN’s web gateway - ‘99-00 –U of MN’s online tutorial - ‘98-? Article & Presentations –Journal of Library Administration - vol 26, no. 3/4 (1999):

Day Overview Morning –Overview Lecture –Demonstration of a Usability Test Afternoon –Create a usability test –Prepare to administer it –Conduct a trial mini-test –Analyze results

Poor design --> usually due to the designers / developers who didn’t know something they should have known. They needed more information about the user or the way the user interacts with the product.

Poor design --> usually due to the designers / developers who didn’t know something they should have known. They needed more information about the user or the way the user interacts with the product.

Know thy user, for they are not you. Dick Miller, usability guy from HP

Know thy user, for they are not you. Dick Miller, usability guy

Librarian-Centric Design #2

User-Centered Design

Goals for a User-Centered Design 1- Create a useful site that enables users to achieve their particular goals and that meets their needs. 2- Create an easy-to-use site that enables users to move quickly and with few errors. 3 -Create a site that users like. Users are more likely to perform well on a product that provides satisfaction.

Goals for a User-Centered Design 1- Create a useful site that enables users to achieve their particular goals and that meets their needs. 2- Create an easy-to-use site that enables users to move quickly and with few errors. 3 -Create a site that users like. Users are more likely to perform well on a product that provides satisfaction.

User-Centered Design is an Iterative Process Design, Test, Redesign, Test, Redesign…. With 3-4 iterations most design problems can be identified.

User-Centered Design is an Iterative Process Design, Test, Redesign, Test, Redesign…. With 3-4 iterations most design problems can be identified.

Eat Your Spinach!

Pop Quiz! 1- What characterizes a library-centered design? a) it’s PACKED with information b) the link to indexes just says “indexes” c) WE like it just fine d) Hey, it’s all we had time for! e) All of the above

Pop Quiz! 2- What characterizes a user-centered design? a) It’s simple b) The 15 year old next door could find if we owned Sports Illustrated on it. c) You’ve tested it on your real users d) Your real users have illustrated to you that it’s usable! e) All of the above

Design Process 1- Identify user goals 2- Test design approaches/components 3- Build prototype 4- Test prototype 5- Rebuild 6- Test, Rebuild, Test, Rebuild…. 7- Are your users satisfied yet? Are you?

Methods to Achieve Usability Higher $$ / More Accurate Formal usability testing Low-fidelity testing (e.g. paper prototyping) Focus groups Group testing Surveys Lower $$ / Less Accurate Cognitive/design walk- throughs Heuristic evaluation Card-sorting Matching test or icon intuitiveness evaluation Field tests

Focus Groups Know your users, their goals, and how they see their world…. Understand their content requirements. Understand their goals in using your site. Feedback on projects and current products

Identifying User Goals focus groups surveys your experience

Usability Testing “Indispensable to our design.” Observing a handful of users and seeing where they run into trouble. (Nielsen) Don’t wait until you’re practically done! Start usability testing at the front end.

Rapid Prototyping on Paper and Computer Make changes as you test (iterative design) Paper Prototypes –Sketches of interface through task completion –Everyone on team provides input at same level –Users sometimes feel freer to suggest major changes, focus on high level, BUT may also interact differently with paper prototypes Go!

Usability Testing 1- Identify tasks –create forms –test your test! 2- Build a post test questionnaire 3- Train your test monitors

Usability Testing 4- Recruit your users users - with 4 participants you can identify 75% of the major user interface problems (Nielsen) - law of diminishing returns 5- Guide users to “think aloud” 6- Administer post-test questionnaire

Usability Testing Who participates? User (provide incentives) Test Monitor / Path recorder Recorder Other observers * Get all your team members to participate in testing

Usability Demo Roles in a usability test –Participant - need volunteer “Freshman” –Test Monitor - this is me –Path Recorder - this is YOU! –Recorder - we don’t have one –Observers - all of you Go to UMN

Usability Testing Debrief right after tests -- Do not wait! Try mini-tests - including on other web sites (don’t recycle others’ errors!) Try simultaneous testing

Usability Testing PROS Determines exactly what problem is Helps resolve disagreements about design by providing distance to product Provides user-centered “data” for responding to outside requests CONS Small sample size Risky - always put feedback in context of larger picture of what you know

Methods to Achieve Usability Higher $$ / More Accurate Formal usability testing Low-fidelity testing (e.g. paper prototyping) Focus groups Group testing Surveys Lower $$ / Less Accurate Cognitive/design walk- throughs Heuristic evaluation Card-sorting Matching test or icon intuitiveness evaluation Field tests

Card Sorting Used when trying to categorize and sort information (developing navigation hierarchies) Also useful in determining terminology

Card Sorting 1- Provide users with 8x5 cards with one option you want to have on your web site 2- Ask users to sort into related piles and provide a label/explanation 3- Ask users to sort the piles into “super” piles and provide label

Heuristic Evaluations / Cognitive Walk-thrus Each team member represents a user –what does this user want to accomplish today? –Why does this person come to school? –What motivates this person? –What’s important to this person? –What does this person value?

Heuristics Evaluations/ Cognitive Walk-thrus Heuristic Evaluations Rules of thumb - principles you will adhere to in your design Do it individually, then discuss Identify design changes Fix them! Cognitive Walk-thrus Anticipate problems before bringing your users in Envision the users’ route on their way to complete a task in your web site Walk thru this route & ID potential problems Fix them!

Methods to Achieve Usability Higher $$ / More Accurate Formal usability testing Low-fidelity testing (e.g. paper prototyping) Focus groups Group testing Surveys Lower $$ / Less Accurate Cognitive/design walk- throughs Heuristic evaluation Card-sorting Matching test or icon intuitiveness evaluation Field tests

Doing Your Own Testing Cultural / institutional differences Cultural / institutional work processes

Defining Success Define your redesign goals –What’s the success rate you want to achieve? –Do you care about time spent on a task? –Do you want user satisfaction/perception data from an online survey? –Do you want to extrapolate from web stats?

Defining Success Book - All Successful Math Library Hours - All Tests Successful Journal Article –2 Successful: Tests 2, 6 –4 Unsuccessful: Tests 1, 3, 4, 5 Sports Illustrated –3 Successful: Tests 3, 4, 5 –3 Unsuccessful: Tests 1,2,6 Interlibrary Loan - All Tests Successful Science & Eng Move –7 Successful: Tests 1-6 –1 Successful in a different way: Test 4 Google - All Successful Shakespeare Video - All Tests Successful

Defining Success Time it takes users to to complete a task. Online survey on current site and again on redesigned site. Use web statistics.

Quick and Dirty Process 1- Use our usability questions 2- Test sites you’d like to emulate 3- Build prototypes (start with paper) 4- Test your prototypes - one week per prototype - recruit “off the street” per prototype 5- Meet 2ce a week (once to test, other for planning) & get a devoted web developer to make changes

Morning Conclusion Watch for Armchair Design Experts! “You will debug whether you choose to or not. Your decision is whether to debug publicly or privately.” –Dennis Schmidt - IBM Rochester, MN