Katolicy mają 10 przykazań. Niemalże każde Państwo posiada konstytucję. A każdy projektant interfejsów graficznych ma 10 heurystyk Nielsena.

Ale... co to właściwie jest? Już tłumaczę!

thesign.digitalTM to agencja brandingowa tworząca marki dla liderów usług cyfrowych.
thesign.digital
Szymon Kordylewicz
D/006
Design
Heurystyki Nielsena - Część I
Heurystyki Nielsena - Część I
Z tego artykułu dowiesz się:

O słynnych już heurystykach Nielsena, czyli podstawach podstaw w projektowaniu użytkowym.

Heurystyki Nielsena - Część I

Jakob Nielsen to jeden z najbardziej znanych specjalistów w dziedzinie użyteczności, który w 1990 wraz z Ralfem Molichem przedstawił 10 heurystyk. Zasady te zostały opracowane na podstawie wieloletniego doświadczenia w dziedzinie inżynierii użyteczności i stały się podstawowymi zasadami interakcji człowiek-komputer.

Mogą pomóc zespołom projektowym zaoszczędzić znaczną ilość czasu w fazie wczesnych testów użyteczności. Ponadto warto również wykorzystać je jako listę kontrolną przy projektowaniu nowego produktu lub funkcji.

Pomyśl o tym, jak wolisz zostać obsłużony w kawiarni. Masz dwie opcje:


Pierwsza: Od samego wejścia wita Cię uśmiechnięty barista. Miłym głosem pyta co podać, a gdy jesteś niezdecydowany, wypytuje o preferencje i poleca kawę z najlepszych palarni. Informuje Cię o czasie oczekiwania, a następnie przynosi zamówioną kawę oraz ciasteczko niespodziankę. Gdy prosisz o rachunek, otrzymujesz go natychmiast – i to z różnymi opcjami płatności.

Druga: Stoisz w dłuuugiej kolejce, i gdy w końcu dopychasz się do lady, barista udaje, że Cię nie widzi. Musisz upominać się o atencję, a ten z kwaśną miną pyta co podać. Okazuje się, że połowa z wybranych pozycji nie jest już dostępna. W końcu bierzesz małą czarną i czekasz na nią 15 minut. Na sam koniec płacisz rachunek przy barze, bo nie możesz się doczekać na obsługę przy stoliku.

Nie oszukujmy się – każdy z nas był w obu tych miejscach. Dzięki przedstawionym niżej heurystykom Nielsena dowiesz się, w jaki sposób sprawić, by Twoi klienci poczuli się jak w pierwszej kawiarni. Bo dobry UX to wysoki komfort użytkownika. Po prostu!

1. Pokazuj status systemu

System powinien zawsze informować użytkowników o tym, co się dzieje, poprzez odpowiednią informację zwrotną. Rozglądasz się i nie wiesz, gdzie jesteś, ani jak dotrzeć do miejsca, do którego zmierzasz? Czujesz się zaniepokojony? Właśnie w ten sposób może się poczuć użytkownik, jeśli nie zostanie odpowiednio poinformowany, w jakim miejscu w systemie się znajduje.

Gdzie jestem? Po pierwsze, należy zawsze informować użytkownika w jakim miejscu się znajduje. Dobrym przykładem są okruszki chleba, breadcrumbs - czyli wyraźnie oznaczona ścieżka procesu. Pasek postępu informuje Cię na jakim etapie się znajdujesz.


Co się dzieje? Spójrz na swój smartfon. Ikony na ekranie informują o stanie baterii, połączeniu Wi-Fi, odebranych wiadomościach, nieodebranych połączeniach i wiele więcej. Wyobraź sobie, jak niepewnie byś się czuł gdybyś nie miał tych informacji. Wykorzystując znaki, ikony i wskaźniki, system komunikuje swój status i pomaga użytkownikowi podejmować lepsze, bardziej świadome decyzje.

Zadowolony klient to taki, na którego pytania odpowiadasz jeszcze zanim je zada. Informowanie należy do Twoich obowiązków.

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

