Võti tulevikku 2017 - UI / UX disain kellele ja miks?

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

Kuidas mina UX disaineriks sain?

Disainimõtlemine

Disainimõtlemine – Hollandi jalgrattad

Disainmõtlemise neli etappi

Disainimõtlemine - Avasta

• Õppida sihtrühma vajadusi tõeliselt tundma

• Jälgida olemasoleva lahenduse kasutatavust

• Koguda igasuguseid vihjeid probleemile

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?

Disainimõtlemine - Arenda• Ideede genereerimine

• Võimalike lahenduste leidmine mistahes viisil

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

kohene lõppkasutajate peal testimine

Disainimõtlemine - Tarni• Tagasiside kogumine• Vaadata millised

lahendused jäävad toimima

• Töö üle andmine kliendile• Muudatuste juhtimise

toetamine

Digitaalne teenusedisain

Mis on digitaalne teenusedisain?• Teenuse planeerimine ning

organiseerimine:• inimesed• digikanalid • kommunikatsioon

• Eesmärk pakkuda klientidele parimat teenuse kasutuskogemust

Lõppkasutajate intervjueerimine• Teada saada rohkem

kasutusharjumuste kohta• Esitada palju avatud

küsimusi• Max 45. min intervjuu

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

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

Isikutüübid e. persoonad

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

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

• Mured ja rõõmud?

Töötoad - Kliendikogemuse teekond

• Kokkupuuted teenusega• Kanalite kaupa• Kokkupuudete vahelised

seosed• Persoonade kesksed• Nagu “filmistseenid”

teenusega kokkupuutel

Kliendikogmuse teekonna kolm suurt etappi

Teenuse - eelne Teenuse - ajal Teenuse - järgne

Praktiline ülesanne

Kasutajakogemuse (UX) disain

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

• kergemini kasutatavamaks• kasutusel nauditavamaks

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

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

Mis kasu on UX disainist IT arenduses?

• UX disain on nagu “kindlustus” enne programmeerimist

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

Prototüüpimine• Mustvalged

mitteprogrammeeritud kiirprototüübid

• Kõigepealt mobiilivaade ja siis arvutivaade

• Kaasata arendajaid nõu andma

Prototüüpimise tööriistad

Praktiline ülesanne

UI disain

Mis on disain?

Christoph Niemann

Disain kui info vahendaja

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

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

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

Disaini pragmaatika• Ajatu ja puhas disain• Elegants on vulgaarsuse

vastandiks• Vastutustunne

Tasuta disainimise spikker - PDF raamat

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

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

Kuidas kasutajaliidese disaini tehakse?

Artboardid

Kasutajaliidese disainimise tööriistad

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

Efektiivsus - disaini publitseerimine koodina programmeerijale - Zeplin

Mis homme saab?

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

Chatbotid veebilehtele ja äppidele lisaks

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

ÕS abiline• KiK äpp

• H&M• Baseerub sisuarhitektuuril

ja KKK (FAQ) iseõppimisel

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

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

KKK (FAQ) iseõppimisel

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

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

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

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

Küsimusi?

Võti tulevikku 2017 - UI / UX disain kellele ja miks?

Design

Marketing Miks

Allan Randlepp: Miks just nüüd?

MIKS JA KELLELE? ANNETAJALE ANNETUSE SAAJALE Annetamine... · Rahandusministeeriumi maksupoliitika osakond Voldiku on kujundanud äriajakiri Saldo Voldik on trükitud Siseministeeriumi

MARKETING MIKS - HOTELSKI PROIZVOD.pdf

Marketing Miks Usluznih Organizacija - Ij

Miks on vaja reegleid ?

Econo Miks

Peipsiveere programm Kellele ja miks? Birgit Maasing 21.11.2013

EELKOOL - kellele ja millistel tingimustel? 2013/Eelklass_millis… · EELKOOL - kellele ja millistel tingimustel? Tiiu Püss Valga Põhikooli õppejuht 25.09.2013 1

Kutse süsteem – kellele ja miks?€¦ · • Olla tugistruktuuriks haridussüsteemile -kutsealasele tegevusele suunatud õppe sisu ja kvaliteet vastab tööturul nõutavale •

BeWise loeng: Hegle Sarapuu "Miks on UX oluline ja kellele see korda läheb?" @TTÜ 21.10.2015

ÕPPIMINE DRAAMAS – kellele, miks ja kuidas? · Teatri- ja draamaõpetus •Teatriõpetus on teatri kui institutsiooni ajalool ja teatri tänapäevastel toimimispõhimõtetel ning

"Miks puhkevad sõjad?"

KUJUNDAV HINDAMINE MIS KELLELE MIKS seminar2013/2... · arengu eest, püstitab eesmärke, suudab planeerida, jälgib oma tegevust ja motiveerib ennast ise. ... toetamine • õppija

Miks osta elektriauto

Miks E-õpe

Miks igračaka 1.13

TARTU HERBERT MASINGU KOOLI - Riigi Teataja · „Parim viis tulevikku ennustada on ise tulevikku kujundada. Alan Kay TARTU HERBERT MASINGU KOOLI ARENGUKAVA 2015–2017 TARTU 2015

Chel miks mart2013

Isikukaitsevahend: investeering tulevikku