315324: Interface Designs. Krisana Chinnasarn,, Ph.D. June 2005.

Transcription

1 315324: Interface Designs Krisana Chinnasarn,, Ph.D. June 2005.

2 Outline HCI Introduction Course Overview Course Management 6/16/2005 2

3 Human-Computer Interaction Human Program end-user Other people in the organization Computer Machine on which the program runs Program often split between client and server hosts Interaction User tells the computer what they want to do Computer communicates results 6/16/2005 3

4 What is HCI? Task Organizational & Social Issues Design Technology Humans 6/16/2005 4

5 Factors Influence Now that mice are included with most computers, applications assume a mouse will be used as a the pointing device change in technology 6/16/2005 5

6 Factors Influence People change their knowledge as they perform, i.e., they learn change behavior 6/16/2005 6

7 What is HCI? Task Organizational & Social Issues Design Technology Humans 6/16/2005 7

8 User Interfaces Software program that allows Interaction with computer Complete a task HCI is Design create UI/interaction controls Prototyping build samples for testing Evaluation evaluate designs using prototypes Implementation turn prototype into production program 6/16/2005 8

9 Why Study User Interfaces? Major part of real programs Approximately 50% You will work on real software Intended for users other than yourself Bad user interfaces cost Money (5% satisfaction -> up to 85% profits) Lives UI s are hard to get right People are different and unpredictable 6/16/2005 9

10 Learn By Observation Hall of Fame Examples of good interfaces won t see many! Hall of Shame Examples of poor interfaces GUI Bloopers book 6/16/

11 UI Hall of Shame! How do you cancel? 6/16/

12 Bad User Interfaces Hard to tell the difference between the two icons and names 6/16/

13 Hall of Fame? 6/16/

14 Interface Terminology Direct Manipulation Display what user is manipulating What You See Is What You Get (WYSIWYG) Graphical User Interface (GUI) Look, recognize, and point vs- remember and type AKAWindows, Icons, and Mouse Pointer (WIMP) 6/16/

15 Who Builds UI s? A team of specialists (ideally) Graphic designers Interaction / interface designers Technical writers Marketers Test engineers Software engineers Where are the programmers? 6/16/

16 UI Development Process Design cycle User-centered design Task analysis Rapid prototyping Evaluation Programming Iteration 6/16/

17 UI Design Cycle Design Prototype Evaluate 6/16/

18 User-centered Design Know thy User Cognitive and physical abilities Perception, physical manipulation, and memory Organizational and job abilities Keep users involved throughout project Users understand task/problem better than you ever will understand it! 6/16/

19 Task Analysis Observe existing work practices Create examples and scenarios of actual use Scenario step by step description of solving a particular problem Try new ideas before building software Prototype low fidelity vs- high fidelity 6/16/

20 Rapid Prototyping Build design mock-up Low fidelity techniques Paper sketches Cut, copy, paste Video segments Interactive prototyping tools Visual Basic, HyperCard, Director, etc. UI builders 6/16/

21 Interface Sketch Fantasy Basketball 6/16/

22 Evaluation Test with real users (participants) Build models Low-cost techniques Expert evaluation Walkthroughs 6/16/

23 Programming Tools Application Generators Toolkits UI Builders Event models Input / Output models etc. 6/16/

24 Iteration - At Every Stage! Design Prototype Evaluate 6/16/

25 Course Goals Learn design, prototype, & evaluate UI s Prospective user tasks Cognitive/perceptual constraints that affect design Techniques to evaluate a UI design Importance of iterative design for usability Prototyping technology Working together on a team project Communicating your results to a group Learn by doing! 6/16/

26 Relation to CB Curriculum Most CB courses teach technology Computer, Business, database, programming, standardization, etc emphasizes design & evaluation Assume you can program/learn new languages Technology as a tool to evaluate via prototyping Skills will be important after graduation Complex systems, large teams Not large immediate impact in other CS courses 6/16/

27 Managements Late Policy No late days on group assignments Individual assignments lose one letter grade/day Cheating policy (official) You will get an F in the course More than once can get you dismissed from BUU 6/16/

28 Project Description Each person will propose a UI idea Fixing something you don t like or a new idea Projects will be group efforts 1 student to a group Work with students w/ different skills/interests (other students) Groups meet regularly with teaching staff Cumulative Apply several HCI methods to a single interface 6/16/

29 Project Overview Project proposals due next Thursday Project task analysis & sketches i.e., rough proposals that can & will change Low fidelity prototyping & user testing 6/16/

30 Low-fi Prototyping & Testing 6/16/2005 ESP 30

31 Project Overview (cont.) Project proposals due next Thursday Project task analysis & sketches i.e., rough proposals that can & will change Low fidelity prototyping & user testing Prototype #1 In-class presentation and critique 6/16/

32 Project Overview (cont.) Prototype #1 In-class presentation and critique Heuristic evaluation (individual) Build 2nd interactive prototype User testing In class presentation and critique 6/16/

33 Project Examples On-line Telebears Website sketch Research notebook CD jukebox Interactive TV guide Electronic book reader Technical support help desk PDA baseball score keeper 6/16/

34 Research Notebook 6/16/

35 SiteSketch 6/16/

36 CD JukeBox 6/16/

37 Interactive TV Guide 6/16/

38 Electronic Book Reader 6/16/

39 Tech-Support Help Desk 6/16/

40 PDA Baseball Scorekeeper 6/16/

41 Project Suggestions BIBS personal outline/note taking Ad hoc presentation tool Liveboard client (remote?) Class communication tool(s) Scheduled discussion/chat with archive and search Class webpage generation tool Interactive sports viewer 6/16/

42 Project Proposal Turn-in Find a user interface problem area Existing interface you use or have seen New piece of software Hand in write-up on Thursday Describe problem and interface 1-2 pages send web URL Will be used as input to project teams 6/16/

43 Write-up Outline Name URL Problem (1-2 sentences) Analysis (detail of problem/need) Suggested improvements / design 6/16/

44 Next Time Project discussion 6/16/