Mówię eCommerce, myślisz – sprzedaż. To zupełnie zrozumiałe. Jednak muszę powiedzieć Ci coś, czego sprzedawcy raczej nie lubią słyszeć. Czas się wyróżnić, a zrobić to możesz przede wszystkim przez design. Wygląd strony sklepu naprawdę działa cuda, a co ważniejsze – są na to twarde dowody i liczby, którym – mimo że nie jest nam po drodze – przyklaskuję, bo to znaczy, że ludzie od designu wciąż są potrzebni!
Okazuje się, że – jak mówią badania McKinsey – dobry design to lepsze wyniki finansowe. Firma stworzyła autorski wskaźnik – McKinsey Design Index, który pokazuje jednoznacznie, że marki, które cieszą się najwyższym MDI notują też nawet 2-krotnie wyższy wzrost niż konkurencja.
Z kolei dane grupy Forrester rysują jeszcze ciekawsze dane – firmy, które zainwestowały w design swojej strony zwiększają przychody średnio o 20-30%! Równocześnie sprawozdanie to wykazało, że aż 84% menedżerów respektuje dobry projekt www, a co ważniejsze – stawia go jako kluczowy element sukcesu biznesu w ogóle. Dlaczego tak się dzieje?
Czytaj też: JAK PRZENIEŚĆ SKLEP INTERNETOWY NA NOWĄ PLATFORMĘ?
Wygląd strony sklepu to pierwsze wrażenie klienta, a pierwsze wrażenie = decyzja o zakupie
Design – każdy, niezależnie od tego czy dobry, czy zły – to pierwsza rzecz, którą widzi klient w kontakcie z marką. Jeden rzut oka i on już wie (a przynajmniej powinien), czy jesteś brandem modowym, kosmetycznym, cz może sprzedajesz akcesoria dla hodowców gołębi.
Kupujemy (i oceniamy!) na podstawie wrażenia wizualnego – to nie jest nowość. Mózg przecież podświadomie podpowiada Ci – to jest ładne, a tamto – lepiej nie klikać, nie wiadomo, czy nie wybuchnie. Ten fakt jest nie do podważenia, a co ważniejsze stanowi filar psychologii marketingu.
Pamiętaj jednak, że bardzo szeroko pojęty dziś design to nie tylko animacje, typografia i ładne zdjęcia. Bez podstawowej wiedzy i świadomości projektowej bardzo często strony zakupowe są przesadzone. Cała na biało wchodzi tutaj jednak spójność, która sprowadza się do konkretnego brandingu marki i jego tożsamości. A marka to Twój sklep!
Czym jest jednak taka tożsamość?
Brzmi górnolotnie, co? Pewnie, że tak. Brzmi tak, jakbym chciała pokazać Ci, że w ogóle nie masz pojęcia co ze swoją marką zrobić. Bynajmniej. Skoro tutaj jesteś – trafiłeś na odpowiednie tory! A to oznacza, że wiesz, czego nie wiesz i gdzie tego szukać! Plus dla Ciebie!
Ta tożsamość, o której mówię to nic innego, jak zestaw cech i wartości, które jasno definiują Twoją markę – czyli na przykład Twój sklep. A, no i oczywiście – odróżnia Cię od innych sprzedawców na rynku! Takim kompendium cech są nazwa, logo, wzornictwo, kolorystyka, cała komunikacja kierowana do klienta, wartości i kultura marki. Jeśli taka tożsamość jest odpowiednio wykreowana i zbudowana na fundamentach, które faktycznie z nią współgrają – marka wzbudzi zaufanie klientów!
Warto więc zaznaczyć, że niektóre firmy już dopracowały swoją tożsamość swoich marek do perfekcji. Na przykład Apple pełne innowacji, minimalizm i elegancki design, a także doskonała jakość; Coca-Cola – z doskonałym, zawsze na czasie hasłem czy radością i wspólnotą; Airbnb – podróże i przestrzeń, także wspólnota, otwartość i zaufanie. Pewnie zdajesz sobie sprawę, że w wyżej wymienionych markach w komunikacji wizualnej nie ma zupełnie żadnych przypadków. Doświadczamy tego przecież jako konsumenci.
W efekcie opracowanej i dopracowanej przez lata tożsamości marki, wyżej wymienieni sprawnie wykorzystują design do wprowadzania na rynek nowych produktów. A także odświeżania nowych! Jeśli chodzi o pierwsze doświadczenie użytkownika w takim sklepie, czy podczas styku z marką – często jest ono nacechowane pozytywnie właśnie ze względu na wcześniejsze wrażenia w obrębie marki.
Ty także masz swoją misję. Prowadzisz własny sklep online i potrzebujesz zwiększyć sprzedaż. Wzoruj się więc na dobrych praktykach gigantów i rozejrzyj się po branży. Przykładów stron sklepów online, które mają odpowiedni design i faktycznie dają radę jest sporo. Przyjrzyjmy się kilku, żebyś miał możliwość zrozumieć, o czym dziś mówię!
Wygląd strony sklepu online buduje pierwsze wrażenie
Spójrzmy w pierwszym rzucie na stronę, która jest czysta, ładna i na pierwszy rzut oka – WOW. Inna niż wszystkie.
Sklep Boost cieszy się przede wszystkim jednym – unikalnym produktem, który widnieje w ofercie jako jeden suplement diety. Nie ma tam nic więcej. Strona internetowa jest w istocie stroną produktową, a co za tym idzie – suplement Boost przewija się na ekranie przez całą ścieżkę zakupową klienta.
Marka jest tutaj bardzo wyraźna, a tożsamość dopracowano do perfekcji. Równocześnie taki design może wydawać Ci się nudny, bo jest monochromatyczny. Wybór kolorystyczny jednak padł na kolor pomarańczowy, który przede wszystkim ma łączyć fizyczność, emocje i energetyczność. Co ważniejsze – to barwa radości, a dodatkowo symbolizuje dążenie do celu, który z kolei… Odpowiada za szczęście użytkownika.
W międzyczasie cała witryna jest bogata w animacje i bardzo mocne copy produktowe. Z kolei cała uwaga użytkownika jest skupiona głównie na produkcie, jego funkcjonalności czy korzyściach, jakie klient wyniesie z posiadania suplementu. Jakie masz pierwsze wrażenie? Przypuszczam, że takie, jak ja – żywioł, energia, ale i minimalizm. W głowie odbiorcy ma z kolei zrodzić się proste rozwiązanie na zwiększenie poziomu energii w życiu. Działa? No, na mnie bardzo!
Design strony sklepu ze storytellingiem
Sklep Scepter & Sword to synonim słowa WOW. Serio. Wygląd strony sklepu powala pod każdym względem. Witryna ta to projekt eCommerce, który stawia przede wszystkim na nowoczesny design, przyprawiony porządną dawką storytellingu!
Co ciekawe, strona wykorzystuje tutaj wariant poziomego scrollowania, które nie jest typowym rozwiązaniem. Tutaj więc całkiem zasadne jest to, że pomyślisz sobie – o nie, nie będę tak eksperymentował, bo ludzie tego nie znają! Słuszna uwaga! Brawo Ty! Jednak od jakiegoś czasu pojawia się to jako trend w projektowaniu dla web designu. Czy nie warto spróbować? To Twoja decyzja, ale wygląd robi szał!
Obok takiego nietuzinkowego scrollowania unikatowym elementem jest też personalizowana ikona nawigacji. W tej z kolei pojawia się jasny przekaz scroll to navigate, a więc użytkownik wie, co ma zrobić. Co za tym idzie – podczas pierwszej wizyty na stronie użytkownik nie zgubi się mimo takiego designu.
Zobaczmy jednak całą oprawę wizualną tego eCommerce’u. Można o niej powiedzieć naprawdę bardzo dużo. Poczynając od zdjęć, stylizowanych na obraz, na której pojawia się kobieta w anturażu iście królewskim z winem. Butelka tegoż z kolei imituje berło i to jest właśnie główny produkt, który w tym sklepie online znajdziesz! Co ciekawe na uwagę zasługuje – totalnie! – hasło, które sprawia, że wierzę w copywriting mocniej! Unlock Your Inner Queen – co stanowi bardzo zabawną grę słów, a na polski przetłumaczyć możemy ją jako odkorkuj swoją wewnętrzną królową.
Równocześnie przyjrzyj się też kolorom i fontom, czyli krojom pisma. Nic tutaj nie jest przypadkiem. Czerń, czerwień, złoto to motywy przewodnie, a w efekcie – zalewa nas, już na pierwszy rzut oka, wyrafinowanie i dostatek. Typografia z kolei sprawia, że uderza w nas elegancja. Co na to wpływa? Przede wszystkim wersaliki, czyli pismo drukowane, w mariażu z fontem imitującym pismo odręczne – tutaj zabieg doskonały! Iście królewski podpis!
Jakie jest Twoje pierwsze wrażenie? Luksus za (relatywnie) niewielki koszt? Poproszę!
Neobrutalizm dla przyciągnięcia uwagi!
To, co zobaczyłam w ramach sklepu Tony’s Chockolonely trochę mnie zdziwiło! Jest mega nowocześnie, energetycznie i tak, że aż chce się zjeść tę czekoladę! Co ciekawe, a czego nie ma w poprzednich sklepach – można tutaj z powodzeniem stworzyć sobie listę ulubionych czekolad klikając serduszko przy danym produkcie. Szereg animacji okraszonych neobrutalizmem – czyli doskonałymi fontami, które wpasowały się w design idealnie – dają się odczuć niemal jak filmy! Wszystko jest płynne (jak czekolada!), budzące apetyt i sprawiają, że zdecydowanie zaczynamy jeść oczami!
Wielu odbiorców odruchowo wyda osąd w kontekście tego eCommerce’u – że wrażenie ciężkości i niezgrabnej kanciastości. Oczywiście pojawi się też drugi obóz – że to rezygnacja ze wszystkich ozdobników na rzecz jak największej funkcjonalności, gra kolorów i fontów. Każdy ma racje. Jedno jest pewne – sklep niewątpliwie szokuje, jest funkcjonalny, a co najważniejsze – podjudza, by scrollować dalej!
Jeśli spodobała Ci się ta trójka sklepów, które zdecydowanie warto odwiedzić, by zobaczyć nietuzinkowy design i wyróżnić się na rynku – monitoruj ten temat! Możesz to zrobić wchodząc w miejsce, gdzie pojawiają się światowe perełki projektowe. Twój eCommerce zdecydowanie na tym zyska!
Czytaj też: SOCIAL SAMPLING – TESTOWANIE PRODUKTÓW NOWYM NARZĘDZIEM MARKETINGOWYM TWOJEGO SKLEPU
Fundamenty designu dla Twojego sklepu online
Co możesz zrobić, jeśli jednak nie chcesz tak bardzo szaleć z wyglądem swojego sklepu i powoływać się na powyższe przykłady? Przede wszystkim trzymać się kilku zasad, które pomogą Ci wynieść sklep na wyższy poziom. Bez kontrowersyjnego wizualu!
1. Nawigacja sklepu – przyjazna droga klienta to główny filar udanej witryny sklepu. To, jak użytkownik porusza się po stronie gra pierwszoplanową rolę w kontekście doświadczeń zakupowych użytkownika.
Według badania TopDesignFirms aż 38% klientów patrzy na układ lub linijki nawigacji w międzyczasie pierwszej wizyty w sklepie. Z kolei 42% osób deklaruje, że opuściły sklep z powodu słabych czy nieczytelnych funkcjonalności.
By tego dokonać warto trzymać się sprawdzonych rozwiązań i tworzyć…
a. Przejrzyste menu, czyli używać zrozumiałych etykiet tak, by użytkownik od razu wiedział, gdzie się znajduje i jak wrócić tam, gdzie potrzebuje. Nie bez znaczenia jest nawigacja okruszkowa, czyli taka, w ramach której użytkownik w górnej części strony widzi, jaką drogę w kontekście kategorii przeszedł. Dodatkowo niebagatelne są też filtry, kategorie i sortowanie, które sprawdza się przede wszystkim, gdy sklep oferuje wachlarz produktów.
b. Dbaj o wyszukiwarkę. Pamiętaj, że widoczność i łatwość dostępu do wyszukiwarki to klucz do sukcesu, niezależnie od tego, jakim designem się bawisz. Czy wchodzisz w brutalizm, czy bawisz się w królewskie strony – miej na uwadze, że wizual nie może przysłonić funkcjonalności i paska wyszukiwarki.
c. Ikony – jeśli się w nie bawisz, pamiętaj – ikony muszą być intuicyjne i odwzorowywać to, co faktycznie użytkownik znajdzie po kliknięciu w nie. Niech lupka zostanie ikoną wyszukiwania, nie zmieniaj tego, co jest zakorzenione w ludzkiej podświadomości.
d. Sticky menu, czyli menu całkiem dobre, jeśli chcesz, by zawsze było widoczne! Jest to nawigacja, która pozostaje widoczna zawsze – także podczas scrollowania. To ułatwia dostęp do menu w każdym momencie i, co ważniejsze – sprawdza się na stronach, które mają bardzo bogaty zbiór treści.
2. Proces zakupowy – badanie Baymard Institute mówi, że 18% porzuceń koszyka ma związek z nazbyt skomplikowanym procesem zakupowym.
Przejrzysty proces przekłada się na większą sprzedaż w eCommerce i, co najważniejsze, zmniejsza współczynnik odrzuceń. Jak możesz o to zadbać?
a. CTA musi być czytelne. Przycisk czy komunikaty call to action trzeba koniecznie precyzować. Przede wszystkim wtedy, gdy na stronach sklepu jest zbyt wiele wątków i niedoprecyzowane słowa czy polecenia mogą wprowadzać w błąd. Używaj zestawień Kup teraz albo Przejdź do podsumowania, zamiast Kontynuuj.
b. Intuicja to podstawa – podsumowanie koszyka i przycisk przejścia do kasy musi być jednoznaczny. Dodatkowo możesz też zastosować na przykład pasek postępu, który pokaże klientowi, na jakim etapie zakupowym się znajduje. Po drugie – użyj opcji koszyka typu one-pager, czyli jednostronicowego przejścia przez proces zakupowy. Oczywiście, jeśli to możliwe. W efekcie użytkownik łatwo może poruszać się między sekcjami. Pamiętaj jednak, by dać możliwość ewentualnego wycofania się czy przejścia do pierwszego etapu!
c. Wyświetlaj różne warianty produktów, jeśli oferujesz szereg odmian jednego towaru. Upewnij się też, że miniatury pokazują odpowiedni model.
3. Treści łatwe i możliwe do przyswojenia.
W ramach transformacji cyfrowej pojawił się wachlarz zmian w kontekście konsumpcji treści. Badania Nielsena o eye-trackingu mówią jasno, że odwiedzający stronę sklepu spędzają na niej średnio aż 19 sekund, skanując wzrokiem ponad 70 elementów witryny. Co ważniejsze – nie ma tutaj mowy o czytaniu. Tutaj pierwsze skrzypce grają obrazy, animacje czy hasła.
Wygląd strony sklepu musi być okraszony podziałem. Uwagę w głównej mierze przyciągają przecież nagłówki, linki, listy czy pogrubione teksty. Twój czas na zdobycie klienta jest bardzo ograniczony. Musisz więc dobrze zaplanować treści przede wszystkim na stronach produktowych. Jak o to dbać?
a. Stosuj język korzyści, który uwzględnia zarówno cechy jak i to, co użytkownik osiągnie i zyska dzięki danemu towarowi. Jak zakup danego produktu przełoży się na życie klienta? Zawsze pokazuj zysk, nie stratę.
b. Krótkie CTA – no i, oczywiście, jasne. Bez konieczności dekodowania ich, stosuj zasadę CTA trzeba zrozumieć maksymalnie w 5 sekund.
c. Spójne komunikaty i jednolity język. Ważne jest, by użytkownik miał pewność, że w obrębie strony wciąż znajduje się w tym samym sklepie. W dużej mierze jednak będzie to uwarunkowane grupą docelową. Musisz jednak zawsze pamiętać o tym, by ujednolicić perspektywę. Jeśli raz mówisz nasze, to nie zmieniaj tego określenia na Twoje czy moje.
d. Udostępniaj recenzje od innych użytkowników, które stanowią dowód społeczny. Możesz pokazać je zarówno na głównej stronie, jak i w karcie produktu. A warto to robić, ponieważ aż 84% ludzi ufa opiniom tak, jak rekomendacjom.
e. Płatności na stronie produktu – pokaż je! Przede wszystkim, jeśli oferujesz szereg opcji. Rozważ umieszczenie ich jeszcze, zanim użytkownik zdąży podjąć decyzję o zakupie. Dodatkowo – dodaj informację o planach ratalnych, w przypadku, gdy je oferujesz.
f. Zainwestuj czas w blog, który będzie uzupełnieniem u sposobem na budowanie autorytetu w ramach branży, w jakiej się obracasz.
4. Optymalizuj pod mobilkę!
Strony responsywne to dziś konieczność. Za tym zdaniem stoją znów liczby (wiem, też nie lubię!). Aż 67% użytkowników mobilnych zgłasza, że strony są dostosowane do smartfonów. Linki i strony są zbyt małe, żeby faktycznie i realnie je kliknąć. Nie ma więc czemu się dziwić, że jeśli nie dostosujesz się pod mobilkę – wskaźnik porzuceń koszyków w tym obrębie będzie spory! Wynosi nawet aż 85%! Przecież i Ty i ja wiemy, że chcesz, by sklep konwertował. Spokojnie, są na to sposoby!
a. Dostosuj elementy strony i upewnij się, że elementy są odpowiednio duże! Muszą być nie tylko czytelne, ale i łatwo klikalne.
b. Hierarchia elementów – ustal kluczowe momenty na stronie. Mały ekran mobilki pomieści przecież mniej elementów, niż ekran komputera. Są to menu, stopka, nagłówek, sama oferta, no i CTA!
c. Wielkość liter musi mieć odzwierciedlenie w faktycznym widoku mobilnym. Tekst nie może wymagać zwiększenia przez użytkownika, czyli zbliżania strony do siebie.
d. Optymalizuj grafiki! Na telefon dobrze jest używać wersji pionowych. Wyjściem tutaj jest automatyczne skalowanie!
e. Projektuj mobilkę przed desktopem! W szeregu przypadków taka kolejność sprawdzi się lepiej. Jest to uwarunkowane na przykład znaczną częścią użytkowników, którzy zakupowe doświadczenia generują właśnie z poziomu telefonu.
5. Unikalność wizualnej strony Twojego sklepu to podstawa.
Musisz odzwierciedlić charakter marki w web designie. Nasz mózg przetwarza obraz 60 000 razy szybciej niż tekst, dlatego jesteśmy zdolni do szybkich ocen wizualnych. Ocena książki po okładce ma tu więc swoje uzasadnienie, ponieważ zaledwie 100 milisekund (!) zajmuje człowiekowi wyrobienie sobie zdania na temat nowo poznanej osoby. Mówiąc wprost – nie masz środków na kiepski design. Nie ma to sensu. Spójrz na to tak – design to pierwsze wrażenie, a co za tym idzie – oficjalna decyzja klienta, by zapoznać się z ofertą. To także opisy wizualne towarów, jakie sprzedajesz.
Co ważniejsze – dobry design tworzy więź emocjonalną, a aż 94% użytkowników rekomenduje te marki, z którymi wiąże jakąkolwiek relację.
1 lojalny klient jest wart tyle, co dziesięciu jednorazowych…
Pamiętaj więc o:
a. autentyczności marki, która prowadzi do lojalności klientów.
b. Ustal kolor przewodni, by wygląd strony sklepu był jednoznaczyn i utrzymany w pewnej palecie barwo. Okazuje się, że wybór takiej palety ma gigantyczny wpływ na percepcję. Nadajesz nimi charakter i nastrój całego brandu.
c. Używaj zawsze i wszędzie spójnych komunikatów wizualnych – zarówno w social mediach, jak i na stronie. Tworzenie takiej marki oznacza utrzymanie jednolitej tożsamości w każdym kanale marketingowym! Spójność marki ma moc – zwiększa przychody w zakresie od 10% do 20%.
d. Buduj zaufanie!
e. Pamiętaj o wysokiej jakości zdjęciach. Prezentacja wizualna produktów odgrywa rolę w eCommerce, którą trzeba obsadzić. Jeśli potencjalny klient ma do wyboru ten sam egzemplarz towaru w tej samej cenie – wybierze ten ładniejszy. To naturalne.
f. Śledź trendy w designie i projektowaniu, by zawsze być na czasie! To przyciągnie większą uwagę osób, które są Twoimi potencjalnymi klientami.
Wygląd strony sklepu – Podsumowanie
Wygląd strony sklepu jst istotny, chyba już to widzisz, prawda? Design, i nie mówię tego dlatego, że jestem przedstawicielką tej branży – zwyczajnie odgrywa kluczową rolę w budowaniu marki Twojego sklepu. Przekłada się przede wszystkim na korzyści finansowe dla Ciebie, jako właściciela czy menedżera sklepu.
Pracując nad wizualną stroną swojego sklepu zachowaj spójność i tożsamość marki – dbaj o kolorystykę, dobieraj odpowiednie fonty. Podkreślaj indywidualizm ciekawą grafiką czy innymi barwami! Pamiętaj jednak równocześnie o grupie docelowej, do której musisz się dostosować. Przeanalizuj ją, a co ważniejsze – odpowiedz na jej potrzeby i oczekiwania! I pamiętaj o fundamentach designu Twojego sklepu online! Powodzenia!