ux & design part 1, 18.1.13

UX & designPeter Hajduček @peterhajducek

Peter Kováč @kovkouwww.unikum.cz

18.1.2013

Vitajte v Chefparade - #1 škola varenia● Čas 14:00 - 17:30● Chefparade obchod je otvorený● Otázky hneď

Obsah

● Kto som● Ako to vyzerá bez UX● Čo je UX● Postup návrhnu webu● Spoločná práca na Chefparade.cz● Ukážka Fusion.sk● Kovkou!

Ako to začalo

2007

rokov

živnosť

2009

UNIKUM Solutions s.r.o.

Čo robím dnes2013

Čo robím dnes

● Footshop○ Nákup od dodávateľov○ Nákup zo skladu pre seba :-)

● Unikum○ Cenové ponuky○ Project management○ Stretnutia s klientmi○ Sny o budúcnosti○ UX design

2013

UX je o tom, aby sa nestávalo toto...

Stará novinka

Doporučujeme

Stará novinka

Doporučujeme

Stará novinka

Google Adsense

Doporučujeme

Stará novinka

Google Adsense

Ďaľšie reštaurácie

Čo hľadáte vy na webe reštaurácie?

Čo hľadám Čo je na webe

Denné menu

EN jazyk

Sezónna ponuka

Interiér. fotky

Otvárac. hod.

Partnerské weby

Stará novinka

Ďalšie reštaurácie

Google Adsense

zdroj: http://goo.gl/d0FLI, doplnené

SEOPPC

Prístupnosť

zdroj:http://goo.gl/nKvpf

zdroj: http://goo.gl/ZJG2U

● nedizajnujeme pre seba● nedizajnujeme pre 1 človeka● rôzni ľudia, rôzne potreby

Stratégia -> Potreby ľudí


● segmentácia


● segmentácia○ Podľa charakteristiky

■ Geografická■ Demografická (18-45, muž, príjem > 1000 €)

○ Podľa reakcie ľudí■ Behaviorálná (rozhodovacia rola, príležitosti

nákupu, hľadané výhody, uživateľský status, miera používania, vernostný status, postoj)

■ Psychografická (http://www.strategicbusinessinsights.com/vals/ustypes.shtml)

○ merateľné, veľké, prístupné, rozlišiteľné

http://www.strategicbusinessinsights.com/vals/ustypes.shtml




● užívateľský výskum○ dotazníky○ rozhovory 1 to 1○ focus groups○ užívateľské testovanie

● persóny

Persóny

Stratégia -> Ciele webu

● business ciele○ je potrebné nájsť rovnováhu medzi príliš úzkymi a

príliš všeobecnými cieľmi● identita značky

○ žiadané asociácie a emociálné reakcie● metriky úspechu


● Príklad http://www.Astradent.cz ○ Zadanie: web pre rebrandovanú zubnú ordináciu○ Business ciele: získať nových klientov○ Identita značky: čisté, priateľské, moderné○ Metriky úspechu: návštevnosť


● Príklad http://www.Astradent.cz ○ Zadanie: web pre rebrandovanú zubnú ordináciu○ Business ciele: získať nových klientov, zlepšiť

image u súčasných○ Identita značky: čisté, priateľské, moderné○ Metriky úspechu: návštevnosť, počet žiadosti o

termín pre vstupnú prehliadku = 100 za 6 mesiacov od spustenia

Požiadavky -> Obsahové

● obsah = text, video, obrázok,...● hrubý odhad rozsahu - dĺžka textu, rozlíšenie

obrázka, videa● kto je zodpovedný za dodanie obsahu● ako často sa bude aktualizovať


● Príklad http://www.Astradent.cz ○ Naše služby○ Kontakt○ Ordinačné hodiny○ Firemná klientela


● Príklad http://www.Astradent.cz ○ Naše služby○ Kontakt○ Ordinačné hodiny○ Firemná klientela○ Pred prvou návštevou○ Časté dotazy (SEO)○ Prečo práve my?

Požiadavky -> Funkčné

● buďte pozitívní○ Nie je možný nákup bez zadania emailu○ Ak užívateľ nezadá email pri nákupe, systém vypíše

prečo požadujeme email, čo budeme posielať a požiadá znovu o jeho zadanie.

● buďte špecifickí○ Na homepage budú najpopulárnejšie kurzy○ Administrátor webu bude môcť zvoliť kurzy, ktoré sa

zobrazia na homepage ako najpopulárnejšie.● vyhýbajte sa slangu


● Príklad http://www.Astradent.cz ○ ?


● Príklad http://www.Astradent.cz ○ ?○ Formulár na dohodnutie termínu prvej návštevy○ Kontaktný formulár

Požiadavky

● Príklad http://www.Dermagyn.sk

Požiadavky -> Prioritizácia

● aké sú priority?● sú požiadavky v súlade so stratégiou?

Štruktúra -> Informačná architektúra

● zhora nadol○ začíname od stratégie○ môžeme zabudnúť na detaily súvisiace s obsahom

● zdola nahor○ začíname od požiadaviek○ môžeme spraviť nerozšíriteľnú štruktúru

● ani jedno nie je lepšie ani horšie● môžeme spraviť aj aj


● Card sorting


● Príklad http://www.Astradent.cz ○ Zdola nahor

■ Ako nazveme spolu zoznam úkonov, ktoré vykonávame?

■ Kam umiestnime formulár na dohodnutie prvého termínu?

○ Zhora nadol■ Ako potenciálny klient, čo je prvé čo ma zaujíma?

Čo je pre mňa podstatné pri zubnej ordinácii? Na čo sa nechám nalákať?

Štruktúra -> Dizajn interakcií

zdroj: Steve Krug - Nenuťte uživatele přemýšlet

Štruktúra -> Dizajn interakcií

● konvencie○ Košík na internetovom obchode je podobný ako

košík v kamennom obchode○ Pri voľbe termínu chcem vidieť kalendárik○ Logo očakávam vľavo a po kliknutí sa dostanem na

homepage○ Kontakt je posledná položka v navigácii.

● ošetrenie chýb○ povinné polia vo formulári○ logické obmedzenia○ chybové hlásenia

Náčrt -> Dizajn navigácie

● Človek sa musí dostať z bodu A do bodu B.● Alebo do bodu C? Podľa toho čo chceme :)● Ako súvisí navigácia s tým, kde práve som?

