User Experience v praxi

User Experience v praxi

5.6. 2012


Jiří Komár

Co je to vlastně UX?


5.6.2012

UX je všechno


5.6.2012

• • • • • •


Nalezitelnost Užitečnost Důvěryhodnost Použitelnost Potřebnost Přístupnost

5.6.2012

flow User Experience v praxi

5.6.2012

O „Flow“ můžeme rychle přijít


5.6.2012

Pokud už najdete odkaz na košík, asi na něj nekliknete electroworld.cz User Experience v praxi

5.6.2012

Přihlášení a hledání bylo dokonale zamaskováno megastreet.cz User Experience v praxi

5.6.2012

Určitě tam ty peníze pošlu blackcomb.cz User Experience v praxi

5.6.2012

Jak vložit do košíku? zoohit.cz User Experience v praxi

5.6.2012

I pěkné věci můžou být špatně ceskasporitelna.cz User Experience v praxi

5.6.2012

Co tedy dělat a co ne? • • • • •

Uživatelské rozhraní tvoříme dle znalostí našich uživatelů Neopisujeme staré řešení, děláme nové a lepší Učíme se z chyb jiných Soustředíme se na kritické místa aplikace ‐ 20% Pojmy: pozitivní stereotypy, návrhový vzory, mentální modely


5.6.2012

Poznáváme svého uživatele


5.6.2012

Poznáváme svého uživatele Analýza webu a potřeb uživatelů • Kvantitativní průzkum • Kvalitativní průzkum


5.6.2012

Poznáváme svého uživatele Kvalitativní průzkum • Etnografické rozhovory • Hloubkové rozhovory a focus group • Vytvoříme si personu/y


5.6.2012


5.6.2012


5.6.2012


5.6.2012


5.6.2012


5.6.2012

Poznáváme svého uživatele Kvantitativní průzkum • • • •

Webová analytika Ankety Dotazníky Hodnocení


5.6.2012

Navrhujte web správně


5.6.2012

Card sorting (třídění kartiček) • • • •

Tvoříme strukturu (celého webu, určitého prvku) Uživatel, zadavatel, designer Uvědomujeme si potřeby a priority uživatele Nástroje: tužka, malé papírky, tabule


5.6.2012

Sketching (skicování) • • • •

Rychlý návrh obrazovek a nabídek Vhodné v rané fázi projektu Skicy nám pomůžou vytvořit wireframe Nástroje: tužka a hodně papíru


5.6.2012

Wireframe (drátěné kostry webu) • • • •

Ušetří nám velké starosti (čas, peníze) Popisuje rozmístění prvků na webu Nechte to raději na profesionálech  Nástroje: Axure RP, Balsamiq, Cacoo


5.6.2012


5.6.2012


5.6.2012

Tvorba interaktivních prototypů • • • • •

Pokud je wireframe málo Můžeme otestovat na uživatelích nebo provést A/B testování Lze použít místo psané specifikace Lze vytvořit funkční aplikaci 1:1 Nástroje: Axure RP, Balsamiq, HTML a CSS


5.6.2012

Testování webu • Testujeme pravidelně (wireframe, prototyp, design, web) • Typy testování ‐ Teplotní mapy, nahrávání obrazovky, A/B testování, MVT ‐ Vzdálené testování ‐ Moderované uživatelské testování


5.6.2012

Teplotní mapy (heatmap)

Nástroje: mYx, CrazyEgg, userfly, ClickTale User Experience v praxi

5.6.2012

A/B testování

Nástroje: Google Website Optimizer User Experience v praxi

5.6.2012

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, ani v uživatelích • Každý uživatel je jiná osobnost • • • • • •


5.6.2012

5 nejčastějších chyb internetových obchodů • • • • •

Velké množství produktů Malé fotky a špatný popis produktů Špatná navigační architektura webu Zbytečně složitý objednávkový proces Špatná práce s marketingovými nástroji (E‐mail marketing, Google Analytics, Sociální sítě, Cross‐selling, Up‐selling)


5.6.2012

Děkuji za pozornost Čas na dotazy @jirikomar [email protected]


5.6.2012

User Experience v praxi

Recommend Documents