UX & designPeter Hajduček @peterhajducek     Peter Kováč @kovkou        www.unikum.cz           18.1.2013
Vitajte v Chefparade - #1 školavarenia● Č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 F...
Ako to začalo
2002
2007rokovživnosť
2009UNIKUM Solutions s.r.o.
2011
2013
2013Čo robím dnes
2013Čo robím dnes● Footshop  ○ Nákup od dodávateľov  ○ Nákup zo skladu pre seba :-)● Unikum  ○   Cenové ponuky  ○   Projec...
UX je o tom, aby sa nestávalo toto...
Stará novinka
Stará novinka                Doporučujeme
Stará novinka                  Doporučujeme                Google Adsense
Stará novinka     Ďaľšie reštaurácie                            Doporučujeme                          Google Adsense
Čo hľadáte vy na webe reštaurácie?
Čo hľadám     Čo je na webe      EN jazyk       Stará novinka Denné menu             Partnerské weby              Otvárac....
SEO                                PPC      Prístupnosťzdroj: http://goo.gl/d0FLI, doplnené
zdroj:http://goo.gl/nKvpf
zdroj: http://goo.gl/ZJG2U
zdroj: http://goo.gl/ZJG2U
zdroj: http://goo.gl/ZJG2U
Stratégia -> Potreby ľudí● nedizajnujeme pre seba● nedizajnujeme pre 1 človeka● rôzni ľudia, rôzne potreby
Stratégia -> Potreby ľudí● segmentácia
Stratégia -> Potreby ľudí● segmentácia  ○ Podľa charakteristiky    ■ Geografická    ■ Demografická (18-45, muž, príjem > 1...
Stratégia -> Potreby ľudí● užívateľský výskum  ○   dotazníky  ○   rozhovory 1 to 1  ○   focus groups  ○   užívateľské test...
Persóny
zdroj: http://goo.gl/ZJG2U
Stratégia -> Ciele webu● business ciele  ○ je potrebné nájsť rovnováhu medzi príliš úzkymi a    príliš všeobecnými cieľmi●...
Stratégia -> Ciele webu● Príklad http://www.Astradent.cz  ○   Zadanie: web pre rebrandovanú zubnú ordináciu  ○   Business ...
Stratégia -> Ciele webu● Príklad http://www.Astradent.cz  ○ Zadanie: web pre rebrandovanú zubnú ordináciu  ○ Business ciel...
zdroj: http://goo.gl/ZJG2U
Požiadavky -> Obsahové● obsah = text, video, obrázok,...● hrubý odhad rozsahu - dĺžka textu, rozlíšenie  obrázka, videa● k...
Požiadavky -> Obsahové● Príklad http://www.Astradent.cz  ○   Naše služby  ○   Kontakt  ○   Ordinačné hodiny  ○   Firemná k...
Požiadavky -> Obsahové● Príklad http://www.Astradent.cz  ○   Naše služby  ○   Kontakt  ○   Ordinačné hodiny  ○   Firemná k...
zdroj: http://goo.gl/ZJG2U
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, sy...
Požiadavky -> Funkčné● Príklad http://www.Astradent.cz  ○ ?
Požiadavky -> Funkčné● Príklad http://www.Astradent.cz  ○ ?  ○ Formulár na dohodnutie termínu prvej návštevy  ○ Kontaktný ...
Požiadavky● Príklad http://www.Dermagyn.sk
Požiadavky● Príklad http://www.Dermagyn.sk
Požiadavky -> Prioritizácia● aké sú priority?● sú požiadavky v súlade so stratégiou?
zdroj: http://goo.gl/ZJG2U
Štruktúra -> Informačná architektúra● zhora nadol   ○ začíname od stratégie   ○ môžeme zabudnúť na detaily súvisiace s obs...
Štruktúra -> Informačná architektúra● Card sorting
Štruktúra -> Informačná architektúra● Príklad http://www.Astradent.cz  ○ Zdola nahor    ■ Ako nazveme spolu zoznam úkonov,...
zdroj: http://goo.gl/ZJG2U
Š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  ○ P...
zdroj: http://goo.gl/ZJG2U
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í...
Náčrt -> Dizajn navigácie● Príklad http://www.Astradent.cz  ○   globálna navigácia  ○   lokálna navigácia  ○   navigácia s...
Náčrt -> Dizajn navigácie● Príklad českých operátorov
Náčrt -> Dizajn navigácie● Príklad: Eshop s nábytkom  ○ stoličky, stoly, skrine
Náčrt -> Dizajn navigácie● Príklad: Eshop s nábytkom  ○ stoličky, stoly, skrine                                    Návrh k...
zdroj: http://goo.gl/ZJG2U
Náčrt -> Dizajn rozhrania● na voľbe záleží
Náčrt -> Dizajn rozhrania● opt in / opt out
Náčrt -> Dizajn rozhrania● captcha
zdroj: http://goo.gl/ZJG2U
Náčrt -> Dizajn informácií●   State              ● Personal information●   Job title            ○ Name●   Telephone number...
Náčrt -> Dizajn informácií● Kurz varenia  ○ Termíny    ■ Dátum, čas    ■ Menu    ■ Počet voľných miest  ○ Cena  ○ Kuchár  ...
Náčrt -> Dizajn informácií● Kurz varenia                                   Priority?  ○ Termíny    ■ Dátum, čas           ...
Náčrt -> Wireframe● Pomôcka pri komunikácií s klientom,  grafikom, programátorom● Predmet uživateľského testovania● Výstup...
Náčrt -> Wireframe● Mobile first?● Chefparade.cz Google analytics:       06/12                        12/12
Náčrt -> Wireframe● The most first● Chefparade.cz Google analytics:
Kde som?
Veľkoobchod?Kde som?
Veľkoobchod?Prázdny košíkKde som?
Veľkoobchod?             Prázdny košík             Kde som?Who cares?
Veľkoobchod?                           Prázdny košík                            Kde som?             Koľko ľudí hľadá znač...
Veľkoobchod?                           Prázdny košík                            Kde som?             Koľko ľudí hľadá znač...
Veľkoobchod?                           Prázdny košík                            Kde som?             Koľko ľudí hľadá znač...
Veľkoobchod?                           Prázdny košík                            Kde som?             Koľko ľudí hľadá znač...
Veľkoobchod?                           Prázdny košík                            Kde som?             Koľko ľudí hľadá znač...
Zhrnutie●   UX ≠ magia●   UX = elementy, postupy, proces●   UX = user + business + technology●   zdravý sedliacky rozum, o...
zdroj: http://goo.gl/ZJG2U
Obal -> Vizuálny dizajn● Ďakujem za pozornosť.● Pokračuje Peťo Kováč (@kovkou)
Ux & Design part 1, 18.1.13
Ux & Design part 1, 18.1.13
Ux & Design part 1, 18.1.13
Ux & Design part 1, 18.1.13
Ux & Design part 1, 18.1.13
Ux & Design part 1, 18.1.13
Ux & Design part 1, 18.1.13
Ux & Design part 1, 18.1.13
Upcoming SlideShare
Loading in...5
×

Ux & Design part 1, 18.1.13

272

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
272
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×