Dobre praktyki UX - jak stworzyć stronę przyjazną użytkownikom

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

• Wędrówka poznawcza - to 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, czyli 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 doświadczenia użytkownika. 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
   Użytkownik nie powinien zastanawiać się, co komunikaty oznaczają  w danym kontekście. 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. Dlatego powinieneś zwrócić na niego szczególną uwagę. 

Strona z dobrą architekturą informacji umożliwia użytkownikowi łatwą nawigację oraz szybkie odnalezienie treści. Sprawia, że wykonuje on pożądane przez twórcę witryny 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, czyli 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 zachowania 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. To narzędzie służy 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, takich jak zdjęcia, teksty czy gotowe menu. Pokazuje za to, gdzie powinny znajdować się poszczególne składowe w gotowej 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.