5 zasad użyteczności UX w projektowaniu stron internetowych, które poprawią konwersje

W tym artykule dowiesz się czym jest użyteczność (user experience), doświadczenia użytkownika oraz jak projektować strony internetowe by były skuteczne i zyskowne

Strona internetowa to ważny punkt styku Klienta z marką. Dzięki niej możemy uprościć proces sprzedażowy, poprawić jakość i pozytywne wrażenia Klienta w trakcie kontaktu z marką poprzez intuicyjne rozwiązania umożliwiające szybką sprzedaż lub poznanie produktu. 

Jeżeli chcemy poprzez stronę internetową budować zasięgi oraz widoczność w wyszukiwarce Google warto poświęcić czas na zagadnienia związane z użytecznością UX. User Experience czyli doświadczenia użytkownika które towarzyszą mu podczas korzystania z usług lub produktów. Tworząc rozwiązania które pozytywnie wpływają na zadowolenie Klientów zwiększamy ich komfort i tworzymy pozytywne doświadczenia co przekłada się na lepsze rezultaty sprzedażowe. Aby jednak sprostać wymaganiom użytkowników należy poznać ich potrzeby, wczucia się w ich wymagania. 

Użyteczność (user experience UX ) to suma doświadczeń jakie wpływają na użytkownika podczas korzystania z produktu np: podróż po stronie internetowej. UX skorelowany jest z budowaniem emocji u Klientów, które powodują odpowiedni np: pozytywny lub negatywny odbiór oferowanych usług na stronie internetowej poprzez jej poznawanie. Reasumując UX obejmuje budowanie przekonań, preferencji i wyrabianie opinii o produkcie już przy pierwszym styku Klienta z marką.

Proces projektowania UX wymaga określenia grupy docelowej oraz analizy jej zachowań. Dzięki badaniom oraz warsztatom nie tylko z zespołem Klienta ale końcowymi odbiorcami produktu można określić potrzeby i problemy z jakimi przyjdzie nam się zmierzyć podczas projektowania użyteczności naszego produktu lub ścieżki zakupowej.

W dzisiejszych czasach konsumenci sięgający po produkt, usługę oczekują wysokiej jakości oraz spełnienia ich potrzeb. Warto dokładnie poznać ich potrzeby by dostarczyć intuicyjne i proste rozwiązania które zostaną pozytywnie przyjęte przez Twoich Klientów. 

W przypadku tworzenia stron w Warszawie warto skupić się na wyborze agencji interaktywnej specjalizującej się w projektowaniu UX.

Aby odpowiednio dopasować projekt strony internetowej który spełnia potrzeby naszych Klientów powinniśmy odpowiedzieć sobie na pytania :

• Kim jest nasz Klient i czego oczekuje po wejściu na stronę internetową ? 
• W jakiej fazie styku z marką będzie odwiedzał stronę ?
• Jakie komunikaty będą pomocne w osiągnięciu naszych celów ?
• Jak zaprojektować poprawną strukturę oraz użyteczność by skrócić czas dotarcia do niezbędnych informacji na stronie internetowej niezależnie od strony wejścia np: post blogowy, podstrona typu landingpage, strona główna, podstrona serwisu powodująca wejścia z wyszukiwarki Google.
• Dlaczego Klienci wybiorą moją usługę lub produkt ? Jak przedstawić zalety i wartości i wyeksponować je na stronie internetowej ?

Dane wejściowe od grupy docelowej

Mając do dyspozycji dane wejściowe możemy przejść do procesu projektowania makiet i prototypowania naszej strony internetowej. Na każdym etapie warto skonsultować przyjęte rozwiązania z grupą docelową spełniającą nasze wymagania. Otrzymamy cenne informacje które pomogą nam poprawić jakość i efektywność przyjętych rozwiązań na tym etapie projektowania strony internetowej. W agencji interaktywnej hauerpower proces projektowania stron rozpoczynamy właśnie od budowy potrzeb i analizy odbiorców tworzonego produktu.

Struktura strony www i architektura informacji

Poukładanie informacji w odpowiednią prostą i czytelną strukturę to nieraz trudne wyzwanie. W procesie projektowania architektury strony internetowej powinniśmy przewidzieć nie tylko priorytety istotne dla nas z sprzedażowego punktu widzenia, ale również z punktu widzenia obsługi i prowadzenia użytkownika po stronie internetowej. Wprawiając w zakłopotanie potencjalnych Klientów, którzy będą się zastanawiać jak dotrzeć do informacji, których szukają możemy spodziewać się opuszczenia strony lub negatywnych emocji.

Użyteczność stron internetowych - jak zaprojektować procesy ?

Odpowiednia budowa strony internetowej, interakcji oraz statusów dla wykonanych akcji to kluczowe zadania tego etapu.

Czytelna struktura i dobrze widoczne menu

Odpowiednie nazwanie kategorii menu jasno informujących do czego odnosi się dana pozycja jest istotne. Ważne jest również skrócenie menu do maksymalnie dwóch poziomów. Zamiast stosowania pozycji menu Oferta z rozwijanymi kategoriami warto rozważyć budowę skróconą o jeden poziom tj: kategorie docelowe umieścić w głównym pasku menu nawigacyjnego strony internetowej. Zyskamy szybsze dotarcie do konkretnych treści, informację już po nazwie pozycji menu o naszej ofercie bez potrzeby rozwijania pozycji.

