Podstawy UX: Jak zbudować stronę internetową przyjazną użytkownikom

Podstawy UX: Jak zbudować stronę internetową przyjazną użytkownikom
5 (100%) 4 votes

Nie ma wątpliwości, że rynek e-commerce rośnie w siłę z roku na rok. W dzisiejszych czasach ciężko jest wyobrazić sobie firmę, która nie ma własnej strony www. Klienci oceniają firmę po stronie internetowej. To jedna z najważniejszych inwestycji każdego przedsiębiorstwa, ponieważ to właśnie na nią trafiają potencjalni klienci i decydują, czy na niej pozostaną i czy złożą zamówienie lub odwiedzą placówkę, czy nie. Strona internetowa to twoja główna wizytówka.

Nawet wtedy, gdy masz najbardziej przemyślaną strategię marketingową, najlepsze kreacje reklamowe, najwyższe pozycje w SEO, reklamach Google Ads lub najbardziej konkurencyjną ofertę na rynku, wszystko będzie na nic bez dobrze zaprojektowanej, wygodnej i szybkiej strony internetowej.

W tym artykule przyjrzymy się podstawowym zasadom związanym z UX strony internetowej i omówimy, jak pomóc klientom łatwo znaleźć to, czego szukają, by zdobyć ich lojalność i zwiększyć sprzedaż.

Spójność i prostota

Użytkownicy nie czytają stron internetowych. Skanują je wzrokiem w kilka sekund, dlatego tak ważne jest pierwsze wrażenie, które strona wywiera na odwiedzającym.

Użytkownik nie powinien myśleć o tym, co chcesz mu przekazać, powinien widzieć to od razu.  Zastanów się, co powinna zawierać twoja strona, żeby ułatwić odwiedzającym poruszanie się po niej i zaoszczędzić ich czas. Wybierz kluczowe elementy, na których warto skoncentrować uwagę wizualną.

Najważniejsza część strony

Część górna, którą użytkownik widzi po załadowaniu strony w przeglądarce bez konieczności przewijania, jest kluczowa. Nie przeładowuj jej informacją, skup się na tym, co jest najważniejsze. Na pewno powinna się tam znaleźć nazwa firmy oraz krótki opis jej działalności w postaci hasła lub motto, logo oraz panel nawigacji do poszczególnych sekcji strony.

Bądź przewidywalny

Ważne jest, aby elementy interfejsu znajdowały się w miejscach, w których znajdują się zazwyczaj. Przykładowo, logo umieszcza się w lewym górnym rogu, koszyk w prawym górnym rogu, a panel nawigacji najczęściej znajduje się na górze lub po lewej stronie.

Wybór czcionki

Korzystaj z krojów, które są przeznaczone do użycia na ekranie. Nie używaj fontów szeryfowych (np. Times New Roman), gdyż kroje pisma tego typu są zaprojektowane do użycia w tekstach drukowanych (książki, gazety itp.).

Nie stosuj więcej niż dwóch różnych fontów. Przy zestawieniu krojów najlepiej dążyć do uzyskania harmonii lub mocnego kontrastu – w zależności od nastroju, jaki chcemy wywołać. Pamiętaj o tym, że czcionka powinna być czytelna i kontrastować z tłem nie męcząc oka – czerwone litery na zielonym tle odpadają.

Przemyśl kolorystykę

Pamiętaj o symbolice kolorów i o tym, jak określone barwy są postrzegane w danej kulturze. Dobieraj kolory i ich zestawienia w zależności od tego, co chcesz przekazać za ich pomocą.

Zacznijmy od koloru tła: w przypadku, gdy masz dużo elementów na stronie, stawiaj na tło w jasnych kolorach. Duże sklepy internetowe najczęściej korzystają z białego tła.

Jeśli zdecydujesz się na użycie jaskrawego tła, przemyśl, czy to ma sens w przypadku danej branży. Wyrazistych kolorów najlepiej używać na stronach powitalnych lub landing page’ach, które nie zawierają dużo treści i mają na celu wywołanie mocnego wrażenia. Ciemnego tła z kolei możemy użyć, gdy mamy do czynienia ze stroną baru, klubu nocnego, ale także stroną artysty-grafika lub projektanta mody. Ciemna kolorystyka jest uzasadniona wtedy, kiedy chcemy podkreślić ekskluzywność, wyróżnić się lub wywołać skojarzenia adekwatne do przedstawionej treści (np. z życiem nocnym, jeśli tworzymy stronę klubu nocnego).

