315324: Interface 315324: Interface DesignsDesigns

KrisanaKrisana ChinnasarnChinnasarn, Ph.D., Ph.D.June 2005.June 2005.

6/16/2005 2

Outline

• HCI Introduction• Course Overview• Course Management

6/16/2005 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 4

What is HCI?

HumansTechnology

Organizational &Social IssuesTask

Design

6/16/2005 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 6

Factors Influence“People change their knowledge

as they perform, i.e., they learn”

⇒ change behavior

6/16/2005 7

What is HCI?

HumansTechnology

Organizational &Social IssuesTask

Design

6/16/2005 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 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 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– www.webpagesthatsuck.com

6/16/2005 11

UI Hall of Shame!

• How do you cancel?

6/16/2005 12

Bad User Interfaces

• Hard to tell the difference between the two icons and names

6/16/2005 13

Hall of Fame?

6/16/2005 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”

– AKA Windows, Icons, and MousePointer (WIMP)

6/16/2005 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/2005 16

UI Development Process

• Design cycle• User-centered design• Task analysis• Rapid prototyping• Evaluation• Programming• Iteration

6/16/2005 17

UI Design Cycle

Design

Prototype

Evaluate

6/16/2005 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/2005 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/2005 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/2005 21

Interface Sketch

Fantasy Basketball

6/16/2005 22

Evaluation

• Test with real users (participants)• Build models• Low-cost techniques

– Expert evaluation– Walkthroughs

6/16/2005 23

Programming Tools

• Application Generators• Toolkits• UI Builders• Event models• Input / Output models• etc.

6/16/2005 24

Iteration - At Every Stage!

Design

Prototype

Evaluate

6/16/2005 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/2005 26

Relation to CB Curriculum• Most CB courses teach technology

– Computer, Business, database, programming, standardization, etc.

• 315324 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/2005 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/2005 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/2005 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/2005 30ESP

Low-fi Prototyping & Testing

6/16/2005 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 testingPrototype #1In-class presentation and critique

6/16/2005 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/2005 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/2005 34

Research Notebook

6/16/2005 35

SiteSketch

6/16/2005 36

CD JukeBox

6/16/2005 37

Interactive TV Guide

6/16/2005 38

Electronic Book Reader

6/16/2005 39

Tech-Support Help Desk

6/16/2005 40

PDA Baseball Scorekeeper

6/16/2005 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/2005 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/2005 43

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

6/16/2005 44

Next Time• Project discussion