Podstawy UX

7 min. czytania

Kiedy zabierasz się za zrobienie strony internetowej, oczywiście musisz zacząć od projektu. W projekcie musisz uwzględnić podstawy UX czyli stworzyć stonę przyjazną dla użytkownika. A im bardziej Ci zależy, żeby strona była przyjazna dla odbiorców, tym więcej musisz się napracować.

To tak, jak z budową domu. Jeśli chcesz zbudować dom, to najpierw musisz wiedzieć, co w nim ma być. Każda rodzina potrzebuje innego domu. Jest oczywiście wiele wspólnych elementów: w każdym domu znajdziesz łazienkę, kuchnię i pokój, ale pozostałe pomieszczenia zależą od tego, kto tam ma mieszkać. Ile masz dzieci i czy każde potrzebuje mieć osobny pokój? A może w Twoim domu zamieszkają Twoi starsi rodzice i chcesz mieć dla nich niezależne małe mieszkanko? I podobne pytania. Musisz to zebrać, a potem zaprojektować swój dom. Robisz to oczywiście, ZANIM zaczniesz budować. Zanim w ogóle wbijesz w grunt pierwszą łopatę.

Nie inaczej jest ze stroną internetową, szczególnie jeśli ma być przyjazna dla odbiorcy. W tym artykule przeczytasz o podstawach UX (User Experience), czyli o tym, jak zaprojektować stronę przyjazną dla użytkownika. Szczególnie polecam Ci ten artykuł, jeśli zdecydowałaś się sama zrobić swoją stronę internetową w WordPress lub w Wix.

Zaprojektuj stronę zgodną z podstawami UX, zanim w ogóle zaczniesz ją robić.

Jak zaprojektować stronę, żeby była użyteczna i przyjazna dla użytkownika?

Z domem sprawa jest dość łatwa. Wiadomo, że dobrze na wejściu mieć korytarzyk /przedpokój. Dobrze, żeby łazienka była łatwo dostępna, a nie ukryta za sypialnią (oczywiście za sypialnią też może być łazienka, ale to przecież nie może być jedyna łazienka w domu :). Wiadomo, że lepiej, jeśli wchodzi się do pokoju z korytarzyka, a nie – z innego pokoju czy (co gorsza) z łazienki (!!!). I tak dalej.

Strony internetowe też mają takie zasady. To są właśnie podstawy UX. Warto je znać i wiedzieć, jak zaprojektować stronę, żeby miała sens i była przyjazna dla użytkownika.

Podstawy UX – co to jest UX? Jaka jest definicja UX?

UX czyli User Experience (ang. doświadczenie użytkownika) to wszystkie „spotkania” klienta z firmą, jej usługami i produktami. W tym oczywiście również ze stroną internetową firmy. Obejmuje postrzeganie użyteczności, łatwości użytkowania i wydajności strony www.

Jest kilka podstawowych prawd dotyczących tego, jak projektować stronę, by była przyjazna dla użytkownika. Poza tymi zasadami jest jeszcze (a może: przede wszystkim) lista tzw. Heurystyk Nielsena. Jakob Nielsen to duński konsultant ds. użyteczności sieci i badacz interakcji człowiek-komputer. W 1998 roku został nazwany „guru użyteczności stron internetowych” przez The New York Times i „królem użyteczności” przez Internet Magazine. W 1990 wraz z Ralfem Molichem przedstawił 10 heurystyk, czyli zasad interakcji człowiek-maszyna. O tych heurystykach przeczytasz w dalszej części tego artykułu.

Podstawy UX – główne zasady

Jakie są więc podstawy UX? O czym powinnaś pamiętać, projektując swoją stronę internetową?

1. Twój odbiorca jest najważniejszy

