Jak zaprojektować użyteczną stronę główną?

Wiele osób łączy użyteczność strony głównej sklepu internetowego wyłącznie z jej wyglądem. Określenia typu „przejrzysta”, „czytelna”, „intuicyjna” są z łatwością nadużywane i przestały nieść ze sobą jakiekolwiek znaczenie. Prócz wyglądu o użyteczności strony decyduje jej zawartość.

1. Logo w lewym górnym rogu, które prowadzi do strony głównej

Duże, dobrze widoczne logo marki wraz z hiperłączem pozwoli użytkownikowi powrócić na stronę główną z każdego miejsca sklepu.

 

1il

 

 

 

Rysunek 1 Czytelna ekspozycja logotypu marki szybko identyfikuje właściciela sklepu

2. Treściwy tytuł strony – znacznik title

Znacznik title dotyczy tytułu strony i jest widoczny dla użytkownika w postaci napisu na zakładce w przeglądarce. Warto zadbać o to, aby przedstawiał działalność marki np.”ANSWEAR.com – sklep odzieżowy online – markowe kolekcje ubrań”.

Aby sklep był zoptymalizowany pod kątem wyszukiwarek, należy pamiętać także o pozostałych znacznikach (keywords, description).

 

2il

Rysunek 2 Adekwatny tytuł sklepu ułatwia identyfikację celu strony

3. Dobrze widoczny i podpisany koszyk

Ikonka, napis lub połączenie tych dwóch elementów jednoznacznie informuje użytkownika o tym, że znalazł się w sklepie. Nie umieszczajmy obok koszyka konkurencyjnych elementów graficznych, które odwracałyby jego uwagę.

Koszyk (ikonka koszyka lub torby zakupowej) powinien być również podpisany np. „Koszyk”, czy „Mój koszyk” i umieszczony w prawym górnym rogu.

3il

Rysunek 3 Prawidłowo wyeksponowany i podpisany koszyk

4.    Wyeksponowana główna nawigacja, z jednoznacznymi nazwami kategorii

Główna nawigacja sklepu powinna być dobrze widoczna – jej wygląd musi jednoznacznie wskazywać, że to są główne kategorie produktowe. Wyeksponowana nawigacja, z właściwymi etykietami pozwoli użytkownikowi rozpocząć ścieżkę zakupową.

Kategorie należy nazwać tak, jak spodziewają się tego klienci.  Lepiej unikać używania marketingowego slangu, który będzie niejednoznaczny i budzący niepotrzebne wątpliwości.

 

4il

Rysunek 4 Wyróżniona graficznie nawigacja, z dobrze nazwanymi kategoriami produktów

5.    Zrównoważone komunikowanie oferty i promocji – banery, slidery

Norma ISO dotycząca projektowania użytecznych interfejsów wskazuje, że w obszarze jednego ekranu nie powinno być więcej niż jednej animowanej kreacji reklamowej.

Duża liczba kolorowych przekazów, do tego animowanych, wprowadza chaos informacyjny. Użytkownik pod wpływem wielu bodźców w tym samym momencie nie może się zdecydować, który wybrać. W konsekwencji może zrezygnować z dalszego eksplorowania serwisu.

Przebrnięcie przez wiele informacji w celu dotarcia do tych pożądanych jest uciążliwe i zniechęca.

 

5il

Rysunek 5 Wiele kolorowych, animowanych kreacji reklamowych powoduje chaos informacyjny

 

6il

Rysunek 6 Jedna, duża animowana kreacja reklamowa to połączenie celów biznesowych i potrzeb użytkowników w estetyczny sposób

6.    Kontrola nad sliderem – zatrzymanie go po najechaniu kursorem

Coraz powszechniej zamieszczane treści w sliderze to zazwyczaj informacje na temat promocji, konkursu czy sezonowej oferty.  Niestety mnogość informacji na danej odsłonie i szybkość zmiany klatek jest zazwyczaj tak duża, że użytkownik nie ma czasu na sprawdzenie, co dany sklep mu oferuje. W konsekwencji powoduje to jego irytację i opuszczenie strony. Pozwólmy klientom na spokojnie zapoznanie się z treściami.

7il

Rysunek 7 Funkcja zatrzymania się na danej odsłonie slidera daje możliwość zapoznania się z ofertą

7.    Każda odsłona slidera  w całości klikalna

Nie zmuszajmy użytkownika do trafienia w mały guzik czy link tekstowy – całość slidera powinna stanowić hiperłącze, tak by przejście do promowanej oferty było proste.

il

Rysunek 8 W pełni klikalny obszar odsłony slidera to większe prawdopodobieństwo kliknięcia

