Estetyka w e-commerce. Jak nie przedobrzyć i nie zabić

funkcjonalności oraz skuteczności witryny „pięknym” layoutem?

1

2

• inbound marketer, SEO

• takaoto.pro

• audyty SEO / UX / content / SMO

• analityka i inbound marketing

Szymon Słowik

„Dobra” strona internetowa

3

• użyteczność (korzyść dla użytkownika) • „wyszukiwalność" (SEO / brand) • przejrzysta komunikacja • jasno określony cel

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

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

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

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

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ść)

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

3. Nawigacja i CTA w neutralnych kolorach

10http://1stwebdesigner.com/worst-call-to-action-examples/

4. Używanie zbyt wielu kolorów

11http://www.webdesigndev.com/30-extremely-colourful-website-designs/

5. Zbyt dużo grafiki

12

• Spowolnienie witryny (kompresja!) • Odciągnięcie uwagi od CTA • Rozproszenie użytkownika

6. Układ niedopasowany do mobile

13

• Standard RWD nie wystarczy • Projektowanie „mobile first” • Pionowy układ - jedna kolumna • Odpowiednie priorytety

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”

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

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

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

11. Pominięcie elementów budujących zaufanie

18

• Logo partnerów • Logo klientów • Badge, certyfikaty, ISO etc.

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ć

20http://www.lingscars.com/

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ć

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

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)

Dziękuję i zapraszam do kontaktu

• Szymon Słowik

• slowik@takaoto.pro

• http://takaoto.pro

• @szymonslowik

• fb.com/szymon.slowik