By: I-Chen Lin, Assistant Professor

Transcription

1 National Chiao Tung Univ, Taiwan By: I-Chen Lin, Assistant Professor

2 What is HCI? Task Organizational & Social Issues Design Technology Humans

3 Good or Poor Design?

4 Good or Poor design? Given the same devices, is it possible to be more userfriendly?

5 What to Design? Considering Who are the users? Where to be used? When? What re the activities? Key point Optimize the users interactions with a system, environment, or product.

6 User Interfaces HCI = Design Prototyping Evaluation Implementation of user interfaces (UIs)

7 User Interface Design Cycle Prototype Design Evaluate

8 Keys to Designing i & Building Successful Interfaces Design cycle User-centered design Task analysis Rapid prototyping Evaluation Programming Iteration

9 User-centered Design Know your users Cognitive abilities visual & aural perception physical manipulation Memory Organizational / job abilities Keep users involved throughout the project

10 Task Analysis Observe existing work practices Create scenarios of actual use Try-out new ideas before building software

11 Rapid Prototyping t Build a mock-up of design Low fidelity techniques paper sketches cut, copy, paste video segments Interactive prototyping tools HTML, Visual Basic,., etc. UI builders Visual Studio,, etc. Fantasy Basketball

12 Evaluation Test with real users (participants) Build models Low-cost techniques expert evaluation walkthroughs

13 Iteration At every stage! Prototype Design Evaluate

14 Goals of the HCI fundamental concepts Learn the basics of HCI cognitive/perceptual t constraints t design techniques Techniques for evaluating a user interface design Technology used to prototype & implement UIs What do we care beyond the fundamentals

15 Beyond the basic concepts Users are familiar with GUI (2D). How about 3D UI? games, visualization, community space, artistic, educational It looks cool, but,... Hardware Interactivity Head tracking, 3D positioning, Applicability

16 3D UIs MGM, Hackers Do you want your OS to look like this?

17 3D UIs: Examples Lisa Viewpoints (Lisa Strausfeld Strausfeld, MIT) 3D planes represents information on seven mutual funds over ten years Changes in highlighting, viewpoint, representation show context shifts

18 3D UIs: Examples City of News (Flavia Flavia Sparacino Sparacino, MIT) 3D web browser Maps information onto virtual 3D structures around which users fly City organized in districts to provide territorial regrouping of urban activities

19 3D UIs: Examples Cospace Cospace (Thomas Kirk and Peter Selfridge Selfridge, AT&T Labs) 3D shared environment for Web browsing Users represented as avatars, can communicate with

20 2D vs. 3D? It is difficult to control a 3D space with the interaction ti techniques that are currently in common use since they were designed for 2D manipulation (e.g., dragging, scrolling) Users need to pay attention to the navigation i of the 3D view in addition to the navigation of the underlying model: the extra controls for flying, zooming, etc. get in the way of the user's primary task Poor screen resolution makes it impossible to render remote objects in sufficient detail to be recognizable; any text that is in the background is unreadable The software needed for 3D is usually non-standard, crash-prone, and requires an extra download (which users don t want to wait for) Jakob Nielsen, html

21 What may we do?

22 What may we do? (cont.) Cl th h "U I t f D i P t t i d Clothes shopper, "User Interface Design, Prototyping, and Evaluation course, CS, UC Berkeley

23 What may we do? (cont.) Eyetoy games, PS2

24 What may we do? (cont.) Smart user interfaces Good (Intelligent) UI may also be accompanied with new technologies. T. Igarashi, J.F. Hughes, "A Suggestive Interface for 3D Drawing ", 14th Annual Symposium on User Interface Software and Technology, ACM UIST'01, Orlando, Florida, November 11-14, 2001, pp

25 What may we do? (cont.) Chinese Painting on TabletPC, CMLab, NTU

26 What may we do? (cont.)

27 What may we do? (cont.) Tangible UI, MetaDesk Vision wand, U. Toronto

28 What may we do? (cont.) projection Projection with scene calibration The Office of the Future, CS, UNC

29 What may we do? (.?) The Invisible Train Swimming Across the Pacific, The University of British Columbia

30 New tech. & UIs Intelligent scissors, SIGGRAPH 95 Lazy snapping, y pp g, MSRA, SIGGRAPH 04