Loenguslaidid Tallinna Ülikooli kursusel IFI6094.DT Kasutajakeskse disaini meetodid. 13. september 2016.

1. Taustauuring
IFI6094.DT Kasutajakeskse disaini meetodid

2. (Leinonen, Toikkanen, & Silfvast, 2008)

3. Taustauuringu meetodid
• Intervjuud
• Kasutajate vaatlus
• Kirjanduse analüüs
• Konkurentsianalüüs

4. Cooper, A., Reimann, R., & Cronin, D. (2007).
About Face 3: The Essentials of Interaction
Design. Indianapolis, IN: Wiley Publishing, Inc.

5. Intervjuud

6. Juhised kasutajate intervjueerimiseks
• Intervjuu peaks toimuma tüüpilises kasutuskohas
• Väldi rangelt kindlaks määratud küsimusi
• Pööra esmalt tähelepanu lõppeesmärgile, seejärel tegevustele
• Ära tee kasutajast disainerit
• Ära aruta tehnoloogilisi lahendusi
• Väldi suunavaid küsimusi
• Küsi lugusid, näiteid ja ringkäiku kasutuskohas
• Suuna intervjuud vastavalt sellele, kuidas uued teemad esile kerkivad
• Oska lugeda “ridade vahelt”
(Cooper et al., 2007)

7. Küsimused eesmärkide kohta
• Eesmärgid — Mis sõltub õnnestunud päev? Millest halb
päev?
• Võimalused — Millised tegevused kulutavad praegu liigselt
Su aega?
• Prioriteedid — Mis on Sulle kõige olulisem?
• Informatsioon — Mis aitab Sul otsuseid langetada?
(Cooper et al., 2007)

8. Küsimused süsteemi kohta
• Funktsioon — Mis on peamised tegevused, mida Sa selle
tootega teed?
• Sagedus — Milliseid toote osasid Sa kõige enam kasutad?
• Eelistused — Mis on selle toote lemmikküljed Sinu jaoks? Mis
ajab Sind selle toote juures ärritab?
• Probleemid — Kuidas Sa probleemide korral lahenduse leiad?
• Kogemus — Milliseid klahvikombinatsioone Sa kasutad?
(Cooper et al., 2007)

9. Küsimused tööprotsesside kohta
• Protsess — Mida Sa tänase tööpäeva alguses esimesena
tegid? Mida järgmisena?
• Kordumised — Kui sageli Sa mingit tegevust teed? Millised
tegevused korduvad iga nädal või kuu, kuid mitte iga
päev?
• Erandid — Milline on tüüpiline tööpäev? Milline oleks
ootamatu sündmus?
(Cooper et al., 2007)

10. Küsimused suhtumise kohta
• Tulevikuplaanid — Mida Sa kujutad ennast tegemas viie
aasta pärast?
• Vältimine — Mida Sa eelistaksid mitte teha? Milliseid
tegevusi Sa edasi lükkad?
• Motivatsioon — Mida Sa naudid kõige enam oma töö (või
elustiili) juures? Millised tegevused Sa kõigepealt käsile
võtad?
(Cooper et al., 2007)

11. Kasutajate vaatlus

12. Vaatluse kavandamine
• Pane paika eesmärgid ja kogutava informatsiooni tüüp
• Pane paika aeg, koht ja inimesed, keda vaadeldakse
• Otsusta, kuidas vaatluse tulemusi talletada
(Cooper et al., 2007)

13. Vaatluse läbiviimine
• Tee kindlaks, et vaadeldavad on vaatluse toimumisest teadlikud
• Vii läbi katsevaatlus
• Ära häiri vaadeldavaid inimesi
• Tee märkmeid ja täpsusta vajadusel hiljem
• Kui võimalik, tee vaatluskohast foto
• Kirjuta üles esmamuljed kohe pärast vaatlust
(Cooper et al., 2007)

14. Kirjanduse analüüs