To jego cele się liczą, nie Twoje. Oczywiście, że robisz stronę www, bo chcesz osiągnąć jakiś swój cel. Komuś pomóc. Coś sprzedać. Poinformować o swoich usługach. Podzielić się ze światem Twoimi poglądami. Świetnie. Projektując stronę, pamiętaj jednak, że najważniejsze są cele użytkownika. Wchodzi na Twoją stronę, bo szuka pomocy. Bo potrzebuje Twojego produktu, żeby zaspokoić swoją potrzebę, np. dowiedzieć się, jak poradzić sobie z komarami. Albo jak zrobić stronę internetową. A może szuka opinii na jakiś temat? Zastanów się, jakich informacji szuka na stronie? Co jest dla niego ważne? Po co w ogóle wchodzi na Twoją stronę? Szuka informacji? Sprawdza adres? Porównuje ceny? Daj mu to szybko i łatwo. Podsuń mu to, czego potrzebuje i nie zawracaj za bardzo głowy swoją osobą i swoimi celami.

2. Myśl i pisz jak Twój odbiorca

Kto jest Twoim odbiorcą? Jak myśli? Pisząc, używaj języka klienta. Mów tak, jak mówi Twój klient. Nie tak, jak Ty mówisz o tym zagadnieniu. Twoja wiedza na dany temat jest prawdopodobnie o wiele większa, niż wiedza klienta, więc dostosuj się do niego i do jego potrzeb. I do jego języka.

3. Bądź konsekwentna

Między poszczególnymi podstronami nie zmieniaj sposobu komunikacji i nawigacji. Trzymaj się jednego stylu. Używaj podobnych przycisków, kolorów, zdjęć, tej samej czcionki itp. Na przykład pamiętaj, żeby na stronie nie używać więcej, niż 3 czcionek. Żaby zdjęcia, układy, kolory były do siebie podobne. Żeby odbiorca nie miał poczucia, że przechodząc na inną podstronę trafił do jakiejś innej firmy. Nie stresuj odbiorcy.

4. Zrób stronę podobną do innych

Ha! To może trochę kontrowersyjnie brzmi, ale pamiętaj, żeby wziąć pod uwagę, do czego klient jest przyzwyczajony. Nie zmuszaj go do nowych rzeczy, nie burz jego przyzwyczajeń. Jeśli regularnie robisz zakupy w hipermarketach, to wiesz, że mają z grubsza zbliżone układy. Chleb jest zawsze na samym końcu, a artykuły niespożywcze po prawej stronie. Nowy hipermarket nie będzie zmieniał tego układu, do którego klient jest przyzwyczajony. Podobnie jest ze stroną. Jeśli startujesz z nowym biznesem – zobacz, jak to robi konkurencja. Naucz się od nich. Nie chodzi o to, żeby powielać witrynę konkurencji. Jednak stworzenie strony podobnej do firmy wiodącej na rynku może ułatwić użytkownikowi poruszanie się po Twojej stronie. Im bardziej znajoma będzie Twoja strona, tym łatwiej będzie z niej korzystać. Badania pokazują, że internauci pozytywnie reagują na strony www, które wyglądają znajomo.

5. Twórz na stronie hierarchię

Zastanów się, która treść na Twojej stronie jest najważniejsza. Do niej kieruj, a z niej zrób przekierowania do innych, mniejszych miejsc na Twojej stronie. Takich, w których wchodzisz już w większe szczegóły.

6. Pamiętaj o kontekście

Wyobraź sobie, gdzie klient jest i co robi, kiedy trafia na Twoją stronę. Może siedzi z telefonem w tramwaju? A może na nudnym zebraniu? Daj mu szybko treści, których szuka. Zastanów się, jak możesz mu pomóc zrozumieć Twój komunikat?

7. Kieruj klienta po swojej stronie

Prowadź klienta między poszczególnymi treściami i podstronami w logiczny sposób. Używaj i opisuj odpowiednio przyciski akcji. Pokaż klientowi, gdzie ma przejść. Co ma zrobić po przeczytaniu artykułu?

8. Funkcjonalność jest ważniejsza niż projekt (design)

Nawet najlepszy, najpiękniejszy projekt nie sprawdzi się, jeśli strona nie będzie funkcjonalna. To znowu tak, jak z domem. Nie będziesz szczęśliwa w pięknym nowoczesnym domu, jeśli nie będzie w nim łazienki.

