Pub

licP

ublic

UI/UX disainMis, kuidas ja miks?Andres KostivTieto EstoniaKasutusmugavuse (UX) disainer7. Märts 2017.a.

Pub

lic

© Tieto Corporation

Pub

lic

2

Kuidas mina UX disaineriks sain?

Pub

licP

ublic

Disainimõtlemine

3

Pub

lic

© Tieto Corporation

Pub

lic

Disainimõtlemine – Hollandi jalgrattad

Pub

lic

© Tieto Corporation

Pub

lic

5

Disainmõtlemise neli etappi

Pub

lic

© Tieto Corporation

Pub

lic

Disainimõtlemine - Avasta

• Õppida sihtrühma vajadusi tõeliselt tundma

• Jälgida olemasoleva lahenduse kasutatavust

• Koguda igasuguseid vihjeid probleemile

Pub

lic

© Tieto Corporation

Pub

lic

Disainimõtlemine - Kirjelda• Probleemi määratlemine

• “kuidas võiks nii teha, et..” küsimus, millele hakatakse disainiprotsessis vastust leidma.

• Ajurünnak tõelise probleemi välja valimiseks

• Millisele probleemine keskendume millega edasi minna?

Pub

lic

© Tieto Corporation

Pub

lic

Disainimõtlemine - Arenda• Ideede genereerimine

• Võimalike lahenduste leidmine mistahes viisil

• Prototüübi valmistamine• Prototüübi valmistamine ja

kohene lõppkasutajate peal testimine

pilt

Pub

lic

© Tieto Corporation

Pub

lic

Disainimõtlemine - Tarni• Tagasiside kogumine• Vaadata millised

lahendused jäävad toimima 

• Töö üle andmine kliendile• Muudatuste juhtimise

toetamine

Pub

licP

ublic

Digitaalne teenusedisain

10

Pub

lic

© Tieto Corporation

Pub

lic

11

Mis on digitaalne teenusedisain?• Teenuse planeerimine ning

organiseerimine:• inimesed• digikanalid • kommunikatsioon

• Eesmärk pakkuda klientidele parimat teenuse kasutuskogemust

Pub

lic

© Tieto Corporation

Pub

lic

Lõppkasutajate intervjueerimine• Teada saada rohkem

kasutusharjumuste kohta• Esitada palju avatud

küsimusi• Max 45. min intervjuu

Pub

lic

© Tieto Corporation

Pub

lic

13

Töövarjuna lõppkasutaja juures• Uuritakse käitumist ja

kogemusi:• Lõppkasutajad• Tugipersonal

• Võimaldab uurijatel märgata hetki, kus tekivad probleemid

• Max 2 tundi korraga

Pub

lic

© Tieto Corporation

Pub

lic

Isikutüübid e. persoonad

• Kasutaja mudel• Tekib kasutajate

vajaduste uurimisest• Sisaldab kasutaja

eesmärke, vajadusi ja huvisid

• Persoonadele tehakse ka “üks päev minu elus” stiilis stsenaariumid

Pub

lic

© Tieto Corporation

Pub

lic

Isikutüübid e. persoonad

Pub

lic

© Tieto Corporation

Pub

lic

Töötoad – Empaatia kaart• Mida klient...

• .. mõtleb ja tunneb?• .. näeb?• .. ütleb ja teeb?• .. kuuleb?

• Mured ja rõõmud?

Pub

lic

© Tieto Corporation

Pub

lic

Töötoad - Kliendikogemuse teekond

• Kokkupuuted teenusega• Kanalite kaupa• Kokkupuudete vahelised

seosed• Persoonade kesksed• Nagu “filmistseenid”

teenusega kokkupuutel

Pub

lic

© Tieto Corporation

Pub

lic

Kliendikogmuse teekonna kolm suurt etappi

© Marc Stickdorn

Teenuse - eelne Teenuse - ajal Teenuse - järgne

Pub

lic

© Tieto Corporation

