Zasady heurystyczne dla interfejsów mobilnych

Opublikowany: 2022-03-11

Jakob Nielsen doradzał i uczył inżynierii użyteczności w interakcjach człowiek-komputer, kiedy zaczął wyłapywać wiele wzorców. Tak więc w 1994 roku zebrał i opublikował zestaw zasad oceny dla heurystyk użyteczności, które odzwierciedlały to, czego się nauczył. Dziś, po prawie 25 latach i przekształceniu komputera w smartfon, zasady Nielsena wciąż są mocne.

Projektowanie skoncentrowane na człowieku zwiększyło znaczenie użytkownika, a procesy projektowe zostały odpowiednio dostosowane; jednak, chociaż zasady Nielsena pozostały uniwersalne dla wszystkich typów ekranów, wraz z ciągłym wzrostem wykorzystania urządzeń mobilnych nacisk kładzie się na interfejsy mobilne.

Przeszukaj sieć w poszukiwaniu zasad heurystycznych, a pojawi się długa lista nieco zróżnicowanych zestawów. Poniżej znajduje się wyselekcjonowany zbiór dziesięciu zasad inspirowanych projektami skoncentrowanymi na człowieku i myślącymi liderami o użyteczności.

Heurystyki użyteczności zaczynają się od potrzeb użytkownika

Zanim przejdziemy do zbioru zasad, należy zauważyć, że znaczenie użytkownika stale rośnie. Przeprojektowanie GOV.UK, mimo że jest stroną rządową, jest doskonałym przykładem produktu kierowanego przez użytkowników, który zyskał światowe uznanie ze względu na swoją użyteczność.

Ben Terrett, dyrektor ds. projektowania, rozpoczął od zestawu zasad projektowania interfejsu użytkownika, które obejmowały zarówno strategię produktu, jak i podejścia do projektowania wizualnego. Pierwsza zasada była jak gwiazda północy sukcesu produktu: „Zawsze zaczynaj od potrzeb użytkownika. Jeśli nie wiesz, jakie są potrzeby użytkownika, nie zbudujesz właściwej rzeczy. Badaj, analizuj dane, rozmawiaj z użytkownikami. Nie rób założeń. Miej empatię dla użytkowników i pamiętaj, że to, o co proszą, nie zawsze jest tym, czego potrzebują”.

Zasady heurystyczne dotyczące oceny użyteczności pomagają określić, gdzie projekt interfejsu użytkownika nie zapewnia przyjaznego dla użytkownika środowiska.

#1 Przejrzystość struktury systemu

Czynność uwidaczniania pewnych elementów i struktur, aby użytkownik miał wystarczające zrozumienie kontekstu.

Interfejs użytkownika powinien pozwalać użytkownikowi wierzyć, że ma kontrolę. Powinni być w stanie łatwo odpowiedzieć na te pytania: „Gdzie teraz jestem?” i „Gdzie mogę się stąd udać?” Gdy system jest przejrzysty, użytkownik ma kontrolę nad podejmowaniem decyzji o tym, co będzie dalej. Zyskują autonomię i późniejszą pewność w korzystaniu z interfejsu.

Menu nawigacyjne rozwija się dla heurystyki użyteczności
Menu nawigacyjne zmienia się w menu hamburgerowe, wskazując, gdzie można później znaleźć informacje. (projekt Gal Shir)

#2 Natychmiastowa informacja zwrotna o działaniu

Odpowiedź na akcję użytkownika, która potwierdza, że ​​system otrzymał żądanie.

Każde działanie użytkownika powinno mieć natychmiastową reakcję interfejsu. Natychmiastowa informacja zwrotna upewnia użytkownika, że ​​system działa zgodnie z oczekiwaniami. Nick Babich, specjalista UX w Smashing Magazine, wykorzystuje wskaźnik postępu jako dobry przykład jasno komunikowanego statusu działania. Twierdzi, że wizualnie informuje użytkownika, że ​​jego akcja została zaakceptowana, a system wkrótce ujawni następną akcję. Bez wskaźnika użytkownik pozostaje z niepewnością i frustracją, które mogą doprowadzić do przerwania podróży.

