CSE452 Computer Graphics

Transcription

1 CSE452 Computer Graphics Lecture 14: User Interface CSE452 Lecture 14: User Interface 1

2 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

3 At Google Geeky engineers First-time computer users UI designers CSE452 Lecture 14: User Interface 3

4 We will talk about History of computer UI Hardware, and software GUI design principles CSE452 Lecture 14: User Interface 4

5 A Brief History of UI 1963: Sketchpad (Ivan Sutherland) First GUI (graphics user interface) Buttons, keys, panning, zooming CSE452 Lecture 14: User Interface 5

6 A Brief History of UI 1968: NLS (Douglas Engelbart) Mouse, tiled windows, video conferencing, , hypertext Mother of all demos (Dec. 9, 1968) CSE452 Lecture 14: User Interface 6

7 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

8 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

9 A Brief History of UI 1985: Windows (Microsoft) A Mac imitation with minor improvements CSE452 Lecture 14: User Interface 9

10 More recent examples Ubuntu 9.10 Mac OS X Snow Leopard Windows 7 CSE452 Lecture 14: User Interface 10

11 Today s GUI CSE452 Lecture 14: User Interface 11

12 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

13 Today s Input Devices 2D Input devices Joysticks Pen-based devices Tablet computers, PalmOS Optical trackers Touch screens CSE452 Lecture 14: User Interface 13

14 Today s Input Devices 3D Input devices Haptic devices Provides force feedback CSE452 Lecture 14: User Interface 14

15 Today s Input Devices 3D Input devices Haptic devices Provides force feedback Gloves Position, orientation, joint-angle CSE452 Lecture 14: User Interface 15

16 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

17 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

18 Crazy ones in Sci-Fi movies CSE452 Lecture 14: User Interface 18

19 CSE452 Lecture 14: User Interface 19

20 Real Minority Report UI CSE452 Lecture 14: User Interface 20

21 Next generation UIs are coming! CSE452 Lecture 14: User Interface 21

22 Glove-less gesture control CSE452 Lecture 14: User Interface 22

23 CSE452 Lecture 14: User Interface 23

24 Back to more realistic things Slides from Takeo Igarashi CSE452 Lecture 14: User Interface 24

25 Webpage design CSE452 Lecture 14: User Interface 25

26 UI design is difficult CSE452 Lecture 14: User Interface 26

27 Gestalt Laws of Perception CSE452 Lecture 14: User Interface 27

28 Gestalt Laws of Perception CSE452 Lecture 14: User Interface 28

29 Affordance Button -> Push Knob -> Turn Slot -> Insert String -> Pull Effective use of affordance minimizes explanations CSE452 Lecture 14: User Interface 29

30 Natural correspondences (gas stove) CSE452 Lecture 14: User Interface 30

31 Car seat adjustment CSE452 Lecture 14: User Interface 31

32 Door handle CSE452 Lecture 14: User Interface 32

33 Feedback Visualize what is happening CSE452 Lecture 14: User Interface 33

34 Minimize damage A very bad design Channel 1 Channel 2 Channel 3 Channel 4 Delete your settings! CSE452 Lecture 14: User Interface 34

35 Cultural differences Japan USA/Europe CSE452 Lecture 14: User Interface 35

36 Cultural differences CSE452 Lecture 14: User Interface 36

37 Confusing colors for some 4.5% of male Japanese 8% of male Caucasian CSE452 Lecture 14: User Interface 37

38 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

39 Further Readings UI design First Principles of Interaction Design firstprinciples.html Web design Top mistakes in web design, by Jakob Nielsen alertbox/9605.html Conferences User Experience conference Design for User experience Internet User Experience ACM Symposium on User Interface Software and Technology CSE452 Lecture 14: User Interface 39