CS 235: User Interface Design October 8 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Hand-Eye Coordination  Pointing at objects on a display and moving pointers along constrained paths follow consistent, quantitative laws. _ 2

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Fitts’s Law for Pointing at Displayed Targets  Where: T = time to move to the target D = distance to the target W = width of the target a = a measure of the ease of starting and stopping the movement b = a measure of the average difficulty of moving the hand and pointing the device 3

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Fitts’s Law, cont’d  Velocity over time as the pointer moves to the target: 4 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Fitts’s Law, cont’d  Users hit on-screen targets faster the closer and larger the targets are.  The more the distance decreases or the target size increases, the less the decrease in pointing time. Beyond a certain size, making the target even larger adds little benefit. Below a certain distance, making the target closer doesn’t help much. 5

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Fitts’s Law, cont’d 6 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Targets Too Small 7 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Larger Target Sizes 8 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Steering Law  If you must keep a pointer within a certain confined path while moving it to a target, then the wider the path, the faster you can move the pointer to the target. 9 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Steering Law, cont’d  Difficult: Multi-level pull-right menus: 10 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Steering Law, cont’d 11 OriginalImproved Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak How to Conduct a Simple Usability Test  Seat the tester in front of your website. One member of the design team leads the test. The rest of the design team observes.  First ask the tester to examine the home page. Have the tester describe what he thinks the website is all about. _ 12

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak How to Conduct a Simple Usability Test, cont’d  Give the tester a specific goal to achieve using the website. Your website prototype should implement at least two use cases, each of which achieves a goal. The use cases should be as realistic as possible. _ 13

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak How to Conduct a Simple Usability Test, cont’d  The tester and the design team member have an ongoing conversation. Do not give the tester instructions on how to achieve the goal. Stay neutral. The tester tells the design team member what he’s thinking about the website and what he’s attempting to do. _ 14

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak How to Conduct a Simple Usability Test, cont’d  The design team observes and records what and where the tester has problems.  After the tests are over, the entire design team has a debriefing meeting to discuss:  What design problems were uncovered by the tests. How to fix them.  Write a Usability Test Report. _ 15

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Usability Test Report  What was the web application?  What use cases were tested? What was the goal of each one?  How well did the testers achieve each goal?  What problems were uncovered? Describe at least 4 problems.  What design faults caused each problem?  How to fix each problem? 16

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Assignment #3: Usability Testing  Each team creates a web app prototype with at least two interactive use cases.  Each use case must accomplish a specific task.  During usability testing, a student will be picked at random to test each team’s application. Not a student from the client or design teams. The student tester will attempt each use case with no prompting from the design team. _ 17

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Assignment #3: Usability Testing, cont’d  The design team will observe the test and write a Usability Test Report. What problems were observed? What design fault caused each problem? What improvements can be made?  Usability tests will occur October 20 and 22.  Due Friday, Oct. 24: Copy of your original prototype. Usability Test Report 18

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Assignment #3: Usability Testing, cont’d  Go to this website: and watch the “Demo Usability Test” video. The actual test starts at 6:00. During the tests we’ll do in class, you don’t need to do the initial chat. Notice how the tester and the design team member have a constant conversation with each other. _ 19

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak A Good Book on Web Usability 20

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Definitions of Usability  Useful Does it do something people need done?  Learnable Can people figure out how to use it?  Memorable Do they have to relearn it each time they use it?  Effective Does it get the job done? 21

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Definitions of Usability, cont’d  Efficient Does it do it with a reasonable amount of time and effort?  Desirable Do people want it?  Delightful Is using it enjoyable, or even fun? 22 “A person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it’s worth.” Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Don’t Make Me Think  What is clickable? 23 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Don’t Make Me Think, cont’d  Booking a flight 24 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Users Don’t Read Pages  Users scan web pages.  Users use the web to get something done.  Users know they don’t have to read everything.  Scanning is a basic skill.  Therefore, it must be easy to find the key components of a web page.  Format pages to facilitate scanning. _ 25

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Users “Satisfice”  Users don’t make optimal choices when looking for desired items on web pages.  Instead, users “satisfice” – they make the first reasonable choice. satisfice = a made-up word that combines “satisfy” + “suffice” _ 26

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Create Effective Visual Hierarchies  The more important something is, the more prominent it should be. 27 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Create Effective Visual Hierarchies, cont’d  Things that are related logically should be related visually. 28 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Create Effective Visual Hierarchies, cont’d  Use nesting to show what is part of what. 29 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Create Effective Visual Hierarchies, cont’d 30 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Create Effective Visual Hierarchies, cont’d 31 WrongRight Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Following the “Scent of Information”  Users don’t mind clicking a lot to find desired information on a website as long as: Each click is painless. They have continued confidence that they’re on the right track to finding their information “prey”. _ 32

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Avoid Showing Confusing Options  A confused user may decide it’s not worth it. 33 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Avoid Showing Confusing Options, cont’d  Display only relevant options. 34 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak The Home Page  What is the big picture?  What is this website about?  Users must be able to answer these questions within the first few seconds.  The first few seconds a user spends on a new website are critical. You must quickly get the main point across. _ 35

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak The Home Page, cont’d  Not every visitor to your website will start with the home page. The user may actually start with some internal page after following a link.  Therefore, make it easy to return to the home page from every page. _ 36

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Website Taglines  Good taglines are clear and informative and explain exactly what your website or your organization does. 37 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Website Taglines, cont’d  Good taglines are just long enough, but not too long. Six to eight words seem long enough to convey a full thought, but short enough to absorb easily. 38 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Website Taglines, cont’d  Good taglines convey differentiation and a clear benefit. A really good tagline is one that no one else in the world could use except you. 39 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Website Taglines, cont’d  Bad taglines sound generic. 40 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2014: October 8 CS 235: User Interface Design © R. Mak Website Taglines, cont’d  Good taglines are personable, lively, and sometimes clever. Clever is good, but only if the cleverness helps convey—not obscure—the benefit. 41 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014