11 wskazówek dotyczących projektowania witryn internetowych, aby zwiększyć konwersję w sklepie internetowym
Opublikowany: 2020-12-17Wraz z upływem czasu i technologii, które płyną po naszej stronie, uruchomienie sklepu internetowego stało się łatwiejsze niż kiedykolwiek. Ludzie zwykle przenoszą swoje firmy do sieci i nadają im formę witryny eCommerce w celu przyciągnięcia odwiedzających online i poprawy sprzedaży.
Skuteczna witryna eCommerce składa się z wielu elementów, a projektowanie witryn jest nieodzowną częścią. Możliwość prezentacji Twojego sklepu internetowego, w tym produktów, stron docelowych, ofert itp. Jest czynnikiem krytycznym i należy ją uwzględnić.
W tym artykule podzielę się wskazówkami dotyczącymi projektowania witryn eCommerce, aby zwiększyć liczbę konwersji. Ale przedtem powiem ci, dlaczego skupienie się na unikalnym projekcie strony internetowej jest niezbędne.
Dlaczego atrakcyjny projekt witryny jest ważny?
Czy wiesz, że pierwsze wrażenia z witryny są w 94% związane z projektem, a oceny wiarygodności witryny w 75% oparte są na ogólnej estetyce witryny?
Potwierdza to wpływ projektu strony internetowej na wiarygodność, konwersje i sukces Twojej witryny. Masz bardzo mało czasu na wywarcie pierwszego wrażenia na odbiorcach swojej witryny. Nie tylko to, ale dobry projekt strony internetowej pomaga również w pozycjonowaniu i pozycjonowaniu witryny w SERP. Wszyscy wiemy, że jest to jedna rzecz, której nie możemy ignorować.
Ludzie zawsze będą oceniać Ciebie i Twoją firmę na podstawie doświadczenia oferowanego im podczas przeglądania Twojej witryny. W cyfrowym świecie biznesu projekt Twojej witryny jest przedstawicielem klienta.
Kiedy prowadzisz biznes eCommerce, klienci dokonują transakcji w Twojej witrynie. Jeśli ci nie ufają, nie kupią od ciebie.
Tak, dobrze słyszałeś.
Aby przekonwertować użytkowników, konieczne jest, aby ci uwierzyli, a projekt witryny odgrywa w tym kluczową rolę.
Pozwólcie, że podzielę się kilkoma otwierającymi oczy statystykami projektowania witryn eCommerce:
- 57% internautów nie poleci nikomu Twojej witryny, jeśli jest źle zaprojektowana, zwłaszcza na urządzeniach mobilnych.
- 38% osób przestanie korzystać z witryny o nieatrakcyjnym układzie.
- 88% klientów rzadziej wraca do witryny po przykrym doświadczeniu.
- Powolne ładowanie stron internetowych kosztuje sprzedawców detalicznych 2,6 mld USD rocznej straty ze sprzedaży.
- 75% osób ocenia wiarygodność biznesu internetowego na podstawie projektu strony internetowej.
Do tej pory musieliście zrozumieć, jak ważne jest stworzenie wysoce zoptymalizowanego projektu strony internetowej. Wszystko po to, abyś zrozumiał, że to projekt Twojej witryny eCommerce zadecyduje o tym, jak użytkownicy będą postrzegać Twój biznes. Zły projekt strony internetowej może stać się potencjalnym wrogiem wiarygodności Twojej firmy.
Wskazówki dotyczące tworzenia atrakcyjnego projektu witryny eCommerce w 2020 r
Przechodzę teraz do najważniejszej części artykułu. Sprawdźmy kilka naprawdę ważnych wskazówek dotyczących witryny eCommerce, aby zwiększyć konwersje i zdobyć tych potencjalnych klientów:
1. Utrzymuj spójność marki w swojej witrynie
Marka ma duży wpływ na konwersje w witrynie. Przyjrzyjmy się marce, która opanowała sztukę brandingu - Apple.
Apple oszczędnie obsypuje brandingiem całą swoją stronę. Jeśli przejrzysz ich witrynę, zobaczysz, że subtelnie przedstawili elementy marki na stronach docelowych, nie powodując przy tym przytłaczania ich użytkowników.
Oto kluczowe punkty, na które chciałbym zwrócić uwagę na przykładzie Apple:
- Unikalne logo umieszczone w idealnym miejscu, które jest widoczne i jednocześnie nie przytłacza.
- Krótki tekst opisujący cele i zadania organizacji oraz przekazujący przesłanie odbiorcom.
- W połączeniu z eleganckim wizerunkiem produktu.
Budowanie marki jest jak opowiadanie historii, która jest często źle rozumiana. Branding to nie tylko logo, estetyka projektu czy cele firmy; jest to raczej połączenie wszystkich trzech elementów. Tak więc przekształcenie firmy w markę wymaga opowiedzenia odbiorcom właściwej historii, czegoś, czego publiczność chce słuchać i czytać.
2. Zapewnij miejsce na elementy witryny
Negatywne przestrzenie odgrywają ważną rolę w poprawianiu wyglądu witryny. Ale spacje nie powinny być implementowane w sposób, który powoduje, że strony wyglądają na niezręcznie puste. Zamiast tego skup się na pozostawieniu miejsca na elementy witryny.
Sprawdź poniższy przykład ze strony domowej MakeWebBetter:
Widać, że spacje negatywne są używane w taki sposób, że elementy witryny są wyraźnie widoczne dla odwiedzającego. Projektując witrynę eCommerce, wykorzystaj marginesy i dopełnienie i pozwól, aby elementy na stronie oddychały wizualnie.
Oto kilka punktów, które warto wziąć pod uwagę jako ważną część zwycięskiej strategii projektowania witryny:
- Białe spacje umożliwiają odwiedzającym przeglądanie Twojej strony podczas tworzenia przerwy na stronie.
- Dzięki ujemnej przestrzeni użytkownicy mogą udoskonalić określone elementy witryny internetowej. Możesz także podkreślić scentralizowany przekaz swojej witryny internetowej.
- Ujemne spacje pozwalają właścicielowi witryny subtelnie kontrolować przepływ strony.
- Wreszcie, co najważniejsze, białe spacje sprawiają, że ważne elementy witryny, takie jak wezwania do działania, wyglądają na dobrze zdefiniowane.
W projektowaniu witryn eCommerce białe lub negatywne przestrzenie odgrywają znaczącą rolę w kształtowaniu doświadczenia użytkownika i nie powinny być refleksją.
3. Nigdy nie przytłaczaj użytkowników zbyt wieloma opcjami
Gdy użytkownik odwiedza Twoją witrynę, chcesz, aby podejmował szybkie działania. Jednak wielu właścicieli witryn przytłacza użytkowników wieloma opcjami.
Zrozummy tę teorię za pomocą prawa Hicka-Hymana, które opisuje czas potrzebny osobie na podjęcie decyzji w wyniku możliwych wyborów.
Zgodnie z prawem, im większy wybór dajemy użytkownikowi; tym dłużej zajmie im podjęcie decyzji. W konsekwencji zwiększają swoje szanse na opuszczenie witryny. Jest jeszcze jeden fakt, który możemy wywnioskować z tego prawa:
Ludzie mogą się poddać.
Tak, dobrze przeczytałeś.
Kiedy ludzie są przytłoczeni dostępnymi wyborami, mają tendencję do rezygnacji i jest to znane jako paraliż analityczny. Jeśli nie chcesz stawiać odwiedzających w takiej sytuacji, zastosuj następujące techniki:
- Ogranicz liczbę opcji.
- Daj różne możliwości.
- Twórz spersonalizowane rekomendacje.
- Zachęcaj do szybkiego podejmowania decyzji.
4. Zasada trójpodziału - technika stosowana w sztukach plastycznych
The Rule Of Thirds to odwieczna technika używana w sztukach pięknych i fotografii do komponowania treści wizualnych, takich jak obrazy, filmy i zdjęcia. Ale obecnie techniki te stały się niezwykle popularne wśród projektantów stron internetowych.
Wszystko zaczyna się od nałożenia na siebie dwóch poziomych i dwóch pionowych linii, które są równomiernie rozmieszczone podczas projektowania witryny.
Kropki odnoszą się do punktów, w których oko użytkownika dryfuje organicznie podczas patrzenia na scenę, czy to krajobraz, czy stronę internetową. Teraz wiesz, gdzie umieścić ważne elementy witryny, aby można było je wykorzystać w pełni.
Tak więc tę strategię kompozycyjną można wdrożyć na dowolnym typie strony internetowej.
Kompozycja jest ważnym elementem w projektowaniu stron internetowych. Nie ma znaczenia, jak kreatywny jesteś ze swoimi czcionkami i obrazami, jeśli są one przedstawiane użytkownikom w niechlujnej formie. Zatem zasada trójpodziału działa jako pomocnicza teoria w organizowaniu ogólnego układu stron internetowych.
Przyjrzyjmy się Adamasowi:
W powyższym przykładzie strona główna i część widoczna po przewinięciu to kluczowe obszary, w których obowiązuje zasada trzeciej. Powód tego - część powyżej zakładki to miejsce, w którym gromadzone są główne informacje o witrynie.
5. Wolne ładowanie stron może spowodować spadek sprzedaży
Stworzenie niesamowitego projektu strony internetowej nie wystarczy. Musisz nie tylko stworzyć imponującą witrynę, ale także skupić się na jej wydajności. Szybkie ładowanie stron jest ważne, aby uniknąć współczynników odrzuceń i umożliwić odwiedzającym pozostanie w Twojej witrynie.
Ludzie nienawidzą wolno ładujących się stron, a odbiorcy tracą zainteresowanie takimi witrynami. W ten sposób czyniąc ich odpowiedzialnymi za spadek sprzedaży. Możesz dowiedzieć się o wydajności swojej strony z Google Page Speed Insights.
Głównym celem witryny eCommerce jest zwiększenie konwersji, w tym celu należy skrócić czas ładowania strony. Podstawowe rzeczy, takie jak kompresja obrazów, mogą być wielkim wybawieniem.
Inne techniki optymalizacji ładowania strony to:
- Zainwestuj w szybką i niezawodną usługę hostingową.
- Rozłóż ładunek treści za pomocą sieci dostarczania treści (CDN).
- Użyj minimalnej liczby wyskakujących okienek w swojej witrynie.
- Zminimalizuj kody, usuwając źle zakodowany kod HTML, CSS i JavaScript ze swojej strony internetowej
- Zmniejsz liczbę przekierowań i uszkodzonych linków.
Zawsze kompresuj obrazy przed przesłaniem i trzymaj je nie większe niż wymagane na ekranie.
Do tego celu możesz wybrać dowolną bezpłatną lub lekką wtyczkę premium.
6. Breadcrumbs do wskazywania właściwych wskazówek
Czy widziałeś tablice informacyjne w mailach lub na stacjach metra z napisem „Jesteś tutaj”? Breadcrumbs działają jak szyldy dla odwiedzających Twoją witrynę.
Breadcrumb to schemat nawigacji używany przez właścicieli witryn do ujawniania lokalizacji użytkownika w witrynie.
Okruchy chleba zapewniają odwiedzającym elastyczność w wyświetlaniu dowolnej strony w zależności od tego, w jaki sposób przybyli, unikając w ten sposób poczucia zagubienia. Witryny e-commerce mają na ogół dziesiątki lub nawet setki zagnieżdżonych kategorii, co zwiększa prawdopodobieństwo zagubienia się odwiedzających.
Okruszki pomagają również użytkownikom w sprawnym przeglądaniu produktów i dokonywaniu zakupów. Breadcrumbs pozwala klientom bezproblemowo przechodzić przez różne strony internetowe.
7. Wybierz kolory i kontrast, aby wyróżniać się od reszty
Kolor i kontrast odgrywają ważną rolę w odróżnianiu Twoich witryn od innych. Kontrast oddaje sprawiedliwość ważnym elementom witryny, takim jak wezwania do działania lub logo, a nawet ważne elementy treści.
Sprawdź poniższy przykład:
MyProtein wykorzystało połączenie kolorów i kontrastu, aby podkreślić ważne elementy, takie jak logo marki i ważne oferty na produktach.
8. Zastosuj zasadę Gestalt dla podobieństwa
Zasada Gestalt jest również znana jako zasada grupowania. Prawo wyjaśnia argument, że umysł ma wrodzoną skłonność do postrzegania wzorców w bodźcu w oparciu o pewne reguły. Oznacza to po prostu, że ludzki mózg ma tendencję do automatycznego grupowania podobnych obiektów.
Według Fundacji Interaction Design Foundation:
Ludzkie oko ma tendencję do postrzegania podobnych elementów w projekcie jako pełnego obrazu, kształtu lub grupy, nawet jeśli elementy te są oddzielone.
Postrzegamy elementy w relacji, w ten sposób oddzielając je od innych elementów projektu. Dlatego ludzie świetnie radzą sobie z wypełnianiem „luk” lub łączeniem „kropek”.
Na zdolność wpływa rozmiar, kształt i kolor. Zasadę można bardzo łatwo zastosować do witryn eCommerce. Zobaczmy, jak to zrobić.
Zasada Gestalt w e-commerce:
Zanim zacznę, powiem ci, że Gestalt to po niemiecku „formularze”. Zasada Gestalt opiera się na tym, jak ludzki umysł postrzega elementy wizualne w Twojej witrynie i pozwala mózgom tworzyć obrazy postrzeganego obrazu.
Aby zastosować tę zasadę do swojej witryny eCommerce, musimy przyjrzeć się bliżej każdej kategorii zasady Gestalt:
1. Ziemia i rysunek
Figura to przedmiot, który można wizualnie oddzielić od podłoża. Idea stojąca za zasadą figury i podstawy polega na tym, aby oba były wizualnie rozróżnialne, aby uniknąć wiecznego zamieszania.
Zrozummy to na prawdziwym przykładzie. Seriously Unsweetened, postępuje zgodnie z zasadą oddzielania figury od podłoża.
Aby podkreślić swoje produkty i zawartość, pomalowali je na jasno i utrzymali biel. Utrzymanie subtelnego tła i podkreślenie ważnych elementów może sprawić, że USP Twojego sklepu internetowego będzie zauważalne.
2. Bliskość
Bliskość w czasie lub przestrzeni nazywana jest bliskością. W kontekście eCommerce będziemy mówić o grupowaniu różnych elementów w celu stworzenia większego skojarzenia. Grupowanie elementów jest ważne dla budowania płynnej relacji między elementami a wrażeniami wizualnymi.
Bliskość jest bardzo przydatna podczas projektowania navbarów lub witryny, coś, co Mashable zrobiło w ich navbarach.
Na powyższej migawce możesz zobaczyć, po prostu grupując, w jaki sposób elementy tej samej kategorii są umieszczane blisko siebie w menu.
Amazon to kolejny doskonały przykład, który grupuje swoje elementy w odpowiednim sąsiedztwie.
Amazon przedstawia swój produkt w ramce siatkowej, w której produkty są oddzielone wąskimi białymi przestrzeniami, subtelnymi, ale głębokimi.
Bliskość ma ogromne znaczenie w przypadku pasków nawigacyjnych, list produktów, a nawet grupowania informacji od najmniej ważnej do najwyższej lub odwrotnie.
3. Symetria
Ludziom symetria jest estetyczna. Dodanie symetrii do elementów Twojej witryny tworzy harmonię i zapewnia gościom wygodę podczas oglądania Twoich obiektów.
Oto wspaniały przykład symetrycznego układu strony internetowej, czcionki HvD:
Strona podzieliła cechy swojej firmy na równe połówki, zapisane tą samą czcionką przy użyciu tego samego motywu w skali szarości. Nie tylko to, strona zawiera również zasadę figury i podstawy.
Chociaż symetria jest doskonałym i prostym sposobem na zadowolenie widzów, można również uchwycić użytkowników asymetrią. Wiele witryn używa asymetrii jako elementu równoważenia wszystkich białych przestrzeni. Coś takiego, co zrobił Xplode Marketing:
Xplode w wyjątkowy sposób zastosował asymetrię, która w bardzo przyjemny sposób ukazuje estetykę.
4. Podobieństwo
Bliskość działa bliżej zasady podobieństwa. Może to dotyczyć kształtu, kolorów, rozmiaru, orientacji lub jakiejkolwiek innej właściwości. Wśród obiektów wyświetlanych w tej samej odległości powinna dominować łączność.
Sprawdź ten przykład strony docelowej Influenster:
Podobieństwo można łatwo zauważyć dzięki wyraźnie wyrównanym ramkom. Wiem, że produkty w każdym pudełku są inne, ale koncepcja jest przekazywana przez spójne pola tekstowe na całej stronie.
5. Zamknięcie
Ludzki mózg jest wyszkolony do wypełniania luk w niekompletnych obiektach, wizualnie uzupełniając figurę i postrzegając ją jako całość. Nazywa się to zasadą domknięcia. Przestrzeń pozytywna i negatywna jest bliska jednej i tworzy cały większy obraz.
Zrozummy koncepcję na przykładzie Cult:
Mimo że tekst nie został wyraźnie napisany, ludzki mózg może łatwo odczytać, co jest napisane. Ze względu na ułożenie i wyrównanie tekstu w zamknięciu ułatwiło to odszyfrowanie, mimo że litery są niekompletne.
6. Ciągłość
Ostatnią zasadą Gestalt jest zasada ciągłości. Ciągłość jest niezbędna do wytworzenia wzoru, który można naśladować gołym okiem i który prowadzi do spójnej ścieżki.
Rzućmy okiem na stronę OscilloScope:
Wykorzystuje zasadę ciągłości w celu zapewnienia odwiedzającym sieci 360-stopniowego widoku, tak aby odwiedzający mogli przejść do żądanej sekcji.
9. Spełniaj oczekiwania klientów
My, ludzie, mamy oczekiwania. Czasami mamy też oczywiste oczekiwania w określonych sytuacjach lub w określonych miejscach. Na przykład, kiedy odwiedzasz restaurację, spodziewasz się, że dostaniesz dobre jedzenie, które zaspokoi Twój głód.
Podobnie konsumenci oczekują określonych elementów strony Twojego sklepu internetowego. Coś tak prostego, jak przycisk „ Kup teraz ” lub ceny na stronach produktów.
Eksperymentowanie z wezwaniami do działania jest zawsze uważane za dobrą praktykę, ale należy trzymać się podstaw, jeśli chodzi o utrzymanie trafności stron internetowych. Wpływa na decyzje zakupowe Twoich gości.
10. Utwórz różne strony docelowe dla płatnych i bezpłatnych odbiorców
Tworząc stronę docelową, pierwszą rzeczą, która przychodzi Ci do głowy, jest:
„Jaki jest kontekst użytkownika i jego cel?”
Każdy użytkownik Internetu jest inny i ma inne zamiary i cele wyszukiwania. Być może szukają tego samego produktu w Internecie, ale jeden może mieć cel, aby go kupić, a drugi chcieć zapoznać się z nim i przeczytać o nim.
Jedną z zalecanych wskazówek jest kierowanie różnych stron docelowych na płatnych użytkowników i odwiedzających organicznych.
Przedstawię przykład firmy ubezpieczeniowej:
Pierwszy zrzut ekranu, który widzisz poniżej, to strona docelowa utworzona dla użytkowników w wyniku reklamy w wyszukiwarce.
Oto kolejny zrzut ekranu z tej samej domeny, ale dla innego zestawu odbiorców.
Treść dla płatnych odbiorców jest krótka i na temat, mając na celu bezpośrednią konwersję. W drugim przykładzie zobaczysz, że liczba słów wzrosła, co ma na celu uszeregowanie strony i przyciągnięcie organicznych odwiedzających.
Pamiętaj: ustaw różne strony docelowe dla każdej inicjowanej kampanii. Stworzy to unikalny kontekst dla docelowych użytkowników.
11. Wykorzystywanie zachowań odwiedzających witrynę
Tworzenie zwycięskiej strategii projektowania strony internetowej jest niekompletne bez zadowolonych odwiedzających. Aby zwiększyć liczbę konwersji, musisz zapewnić odbiorcom to, czego chcą.
Powyższe punkty to dopiero początek tworzenia stron internetowych, które nie łamią żadnych zasad. Ale sukces można określić tylko na podstawie testów z prawdziwymi gośćmi.
Aby stworzyć przyjazną dla użytkownika stronę, zacznij uczyć się od odwiedzających i ich danych behawioralnych. Podstawowe narzędzia, takie jak mapy popularności, mogą dać ci wyobrażenie o tym, jak użytkownicy konsumują treść.
Za pomocą narzędzi takich jak HotJar możesz bardzo łatwo zbierać dane o odwiedzających, takie jak kliknięcia, zwoje i ruchy. Możesz nawet wizualnie zobaczyć, jakie czynności wykonuje odwiedzający, gdy odwiedza Twój sklep eCommerce.
Pamiętaj, że projekt i przepływ transakcji eCommerce są również bardzo krytyczne. Aby uzyskać najlepsze wyniki, należy trzymać się najlepszych praktyk optymalizacji realizacji transakcji eCommerce.
Słowa końcowe
To były więc podstawowe wskazówki dotyczące tworzenia projektu witryny eCommerce w celu zwiększenia konwersji w 2020 r. Te wskazówki mogą pomóc Ci poznać kwintesencję projektowania stron internetowych, której nie można zignorować. Pamiętaj jednak, że są to ogólne kroki; aby stworzyć konkretną strategię, która najlepiej pasuje do Twojego sklepu internetowego, musisz zacząć analizować zachowania użytkowników.
Wskazówki mogą stanowić punkt wyjścia, ale aby objąć resztę podróży, należy regularnie przeprowadzać testy. Z mojego doświadczenia wynika, że obserwacje dokonane podczas testowania i uczenia się mogą pomóc w potwierdzeniu instynktu jelitowego i wykładniczym zwiększeniu liczby konwersji.
Himanshu Rauthan
Autor gościnny