Usability od podstaw – heurystyki w praktyce

W kolejnej części kursu usability omówimy praktyczne narzędzie, pozwalające na szybkie przetestowanie użyteczności strony internetowej. To tzw. heurystyki, czyli ogólne zasady, które warto poznać.

Umiejętność interpretacji heurystyk wynika
z doświadczenia. Im częściej będziesz starał
się używać tego narzędzia w praktyce, tym
będzie to łatwiejsze.

Jest to dobre narzędzie, a audyt (testy użyteczności)
serwisu przeprowadzany za jego pomocą
może wykazać istotne problemy. Prekursorem ich
stosowania jest Jakob Nielsen, duński specjalista
ds. usability, założyciel firmy Norman Nielsen
Group. To on stworzył zestaw 10 następujących
heurystyk:

1. Przekazuj status systemu.
2. Zachowaj zgodność pomiędzy systemem a rzeczywistością.
3. Daj użytkownikowi pełną kontrolę.
4. Trzymaj się standardów i zachowaj spójność.
5. Zapobiegaj błędom.
6. Pozwalaj wybierać zamiast zmuszać do zapamiętania.
7. Zapewnij elastyczność i efektywność.
8. Dbaj o estetykę i umiar.
9. Zapewnij skuteczną obsługę błędów.
10. Zadbaj o pomoc i dokumentację.

Oczywiście nie tylko Norman Nielsen publikuje
swoje przemyślenia. Istnieją także inne heurystyki,
które jednak nie są aż tak popularne. Autor
Mark Pearrow w wydanej kilka lat temu książce
„Funkcjonalność stron internetowych” wymienia
następujące reguły, które stosuje w odniesieniu do
stron WWW:

1. Dzielenie.
2. Pisz w stylu odwróconej piramidy.
3. Umieszczanie ważnych informacji w górnej części ekranu.
4. Unikaj niepotrzebnego używania opcji.
5. Spraw, by twoje strony dawały się skanować.

W kolejnej części cyklu zajmiemy się także ich
analizą. Również autorzy publikujący w internecie
niejednokrotnie formułują własne zasady, a zapoznanie
się z nimi może być dla nas pouczające.
Dziś jednak skupmy się na popularnych heurystykach
Jacoba Nielsena.

Przekazuj status systemu

Każdy system informatyczny musi informować
użytkowników o swoim aktualnym stanie. Zadanie
to możemy w przypadku strony internetowej
odnieść do wielu różnych elementów i funkcji.
Strona musi więc informować użytkownika,
w którym jej miejscu dokładnie się znajduje.
Potrzebne są odpowiednie nagłówki lub ścieżka
nawigacyjna (tzw. okruszki) ukazująca hierarchię
serwisu.