15. Kirjanduse analüüs
• Äridokumentatsioon: turundusplaanid, turu-uuringud,
kasutajate uuringud, kasutajatoe andmed
• Tehnilised spetsifikatsioonid
• Teadusartiklid
• Teemakohased uudised meedias, tootearvustused
• Teemakohased postitused ja arutelud sotsiaalmeedias
(Cooper et al., 2007)

16. Konkurentsianalüüs

17. Brown, D. M. (2010). Communicating
Design: Developing Web Site
Documentation for Design and
Planning. Berkeley, CA: New Riders.
ptg

18. Põhjused konkurentsianalüüsi läbiviimiseks
• Leida, kuidas teised on lahendanud sarnaseid
disainiprobleeme
• Hinnata kavandatud funktsionaalsusi lähedase rakenduse
juures
(Brown, 2010)

19. Juhised
• Keskendu olulisele: ära võrdle korraga liiga palju süsteeme/
funktsionaalsusi/probleeme
• Koosta võrdluse kriteeriumid
• Vali võrdluse jaoks sobivad süsteemid
(Brown, 2010)

20. Konkurentsianalüüsi ülesehitus
• Lühikokkuvõte: eesmärgid, uurimisküsimused, kriteeriumid
• Järeldused: üks leht/slaid järelduse kohta, koos ekraanipiltide
fragmentidega
• Võrreldud rakenduste profiilid
(Brown, 2010)

21. Online Pet Store Competitive Review
Version1 publishedJuly 31, 2010by Dan Brown(dan@eightshapes.com) 3 of 4
S r r u a
Pet owners think about what they’re feeding their pets, sometimes even more than
what they feed themselves. Displaying the ingredients right on the product page
provides the information shoppers need to decide what food is right for their pet.
Take-Aways
List ingredients as part of the product description.
If linked, incorporate“ingredients”as part of the label
for the link or tab.
Format as a list, rather than as a comma-delimited
paragraph.
Considerations
Make individual ingredients linked to more
information about it
O er product comparisons so users can see how
di erent foods compare in their ingredient lists
Petsmart.com Petco.com DrsFosterSmith.com Je ersPet.com
Comprehensive list of ingredients
but“hidden”under Product
Details tab.
Formatting of list dense and
di cult to read.
Typography of ingredients list
makes it easy to read.
Requires scrolling down and
clicking tab.
Ingredients list behind“more
information”tab. Finding
ingredients requires scrolling.
Essential data about food
presented in nice table. (not
shown)
Ingredients list presented
prominently on the page,
adjacent to product image.
(Brown, 2010)

22. Online Pet Store Competitive Review
Version1 publishedJuly 31, 2010by Dan Brown(dan@eightshapes.com) 4 of 4
r m r u a
Pet owners deliberate about some purchases for their
pet, like food and dietary supplements, but other
purchases (even large ones) may be more impulse, as
an expression of appreciation.The product page needs
to balance these two scenarios.
What works
Detailed product description
Speci c product name
Prominent calls to action
Clear breadcrumb for easy hierarchy navigation
What doesn’t
Small product image
Poor page layout
Scrolling local navigation
Take-aways
Focus page on product description, not chrome
Show large product images
Align page navigation with product comparisons
1
2
3
4
5
6
7
1
2
3
4
5
6
7
(Brown, 2010)

23. Online Pet Store Competitive Review
Version1 publishedJuly 31, 2010by Dan Brown(dan@eightshapes.com) 2 of 4
We compared 5 sites Across 20 criteria, including:
mm r S r r
What we did
Conductedcompetitive reviewof other prominent
pet supply web sites.
Our objective
Establishcommon practicesfor selling common pet
supplies on the web.
What worked
✓ Navigation categories based on pet type.
✓ Navigation categories with common supplies (like
food and toys).
✓ Recommendations based on previous purchases.
✓ Home pages that highlighted new products, specials
and the range of the catalog.
✓ Prominent calls to action taking users to the next
step in the shopping process.
What didn’t work
✗ Dense product pages: Squeezing all the information
onto a single page with tabbed panels hides
information that may help users make a purchase.
✗ One-size- ts-all product page: Users require
di erent kinds of information about di erent
product pages.
✗ Long lists of category links: User research shows
that some products are clearly more important than
others, and navigation should re ect that.
Navigation structures
Product displays
Gallery pages
Product classi cation
Merchandising
Home page features
Calls to action
Account management
Petco.com Petsmart.comJe ersPet.comDrsFosterSmith.com 1800PetMeds.com
(Brown, 2010)

