Upload
szymon-slowik
View
3.647
Download
0
Embed Size (px)
Citation preview
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ć
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
• http://takaoto.pro
• @szymonslowik
• fb.com/szymon.slowik