W przypadku poszczególnych elementów graficznych istnieją sprawdzone zasady użycia kolorów.

Żółty jest wykorzystywany do zwrócenia uwagi na ważne komunikaty oraz do oznaczenia promocji i okazji. Zielony często wskazuje na postęp działań na stronie. Za pomocą koloru zielonego możemy poinformować, że określona czynność przebiegła pomyślnie. Jest także kolorem dla przycisków mających zachęcić użytkownika do działania, jednak w tym przypadku także dobrze się sprawdza kolor czerwony. Na czerwono oznaczamy także błędy w formularzach lub istotne informacje, możemy nim także oznaczyć pilny komunikat marketingowy (wyprzedaż -70% do końca tygodnia).

Stosuj ikony i grafiki

Najbardziej aktywna grupa konsumentów w dzisiejszych czasach, czyli millenialsi, preferują komunikację wizualną. W pędzie codziennego życia użytkownicy nie chcą tracić czasu na czytanie dużej ilości tekstu. W tej sytuacji pomocne są elementy graficzne: mogą szybko podsumować cały tekst, poza tym obrazy zawsze przyciągają większą uwagę, niż elementy tekstowe. Jednak nie popadaj w skrajność. Teksty też są ważne, ale muszą być zwięzłe i na temat. Uważaj również na animowane banery, które mogą spowalniać ładowanie strony.

 Zrezygnuj ze stronicowania na korzyść przewijania

Ludzie nie lubią dużo klikać. W codziennym natłoku obowiązków preferują jak najprostsze i najszybsze surfowanie w sieci umożliwiające łatwe znalezienie potrzebnej informacji. I nie tylko o klikanie tutaj chodzi. Irytujący jest czas, który muszą poświęcić na oczekiwanie związane z załadowaniem kolejnej strony. Średni czas odświeżania klikalnej strony może sięgać 6 sekund, a scrollowanie i stopniowe ładowanie elementów znacznie przyśpiesza korzystanie ze strony. Przewijanie jest najlepszym rozwiązaniem także w przypadku mobilnej wersji strony, gdzie klikanie w małe przyciski z numerem strony może być niewygodne i nietrafne, co zwiększa czas na znalezienie potrzebnej informacji.

Zadbaj o właściwe przedstawienie produktu na stronie

Jeśli masz skomplikowany produkt, przedstaw go w prosty i przystępny sposób, na przykład za pomocą infografiki lub wideo pokazujących zalety twojego produktu bądź usługi. Sprzedajesz ubrania lub buty? Zainwestuj w packshoty, wizualizację produktu w 3D lub za pomocą wideo. Nie używaj zdjęć lookbookowych lub przeznaczonych dla kampanii reklamowej na stronach sprzedaży. Najlepiej jest użyć zdjęć na jasno szarym tle.

Zadbaj o dokładny opis produktu i umieść w nim wszystkie najważniejsze szczegóły: kolor, skład, wymiary, specyfikacje, wagę, gramaturę, cechy produktu i jego przeznaczenie – tak, aby użytkownik mógł łatwo znaleźć odpowiedzi na wszystkie pytania dotyczące produktu.

Nie przeszkadzaj klientowi w dokonaniu zakupu

Dawaj użytkownikowi wybór, ale dbaj o to, by nie był za duży i nie przytłoczył go ilością dostępnych opcji. Im mniej kroków ma do pokonania na ścieżce zakupu, tym większa szansa, że zakup się odbędzie.

Nie zmuszaj klienta do zakładania konta, jeśli nie jest to konieczne. Jeśli zależy ci na tym, żeby założył konto, zrób to tak, żeby nie musiał wkładać w to zbyt dużego wysiłku – wystarczy dodać pole z opcją ustawienia hasła do standardowego formularza kontaktowego wypełnianego przy składaniu zamówienia. Zachęć go zniżką lub dodatkowymi benefitami dostępnymi tylko dla zarejestrowanych. Wtedy będzie widział wartość dodaną i miał uzasadnioną motywację do utworzenia konta.

Przygotuj krótkie formularze i nie zadawaj zbędnych pytań. Po dokończeniu składania zamówienia lub wysłania formularza potwierdź, że czynność przebiegła pomyślnie.