9. Pomóż klientowi łatwo przeskanować stronę

Attention span w dzisiejszych czasach wynosi poniżej 8 sekund. To znaczy, że odbiorca jest w stanie się skupić najwyżej na 8 sekund. W tym czasie musi dostać kluczową informację na Twojej stronie internetowej. Dlatego dawaj krótkie i proste komunikaty. Co więcej, upewnij się, że te komunikaty są spójne pomiędzy poszczególnymi podstronami w Twojej witrynie.

10. Less is More

Nie dawaj zbyt dużo informacji. Idealnie: 1 widok = 1 komunikat. Wiem, że to duże wyzwanie, ale warto dążyć do takiego układu – szczególnie w wersji na telefon komórkowy. Wytnij więc wszystko, co niepotrzebne.

11. Używaj prostego języka

To łączy się z punktem nr 2. Używaj języka, który będzie łatwo zrozumiały dla Twoich odbiorców. Nie zmuszaj ich do zastanawiania się. Dawaj jasne i zrozumiałe komunikaty.

12. Wyraźne czytelne czcionki

Nie każ odbiorcy wysilać się, gdy chce coś przeczytać na Twojej stronie. Ułatw mu to zadanie i zrób wyraźne, łatwo czytelne czcionki.

13. Makieta i mapa strony

Mój ulubiony punkt. Koniecznie zrób makietę strony, zanim zaczniesz robić swoją stronę www. Makietę, czyli szkic /projekt pokazujący co znajdzie się na Twojej stronie głównej i na podstronach i w którym miejscu. Zrobienie makiety pozwoli Ci ocenić czy układ, który zaplanowałaś, ma sens i czy jest uwzględnia podstawy UX. Sprawdź czy nie masz za dużo treści. Czy masz dobre przejścia między podstronami. I czy na jednej podstronie nie masz zbyt dużo komunikatów.

I jeszcze obiecane Heurystyki Nielsena, które uzupełniają podstawy UX:

1. Pokazuj status systemu

Informuj użytkownika o jego aktualnym statusie: gdzie jest, ile kroków go czeka, żeby wykonać akcję. To może być pasek postępu czy zmiana koloru przycisku. Takie małe interakcje zapewniają użytkownikom natychmiastową informację zwrotną, dzięki czemu zawsze wie, co aktualnie się dzieje na stronie. Nie zaczynaj na stronie żadnych aktywności, których klient się nie spodziewa. Przewidywalne interakcje budują zaufanie zarówno do produktu, jak i do marki.

2. Zachowaj zgodność pomiędzy systemem a rzeczywistością

Mów językiem użytkownika, używaj słów, zwrotów i pojęć znanych klientowi, a nie żargonu fachowego. Pamiętaj, że wyrażenia, ikony i obrazy, które wydają się całkowicie jasne dla Ciebie i Twoich współpracowników, mogą być nieznane lub mylące dla Twoich użytkowników. Nie zakładaj, że klient używa tych samych słów, co Ty. Temat nie jest mu tak bliski, jak Tobie, więc raczej używa innego słownictwa. Sprawdź jakimi słowami posługuje się Twój użytkownik. Pamiętaj też, że Twoja strona musi pasować do doświadczenia odbiorcy. To doświadczenie powstaje przez lata, nie tylko w świecie wirtualnym, ale też w realnym.

3. Daj użytkownikowi pełną kontrolę

Użytkownicy często wykonują działania przez pomyłkę. Powinni mieć możliwość poprawiania swoich błędów np. cofnięcia się. Ważne jest, aby kontrolowali swoje działania i mogli swobodnie wyjść z interakcji, której nie chcą. Kiedy ludziom łatwo jest wycofać się z procesu lub cofnąć działanie, buduje to poczucie wolności i pewności siebie. Wyjścia pozwalają odbiorcom zachować kontrolę i uniknąć utknięcia i poczucia frustracji.

