Ux & Design part 1, 18.1.13
•
0 likes•427 views
První část workshopu od http://www.unikum.cz pro http://www.mediamatika.sk v Praze.
More Related Content
Similar to Ux & Design part 1, 18.1.13
Similar to Ux & Design part 1, 18.1.13 (20)
More from Unikum.cz
More from Unikum.cz (8)
Ux & Design part 1, 18.1.13
- 1. UX & design Peter Hajduček @peterhajducek Peter Kováč @kovkou www.unikum.cz 18.1.2013
- 2. Vitajte v Chefparade - #1 škola varenia ● Čas 14:00 - 17:30 ● Chefparade obchod je otvorený ● Otázky hneď
- 3. 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!
- 5. 2002
- 8. 2011
- 9. 2013
- 11. 2013 Č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
- 12. UX je o tom, aby sa nestávalo toto...
- 14. Stará novinka
- 15. Stará novinka Doporučujeme
- 16. Stará novinka Doporučujeme Google Adsense
- 17. Stará novinka Ďaľšie reštaurácie Doporučujeme Google Adsense
- 18. Čo hľadáte vy na webe reštaurácie?
- 19. Čo hľadám Čo je na webe EN jazyk Stará novinka Denné menu Partnerské weby Otvárac. Sezónna ponuka hod. Ďalšie reštaurácie Interiér. fotky Google Adsense
- 20. SEO PPC Prístupnosť zdroj: http://goo.gl/d0FLI, doplnené
- 25. Stratégia -> Potreby ľudí ● nedizajnujeme pre seba ● nedizajnujeme pre 1 človeka ● rôzni ľudia, rôzne potreby
- 26. Stratégia -> Potreby ľudí ● segmentácia
- 27. Stratégia -> Potreby ľudí ● 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é
- 28. Stratégia -> Potreby ľudí ● užívateľský výskum ○ dotazníky ○ rozhovory 1 to 1 ○ focus groups ○ užívateľské testovanie ● persóny
- 29. Persóny
- 31. 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
- 32. Stratégia -> Ciele webu ● 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ť
- 33. Stratégia -> Ciele webu ● 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
- 35. 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ť
- 36. Požiadavky -> Obsahové ● Príklad http://www.Astradent.cz ○ Naše služby ○ Kontakt ○ Ordinačné hodiny ○ Firemná klientela
- 37. Požiadavky -> Obsahové ● 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?
- 39. 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
- 40. Požiadavky -> Funkčné ● Príklad http://www.Astradent.cz ○ ?
- 41. Požiadavky -> Funkčné ● Príklad http://www.Astradent.cz ○ ? ○ Formulár na dohodnutie termínu prvej návštevy ○ Kontaktný formulár
- 44. Požiadavky -> Prioritizácia ● aké sú priority? ● sú požiadavky v súlade so stratégiou?
- 46. Š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
- 47. Štruktúra -> Informačná architektúra ● Card sorting
- 48. Štruktúra -> Informačná architektúra ● 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ť?
- 50. Štruktúra -> Dizajn interakcií zdroj: Steve Krug - Nenuťte uživatele přemýšlet
- 51. Š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
- 53. 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
- 55. Náčrt -> Dizajn navigácie ● Príklad http://www.Astradent.cz ○ globálna navigácia ○ lokálna navigácia ○ navigácia služieb ○ kam pokračovať
- 56. Náčrt -> Dizajn navigácie ● Príklad českých operátorov
- 59. Náčrt -> Dizajn navigácie ● Príklad: Eshop s nábytkom ○ stoličky, stoly, skrine
- 60. Náčrt -> Dizajn navigácie ● Príklad: Eshop s nábytkom ○ stoličky, stoly, skrine Návrh kľúčových slov v Google ● Naše riešenie AdWords ○ 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,...
- 62. Náčrt -> Dizajn rozhrania ● na voľbe záleží
- 63. Náčrt -> Dizajn rozhrania ● opt in / opt out
- 64. Náčrt -> Dizajn rozhrania ● captcha
- 67. Náčrt -> Dizajn informácií ● State ● Personal information ● Job title ○ Name ● Telephone number ○ Job title ○ Organization ● Street address ● Address information ● Name ○ Street address ● Zip code ○ City ● Organization ○ State ● City ○ Zip code ● E-mail address ● Other contact information ○ Telephone number ○ E-mail address
- 68. Náčrt -> Dizajn informácií ● 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
- 69. Náčrt -> Dizajn informácií ● Kurz varenia Priority? ○ Termíny ■ Dátum, čas Ako zoskúpiť? ■ 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
- 70. 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
- 71. Náčrt -> Wireframe ● Mobile first? ● Chefparade.cz Google analytics: 06/12 12/12
- 72. Náčrt -> Wireframe ● The most first ● Chefparade.cz Google analytics:
- 74. Kde som?
- 77. Veľkoobchod? Prázdny košík Kde som? Who cares?
- 78. Veľkoobchod? Prázdny košík Kde som? Koľko ľudí hľadá značky? Who cares?
- 79. Veľkoobchod? Prázdny košík Kde som? Koľko ľudí hľadá značky? Čo hľadajú? Who cares?
- 80. Veľkoobchod? Prázdny košík Kde som? Koľko ľudí hľadá značky? Čo hľadajú? Who cares? Ako často aktualizujete?
- 81. Veľkoobchod? Prázdny košík Kde som? Koľko ľudí hľadá značky? Čo hľadajú? Who cares? Sú hlavné? Ako často aktualizujete?
- 82. Veľkoobchod? Prázdny košík Kde som? Koľko ľudí hľadá značky? Čo hľadajú? Who cares? Sú hlavné? WTF? Ako často aktualizujete?
- 85. 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ť
- 87. Obal -> Vizuálny dizajn ● Ďakujem za pozornosť. ● Pokračuje Peťo Kováč (@kovkou)