29
USER EXITUS USER EXITUS USER EXITUS Nenechte své návštěvníky odcházet Twitter: @jirikomar Jiří Komár 21.5.2011 BarCamp Ostrava
USER EXITUSUSER EXITUSUSER EXITUS
Nenechte své návštěvníky odcházet
Twitter: @jirikomar
Jiří Komár
21.5.2011 BarCamp Ostrava
Proč nám uživatelé odcházejí?
Pokud už najdete odkaz na přechod do košíku. Pojmenování odkazu vás určitě zaskočí. electroworld.cz
Protože to po nich „sami“ chceme :)
Kde se stala chyba?
● Myslíme za klienta
– Zadání je často naprosto špatně
– Neopisujeme staré řešení, děláme nové a lepší
● Učíme se z chyb jiných● Nespoleháme se na grafické cítění programátora (někdy ani grafika)● Snažíme se dělat věci UX
Základní pojmy
● UX (user experience) – uživatelský prožitek● UI (user interface) – uživatelské rozhraní● IxD (Interaction design) – interakční design● Usability – použitelnost, neplést s přístupností - Accessibility● User testing – uživatelské testování
UX je vše a zároveň nic
● Myslíme na potřeby uživatele● Soustředíme se na měřitelné i neměřitelné faktory● Detaily rozhodují o úspěchu nebo zatracení● Design bez funkčnosti je na nic
Pojmy: flow
UI a interakční design
● Uživatelské rozhraní tvoříme dle znalostí uživatele● Uživatel musí vždy vědět co příjde● Čím hlouběji rozhraní rozpracujeme, tím lepší bude prožitek● 80-20 platí i zde
Pojmy: pozitivní stereotypy, návrhový vzory, mentalní modely
Poznáváme svého uživatele
Analýza webu a potřeb uživatelů● Kvalitativní průzkum● Kvantitativní průzkum
● Vytvoříme si personu/y daného projektu
Poznáváme svého uživatele
Kvalitativní průzkum● Etnografický rozhovor● Hloubkové rozhovory a focus group
Poznáváme svého uživatele
Kvantitativní průzkum● Ankety● Dotazníky● Hodnocení
Poznáváme svého uživatele
Fáze navrhování webu
Card sorting (třídění kartiček)● Tvoříme strukturu (celého webu, určitého prvku) ● Uživatel, zadavatel, designer● Uvědomíme si potřeby a priority uživatele● Nástroje: tužka, malé papírky, nůžky, tabule
Fáze navrhování webu
Sketching (skicování)● Rychlá tvorba přímo s klientem● V úvodní fázi projektu dostačující● Skicy nám pomůžou vytvořit wireframe● Nástroje: tužka a dostatek papíru
Fáze navrhování webu
Wireframe (drátěná kostry webu)● Ušetří nám velké starosti● Udělá radost: grafikovi, programátorům● Popisuje rozmístění prvků na webu● Nástroje: Axure RP, WireframeSketcher,
Online nástroje: Balsamiq, Iplotz, Cacoo
Fáze navrhování webu
Tvorba interaktivních prototypů● Pokud je wireframe málo● Můžeme otestovat na uživatích nebo provést A/B testování● Lze použít místo psané specifikace● Lze vytvořit skutečnou aplikaci● Nástroje: Axure RP, Balsamiq, HTML a CSS
Fáze navrhování webu
Stránka: 20
Testování webu● Testujme pravidelně (wireframes, prototypy, grafické návrhy, web)● Typy testování
– Teplotní mapy, nahrávání obrazovky, A/B testování, MVT
– Vzdálené testování
– Moderované uživatelské testování
Fáze navrhování webu
Teplotní mapy (heatmap)
Nástroje: mYx, CrazyEgg, userfly, ClickTale
A/B testování
Nástroje: Google Website Optimizer
Moderované uživatelské testování● Do testu vybíráme obyčejné uživatele, ne pracovníky firmy● Testujeme na 3-6 uživatelích● Před testem sestavíme scénář uživatelského testování● Při testu nutíme uživatele uvažovat nahlas● Testování nahráváme nebo si děláme poznámky● Z poznámek vypracujeme výstupní analýzu, tu předáme k dalšímu
zpracování● Hledáme chyby v použitelnosti a ne v aplikaci● Každý uživatel je jiná osobnost
Zajímavé odkazy● Jakob Nielsen web http://www.useit.com/● Blog s UX, UI tématikou http://www.uxbooth.com/● Knihy s UX, UI tématikou http://www.rosenfeldmedia.com/● Česká UX komunita http://www.sigchi.cz/● Aplikace pro tvorbu wireframes a prototypů http://www.axure.com/● UX magazín http://www.uxmag.com/
