võti tulevikku 2017 - ui / ux disain kellele ja miks?
TRANSCRIPT
![Page 1: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/1.jpg)
Pub
licP
ublic
UI/UX disainMis, kuidas ja miks?Andres KostivTieto EstoniaKasutusmugavuse (UX) disainer7. Märts 2017.a.
![Page 2: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/2.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
2
Kuidas mina UX disaineriks sain?
![Page 3: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/3.jpg)
Pub
licP
ublic
Disainimõtlemine
3
![Page 4: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/4.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Disainimõtlemine – Hollandi jalgrattad
![Page 5: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/5.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
5
Disainmõtlemise neli etappi
![Page 6: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/6.jpg)
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
![Page 7: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/7.jpg)
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?
![Page 8: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/8.jpg)
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
![Page 9: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/9.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Disainimõtlemine - Tarni• Tagasiside kogumine• Vaadata millised
lahendused jäävad toimima
• Töö üle andmine kliendile• Muudatuste juhtimise
toetamine
![Page 10: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/10.jpg)
Pub
licP
ublic
Digitaalne teenusedisain
10
![Page 11: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/11.jpg)
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
![Page 12: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/12.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Lõppkasutajate intervjueerimine• Teada saada rohkem
kasutusharjumuste kohta• Esitada palju avatud
küsimusi• Max 45. min intervjuu
![Page 13: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/13.jpg)
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
![Page 14: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/14.jpg)
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
![Page 15: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/15.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Isikutüübid e. persoonad
![Page 16: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/16.jpg)
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?
![Page 17: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/17.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Töötoad - Kliendikogemuse teekond
• Kokkupuuted teenusega• Kanalite kaupa• Kokkupuudete vahelised
seosed• Persoonade kesksed• Nagu “filmistseenid”
teenusega kokkupuutel
![Page 18: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/18.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Kliendikogmuse teekonna kolm suurt etappi
© Marc Stickdorn
Teenuse - eelne Teenuse - ajal Teenuse - järgne
![Page 19: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/19.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
19
Praktiline ülesanne
![Page 20: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/20.jpg)
Pub
licP
ublic
Kasutajakogemuse (UX) disain
![Page 21: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/21.jpg)
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
![Page 22: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/22.jpg)
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
![Page 23: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/23.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
24
Mis kasu on UX disainist IT arenduses?
• UX disain on nagu “kindlustus” enne programmeerimist
![Page 24: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/24.jpg)
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
![Page 25: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/25.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Prototüüpimine• Mustvalged
mitteprogrammeeritud kiirprototüübid
• Kõigepealt mobiilivaade ja siis arvutivaade
• Kaasata arendajaid nõu andma
![Page 26: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/26.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
27
Prototüüpimise tööriistad
![Page 27: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/27.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
28
Praktiline ülesanne
![Page 28: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/28.jpg)
Pub
licP
ublic
UI disain
29
![Page 29: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/29.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Mis on disain?
Christoph Niemann
![Page 30: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/30.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Disain kui info vahendaja
![Page 31: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/31.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Disain kui info vahendaja
![Page 32: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/32.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Disain kui info vahendaja
“Liiga abstraktne” Täitsa paras “Liiga ehtne”
![Page 33: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/33.jpg)
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
![Page 34: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/34.jpg)
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
![Page 35: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/35.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
36
Disaini pragmaatika• Ajatu ja puhas disain• Elegants on vulgaarsuse
vastandiks• Vastutustunne
![Page 36: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/36.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
37
Tasuta disainimise spikker - PDF raamat
Massimo Vignelli -üks modernse disaini rajajatestvignelli.com/canon.pdf
![Page 37: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/37.jpg)
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.
![Page 38: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/38.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
39
Kuidas kasutajaliidese disaini tehakse?
Artboardid
![Page 39: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/39.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
40
Kasutajaliidese disainimise tööriistad
![Page 40: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/40.jpg)
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
![Page 41: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/41.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
42
Efektiivsus - disaini publitseerimine koodina programmeerijale - Zeplin
![Page 42: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/42.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Mis homme saab?
![Page 43: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/43.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
44
Homne iseteenindus:Parim interaktsioon on see kui ei ole interaktsiooni.
![Page 44: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/44.jpg)
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
![Page 45: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/45.jpg)
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
![Page 46: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/46.jpg)
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
![Page 47: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/47.jpg)
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
![Page 48: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/48.jpg)
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
![Page 49: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/49.jpg)
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
![Page 50: Võti tulevikku 2017 - UI / UX disain kellele ja miks?](https://reader036.vdocuments.site/reader036/viewer/2022062401/58ee52781a28ab354d8b4677/html5/thumbnails/50.jpg)
Pub
lic
© Tieto Corporation
Pub
lic
Küsimusi?
End