4. Trzymaj się standardów i zachowaj spójność

Użytkownicy nie powinni się zastanawiać, czy różne słowa, sytuacje lub działania oznaczają to samo. Dane słowa, oznaczenia, sytuacje i działania powinny być stosowane w jednakowy sposób na całej stronie. Ludzie spędzają większość czasu, korzystając z produktów cyfrowych innych niż Twoje. Ich doświadczenia z tymi innymi produktami wyznaczają ich oczekiwania. Brak spójności będzie zmuszał ich do nauczenia się czegoś nowego. A użytkownicy tego nie lubią.

5. Zapobiegaj błędom

Najlepszym rozwiązaniem jest strona, która przede wszystkim nie pozwala użytkownikowi popełniać błędów. Jednym ze sposobów zapobiegania dużym błędom jest np. wyświetlenie komunikatu potwierdzającego przed zarejestrowaniem ważnej akcji.

6. Pozwalaj wybierać, zamiast zmuszać do pamiętania

Zminimalizuj obciążenie pamięci użytkownika. Strona powinna być zaprojektowana w taki sposób, aby umożliwić odbiorcom wykonywanie zadań bez konieczności polegania na własnej pamięci. Wyświetlaj elementy, akcje i opcje. Tak, żeby klient nie musiał zapamiętywać informacji. Informacje powinny być widoczne lub łatwo dostępne w razie potrzeby. Wszystkie niezbędne komunikaty powinny być przez cały czas widoczne na ekranie.‍

7. Zapewnij elastyczność i efektywność

Strona powinna być wystarczająco elastyczna, aby obsługiwać zarówno początkujących, jak i zaawansowanych użytkowników. Niektórzy odwiedzają witrynę po raz pierwszy, co może oznaczać nieco wydłużony czas zapoznawania się z jej funkcjonalnościami. Inni mogą mieć już doświadczenie i szukać skrótów w celu wykonania najczęstszych czynności. Wskaż im te skróty.

8. Dbaj o estetykę i umiar

Nie umieszczaj informacji, które są nieistotne lub rzadko potrzebne. Każda kolejna informacja konkuruje z poprzednią i zmniejsza jej widoczność. Chodzi o to, by treść i projekt graficzny skupiały się na najistotniejszych elementach.

9. Zapewnij skuteczną obsługę błędów

Użytkownicy popełniają błędy, niezależnie od tego, czy sami je wywołali, czy też jest to wina systemu. Komunikaty o błędach powinny być napisane w języku użytkownika (bez podawania kodu błędu), precyzyjnie wskazywać problem i konstruktywnie proponować rozwiązanie.

10. Zadbaj o pomoc i dokumentację‍

Najlepiej, jeśli Twoja strona nie potrzebuje dodatkowych wyjaśnień. Jednak czasem może być konieczne dostarczenie informacji odbiorcom. Zazwyczaj mają one postać działu pomocy lub sekcji z odpowiedziami na najczęściej zadawane pytania. Treść pomocy i dokumentacji powinna być łatwa do przeszukiwania i skoncentrowana na użytkowniku. Zachowaj zwięzłość i wymień konkretne kroki, które należy wykonać.

I tyle, jeśli chodzi o podstawy UX. Jest tych przepisów trochę, ale zasadniczo sprowadzają się do jednego:

NA PIERWSZYM MIEJSCU ZAWSZE STAWIAJ UŻYTKOWNIKA

Przy projektowaniu strony www zawsze pamiętaj o podstawach UX. A przede wszystkim o swoim kliencie, o użytkowniku Twojej strony. To jego potrzeby, przyzwyczajenia, nawyki i oczekiwania są najważniejsze.

Co teraz warto zrobić?

  • Zainspiruj się. Na stronach, które odwiedzasz – zauważ, co Ci się podoba i zastanów się dlaczego. Zapisz to sobie.
  • Zanotuj, jakie masz przemyślenia co do swojej przyszłej strony – żeby była przyjazna dla użytkownika.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.