Wskaźnik postępu sygnalizuje informację zwrotną o działaniu
Prosta animacja potwierdza odebranie akcji „przeciągnij, aby odświeżyć”, a poniższa treść jest aktualna. (projekt: jiangxiaobei)

#3 Świadomość błędów

Wystarczająca ilość informacji, a także możliwości, z których użytkownik może skorzystać, gdy podąży ścieżką, której wolałby nie iść.

W pewnym momencie użytkownicy niezmiennie wchodzą w interakcję z interfejsem mobilnym w sposób, który nie był zamierzony i znajdują się w frustrującej i nieproduktywnej sytuacji, która nie obsługuje ich potrzeb. Bariery i ślepe zaułki są częstymi przyczynami przedwczesnego zakończenia podróży. Interfejs użytkownika powinien zapewniać wystarczającą liczbę wskaźników, aby pomóc użytkownikowi rozpoznać, zdiagnozować i naprawić błąd.

Pomoc powinna być zawsze łatwo dostępna; jednak osiągnięcie równowagi jest trudne. Zbyt wiele opcji może powodować przeciążenie poznawcze. Użytkownik powinien dobrze rozumieć, jak rozwiązać błąd i jak mu zapobiegać w przyszłości.

Stan błędu w zasadach projektowania interfejsu użytkownika
Pusty stan w tym interfejsie mobilnym wyjaśnia, dlaczego użytkownik widzi ekran i zapewnia dwie czynności, które rozwiążą błąd. (projekt Murat Mutlu)

#4 Elastyczność użytkowania

Interfejs, który może być intuicyjnie i efektywnie używany przez użytkowników o różnym stopniu doświadczenia.

Interaktywne środowisko mobilne musi być niezależne od wskazówek użytkownika z zewnątrz. Niezależnie od tego, czy użytkownik po raz pierwszy korzysta z aplikacji mobilnej, czy setny, interfejs powinien uwzględniać oba scenariusze.

Doświadczony użytkownik powinien mieć dostęp do skrótów i głębszego zrozumienia systemowego, podczas gdy nowy użytkownik nigdy nie powinien zostać porzucony w zwykłym zamieszaniu. Dzięki elastyczności interfejsu użytkownik może wybrać i kontrolować podróż, która najlepiej odpowiada jego możliwościom i potrzebom.

Zasady inżynierii kognitywnej Jill Gerhardt-Powal radzą projektantom „w razie potrzeby zapewnić wielokrotne kodowanie danych — system powinien dostarczać dane w różnych formatach i/lub poziomach szczegółowości w celu promowania elastyczności poznawczej i zaspokojenia preferencji użytkownika”. Interfejs, który jest albo przytłaczający, albo restrykcyjny, zapewni frustrujące wrażenia.

Heurystyki Nielsena dotyczące elastyczności użytkowania
Nowy użytkownik powinien zapoznać się z funkcjonalnością narzędzia, ale doświadczony użytkownik nigdy nie zobaczy podpowiedzi dotyczących działań, które wykonuje regularnie. (projekt Lakshmi Karuppiah)

#5 Znajomość uniwersalnych doświadczeń

Wykorzystanie elementów projektu, które odnoszą się do typowych ludzkich doświadczeń i oczekiwań.

Historia GUI rozpoczęła się, gdy Apple wykorzystał odniesienia ze świata rzeczywistego w pierwszym przyjaznym dla użytkownika projekcie interfejsu komputerowego. „Lisa” została zaprojektowana z elementami takimi jak ikona folderu, wskazująca organizację plików. Te fizyczne odniesienia były przydatne, gdy większość ludzi nie znała interakcji cyfrowych, ale wraz ze wzrostem alfabetyzacji cyfrowej uniwersalne odniesienia nie muszą już być tak dosłowne.