Je to globálná navigácia (primárna, sekundárna) / lokálná navigácia / breadcrumb (omrvinková) / kam pokračovať / súviace produkty /...?

● Globálna navigácia na každej stránke, všade rovnaká, aktívne položky

● Max 7 položiek


● Príklad http://www.Astradent.cz○ globálna navigácia○ lokálna navigácia○ navigácia služieb○ kam pokračovať


● Príklad českých operátorov


● Príklad: Eshop s nábytkom○ stoličky, stoly, skrine


● Príklad: Eshop s nábytkom○ stoličky, stoly, skrine

● Naše riešenie○ Podľa izby

■ nábytok do obývačky, nábytok do kuchyne,...○ Podľa produktu

■ stoličky, stoly, skrine,...○ Podľa materiálu

■ dubový nábytok, teakový nábytok,...○ Podľa vkusu

■ designový nábytok, rustikálny nábytok,...

Návrh kľúčových slov v Google AdWords

Náčrt -> Dizajn rozhrania

● na voľbe záleží


● opt in / opt out


● captcha

Náčrt -> Dizajn informácií

● State● Job title● Telephone number● Street address● Name● Zip code● Organization● City● E-mail address

● Personal information○ Name○ Job title○ Organization

● Address information○ Street address○ City○ State○ Zip code

● Other contact information○ Telephone number○ E-mail address


● Kurz varenia○ Termíny

■ Dátum, čas■ Menu■ Počet voľných miest

○ Cena○ Kuchár○ Typ kuchyne○ Doba trvania○ Čo si vziať so sebou○ Ako to prebieha○ Potrebné znalosti, úroveň kurzu○ Možnosti platby○ Obrázky


● Kurz varenia○ Termíny

■ Dátum, čas■ Menu■ Počet voľných miest

○ Cena○ Kuchár○ Typ kuchyne○ Doba trvania○ Čo si vziať so sebou○ Ako to prebieha○ Potrebné znalosti, úroveň kurzu○ Možnosti platby○ Obrázky

Ako zoskúpiť?

Priority?

Náčrt -> Wireframe

● Pomôcka pri komunikácií s klientom, grafikom, programátorom

● Predmet uživateľského testovania● Výstup UXD procesu● Ľahké zmeny

● Nástroje:○ Pero a papier○ Balsamiq, Axure RP, Adobe Fireworks


● Mobile first?● Chefparade.cz Google analytics:

06/12 12/12


● The most first● Chefparade.cz Google analytics:

Kde som?

Veľkoobchod?

Kde som?

Veľkoobchod?

Kde som?

Prázdny košík

Veľkoobchod?

Kde som?

Prázdny košík

Who cares?

Veľkoobchod?

Kde som?

Prázdny košík

Who cares?

Koľko ľudí hľadá značky?

Veľkoobchod?

Kde som?

Prázdny košík

Who cares?


Čo hľadajú?

Veľkoobchod?

Kde som?

Prázdny košík

Who cares?


Ako často aktualizujete?

Čo hľadajú?

Veľkoobchod?

Kde som?

Prázdny košík

Who cares?



Čo hľadajú?

Sú hlavné?

Veľkoobchod?

Kde som?

Prázdny košík

Who cares?



Čo hľadajú?

Sú hlavné?

WTF?

Zhrnutie

● UX ≠ magia● UX = elementy, postupy, proces● UX = user + business + technology● zdravý sedliacky rozum, otázky, testy● klient nevie čo chce, musíme mu pomôcť

Obal -> Vizuálny dizajn

● Ďakujem za pozornosť.● Pokračuje Peťo Kováč (@kovkou)

ux & design part 1, 18.1.13

Design