Partnerem materiału i ekspertem w dziedzinie designu oraz web developmentu jest
Motorem napędowym e-commerce jest sprzedaż – to jasne. Sklepów internetowych powstaje coraz więcej, konkurencja rośnie. Chcesz sprzedawać? Musisz się wyróżnić.
Dziś nauczę Cię, jak zrobić to za pomocą designu. Zbudujesz indywidualny charakter marki swojego sklepu, dzięki czemu zapadniesz w pamięć swoim odbiorcom, a dalej – przekujesz to w zwiększoną sprzedaż.
Nie ma znaczenia, czy:
sprzedajesz swoje własne produkty w e-commerce w modelu Direct-to-Consumer,
pracujesz w sklepie internetowym oferującym produkty różnych marek,
a może realizujesz projekty e-commerce dla klientów
– w tym artykule znajdziesz praktyczną wiedzę dla siebie. Zebraliśmy dziesiątki przykładów, gotowych wzorców do zastosowania oraz statystyk, które możesz wykorzystać przy planowaniu zmian w swoim e-commerce.
Z tego artykułu dowiesz się:
Jak dobry design e-commerce przekłada się na sprzedaż
W jaki sposób topowe e-sklepy budują pozytywne pierwsze wrażenie
Jakie dobre praktyki designu zastosować w sklepie internetowym
Z jakiego narzędzia skorzystać, aby wdrożyć unikalny design
Zacznijmy jednak od początku…
Badania McKinsey mówią jasno:
Dobry design to lepsze wyniki finansowe.
(Firmy o najwyższym wskaźniku McKinsey Design Index (pierwszy kwartyl) osiągały 2-krotnie wyższy wzrost niż konkurencja).
Z kolei w raporcie grupy Forrester możemy wyczytać, że firmy, które zainwestowały w design swojej strony zwiększają swoje przychody o średnio 20-30%. Sprawozdanie wykazało także: aż 84% menedżerów uważa dobry design za kluczowy element dla sukcesu biznesu.
Dlaczego tak się dzieje? Zmieńmy perspektywę, a wszystko będzie jasne:
Design to pierwsze wrażenie klienta
Design – dobry czy zły – to pierwsza rzecz, jaka rzuca się w oczy przy kontakcie z marką.
Kupujemy i oceniamy na podstawie wrażenia wizualnego. Mózg podświadomie podpowiada nam: ładne, spójne, tożsame = lepsze. Ten fakt jest nie do podważenia. Stanowi on jeden z fundamentów psychologii marketingu.
Design to jednak nie tylko ładne obrazki, visuale, animacje czy typografia. Bez podstawowej wiedzy i świadomości łatwo jest przesadzić. Dlatego tak ważna jest spójność, która sprowadza się do tożsamości marki.
Tożsamość to nic innego jak zbiór cech i wartości definiujących i odróżniających markę od innych. Jest to zintegrowany system elementów obejmujących m.in. nazwę, logo, wzornictwo, kolorystykę, komunikację, wartości, misję i kulturę. Jeśli tożsamość jest właściwie skonstruowana, marka będzie wzbudzać zaufanie klientów.
Niektóre firmy dopracowały tożsamość swoich marek do perfekcji:
Apple – innowacja, minimalistyczny i elegancki design, doskonała jakość oraz charakterystyczne logo: nadgryzione jabłko;
Coca-Cola – charakterystyczne czerwone logo i hasło „Taste the Feeling”. Marka kojarząca się z radością, wspólnotą i orzeźwieniem;
Airbnb – podróże i dzielenie się przestrzenią. Jej tożsamość oparta jest na wspólnotowości, otwartości, różnorodności i zaufaniu.
Dobrze wiesz, że w wyżej wymienionych markach w komunikacji wizualnej nie ma miejsca na przypadek. Doświadczasz tego jako konsument.
Prezentacje nowych produktów Apple są dopracowane do perfekcji. Coca-Cola pod kątem designu rozpatruje nawet kształt butelek i różnicuje go w zależności od kraju sprzedaży. Wszystko po to, aby design odpowiadał konsumentom (... i przynosił zyski).
Dzięki opracowywanej przez lata tożsamości marki, wyżej wymienione firmy sprawnie wykorzystują design do wprowadzania na rynek nowych produktów czy odświeżania tych dotychczasowych.
Pierwsze wrażenie klienta często jest już nacechowane pozytywnie ze względu na wcześniejsze doświadczenia z marką.
Zejdźmy jednak na ziemię. Domyślam się, że nie prowadzisz tak dużej marki jak Coca-Cola czy Apple. Masz swoją misję: prowadzisz własny sklep internetowy (lub pracujesz dla e-commerce) i potrzebujesz zwiększyć sprzedaż. Wzorujmy się na dobrych praktykach gigantów, ale rozejrzyjmy się po naszej branży sklepów internetowych:
Oto jak marki e-commerce wykorzystują design do budowania świetnego pierwszego wrażenia
Old World Kitchen
Po wejściu na stronę główną sklepu pierwszą sekcją, która przykuwa uwagę jest przywitanie. Dowiesz się tutaj, że masz do czynienia z firmą rodzinną, która lokalnie tworzy sprzedawane przez siebie produkty. Znajdziesz tutaj także odwołanie do wartości patriotycznych – Always made in the USA.
Zdjęcia? Najwyższej jakości, w wysokiej rozdzielczości. Język komunikatów? Stonowany.
Nie jest kwestią przypadku dobór kolorów na stronie:
Brąz – składa się z czerwieni, żółci oraz znacznej ilości czerni. W konsekwencji, tak jak i czerń, ma w sobie wiele powagi. Jest jednak cieplejszy. Zapewnia poczucie bezpieczeństwa, ciepło rodzinne i stabilność życiową. Jest to kolor ludzi mocno stąpających po ziemi. Oznacza ciepło, naturalność, niezawodność.
Design jest idealnie dopasowany do oferty produktowej. Niezawodne narzędzia kuchenne, które w zamyśle zbliżają do siebie rodziny – poprzez skojarzenie ze wspólnymi posiłkami.
Sklep: Old World Kitchen
Pierwsze wrażenie: doświadczenie obcowania z produktami wysokiej jakości (co daje sklepowi uzasadnienie dla wysokiej marżowości).
Boost
W tym sklepie możemy zakupić tylko jeden produkt – suplement diety. Cała strona sklepu jest w istocie stroną produktową, a zatem suplement Boost przewija się na ekranie przez całą ścieżkę zakupową.
Marka jest bardzo wyraźna, a tożsamość dopracowana do perfekcji.
Strona sklepu jest monochromatyczna. Wybór padł na kolor pomarańczowy, który łączy ze sobą fizyczność i emocje. Jest to barwa radości (choć może kojarzyć się również z frywolnością). Pomarańcz symbolizuje dążenie do osiągnięcia celu, który odpowiada za nasze szczęście. A czymże jest dobrostan i ogólny poziom zdrowia, jak nie szczęściem?
Strona sklepu jest bogata w animacje i silne copy produktowe. Uwaga odbiorcy jest cały czas skupiona na produkcie, jego funkcjonalności i korzyściach, jakie zapewnia.
Sklep: Boost
Pierwsze wrażenie: żywioł i energia (kolorystyka, komunikaty), a jednocześnie prostota (prezentacja składu produktu); w głowie odbiorcy – proste rozwiązanie na zwiększenie swojego poziomu życiowej energii.
Alaya Tea
Kolejny sklep działający w modelu D2C. Alaya Tea produkuje i sprzedaje herbaty ekologiczne – uprawiane i pozyskiwane w sposób etyczny oraz zrównoważony.
Sam design strony jest bardzo organiczny. Ale czy to nie oddaje właśnie “ducha” produktu?
Zdjęcia wykorzystane na stronie zostały dobrane w taki sposób, aby jak najlepiej odzwierciedlać produkt i jego pochodzenie. Dodatkowo możemy zauważyć tutaj pewien zabieg operowania światłem i cieniem, które potęgują skojarzenie z naturą.
Wykorzystanie kolorów na stronie również nie jest przytłaczające, raczej głównym motywem jest tutaj ziemisty, pudrowy róż, który z jednej strony może być odwołaniem do herbaty, a z drugiej do naturalnego środowiska, z jakiego wywodzi się produkt.
Sama prezentacja poszczególnych egzemplarzy jest dość minimalistyczna i statyczna, przez co powinna być prosta do osiągnięcia. To, co jest tutaj jednak istotne, to wiarygodność i tożsamość projektu z produktem.
Dodatkowo właściciele sklepu wykorzystali swoją platformę do przedstawienia misji i wartości firmy – poświęcili temu tematowi jedną z podstron. Jest to dobra praktyka, która pozwala na zbudowanie wstępnej relacji z odbiorcą.
Skoro już jesteśmy przy wykorzystaniu designu strony do budowania wiarygodności, warto wspomnieć też o zawarciu na stronie opinii klientów (czyli tzw. dowód społeczny) oraz listę podmiotów, z którymi współpracuje Alaya Tea. Taki zabieg pozwala odbiorcy poczuć się bezpieczniej podczas dokonywania zakupu.
Sklep: Alaya Tea
Pierwsze wrażenie: oferowane produkty są ekologiczne i naturalne, a zatem w głowie odbiorcy – lepsze.
Scepter & Sword
Strona sklepu Scepter&Sword to projekt e-commerce, który wyraźnie stawia na nowoczesny design, wzbogacony dawką storytellingu.
Strona wykorzystuje tutaj wariant poziomego scrollowania, które co prawda nie jest typowym rozwiązaniem, ale już od jakiegoś czasu pojawiało się w trendach web designu.
Dodatkowym unikatowym elementem jest personalizowana ikona nawigacji, w której zawarto komunikat “Scroll to navigate”. Dzięki temu podczas pierwszej wizyty na stronie użytkownik nie zgubi się pomimo nietuzinkowego designu.
Przejdę jednak do całej oprawy wizualnej, ponieważ o tym można powiedzieć naprawdę dużo. Fotografia wystylizowana na obraz, na której przedstawiona jest kobieta w królewskich szatach z winem, którego butelka imituje berło - to właśnie główny produkt, który oferuje ten e-commerce. Całość wizerunku spina hasło ,,Unlock Your Inner Queen” (“odkorkuj swoją wewnętrzną królową”) – zabawna gra słów.
Nie bez znaczenia będą tutaj też kolory i wykorzystane kroje pisma. Czerń, czerwień i złoto jako motywy przewodnie, czyli w skrócie wyrafinowanie, elegancja, siła i dostatek.
Typografia pokrywa się z wrażeniami kolorystycznymi. Łączy w sobie siłę i elegancję, co zapewnia nam tutaj kombinacja wersalików (pismo drukowane) z akcentami fontu imitującego pismo odręczne – niczym podpis w dokumencie królewskim.
Sklep: Scepter & Sword
Pierwsze wrażenie: w tym miejscu chodzi o mnie, konsumenta – o luksus, który mogę sobie zapewnić niewielkim kosztem (choć w rzeczywistości produkt jest wysokomarżowy).
Notebook Therapy
Strona skupiająca się przede wszystkim na sprzedaży dzienników i notatników. Sklep oferuje również akcesoria do ich udekorowania (i tym samym nadania unikatowego charakteru).
Sam układ sklepu jest dość standardowy, ale prezentacja produktów i akcenty graficzne dobierane są w taki sposób, aby jak najlepiej odwzorować styl prezentowanego asortymentu.
Paleta kolorystyczna jest naprawdę rozbudowana, a to wszystko przez indywidualne podejście do zdjęć produktowych. Różne kompozycje podkreślają stylistykę poszczególnych artykułów.
Nie da się jednak ukryć, że zdecydowaną przewagę stanowią tutaj pastele – błękit, róż, zieleń i beże, czyli barwy, które kojarzą się nam z delikatnością i wrażliwością.
Ikony oraz inne akcenty graficzne również podkreślają charakter oferty:
ikony imitują ilustracje wyjęte niczym z dziennika,
kompozycje graficzne naśladują pieczątki i naklejki, które często wykorzystywane są w scrap-bookach.
Cały design jest więc pewnego rodzaju zabawą konwencją prowadzenia dziennika przy jednoczesnym zachowaniu przejrzystości strony. Na plus!
Sklep: NotebookTherapy
Pierwsze wrażenie: spokój i porządek – budują poczucie, że właśnie takie emocje zapewnią produkty dostępne w sklepie.
Takich przykładów mógłbym wymieniać wiele. Nie o to jednak chodzi, nie w tym cel.
Najważniejsze, że wiesz już, jak ważne jest pierwsze wrażenie. Widzisz po powyższych przykładach, że zbudowanie świetnego pierwszego wrażenia jest możliwe. Składa się na nie wiele elementów designu e-commerce.
Omówmy je wspólnie. Zacznijmy od podstaw:
Fundamenty designu w e-commerce
Fundament #1: Nawigacja
Przyjazna nawigacja to jeden z filarów udanej witryny e-commerce. To, jak użytkownicy mogą poruszać się po stronie, ma ogromny wpływ na ich doświadczenie zakupowe.
Według statystyk przedstawionych przez TopDesignFirms:
Aż 38% osób patrzy na układ lub linki nawigacyjne podczas swojej pierwszej wizyty nas stronie.
Z kolei 42% osób opuściłoby witrynę z powodu słabej funkcjonalności
Projektowanie stron internetowych w zakresie nawigacji nie musi być trudne. Wystarczy zastosować sprawdzone rozwiązania. Poniżej znajdziesz listę najważniejszych.
Zestaw dobrych praktyk od WebWave:
#1 Przejrzyste menu: Kluczową kwestią jest używanie zrozumiałych, jednoznacznych etykiet w menu nawigacyjnym. Użytkownicy powinni od razu wiedzieć, gdzie znajdują się na stronie i jak znaleźć interesujące ich sekcje. Dlatego etykiety, takie jak Strona główna, Produkty, Blog czy Kontakt są popularne i zrozumiałe dla większości internautów.
#2 Funkcjonalna wyszukiwarka: Drugim ważnym elementem jest widoczny i łatwo dostępny pasek wyszukiwania. Dla wygody użytkowników warto również dodać funkcję autouzupełniania, która sugeruje wyniki podczas wpisywania zapytania.
Przy wpisywaniu poszukiwanej frazy wyszukiwarka w sklepie bliss podpowiada od razu odpowiednie produkty.
#3 Właściwe linki w stopce: Stopka strony jest trochę jak drugie menu. Jednak w tym miejscu możemy zawrzeć trochę więcej linkowań wewnętrznych i zewnętrznych. To tutaj użytkownicy zazwyczaj szukają informacji takich jak polityka wysyłki, zwroty czy kontakt. I muszą mieć możliwość je tam znaleźć. W innym przypadku poczują się zagubieni.
#4 Filtry, kategorie i sortowanie: W przypadku gdy sklep oferuje wiele produktów, ważne jest zapewnienie kompleksowych filtrów, które umożliwią użytkownikom szybkie odnalezienie interesujących ich produktów. Filtry według ceny, koloru czy kategorii należą do tych podstawowych.
#5 Nawigacja breadcrumbs: Element nawigacji pomagający użytkownikom zrozumieć, gdzie się znajdują na stronie i jakie mają dostępne ścieżki do innych sekcji. Jest to szczególnie ważne dla sklepów o dużym asortymentem.
Dzięki nawigacji breadcrumbs, klienci sklepu The Horse mogą w łatwy sposób cofnąć się do wybranej kategorii produktów.
#6 Intuicyjne ikony: Używając na stronie ikon, należy się upewnić, że są one szeroko rozpoznawalne i zrozumiałe dla większości odbiorców. Dobrym przykładem jest ikona lupki oznaczająca pole wyszukiwania. Poza samą rozpoznawalnością istotna jest też ich spójność – m.in. pod względem formy, grubości i kolorystyki.
#7 Właściwa konfiguracja menu głównego: Lokalizacja menu nawigacyjnego na górze strony (poziomo) jest powszechnie uważana za najbardziej intuicyjną. Warto jednak dostosować ją do rodzaju strony i ilości kategorii (oraz ewentualnych podkategorii). W przypadku niektórych produktów menu pionowe może być bardziej efektywne.
#8 Sticky menu: "Przyklejone" menu (zwane też czasem płynącym) to nawigacja, która pozostaje widoczna na górze strony podczas przewijania. To ułatwia dostęp do menu w każdym momencie i jest szczególnie przydatne na stronach o dużym zakresie treści.
Pora na omówienie drugiego fundamentu designu e-commerce:
Fundament #2: Przejrzysty proces zakupowy
Jak informuje raport Baymard Institute:
18% porzuceń koszyka ma związek ze zbyt skomplikowanym procesem zakupowym.
Nie dość, że to duża liczba, to jeszcze odzwierciedla ogromne straty…
Mówimy przecież o użytkownikach, którzy są praktycznie o krok od zamówienia w e-sklepie. Decyzja o zakupie została w ich głowach już podjęta. A jednak porzucają koszyk, bo nie mają cierpliwości do źle zaprojektowanego procesu zakupowego.
Postawmy sprawę jasno:
Przejrzysty proces zakupowy przekłada się bezpośrednio na większą sprzedaż w e-commerce (zmniejsza współczynnik odrzuceń).
Zbudowanie takiego przejrzystego procesu wcale nie jest trudne. Sprawdź kilka naszych porad poniżej.
Zestaw dobrych praktyk od WebWave:
#1 Czytelne CTA: Podczas tworzenia komunikatów call-to-action należy unikać używania zbyt ogólnikowych zwrotów – np. Kontynuuj – szczególnie gdy na stronie mamy wiele wątków i użytkownik nie będzie po prostu wiedział, co ma kontynuować. Zamiast tego najlepiej stosować jasne i konkretne hasła, które bezpośrednio sugerują, co się stanie po kliknięciu, np. Przejdź do podsumowania, Dodaj do koszyka.
Wishtrend stawia na wyraźne przyciski “dodaj do koszyka” i “kup teraz”
Po dodaniu produktu do koszyka, warto wyświetlić użytkownikowi okienko z podsumowaniem – tak jak robi to sklep internetowy Blume:
Blume - okienko z podsumowaniem koszyka po dodaniu produktu do koszyka
#2 Prosty i intuicyjny check-out: Nieodpowiednie przeprowadzenie użytkownika przez proces zakupu może spowodować, że zrezygnuje z finalizacji transakcji.
Czytelne podsumowanie koszyka i przycisk przejścia do kasy w OfficeSupply.com
Poniższe elementy mogą pomóc uniknąć porzucenia koszyka:
Pasek postępu: Jeśli proces zakupowy składa się z wielu etapów, zastanówmy się nad dodaniem paska postępu, który pomoże użytkownikom zrozumieć, na którym z etapów się znajdują.
Koszyk typu one-pager: Jeśli to możliwe warto zdecydować się na jednostronicowe przejście przez proces zakupowy. Możemy do tego wykorzystać tzw. harmonijkę. Dzięki temu użytkownicy mogą łatwo przemieszczać się między sekcjami i widzą, ile jeszcze zostało do wypełnienia. Najważniejsze informacje najlepiej zawrzeć jednak na górze.
Ważne: Stosując to rozwiązanie, należy jednak pamiętać o pozostawieniu możliwości edycji/cofnięcia się do poprzednich sekcji.
#3 Wyświetlanie odpowiednich wariantów produktów: Jeśli oferujesz w swoim e-commerce różne warianty produktów (kolory czy rozmiary), upewnij się, że miniatury produktów pokazują odpowiedni model. W momencie gdy użytkownik kliknie w wariant zielony zdjęcia produktowe powinny temu odpowiadać.
Mamy to! Pora na kolejny aspekt designu istotny z punktu widzenia e-commerce:
Fundament #3: Łatwo konsumowalne treści
Technologia zmieniła w naszym życiu wszystko. Internet nie tylko dał możliwość powstania e-commerce. Doprowadził również do zmian w zakresie konsumowania treści. Badania eye-trackingu Nielsena mówią wprost:
Odwiedzający stronę internetową spędzają na niej średnio 19 sekund, skanując wzrokiem średnio 72 elementy strony.
Nie ma mowy o czytaniu. Tutaj liczą się krótkie hasła, obrazy czy animacje.
Inne badanie, przeprowadzone przez Conversion XL, wskazuje, że zdecydowana większość internautów (blisko 100%) czyta tytuły, podsumowania czy podpisy pod zdjęciami. W przypadku dłuższej treści takiej jak artykuł, uwaga spada i mało który użytkownik zapoznaje się z pełną treścią, a najczęściej czyta tylko pojedyncze fragmenty tekstu.
Według badania, elementami, które przyciągają uwagę odbiorców są:
nagłówki
linki
listy punktowane
oraz pogrubienie tekstu.
Niezwykle czytelna strona produktowa w sklepie Byredo
Wiesz już, że utrzymanie uwagi odbiorcy w internecie jest trudne. Twój czas jest ograniczony. Musisz dobrze zaplanować treści w swoim e-commerce, a zwłaszcza na stronach produktowych. Pomoże Ci w tym nasza ściągawka.
Zestaw dobrych praktyk od WebWave:
#1 Język korzyści: W treści opisującej produkt należy uwzględnić zarówno jego cechy, jak i korzyści, jakie niesie dla klienta. – np. smartwatch: Jaki jest? Jakie ma funkcje? Jak przełoży się to na życie konsumenta?
#2 Krótkie CTA: Przyciski oraz komunikaty call-to-action powinny być czytelne i niewymagające dekodowania. Stosujemy zasadę: użytkownik musi zrozumieć CTA w 5 sekund, inaczej go nie zarejestruje.
#3 Pokaż zysk, a nie stratę: Podczas opisywania produktów skup się na korzyściach, jakie klient osiągnie dzięki zakupowi, zamiast na tym, co musi “poświęcić”, na to, by to zdobyć (ile musi wydać). Odciągnij uwagę klienta od ceny, aby zamiast myśleć na przykład “wydaję 300 zł na buty” myślał “zyskuję dzięki temu zakupowi lepszy outfit”.
#4 Spójny język: W komunikacji na stronie (ale też poza nią) należy postawić na spójny komunikat. Nie chodzi tutaj tylko o sam przekaz, ale również o język i styl, w jakim zostanie dostarczony komunikat. W dużej mierze będzie to uwarunkowane grupą docelową. Istotne jest też ujednolicenie perspektywy - “nasze”, “moje” czy “Twoje”. Stosuj tylko jedną z tych form w swoich treściach.
#5 Odpowiedni widok listy produktów: Najpewniejszym wyborem będzie widok zbudowany na gridzie (siatce) lub w formie listy. To, który będzie najlepszy, zależy od rodzaju produktów oferowanych w e-sklepie. – Produkty “wizualne” (np. odzież lub akcesoria) znacznie lepiej prezentują się w widoku siatki (zazwyczaj do 4 w rzędzie). Z kolei produkty z wieloma parametrami (np. elektronika - laptopy, smartfony) lepiej prezentować w widoku listy.
Sklep MeowMeowTweet prezentuje swoje produkty w widoku typu grid
#6 Wyświetlanie recenzji: Opinie i oceny produktów to tzw. dowód społeczny. Można umieszczać je zarówno na stronie głównej sklepu, jak i kartach produktowych. Według BrightLocal aż 84% ludzi ufa opiniom w tym samym stopniu co bezpośrednim rekomendacjom (np. od znajomych).
#7 Opcji płatności na stronie produktu: Jeśli oferujesz wiele opcji płatności, rozważ umieszczenie tej informacji jeszcze na stronie produktowej. Niektórzy klienci preferują formy płatności, które nie wszędzie się jeszcze spopularyzowały (np. BLIK). Świadomość, że są dostępne w Twoim sklepie w kontrze do niewiadomej w innym (dowiedzieliby się dopiero na poziomie strony zamówienia) może doprowadzić do zakupu właśnie w Twoim sklepie.
Koniecznie dodaj informację o planach ratalnych, jeśli takie oferujesz (np. Klarna, PayPo). Zwłaszcza w przypadku, gdy koszt jednostkowy zakupu Twoich produktów jest wysoki. Opcje ratalne w istocie zwiększają w takich przypadkach konwersję.
#8 Prowadzenie bloga: Blog może być doskonałym uzupełnieniem i sposobem na budowanie autorytetu w branży. Wspiera klientów w ich decyzjach zakupowych. Stanowi świetne miejsce do głębszej prezentacji oferty produktowej. Regularnie publikowane, jakościowe artykuły (w tym recenzje, porównanie produktów) pozwalają na przyciągnięcie uwagi nowych czytelników i zwiększenie konwersji z obecnych. Dodatkowo prowadzenie bloga wpływa na pozycjonowanie (SEO).
A skoro o treściach mówiliśmy, to warto pamiętać o dostępności na wielu urządzeniach:
Fundament #4: Optymalizacja pod mobile
Postawmy sprawę jasno: tworzenie stron responsywnych to w obecnych czasach nie tyle dobra praktyka, co konieczność. Tyczy się to również stron internetowych e-sklepów.
Skąd ta pewność?
Jednocześnie aż 67% użytkowników mobilnych zgłasza, że strony często nie są dostosowane do urządzeń przenośnych – linki i strony są zbyt małe, żeby móc je wygodnie kliknąć (a zatem nawigować po stronie czy sklepie internetowym) [źródło].
Nic dziwnego zatem, że wskaźnik porzucenia koszyka na urządzeniach mobilnych wynosi aż 85,65% – informuje Barilliance.
Skoro jesteśmy przy “procentach”... Jestem w 100% pewien, że nie chcesz, aby Twój sklep internetowy osiągał tak przeciętne wyniki, aby powyższa statystyka stała się Twoją rzeczywistością. Mamy na to rozwiązanie – zastosuj się do poniższych porad.
Zestaw dobrych praktyk od WebWave:
#1 Dostosowanie elementów strony: Koniecznie upewnij się, że wszystkie elementy strony, takie jak przyciski CTA, formularze i menu nawigacyjne, są przyjazne dla użytkowników korzystających z ekranów dotykowych. Pamiętaj, że wyżej wymienione elementy nie tylko mają być czytelne, ale również łatwo klikalne. Istotne jest więc dostosowanie rozmiarów, odstępów i kształtów w poszczególnych widokach.
#2 Ustalenie kluczowych elementów strony: Mały ekran urządzenia mobilnego, przede wszystkim smartfona, pomieści dużo mniej elementów niż ekran komputera. Niezwykle ważne jest zatem zidentyfikowanie kluczowych elementów strony (np. menu, stopka, nagłówki, oferta, CTA) – co usprawni proces projektowy. Znacznie łatwiej zdecydować wtedy, z czego śmiało można zrezygnować w wersji na mobile, tudzież na odwrót – które elementy powinny być wyciągnięte na pierwszy widok (i na przykład większe).
#3 Wielkość fontu na urządzeniach mobilnych: Koniecznie zadbaj o odpowiednią wielkość fontu na stronie mobilnej, aby tekst był czytelny i nie wymagał powiększania przez użytkownika (zbliżania fragmentu strony).
#4 Dostosowanie grafik: Grafiki na stronie powinny być zoptymalizowane pod kątem różnych widoków urządzeń mobilnych. – na komputerze grafika główna będzie najczęściej wyświetlała się w wersji poziomej (landscape), a na telefonie w pionowej (portet). Grafiki muszą zostać dopasowane do poszczególnych rozdzielczości, a nie tylko automatycznie skalowane. Zobacz przykład poniżej:
Sklep Zulu Time Longines został zaprojektowany od podstaw pod urządzenia mobilne.
#5 Projektowanie wersji mobilnej przed desktopową: W niektórych przypadkach zaleca się projektowanie wersji mobilnej strony przed desktopową. Jest to uwarunkowane m.in. tym, że znaczna część użytkowników rozpoczyna swoje doświadczenie zakupowe właśnie z pozycji telefonu – chociażby przychodząc z reklam na social mediach.
#6 Klikalność ikon i zminimalizowany format menu: W wersji responsywnej należy upewnić się, że wszystkie ikony są łatwe do kliknięcia (w zasięgu palca). Z kolei menu “pakujemy” w formę ikonki – najpopularniejszy będzie tutaj tzw. hamburger (3 poziome kreski), ale do wyboru mamy też inne – kebab (3 poziome kropki) czy czekolada (po 3 kwadraty w 3 rzędach)
Znasz już fundamenty designu w e-commerce. Zadbanie o wcześniej wymienione aspekty przynosi bardzo wymierne korzyści. Design to jednak nie tylko użyteczność dla użytkownika. W designie zawiera się również tożsamość marki. Spaja ona wszystkie wyżej wymienione elementy. Jest kropką nad i. Wisienką na torcie.
Bez silnego brandu znikniesz pośród konkurencji. Nie wystarczy jednak tylko pomysł w Twojej głowie. Twój sklep e-commerce musi odzwierciedlać w designie wartości i komunikat Twojej marki. Omówmy sobie ten temat bardziej szczegółowo:
Klucz do sukcesu w e-commerce: Unikalność designu
Ludzki umysł przetwarza obraz 60000 razy szybciej niż tekst – podaje IFVP. Jesteśmy stworzeni do szybkich ocen. Jak mówi przysłowie, oceniamy książkę po okładce.
Konkretnie:
Zaledwie 100 milisekund zajmuje nam wyrobienie sobie wstępnej opinii na temat nowo poznanej osoby – według badania Princeton University.
A jak to wygląda w przypadku stron internetowych? Jeszcze “lepiej”!
(źródło).
Powiem wprost… Nie stać Cię na kiepski design!
Spójrz na to w ten sposób – design to:
Pierwsze wrażenie i decyzja użytkownika, aby zapoznać się z ofertą w Twoim e-commerce.
Świetne wizualnie opisy produktów, które prowadzą do zakupu.
A wreszcie doświadczenie użytkownika, które buduje jego lojalność.
Statystyki mówią jasno:
94% konsumentów rekomenduje marki, z którymi ma więź emocjonalną.
65% przychodu firm pochodzi od klientów, którzy znali wcześniej markę firmy.
1 lojalny klient jest warty tyle samo co 10 klientów jednorazowych
Myślę, że nie muszę Cię dalej przekonywać, że unikalność w Twoim e-commerce jest kluczowa. Dowiedz się, jak zadbać o to, aby ją osiągnąć.
Zestaw dobrych praktyk od WebWave:
#1 Autentyczność marki: Jeden z kluczowych aspektów, który pozwala na przyciągnięcie, a następnie zbudowanie relacji z odbiorcami – Według statystyk przedstawionych przez Nosto uważa tak ponad 88% konsumentów. Docelowo autentyczność prowadzi do zdobycia lojalnych klientów. Nie chodzi tylko o samą strategię czy produkowanie i prezentowanie produktów, ale o wierność swoim wartościom oraz misji.
#2 Kolor przewodni: Wybór odpowiedniej palety kolorystycznej ma ogromny wpływ na percepcję marki przez klientów. Nadajemy w ten sposób charakter i nastrój. Kluczowe jest jednak stosowanie koloru (kolorów) przewodniego. Mówimy o sytuacji, gdy zdefiniowany wcześniej kolor używasz we wszystkich materiałach na stronie, jak i na przykład w mediach społecznościowych. Stosowanie koloru przewodniego przez markę zwiększa jej rozpoznawalność aż o 80 procent – podaje Reboot.
#3 Spójność we wszystkich kanałach marketingowych i na stronie: Tworzenie spójnej marki oznacza utrzymanie jednolitej tożsamości w każdym kanale marketingowym i na stronie internetowej. Ludzie zwykle zapamiętują markę dopiero po kilku interakcjach (ok. 5), dlatego utrzymanie spójności pomaga w budowaniu świadomości. Raport przedstawiony State of Brand Consistency pokazał, że spójność brandu potrafi zwiększyć przychody w zakresie od 10% do 20%.
#4 Budowanie Zaufania: Statystyki przedstawione przez Salsify mówią same za siebie: klienci są gotowi zapłacić więcej za produkty od marek, którym ufają. Warto więc zachować pewną dozę transparentności (tutaj potwierdza się jak istotna jest autentyczność) i rzetelnie podchodzić do swojej oferty – zadbać o jakość i właściwą obsługę. Rozważ stosowanie elementów wzbudzających zaufanie takich jak certyfikaty, user-generated content (np. realne opinie klientów) itp.
#5 Wykorzystywanie wysokiej jakości zdjęć: Prezentacja wizualna produktów odgrywa kluczową rolę w e-commerce. Jeśli potencjalny klient ma do wyboru teoretycznie ten sam egzemplarz w tej samej cenie, a jedyną różnicą jest tylko sposób jego prezentacji, to najprawdopodobniej jego decyzje ugruntuje atrakcyjne zdjęcie lub animacja. Użycie wysokiej jakości zdjęć pomaga przekonać klientów do zakupu i wspiera profesjonalny wizerunek firmy.
#6 Świadomość trendów: Świat designu i marketingu nieustannie się zmienia. Śledzenie najnowszych trendów – typograficznych, dotyczących wykorzystania (mikro)animacji w prezentacji produktów, sprawi, że e-commerce będzie zawsze na czasie i przyciągnie uwagę osób, które obecnie są potencjalnymi klientami.
Oczywiście nie warto iść w trendy na ślepo, a raczej wybrać te, które korelują z marką.
Tutaj znajdziesz kilka aktualnych trendów:
Powrót do 00’ – tak jak w modzie, stylistyka z początku lat dwutysięcznych zyskała swoje drugie życie (m.in. w postaci rozwiązań graficznych rodem z epoki Flasha i klipartów).
Maksymalizm i brutalizm – asymetryczne elementy, kontrasty, brak proporcji czy chociażby zestawienie ciężkiej typografii z intensywnymi kolorami
Prawdziwe ujęcia – pokazanie ludzi lub produktów w autentycznym, pozbawionym filtrów środowisku.
Zobacz w jak śmiały sposób marka Flyers wykorzystuje na swojej stronie mikroanimacje.
Masz pomysł na swój brand e-commerce. Być może masz już brand booka. Wiesz, że potrzebujesz zadbać o design i chcesz, aby strona Twojego e-sklepu wyróżniała się unikalnością. Pytanie brzmi – jak technicznie zrealizować taki projekt? Już tłumaczę:
Wyzwania związane z budową unikalnej strony e-commerce [+moje rozwiązanie]
Zbudowanie prostej strony czy sklepu e-commerce nie stanowi w dzisiejszych czasach większego problemu. Sprawa się komplikuje, gdy masz konkretną wizję na swój e-sklep.
WordPress i inne rozwiązania ograniczają Cię do gotowych szablonów lub funkcjonalności, które akurat zapewniają ta czy inna wtyczka.
Owszem, na rynku znajdziesz specjalistów gotowych wdrożyć Twoją wizję strony e-commerce w życie… Pytanie tylko, czy koszt rzędu kilkunastu tysięcy za 100h pracy doświadczonego programisty jest do przełknięcia dla Ciebie?
Zbudowanie tak efektownej strony e-commerce jak Dang Foods może kosztować kilkanaście do kilkudziesięciu tysięcy złotych… Ale czy na pewno?
Wydaje się zatem, że masz na stole dwie opcje:
Zainwestować w unikalny design strony swojego e-commerce
Pójść na kompromis i zrezygnować z efektywnej strony internetowej
Nie jest to jednak prawda. Istnieje jeszcze jedna możliwość:
Chciałbym Ci powiedzieć kilka słów o rozwiązaniu, jakie stworzyliśmy dla osób takich jak Ty. Zbudowaliśmy kreator stron www, za pomocą którego samodzielnie stworzysz stronę lub sklep internetowy. Zaawansowane animacje i efekty graficzne wprowadzisz natomiast kilkoma kliknięciami.
Kreator stron – unikalny design bez programisty
Firma Statista, przeprowadzając swoje badanie w 2023 roku, wykazała, że aż 44% przedsiębiorców korzysta z kreatorów stron do tworzenia swoich stron internetowych.
Globalny trend zdobywa coraz szerszy krąg zainteresowanych również w Polsce. Nic dziwnego. Jak podaje HubSpot, 67% przedsiębiorców jest zadowolonych z wyboru kreatora stron, w 53% przypadków pozwoliły im one zwiększyć sprzedaż.
Na główny powód wykorzystania narzędzia typu kreator stron www użytkownicy wskazują łatwość w użyciu. Nie bez znaczenia jest również możliwość zbudowania własnej witryny lub e-sklepu bez konieczności posiadania wiedzy technicznej.
WebWave to kreator stron www oferujący animacje i inne zaawansowane funkcje graficzne out-of-box, za pomocą kilku kliknięć:
Zaczepienie elementów podczas scrollowania strony
Efekty wizualne po najechaniu kursorem na element
Pokazywanie i ukrywanie elementów po kliknięciu
Efekty Parallax czy Ken Burns
i wiele innych.
Dzięki zaawansowanym funkcjom graficznym oferowanym przez kreator, w WebWave powstała między innymi strona internetowa Pani Danuty Stenki.
Przykład wykorzystania efektów wizualnych kreatora stron www na stronie Pani Danuty Stenki
WebWave oferuje możliwość stworzenia własnej strony internetowej lub e-sklepu w jeden wieczór. Pracę nad własną stroną przyspieszają udostępnione przez kreator szablony stron internetowych oraz opracowany przez firmę kurs tworzenia stron internetowych.
Na koniec dodam, że we wrześniu liczba użytkowników WebWave przekroczyła 600 000. Użytkownicy kreatora najbardziej cenią sobie brak ograniczeń w zakresie tworzenia własnej strony lub sklepu internetowego. Stwórz dokładnie taką stronę, jaką chcesz – to motto WebWave.
Jeśli nie chcesz iść na kompromisy w kwestii designu Twojego e-commerce, a jednocześnie inwestycja rzędu kilkunastu tysięcy złotych jest poza Twoim zasięgiem, zachęcam Cię do wypróbowania WebWave.
Design w e-commerce. Podsumowanie
Podsumujmy sobie wszystkie zebrane do tej pory wiadomości. Design odgrywa kluczową rolę w budowaniu marki e-sklepu. Przekłada się wprost na wymierne korzyści biznesowe dla Ciebie jako właściciela czy menedżera sklepu internetowego.
Pracując nad designem dla swojego e-sklepu postaraj się przede wszystkim zachować spójność i tożsamość swojej marki.
Podkreśl swój indywidualizm ciekawą grafiką, kolorami czy wyróżniającymi się opisami. Pamiętaj przy tym o swojej grupie docelowej – dokładnie przeanalizuj, czego mogą szukać na stronie i jakie elementy przyciągną ich na dłużej.
Nie zapomnij jednak o fundamentach designu e-commerce, które wymieniłem w tym artykule!
Powodzenia.
Szymon Barczak
Marketing Manager WebWave Polska
Ponad 10 lat doświadczenia w digital marketingu. Pracował dla takich marek jak: Samsung, Estée Lauder, Trusted Shops, NapoleonCat czy Plenti. Entuzjasta servant leadershipu. Odpowiada za rozwój bazy klientów WebWave na rynku polskim.