Rysunek 2 ukazuje ścieżkę nawigacyjną na
stronie mBanku (http://www.mbank.pl). Dzięki niej
system informatyczny, jakim jest strona internetowa,
przekazuje informacje o swoim aktualnym
statusie.

Inny przykład odnosi się do menu. Aktualna
pozycja w menu powinna być zawsze dodatkowo
wyróżniona. Tak, aby internauta od razu wiedział,
gdzie się znajduje. Dobrym przykładem będzie
serwis finansowy Bankier.pl (http://www.bankier.
pl), który co prawda ma niedociągnięcia, jednak
zachowanie menu jest pod względem informowania
o aktualnej pozycji wzorowe.

Na rysunku 3 wyraźnie
widać, że po wejściu do jednego z działów
dana pozycja w menu jest wyróżniona.

Heurystyka „przekazuj status systemu” znajduje
zastosowanie w rozmaitych sytuacjach. Kolejny
dosyć typowy element to proces realizacji zamówienia
w sklepie internetowym. Na ogół składa się
z kilku kroków, a użytkownik powinien być o nich
dokładnie poinformowany.

Zwróć uwagę, jak kwestię tę rozwiązano
w księgarni Aragon.pl (http://www.aragon.pl)
– rysunek 4. W górnej części koszyka wymienione
zostały poszczególne etapy procesu zamawiania.
Byłoby idealnie, gdyby dodatkowo zawierały
kolejne numery, jak w przypadku sklepu REBEL.pl
(http://www.rebel.pl) – rysunek 5.

Zachowaj zgodność między
systemem a rzeczywistością

Jak się ma zgodność między systemem a rzeczywistością
do stron WWW? Przykładem może
być chociażby używany język. Powinien on być
zrozumiały dla użytkowników danego serwisu.
Postaw na słownictwo, które internauci znają
z innych stron internetowych.

Z tej przyczyny koszyk w sklepie internetowym
zawsze należy określać jako „koszyk”, a nie np.
„torbę”. Dla przykładu, w starej wersji serwisu
Kopalnia Prezentów (http://www.kopalniaprezentow.
pl) koszyk funkcjonował pod nazwą „wózek”
(rysunek 6), co z całą pewnością nie jest zgodne
z omawianą heurystyką.

Nie warto także opisywać technicznych elementów
serwisu. Użytkownicy nie muszą wiedzieć, co
oznacza, że serwis jest uruchomiony na „serwerze”
i napisany w „HTML 4..0 Strict”. Informowanie ich
o tym jest przykładem przekazywania zbędnych,
nic nieznaczących informacji.

Także elementy graficzne powinny odwoływać
się do doświadczeń użytkowników. Jeśli np.
chcemy opatrzyć symbolem graficznym przycisk
kierujący do strony głównej, to powinien być to
zawsze „domek”. Ten symbol jest dobrze znany
większej części internautów.

Za każdym razem wprowadzając (lub testując)
nową funkcjonalność, warto zadać sobie pytanie:
czy sposób funkcjonowania tego elementu jest
naturalny dla użytkownika? Jeżeli robisz coś, co
przeczy ich dotychczasowym doświadczeniom, to
prawdopodobnie utrudni to korzystanie ze strony.

Daj użytkownikowi pełną kontrolę

Interpretacja tego, co oznacza „pełna kontrola”,
może nastręczać pewnych trudności. Czy chodzi
o to, aby użytkownicy mogli kontrolować każdy
element serwisu? Raczej nie. Ważne jest to, aby
użytkownik miał pełną kontrolę nad operacjami,
które wykonuje.

Jeżeli można dodać produkty do koszyka, to ich
usunięcie powinno być równie szybkie i bezproblemowe.
Najlepiej, aby dało się to zrobić za pomocą
jednego kliknięcia. Można tutaj przytoczyć kolejne
przykłady. Użytkownicy zawsze powinni mieć
możliwość cofnięcia się do poprzedniej strony.

Jedynie względy bezpieczeństwa usprawiedliwiają
niemożność użycia przycisku „wstecz” przeglądarki,
np. w internetowych kontach bankowych. W każdej
innej sytuacji cofanie się powinno być bezproblemowe.

Gdy tak nie jest, użytkownik nie ma pełnej kontroli
nad tym, jak korzysta z serwisu internetowego.
Należy także unikać sytuacji, których skutków
nie można cofnąć. Wzorowy przykład to
konta e-mailowe. Usunięta wiadomość zawsze
przenoszona jest do kosza. Pomyłkowe usunięcie
ważnej wiadomości można łatwo cofnąć. Prym
wiedzie tutaj popularny Gmail (http://www.gmail.com), który natychmiast po usunięciu wiadomości
wyświetla komunikat o możliwości cofnięcia operacji,
co widać na rysunku 7.

Taką samą zasadę warto stosować wobec
innych elementów serwisu, jeśli tylko jest to
możliwe. Podczas składania zamówienia w sklepie
internetowym użytkownik powinien móc cofnąć się
do dowolnego wcześniejszego etapu i zmienić np.
adres wysyłki. Warto więc o tym pamiętać zawsze
wtedy, gdy wymagamy od internautów wprowadzenia
danych do systemu.

Przyciski odpowiadające za wykonywanie
czynności, których nie można cofnąć, powinny być
dobrze oznaczone i rzucające się w oczy. Bardzo
negatywny przykład niestosowania się do tej
zasady to rozległy formularz, przy którym tuż obok
przycisku „wyślij” umieszczono przycisk „wyczyść”.

Na ogół nawet jego istnienie nie ma żadnego
uzasadnienia. Jeśli już musi być obecny, to
powinien być maksymalnie oddalony i wyróżniony
odpowiednim kolorem. A usunięcie informacji nie
powinno się odbywać bez dodatkowego potwierdzenia.

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

Standardy w przypadku serwisów internetowych
mają bardzo duże znaczenie. I nie chodzi
o standardy techniczne tworzone przez konsorcjum
W3C dla języków HTML, CSS i innych. Po pierwsze,
standardy można rozumieć jako spójność ze
schematami funkcjonowania. W dużej części jest to
więc punkt zbieżny z drugim: „zachowaj zgodność
między systemem a rzeczywistością”.

Po drugie, możemy tę heurystykę rozumieć
jako potrzebę zachowania spójności wewnętrznej.
Wszystkie strony serwisu powinny wyglądać
tak samo i nie dezorientować użytkowników.
Należy zawsze stosować takie same sposoby
oznaczania nagłówków, odnośników, formularzy.
Serwis musi stanowić spójną całość pod każdym
względem. Niedopuszczalna jest sytuacja, gdy
jedna z podstron wyraźnie się odróżnia od
pozostałych.

Zapobiegaj błędom

Popełnianiu rozmaitych błędów przez użytkowników
nie da się całkowicie zapobiec. Można
jednak zrobić wiele, aby zminimalizować ryzyko
ich wystąpienia. Warto przede wszystkim zdać
sobie sprawę z faktu, że jeśli korzystanie z serwisu
wymaga rozbudowanych instrukcji, to został on źle
zaprojektowany.

Rysunek 8 przedstawia serwis Biuletynu Informacji
Publicznej (http://www.bip.gov.pl), w którym
obszernie wytłumaczono zasady korzystania ze
strony. Tymczasem jeżeli strona nie będzie intuicyjna
w obsłudze, to żadna instrukcja tego nie zmieni.

Zawsze, gdy użytkownik potrzebuje informacji
potrzebnych do obsłużenia danego elementu
serwisu, powinien mieć je natychmiast przedstawione.
Niedopuszczalne jest odsyłanie go do listy
najczęstszych pytań albo instrukcji. Informacje
muszą znajdować się w miejscu, w którym są
potrzebne.

Jako przykładem posłużmy się serwisem
turystycznym Wakacje.pl (http://www.wakacje.pl).

W opisie oferty znajdujemy takie sformułowania,
jak „wyżywienie: all inclusive” oraz „ubezpieczenie
KL i NW” (rysunek 9).

Znaczenia pierwszego
sformułowania osoby niezaznajomione z wycieczkami
zagranicznymi mogą się domyślać, wszak
„all” to proste słowo. Mimo tego należy dostarczyć
informacji dokładnie tłumaczących ten zwrot.

Z kolei „KL” i „NW” to bardzo proste, standardowe
skróty. Zapewne zostały gdzieś wyjaśnione. Niemniej
konieczność ich wytłumaczenia pojawiła się
nie „gdzieś” w trakcie buszowania na stronie, ale
podczas czytania opisu wycieczki. I właśnie w tym
miejscu powinna zostać zrealizowana.

Pozwalaj wybierać zamiast zmuszać do zapamiętania

Nie powinniśmy wymagać od użytkownika
tego, że zapamięta do czego służy dany element.
Zamiast tego zawsze powinniśmy dostarczać
niezbędne informacje. Posługując się interfejsem
strony internetowej, użytkownik powinien dokonywać
wyborów spośród jasno opisanych opcji.

Klasyczny przykład niestosowania się do tej
zasady to formularz wyszukiwania z opisem
umieszczonym wewnątrz pola. Po kliknięciu opis
znika, jednak już nie pojawia się ponownie, jeśli
użytkownik kliknie w inny element. Skutkuje to
tym, że ostatecznie otrzymujemy pole formularza
bez opisu. To typowe poleganie na tym, że
internauci zapamiętają wcześniej wyświetlane
instrukcje.

W rzeczywistości wielu użytkowników nie będzie
go pamiętać. Aby rozwiązać problem, należy
polegać na odpowiednim informowaniu i dać
internaucie odwiedzającemu serwis możliwość
dokonania świadomego wyboru, umieszczając
odpowiednią etykietę poza polem formularza.

Zapewnij elastyczność i efektywność

Efektywność strony jest ważniejsza od jej
efektowności. Elastyczny interfejs nie ukazuje
początkującym użytkownikom wszystkich elementów.
Najpopularniejszy przykład to wyszukiwarka
na stronie WWW, której zaawansowane opcje są
dostępne jedynie po kliknięciu w „wyszukiwanie
zaawansowane” (rysunek 10).

Dbaj o estetykę i umiar

Należy zawsze dbać o maksymalną prostotę.
Pojawienie się każdej nowej funkcjonalności
musi mieć solidne uzasadnienie. Dodatkowe
„bajery” nie sprawią, że strona automatycznie
stanie się lepsza. Często wręcz utrudniają korzystanie
ze strony.

Efektywny interfejs musi więc posiadać odpowiedni
umiar. W czasach coraz bardziej skomplikowanych
stron, prosty interfejs może się okazać
strzałem w dziesiątkę, czego przykładem jest
serwis ze zdjęciami Garnek.pl (http://www.garnek.pl) – rysunek 11. Jest to internetowa galeria zdjęć
wyposażona jedynie w minimum funkcji.

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

Co się dzieje, gdy użytkownik natrafia na
błąd? Czy jest zasypywany technicznym słownictwem?
A może otrzymuje odpowiednią pomoc?
Użytkownika nie interesuje, że błąd ma numer 404.
Interesuje go to, że nie może znaleźć strony, której
szukał.

Popatrzmy na stronę błędu 404 portalu Gazeta.pl (http://www.gazeta.pl), przedstawioną na rysunku
12. W treści nie ma technicznych sformułowań,
co jest dużym plusem. Niestety zwrot „Error 404”
znajduje się na pasku tytułowym. Stronie brakuje
także wyszukiwarki.

Jednymi z bardziej wrażliwych na błędy
elementów są formularze, szczególnie te rozbudowane.
Jak skutecznie informować o błędach
popełnianych przez użytkowników?

Po pierwsze, jeśli pole formularza wymaga
szczególnego sposobu wprowadzenia danych
(co raczej nie powinno mieć miejsca), to osoba
wypełniają musi zostać o tym poinformowana
wcześniej. Po drugie, w przypadku popełnienia
błędu, należy wyświetlić ponad formularzem
odpowiedni komunikat oznaczony czerwonym kolorem,
który wskazuje na problem. Nie wystarczy
enigmatyczny przekaz w stylu „Błąd!”. Konieczny
jest dokładniejszy zwrot rodzaju „Uwaga!

Nie wypełniłeś pola z datą urodzenia”.

Jest on
o wiele bardziej sensowny. Po trzecie, również
problematyczne pole powinno zostać dodatkowo
oznaczone. Nic nie stoi na przeszkodzie, aby otoczyć
je czerwoną ramką i wyświetlić dodatkowy
komunikat.

Zadbaj o pomoc i dokumentację

Gdy jednak wszystko zawiedzie, użytkownik
powinien mieć do swojej dyspozycji odpowiedni
dział pomocy i dokumentację. Poświęć chwilę
na analizę następującego przykładu. W polskiej
branży pozycjonowania stron WWW popularne
są systemy wymiany linków.

Większość z nich ma dosyć skomplikowaną budowę, daleką od
intuicyjności. Jeden z popularniejszych systemów
to LinkMe.pl (http://www.linkme.pl). Korzystanie
z niego po raz pierwszy może być niezbyt przyjemnym
przeżyciem. Niemniej autorzy stworzyli dobrą
dokumentację, która sprawdza się jako źródło
informacji. To pozytywnie wyróżnia ten system na
tle konkurencji.

Poznać zasady

Mamy nadzieję, że przekazane informacje będą
przydatne dla Ciebie i pokażą Ci, jak w praktyce
wykorzystywać heurystyki. Na pewno już
dostrzegasz, że projektant mający odpowiednie
doświadczenie jest w stanie jedynie przy użyciu
kilku ogólnych zasad przetestować nawet skomplikowany
serwis oraz zaproponować wprowadzenie
niezbędnych ulepszeń.