8.    Wyeksponowana wyszukiwarka z opisanym przyciskiem Szukaj

Jeśli klient poszukuje konkretnego produktu np. zna markę i model aparatu fotograficznego, to najłatwiej będzie mu wpisać te dane w pasek wyszukiwarki.

Dlatego należy wyeksponować wyszukiwarkę graficznie – w przypadku białego tła strony, warto dodaj szare tło do pola wyszukiwarki. Przycisk przy pasku wyszukiwania powinien być opisany etykietą „Szukaj”.

9il

Rysunek 9 Dobrze wyeksponowana wyszukiwarka pozwala na szybkie dotarcie do konkretnego produktu osobie, która wie czego szuka

9.    Łatwo dostępny kontakt

Widoczny numer telefonu na stronie głównej, wraz z godzinami obsługi klientów buduje zaufanie i wiarygodność. Udostępnienie dodatkowych opcji  w postaci adresu email, formularza kontaktowego wzbogaca wybór form kontaktu i tworzy bardziej przyjazny wizerunek marki.

Dobrym miejscem na prezentowanie numeru telefonu jest top strony, oraz stopka.

10il

Rysunek 10 Numer infolinii prezentowany w topie witryny

11il

Rysunek 11 Dobrze widoczny nr telefonu w stopce serwisu

10.    Skróty z regulaminu – Dostawa, Zwroty, Sposoby płatności

Warto udostępnić łatwo dostępne skróty z regulaminu, za pomocą których, użytkownik dowie się o najważniejszych informacjach na temat sposobów, czasu oraz kosztów dostawy; zasadach dotyczących zwrotów i reklamacji oraz sposobach płatności. Tego typu linki tekstowe warto umieścić w stopce.

Sposoby dostawy i płatności warto również przedstawić w formie graficznej – umieszczając logotypy.

12il

13il

11.    Pomoc, Najczęściej zadawane pytania

Umieszczenie łatwo dostępnej sekcji Pomocy / FAQ wpływa pozytywnie na wizerunek marki, oraz zwiększa kontakt z obsługą klienta.

14il

12.    Budowanie zaufania – logotypy nagród, certyfikatów, programów zbierających opinie

Umieszczenie uzyskanych wyróżnień i certyfikatów zbuduje profesjonalny wizerunek i zaufanie do witryny. Dobrym miejscem do zamieszczenia tego typu elementów jest top oraz stopka serwisu.

15il

Rysunek 12 Logotypy wyróżnień w topie witryny

16il

Rysunek 13 Pasek nagród i certyfikatów w stopce sklepu

13.    Komunikacja propozycji wartości

Czym się wyróżnia Twój sklep? Darmową dostawą, obsługą klienta, a może najniższymi cenami? Wybierz to, czym naprawdę możesz się pochwalić i komunikuj to.

17il

Rysunek 14 Komunikacja propozycji wartości w topie i po bokach witryny

18il

Rysunek 15 Propozycja wartości umieszczona na dole strony głównej

Do zanotowania

  • Użyteczna strona główna sklepu internetowego buduje wizerunek marki, przedstawia ciekawie propozycję wartości, prezentuje ofertę w sposób jednoznaczny i angażujący.
  • Poprzez łatwo dostępne informacje buduje zaufanie klientów, którzy szybko znajdują kontakt ze sklepem oraz podstawowe zasady sprzedaży oraz pomoc.
  • Ponadto, jeśli zadbamy też o estetykę, profesjonalny projekt graficzny, to istnieje duża szansa, że użytkownik rozpoczynający wizytę w sklepie od strony głównej chętnie podejmie pożądaną akcję – czyli przejdzie na listę kategorii, aby znaleźć produkt dla siebie.

Tagi: , , ,

O Autorze

Iga Łopatka

Z UX związana od 3 lat. W tym czasie zrealizowała ponad 50 projektów z zakresu badań, optymalizacji i projektowania użytecznych interfejsów użytkownika. Posiada doświadczenie zarówno w projektowaniu serwisów, systemów B2B, e-commerce oraz aplikacji mobilnych i dotykowych. Z wykształcenia psycholog; ekspert w dziedzinie badań z użytkownikami. W swoich projektach skupia się na połączeniu wymagań biznesowych oraz potrzeb użytkowników. Aktualnie studentka studiów podyplomowych z dziedziny projektowania usług (service design). Pracowała m.in. dla takich marek jak: BOŚ Bank, Cinema 3D, LUX MED., Empikfoto, Clarena, Alior Bank, PURO Hotel.

Back to Top