Pub

lic

19

Praktiline ülesanne

Pub

licP

ublic

Kasutajakogemuse (UX) disain

Pub

lic

© Tieto Corporation

Pub

lic

21

Mis on UX disain?• On teenusedisaini osa• Aitab teha teenuse:

• kergemini kasutatavamaks• kasutusel nauditavamaks

• Tasakaal lõppkasutajate vajaduste, ärivajaduste ning tasuvuse vahel

Pub

lic

© Tieto Corporation

Pub

lic

22

UX disain - kuidas seda tehakse?Kaardistame ärivajadused,

kasutajate isikutüübid ja

rollid

Kaardistame lõppkasutajate

vajadused, kasutajate

isikutüübid ja rollid

Loome veebirakenduse

sisupuu ja joonistame prototüübid

Testime lõppkasutajatega

ja dokumenteerimine

Jah, me testime prototüüpi

lõppkasutajatega enne programmeerimist

Pub

lic

© Tieto Corporation

Pub

lic

24

Mis kasu on UX disainist IT arenduses?

• UX disain on nagu “kindlustus” enne programmeerimist

Pub

lic

© Tieto Corporation

Pub

lic

Maailma kõige lihtsam UX testimine• 15 ülesandega testloo koostamine koos

tooteomanikuga (45 min testsessiooniks)

• Kolm lõppkasutajat per ring• Iga kuu alguses testitakse midagi• Luban, et alati leitakse rohkem probleeme

kui jõutakse ära parandada

• Ühes toas testija koos läbiviijaga. Teises toas projektijuht, tooteomanik, arendaja ja analüütik (vaatavad läbi Skype videolingi). Laual snäkid

• Testijate otsimisel ei pea ‘kreisiks minema’o Personaliosakonnast uurida uusi töötajaid o Kliendihaldurite toredad kliendid ja sõbrad

Pub

lic

© Tieto Corporation

Pub

lic

Prototüüpimine• Mustvalged

mitteprogrammeeritud kiirprototüübid

• Kõigepealt mobiilivaade ja siis arvutivaade

• Kaasata arendajaid nõu andma

Pub

lic

© Tieto Corporation

Pub

lic

27

Prototüüpimise tööriistad

Pub

lic

© Tieto Corporation

Pub

lic

28

Praktiline ülesanne

Pub

licP

ublic

UI disain

29

Pub

lic

© Tieto Corporation

Pub

lic

Mis on disain?

Christoph Niemann

Pub

lic

© Tieto Corporation

Pub

lic

Disain kui info vahendaja

Pub

lic

© Tieto Corporation

Pub

lic

Disain kui info vahendaja

Pub

lic

© Tieto Corporation

Pub

lic

Disain kui info vahendaja

“Liiga abstraktne” Täitsa paras “Liiga ehtne”

Pub

lic

© Tieto Corporation

Pub

lic

Disaini semantika• Otsid suuremat mõtet sellele mida

sa disainimisega proovid parandada• Väldi vulgaarsust:

• ei sobitaks asju mis tegelikult ei peakski sobituma. Nt. Värviratas on abiks.

• Märka disaini enda ümber

Värviratas

Pub

lic

© Tieto Corporation

Pub

lic

35

Disaini süntaktika• “Jumal on detailides”• Mitmete komponentide kokku

sobitamine uuesti ja uuesti sättimisega

• Tüpograafia paigutamine nt. Eesti Päevaleht

• Sõrestikust on disainimisel palju abi

Pub

lic

© Tieto Corporation

Pub

lic

36

Disaini pragmaatika• Ajatu ja puhas disain• Elegants on vulgaarsuse

vastandiks• Vastutustunne

Pub

lic

© Tieto Corporation

Pub

lic

37

Tasuta disainimise spikker - PDF raamat

Massimo Vignelli -üks modernse disaini rajajatestvignelli.com/canon.pdf

Pub

lic

© Tieto Corporation

Pub

lic

