Zaloguj się

Zarejestruj się

Panel Webmastera

Czas czytania: ok. 15 min. 

Data aktualizacji: 18 stycznia 2024

Dobre praktyki UX – jak projektować dla użytkownika?

Strona internetowa ma podobać się przede wszystkim... Tobie? Twojej mamie? Przyjaciele? Czy może użytkownikowi? Odpowiedź niby jest prosta, a jednak w projektowaniu często zapomina się o User Expierence.

Czym jest UX i dlaczego jest taki ważny? O tym opowiem w poniższym artykule. 

 

Znaczenie i wartość doświadczenia użytkownika (UX)

 

UX (User Experience, czyli doświadczenie użytkownika, to według Wikipedii całość wrażeń, jakich doświadcza użytkownik podczas korzystania z produktu.

Od tego, jakie wrażenie wywoła u użytkownika strona, zależy to, jak chętnie będzie z niej korzystał. Tylko dobry projekt, biorący pod uwagę UX, sprawi, że witryna stanie się atrakcyjna. 

User Experience ma szczególne znaczenie w uzyskaniu dobrego współczynnika konwersji. Chodzi o odsetek użytkowników, którzy wykonują na Twojej stronie pożądaną akcję (na przykład dokonują zakupu, czytają artykuły, jak założyć bloga czy jak stworzyć portfolio). 

Jeśli nawigacja na stronie jest nieintuicyjna, przyciski słabo widoczne, a teksty mało zrozumiałe, użytkownik szybko się pogubi i opuści stronę. 

Współczynnik konwersji ma szczególne znaczenie w przypadku sklepów internetowych. Tu przekłada się bezpośrednio na zyski. 

 

Zacznij teraz 

Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste

User Experience, User Interface (UI), Web Design - czym się różnią?

 

Te 3 pojęcia są ze sobą blisko związane, ale nie powinno się ich stosować wymiennie, ponieważ odnoszą się do 3 różnych rzeczy. 

User Experience to, jak już wspomnieliśmy, doświadczenie użytkownika. Projektowanie UX polega na dostarczeniu mu produktu, który zapewni jak najlepsze wrażenia. User Interface (interfejs użytkownika) to wszystkie elementy strony, które umożliwiają interakcję użytkownika z witryną. Web design to z kolei określenie obejmujące całość zagadnień związanych z projektowaniem stron internetowych, wliczając w to UX i UI.

 

UX design – umiejętność dobrego projektanta

 

User Experience to dziedzina interdyscyplinarna. Wymaga szerokiej wiedzy i umiejętności z kilku obszarów, przede wszystkim psychologii, projektowania, marketingu i informatyki. Specjalista UX musi opanować szeroki wachlarz umiejętności, ponieważ jego zadania są bardzo zróżnicowane. Co konkretnie do nich należy?

  • Tworzenie person użytkowników, historii, storyboardów, map stron www, wireframe'ów (wstępnych projektów) i prototypów stron;

  • Planowanie i przeprowadzanie testów i ankiet oraz ich późniejsza ocena, działanie zgodnie z zasadami projektowania struktury informacji;

  • Uwzględnianie w swojej pracy wyników testów i danych zebranych na podstawie wyników strony;

  • Przekształcanie postawionych celów i zadań w konkretne rozwiązania przekładające się na pozytywne doświadczenie użytkownika.

 

Jak stworzyć dobry projekt strony: zasady

Stworzenie dobrego UX wiąże się przede wszystkim ze skupieniem się na potrzebach użytkownika. Tworząc projekt strony zawsze powinieneś przyjmować jego perspektywę. Brzmi banalnie? Może, ale w procesie tworzenia strony łatwo zapomnieć o tej podstawowej zasadzie. 

 

Rola badań w UX

User Experience to dziedzina empiryczna. Oznacza to, że najważniejszą rolę odgrywają tu działania w praktyce. W wypadku UX chodzi przede wszystkim o sprawdzenie, jak użytkownicy poruszają się po stronie. 

Doświadczenie użytkownika sprawdza się poprzez badanie UX strony. To w praktyce jedyna metoda pozwalająca na przetestowanie przyjętych rozwiązań i wprowadzenie ewentualnych poprawek. Profesjonalne badanie UX składa się z 3 etapów.  

  • Audyt – polega na dokładnym przeanalizowaniu wszystkich elementów strony i wyłapaniu ewentualnych błędów i niedociągnięć. 

  • Wędrówka poznawcza – przejście przez daną stronę w taki sposób, jak robi to użytkownik. Umożliwia to spojrzenie na daną witrynę z perspektywy korzystających z niej osób.

  • Card sorting – analiza czytelności treści.

 

10 heurystyk Nielsena

 

Za tym trudnym pojęciem kryje się zbiór podstawowych zasad, którymi powinien się kierować dobry projektant UX. Zostały stworzone przez Jakoba Nielsena, jednego z najbardziej uznanych specjalistów w branży UX. 

  1. Widoczność statusu systemu. Użytkownik powinien zawsze wiedzieć, w którym miejscu na stronie się znajduje i co aktualnie się dzieje. 

  2. Powiązanie pomiędzy systemem a światem rzeczywistym. Strona powinna posługiwać się metodami komunikacji znanymi użytkownikowi. Wykorzystaj słowa, sposoby nawigacji i koncepty, z którymi osoba korzystająca z Twojej strony spotyka się na co dzień. 

  3. Kontrola użytkownika nad systemem. Użytkownicy często popełniają błędy. Dlatego powinieneś im umożliwić szybkie cofnięcie zmian. 

  4. Zachowanie spójności i standardów. Komunikaty powinny być za każdym razem takie same.

  5. Zapobieganie błędom. Przy tworzeniu strony zwróć szczególną uwagę, żeby nie pojawiały się na niej błędy, które utrudniają korzystanie z witryny (na przykład niedziałające linki, niepoprawna nawigacja czy nieczytelne teksty).

  6. Możliwość wyboru zamiast zapamiętywania. Wszystkie niezbędne opcje (takie jak powrót do strony głównej, dostęp do koszyka zamówień czy kontakt) powinny być łatwo dostępne z poziomu poszczególnych podstron. Dzięki temu użytkownik nie musi zapamiętywać struktury strony, żeby swobodnie się po niej poruszać.

  7. Elastyczność i efektywność. Użytkownicy korzystają ze strony w różny sposób. Niektórzy na przykład wolą dotrzeć do szukanych informacji korzystając z menu, inni wykorzystują do tego celu wyszukiwarkę. Powinieneś zapewnić możliwie najlepsze doświadczenie jak najszerszej grupie użytkowników. 

  8. Estetyka i minimalizm. Strona powinna zawierać jedynie niezbędne elementy, nie może być “przeładowana”. Każda niepotrzebna informacja zaburza interakcję użytkownika ze stroną. 

  9. Jasna komunikacja w przypadku błędów. Jeśli użytkownik natrafił na błąd, powinieneś jasnym językiem wyjaśnić mu co się stało i co ma zrobić. 

  10. Pomoc i dokumentacja. Zdarza się, że użytkownik będzie potrzebował pomocy lub  dodatkowych, szczegółowych informacji na temat działania Twojej strony. Upewnij się, że pomoc i dokumentacja są łatwo dostępne.

 

Architektura informacji na stronie

Architektura informacji to dziedzina, która zajmuje się odpowiednim prezentowaniem treści na stronie. Chodzi przede wszystkim o to, żeby informacje były łatwo dostępne dla użytkowników. To jeden z najważniejszych elementów, jeśli chodzi o użyteczność witryny. 

Strona z dobrą architekturą informacji umożliwia użytkownikowi łatwą nawigację oraz szybkie odnalezienie treści. Sprawia, że wykonuje on pożądane akcje. 

Najczęściej stosuje się jeden z 3 sposobów na stworzenie dobrej struktury informacji na stronie. 

  • Stworzenie mapy witryny, czyli projektu rozmieszczenia treści w poszczególnych miejscach na stronie. 

  • Sortowanie kart. W tej metodzie poszczególne informacje zapisujemy na oddzielnych kartkach. Wręczamy je grupie potencjalnych użytkowników strony. Mają oni za zadanie pogrupować karty w taki sposób, jak ich zdaniem powinny być pogrupowane informacje na stronie. 

  • Tworzenie prototypów i wireframów, czyli wstępnych zarysów wyglądu i funkcjonalności przyszłej witryny z uwzględnieniem rozmieszczenia treści na stronie. 

 

Dostosowanie strony do urządzeń mobilnych

Obecnie większość ruchu na stronach www pochodzi ze smartfonów. Dlatego przy projektowaniu witryn zwraca się szczególną uwagę na doświadczenie użytkowników korzystających z urządzeń mobilnych. 

Najlepszym sposobem na zaspokojenie potrzeb osób korzystających ze strony zarówno za pomocą telefonów i tabletów, jak i komputerów jest stworzenie strony responsywnej. Jest to witryna, która dostosowuje się do rozmiarów ekranów urządzeń, na których jest wyświetlana. Zbudowanie takiej witryny ułatwiają kreatory stron www, takie jak WebWave.

 

Wprowadzanie zmian na stronie

Projektowanie UX nie polega wyłącznie na stworzeniu strony przyjaznej użytkownikowi. Wygląd stron internetowych zmienia się nieustannie. Pojawiają się nowe rozwiązania techniczne i mody. Zmiany dotyczą też oczekiwań użytkowników. 

Co więcej, nawet jeśli dane rozwiązanie sprawdza się dobrze, możliwe jest stworzenie jeszcze lepszego. Dlatego konieczne jest monitorowanie zachowań użytkowników na stronie i wprowadzanie zmian, które poprawiają UX witryny. 

 

Jak badać skuteczność przyjętych rozwiązań

Podstawowym narzędziem wykorzystywanym w tym celu jest Google Analytics. Służy on do badania ruchu na stronie. Dzięki niemu dowiesz się między innymi: 

  • Ilu użytkowników korzysta z Twojej strony,

  • Jak użytkownicy trafiają na Twoją witrynę (np. wpisując jej adres bezpośrednio w okno przeglądarki, poprzez wyszukiwanie słów kluczowych czy reklamy), 

  • Ile czasu spędzają na stronie,

  • Jakie podstrony cieszą się największą popularnością.

Informacje zebrane dzięki Google Analytics pozwolą Ci na optymalizację strony i poprawę współczynnika konwersji. 

 

Testy A/B

Testy A/B są metodą sprawdzania skuteczności nowych rozwiązań, Przy ich pomocą można badać wiele elementów strony - od zmiany kolorystyki przycisku po nową nawigację czy kompletnie zmieniony interfejs. 

 

  • Test A/B polega na przekierowaniu części ruchu na nową wersję (B) witryny przy jednoczesnym kierowaniu drugiej części ruchu na starą wersję (A). Dzięki temu możliwe jest przetestowanie skuteczności zmian w praktyce.

  • Jeśli współczynnik konwersji będzie wyższy w przypadku nowej wersji strony, testowane innowacje okazały się skuteczne i warto wprowadzić je na stałe. W przeciwnym razie lepiej pozostać przy dotychczasowej wersji witryny.


 

Jak wygląda proces projektowania strony internetowej?

 

Proces projektowania strony pod kątem doświadczenia użytkownika można podzielić na kilka etapów.

 

Wireframe

To wstępny projekt strony, który ma za zadanie zilustrowanie pomysłów na wygląd i funkcjonalność witryny. Często ma postać rysunków na papierze. Do jego stworzenia można też użyć programów graficznych, jak np Photoshop. Wireframe nie zawiera konkretnych elementów strony (zdjęć, tekstów czy gotowego menu). Pokazuje za to, gdzie powinny znajdować się poszczególne składowe w witrynie. 

 

Mockup

To graficzny projekt, który zawiera konkretne elementy strony. Wyglądem przypomina działająca witrynę. Brakuje mu jednak funkcjonalności. Poszczególne podstrony nie są zintegrowane, przez co po mockupie strony nie można poruszać się jak po gotowej witrynie.

 

Prototyp

To wstępna wersja działającej strony, która umożliwia przetestowanie konkretnych rozwiązań przed udostępnieniem witryny wszystkim użytkownikom. Po sprawdzeniu i zatwierdzeniu projektu strony webdeveloperzy kodują jej ostateczną wersję gotową do publikacji w sieci. 

 

Projektowanie stron www w kreatorach

 

Korzystanie z kreatora stron www, takiego jak WebWave, może znacząco przyspieszyć pracę nad stroną. Umożliwiają tworzenie mockupów,  prototypów i gotowych do publikacji stron za pomocą jednego narzędzia. Co więcej, nad stroną tworzoną w kreatorze może jednocześnie pracować wiele osób, ponieważ projekt cały czas jest dostępny online. W dodatku opublikowanie witryny w internecie nie wymaga kodowania - można to zrobić jednym kliknięciem.

 

Kierunki rozwoju i trendy w UX

 

Jak już wspomnieliśmy, UX to bardzo dynamiczna dziedzina. Dlatego warto śledzić najnowsze trendy i podpatrywać skuteczne rozwiązania u konkurencji. Jakie tendencje rozwoju UX możemy zauważyć w roku 2024?

 

Dark mode

Czarne tło powoduje, że do oczu dociera mniej światła, co może mieć znaczenie dla użytkowników odwiedzającej stronę przed snem. Poza tym ważne są kwestie estetyczne - w większości przypadków dark mode będzie wyglądał elegancko i profesjonalnie.

 

Harmonia barw

Coraz więcej witryn ma ograniczoną paletę kolorów. Korzystanie z kolorów leżących blisko siebie na kole barw powoduje, że projekt wygląda bardziej elegancko. Poza tym, witryny utrzymane w niekontrastowej kolorystyce mniej męczą wzrok.

 

Połączenie grafiki z fotografiami

Można zauważyć, że w ostatnich miesiącach projektanci stron coraz chętniej sięgają po zdjęcia wzbogacone o elementy graficzne i kolaże. Nadaje to fotografiom bardziej indywidualny charakter i pomaga właścicielom witryn wyróżnić się na tle konkurencji. 

 

Kilka najczęściej popełnianych błędów (czyli zły user experience)

 

Przeładowana i nieczytelna strona z rozbitymi kolumnami tekstu

Przy wyznaczaniu układu tekstu najlepiej ograniczyć się do jednej kolumny – zwłaszcza na stronie głównej. Strony z kilkoma kolumnami rozpraszają użytkownika. Tymczasem pojedyncza kolumna intuicyjnie prowadzi wzrok z góry na dół. To najwyraźniej widać na blogach: prosta kolumna tekstu robi doskonałą robotę. 

 

Zbyt mało lub zbyt dużo przycisków przekierowujących użytkowników do podstawowych akcji

Defragmentowanie funkcji przycisków i sekcji to bardzo często popełniany błąd przy projektowaniu stron. Tymczasem warto postarać się, aby były one wyraźnie wyeksponowane, ale równocześnie treściwe. Może się bowiem okazać, że mamy kilka przycisków w niewielkiej odległości, które pełnią tę samą funkcję. Przy długich stronach nie można skazywać użytkownika, żeby wracał za każdym razem na górny pasek, gdy chce przejść do interesującej go sekcji. 

 

Zbyt mały kontrast i niewyraźne przyciski przekierowujące do akcji

Jasne, każda strona musi być być przejrzysta, ale z pewnością nie mdła ani nudna! Takie rzeczy, podobnie tak jak chaos i przeładowanie, spowalniają czas reakcji użytkownika. Generalnie: pogarszają UX.

Kiedy wszystko wygląda niemal tak samo, odbiorcy trudno wychwycić punkty przekierowujące do poszukiwanej sekcji. A rozbudowana oferta wprowadza niepotrzebny chaos i zniechęca użytkownika. Strona główna sprawdza się znacznie lepiej jako miejsce promujące rekomendowane produkty niż obszerna prezentacja pełnego zakresu możliwości firmy. 

 

Nachalne próby zamknięcia sprzedaży już na stronie głównej

Kup mnie tu i teraz, natychmiast – taki przekaz na stronie głównej również nie jest dobrym rozwiązaniem. Znaczniej lepiej w oczach odbiorców wypadają strony, które jedynie sygnalizują ofertę i mówią o mocnych stronach firmy. Albo jeszcze lepiej: pokazują REALNE korzyści. Zapis do newslettera jest super, ale użytkownik musi wiedzieć, co dzięki temu zyskuje. Musi być przekonany o użyteczności strony.

Dobre praktyki UX - podsumowanie 

User Experience, czyli doświadczenie użytkownika to zagadnienie, o którym trzeba pamiętać na każdym etapie prowadzenia strony www - od wstępnego projektu poprzez wybór konkretnych rozwiązań aż po bieżące utrzymanie i aktualizację. 

Dobre praktyki w projektowaniu strony sprawiają, że użytkownik z łatwością znajdzie ją w sieci, dotrze do poszukiwanych informacji i wróci na Twoją witrynę w przyszłości.

Pomocne mogą tu okazać się szablony stron od WebWave. To gotowe wzory stron www, przygotowane z myślą o jak najlepszym doświadczeniu użytkownika. Potraktuj je jako szkielet swojej strony, którą możesz wypełnić dowolną treścią. Dzięki temu stworzenie strony firmowej, portfolio czy sklepu internetowego będzie proste i szybkie. Wypróbuj szablony od WebWave i twórz stronę www bez kodowania za darmo!

 

Autorzy:

Treść - Jan Chmielowski

Grafiki - Irina Jewsiewickaja

Zacznij teraz 

Zacznij teraz 

22 grudnia 2022

Zacznij teraz 

Popularne artykuły. 

Jak zrobić sklep internetowy?

Jak zrobić landing page?

Jak zrobić stronę internetową?

Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.

contact@webwavecms.com
+48 731 395 898

Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00

          

Ta strona została stworzona w kreatorze WebWave.

Znajdziesz nas na: