Your SlideShare is downloading. ×
  • Like
Ux & Design part 1, 18.1.13
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ux & Design part 1, 18.1.13

  • 240 views
Published

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

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

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
240
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. UX & designPeter Hajduček @peterhajducek Peter Kováč @kovkou www.unikum.cz 18.1.2013
  • 2. Vitajte v Chefparade - #1 školavarenia● Č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. Ako to začalo
  • 5. 2002
  • 6. 2007rokovživnosť
  • 7. 2009UNIKUM Solutions s.r.o.
  • 8. 2011
  • 9. 2013
  • 10. 2013Čo robím dnes
  • 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...
  • 13. Stará novinka
  • 14. Stará novinka Doporučujeme
  • 15. Stará novinka Doporučujeme Google Adsense
  • 16. Stará novinka Ďaľšie reštaurácie Doporučujeme Google Adsense
  • 17. Čo hľadáte vy na webe reštaurácie?
  • 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. SEO PPC Prístupnosťzdroj: http://goo.gl/d0FLI, doplnené
  • 20. zdroj:http://goo.gl/nKvpf
  • 21. zdroj: http://goo.gl/ZJG2U
  • 22. zdroj: http://goo.gl/ZJG2U
  • 23. zdroj: http://goo.gl/ZJG2U
  • 24. Stratégia -> Potreby ľudí● nedizajnujeme pre seba● nedizajnujeme pre 1 človeka● rôzni ľudia, rôzne potreby
  • 25. Stratégia -> Potreby ľudí● segmentácia
  • 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. Stratégia -> Potreby ľudí● užívateľský výskum ○ dotazníky ○ rozhovory 1 to 1 ○ focus groups ○ užívateľské testovanie● persóny
  • 28. Persóny
  • 29. zdroj: http://goo.gl/ZJG2U
  • 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. 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. 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. zdroj: http://goo.gl/ZJG2U
  • 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. Požiadavky -> Obsahové● Príklad http://www.Astradent.cz ○ Naše služby ○ Kontakt ○ Ordinačné hodiny ○ Firemná klientela
  • 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. zdroj: http://goo.gl/ZJG2U
  • 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. Požiadavky -> Funkčné● Príklad http://www.Astradent.cz ○ ?
  • 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. Požiadavky● Príklad http://www.Dermagyn.sk
  • 42. Požiadavky● Príklad http://www.Dermagyn.sk
  • 43. Požiadavky -> Prioritizácia● aké sú priority?● sú požiadavky v súlade so stratégiou?
  • 44. zdroj: http://goo.gl/ZJG2U
  • 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. Štruktúra -> Informačná architektúra● Card sorting
  • 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. zdroj: http://goo.gl/ZJG2U
  • 49. Štruktúra -> Dizajn interakcií zdroj: Steve Krug - Nenuťte uživatele přemýšlet
  • 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. zdroj: http://goo.gl/ZJG2U
  • 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. 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. Náčrt -> Dizajn navigácie● Príklad českých operátorov
  • 55. Náčrt -> Dizajn navigácie● Príklad: Eshop s nábytkom ○ stoličky, stoly, skrine
  • 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. zdroj: http://goo.gl/ZJG2U
  • 58. Náčrt -> Dizajn rozhrania● na voľbe záleží
  • 59. Náčrt -> Dizajn rozhrania● opt in / opt out
  • 60. Náčrt -> Dizajn rozhrania● captcha
  • 61. zdroj: http://goo.gl/ZJG2U
  • 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. 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. 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. 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. Náčrt -> Wireframe● Mobile first?● Chefparade.cz Google analytics: 06/12 12/12
  • 67. Náčrt -> Wireframe● The most first● Chefparade.cz Google analytics:
  • 68. Kde som?
  • 69. Veľkoobchod?Kde som?
  • 70. Veľkoobchod?Prázdny košíkKde som?
  • 71. Veľkoobchod? Prázdny košík Kde som?Who cares?
  • 72. Veľkoobchod? Prázdny košík Kde som? Koľko ľudí hľadá značky?Who cares?
  • 73. Veľkoobchod? Prázdny košík Kde som? Koľko ľudí hľadá značky? Čo hľadajú?Who cares?
  • 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. 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. 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. 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. zdroj: http://goo.gl/ZJG2U
  • 79. Obal -> Vizuálny dizajn● Ďakujem za pozornosť.● Pokračuje Peťo Kováč (@kovkou)