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

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. 

 

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. 

 

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.