Prezentacja z 4 edycji WordUp Silesia, która odbyła się 19.02.2016 w Katowicach. Dowiecie się z niej, jakich podstawowych błędów nie popełniać na etapie projektowania układu i grafiki w sklepach internetowych. Chodzi oczywiście o błędy, które mogą negatywnie wpłynąć na użyteczność sklepu i konwersje.

1. Estetyka w e-commerce. Jak nie
przedobrzyć i nie zabić
funkcjonalności oraz skuteczności
witryny „pięknym” layoutem?
1

2. 2
• inbound marketer, SEO
• takaoto.pro
• audyty SEO / UX / content / SMO
• analityka i inbound marketing
Szymon Słowik

3. „Dobra” strona internetowa
3
• użyteczność (korzyść dla użytkownika)
• „wyszukiwalność" (SEO / brand)
• przejrzysta komunikacja
• jasno określony cel

4. Podstawy UX
4
• użytkownik zawsze wie, gdzie się znajduje
• formularze dają jasne komunikaty błędów
• dostępny powrót na stronę główną
• dostępne kontakt / pomoc
• widoczne menu główne
• powtarzalne elementy nawigacji
• dobrze działająca wyszukiwarka wewnętrzna
• przejrzysty layout, który nie odciąga uwagi od najważniejszych zasobów

5. Zasady designu
5
1. Projekt pod kątem dobrze zbadanej grupy docelowej
2. Design: jak to działa, a nie tylko jak wygląda
3. Dobry design jest wtedy, gdy go „nie widać”
4. Layout to w pewnym sensie język graficzny, narzędzie komunikacji:
• nie krzycz, tylko akcentuj
• nie buduj skomplikowanych zdań
• mów na temat

6. Ale nawet „najładniejszy” sklep internetowy, jeśli nie będzie łatwy w
obsłudze, to będzie wzbudzał głównie:
• frustrację
• zniechęcenie
• zniecierpliwienie
• gniew
To nie te emocje, na których nam zależy.
Estetyka ma wzbudzać emocje
6

7. 12 czynników związanych z estetyką,
które obniżają skuteczność sklepu internetowego
7
1. Brak treści tekstowych
2. Zbędne multimedia
3. Nawigacja i CTA w „neutralnych”
kolorach
4. Używanie zbyt wielu kolorów
5. Zbyt dużo grafiki
6. Układ niedopasowany do mobile
1. Slidery / duże bannery
2. „Oryginalny” i innowacyjny layout
3. Złe priorytety w rozlokowaniu treści
4. Graficzna nawigacja
5. Pominięcie elementów budujących
zaufanie
6. Kopiowanie niesprawdzonych trendów

8. 1. Brak treści tekstowych
8
• Gdzie jestem?
• Dla kogo jest ten sklep?
• Co tu można zrobić (zakup, informacje)?
• Unique Selling Proposition
• SEO (wyszukiwalność)

9. 2. Zbędne multimedia
9
• Czy film z urodzin prezesa na stronie głównej
na pewno jest konieczny?
• Multimedia jako dodatek, uzupełnienie treści,
poradnik, tutorial etc.
• Ważne, aby umieścić w odpowiednim miejscu

10. 3. Nawigacja i CTA w neutralnych kolorach
10http://1stwebdesigner.com/worst-call-to-action-examples/

11. 4. Używanie zbyt wielu kolorów
11
http://www.webdesigndev.com/30-extremely-colourful-website-
designs/

12. 5. Zbyt dużo grafiki
12
• Spowolnienie witryny (kompresja!)
• Odciągnięcie uwagi od CTA
• Rozproszenie użytkownika

13. 6. Układ niedopasowany do mobile
13
• Standard RWD nie wystarczy
• Projektowanie „mobile first”
• Pionowy układ - jedna kolumna
• Odpowiednie priorytety

14. 7. Zbyt dużo bannerów i sliderów
14
• Czy slider zajmujący 90% ekranu jest
ważniejszy niż krótka charakterystyka
sklepu, kategorii, produktu i call to
action?
• Slider to dodatek
• Pamiętajmy o „ślepocie bannerowej”

15. 8. Zbyt duża chęć wyróżnienia się
15
• Jakob Nielsen:”users spend most of their time
on other websites"
• Prowadzenie użytkownika jest jak droga
ewakuacyjna - ma działać, gdy budynek jest w
ogniu

16. 9. Wpływ priorytetów estetycznych
na układ strony
16
• Rozmieszczenie grafiki musi być
uargumentowane celami witryny
• Ważne zasoby i komunikaty blisko
wierzchołka strony, a nie w stopce
• Ważny etap: makiety

17. 10. Graficzna nawigacja
17
• Nie każdą ikonę łatwo zinterpretować
• Negatywny wpływ na SEO
• Użytkownicy „skanują” strony w
poszukiwaniu określonych słów

18. 11. Pominięcie elementów budujących zaufanie
18
• Logo partnerów
• Logo klientów
• Badge, certyfikaty, ISO etc.

19. 12. Kopiowanie „ładnych” trendów
19
• W wielu segmentach flat design po
prostu się nie sprawdził, bo użytkownicy
nie rozumieli, które elementy są klikalne,
a które nie
• Wszystko należy przetestować

20. 20http://www.lingscars.com/

21. Wnioski na koniec
21
• sklep nie musi być „najładniejszy”
• sklep nie musi być „najoryginalniejszy”
• sklep musi być skuteczny
• a skuteczność zależy od jasno określonych
celów
• realizację celów trzeba mierzyć i testować

22. Wnioski na koniec
22
• Twój klient nie ma czasu na myślenie
• Jest mnóstwo czynników, które rozpraszają twoich
klientów w świecie analogowym
• Nie zmniejszaj swoich szans dodatkowo
odwracając ich uwagę od realizacji celu w swoim
sklepie
• Szanuj czas klienta

23. Dodatkowe źródła:
23
• 12 czynników związanych z wyglądem Twojego sklepu, które zabijają jego
skuteczność (takaoto.pro)
• Top 10 Mistakes in Web Design (nngroup.com)
• The difference between art and design (webdesignerdepot.com)
• 113 Design Guidelines for Homepage Usability (nngroup.com)
• Optymalizacja e-commerce - jak dobierać narzędzia i podnosić konwersję
(conversion.pl)

24. Dziękuję i zapraszam do kontaktu
• Szymon Słowik
• slowik@takaoto.pro
• http://takaoto.pro
• @szymonslowik
• fb.com/szymon.slowik