user experience v praxi

User Experience v praxi

5.6. 2012


Jiří Komár

Co je to vlastně UX?

User Experience v praxi 5.6.2012

UX je všechno



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

5.6.2012


flow

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

5.6.2012


Přihlášení a hledání bylo dokonale zamaskovánomegastreet.cz

5.6.2012


Určitě tam ty peníze pošlublackcomb.cz

5.6.2012


Jak vložit do košíku?zoohit.cz

5.6.2012


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

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


Analýza webu a potřeb uživatelů

• Kvantitativní průzkum• Kvalitativní průzkum


5.6.2012


Kvalitativní průzkum

• Etnografické rozhovory• Hloubkové rozhovory a focus group

• Vytvoříme si personu/y


5.6.2012


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


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


Nástroje: mYx, CrazyEgg, userfly, ClickTale

Teplotní mapy (heatmap)

5.6.2012


Nástroje: Google Website Optimizer

A/B testování

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

5.6.2012

[email protected]

user experience v praxi

Documents