Uporabniški vmesniki - Vzorci UI & UX - PDF

Uporabniški vmesniki Vzorci UI & UX Niko Lukač UI vs UX Spomnimo se naslednjih bistvenih razlik: Vzorci UI & UX povzemajo dobre (in slabe) prakse uporabe različnih gradnikov in tehnik za izboljšavo uporabniškega vmesnika....

Uporabniški vmesniki Vzorci UI & UX Niko Lukač UI vs UX Spomnimo se naslednjih bistvenih razlik: Vzorci UI & UX povzemajo dobre (in slabe) prakse uporabe različnih gradnikov in tehnik za izboljšavo uporabniškega vmesnika. 2 Vzorci UI Lahko jih razdelimo na naslednje glavne kategorije: 1. Uporabniški vhod Forma, namestitveni čarovnik, glasovanje... 2. Navigacija Zavihki, menuji, pomik po hierarhiji... 3. Obdelava podatkov Tabele, slike, iskanje, grafikoni... 4. Družbena interakcija Dosežki, lestvice, reakcije... 5. Vodenje uporabnika Namigi, lena registracija... 3 Vzorci UI - 1. Uporabniški vhod Forme: Razlaga postopka: Merilnik moči gesla Čarovnik WYSIWYG Merilnik popolnosti Dobre privzete vrednosti Vgrajeno polje za pomoč Vhodne povratne informacije Zapolnjene praznine (pri formi) Vpliv skupnosti: Bližnjice na tipkovnici Plačanje za promocijo Samodejno shranjevanje Glasovanje za promocijo Graditelj pravil (npr. iskalnik) Označevanje in poročanje Povleči in spusti Ocenjevanje vsebine (npr. Predogled Amazon) Razveljavi 4 Vzorci UI - 1. Uporabniški vhod - Forme Merilnik moči gesla Dobre privzete vrednosti (npr. prepoznavanje lokacije uporabnika in časovnega pasu) 5 Vzorci UI - 1. Uporabniški vhod - Forme Vhodne povratne vrednosti Povleči in spusti 6 Vzorci UI - 1. Uporabniški vhod - Razlaga postopka Čarovnik Merilnik popolnosti 7 Vzorci UI - 1. Uporabniški vhod - Vpliv skupnosti Glasovanje za promocijo Označevanje in poročanje 8 Vzorci UI - 2. Navigacija Zavihki Pomik po hierarhiji – Obvestila Meniji – Drobtine (angl. breadcrumbs) – Spustni (dropdown) – Domača povezava – Kontekstni (context) – Bližnjice – Povleči za osvežitev Vsebina – Thumbnail – Vrtiljak (angl. Carousel) – Karte – Koledar dogodkov – Paginacija (angl. pagination) – Oblak oznak (angl. tag cloud) 9 Vzorci UI - 2. Navigacija - Vsebina Vrtiljak (angl. Carousel) Karte 10 Vzorci UI - 2. Navigacija - Vsebina Paginacija Oblak oznak 11 Vzorci UI - 2. Navigacija - Pomik po hierarhiji Breadcrumbs Povleči za osvežitev 12 Vzorci UI - 3. Obdelava podatkov Tabele Grafikoni – Filtriranje – Črtni – Histogram Iskanje – Raztreseni – Filtriranje (napredno iskanje) – itd. – Autocomplete Prikaz – Prikazna plošča (angl. dashboard) – Polje za kopiranje (angl. copy box) 13 Vzorci UI - 4. Družbena interakcija Ugled Interakcija – Zbirateljski dosežki (angl. – Reakcija achievements) – Seznam dejavnosti (angl. activities) – Lestvica najboljših – Klepet – Pričevanja – Povabi prijatelje – Sledenje (angl. follow) 14 Vzorci UI - 4. Družbena interakcija - Ugled Achievements Lestvica Pričevanja 15 Vzorci UI - 4. Družbena interakcija - Interakcija Reakcija Seznam dejavnosti 16 Vzorci UI - 5. Vodenje uporabnika Vodenje Registacija – Vodič (angl. walkthrough) – Lena registacija (angl. lazy – Namigi (angl. coachmarks) registration) – Vrinjeni namigi – Klasična registracija – Paywall 17 Vzorci UI - 5. Vodenje uporabnika - Vodenje Vodič (angl. walkthrough) Vrinjeni namigi Namigi (angl. coachmarks) 18 Vzorci UI - 5. Vodenje uporabnika - Registracija Lena registracija (angl. lazy registration) – Možna uporaba brez predhodne registracije, – Sama registracija vzame manj časa kot uporaba apliakcije 19 Vzorci UX Lahko jih razdelimo na naslednje glavne kategorije: 1. Kognicija Odpor proti izgubi, pomanjkanje, iluzija kontrole... 2. Igrifikacija Leveli, zgodba (angl. storytelling), nagrade... 3. Percepcija in spomin Pozornost, razumevanje... 20 Vzorci UX - 1. Kognicija Odpor proti izgubi (angl. Kognitivna pristranskost loss aversion) – Iluzija nadzora – Odpor proti izgubi – Pravilo vrha (angl. peak-end rule) – Pristranskost status quo-ju – Radovednost – Pristranskost optimizmu – Pristrasnkost pesimizmu – Sentimentalna vrednost Občutek redkosti – Redkost – Časovna omejitev 21 Vzorci UX - 1. Kognicija - Odpor proti izgubi Odpor proti izgubi Vir: Daniel Kahneman & Amos Tversky 22 Vzorci UX - 1. Kognicija - Odpor proti izgubi Sentimentalna vrednost 23 Vzorci UX - 1. Kognicija - Kognitivna pristranskost Iluzija nadzora 24 Vzorci UX - 1. Kognicija - Kognitivna pristranskost Pravilo vrha (angl. peak-end rule) – Predhodne izkušnje ocenjujemo glede na točki vrha (pozitivno ali negativno) – Časovna komponenta izkušnje se ne upošteva 25 Vzorci UX - 1. Kognicija - Kognitivna pristranskost Pravilo vrha (angl. peak-end rule) - Primer Uber – Uporabnik čaka na prevoz, vmes ga aplikacija na zanimiv način "zabava" z nepotrebnimi informacijami, na tak način Uber prepreči negativni vrh izkušnje 26 Vzorci UX - 1. Kognicija - Kognitivna pristranskost Radovednost 27 Vzorci UX - 1. Kognicija - Občutek redkosti Redkost Časovna omejitev 28 Vzorci UX - 2. Igrifikacija Oblike igre Nagrajevanje – Leveli – Stalne nagrade – Izzivi – Variabilne nagrade – Pripoved zgodbe (angl. – Končanje storytelling) – Hvaljenje – Vklop dodatnih možnosti – Dosežki (achievements) 29 Vzorci UX - 2. Igrifikacija - Oblike igre Pripoved zgodbe (angl. storytelling) 30 Vzorci UX - 3. Percepcija in spomin Pozornost Razumevanje – Redukcija (simplifikacija, npr. – Grupiranje informacij Google search) – Prepoznavanje informacij – Predor (angl. tunneling) – Spomin strukture – Učinek izolacije – Spomin pozicioniranja 31 Vzorci UX - 3. Percepcija in spomin - Pozornost Uporaba predora 32 Vzorci UX - 3. Percepcija in spomin - Pozornost Učinek izolacije 33 Vzorci UX - 3. Percepcija in spomin - Razumevanje Prepoznavanje informacij (prej kot odpoklic iz spomina) 34 Vzorci UX - 3. Percepcija in spomin - Razumevanje Spomin strukture (angl. memory anchoring) 35 Vzorci UX - 3. Percepcija in spomin - Razumevanje Spomin pozicioniranja – Zapomnimo si izdelke iz dolgotrajnega spomina (želje), ter najbolj novejše izbrane izdelke 36 Temni vzorci UX 1. Nedvoumna vprašanja 2. Pretihotapljanje 3. Težki izhod 4. Kršenje zasebnosti 5. Preprečevanje primerjave 6. Napačna usmeritev 7. Skriti stroški 8. Vaba in zamenjava 9. Obtoževanje 10. Skrite reklame 11. Prisilna kontinuiteta 12. Nezaželena obvestila 37 Temni vzorci UX - 1. Nedvoumna vprašanja Ko hitro pogledate, se zdi, da vprašanje sprašuje eno stvar, ko pa pozorno preberete, sprašuje povsem drugo. 38 Temni vzorci UX - 2. Pretihotapljanje Angl. sneak into basket: Poskušate nekaj kupiti, vendar nekje na nakupovalni poti spletno mesto pritihotapi dodaten izdelek v vašo košarico. 39 Temni vzorci UX - 3. Težki izhod Angl. roach motel: Zasnova vam zelo olajša vstop v določeno situacijo, nato pa vam oteži izhod iz nje (npr. naročnina). 40 Temni vzorci UX - 4. Kršenje zasebnosti Angl. privacy Zuckering: Zavedeni ste, da javno delite več informacij o sebi, kot ste jih v resnici nameravali. Tim Jones ga je poimenoval kot poklon ustanovitelju Facebooka Marku Zuckerbergu. 41 Temni vzorci UX - 5. Preprečevanje primerjave Trgovec vam otežuje primerjavo cene artikla z drugim artiklom, zato se ne morete premišljeno odločiti. 42 Temni vzorci UX - 6. Napačna usmeritev Zasnova namerno osredotoča vašo pozornost na eno stvar, da bi odvrnila vašo pozornost od druge. 43 Temni vzorci UX - 7. Skriti stroški Pridete do zadnjega koraka postopka blagajne, le da ugotovite, da so se pojavili nekateri nepričakovani stroški, npr. stroški dostave, davek itd. 44 Temni vzorci UX - 8. Vaba in zamenjava Angl. Bait and switch: Uporabnik namerava narediti eno stvar, vendar se namesto tega zgodi drugačna, nezaželena stvar. – Pritisk X je dejansko sprožilo posodobitev v Win10. 45 Temni vzorci UX - 9. Obtoževanje Angl. confirmshaming: je dejanje obtoževanja uporabnika, da se je odločil za nekaj. 46 Temni vzorci UX - 10. Skrite reklame Oglasi, ki so prikriti kot druge vrste vsebine ali navigacije, da bi vas spodbudili, da jih kliknete. 47 Temni vzorci UX - 11. Prisilna kontinuiteta Ni vam na voljo preprost način spremembe določene funkcionalnosti. Običajnu pri preklicu. 48 Temni vzorci UX - 12. Nezaželena obvestila Izdelek zahteva vašo e-pošto ali dovoljenje družbenih medijev pod pretvezo, da bo uporabljen za želeni rezultat (npr. iskanje prijateljev), nato pa vse vaše stike pošlje v neželeno sporočilo v sporočilu, ki trdi, da ste od vas (SPAM). 49 Viri Splošni UI & UX vzorci (dodatno gradivo): http://ui-patterns.com/ Temni vzorci UX https://www.darkpatterns.org/ 50