Projektowanie stron WWW (1)

Autor: Damian Chodorek • Opublikowany: 27 listopada 2014 • Ostatnia aktualizacja: 1 grudnia 2014 • Kategoria: tworzenie stron www

10 heurystyk Jakoba Nielsena – Twoja ściąga.

Czy kiedykolwiek zdarzyło Ci się zagubić na stronie WWW? Czy zdarzyło Ci się kompletnie zbaranieć? Czy czułeś się zdezorientowany i sfrustrowany, ponieważ nie wiedziałeś co kliknąć? Mi tak. Nawet na bardzo popularnych stronach trudno się czasem połapać.

Projektowanie porządnych stron WWW wymaga nie tylko wiedzy czysto technicznej, ale także znajomości podstaw (przynajmniej) Web Designu. Nie chcesz być kolejnym programistą, którego strony są kompletnie nieczytelne.

Na szczęście nie musisz kończyć Akademii Sztuk Pięknych, aby tworzyć przyjemne w użyciu strony i programy. Wystarczy znać i przestrzegać kilku zasad, które poznasz w tym artykule.

Heurystyki Nielsena

Są to zasady interakcji człowieka z maszyną, które mają za zadanie sprawić, aby użytkownik był optymalnie zadowolony. Zostały opracowane w 1990 roku przez Jakoba Nielsena oraz Ralfa Molicha. Jak podaje wikipedia: Nielsen znany jest ze zdecydowanego konserwatyzmu, z jakim traktuje technologiczne zmiany w świecie WWW. Za swoistą deklarację jego poglądów można uznać serwis UseIt.com, którego ascetyczny wystrój pozostaje prawie niezmieniony od początku jego istnienia (źródło: http://pl.wikipedia.org/).

W kolejnych akapitach opiszę 10 heurystyk Nielsena. Postaram się zbytnio nie teoretyzować i przytaczać przykłady z życia wzięte. Jeśli planujesz w przyszłości stworzyć blog, wizytówkę lub sklep, to szczerze polecam stosowanie się do zasad Nielsena. Dzięki temu Twoi użytkownicy będą zadowoleni, zleceniodawcy będą zadowoleni, a więc Ty także będziesz zadowolony.

1. Pokazuj status systemu

Ta zasada ma za zadanie dodać pewności siebie użytkownikowi. Ma on wiedzieć co się właśnie stało i gdzie aktualnie się znajduje. Warto więc stosować tzw. breadcrumbs (okruszki), których zadaniem jest pokazywanie aktualnej ścieżki na stronie.

Użytkownik powinien w łatwy sposób zidentyfikować na jakiej podstronie się znajduje. Może to być jej tytuł lub po prostu wyróżniona pozycja w menu.

W momencie, gdy użytkownik dokona jakiejś operacji, powinien być o tym zawsze poinformowany, a nawet pochwalony (poprzez wyświetlenie komunikatu lub przyjemnej grafiki).

Zwłaszcza w momencie składania zamówienia ważne jest, aby było jasne na jakim etapie znajduje się użytkownik. Przykładowo na stronie linii lotniczych Easy Jet, podczas kupna biletów, każdy etap ma swój numer. Dzięki temu wiadomo jak przebiega proces kupna.

Użytkownik musi być zawsze poinformowany o tym, że:

  • e-mail został wysłany,
  • obrazek się wgrywa na serwer,
  • produkt dodano do koszyka,
  • produkt usunięto z koszyka.

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

System to przykładowo nasza strona internetowa. Rzeczywistość to grupa użytkowników, która będzie z niej korzystać. Aby zrealizować tę heurystykę, należy poświęcić trochę czasu na przemyśleniu tego kim jest grupa docelowa. Kim są odbiorcy?

Jeśli stronę będą odwiedzać informatycy to w ok, mogę pozwolić sobie na żargonowe słownictwo. Jeśli natomiast projektuję sklep internetowy, który oferuje sprzedaż komputerów, to powinienem zadbać, aby informacje o produktach były zrozumiałe dla przeciętnego człowieka, ale także wystarczające dla informatyka. W końcu, różni ludzie kupują sprzęt komputerowy, prawda? Należy o nich zadbać.

Mało tego. Użytkownik powinien rozumieć i intuicyjnie wiedzieć co znaczą dane przyciski czy grafiki. Z tego powodu powszechnie stosuje się koszyk zakupowy oraz domek jako grafiki, które reprezentują produkty do kupna i stronę główną. Jeśli zechciałbyś zastosować całkowicie inne grafiki, to wprowadziłbyś niepotrzebne zamieszanie.

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

Ta zasada mówi, że jeśli już dajemy użytkownikowi możliwość wykonania danej czynności, to powinniśmy dać mu możliwość cofnięcia jej. Zakładamy, że ludzie będą się mylić prawie w każdym możliwym miejscu i chcemy ułatwić im korekcję swoich błędów.

Jako użytkownik chcę łatwo:

  • dodać produkty do koszyka,
  • usunąć z koszyka dodane produkty,
  • przejść na poprzednią stronę,
  • przywrócić przypadkiem usunięty element,
  • poprawić źle uzupełniony adres wysyłki, e-mail i każdy inny formularz.

Operacje, które są ostateczne, powinny być rzadkością w stosunku do tych, które można cofnąć. Przyciski, które za nie odpowiadają, powinny być oddalone od zwykłych przycisków i najlepiej wyróżnione kolorem. Przykładowo: zapłać, wyślij, opróżnij kosz.

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

Czy znasz to niekomfortowe uczucie kiedy jesteś w nowym miejscu, nikogo nie znasz i wszystko wydaje się obce? Chodzi o to, aby po wejściu na naszą stronę użytkownicy się tak nie czuli. Zamiast tego powinni mieć wrażenie, że są w dobrze znanym i przyjaznym miejscu.

Być może zauważyłeś, że sposób ulokowania elementów i użycia grafik jest bardzo podobny w sklepach i innych serwisach internetowych? Przestrzeganie takich niepisanych zasad, zawsze będzie dużym plusem.

Często:

  • logotyp jest w lewym górnym logu i przenosi na stronę główną,
  • wyszukiwarka znajduje się w prawym górnym rogu,
  • w stopce jest regulamin, polityka prywatności i ewentualnie powtórzone pozycje z menu.

Słowo spójność odnosi się także do wewnętrznej konsekwencji. Najlepiej, aby formatowanie było takie samo na całej stronie. Charakterystyczne elementy (przyciski, formularze, nagłówki, itd.) powinny znajdować się w tych samych pozycjach, w tej samej kolorystyce, z wykorzystaniem tej samej czcionki. Dzięki temu użytkownicy szybko zorientują się co i jak oraz będą intuicyjnie korzystać z serwisu.

5. Zapobiegaj błędom

Być może zauważyłeś, że temat błędów użytkownika przewija się przez heurystyki dość często. Zapewne musi być wyjątkowo ważny. Projektując serwis internetowy nie możemy dopuścić do sytuacji, w której użytkownik zobaczył swój produkt i zarejestrował się tylko po to, aby dowiedzieć się, iż nie jest on dostępny w sprzedaży.

Wszystko czego użytkownik nie będzie mógł zrobić, powinien wiedzieć jak najszybciej. Wszelkie informacje muszą znaleźć się w miejscu, w którym są potrzebne, a nie w innym, oderwanym od kontekstu.

Przykład? Często internetowe rozkłady jazdy autobusów mają, skróty umieszczone przy danych kursach, np, N może oznaczać kursuje tylko w niedziele. Takie wyjaśnienie oznaczenia, powinno być dostępne po najechaniu myszą lub w inny, równie łatwy sposób, a nie na oddzielnej podstronie.

Mam nadzieję, że czytając powyższe heurystyki, wyrobiłeś sobie pogląd na to jak powinien wyglądać i działać wzorowy serwis internetowy. W tym artykule to wszystko. W następnej części opisze kolejne 5 heurystyk. Zapraszam!

część 2

Zobacz również
Projektowanie stron WWW (2)10 heurystyk Jakoba Nielsena – Twoja ściąga.
Kurs obiektowego JavaScript (1)Wstęp, historia i zastosowanie języka. Dla kogo jest ten kurs?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.