Nejčastější UX chyby na eshopech - ShopCamp 2020

D9085296dd20f6b8bda8a083e39d1d7a?s=47 Marek Čevelíček
September 10, 2020

Nejčastější UX chyby na eshopech - ShopCamp 2020

UX faily na e-shopech a jak je nedělat—
5 skupin naprosto zásadních chyb, kterých se dopouští lidé na e-shopech. Nepotřebujete UX designera, abyste základní nedostatky vyřešili sami. Ukážu vám, jak na to.

D9085296dd20f6b8bda8a083e39d1d7a?s=128

Marek Čevelíček

September 10, 2020
Tweet

Transcript

  1. Nejčastější UX chyby e-shopů Marek Čevelíček

  2. Valid, buddy, you can go

  3. Marek Ondřej

  4. Marek “Serte na grafiku. Hlavně ať to je jednoduché a

    srozumitelné.” Ondřej “I grafika shopu hraje roli.”
  5. None
  6. None
  7. None
  8. None
  9. Průser obvykle začíná takhle:

  10. UX Heuristiky použitelnosti

  11. UX Heuristiky Výzkum Uživatelské testování Analytika Mousetracking A/B testování

  12. Heuristiky řeší jednoduché problémy = best practice & good practice

  13. 80 % stejné základní chyby

  14. A/ První zobrazení B/ Obsah webu C/ Menu a ovládání

    D/ Vizuální přehlednost
  15. Here we go...

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. Cookies, aplikace Popupy Slevy a newslettery Rychlost 1/ První zobrazení

  28. Cookies, aplikace Popupy Slevy a newslettery Rychlost → minimalizovat →

    neotravovat a neblokovat → forma a načasování → rozumně rychlý web 1/ První zobrazení
  29. Go on...

  30. B/ Obsah webu

  31. None
  32. 20 %

  33. Occamova břitva princip logické úspornosti Nikdy nic nekomplikujte. „Zvolte vysvětlení,

    které je především jednoduché. “ William of Ockham
  34. None
  35. None
  36. None
  37. Důraz na to, co je důležité

  38. None
  39. Název zájezdu Termín Cena Button rezervace Podmínky zájezdu Popis lokality

    Popis hotelu Podmínky CK Pojištění Reklamace Oblíbené, tisk, Share, poslat mailem Přeskupení obsahu
  40. Formátování

  41. None
  42. Výhody na webu 1. Musí to být výhody, ne kecy.

    2. Musí být vidět. 3. Short
  43. None
  44. None
  45. BULLSHIT!

  46. None
  47. None
  48. Čitelnost

  49. Čitelnost – font, řez, velikost, řádkování

  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. Autor: Lukáš Augusta

  57. lqd.cz/blog/

  58. 1/ Hromada textu 2/ Hrozné formátování 3/ Neužitečný obsah (strašný

    kecy) 4/ Chybějící obsah 5/ Špatná čitelnost B/ Obsah webu
  59. 1/ Hromada textu 2/ Hrozné formátování 3/ Neužitečný obsah (strašný

    kecy) 4/ Chybějící obsah 5/ Špatná čitelnost → 20 % → Nadpisy, krátké odstavce, … → Pište normálně a někomu to přečtěte → Testujte to na lidech → Font, řádkování, ... B/ Obsah webu
  60. C/ Menu a ovládání

  61. 1. nejlepší navigace je žádná navigace. 2. nejlepší navigace je

    jednoduchá navigace.
  62. Filtry v menu; Top kategorie v menu; Vizuální vodítka

  63. None
  64. None
  65. None
  66. None
  67. None
  68. Stejný vzhled = stejná funkce

  69. None
  70. None
  71. None
  72. None
  73. https://www.nngroup.com/articles/accordion-icons/ Používání “caret icon” v místech, kde se očekává rozbalení

    je lepší než jen text nebo jakákoliv jiná ikona. Lidi klikají v případě rozbalovacích patternů téměř stejně často na text i na ikonu. Používejte v meníčku pro text i ikonu stejnou akci.
  74. Filtry jako vstupní stránka

  75. None
  76. None
  77. 1/ Jednoduchá navigace 2/ Stejný vzhled, stejná funkce 3/ Obvyklé

    ovládací prvky 4/ Pozor na kopírování velkých hráčů 5/ Stav zobrazení + reset (aktivní filtry, předvolby, hledání) C/ Menu a ovládání
  78. ...and finally

  79. D/ Vizuální přehlednost

  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. Priority Co je na stránce nejdůležitější? vs. Co je na

    první pohled nejvíc vidět?
  89. None
  90. None
  91. None
  92. None
  93. Mobile first přístup

  94. Srozumitelnost: Na co se dá kliknout?

  95. None
  96. 1/ Obvyklé grafické prvky + obvyklá pozice 2/ Důležité prvky

    nesmí zanikat 3/ Srozumitelnost ovládání → stačí ty lidi sledovat 4/ Hezké, inovativní, … → přehledné, použitelné D/ Vizuální přehlednost
  97. Co hledáte v těch datech?

  98. Vstupní stránky

  99. Důležitost stránek e-shopu 1. Checkout 2. Produktové podstránky 3. Kategorie

    4. HP, Kontakt, O nás, ...
  100. Rozlišení obrazovky

  101. Mobile. Repeat it.

  102. Nikdo nemá rád změny. Pomalu na ně!

  103. Vývoj B2B portálů informační systémy & UX! @mcevel (Twitter)