Download to read offline
Uploaded byUnikum.cz
Ux & Design part 1, 18.1.13
První část workshopu od http://www.unikum.cz pro http://www.mediamatika.sk v Praze.
Ux & Design part 1, 18.1.13
- 1. UX & design PeterHajduč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!
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 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 otom, aby sa nestávalo toto...
- 14.
- 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 vyna 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é
- 21.
- 22.
- 23.
- 24.
- 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.
- 30.
- 31. Stratégia -> Cielewebu ● 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 -> Cielewebu ● 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 -> Cielewebu ● 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
- 34.
- 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?
- 38.
- 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
- 42.
- 43.
- 44. Požiadavky -> Prioritizácia ●aké sú priority? ● sú požiadavky v súlade so stratégiou?
- 45.
- 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ť?
- 49.
- 50. Štruktúra -> Dizajninterakcií zdroj: Steve Krug - Nenuťte uživatele přemýšlet
- 51. Štruktúra -> Dizajninterakcií ● 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
- 52.
- 53. Náčrt -> Dizajnnavigá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 -> Dizajnnavigá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 -> Dizajnnavigácie ● Príklad českých operátorov
- 59. Náčrt -> Dizajnnavigácie ● Príklad: Eshop s nábytkom ○ stoličky, stoly, skrine
- 60. Náčrt -> Dizajnnavigá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,...
- 61.
- 62. Náčrt -> Dizajnrozhrania ● na voľbe záleží
- 63. Náčrt -> Dizajnrozhrania ● opt in / opt out
- 64. Náčrt -> Dizajnrozhrania ● captcha
- 66.
- 67. Náčrt -> Dizajninformá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 -> Dizajninformá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 -> Dizajninformá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.
- 75.
- 76.
- 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ť
- 86.
- 87. Obal -> Vizuálnydizajn ● Ďakujem za pozornosť. ● Pokračuje Peťo Kováč (@kovkou)