Jeśli masz sklep stacjonarny, dodaj mapę ze wszystkimi adresami sklepów lub placówek oraz możliwością nawigacji.

Masz infolinię? Zadbaj o to, żeby użytkownik mógł łatwo zadzwonić z urządzenia mobilnego klikając w przycisk z numerem telefonu.

Bądź mobile!

Średnio około połowa odwiedzin stron internetowych w Polsce odbywa się z urządzeń mobilnych. Mobilna wersja strony jest tak samo istotna, jak wersja na komputery. Dlatego konieczne jest, żeby strona była responsywna, czyli dostosowana do rozdzielczości ekranu każdego urządzenia. Google faworyzuje strony, które są responsywne i wyświetla je na wyższych pozycjach w wyszukiwarce.

Nie mniej istotna jest szybkość ładowania strony. Jest jednym z czynników wpływających na wynik jakości w systemie Google Ads, co ma bezpośrednie przełożenie na ranking reklamy w Google. Im wyższy jest wynik jakości, tym niższej stawki potrzebujemy do uzyskania wyższej pozycji w rankingu aukcji. Im dłużej ładuje się strona, tym wyższy jest współczynnik odrzuceń strony, czyli procent porzucenia strony przez użytkowników. W sprawdzeniu i optymalizacji szybkości strony pomoże narzędzie PageSpeed Insights od Google. Jeśli wynik będzie niższy niż 80 na 100 punktów, powinniśmy zastanowić się nad optymalizacją. Narzędzie Page Speed Insights pokaże nam, jakie elementy są do poprawienia.

Za pomocą innego narzędzia – Test My Site With Google – możemy sprawdzić, jaki średni czas ładowania ma nasza strona w wersji mobilnej, jaki procent odwiedzin tracimy przez dłuższe ładowanie strony oraz co możemy poprawić, żeby przyśpieszyć jej działanie.

Z kolei na Think With Google znajdziemy narzędzie, które pozwala porównać wyniki strony mobilnej dla kilku domen. Przyda nam się wtedy, gdy chcemy sprawdzić, jak wypadamy na tle konkurencji.

Zadbaj o bezpieczeństwo danych klientów

Podczas projektowania strony należy uwzględnić kwestię bezpieczeństwa danych klientów. Dotyczy to przede wszystkim zgodności przechowywania danych z zasadami RODO, ale także użycia odpowiednich zabezpieczeń, takich jak certyfikaty SSL. Użytkownicy muszą mieć pewność, że ich dane osobowe są bezpieczne.

W kontekście zbierania danych analitycznych, pamiętaj o tym, żeby formularz zgód RODO był przejrzysty i zwięzły, łatwy do przeczytania i zaakceptowania i nie zasłaniał całej strony.

Bądź na bieżąco

Śledź wyszukiwania na stronie internetowej. Pomogą ci w tym raporty Google Analytics. Przeanalizuj wyniki i dodawaj na stronę treści, których szukają twoi użytkownicy, jeśli jeszcze ich nie masz. Jeśli dane treści są dostępne na stronie, a użytkownicy szukają ich w wyszukiwarce, zastanów się, czy architektura strony jest dobrze zaprojektowana. Każda funkcja serwisu musi być dostępna dla użytkownika maksymalnie po trzech kliknięciach myszką.

Dobrym rozwiązaniem może być także stworzenie formularza do zgłoszenia problemów technicznych, co pozwoli twoim klientom zasugerować, czego im brakuje na twojej stronie i co jest do poprawienia. To także pomaga w zbudowaniu lojalności klientów wobec twojej firmy.

Śledź liderów rynku, konkurencję, trendy – bądź na czasie. Pomoże ci w tym prasa branżowa, blogi i dedykowane grupy w sieciach społecznościowych.

Maria Momot
Swoją przygodę z AdWords zaczęłam w 2013 roku. Przez ten czas zrealizowałam setki kampanii dla klientów z różnych branż i krajów, w tym Ameryki Północnej, Europy Centralnej i Wschodniej, Australii oraz Bliskiego Wschodu. W K2 jestem od 2017 roku na stanowisku Senior SEM Specialist. Realizuję zarówno kampanie performancowe, jak i wizerunkowe.
Prywatnie pasjonuję się modą, sztukami wizualnymi, kinem niezależnym i projektowaniem.