Jak zaprojektować interfejs sklepu internetowego, który zwiększy Twoją sprzedaż?
24 maja 2018
Zaprojektowanie nowoczesnego i użytecznego interfejsu strony internetowej nie jest prostym zadaniem. Szczegółowe zaplanowanie wyglądu interfejsu jest jednym z najważniejszych etapów tworzenia serwisu internetowego i będzie miało ogromny wpływ na wyniki słupków sprzedażowych. Takie detale jak układ elementów, funkcjonalność serwisu, kolory i nawigacja mogą zadecydować o tym, czy na naszej stronie klienci chętnie będą dokonywali zakupów.
Projektując interfejs sklepu internetowego musimy pamiętać o podstawowych zasadach. Nasz sklep musi być przejrzysty, intuicyjny oraz przystosowany do dokonywania szybkich zakupów i transakcji. Coraz więcej klientów dokonuje zakupów za pomocą urządzeń mobilnych, dlatego musimy pamiętać o tym, że nasza strona musi być responsywna i przyjazna dla użytkowników korzystających z takich urządzeń jak smartfony czy tablety.
Rozmieszczając na stronie elementy nawigacji korzystajmy ze sprawdzonych metod - w lewym górnym rogu strony powinno znajdować się logo i identyfikacja firmy, po prawej stronie powinien znajdować się koszyk, numer telefonu oraz opcja wyszukiwania produktów. Menu najlepiej umieścić na środku lub w lewej części witryny. Coraz częściej praktykuje się metodę pod tytułem 'user is drunk', której głównym założeniem jest to, że strona powinna być tak logiczna i intuicyjna, że nawet pijany użytkownik nie miałby problemu z niej korzystać.
Główna część strony to zazwyczaj duże, estetyczne slidery, które prezentują najnowsze oferty lub sezonowe promocje. Jest to świetne miejsce na przedstawienie najciekawszych promocji i atutów Twojego sklepu. Może to być np. informacja o darmowej wysyłce produktu lub dodatkowej zniżce za zapisanie się do newslettera. W tej sekcji strony kluczowe będą przyciski CTA (Call To Action), które będą nawigowały użytkownika do kolejnych podstron Twojego serwisu internetowego.
Podstrona produktu to najważniejszy element naszego sklepu internetowego. To właśnie w tym miejscu nasz użytkownik podejmie decyzję o zakupie lub anulowaniu transakcji. Karta produktu powinna zawierać najważniejsze dla użytkownika informacje. Najwięcej przestrzeni powinniśmy poświęcić na wizualną prezentację produktów. Możemy to zrobić za pomocą galerii zdjęć lub krótkich filmików pokazujących produkt. Jeśli prowadzimy sklep odzieżowy to unikajmy zdjęć ubrań robionych 'na ziemi'. Jest to nieprofesjonalne i może wzbudzić w naszym kliencie docelowym wątpliwości. Najlepszym rozwiązaniem jest zainwestowanie w profesjonalną sesję, która umożliwi nam zaprezentowanie produktu w najkorzystniejszy sposób.
Sekcja zawierająca informacje o producencie, nazwie produktu, numerze produkcyjnym oraz dostępnych rozmiarach powinna znajdować się obok naszej galerii. Jeśli oferujemy różne warianty produktów (np. różną kolorystykę) to możemy uwzględnić je na tej samej podstronie, tak jak robi to Zalando.
Jeśli nasz sklep ma funkcjonować globalnie to nie zapominajmy o tym, aby zaprezentować rozmiarówkę (size guide) w różnych wersjach. Dla klientów europejskich wygodniejsza będzie skala "EU", z kolei klienci z zachodu będą posługiwali się rozmiarówką "US", klienci z Wielkiej Brytani "UK" itd.
Poniżej powinna znajdować się specyfikacja produktu. Są to m.in. informacje o materiale produktu, takich detalach jak kształt kołnierzyka, wzrost modela czy rozmiar noszonego na zdjęciu produktu.
Nasza strona musi być intuicyjna, dlatego pod boxem z dostępnymi rozmiarami powinien znajdować się przycisk "Dodaj do koszyka", lub "Dodaj do ulubionych". Umożliwi nam to szybką konwersję i znacząco zwiększy sprzedaż. Pamiętajmy o tym, aby korzystać z możliwości zakotwiczenia tego typu CTA na stronie naszego produktu. Dzięki temu nasz klient w każdym momencie będzie mógł dodać produkt do koszyka.
Kolejnym pytaniem, które zada sobie użytkownik jest cena i czas przesyłki. Cena produktu powinna być widoczna od razu po wejściu na stronę, bezpośrednio przy przycisku 'kup' lub 'dodaj do koszyka'. Wystarczy umieścić 2-3 krótkie zdania o wariantach dostarczenia produktu oraz o polityce zwrotów i reklamacji.
Następne sekcje na karcie produktu mogą być poświęcone np. na rekomendacje, okazje lub tworzenie zestawów, dzięki którym użytkownik będzie mógł otrzymać bonusy np. w postaci atrakcyjnych rabatów. Jest to oczywiście przykład bazowany na sklepie z ubraniami, zawartość specyfikacji jest zależna od branży, w której działa firma.
Klasycznym błędem popełnianym przy projektowaniu serwisów e-commerce jest nadmiar treści i długi czas ładowania się strony głównej. Zapewnienie płynnej i dynamicznej strony to priorytet każdego doświadczonego webdewelopera - takie aspekty jak optymalizacja kodu, ograniczenie zewnętrznych plików i zmniejszenie rozmiaru zdjęć to oczywistość, której nie możemy pominąć. Jeśli nasz serwis e-commerce nie będzie spełniał standardów użytkownika i będzie ładował się kilkanaście sekund, to potencjalny klient wybierze konkurencyjny sklep, który jest lepiej zoptymalizowany. Unikajmy również nadmiaru reklam i 'pustej' przestrzeni strony. Postarajmy się możliwie najlepiej wykorzystać każdą przestrzeń - umieśćmy w takich miejscach informacje o nowych produktach, promocjach czy programach lojalnościowych.
Warto korzystać z kreatywnych rozwiązań, jednak nie zapominajmy o tym, że głównym celem sklepu internetowego jest sprzedaż. Często skorzystanie z nowego, niekonwencjonalnego rozwiązania może wprowadzić naszego użytkownika w zakłopotanie. Śledźmy na bieżąco konkurencję i trendy panujące w naszej branży. Pamiętajmy o tym, aby zapewnić naszemu użytkownikowi jak najszybszy proces zakupu i korzystajmy ze sprawdzonych rozwiązań.
Podstawowe zasady
Projektując interfejs sklepu internetowego musimy pamiętać o podstawowych zasadach. Nasz sklep musi być przejrzysty, intuicyjny oraz przystosowany do dokonywania szybkich zakupów i transakcji. Coraz więcej klientów dokonuje zakupów za pomocą urządzeń mobilnych, dlatego musimy pamiętać o tym, że nasza strona musi być responsywna i przyjazna dla użytkowników korzystających z takich urządzeń jak smartfony czy tablety.
Rozmieszczając na stronie elementy nawigacji korzystajmy ze sprawdzonych metod - w lewym górnym rogu strony powinno znajdować się logo i identyfikacja firmy, po prawej stronie powinien znajdować się koszyk, numer telefonu oraz opcja wyszukiwania produktów. Menu najlepiej umieścić na środku lub w lewej części witryny. Coraz częściej praktykuje się metodę pod tytułem 'user is drunk', której głównym założeniem jest to, że strona powinna być tak logiczna i intuicyjna, że nawet pijany użytkownik nie miałby problemu z niej korzystać.
Główna część strony to zazwyczaj duże, estetyczne slidery, które prezentują najnowsze oferty lub sezonowe promocje. Jest to świetne miejsce na przedstawienie najciekawszych promocji i atutów Twojego sklepu. Może to być np. informacja o darmowej wysyłce produktu lub dodatkowej zniżce za zapisanie się do newslettera. W tej sekcji strony kluczowe będą przyciski CTA (Call To Action), które będą nawigowały użytkownika do kolejnych podstron Twojego serwisu internetowego.
Karta produktu
Podstrona produktu to najważniejszy element naszego sklepu internetowego. To właśnie w tym miejscu nasz użytkownik podejmie decyzję o zakupie lub anulowaniu transakcji. Karta produktu powinna zawierać najważniejsze dla użytkownika informacje. Najwięcej przestrzeni powinniśmy poświęcić na wizualną prezentację produktów. Możemy to zrobić za pomocą galerii zdjęć lub krótkich filmików pokazujących produkt. Jeśli prowadzimy sklep odzieżowy to unikajmy zdjęć ubrań robionych 'na ziemi'. Jest to nieprofesjonalne i może wzbudzić w naszym kliencie docelowym wątpliwości. Najlepszym rozwiązaniem jest zainwestowanie w profesjonalną sesję, która umożliwi nam zaprezentowanie produktu w najkorzystniejszy sposób.
Informacje o produkcie
Sekcja zawierająca informacje o producencie, nazwie produktu, numerze produkcyjnym oraz dostępnych rozmiarach powinna znajdować się obok naszej galerii. Jeśli oferujemy różne warianty produktów (np. różną kolorystykę) to możemy uwzględnić je na tej samej podstronie, tak jak robi to Zalando.
Jeśli nasz sklep ma funkcjonować globalnie to nie zapominajmy o tym, aby zaprezentować rozmiarówkę (size guide) w różnych wersjach. Dla klientów europejskich wygodniejsza będzie skala "EU", z kolei klienci z zachodu będą posługiwali się rozmiarówką "US", klienci z Wielkiej Brytani "UK" itd.
Poniżej powinna znajdować się specyfikacja produktu. Są to m.in. informacje o materiale produktu, takich detalach jak kształt kołnierzyka, wzrost modela czy rozmiar noszonego na zdjęciu produktu.
Nasza strona musi być intuicyjna, dlatego pod boxem z dostępnymi rozmiarami powinien znajdować się przycisk "Dodaj do koszyka", lub "Dodaj do ulubionych". Umożliwi nam to szybką konwersję i znacząco zwiększy sprzedaż. Pamiętajmy o tym, aby korzystać z możliwości zakotwiczenia tego typu CTA na stronie naszego produktu. Dzięki temu nasz klient w każdym momencie będzie mógł dodać produkt do koszyka.
Kolejnym pytaniem, które zada sobie użytkownik jest cena i czas przesyłki. Cena produktu powinna być widoczna od razu po wejściu na stronę, bezpośrednio przy przycisku 'kup' lub 'dodaj do koszyka'. Wystarczy umieścić 2-3 krótkie zdania o wariantach dostarczenia produktu oraz o polityce zwrotów i reklamacji.
Następne sekcje na karcie produktu mogą być poświęcone np. na rekomendacje, okazje lub tworzenie zestawów, dzięki którym użytkownik będzie mógł otrzymać bonusy np. w postaci atrakcyjnych rabatów. Jest to oczywiście przykład bazowany na sklepie z ubraniami, zawartość specyfikacji jest zależna od branży, w której działa firma.
Płynność strony
Klasycznym błędem popełnianym przy projektowaniu serwisów e-commerce jest nadmiar treści i długi czas ładowania się strony głównej. Zapewnienie płynnej i dynamicznej strony to priorytet każdego doświadczonego webdewelopera - takie aspekty jak optymalizacja kodu, ograniczenie zewnętrznych plików i zmniejszenie rozmiaru zdjęć to oczywistość, której nie możemy pominąć. Jeśli nasz serwis e-commerce nie będzie spełniał standardów użytkownika i będzie ładował się kilkanaście sekund, to potencjalny klient wybierze konkurencyjny sklep, który jest lepiej zoptymalizowany. Unikajmy również nadmiaru reklam i 'pustej' przestrzeni strony. Postarajmy się możliwie najlepiej wykorzystać każdą przestrzeń - umieśćmy w takich miejscach informacje o nowych produktach, promocjach czy programach lojalnościowych.
Kreatywność a funkcjonalność
Warto korzystać z kreatywnych rozwiązań, jednak nie zapominajmy o tym, że głównym celem sklepu internetowego jest sprzedaż. Często skorzystanie z nowego, niekonwencjonalnego rozwiązania może wprowadzić naszego użytkownika w zakłopotanie. Śledźmy na bieżąco konkurencję i trendy panujące w naszej branży. Pamiętajmy o tym, aby zapewnić naszemu użytkownikowi jak najszybszy proces zakupu i korzystajmy ze sprawdzonych rozwiązań.