Ux & Design part 1, 18.1.13

498 views

Published on

První část workshopu od http://www.unikum.cz pro http://www.mediamatika.sk v Praze.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
498
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ux & Design part 1, 18.1.13

  1. 1. UX & designPeter Hajduček @peterhajducek Peter Kováč @kovkou www.unikum.cz 18.1.2013
  2. 2. Vitajte v Chefparade - #1 školavarenia● Čas 14:00 - 17:30● Chefparade obchod je otvorený● Otázky hneď
  3. 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. 4. Ako to začalo
  5. 5. 2002
  6. 6. 2007rokovživnosť
  7. 7. 2009UNIKUM Solutions s.r.o.
  8. 8. 2011
  9. 9. 2013
  10. 10. 2013Čo robím dnes
  11. 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. 12. UX je o tom, aby sa nestávalo toto...
  13. 13. Stará novinka
  14. 14. Stará novinka Doporučujeme
  15. 15. Stará novinka Doporučujeme Google Adsense
  16. 16. Stará novinka Ďaľšie reštaurácie Doporučujeme Google Adsense
  17. 17. Čo hľadáte vy na webe reštaurácie?
  18. 18. Č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
  19. 19. SEO PPC Prístupnosťzdroj: http://goo.gl/d0FLI, doplnené
  20. 20. zdroj:http://goo.gl/nKvpf
  21. 21. zdroj: http://goo.gl/ZJG2U
  22. 22. zdroj: http://goo.gl/ZJG2U
  23. 23. zdroj: http://goo.gl/ZJG2U
  24. 24. Stratégia -> Potreby ľudí● nedizajnujeme pre seba● nedizajnujeme pre 1 človeka● rôzni ľudia, rôzne potreby
  25. 25. Stratégia -> Potreby ľudí● segmentácia
  26. 26. 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é
  27. 27. Stratégia -> Potreby ľudí● užívateľský výskum ○ dotazníky ○ rozhovory 1 to 1 ○ focus groups ○ užívateľské testovanie● persóny
  28. 28. Persóny
  29. 29. zdroj: http://goo.gl/ZJG2U
  30. 30. 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
  31. 31. 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ť
  32. 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, 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
  33. 33. zdroj: http://goo.gl/ZJG2U
  34. 34. 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ť
  35. 35. Požiadavky -> Obsahové● Príklad http://www.Astradent.cz ○ Naše služby ○ Kontakt ○ Ordinačné hodiny ○ Firemná klientela
  36. 36. 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?
  37. 37. zdroj: http://goo.gl/ZJG2U
  38. 38. 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
  39. 39. Požiadavky -> Funkčné● Príklad http://www.Astradent.cz ○ ?
  40. 40. Požiadavky -> Funkčné● Príklad http://www.Astradent.cz ○ ? ○ Formulár na dohodnutie termínu prvej návštevy ○ Kontaktný formulár
  41. 41. Požiadavky● Príklad http://www.Dermagyn.sk
  42. 42. Požiadavky● Príklad http://www.Dermagyn.sk
  43. 43. Požiadavky -> Prioritizácia● aké sú priority?● sú požiadavky v súlade so stratégiou?
  44. 44. zdroj: http://goo.gl/ZJG2U
  45. 45. Š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
  46. 46. Štruktúra -> Informačná architektúra● Card sorting
  47. 47. Š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ť?
  48. 48. zdroj: http://goo.gl/ZJG2U
  49. 49. Štruktúra -> Dizajn interakcií zdroj: Steve Krug - Nenuťte uživatele přemýšlet
  50. 50. Š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
  51. 51. zdroj: http://goo.gl/ZJG2U
  52. 52. 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
  53. 53. 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ť
  54. 54. Náčrt -> Dizajn navigácie● Príklad českých operátorov
  55. 55. Náčrt -> Dizajn navigácie● Príklad: Eshop s nábytkom ○ stoličky, stoly, skrine
  56. 56. 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,...
  57. 57. zdroj: http://goo.gl/ZJG2U
  58. 58. Náčrt -> Dizajn rozhrania● na voľbe záleží
  59. 59. Náčrt -> Dizajn rozhrania● opt in / opt out
  60. 60. Náčrt -> Dizajn rozhrania● captcha
  61. 61. zdroj: http://goo.gl/ZJG2U
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. Náčrt -> Wireframe● Mobile first?● Chefparade.cz Google analytics: 06/12 12/12
  67. 67. Náčrt -> Wireframe● The most first● Chefparade.cz Google analytics:
  68. 68. Kde som?
  69. 69. Veľkoobchod?Kde som?
  70. 70. Veľkoobchod?Prázdny košíkKde som?
  71. 71. Veľkoobchod? Prázdny košík Kde som?Who cares?
  72. 72. Veľkoobchod? Prázdny košík Kde som? Koľko ľudí hľadá značky?Who cares?
  73. 73. Veľkoobchod? Prázdny košík Kde som? Koľko ľudí hľadá značky? Čo hľadajú?Who cares?
  74. 74. Veľkoobchod? Prázdny košík Kde som? Koľko ľudí hľadá značky? Čo hľadajú?Who cares? Ako často aktualizujete?
  75. 75. 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?
  76. 76. 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?
  77. 77. 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ť
  78. 78. zdroj: http://goo.gl/ZJG2U
  79. 79. Obal -> Vizuálny dizajn● Ďakujem za pozornosť.● Pokračuje Peťo Kováč (@kovkou)

×