Strona internetowa jest wizytówką Twojej firmy. Najskuteczniejsze reklamy, czy wysokie wyniki SEO nie zwiększą konwersji, jeśli klient trafiając na Twoją stronę nie znajdzie tego czego szuka i nie zostanie odpowiednia przekierowany do kontaktu.
Zadaniem UX jest znalezienie złotego środka, który będzie realizował zarówno cele biznesowe i spełniał potrzeby użytkownika.
To co twoja strona powinna realizować :
- Strona powinna być czytelna. Zadbaj o kontrast między tłem, a tekstem.
- Responsywna – czyli automatycznie dostosowuje się do różnych wielkości ekranów
- Szybka
- Prosta w nawigacji
- Zawierać najważniejsze treści odpowiadające na pytania klienta
- Dowód społeczny, że inne firmy ludzie CI zaufali i nie zawiedli się
- Przykładowe realizacje
- Dokumenty, materiały ułatwiające prace Twojemu klientowi lub edukujące go i poszerzające jego wiedze
- Prosty formularz kontaktowy
Od czego warto zacząć Audyt?
Najlepiej od początku, czyli od strony startowej.
Krok 1. Strona główna, czyli pierwsze dobre wrażenie
Ważne jest pierwsze wrażenie. Pierwsze 10 sekund decyduje o tym czy użytkownik zostanie na stronie czy ją opuści. To jest czas na zachęcenie, w którym musisz przykuć jego uwagę i zachęcić go do dalszego czytania o Twojej ofercie.
Aż 57% czasu na stronie użytkownik spędza na patrzenie „above the fold” To jest cześć która wyświetla się bez konieczności użycia scrolla.
O co warto zadbać ?
- Na stronie głównej musi pojawić się tekst lub obraz, który będzie jasno mówił czym się zajmujesz. Użytkownik powinien od razu wiedzieć, co oferuje strona i co może sprawdzić na danej stronie.
- Musi być widoczne i wyróżniające się, najważniejsze CTA na Twojej stronie.
- To co zawsze przyciąga naszą uwagę to My, czyli inni Ludzie. Ludzkie oko szybko rozpoznaje twarz i na nią reaguje. Aby zatem zwrócić na coś szczególną uwagę, pokaż twarze. Twarz patrząca bezpośrednio na odbiorce będą budzić największy oddźwięk emocjonalny, ponieważ oczy są najważniejszą częścią twarzy.
- Unikaj zbyt dużej liczby “przeszkadzaczy” pop-up, chattboty, zapis do newslettera.
- Baner ciasteczkowy jest ważnym elementem użyteczności Twojej strony. Postaraj się, żeby nie przeszkadzał w poruszaniu się po stronie. Żeby opis przycisków był jasny. Nie staraj się ukryć przycisku odrzuć. Duża część osób ceni sobie prywatność i jeśli nie będą mogli odrzucić Twojego baneru to opuszczą stronę.
- Złamanie schematu. Jeśli chcesz przyciągnąć uwagę pamiętaj, że mniej znaczy więcej. Zapewnisz większą uwagę , jeżeli użyjesz tylko jednej cechy wyróżniającej się.
Czy warto wykorzystać karuzelę na stronie głównej?
Ostatnio karuzela traci na popularności, szczegółnie ze względu na ślepotę banerową. Przez to, że jesteśmy bombardowani reklamami, nauczyliśmy się lekcewarzyć tego typu komunikaty w sieci. To bardzo ważne, aby istotne informacje nie znajdowały się wyłącznie na banerze.
Kluczowe znaczenie przy projektowaniu karuzeli są dobrze widoczne elementy sterujące karuzelą (które w przypadku większości witryn są kropkami wskaźnika). W przeciwnym razie może to być tak złe, jak ich brak, ponieważ niektórzy użytkownicy po prostu nie będą wiedzieć, że tam są.
Gdy użytkownik najedzie kursorem myszy na karuzelę, autorotacja powinna zostać wstrzymana, aby użytkownik mógł skupić się na slajdzie tak długo, jak chce, a co ważniejsze, aby slajd nie zmieniał się tylko wtedy, gdy użytkownik zdecyduje się kliknąć.
Ogólnie rzecz biorąc, użytkownicy mobilni oczekują, że będą mogli używać gestów mobilnych — na przykład gestu “przesunięcia”, aby przejść do następnego slajdu — podczas interakcji ze stronami internetowymi na urządzeniach mobilnych.
Krok 2. Twój tekst na stronie, czyli w jaki sposób czytamy treści.
Czytanie na stronie w niczym nie przypomina czytanie książki. Treści są skanowane w poszukiwaniu konretenie tylko tego co nas interesuje.
ZATRZYMANIE
Zazwyczaj występuje podczas przeglądania stron internetowych na urządzeniach mobilnych. Użytkownik utrzymuje wzrok w jednym punkcie, a nastepnie przesuwa stronę za pomocą myszy lub przewija ją palcem na smartfonie czy tablecie.
F-PATTERN
Przeważnie sposób, w jaki użytkownicy internetu czytają tekst, przypomina kształt litery F.
Proces zaczyna się od górnego lewego rogu strony, gdzie oczy skanują treść bardziej w pionie niż w poziomie. Wzrok użytkownika zwykle koncentruje się bliżej lewej krawędzi, często nie dochodząc do końca linijek.
Warto pamiętać, że jest to ogólna reguła dotycząca stron bez elementów graficznych. Wprowadzenie zmian w układzie tekstu może zakłócić ten schemat.
SKANOWANIE PUNKTOWE
W tej metodzie skanowania użytkownicy przeszukują tekst w poszukiwaniu określonych elementów, takich jak linki, cyfry, pojedyncze wyrazy lub całe frazy.
Istnieją dwa główne powody, dla których użytkownik może skupić się na określonych słowach:
- Są one wizualnie wyróżnione w tekście, na przykład przez pogrubienie czy formatowanie w postaci listy punktowanej.
- Słowa te są podobne lub identyczne do fraz, których szuka użytkownik.
Wielkie litery – Traktujemy tekst pisany WIELKIMI LITERAMI tak, jakby był krzykiem. Nie warto nadużywać dużych liter i najlepiej zostawić je na specjalne okazje ; nagłówki lub chcesz przyciągnąć uwagę.
Tytuł i nagłówki – Są to najistotniejsze elementy na Twojej stronie. To one powiedzą użytkownikowi czy jest na Twojej stronie to czego szuka, czy też nie.
Pisz dla ludzi, nie dla siebie – Dostosuj poziom czytelności do grupy docelowej. Używaj prostych słów i ogranicz liczbę sylab. Jeżeli tekst okaże się dla odbiorcy za trudny to jego negatywne wrażenie przeniesie na Twoją firmę.
Zrezygnuj z nazewnictwa i skrótów, które są wykorzystywane wewnątrz Twojej firmy. Bardzo często firmy produkcyjne, mają swoje własne nazwy na produkty. Często wykorzystując nazwnictwo własne w opisach, które nie jest zrozumiałe dla odbiorcy.
Sprawdź jak trudne są Twoje teksty na stronie jasnopis.pl
Dziel tekst na mniejsze framgenty. Najlepiej po 3-lub 4 zdania w kolumnie. Wspomagaj się punktatorami lub obrazkami.
Ludzie czytają szybciej dłuższe wiersze, lecz wolą czytać krótsze. Krótkie wiersze najbardziej preferowane przez użytkowników to miedzy 45 do 75 znaków.
Zrezygnuj z bezosobowości, którą czuć: “Zamawianie”, “Kupując”, “Zaakceptowano”… Och, czy to brzmi znajomo? Mówienie do klienta, a nie z nim, jest pierwszym krokiem do utraty jego uwagi i zaufania.
🚫 „Twoje zamówienie dodano do koszyka.”
✅ „Dodaliśmy Twoje zamówienie do koszyka.”
Zrezygnuj z formy biernej. Bezpośrednia i aktywna komunikacja z klientem nie tylko jest bardziej zrozumiała, ale także wydaje się bardziej autentyczna i osobista.
🚫 „Pana pytanie zostało przekazane do handlowca Jana Kowalskiego.”
✅ „Przesyłam Pana pytanie do handlowca Jana Kowalskiego.”
Krok 3. Nawigacja
Pokazuj status systemu
Informuj użytkownika o tym co się dzieje i gdzie się znajduje poprzez odpowiednie komunikaty w odpowiednim czasie
Informacje o tym, że udało się dodać do koszyka, wysłać formularz, pobrać katalog.
Okruszki – informacje na której podstronie jesteś. Ułatwiają również nawigację po stronie.
Daj użytkownikowi pełna kontrolę.
Możliwość cofnięcia powtórzenia czynności wykonanych przez pomyłkę, opuszczenia danego miejsca. Czy na pewno chcesz opuścić koszyk?
Przycisk na zwiększenie ilości produktu lub usunięcia produktu na pozimie koszyka.
Trzymaj się standardów i zachowaj spójność.
Czasami firmy chcą się tak bardzo wyróżnić, że ich strona zupełnie przestaje być użyteczna. Przyzwyczajamy się bardzo szybko do pewnych rozwiązań i będziemy ich oczekiwać.
- Symbol “X” oznacza wyjście.
- Kolor czerwony oznacza brak powodzenia wykonania czynności
- Zielony informuje, że proces się udał
- Menu jest na górze strony
- Stopka na dole
Zapobiegaj błędom
Zapobiegaj nieświadomym błędom. Czy ne pewno chcesz opuścić koszyk? Czy na pewno chcesz przerwać wypełnienie formularza ? Podświetl formularz gdy w trakcie się osoba pomyli.
Pozwalaj wybierać zamiast zmuszać do zapamiętywania
Pokazuj informacje w odpowiednim czasie, aby ograniczyć ich zapamiętywanie.
- kod promocyjny widoczny cały czas na górze strony
- informacja od jakiej kwoty lub km jest darmowa dostawa
- etykiety opisujące okienko formularzu, powinno być nad polem. Często widze, że etykieta jest wewnątrz pola. Gdy zaczynasz je uzupełniać hasło znika.
- Wolimy więcej klikać, niż myśleć. Dlatego skomplikowane procesy doboru czy zakupu dziel na procesy. Oczywiście powiedz klientowi ile proces ma kroków, na jakim jest etapie i jak nazywają się poszczególne etapy w całym procesie.
Zapewnij elastyczność i efektywność
Umożlwiaj dostosowanie do użytkownika i jego przyzywczajeń tworzenia skrótów, ułatwienia dostępu do częstych akcji.
Symbol lupy koajrzy nam się z możliwością wyszukania.
Działania na stronie ułatwiające nawigację:
- Kategoria Ostatnio oglądane produkty
- Pokazanie pod wpisem blogowym ,wpisy o podobnej tematyce
- Polecenie produktów komplementarnych do konkrentego zamówienia, które ułatwiją obłsługę, montaż lub funkcjonowanie danego produktu
Dbaj o estetykę i umiar. Unikaj zbędnych informacji
Estetycznie przyjemne strony przyciągają więcej użytkowników i zachęcają do dłuższego przeglądania treści. Wizualnie atrakcyjna strona buduje pozytywne pierwsze wrażenie.
Nie wiem czy wiesz, ale strona która dla użytkownia wydaje się nieatrakcyjna wizualnie i chaotyczna, wpływa na postrzeganie w ten sam sposób firmy.
Na tej stronie użytko wielu silnych kolorów. Cała strona wydaje się być w chaosie. Żaden element nie wyróżnica się w zdecydowanym stopniu.
X-kom za swój kolor dominujący wybrał fiolet i czerwień. Strona wydaje się być czyta i uporządkowana. Wiemy gdzie znajduje się menu główne, koszyk, jakie firma ma USP.
Zadbaj o pomoc i dokumentację
Umożliwienie łatwego znalezienia pomocy i dokumentacji.
Dostarczając kompleksowe zasoby pomocy, można zmniejszyć liczbę zapytań kierowanych do działu obsługi klienta, co pozwala zaoszczędzić czas i zasoby.
Krok 4. Formularz
Nawet 22% osób rezygnuje z wysłania zapytania, przez zbyt długie i nieprzyjemne formualrze. Kilka raz jak w łatwy sposób można je poprawić.
Oznacz wymagane dane
Użytkownicy od razu wiedzą, które pola są obowiązkowe do wypełnienia, co pomaga unikać błędów i przyspiesza proces wypełniania formularza.
Wyrównaj etykiety do prawej jeśli znajduje się ona po lewej od pola
Wyrównane do prawej etykiety tworzą czystą, pionową linię, co ułatwia szybkie skanowanie przez użytkownika i przyczynia się do lepszego zrozumienia struktury formularza.
Pogrupuj dane
Grupowanie powiązanych danych pomaga użytkownikom lepiej zrozumieć kontekst i logicznie przetwarzać informacje, co prowadzi do szybszego i dokładniejszego wypełniania.
Ogranicz ilość danych do niezbędnego minimum.
W formularzu z prośbą o kontakt do handlowca zmniejszenie liczby pól z 4 na 3 zwiększyło konwersję nawet o 50% [Badania Hubspot]
Długi formularz podziel na kroki
Podział formularza na mniejsze, zarządzalne kroki pomaga w utrzymaniu koncentracji użytkownika i zmniejsza poczucie przytłoczenia.
Etykiety powinny być zawsze widoczne
Stale widoczne etykiety upewniają, że użytkownicy zawsze wiedzą, do czego odnoszą się poszczególne pola, nawet gdy wracają, aby skorygować wprowadzone informacje.
Przycisk powinien być odpowiednio opisany.
Dobrze opisany przycisk informuje użytkownika o tym, co się stanie po jego kliknięciu, co eliminuje niepewność i zwiększa zaufanie do procesu.
Dodaj informacje przy polach, które mogą być niezrozumiałe
ostarczanie dodatkowych wskazówek lub informacji przy trudniejszych polach może zapobiegać błędom i ograniczać frustrację użytkowników.
Dynamiczna walidacja
Dynamiczna walidacja pola pozwala użytkownikom na bieżąco korygować błędy, co skraca czas potrzebny na finalizację formularza i poprawia ogólną jakość wprowadzonych danych.
CTA
Przyciski powinny być ze sobą spójne i mieć swoją hierarchię. Co to znaczy? Wyróżniamy 3 typy przycisków w zależności od ich zastosowania na stronie:
Przycisk działań podstawowych
W wielu projektach przycisk podstawowy często wygląda identycznie jak przycisk CTA (Call To Action), co sprawia, że trudno je odróżnić.
Różnica między nimi polega na tym, że przyciski podstawowe służą jako wizualne wskaźniki prowadzące użytkownika do celu. Na przykład, w procesie składania zamówienia przyciskiem podstawowym może być “Dalej”, natomiast CTA w tym kontekście to zazwyczaj ostatni przycisk “Kupuję” lub “Zamówienie”.
Warto je od siebie odróżnić kolorem lub zaokrągleniem.
Przyciski wtórne
Najbardziej zwracający na siebie uwagę powinien być ten zachęcający do kontaktu lub zakupu.
Powinno być jasne dla użytkownika czy wybiera aktualnie dany przycisk i go naciska. Przez poszarzenia, lub obramowaniem,
✅ Zdecydowanie lepiej konwertuje przycisk mówiący „Zrób X”, niż informacyjny „To jest X”.
✅ Im krótsza komenda, tym lepiej.
✅Argument korzyści cenowej działał zdecydowanie gorzej, niż nacisk na czas.
Twoje wezwania do działania (CTA) powinno być proste i czytelne, nie wydawać się, jakbyś błagał klienta o reakcję lub jej żądał.
🚫 „Poproś o kontakt.”
🚫 „Kup Teraz!”
4️⃣ Dodaj do CTA kontekst: Czy Twoje CTA mówi coś więcej. Dodaj wartość, tłumacz dlaczego warto kliknąć.
🚫 „Pobierz checklistę.”
✅ „Pobierz naszą checklistę – pomoże Ci sprawdzić czy nie zapomniałeś o niczym ważnym wprowadzając GA4.”