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

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Section 1 Design TeamClient Team Invincibles Prototype Pro Dhamaal SNAP ThatsMySpot Invincibles 2

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Section 2 Design TeamClient Team Ux-plorers Holiday Planner The Interfacers Mind Bogglers Web Chat League of Berryessa 3

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Microinteractions  The functional, interactive details of a product.  Microinteractions can make the difference between a product that you love to use and one that you merely tolerate.  Good UI designers pay attention to the details as well as to the big picture.  During a design project, try to identify any possible microinteractions. 4

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Microinteractions, cont’d  An exercise in restraint. Do as much as possible with as little as possible.  Reduce more complex products to simpler products each built around one microinteraction. “Minimum Viable Product” (MVP)  Most complex digital products consist of dozens or hundreds of microinteractions. Each microinteraction is an opportunity to delight users and exceed their expectations. 5

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Microinteraction Examples  Guess your name based on your address. 6 Microinteractions: Designing with Details by Dan Saffer O’Reilly Media, Inc., 2014

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Microinteraction Examples, cont’d  Immediate feedback for password selections. 7 Microinteractions: Designing with Details by Dan Saffer O’Reilly Media, Inc., 2014

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Microinteraction Examples, cont’d 8  The Nest Learning Thermometer lights up whenever someone walks by. Microinteractions: Designing with Details by Dan Saffer O’Reilly Media, Inc., 2014

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Structure of Microinteractions 9  The user (or the system) triggers an action.  Rules govern the system’s subsequent behavior.  The system provides feedback to the user. Show the “personality” of the system.  Loops & modes: Does the microinteraction remain until manually turned off? Does it expire? Microinteractions: Designing with Details by Dan Saffer O’Reilly Media, Inc., 2014

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Feedback  Do not overburden users with feedback. Use the least amount of feedback to show what is happening. What does the user need to know, when, how often?  Feedback should occur Immediately after a manual trigger. Whenever the user violates a rule. Whenever the system cannot execute a command. To indicate progress of a long operation. At the beginning or end of a process. 10

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Feedback Examples 11 Microinteractions: Designing with Details by Dan Saffer O’Reilly Media, Inc., 2014

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Feedback Examples, cont’d 12  Can you spot the feedback after the Sign Up button is clicked? Microinteractions: Designing with Details by Dan Saffer O’Reilly Media, Inc., 2014

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Feedback as Personality  The best feedback is never arbitrary.  Feedback is for humans.  Example of personality: Apple’s Siri 13

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Feedback as Personality, cont’d  Feedback can be whimsical. 14 Microinteractions: Designing with Details by Dan Saffer O’Reilly Media, Inc., 2014

Computer Science Dept. Fall 2014: October 22 CS 235: User Interface Design © R. Mak Feedback as Personality, cont’d  Feedback can be personalized. 15 Microinteractions: Designing with Details by Dan Saffer O’Reilly Media, Inc., 2014