CSE452 Computer Graphics Lecture 14: User Interface CSE452 Lecture 14: User Interface 1
Purpose of UI A dialogue between the user and the machine The key to productivity Provide usable, functional, safe, efficient systems for people Concentrate on user-centered design UI now much more important than features 10% of features used 90% of time In many modern programs, the user interface code constitutes the bulk of program, i.e., 70-80% CSE452 Lecture 14: User Interface 2
At Google Geeky engineers First-time computer users UI designers CSE452 Lecture 14: User Interface 3
We will talk about History of computer UI Hardware, and software GUI design principles CSE452 Lecture 14: User Interface 4
A Brief History of UI 1963: Sketchpad (Ivan Sutherland) First GUI (graphics user interface) Buttons, keys, panning, zooming CSE452 Lecture 14: User Interface 5
A Brief History of UI 1968: NLS (Douglas Engelbart) Mouse, tiled windows, video conferencing, email, hypertext Mother of all demos (Dec. 9, 1968) CSE452 Lecture 14: User Interface 6
A Brief History of UI 1973: Alto (Xerox PARC) The first personal work station Raster display, Ethernet WIMP GUI (window, icon, menu, pointing device) WYSIWYG editor (Bravo, Gypsy) CSE452 Lecture 14: User Interface 7
A Brief History of UI 1984: Mac (Apple Computer) Commercial graphics desktop computer Overlapping windows (based on Xerox s Star system) Pulldown menus, icons, toolbars, file drag-and-drops. CSE452 Lecture 14: User Interface 8
A Brief History of UI 1985: Windows (Microsoft) A Mac imitation with minor improvements CSE452 Lecture 14: User Interface 9
More recent examples Ubuntu 9.10 Mac OS X Snow Leopard Windows 7 CSE452 Lecture 14: User Interface 10
Today s GUI CSE452 Lecture 14: User Interface 11
Variations of GUI WIMP (windows, icons, menu, pointers) Zooming UI (2.5D) 3D GUI Mobile device UI Web design HTML, CGI, java, Flash Photoshop, Illustrator Game UI Supporting UI screens Heads-up display (HUD) The Cube plugin The HUD in Metroid Prime CSE452 Lecture 14: User Interface 12
Today s Input Devices 2D Input devices Joysticks Pen-based devices Tablet computers, PalmOS Optical trackers Touch screens CSE452 Lecture 14: User Interface 13
Today s Input Devices 3D Input devices Haptic devices Provides force feedback CSE452 Lecture 14: User Interface 14
Today s Input Devices 3D Input devices Haptic devices Provides force feedback Gloves Position, orientation, joint-angle CSE452 Lecture 14: User Interface 15
Today s Input Devices 3D Input devices Haptic devices Provides force feedback Gloves Position, orientation, joint-angle Markers for motion tracking Acoustic, inertial, LED, magnetic, reflective Records positions, angles, velocities, accelerations Requires registration for accurate tracking CSE452 Lecture 14: User Interface 16
Today s Input Devices 3D Input devices (low-cost) Wii Remote (Nintendo) Single-point, 3D location Kinect (Microsoft) 3D point cloud Full body skeleton Camera? CSE452 Lecture 14: User Interface 17
Crazy ones in Sci-Fi movies CSE452 Lecture 14: User Interface 18
CSE452 Lecture 14: User Interface 19
Real Minority Report UI CSE452 Lecture 14: User Interface 20
Next generation UIs are coming! CSE452 Lecture 14: User Interface 21
Glove-less gesture control CSE452 Lecture 14: User Interface 22
CSE452 Lecture 14: User Interface 23
Back to more realistic things Slides from Takeo Igarashi CSE452 Lecture 14: User Interface 24
Webpage design CSE452 Lecture 14: User Interface 25
UI design is difficult CSE452 Lecture 14: User Interface 26
Gestalt Laws of Perception CSE452 Lecture 14: User Interface 27
Gestalt Laws of Perception CSE452 Lecture 14: User Interface 28
Affordance Button -> Push Knob -> Turn Slot -> Insert String -> Pull Effective use of affordance minimizes explanations CSE452 Lecture 14: User Interface 29
Natural correspondences (gas stove) CSE452 Lecture 14: User Interface 30
Car seat adjustment CSE452 Lecture 14: User Interface 31
Door handle CSE452 Lecture 14: User Interface 32
Feedback Visualize what is happening CSE452 Lecture 14: User Interface 33
Minimize damage A very bad design Channel 1 Channel 2 Channel 3 Channel 4 Delete your settings! CSE452 Lecture 14: User Interface 34
Cultural differences Japan USA/Europe CSE452 Lecture 14: User Interface 35
Cultural differences CSE452 Lecture 14: User Interface 36
Confusing colors for some 4.5% of male Japanese 8% of male Caucasian CSE452 Lecture 14: User Interface 37
How to make a better UI? Evaluation without tests Follow a certain guideline or a checklist User study (tests) Tell that it is the fault of the product not you Tell that you can quit at any time Ask them to think-aloud Tell them we will not help CSE452 Lecture 14: User Interface 38
Further Readings UI design First Principles of Interaction Design http://www.asktog.com/basics/ firstprinciples.html Web design Top mistakes in web design, by Jakob Nielsen http://www.useit.com/ alertbox/9605.html Conferences User Experience conference http://www.nngroup.com/events/ Design for User experience http://www.dux2005.org/ Internet User Experience http://www.internetuserexperience.biz/ ACM Symposium on User Interface Software and Technology http:// www.acm.org/uist/uist2006/ CSE452 Lecture 14: User Interface 39