315324: Interface Designskrisana/321480/... · 2005-06-16 · – Users understand task/problem...
Transcript of 315324: Interface Designskrisana/321480/... · 2005-06-16 · – Users understand task/problem...
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