Usability od podstaw - heurystyki w praktyce

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ę.

Rys. 1. Strona internetowa guru użyteczności, Jakoba Nielsena (http://www.nngroup.com), to doskonałe źródło informacji na ten temat 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.

Rys. 2. Witryna mbank.pl zawiera ścieżkę nawigacyjną informującą o hierarchii stron. Chociaż nie jest ona doskonała, to i tak sama jej obecność jest plusem 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.

Rys. 3. Menu w serwisie bankier.pl wyraźnie wskazuje aktualną lokalizację użytkownika 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.

Rys. 4. Księgarnia aragon.pl informuje użytkownika, jakie są kolejne etapy składania zamówienia

Rys. 5. Składanie zamówienia w sklepie rebel. pl – nie zabrakło tu informacji o kolejnych etapach tej czynności

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.

Rys. 6. Autorzy starej wersji serwisu kopalniaprezentow. pl uznali, że „wózek” to lepsze słowo niż „koszyk”, wbrew przyzwyczajeniom internautów 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.