Kasutajaliidese prototüüpimine I: low-fi prototüübid

IFI6207.DT Interaktsioonidisain

low-fi vs hi-fi prototüüpimine

Madala detailsusega (low-fi) prototüübid

• Paberprototüübid

• Sõrestikmudelid (wireframes)

• Jututahvlid (storyboards)

Kõrge detailsusega (hi-fi) prototüübid

• Graafilised kasutajaliidese prototüübid

• HTML/CSS prototüübid

• Läbi klikitavad prototüübid (nn clickthrough prototypes)

Paberprototüüpimine

Snyder, C. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. San Francisco, CA: Morgan Kaufmann.

Paberprototüüpimise eelised

• Kiire ja odav

• Võimaldab probleeme avastada enne koodi kirjutamise juurde asumist

• Ärgitab kasutajaid andma rohkem ja detailsemat tagasisidet

• Aitab arendajatel mõelda loominguliselt

• Võimaldab kaasata kasutajaid ja teisi osapooli disainiprotsessi

• Toetab rühmatööd ja kommunikatsiooni

(Snyder, 2003)

Paberprototüüpimise materjalid

• Valge taustapaber (A3)

• Valge paber (A4)

• Joonistuspliiatsid (0.4 mm, 0.6 mm, 0.8 mm, jne)

• Käärid

• Läbipaistvad kiletaskud

• Kaamera

https://charlot.ee/kirjutusvahendid/pasta--geel--ja-tindipliiatsid/joonestuspliiats-fabercastell-ecco-pigment-06-must/

http://sneakpeekit.com

Protsess

• Disainimustrite ja juhiste järgimine

• Eraldi prototüüpide loomine iga kasutajaloo kohta

• Kasutajaloo täiendamine vajadusel

• Tükkide kokkupanek

• Fotode tegemine erinevatest paigutustest

• Puuduvate kasutajalugude leidmine ja prototüüpide tegemine

Disainimustrid ja kasutajaliidese juhised

Alexander, C., Ishikawa, S., & Silverstein, M. (1977). A Pattern Language: Towns, Buildings, Construction. New York, NY: Oxford University Press.

(Alexander et al., 1977)

(Alexander et al., 1977)

http://ui-patterns.com

http://uipatterns.io

http://www.mobile-patterns.com

https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

http://developer.android.com/design/

Kujunduse võred (grids)

http://getbootstrap.com

http://getbootstrap.com/docs/4.0/layout/grid/

Kasutajalugudest paberprototüüpideks

Algne kasutajalugu

Parandatud kasutajalugu

Olemasolevate kasutajaliideste ümberdisain

Läbi klikitavad paberprototüübid

https://marvelapp.com/pop/

Paberprototüüpide testimine

Ettevalmistused

• Testimisülesannete koostamine

• Testimisülesandega seotud intervjuuküsimuste koostamine

Hea testimisülesanne

• Põhineb persoona eesmärkidel

• Katab toote edukuse jaoks olulisi küsimusi

• On sobiva ulatusega — mitte liiga kitsas või lai

• Omab ennustatavat ja lõplikku hulka lahedusi

• Omab selget lõpp-punkti, mille kasutaja ära tunneb

• Kutsub üles tegevusele, mitte ainult arvamuse avaldamisele

(Snyder, 2003)

Testimisülesande disainimisest

“Years ago, we helped with a study of Ikea.com, looking at how people found products on the site. When we got there, they'd already started the testing process and were using tasks like "Find a bookcase." Interestingly, every participant did exactly the same thing: they went to the search box and typed "bookcase".

Upon our suggestion, the team made a subtle change to the instructions they were giving their participants: "You have 200+ books in your fiction collection, currently in boxes strewn around your living room. Find a way to organize them."

We instantly saw a change in how the participants behaved with the design. Most clicked through the various categories, looking for some sort of storage solution. Few used Search, typing in phrases like "Shelves" and "Storage Systems". And, nobody searched on "bookcase".”

(Jared M. Spool)

(Spool, 2005)

(Snyder, 2003)

Step 6: Write Instructions for Users ~> 139

Table 6.2 Task Instructions: Bad and Good Example

1. Start Excel

2. Go to Tools --) MATLAB functions

3. Create a new funct ion-- f rom the list of installed MATLAB Excel builder components , load "myclass" from "my component ."

4. Select "myprimes" from the list of available methods. Set up inputs /outputs for this function as fo l lows. . . (The original task went on for 2 pages.)

You have a work colleague who created an Excel Add-In called the MATLAB Function Wizard that allows you to access certain MAT- LAB functionality. He's asked you to test it to find all the prime num- bers between 0 and 25.

(Note: The users were familiar with Excel and the product team wasn't testing Excel itself, so the explicit wording of "Excel Add-In" is appropriate.)

Avoid Wording That Reveals the Method

After all those endless meetings where you haggled over the exact wording for a menu option, you shouldn't use that wording in your task instructions because doing so could provide users with unin tended clues. If you ask users to "create a graph" and you have a Create menu with a Graph option in it, you've made the task artificially easy. Use synonyms or a picture instead. (Chapter 13 has more exam- ples of ways in which task instructions can cause a bias.)

A Picture is Worth 1000 Words

Sometimes visual aids come in handy because they let you avoid using specific nouns and verbs- -show the user a graph and say something like, "You want to make one of these for this month's sales results." Figure 6.2 shows an example of a picture we used in a usability study of an e-commerce site.

Millele keskenduda?

• Terminoloogia — kas kasutajad saavad aru kasutajaliidese mõistetest?

• Navigatsioon — kas rakenduses liikumine vastab kasutajate ootustele?

• Sisu — kas pakutakse piisava detailsusega informatsiooni?

• Lehekülje paigutus — kas sisu on paigutatud ootuspäraselt?

• Funktsionaalsus — milliseid täiendavaid funktsionaalsuseid soovitakse?

(Ginsburg, 2009)

Testimissessioon

• Testkasutaja

• “Paper computer”

• Testimise läbiviija

https://www.youtube.com/watch?v=yafaGNFu8Eg

Sõrestikmudelid

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

Balsamiq Mockups

OmniGraffle

(Scott, 2005)

(Richards, 2009)

Sõrestikmudelite eelised

• Kiire ja lihtne viis kasutajaliidese ideede esitamiseks

• Fookus navigeerimisloogikal ja funktsionaalsustel

• Paberprotüüpidest lihtsam teha suuri muudatusi

(Brown, 2011)

Jututahvlid (storyboards)

(ゴスロリ, 2017)

http://www.storyboardthat.com

Viited

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

• Ginsburg, S. (2009). An agile approach to iPhone design: Paper prototyping + user testing. http://www.slideshare.net/ginsburgdesign/an-agile-approach-to-iphone-design-paper-prototyping-user-testing

• Snyder, C. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. San Francisco, CA: Morgan Kaufmann.

• Spool, J.M. (2005). Seven Common Usability Testing Mistakes. http://www.uie.com/articles/usability_testing_mistakes/

• ゴスロリ. (2017). https://commons.wikimedia.org/wiki/File:Storyboard_page.jpg

Fotod

• https://www.flickr.com/photos/snowcrash/21099636

• https://www.flickr.com/photos/adriarichards/4102421296

Hans Põldoja hans.poldoja@tlu.ee

IFI6207.DT Interaktsioonidisain https://ifi6207.wordpress.com

Digitehnoloogiate instituut Tallinna Ülikool