Konstrukcja strony głównej powinna być oparta o model budowy sekcji wg. priorytetów. Najważniejszą funkcją strony głównej jest rozprowadzenie ruchu do podstron, które istotnę z dla nas z punktu widzenia SEO, komunikacji, sprzedaży. Jednak najważniejszym jest by strona główna budowała wizerunek i jasno określała użytkownikowi czy jest to firma której usług poszukuje. W tym celu powinniśmy umieścić na stronie głównej jako najważniejszą sekcję informacyjną o firmie oraz czym się zajmujemy z odpowiednim CTA do podstron.

Komunikaty i statusy operacji

W przypadku komunikatów powinniśmy jak najlepiej pokazać statusy po wykonaniu operacji np wysłania formularza kontaktowego, dodania produktu do koszyka, czy informowaniu na jakiej podstronie aktualnie się znajdujemy z prostą możliwością powrotu do poprzedniego widoku np. poprzez zastosowanie ścieżki powrotu lub linkowaniu wewnętrznemu z treści podstrony. Dobrym pomysłem jest również stosowanie pasków postępu w przypadku realizacji procesu w kilku etapach.

Powiązanie treści podobnych

Dobrą praktyką jest również stosowanie sekcji z podobnymi treściami na końcu podstrony np: powiązane usługi, produkty lub artykuły w formie kafli zdjęciowych z krótką informacją objaśniającą temat np: nagłówek i 1-2 zdania opisu.

Kontrola nad procesem

W przypadku tworzenia np formularzy krokowych lub procesu zakupowego powinniśmy wyposażyć je nie tylko w guzik akcji ‘wyślij’, ‘zamów’ lecz również możliwość powrotu lub cofnięcia się do poprzedniego kroku.

Projektowanie grafiki oraz warstwy wizualnej strony internetowej

Drugim bardzo ważnym punktem w tworzeniu stron internetowych jest warstwa wizualna. Klienci kupują oczami. Projektując spójną komunikację wizualną, inspirujące i ciekawe rozwiązania jesteśmy w stanie wpłynąć na emocje, wrażenia i proces decyzyjności. Niektórzy Klienci dokonają zakupu pod wpływem emocji, inni bardziej analityczni docenią poukładane informacje, rzetelność, detale. Projekt graficzny to opakowanie dla całego produktu które często powoduje zwrócenie uwagi i chęć poznania go od środka.

Czynnikiem wpływającym na budowanie bezproblemowych stron internetowych jest ich dostępność nie tylko w przewidzianych przez projektanta idealnych warunkach ale głównie skupienie się na projekcie i użyteczności w mniej dogodnych warunkach lub użytkownikach z problemami. W przypadku dostępności stron mówimy o standardach które powinny spełniać pod względem obsługi dla osób z niepełnosprawnością.

1. Zadbaj o to by każdy element był dobrze widoczny i zrozumiały.

2. Twórz rozwiązania które nie wprowadzają w błąd lub mogą być zrozumiałe na kilka sposobów.

3. Kontrast elementów oraz ich wielkość powinna być dobrze widoczna i odpowiednio zestawiona ze sobą w proporcjach zarówno dla ekranów typu mobile jak i desktop.

Kluczowy element w zdobyciu i utrzymaniu wysokiego ruchu na stronie internetowej. Odpowiedni projekt graficzny strony przygotowany wg. zasady ‘mobile first’ tj: jest ze zwróceniem uwagi w pierwszej kolejności na potrzeby użytkownika mobilnego w dzisiejszych czasach to istotny element bez którego nasza strona internetowa nie będzie zyskowna. Obecnie ponad 50% ruchu internetu stanowią użytkownicy mobilni, którzy dokonują zakupów, przeglądają oferty lub zdobywają informację właśnie będąc na telefonie. 

Na co należy zwrócić uwagę projektując responsywną stronę internetową :

1. ułożenie elementów pionowo z wykorzystaniem całej powierzchni ekranu dla contentu tj: treści strony internetowej,

2. umożliwienie użytkownikowi kliknięcia w zdjęcie, nagłówek które powodują przejście do interesujących go treści

3. odpowiednia waga i optymalizacja kodu css i js który zapewni szybkie wczytywanie responsywnej strony internetowej,

4. czytelna nawigacja, wyróżniające się guziki CTA w odpowiednim odstępie od treści i innych elementów aktywnych,

5. odpowiednia kondensacja treści tj: w przypadku dłuższych akapitów na liście artykułów lub produktów warto wyposażyć je w krótsze teksty z opcją rozwinięcia interesującego tematu,

6. brak błędnie zakodowanego szablonu html tj: warstwy frontent. Częstym problemem są tutaj źle kadrowane grafiki, nachodzące na tekst zdjęcia czy zbyt mały font o zbyt małej interlinii.

Raz przyjęte rozwiązania na etapie projektowania makiet, grafiki, użyteczności lub interakcji powinny być sprawdzone na grupie docelowej. Tylko rzeczywista grupa odbiorców będzie w stanie poddać nasz projekt rzetelnej ocenie i zgłosić uwagi, które być może nie są przez nas uwzględnione. Proces projektowania stron internetowych, ich użyteczności i przyjętych rozwiązań powinien być powtarzany poprzez wprowadzanie zmian w formie testów A/B i wyborze tych lepiej konwertujących np: zmiana koloru buttona, wielkości fontu czy nagłówków, zmiana kolejności sekcji. Dzięki takim testom będziemy w stanie ocenić nasz projekt pod względem użyteczności i dostaniemy cenne dane, które pozwolą nam już na starcie uruchomić lepiej dopasowanych do końcowego Klienta produkt.

Materiał partnera