Kasutajakogemuse (UX) disain Kasutajaliidese (UI) vs.?

UX disain:• Interaktsioonidisain• Lõppkasutajate vajaduste

intervjuud• Sõrestikud ja prototüübid• Infoarhitektuur• Paigutus• Lõppkasutajatega testimine• Google Analytics

UI disain:• Graafiline disain• Stilistika• Värvid• Illustreerimine• Infograafika• Tüpograafia• Kompositsioonid• Animatsioonid

vs.

Pub

lic

© Tieto Corporation

Pub

lic

39

Kuidas kasutajaliidese disaini tehakse?

Artboardid

Pub

lic

© Tieto Corporation

Pub

lic

40

Kasutajaliidese disainimise tööriistad

Pub

lic

© Tieto Corporation

Pub

lic

41

Kasutajaliidese disainimise efektiivus• Komponentide teek,

taaskasutatavad disainiosad• Valmisjoonistatud asjast

tehakse “sümbol”

• Tehisintellekt disainib peagi efektiivsemalt kui inimene: • Adobe, Wordpress,

Voog jne..

AirBnb disainkomponentide teek Sketchis

Pub

lic

© Tieto Corporation

Pub

lic

42

Efektiivsus - disaini publitseerimine koodina programmeerijale - Zeplin

Pub

lic

© Tieto Corporation

Pub

lic

Mis homme saab?

Pub

lic

© Tieto Corporation

Pub

lic

44

Homne iseteenindus:Parim interaktsioon on see kui ei ole interaktsiooni.

Pub

lic

© Tieto Corporation

Pub

lic

45

Chatbotid veebilehtele ja äppidele lisaks

• Facebook chat• RongiBot  - rongiajad• Õigekeelsussõnarobot –

ÕS abiline• KiK äpp

• H&M• Baseerub sisuarhitektuuril

ja KKK (FAQ) iseõppimisel

Pub

lic

© Tieto Corporation

Pub

lic

46

Assisteerivad kõlarid• Amazon echo• Google home• Sarnane nagu chatbot kuid

juhtimine käib häälega• Baseerub sisuarhitektuuril ja

KKK (FAQ) iseõppimisel

Pub

lic

© Tieto Corporation

Pub

lic

47

Virtuaalreaalsuse UX disainSaab luua uusi kogemusi mis täna pole võimalikud

UI disainimise kaks reeglit:1. Väldi merehaiguse

tekitamist kasutajatel2. Interjaktsioonide

familiaarsus. Vihjeid arhitektuurist ja ruumist.

Video: https://youtu.be/qYfNzhLXYGc

Pub

lic

© Tieto Corporation

Pub

lic

Mis on meeldivat UX disaineri valdkonnas

• Inimesed on väärt meeldivaid ja mugavaid kasutajaliideseid. SINA saad seda mõjutada

• Meeldivates ja mugavates kasutajaliidestes veedetud aeg ei ole maha visatud aeg

• Sa saad näha oma silmadega kas su disainitud kasutajaliidestest saadakase aru

Pub

lic

© Tieto Corporation

Pub

lic

UX valdkonnas alustamiseks soovitan esmalt selgeks teha #1

• Googelda: “How to become a UX/UI designer when you know nothing Lindsay Norman”

• Disaini arvutis 10-100 väikest asja ja küsi tosinalt inimeselt arvamust sinu disaini maitse kohta

• Leia endale UX vallas mentor

Pub

lic

© Tieto Corporation

Pub

lic

UX valdkonnas alustamiseks soovitan esmalt selgeks teha #2• Loe raamatud Amazonist:

o Steve Krug “Don't Make Me Think, Revisited”

o Marc Stickdorn “This is Service Design Thinking”

• Loe disainiarvustusi nt. pixel.ee ja awwwards.com, Eesti disainiauhinnad

• Kuula The UXblog podcaste

Pub

lic

© Tieto Corporation

Pub

lic

Küsimusi?

End