Prawo Hicka mówi, że im więcej mamy możliwości podczas pracy nad zadaniem, tym więcej czasu zajmie nam jego realizacja. Dlatego tworząc użyteczne interfejsy, pamiętajmy, że użytkownik powinien czuć się na naszej stronie swobodnie i mieć wybór, ale… nie za duży ;) .

Nie zaśmiecajmy interfejsu zbyt dużą ilością elementów, które rozpraszają uwagę i wprowadzają wśród użytkowników poczucie zagubienia. Ludzie, owszem, chcą wybierać, ale przecież nie z 1000 opcji jednocześnie.

Dobry przykład user interface: strona amazon.com

Żeby projektować dobre interfejsy, warto wiedzieć, jak wyglądają te wzorcowe. Strona główna Amazona ma tylko kilka przycisków nawigacyjnych. Resztę ekranu wypełniają atrakcyjne zdjęcia, które prezentują dostępne produkty i zachęcają do kliknięcia „Quick look”.

Menu z dostępnymi kategoriami jest ukryte. Widzimy je dopiero po najechaniu kursorem w odpowiednią kategorię. Gdyby projektanci odpowiedzialni za architekturę informacji na witrynie zdecydowali się od razu zaprezentować całą listę dostępnych kategorii, moglibyśmy poczuć się przygnieceni nadmierną ilością informacji, a sama witryna wydałaby nam się przeciążona contentem.

Ukrycie opcji – dopóki sami nie zechcemy ich wybrać – sprawia, że strona, oprócz tego, że jest bardziej przyjazna dla użytkownika, jest też po prostu bardziej atrakcyjna wizualnie.

Oznaczaj ważne elementy na stronie

Użytkownik musi wiedzieć, jaka jest funkcja i cel istnienia poszczególnych elementów na stronie. Projektant interfejsu, współpracujący z web designerem, musi zatem tak je oznakować, żeby nie wzbudzały żadnych wątpliwości. Ktoś, kto porusza się po witrynie, musi to robić intuicyjnie. Dlatego przyjęło się, że mamy np. stały wzór znakowania niektórych ikon. Przyzwyczailiśmy się, że lupa oznacza „poszukiwanie” i dlatego znajduje się przy polu umożliwiającym wyszukiwanie.

ui_interfejs_dowpisu

Natasha Postolovski ze Smashing Magazine wyróżnia pięć rodzajów takich znaczników:

  1. Jawne – słowa lub obrazy są oczywiste, sugerują, co należy zrobić (to przyciski call to action, czyli zachęcające do działania).
  2. Wzory (pattern) – ich znaczenie jest powszechnie znane i używane przez wszystkich. Jeśli widzimy ikonkę trójkąta obróconego w prawą stronę, wiemy, że mamy do czynienia z materiałem wideo, który możemy odtwarzać.
  3. Ukryte – wiemy, że możemy wejść z nimi w interakcję, ale dopiero w określonym momencie. Pojawiają się w widoku strony, kiedy np. możemy pobrać jakiś element ze strony albo widzimy symbol aktówki – czyli plików.
  4. Metaforyczne – często połączone z innymi rodzajami znaczeń. Są to obrazy, które sugerują, co można zrobić, np. ikona pióra do pisania oznacza, że można wprowadzić tekst.
  5. Znakowanie „negatywne” – czyli informacja, że dana funkcja jest niedostępna, najczęściej jest ona "wyszarzona".

Wystarczy zastosować zaledwie kilka prostych znaków, żeby w łatwy sposób sprawić, że witryna zostanie odebrana jako intuicyjna i nieskomplikowana w użyciu. Użytkownicy nie chcą uczyć się nowych funkcjonalności, nie lubią też, kiedy zmienia się ich położenie na stronie. Dlatego nie proponujmy innowacyjnych rozwiązań na siłę. Skoro istnieją już pewne standardy, do których wszyscy użytkownicy Internetu zdążyli się przyzwyczaić, korzystajmy z nich. Nie komplikujmy. Te proste rozwiązania zoptymalizują działanie interfejsu i sprawią, że strona będzie prezentować się bardziej estetycznie: „Less is more”.

Stosuj ikony i symbole zamiast tekstu

Lepiej stosować symbole i używać ikon niż wprowadzać tekstowe wyjaśnienia. Dzięki ikonom unikniemy potrzeby opisywania, o co nam chodzi, a strona nie zostanie przeładowana tekstem. Starajmy się, jeśli to oczywiście możliwie, minimalizować ilość tekstu na stronie, dając się wykazać zdolnościom artystycznym naszego grafika ;).

Cdn. :) Część druga już za tydzień.

Czytaj więcej:

"Stwórz produkt idealny. Projektuj z myślą o User Experience i pracuj zespołowo!"

"Wpadnij do Wrocławia na Światowy Dzień Użyteczności"