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 :)

Zastrašit uživatele je strašně jednoduché.pejsek-in.cz

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/

Čas na dotazy

@jirikomar

Děkuji za pozornost

komar.jiri@gmail.com