Zapojte uživatele do návrhu webu
description
Transcript of Zapojte uživatele do návrhu webu
![Page 1: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/1.jpg)
Zapojte uživatele do návrhu webu
Tomáš Ludvík
![Page 2: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/2.jpg)
Představení
● Webdesigner
• Webové aplikace
• Mobilní aplikace
● UX specialista
![Page 3: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/3.jpg)
• Tvorba obchodně úspěšných webů
• Uživatelský výzkum
• Internetový marketing
• Vzdělávací činnost
• UX divize Dobrého webu
• Člen mezinárodní aliance UX agentur
• Přes 500 specialistů ve 30 zemích světa
• Sdílíme a využíváme know-how
![Page 4: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/4.jpg)
A co vy?
![Page 5: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/5.jpg)
Obsah
● Co je UX?
● Uživatelský výzkum
● Metody
![Page 6: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/6.jpg)
Co je UX?
● Česky “uživatelský prožitek”
● Vjemy a výsledné reakce vznikající na základě použití produktu, systému nebo služby.
![Page 7: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/7.jpg)
Co je User Experience Design?
![Page 8: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/8.jpg)
Proces návrhu webu (UXD)
![Page 9: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/9.jpg)
Uživatelský výzkum
![Page 10: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/10.jpg)
Kdy jste naposledy dělali výzkum?
![Page 11: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/11.jpg)
Jak nejlépe poznáte své uživatele?
• Pomocí dotazníků a rozhovorů
• Skrze výstupy analytických nástrojů
• Testováním návrhů
• Nezávislým pozorováním
![Page 12: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/12.jpg)
Kvalitativní vs. kvantitativní
![Page 13: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/13.jpg)
Proces UXD a metody výzkumu
Discover Define Design (IA, UI, ID) Evaluate/Evolve
• Dotazníky• Rozhovory• Focus group• Uživatelské testování
použitelnosti webu• Webová analytika
• Persony• Customer
journey
• Card sorting • Treejack• Design Workshop
• Uživatelské testování použitelnosti prototypu
• A/B testování• Eyetracking• Webová analytika
![Page 14: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/14.jpg)
Kontinuální proces UXD
![Page 15: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/15.jpg)
Rozhovory
Jak jste si vybírala svoji ledničku?
![Page 16: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/16.jpg)
Jaký problém klientovi vyřeší
● Potřebuji poznat své uživatele
● Odpověď na otázku „jací jsou“
![Page 17: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/17.jpg)
Co zjistíme
● Motivace
● Potřeby
● Očekávání
● Zkušenosti
● Názory
![Page 18: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/18.jpg)
Jak to probíhá?
● Individuální moderované sezení v labu
● Moderátor rozvíjí hlavní témata
● 8—10 lidí za každou cílovku
![Page 19: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/19.jpg)
Výstup
● Sledování v pozorovací místnosti
● Poznatky ke každé cílové skupině
● Profily uživatelů nebo persony
![Page 20: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/20.jpg)
Kontextové šetření
● Individuální moderované sezení v přirozeném prostředí uživatele – doma, v kanceláři
● Chci vědět, jak a proč lidé pracují s mým systémem
● Výstup• Scénáře užití (use-casy)
• Poznatky o chování uživatelů
• Fotky prostředí
• Profily uživatelů nebo persony
![Page 21: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/21.jpg)
Focus group
Jaký by měl být ideální parfém?
![Page 22: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/22.jpg)
Jaký problém klientovi vyřeší
● Chci získat názor uživatelů na nějaký můj nápad
● Potřebuji získat nápady, jak řešit nějaký problém
![Page 23: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/23.jpg)
Co zjistíme
● Co si lidé myslí o nějakém tématu či nápadu
● Jaké mají nápady na řešení nějakého problému
![Page 24: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/24.jpg)
Realizace
● Hromadné moderované sezení v labu
● Moderátor postupně přednáší témata a respondenti se k nim vyjadřují
● Velkou roli hraje skupinová dynamika
● 4—10 uživatelů za cílovou skupinu
![Page 25: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/25.jpg)
Výstup
● Odpovědi respondentů na otázky
![Page 26: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/26.jpg)
Nevýhody
● Nelze poznat jednoho člověka do hloubky
● Nelze sledovat, jak pracuje se systémem
● Chybí kontext
● Pro uživatelský výzkum nevhodné
![Page 27: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/27.jpg)
Uživatelské testování
Ukažte nám, jak si vybíráte a objednáváte
školení
![Page 28: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/28.jpg)
Jaký problém klientovi vyřeší
● Chci zlepšit použitelnost systému
![Page 29: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/29.jpg)
Co zjistíme
● Odhalíme chyby v použitelnosti systému
● Zjistíme, jak uživatelé postupují při řešení problémů
● Vhodné i pro testování interaktivních prototypů
● http://www.lupa.cz/clanky/uzivatelske-testovani-navrhu-webu/
![Page 30: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/30.jpg)
Jak to probíhá?
● Hypotézy
● Nábor respondentů
● Scénář
● Moderované uživatelské testování
● Výsledná zpráva a prezentace výsledků
![Page 31: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/31.jpg)
Jak probíhá testování?
● Individuální moderované sezení v labu
● Moderátor dává respondentovi úkoly a sleduje, jak je plní
● Během plnění úkolů klade doplňující dotazy a získává tak vhled do chápání respondenta
● Respondent nahlas přemýšlí
● 6 lidí za cílovou skupinu
![Page 32: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/32.jpg)
Výstup
● Sledování v pozorovací místnosti
● Report se soupisem odhalených chyb v použitelnosti a doporučením řešení
● Prezentace reportu u klienta
● Záznamy sezení
![Page 33: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/33.jpg)
Pozorování v přímém přenosu
![Page 34: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/34.jpg)
Respondenti
![Page 35: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/35.jpg)
Card sorting
Kam by to tak mohlo patřit?
![Page 36: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/36.jpg)
Jaký problém klientovi vyřeší
● Chci vědět, jak by lidé uspořádali obsah webu, který chystám
![Page 37: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/37.jpg)
Co zjistíme
● Do jakých skupin by lidé obsah roztřídili
● Zda lidé rozumí názvům a co pod nimi očekávají
![Page 38: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/38.jpg)
Jak to probíhá?
● Individuální moderované sezení v labu
● Otevřené – lidé vytváří libovolné kategorie
● Uzavřené – lidé třídí obsah do daných kategorií
● 6—8 respondentů za cílovou skupinu
![Page 39: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/39.jpg)
Výstup
● Seznam skupin, do kterých lidé obsah třídili nejčastěji
● Komentář k tomu, co pod skupinami lidé očekávali
● Poznatky o tom, kterým pojmům lidé nerozuměli
![Page 40: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/40.jpg)
Kvantitativní Card sorting
● Online přes nástroj Optimalsort
● Otevřené – lidé vytváří libovolné kategorie
● Uzavřené – lidé třídí obsah do daných kategorií
● Cca 50 respondentů na cílovku
● Výstup
• Seznam skupin, do kterých lidé obsah třídili nejčastěji
• Demo
![Page 41: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/41.jpg)
Testování struktury - Treejack
![Page 42: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/42.jpg)
Jaký problém klientovi vyřeší
● Chci ověřit, zda se lidé vyznají ve struktuře mého webu
![Page 43: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/43.jpg)
Co zjistíme
● Ověříme, zda lidé najdou správnou cestu k vyřešení definovaných problémů
● Zjistíme, které položky struktury lidi odvádějí na špatnou cestu
![Page 44: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/44.jpg)
Jak to probíhá?
● Definujeme otázky, které chceme testem ověřit
● Sestavíme testovací otázky
● Vytvoříme v Treejacku test
● Přes Webvýzkum test pošleme respondentům
● Cca 50 respondentů na cílovku
● Demo respondent
![Page 45: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/45.jpg)
Výstup
● Vizualizace cest respondentů strukturou
● Identifikace matoucích míst ve struktuře
● Demo výsledky
![Page 46: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/46.jpg)
Design Studio - workshop
![Page 47: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/47.jpg)
Jaký problém klientovi vyřeší
● Vygenerovat velké množství nápadů v rychlém sledu, ne za méně než 3 hodiny a ne více než 10 hodin.
● Dát myšlenkám a nápadům jasnou formu, nad kterou je možné diskutovat
● Porozumět základním věcem, příležitostem a vyjasnit si problematická místa
![Page 48: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/48.jpg)
Co získáme
● Díky kolaborativnímu sezení vytvořit solidní návrhy
![Page 49: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/49.jpg)
Jak to probíhá?
● Hromadné moderované sezení
● Moderátor představí metodu, cíle workshopu a cílovou skupinu
● Respondent kreslí 8 minut sám,
● Pak proběhne týmová prezentace (každý 3 minuty)
● Opakuje se 2x
● Poté 2 týmové iterace a prezentace všech ýmů
● Alespoň 15 účastníků (skupinky po 4)
![Page 50: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/50.jpg)
Výstup
● Velké množství nápadů a jejich postup zlepšování
● Dobrý podklad pro návrh uživatelského rozhraní
![Page 51: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/51.jpg)
Otázky?
![Page 52: Zapojte uživatele do návrhu webu](https://reader034.fdocument.pub/reader034/viewer/2022052601/559524bf1a28abb9318b4741/html5/thumbnails/52.jpg)
Děkuji za pozornost
Tomáš LudvíkHead of User Experience