Prezentace na téma: Ergonomie webů a eshopů v praxi v rámci projektu JsmeMarketing, která je zaměřena především na praktickou část. Prezentace také obsahuje okázky z webů a eshopů účastníků této akce.

1. JsmeMarketing
Ergonomie webů a eshopů
v praxi
Ing. Kvasnička Jan
www.kvasnickajan.cz
info@kvasnickajan.cz
@Jan_Kvasnicka

2. Otázky na úvod
 Kdo z Vás se tímto tématem na svém eshopu (webu) zabýval?
 Zkoušel někdo z Vás testování na svém eshopu (webu)?
 Zapracovali jste výsledky testování? Jaký byl reálný přínos?

3. Co je to ergonomie (použitelnost) webu?
 Schopnost ovládání webu co nejjednodušeji, intuitivní chování
 Přehlednost, srozumitelnost
 Na základě použitelnosti vznikají pravidla

4. 4 myšlenky okolo použitelnosti
„Nenuťte návštěvníky příliš přemýšlet“
„Pokud je první zkušenost negativní, pravděpodobně už se
nikdy nevrátí“
„Okolo 50% obchodů prodělává, jelikož návštěvník nenajde
požadované informace“
„Není to o tom, že jeden opisuje od druhého, ale používají
něco, co funguje (pozor při vymýšlení vlastních prvků)“

5. Nejčastější chyby
 Jaké jsou podle Vás nejčastější chyby v rámci použitelnosti?

6. 3 základní skutečnosti o chování uživatelů
 Stránky nečteme, ale prohlížíme (přesněji: skenujeme)
 Neprovádíme optimální výběry, ale děláme kompromisy
 Nebádáme nad tím, jak věci fungují, jednoduše to „nějak
uděláme“

7. 5 pravidel použitelnosti
 Vytvořte jasnou vizuální hierarchii na stránce
 Neměňte zvyklosti, vše musí být jednoduše pochopitelné
 Rozdělte stránky na jasně definované oblasti
 Vyznačte odkazy, dejte jasně najevo, na co lze „klepnout”
 Stránky nepřeplácávejte, neuvádějte zbytečná slova

8. Ergonomie eshopu
 Nevytvářejte
složitou strukturu
produktů
 Obecné
doporučení:
maximálně 3
úrovně
 3 sloupce:
ustupující trend

9. Co je to call-to-action?
„Vybídnutí k činnosti/aktivitě“
 Jedná se o vhodné použití textů, tlačítek, formulářů atd.
 Příklady textů call-to-action
 Přihlásit odběr / Zasílání tipů zdarma
 Log in nebo Přihlásit / Přihlásit mě do systému (komunity)
 Volej 777 777 777 / Zavolejte na číslo 777 777 777 pro konzultaci
ZDARMA

10. Techniky call-to-action 1/5
 Lay the groundwork

11. Techniky call-to-action 2/5
 Use white space

12. Techniky call-to-action 3/5
 Use an alternative colour

13. Techniky call-to-action 4/5
 Make it big

14. Techniky call-to-action 5/5
 Upozornění na novinku

15. Call-to-action – ukázky z praxe - 1/6
 Výsledky studie 3 frází a jejich úspěšnost na magazínu
(marketingsherpa.com)
„click to continue“ – 8,53 % prokliků
„continue to article“ – 3,3 % prokliků
„read more“ – 1,8 % prokliků

16. Call-to-action – ukázky z praxe - 2/6
 111 nákupních ikon testováno (2007)
http://www.getelastic.com/add-to-cart-buttons/

17. Call-to-action – ukázky z praxe - 3/6

18. Call-to-action – ukázky z praxe - 4/6

19. Call-to-action – ukázky z praxe - 5/6

20. Call-to-action – ukázky z praxe - 6/6

21. Call-to-action – ukázky z praxe - 6/6

22. Nejčastější chyby

23. Nejčastější chyby - header - 1/2

24. Nejčastější chyby - header - 2/2

25. Nejčastější chyby - košík a objednávka - 1/12

26. Nejčastější chyby - košík a objednávka - 2/12

27. Nejčastější chyby - košík a objednávka - 3/12

28. Nejčastější chyby - košík a objednávka - 4/12

29. Nejčastější chyby - košík a objednávka - 4/12

30. Nejčastější chyby - košík a objednávka - 5/12
 Jednostránková vs Více stránková objednávka?

31. Nejčastější chyby - košík a objednávka - 6/12

32. Nejčastější chyby - košík a objednávka - 7/12

33. Nejčastější chyby - košík a objednávka - 8/12
Pozor na pamatování
vyplněných částí v
objednávce
„Přepočítat“

34. Nejčastější chyby - košík a objednávka - 9/12

35. Nejčastější chyby - košík a objednávka - 10/12

