1. Pokazuj status systemu
Przykładem takich statusów mogą być breadcrumby lub etap składania zamówienia w sklepie internetowym. Główny powód, dla którego przedstawiamy status systemu, jest zapobiegnięcie zagubienia się użytkownika w aplikacji lub na stronie. Nie chcemy, aby zrezygnował ze skorzystania z usługi lub porzucenia procesu zakupowego przez to, że nie wie co obecnie dzieje się w aplikacji, albo gdzie jest i w jaki sposób przejść dalej.
- Etapy ścieżki zakupowej
- Breadcrumby
- Dostępność towaru lub usługi
- Tagi
2. Zachowaj zgodność pomiędzy systemem a rzeczywistością
Przy projektowaniu należy zawsze zakładać, że użytkownik nie ma pojęcia, czym jest smartfon lub przeglądarka internetowa. Dobrze jest wyszukiwać schematy, które mogą być skojarzone z rzeczywistymi przedmiotami użytku codziennego. Chodzi o ikonografię, umiejscowienie elementów, sposób ich działania.
Takie działanie pozwoli użytkownikowi sprawniej zapoznać się z aplikacją.
Przykład odtwarzacza muzyki
3. Daj użytkownikowi pełną kontrolę
Przykładem takiej kontroli jest możliwość cofnięcia, zamknięcia, przejścia dalej przy jednoczesnym informowaniu użytkownika o wykonywanych ruchach. Należy przewidzieć, jakie akcje mógłby lub chciałby wykonać potencjalny użytkownik aplikacji na każdym z jej etapów. Takie przewidywanie pozwoli zaprojektować aplikacje na potrzeby użytkownika.
Przykłady:
- Nawigacja
- Albo możliwość przejścia do odpowiednich kroków
4. Trzymaj się standardów i zachowaj spójność (UI Design)
Spójność dzielimy na zewnętrzną i wewnętrzną. Spójne projektowanie całej aplikacji lub strony internetowej pozwoli użytkownikowi szybciej i łatwiej zrozumieć jej działanie, funkcjonalności, niezależnie od miejsca, w którym się będzie w niej znajdował.
Spójność wewnętrzna tyczy się:
- Fontów
- Stylowania przycisków CTA
- Kolorów i stylu linków
- Palety kolorów w obrębie strony
- Pozytywne i negatywne kolory
- Podświetlenia przycisków na hover
- Sposobu wyświetlania
- Umiejscowienia opisów pól formularza
Spójność zewnętrzna polega na podążaniu za ogólnie przyjętymi standardami UX/UI:
- Menu w górnej lub bocznej części strony
- Menu na urządzeniach (mobilnych/wbudowanych) pod hamburger icon
- Ikona koszyka lub notyfikacji w prawym górnym rogu
- Menu icons - znaczenie
- Hamburger menu - Boczne menu wysuwane, z listą elementów, wraz z możliwością wejścia na podstrony
- Doner menu - rozwijane menu zazwyczaj do filtracji contentu na stronie
- Bento menu - zmiana na grid menu elementów
- Kebab menu - opcje dla podstrony lub wybranego/wybranych elementów
- Meatballs menu - więcej - ukryte opcje, dodatkowe
5. Logo placement
- Strony www
Umiejscowienie logotypu na stronie www to header, lewa strona lub rzadziej środek headera. Bardzo rzadko można spotykać się z logotypem po prawej stronie, jest to zazwyczaj przyjmowane jako błędna decyzja projektowa. Wyjątkiem jest projektowanie stron dla krajów arabskich.
Logotyp po lewej stronie w headerze zawsze utożsamiany jest z możliwością szybkiego powrotu do strony głównej. - Aplikacje mobilne
W aplikacjach mobilnych logotyp jest tylko elementem wizualnym, który pomaga budować tożsamość marki. Umiejscowiony jest w headerze (lewa strona lub środek) jeżeli jest na to miejsce. Często również wstawiany jest sam symbol/trademark. Jeżeli nie ma możliwości wstawienia logo w headerze, wtedy ukrywane jest w sidebarze lub w sekcji "about us". - Aplikacje webowe
Różnica między stroną www a aplikacją webową, to struktura. Aplikacja webowa zazwyczaj ma panel nawigacyjny w formie sidebara lub headera, które pozwalają korzystać z funkcjonalności aplikacji. W aplikacji webowej logotyp aplikacji jest umiejscowiony w lewym górnym rogu, niezależnie od posiadania sidebara, czy nie. - Potencjalne błędy:
- Za małe logo
- Za duże logo
- Niewyróżniające się logo
- Słaba jakość / rozmyte
- Material Design
- Human Interface Guidelines
6. Dlatego tak istotne jest, by być na bieżąco z trendami, w danej grupie odbiorców produktu. Użytkownicy bowiem, spędzają wiele czasu na stronach/stronach produktowych konkurencji.
5. Zapobiegaj błędom
Należy pomagać użytkownikom nie popełniać błędów jak w poniższym przykładzie. Warto również w jasny i klarowny sposób zastosować wytłumaczenie inputów, inteligentnych podpowiedzi oraz tooltipów. Jak w życiu, lepiej zapobiegać niż leczyć.
6. Pokaż, zamiast zmuszać do pamiętania
Użytkownik, przeglądając stronę lub aplikację, nie jest w stanie zapamiętać wszystkich jej funkcjonalności, gdy jest ich dużo. Dlatego dobrym przykładem, jest podsunięcie mu "przypomnień" takich jak "ostatnio oglądane", "ostatnio odwiedzanie" lub "sortuj wg ostatnio używanych". Odnosi się to również do inputów. Poważnym błędem jest wstawianie przeznaczenia inputu w jego wnętrzu, które znika po wpisaniu czegokolwiek. Artykuł dotyczący inputów, od Nielsen Normal Grup - Link.
- Input + opis
Jest to przykład idealnego inputu, lecz nie zawsze jest on możliwy do zrealizowania ze względu na małą ilość miejsca np. na urządzeniach mobilnych.
- Ostatnie używane
7. Elastyczność i efektywność
W miejscach, gdzie użytkownik musi wykonać więcej akcji, trzeba mu tę czynność ułatwić np. poprzez toggle button do zaznaczenia wszystkiego albo checkbox do zaznaczenia pełnej kolumny. Efektywność można również podnieść, poprzez dodanie przycisku "filtruj", zamiast natychmiastowego przeładowania strony po wyborze pojedynczego atrybutu.
8. Dbaj o estetykę i umiar
Less is more. Obecnie użytkownicy nie czytają, aby przykładowo skrócić proces zakupowy, należy ograniczyć liczbę widocznych elementów na stronie. Warto skupić się tylko i wyłącznie na najistotniejszych elementach. Pozwoli to projektować czysto i czytelnie, a użytkownik nie się pogubi. W przykładzie poniżej — sekcja podzielona jest na dwie części: galeria, która zajmuje 50% (najistotniejsza dla użytkownika sekcja), a następnie konfiguracja zawierająca nazwę, cenę, kolor i rozmiar wraz z przyciskiem zamówienia. W ten sposób użytkownik nie rozprasza się dodatkowymi elementami strony. (źródło: Zalando.pl)
9. Zapewnij skuteczną obsługę błędów
Gdy wystąpi błąd, to należy wytłumaczyć użytkownikowi, z czego on wynika oraz, jaki jest jego powód. Przykładem mogą być inputy. W momencie, gdy nie posiadamy pod labelami opisu inputów, to powinno się zadbać o odpowiednie przekazanie informacji użytkownikowi co do błędu. Przykładem może być opis błędu inputu hasła. Dla bezpieczeństwa — błędy przy logowaniu, nie powinny wskazywać niepoprawnego elementu, ponieważ może to ułatwić włamanie się na dane konto.
10. Zadbaj o pomoc i dokumentację
Niezależnie od typu aplikacji, taka dokumentacja przy dużym projekcie jest wymagana. Gdy użytkownik znajdzie się w sytuacji, w której żadne podpowiedzi nie pozwolą mu wykonać akcji, skorzystać z aplikacji, to będzie szukał pomocy w supporcie, FAQ lub manualu. Z kolei, gdy nie znajdzie odpowiedzi, to może zrezygnować z korzystania z aplikacji, a w rezultacie już nie powróci do niej. Poniżej dobry przykład czytelnego supportu:
