Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)
-
Upload
ada-lindsey -
Category
Documents
-
view
228 -
download
0
Transcript of Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)
![Page 1: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/1.jpg)
Mario Čagalj
University of Split
2014/15.
Human-Computer Interaction (HCI)
![Page 2: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/2.jpg)
Human-Computer Interaction: Introduction
Based on slides by Saul Greenberg, Russell Beale, Tolga Can…
![Page 3: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/3.jpg)
HCIThe study of how people interact with computers
And to what extent computers are developed for successful interaction with human beings
Consists of three partsThe userThe computerThe way they work togheter
Why HCI?
3
![Page 4: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/4.jpg)
4
http://www.youtube.com/watch?v=kKT_09pARN4
![Page 5: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/5.jpg)
Numerous badly designed things
5
http://www.baddesigns.com
![Page 6: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/6.jpg)
Does it matter?
6
If the things are badly designed?Well, you can crash your car and get injuredYou can go out of businessLose elections (US 2000)Get angry and make
mistakes – then thething will take longerthan usual
![Page 7: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/7.jpg)
Moor’s law
7
transistorsspeed
discscost
1950 1990 2030
Computerabilities
![Page 8: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/8.jpg)
Psychology
1950 1990 20302000BC
human
abilities
8
![Page 9: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/9.jpg)
Where is the bottleneck?
system performance
9
![Page 10: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/10.jpg)
Human Computer Interaction
A discipline concerned with the
of interactive computing systems for human use
design implementation
evaluation
10
![Page 11: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/11.jpg)
Articulate:•who users are•their key tasks
User and task descriptions
Goals:
Methods:
Products:
Brainstorm designs
Task centered system design
Participatory design
User-centered design
Evaluate
Psychology of everyday things
User involvement
Representation & metaphors
low fidelity prototyping methods
Throw-away paper prototypes
Participatory interaction
Task scenario walk-through
Refined designs
Graphical screen design
Interface guidelines
Style guides
high fidelity prototyping methods
Testable prototypes
Usability testing
Heuristic evaluation
Completed designs
Alpha/beta systems or complete specification
Field testing
An interface design process and usability engineering
![Page 12: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/12.jpg)
Why an interface design process? 63% of large software projects go over cost
Managers gave four usability-related reasonsUsers requested changesOverlooked tasksUsers did not understand their own requirementsInsufficient user-developer communication and understanding
Usability engineering is software engineeringPay a little now, or pay a lot later!Far too easy to jump into detailed design that is
Founded on incorrect requirementsHas inappropriate dialogue flowIs not easily usedIs never tested until it is too late
12
![Page 13: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/13.jpg)
Foundations for designing interfacesUnderstanding users and their tasks
Task-centered system designHow to develop task examplesHow to evaluate designs through a task-centered walk-through
Designing with the userUser-centered design and prototyping
Methods for designing with the userLow and medium fidelity prototyping
Evaluating interfaces with usersThe role of evaluation in interface design How to observe people using systems to detect interface problems
13
![Page 14: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/14.jpg)
Foundations for designing interfacesDesigning visual interfaces
Design of everyday thingsWhat makes visual design work?
Beyond screen designRepresentations and metaphors
Graphical screen designThe placement of interface components on a screen
Principles for designDesign principles, guidelines, and usability heuristics
Using guidelines to design and discover usability problems14
![Page 15: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/15.jpg)
Goals of the courseAt the end of this course, you will:
Know what is meant by good design (guidelines and models that can be applied to interface design)
Know and have applied a variety of methods for involving the user in the design process
Know and have applied methods to evaluate interface quality
15
![Page 16: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/16.jpg)
In other words…Consciousness raising
Make you aware of these issues
Design criticQuestion bad design
16
![Page 17: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/17.jpg)
Class projectDesign and evaluate an interface
Part 1 - Team formation & topic choice, understand and formulate the problem, roadmap
Part 2 - Design alternatives, prototype & evaluation plan, evaluation, user studies
17
![Page 18: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/18.jpg)
Class project: detailsPart 1
Identify team (2-3) & topicDefine the problemDescribe tasks, users, environment, social context
18
![Page 19: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/19.jpg)
Class project: detailsPart 2
Discuss design alternativesStoryboards, mock-ups/prototypes for multiple different
designsExplain decisionsSemi-working interface functionalityPlan for conducting evaluationEvaluation: Conduct evaluation with example users (2-3 users),
characterize what’s working and what’s not
19
![Page 20: Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)](https://reader036.fdocuments.us/reader036/viewer/2022081503/56649f2e5503460f94c47ee5/html5/thumbnails/20.jpg)
Project Reports & PresentationsLast weeks of classes and lab
20 minute presentation of your project
20