36. Nejčastější chyby - košík a objednávka - 11/17

37. Nejčastější chyby - košík a objednávka - 12/12
 Je opravdu
nutná
registrace?

38. Nejčastější chyby - navigace - 1/7

39. Nejčastější chyby - navigace - 2/7
 Které menu je přehlednější?

40. Nejčastější chyby - navigace - 3/7
 Které menu
je přehlednější?

41. Nejčastější chyby - navigace - 4/7

42. Nejčastější chyby - navigace - 5/7

43. Nejčastější chyby - navigace - 6/7

44. Nejčastější chyby - navigace - 7/7
 Drobečková navigace

45. Nejčastější chyby - výpis produktů - 1/3

46. Nejčastější chyby - výpis produktů - 2/3

47. Nejčastější chyby - výpis produktů - 3/3

48. Nejčastější chyby - detail produktu - 1/3

49. Nejčastější chyby - detail produktu - 2/3

50. Nejčastější chyby - detail produktu - 3/3

51. Nejčastější chyby - mezikrok nákupu - 1/3

52. Nejčastější chyby - mezikrok nákupu - 2/3

53. Nejčastější chyby - mezikrok nákupu - 3/3

54. Nejčastější chyby - filtrování a vyhledávání -
1/4

55. Nejčastější chyby - filtrování a vyhledávání -
2/4

56. Nejčastější chyby - filtrování a vyhledávání -
3/4

57. Nejčastější chyby - filtrování a vyhledávání -
4/4

58. Nejčastější chyby - porovnávání - 1/2

59. Nejčastější chyby - porovnávání - 2/2

60. Nejčastější chyby - patičky - 1/1

61. Nejčastější chyby - patičky - 2/2

62. Z eshopů a webů účastníků

63. Z eshopů a webů účastníků - 1/31
 Hlavní
strana

64. Z eshopů a webů účastníků - 2/31
 Služby

65. Z eshopů a webů účastníků - 3/31
 Hlavní strana

66. Z eshopů a webů účastníků - 4/31
 Nabídka

67. Z eshopů a webů účastníků - 5/31
 Hlavní strana

68. Z eshopů a webů účastníků - 6/31
 Nabídka článků

69. Z eshopů a webů účastníků - 7/31
 Hlavní strana

70. Z eshopů a webů účastníků - 8/31
 Detail produktu

71. Z eshopů a webů účastníků - 9/31
 Mezikrok nákupu

72. Z eshopů a webů účastníků - 10/31
 Objednávka

73. Z eshopů a webů účastníků - 11/31
 Výpis produktů

74. Z eshopů a webů účastníků - 12/31
 Recenze

75. Z eshopů a webů účastníků - 13/31
 Header

76. Z eshopů a webů účastníků - 14/31
 Detail produktu

77. Z eshopů a webů účastníků - 15/31
 Levé menu

78. Z eshopů a webů účastníků - 16/31
 Výpis produktů

79. Z eshopů a webů účastníků - 17/31
 Detail
produktu

80. Z eshopů a webů účastníků - 18/31
 Hlavní strana

81. Z eshopů a webů účastníků - 19/31
 Výpis produktů

82. Z eshopů a webů účastníků - 20/31
 Hlavní strana

83. Z eshopů a webů účastníků - 21/31
 Detail produktu

84. Z eshopů a webů účastníků - 22/31
 Upozornění a nákupní košík

85. Z eshopů a webů účastníků - 23/31
 Hlavní strana

86. Z eshopů a webů účastníků - 24/31
 Výpis kategorií

87. Z eshopů a webů účastníků - 25/31
 Header

88. Z eshopů a webů účastníků - 26/31
 Výpis produktů

89. Z eshopů a webů účastníků - 27/31
 Levé menu

90. Z eshopů a webů účastníků - 28/31
 Header

91. Z eshopů a webů účastníků - 29/31
 Výpis produktů

92. Z eshopů a webů účastníků - 30/31
 Header

93. Z eshopů a webů účastníků - 31/31
 Výpis produktů

94. Shrnutí
 Vždy důkladně testujte funkčnost (před spuštěním, za běhu)
 Testování ať provádí lidé různého věku a zaměření
 Sledujte aktuální trendy a vývoje silných eshopů (platí za
vývoj, proč se nepřiučit)
 Stále opakované: „Nenuťte uživatele přemýšlet“
 Snažte se také testovat a hrát si se slovy: „lákání uživatelů
na akce atd.“
 Navigace a jednoduchost procesu nákupu je klíčová
 Pozor na cílovou skupinu

95. JsmeMarketing
Děkuji za pozornost
Ing. Kvasnička Jan
www.kvasnickajan.cz
info@kvasnickajan.cz
@Jan_Kvasnicka
Možnost odběru
novinek na webu