Design Process …and understanding users. Agenda Finish history Design process Understanding users.
-
Upload
lorena-bishop -
Category
Documents
-
view
219 -
download
0
Transcript of Design Process …and understanding users. Agenda Finish history Design process Understanding users.
![Page 1: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/1.jpg)
Design Process
…and understanding users
![Page 2: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/2.jpg)
Agenda
Finish history Design process Understanding users
![Page 3: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/3.jpg)
Reminder: history lesson
Time
Use
r P
rodu
ctiv
ity
Batch
Command Line
WIMP(Windows)
1940s – 1950s 1980s - Present1960s – 1970s
?
?
Interaction has evolved from communication in the language of the Interaction has evolved from communication in the language of the computer, to communication in the language of people and their activitiescomputer, to communication in the language of people and their activities
![Page 4: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/4.jpg)
New paradigms?
![Page 5: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/5.jpg)
And the future?
![Page 6: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/6.jpg)
Course ReCap
To make you notice interfaces, good and bad– You’ll never look at doors the same way again
To help you realize no one gets an interface right on the first try– Yes, even the experts– Design is HARD
To teach you tools and techniques to help you iteratively improve your designs– Because you can eventually get it right
![Page 7: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/7.jpg)
What is design?
achieving goals within constraints
goals - purpose– who is it for, why do they want it
constraints– materials, platforms
trade-offs
![Page 8: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/8.jpg)
What is a user-centered approach?
Early focus on users and tasks: directly studying
cognitive, behavioral, & attitudinal characteristics Empirical measurement: users’ reactions and
performance to scenarios, manuals, simulations &
prototypes are observed, recorded and analysed
Iterative design: when problems are found in user
testing, fix them and carry out more tests
![Page 9: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/9.jpg)
A simple interaction design model
Exemplifies a user-centered design approach
![Page 10: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/10.jpg)
Basic HCI process of design
requirements
analysis
design
implementand deploy
prototype
interviewsethnography
what is therevs.
what is wanted
guidelinesprinciples
dialoguenotations
precisespecification
architecturesdocumentation
help
evaluationheuristics
scenariostask analysis
![Page 11: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/11.jpg)
ISO 13407
![Page 12: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/12.jpg)
Discussion
How would you incorporate HCI design into larger software engineering design frameworks?
![Page 13: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/13.jpg)
Traditional ‘waterfall’ lifecycle
Requirements analysis
Design
Code
Test
Maintenance
![Page 14: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/14.jpg)
Spiral Lifecycle model
From cctr.umkc.edu/~kennethjuwng/spiral.htm
![Page 15: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/15.jpg)
Why is HCI Design Difficult?
Difficult to deeply analyze human behavior May be too close to the domain Cost/features may be considered over good
human factors
Creativity is challenging!
![Page 16: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/16.jpg)
Summary
Four basic activities in the design process1. Identify needs and establish requirements2. Design potential solutions ((re)-design)3. Choose between alternatives (evaluate)4. Build the artefact
User-centered design rests on three principles1. Early focus on users and tasks2. Empirical measurement using quantifiable & measurable
usability criteria3. Iterative design
Lifecycle models show how these are related
![Page 17: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/17.jpg)
Know Thy User
You want to know– Who your users are– What they are doing– When they are doing it– Why they are doing it– What tools they are using– How they are using them
![Page 18: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/18.jpg)
Know They User
Physical attributes(age, gender, size, reach, visual angles, etc…)
Physical work places(table height, sound levels, lighting, software version…)
Perceptual abilities(hearing, vision, heat sensitivity…)
Cognitive abilities(memory span, reading level, musical training, math…)
Personality and social traits(likes, dislikes, preferences, patience…)
Cultural and international diversity(languages, dialog box flow, symbols…)
Special populations, (dis)abilities
![Page 19: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/19.jpg)
Design implications
Consider the implications:
Fact Implications
Users 16-80 yrs Range of text sizes
Range of grip strength
Some French speakers Multilingual interface
Astronaut users Extensive training available
Military context Aesthetics less of an issue
Ruggedness is critical
![Page 20: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/20.jpg)
What are the implications?
Young, busy professionals. Product for use in their home/personal lives
Busy professionals. Product for use in the office, discretionary use.
Range of office workers. Product for us in the office, mandatory use.
![Page 21: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/21.jpg)
Are cultural differences important?
5/21/1960 versus 21/5/1960?– Which should be used for international services and online
forms?
![Page 22: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/22.jpg)
Anna, IKEA online agent
Designed to be different for UK and US customers
What are the differences and which is which?
What should Anna’s appearance be like for other countries, like India, South Africa, or China?
![Page 23: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/23.jpg)
Persona
Description of user and what user wishes to do
Be specific/detailed, even give names and picture
Three personas for ATM usage follow– Adapted from User Interface Design and
Evaluation, The Open University Developed by Cooper (1999)
![Page 24: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/24.jpg)
Felix (representing teenage ATM users)
Felix is 13 and gets pocket money each week. He spends it with
his friends, so doesn’t make regular deposits. He does receive
gifts for his birthday, Christmas, etc. and saves that money for
special purchases, such as a computer games console or trendy
clothes. He has an ATM card allowing him to make withdrawals
when needed for his purchases.
![Page 25: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/25.jpg)
Sandra (representing young adults thru middle age)
Sandra is 30, is married to Jason, has two children Todd(6) and Carly (18
months). They live in a subdivision that is about three miles from the town
center, where the bank and stores are located. Jason uses the car for
work, and works long hours, leaving at 6:45 am and returning at 8:00 pm.
Sandra does not drive, so has to use public transportation. She tries to
run errands and shop while Todd is in school, so she only has to take
Carly to town with her. She typically needs to make two trips to town each
week to get everything done. She uses a stroller with Carly, and the bank
is one flight up via escalator, so she prefers to use the ATM outside the
first floor, even though there is no canopy to protect customers from bad
weather.
![Page 26: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/26.jpg)
Grandpa Marvin (representing middle age to senior citizens)
Marvin is 68 years old, and his social security is deposited into his
bank account at the start of each month. He goes to the bank
every week, withdrawing enough cash for the week - for
miscellaneous expenditures. Regular bills are paid by check. He
stands in line for a live teller, as he prefers the social interaction to
using an ATM, even though his new artificial hip makes standing in
line uncomfortable. He does not have an ATM card.
![Page 27: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/27.jpg)
Example: bus stop kiosk
Make a persona
![Page 28: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/28.jpg)
Assignment: Make a Persona
Due Monday, Sept. 8 One paragraph – like examples in class, with
good details Make it clear what your project topic or idea
is
Turn in on Wiki by class time on Sept. 8
![Page 29: Design Process …and understanding users. Agenda Finish history Design process Understanding users.](https://reader036.fdocuments.us/reader036/viewer/2022062500/56649f155503460f94c2aeb2/html5/thumbnails/29.jpg)
Next Wednesday
More project details Project topic brainstorming Group formation Design inspiration