Postępuj zgodnie z rzeczywistymi konwencjami, przedstawiaj informacje w naturalnej i logicznej kolejności. Ludzie podchodzą do każdego nowego systemu z myślą o modelu mentalnym. Innymi słowy, zakładają jak system mógłby działać w oparciu o ich wcześniejsze doświadczenia.

Po pierwsze, naturalny język pozwala bardzo szybko rozumieć treści i funkcje. Po drugie, należy pamiętać, że użytkownicy nie czytają wszystkiego od deski do deski tylko skanują pobieżnie w poszukiwaniu kluczowych informacji. Im silniejsze skojarzenie, prostszy opis i adekwatniejsza grafika tym większa szansa na prawidłowe wykonanie działania. Dlatego aplikacja do przechowywania kart płatniczych nazywa się "Wallet".

Skrajnym przykładem jest skeuomorfizm, na początku wdrażania pierwszych komputerów i interfejsów graficznych pomógł ludziom nauczyć się, jak korzystać z nowych funkcji dzięki obiektom i procesom, które wcześniej znali. Efektem są aplikacje takie jak kompas, kalkulator, kosz lub narzędzia projektowe np. ołówek, długopis, linijka.

Chociaż kreatywność i innowacyjność to generalnie pożądane umiejętności, czasami nie ma potrzeby wymyślania koła na nowo. I mimo że pokusa tworzenia nowych rzeczy jest ogromna to warto się powstrzymać i oprzeć o to co dobrze znane.

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

Każdy z nas przynajmniej raz kliknął nie tam, gdzie trzeba i chwilę później pomyślał: „O nie! Jak mogę to cofnąć?!” Użytkownikom zdarza się czasem zabłądzić albo zrobić o krok za daleko. Pamiętajmy o ułatwieniach pozwalających poruszać się swobodnie między różnymi poziomami systemu. Użytkownicy często wybierają funkcje przez pomyłkę, dlatego potrzebują wyraźnie oznaczonego „wyjścia awaryjnego”. Pamiętaj o opcjach „cofnij” i „ponów”.

Każdy system powinien posiadać jasny kierunek do wyjścia.

Zapewnienie pełnej swobody w poruszaniu się po witrynie zapewnia komfort użytkownikowi. Jeżeli ułatwiamy mu wybór produktu i umieszczenie go w koszyku, musimy zadbać, aby tak samo łatwo mógł go z niego usunąć. Ostatnią rzeczą, jakiej chcemy, jest to, aby użytkownik rozwiązał ten problem zamknięciem okna.


Odpowiednie wyjście awaryjne może być czymś tak prostym, jak "strzałka wstecz" (np. W przeglądarce), folder "Kosz", który daje możliwość odzyskania usuniętego pliku, lub przycisk „cofnij”, który pozwala użytkownikowi cofnąć ostatnią akcję. Klient, który czuje niepokój, odwleka decyzje zakupowe, węszy podstęp i czuje potrzebę przemyślenia zakupu. Efekt tego jest taki że tracimy jego zaufanie i szanse pozyskania lojalnego orędownika.

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

Użytkownicy nie powinni się zastanawiać, czy różne słowa, sytuacje lub działania oznaczają to samo. Postępuj zgodnie ze standardami twojej platformy.

Brak alternatywnego tekstu dla tego zdjęcia

Powiedzmy, że przychodzisz do pewnej kawiarni dzień w dzień przez miesiąc. Za każdym razem do kawy dostajesz ciasteczko. Lecz trzydziestego pierwszego już go nie otrzymujesz. Szybko przyzwyczajamy się do wyższych standardów, przez co zmiana zostaje odebrana negatywnie. Mimo, że ciastko i tak było gratisem.


Pamiętaj że użytkownicy większość czasu spędzają na interakcji z innymi systemami.