W miarę jak spędzamy więcej czasu na interakcji z ekranami, rozwinęły się wspólne oczekiwania użytkowników. Spodziewamy się, że „+” rozwinie się do większej ilości informacji, a menu nawigacyjne pozostanie na górze lub na dole ekranu mobilnego. Korzystając z odniesień, które zrozumie większość użytkowników, interfejs staje się intuicyjny.

Zasady heurystyczne opierają się na znajomości
Te dwie ikony są natychmiast rozpoznawalne i wyraźnie wskazują działanie zrozumiałe dla większości użytkowników. (projekt: <a href=”https://dribbble.com/pixelamiri

#6 Ograniczenie informacji i estetyki projektu

Stworzenie minimalistycznego projektu eliminującego niepotrzebne elementy, które mogłyby zakłócać usprawnione i celowe wrażenia.

Ogólną zasadą we wszystkich interakcjach cyfrowych jest wyeliminowanie zamieszania. Aby skrócić czas podejmowania decyzji i skrócić błędy, Jill Gerhardt-Powal wzywa projektantów do zmniejszenia niepewności poprzez wyświetlanie danych w sposób jasny i oczywisty. Można to osiągnąć, usuwając niepotrzebną zawartość i używając koloru, układu i typografii do prowadzenia użytkownika przez ekran. Użytkownicy nie powinni być rozpraszani, ale powinni otrzymać wystarczające wskazówki, aby łatwo osiągnąć swój cel.

Ben Terrett często stosował czwartą z zasad projektowania GOV.UK: „Wykonaj ciężką pracę, aby to uprościć”. Uważał, że od zespołu projektowego zależy pełne zrozumienie problemów, z którymi mają do czynienia, a także procesu prowadzącego do najlepszego rozwiązania zapewniającego intuicyjne, pouczające i skuteczne doświadczenie użytkownika. Niektóre z ich metod zostały opisane w niniejszym studium przypadku.

Gov.uk
Serwisy cyfrowe rządu brytyjskiego podzieliły informacje, aby określić, co użytkownicy powinni wiedzieć, i stworzyły projekty wizualne, które eliminowały wszystko, co niepotrzebne, aby zapewnić przejrzystość informacji. (projekt rządowych usług cyfrowych)

#7 Priorytet funkcji nad formą

Decyzje projektowe są oparte na tym, co dany element ma zrobić, a nie na priorytetowym stylu wizualnym.

„Jeśli uważasz, że coś jest sprytne i wyrafinowane, strzeż się — prawdopodobnie jest to pobłażanie sobie”. — Don Norman, płodny projektant produktów i autor „The Design of Everyday Things”

Projekt wizualny interfejsu powinien zawsze zaczynać się od zdefiniowanych funkcji. Kiedy styl i trendy są traktowane priorytetowo, wynik może wyglądać pięknie i przyciągać dużo uwagi, ale ostatecznie może prowadzić do niespójnego doświadczenia użytkownika. Forma wizualna nie może uratować dysfunkcjonalnego projektu.

Wskazówki wizualne mogą służyć do kierowania użytkownika w funkcjonalności aplikacji. Prawo Fitta stanowi, że kształt, odstępy i rozmiar mogą doprowadzić użytkownika do zrozumienia sytuacji i podjęcia pożądanego działania. To tutaj forma wspiera i wzmacnia funkcję.

Forma podąża za funkcją w heurystyce użyteczności
Ta cyfrowa karta pokładowa uwzględnia, w jaki sposób podróżny będzie potrzebować informacji, i wykorzystuje techniki wizualne, aby informacje były funkcjonalne. (projekt: Marin Begovic)

#8 Dostępność informacji

Strategiczne rozmieszczenie elementów interfejsu na wyciągnięcie ręki, aby nie musieli polegać na pamięci.

Łatwiej jest coś rozpoznać niż przywołać z pamięci. Jeśli funkcja interfejsu mobilnego opiera się na informacji lub zrozumieniu systemu, który nie jest powszechnie znany, informacje powinny być dostępne, aby użytkownik mógł łatwo się do nich odnieść.

Jedna z heurystycznych zasad Nielsena sugeruje, że projektant powinien „zminimalizować obciążenie pamięci użytkownika poprzez uwidocznienie obiektów, działań i opcji. Użytkownik nie powinien zapamiętywać informacji z jednej części dialogu do drugiej. Instrukcje użytkowania systemu powinny być widoczne lub łatwo dostępne, gdy jest to właściwe.”

Jill Gerhardt-Powal sugeruje „łączenie danych niższego poziomu w sumowanie wyższego poziomu w celu zmniejszenia obciążenia poznawczego”. Twierdzi również, że „wyświetlane nazwy i etykiety powinny być zależne od kontekstu, co poprawi zapamiętywanie i rozpoznawanie”. Należy mieć świadomość, że użytkownik widząc interfejs po raz pierwszy nie będzie miał wiedzy i znajomości informacji, które robią projektanci. Powtarzanie informacji może wydawać się przesadne dla doświadczonego zespołu, ale może być niezbędne dla nowych użytkowników.

Uber udostępnia informacje w aplikacji
Aplikacja Ubera udostępnia trzy poziomy usług taksówkowych i sprawia, że ​​każda opcja jest łatwo dostępna dla użytkownika w momencie potrzeby. (projekt Uber)

#9 Niezawodność spójności

Wykorzystanie spójnych i ustandaryzowanych elementów, takich jak słowa, sytuacje i działania, aby stworzyć spójne doświadczenie.

Ludzi pociągają wzorce — używamy ich, aby zrozumieć świat. Twórz wzorce w interfejsie mobilnym, a stanie się on narzędziem nauczania dla użytkowników, aby dowiedzieć się, czego się spodziewać i jak wchodzić w interakcje z projektem interfejsu.

„To nie jest kaftan bezpieczeństwa ani księga zasad. Każda okoliczność jest inna”. Zasady projektowania GOV.UK stanowią, że interfejs powinien być spójny, ale nie jednolity. Jak powtarza Jill Gerhardt-Powal: „Nowe informacje powinny być prezentowane w ramach znajomych (np. schematów, metafor, potocznych terminów), aby informacje były łatwiejsze do przyswojenia”.

Heurystyka Nielsena wymaga spójności
Większy nacisk Google na projektowanie przejawia się w szczegółowych wytycznych dotyczących wszystkich projektów interfejsu użytkownika. (zaprojektowany przez materiał)

#10 Rozsądne zwolnienie

Stała praktyka refleksji podczas procesu projektowania w celu zapewnienia zgodności zasad projektowania interfejsu użytkownika i heurystyk użyteczności z przeznaczeniem produktu i potrzebami użytkownika.

Jakob Nielsen jako pierwszy przyznał, że nie da się przedstawić uniwersalnej specyfiki projektowania UI. Na przykład, dwie z jego zasad heurystycznych mogą być ze sobą sprzeczne — nr 6: dostarczenie wszystkich informacji potrzebnych użytkownikowi do podjęcia decyzji i nr 8: wyeliminowanie wszystkiego, co niepotrzebne.

To do osoby oceniającej heurystycznie i zespołu projektowego należy określenie najlepszych decyzji dla ich unikalnych przypadków użycia. Jeśli produkt jest skoncentrowany na człowieku i zbudowany wokół potrzeb użytkownika, zespół będzie wspierany wiedzą o tym i będzie miał silne poczucie celu w podejmowaniu tych decyzji.

• • •

Dalsza lektura na blogu Toptal Design:

  • Analiza heurystyczna dla UX — jak przeprowadzić ocenę użyteczności
  • Zasady projektowania i ich znaczenie
  • Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
  • Tworzenie przewodnika po stylu UI dla lepszego UX
  • Najlepsze praktyki i błędy w projektowaniu aplikacji mobilnych