cs 235: user interface design october 22 class meeting department of computer science san jose state...
TRANSCRIPT
CS 235: User Interface DesignOctober 22 Class Meeting
Department of Computer ScienceSan Jose State University
Fall 2014Instructor: Ron Mak
www.cs.sjsu.edu/~mak
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
2
Section 1
Design Team Client Team
InvinciblesPrototype Pro
Dhamaal
SNAPThatsMySpot
Invincibles
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
3
Section 2
Design Team Client Team
Ux-plorersHoliday Planner
The Interfacers
Mind BogglersWeb Chat
League of Berryessa
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
4
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.
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
5
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.
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
6
Microinteraction Examples
Guess your name based on your email address.
Microinteractions: Designing with Detailsby Dan SafferO’Reilly Media, Inc., 2014
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
7
Microinteraction Examples, cont’d
Immediate feedback for password selections.
Microinteractions: Designing with Detailsby Dan SafferO’Reilly Media, Inc., 2014
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
8
Microinteraction Examples, cont’d
The Nest Learning Thermometer lights up whenever someone walks by.
Microinteractions: Designing with Detailsby Dan SafferO’Reilly Media, Inc., 2014
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
9
Structure of Microinteractions
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 Detailsby Dan SafferO’Reilly Media, Inc., 2014
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
10
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.
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
11
Feedback Examples
Microinteractions: Designing with Detailsby Dan SafferO’Reilly Media, Inc., 2014
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
12
Feedback Examples, cont’d
Can you spot the feedback after the Sign Up button is clicked?
Microinteractions: Designing with Detailsby Dan SafferO’Reilly Media, Inc., 2014
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
13
Feedback as Personality
The best feedback is never arbitrary. Feedback is for humans.
Example of personality: Apple’s Siri
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
14
Feedback as Personality, cont’d
Feedback can be whimsical.
Microinteractions: Designing with Detailsby Dan SafferO’Reilly Media, Inc., 2014
Computer Science Dept.Fall 2014: October 22
CS 235: User Interface Design© R. Mak
15
Feedback as Personality, cont’d
Feedback can be personalized.
Microinteractions: Designing with Detailsby Dan SafferO’Reilly Media, Inc., 2014