Projektując nową aplikację, nigdy nie zapominaj, że ludzie spędzają większość czasu na interakcjach z innymi systemami, dlatego stosowanie sprawdzonych schematów i wspólnych wzorców ostatecznie zapewni znacznie lepsze wrażenia.

Spójność jest jednym z najsilniejszych czynników przyczyniających się do wzrostu użyteczności. Przykładowo, w przypadku stron internetowych - logotyp powinien być umieszczony z lewej strony na samej górze oraz być podlinkowany do strony głównej, wewnętrzną wyszukiwarkę umieszcza się w prawym górnym rogu, a link do regulaminu znajdziemy prawie zawsze na dole strony. Jeśli chodzi o aplikacje mobilne to można zauważyć wyraźny trend umieszczania wyszukiwarki w topie, zaś nawigacji (nav bar) na samym dole ekranu jako belkę. Odchodzi się od umieszczania menu w formie hamburgera ze względu na ograniczenia fizyczne dłoni.

Smashing magazine

Design System

Dobrym startem do stworzenia spójnego systemu jest design system. Jest to zbiór komponentów, wielokrotnie wykorzystywanych i w różnych kombinacjach. Jest używany zawsze tam gdzie w grę wchodzi skala. Prosty DS składa się ze zdefiniowanych kolorów, fontów (wielkości, kolory, przypadki użycia itp.), komponentów (buttony, formularze, dropdown'y) i oczywiście im większy system tym więcej elementów będzie DS posiadał.

Przykładami są wytyczne od Apple Human Interface Guidelines lub Google Material Design.

Design System
Przykład Design Systemu

Projektowanie o zasoby prowadzi do metodologii którą opisał Brad Frost - Atomic Design. Gdzie z małych elementów (atomy) tworzymy coraz większe komponenty aż do pełnych ekranów. Polecam zapoznać się z koncepcją Brada, pomogą każdemu kto stoi przed wyzwaniem dużego formatu.

Atomic Web Design
Brad Frost - Atomic Design

5. Zapobiegaj błędom

Użytkownicy często rozpraszają się w trakcie wykonywania zadania. Zapobiegaj nieświadomym błędom, proponując sugestie, stosując ograniczenia i będąc elastycznym. Don Norman w książce "Dizajn Na Co Dzień" opisuje dwa najczęściej występujące błędy powstające w wyniku interakcji z interfejsem to poślizgnięcia i pomyłki.

• Poślizgnięcia najczęściej zdarzają się podczas wykonywania dobrze znanego zadania ale ze względu na małą uwagę, brak skupienia lub roztargnienie (co nie jest trudne w dzisiejszym tempie) wykonuje inne.

Zapobiegaj poślizgom prowadząc użytkownika tylko przez bezpieczne obszary, używaj ograniczeń które nie pozwolą ustawić niewłaściwej wartości (np. gdy wymagasz podania cyfry, nie zezwalaj na pisanie liter - wyświetl tylko klawiaturę numeryczną), sugeruj najczęściej wybierane opcje (np. podczas wyszukiwania) lub używaj okien dialogowych (np. podczas załączania plików do wiadomości).


Brak alternatywnego tekstu dla tego zdjęcia

Pomyłki są powodowane nieprawidłowym modelem mentalnym użytkownika dotyczącym działania systemu. To znaczy że użytkownik rozumie znaczenie komunikatu i świadomie wykonuje działania które prowadzi do innego wyniku niż zamierzony. Tego rodzaju błędy powinny zostać ujawnione już na etapie testów użyteczności.

Najwybitniejsi autorzy w tematyce UX (zwłaszcza Don Norman) zwracają uwagę, że osobą odpowiedzialną za błędy użytkowników jest przede wszystkim projektant, który nie dopilnował rozwiązania wszystkich możliwych problemów.
Czytelny komunikat o błędzie jest dobry, ale projektowanie z myślą o przeciwdziałaniu powstaniu błędu jest lepsze.

Jest to pierwsza część artykułu. Zapraszam do części drugiej.

Szymon Kordylewicz Piła Wielkopolska Projektant Grafika thesign.digital