24. Beatport.com Release Page
Beatport release page displays additional
information that is important for dj’s.
What works:
• Track length and BPM are displayed
on release page
• Waveform and key are displayed on
track details page
• Release description
• More releases from the same label
What doesn’t work:
• Release title is displayed in capital
letters
• Price is displayed without taxes
Take-aways:
• Display detailed metadata
• Make metadata easy to copy
• The system could recommend tracks
with compatible key, tempo and style

25. PetSmart.com Petco.com
Home Page Features Special offers Special offers
Search Prominently displayed in header
above navigation, text field with scope
drop-down
Prominently displayed in upper left below
navigation, text field only
Navigation Categories Animal type only Pre-coordinated terms combining pet type and
product type (e.g.: Fish Food)
Contact Information None Toll-free number displayed in header
Ecommerce Standard shopping cart model Standard shopping cart model
Table 10.2: Simple competitive reviews establish criteria and evaluate competitors relative to them. While useful
(Brown, 2010)

26. Does the home page… PetSmart.com Petco.com
introduce a range of products, illustrating the breadth of the store? no no
make the search function easy to find? yes yes
display off-line contact information? no yes
Does the navigation… PetSmart.com Petco.com
meet user expectations by including pet type? yes yes
provide access to ecommerce functions? yes yes
change seasonally? no no
incorporate links to sales, specials, or other product categories? yes yes
Table 10.3: Positioning the criteria as questions allows readers to compare and contrast the two sites quickly, and
hints at the desired approach.
lan
the
for
The
app
sm
Edw
Tuf
mo
tion
Sm
com
face
com
Ty
General
HealthyPets.com
(Brown, 2010)

27. face design for the we
comparing page layou
Types of compar
While most of my com
data, you can attempt
make.The data can be
ing whether a site me
descriptive, going into
• Yes-NoValues: You
analyses on infomer
is lined up with “ot
the product gets a c
an X, to show you h
comes to web sites,
most effective for co
whether a set of we
In such a compariso
between the compe
• Scores: Some comp
in different criteria.
General
Specialized
Commerce
Content
HealthyPets.com
PetTurtle.com
LucytheWonderDog.com
DrsFosterSmith.com
PetSmart.com
PETCO.com
Yahoo! Pets
1800PetMeds.com
StuffForPugs.com
Figure 10.5: A comparative two-by-two establishes a simple framework
for comparing a handful of web sites. Such an approach offers worthwhile (Brown, 2010)

28. Kasutatud allikad
• Brown, D. M. (2010). Communicating Design: Developing Web Site
Documentation for Design and Planning. Berkley, CA: New Riders.
• Cooper, A., Reimann, R., & Cronin, D. (2007). About Face 3: The Essentials of
Interaction Design. Indianapolis, IN: Wiley Publishing, Inc.
• Leinonen, T., Toikkanen, T., & Silvfast, K. (2008). Software as Hypothesis:
Research-Based Design Methodology. In Proceedings of the Tenth Anniversary
Conference on Participatory Design 2008 (pp. 61–70). Indianapolis, IN:
Indiana University.

29. Fotod
• othree: ZOOM H5, https://www.flickr.com/photos/othree/15788446592/

30. See materjal on avaldatud Creative Commons Autorile viitamine–Jagamine
samadel tingimustel 3.0 Eesti litsentsi alusel. Litsentsi terviktekstiga tutvumiseks
külastage aadressi http://creativecommons.org/licenses/by-sa/3.0/ee/
Hans Põldoja
hans.poldoja@tlu.ee
IFI6094.DT Kasutajakeskse disaini meetodid
https://ifi6094.wordpress.com
Digitehnoloogiate instituut
Tallinna Ülikool