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.

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.”
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...
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
32. 20 %
33. Occamova břitva princip logické úspornosti Nikdy nic nekomplikujte. „Zvolte vysvětlení, které je především jednoduché. “ William of Ockham
37. Důraz na to, co je důležité
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í
42. Výhody na webu 1. Musí to být výhody, ne kecy. 2. Musí být vidět. 3. Short
45. BULLSHIT!
48. Čitelnost
49. Čitelnost – font, řez, velikost, řádkování
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
68. Stejný vzhled = stejná funkce
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
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
88. Priority Co je na stránce nejdůležitější? vs. Co je na první pohled nejvíc vidět?
93. Mobile first přístup
94. Srozumitelnost: Na co se dá kliknout?
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)