Lista kontrolna projektowania UX

Podczas procesu projektowania niektóre wady produktu pozostaną niezauważone. Te małe (lub czasami duże) rzeczy mogą bardzo zepsuć wrażenia użytkownika podczas korzystania z oprogramowania. Przygotowaliśmy listę punktów, które należy sprawdzić przed podpisaniem projektu.

Należy pamiętać, że nie wszystkie z tych punktów dotyczą wszystkich produktów, ale generalnie są to najistotniejsze.

Projektowanie interakcji

01 – Powtarzające się czynności lub częste czynności nie wymagają wysiłku

Dlaczego to ma znaczenie: powtarzające się czynności dla tego samego wyniku (na przykład wypełnianie różnych formularzy tymi samymi informacjami) to żmudne zadanie, które nie pomaga użytkownikowi szybciej ani lepiej osiągnąć jego celów. Użytkownik prawdopodobnie będzie również próbował znaleźć sposób na obejście tego: na przykład szukając konkurentów, którzy mogą pomóc mu zrobić to szybciej/lepiej.

Jak to przetestować: Powinieneś zacząć od przeanalizowania wszystkich przepływów Twojego produktu i obserwacji zachowania użytkownika. Chcesz mieć pewność, że w przypadku powtarzających się czynności istnieje sposób na ich ułatwienie: możliwość skorzystania z wcześniej wprowadzonych informacji.

02 – Użytkownicy mogą łatwo naprawić błędy

Dlaczego to ma znaczenie: często użytkownicy wykonują niezamierzone działania lub działania, które nie prowadzą do pożądanych rezultatów — a umożliwienie im powrotu i ponownych prób oznacza, że ​​nie będą sfrustrowani i łatwo się zregenerują i będą płynąć dalej.

Jak to przetestować: Po pierwsze, upewnij się, że Twój system nawigacyjny umożliwia cofanie się, a działania można cofnąć. Następnie, przeprowadzając testy użyteczności, stwórz scenariusze, w których użytkownik najprawdopodobniej wykona niewłaściwą akcję i sprawdź, czy może łatwo odzyskać.

03 – Użytkownicy są odpowiednio wspierani zgodnie z ich poziomem wiedzy

Dlaczego to ma znaczenie: ważne jest, aby upewnić się, że początkujący użytkownicy Twojego produktu mają płynną naukę. Jednak gdy już zapoznają się z produktem, powinno to ustąpić miejsca narzędziom, które pomogą im szybciej poruszać się po przepływach. Oba scenariusze poprawiają użyteczność i retencję. Na przykład skróty dla doświadczonych użytkowników, podpowiedzi dla początkujących użytkowników itp.

Jak to przetestować: Najpierw sprawdź, czy masz narzędzia dla obu odbiorców. Następnie przeprowadź testy użyteczności z początkującymi i doświadczonymi użytkownikami, aby sprawdzić, czy te narzędzia są używane prawidłowo.

04 – Dostęp do pomocy nie utrudnia postępów użytkownika

Dlaczego to ma znaczenie: Użytkownicy proszą o pomoc, gdy utkną w określonej części Twojego produktu. Ważne jest, aby pomoc – online lub offline – była dodatkowa i umożliwiała użytkownikowi wznowienie pracy w miejscu, w którym przerwał.

Jak to przetestować: Twórz scenariusze testowe, w których użytkownicy będą prosić o pomoc i sprawdzają, czy ich przepływy pracy i postęp są przerywane.

Projekt wizualny

05 – Nie więcej niż trzy kolory podstawowe

Dlaczego to ma znaczenie: Nie jest to stała zasada – a czasami, w szczególnych przypadkach, można użyć więcej niż trzech kolorów podstawowych. Należy jednak pamiętać, że łączenie trzech kolorów jest już trudne, więc w większości przypadków należy unikać więcej.

Jak to przetestować: Upewnij się, że paleta kolorów, której użyłeś podczas projektowania produktu, zawiera nie więcej niż trzy kolory podstawowe.

06 – Sam kolor nie służy do przekazywania hierarchii, treści lub funkcjonalności

Dlaczego to ma znaczenie: Posiadanie łatwo dostępnego produktu nie jest plusem – to konieczność. Osoby z niepełnosprawnością wzroku, takie jak ślepota barw, polegają wyłącznie na kolorze, aby przekazać hierarchię, treść lub funkcjonalność. Oznacza to, że nie będą mogli korzystać z Twojego produktu i będą wykluczoną grupą demograficzną.

Jak to przetestować: colorfilter.wickline.org pozwoli Ci umieścić filtr kolorów na górze strony i przetestować go pod kątem różnych rodzajów ślepoty barw. Możesz także przechwycić ekran swojego produktu i przekonwertować go na skalę szarości w edytorze obrazów i sprawdzić, czy możesz łatwo odróżnić kolory.

07 – Hierarchia wizualna kieruje użytkownika do wymaganej akcji

Dlaczego to ma znaczenie: Użytkownicy polegają na hierarchii produktu i wskazówkach, aby wiedzieć, co robić i dokąd się udać – ważne jest, aby to zrozumieć i właściwie poprowadzić ich za pomocą tej hierarchii.

Jak to przetestować: dowiedz się, jak działają przepływy w Twoim produkcie i czy jego kluczowe działania są motywowane przez hierarchię wizualną.

08 – Przedmioty na szczycie hierarchii wizualnej są najważniejsze

Dlaczego to ma znaczenie: wizualna hierarchia pozwala użytkownikom szybko skanować informacje, nadając priorytet treści na podstawie ich bieżących potrzeb. Elementy znajdujące się na szczycie hierarchii wizualnej muszą być najważniejsze dla firmy i najbardziej odpowiednie dla użytkowników.

Jak to przetestować: Zrób zrzut ekranu swojego produktu cyfrowego, a następnie rozmyj go w promieniu około 5 pikseli za pomocą Gaussa. Patrząc na wynik, natychmiast zwizualizujesz hierarchię i zauważysz, które elementy się wyróżniają. Czy to one są najważniejsze dla firmy i użytkownika?

09 – Akcja podstawowa różni się wizualnie od akcji drugorzędnych

Dlaczego to ważne: Posiadanie odrębnych działań podstawowych i drugorzędnych oznacza, że ​​użytkownik nie będzie zdezorientowany podczas interakcji z Twoim produktem i będzie mniej podatny na błędy. Na przykład „Prześlij” i „Anuluj” muszą być wyraźnie oddzielone.

Jak to przetestować: Podczas przeprowadzania testów użyteczności zwracaj uwagę na typowe błędy, które nie wynikają z intencji użytkownika, ale ze słabo odmiennych działań podstawowych i drugorzędnych. Ponadto podczas przeglądania projektu upewnij się, że kolor, rozmiar, położenie i inne elementy różnicują działania.

10 – Elementy interaktywne nie są abstrahowane

Dlaczego to ma znaczenie: podczas korzystania z nowego produktu użytkownicy mają zestaw oczekiwań zbudowanych na podstawie wcześniejszych doświadczeń z innymi produktami cyfrowymi — na przykład, jak powinny wyglądać przyciski i jak powinny działać. Spełnienie tych oczekiwań oznacza, że ​​nie tworzysz niepotrzebnych tarć.

Jak to przetestować: Najpierw przejrzyj swój produkt, szukając obszarów, w których nie są używane typowe wzory. Na przykład linki, które nie wyglądają jak linki.

11 – Przesłanie formularza jest potwierdzane w sposób wyraźny wizualnie

Dlaczego to ma znaczenie: Istotne jest, aby dać użytkownikowi potwierdzenie, czy akcja została pomyślnie wykonana, czy nie. Przykładowo po przesłaniu formularza czytelny komunikat potwierdzający w postaci kolorowego banera będzie oznaczał, że użytkownik może przejść do kolejnego zadania.

Jak to przetestować: Sprawdź wszystkie obszary produktu, w których użytkownik wprowadza informacje. Po zakończeniu wprowadzania danych przez użytkownika wywołaj potwierdzenie dotyczące tego, czy ta akcja zakończyła się powodzeniem, czy nie. Upewnij się, że informacja zwrotna dotycząca stanu końcowego jest przejrzysta.

12 – Komunikaty alarmowe są spójne

Co to jest: Komunikaty alertów mają ten sam styl wizualny i są wyświetlane w tym samym miejscu w ten sam sposób.

Dlaczego to ma znaczenie: posiadanie spójnych komunikatów ostrzegawczych oznacza, że ​​użytkownik zawsze zrozumie, co od razu zasługuje na uwagę. Brak spójności z alertami oznaczałby dodatkowe obciążenie psychiczne za każdym razem, gdy pojawia się nowy alert.

Jak to przetestować: Upewnij się, że komunikaty alertów mają ten sam styl wizualny, a ich położenie jest podobne lub identyczne.

13 – Komunikaty ostrzegawcze są wizualnie różne

Dlaczego to ma znaczenie: upewniając się, że komunikaty ostrzegawcze są wyraźnie odróżnione od innych elementów ekranu, użytkownik może je faktycznie zauważyć i/lub na ich podstawie zastosować.

Jak to przetestować: Po samodzielnym sprawdzeniu zróżnicowania wizualnego zobacz, jak użytkownicy reagują na komunikaty ostrzegawcze w testach użyteczności.

Architektura informacji

14 – Nawigacja jest spójna

Dlaczego to ma znaczenie: Sposób, w jaki użytkownicy orientują się w Twoim produkcie, a następnie poruszają się po nim, bezpośrednio wpływa na to, czy mogą zrealizować swoje cele niezależnie od bieżącej strony.

Jak to przetestować: Sprawdź dokumentację architektury informacji i upewnij się, że nawigacja jest dostępna na każdej stronie i nie zmienia się ani nie znika. Zanim zagłębisz się w projektowanie wizualne, wypróbuj sortowanie kart lub testowanie drzewa, aby upewnić się, że ścieżki architektury informacji są tak intuicyjne, jak to tylko możliwe.

15 – Miejsce na wzrost

Dlaczego to ma znaczenie: Nie można przeprojektować systemu nawigacji i informacji produktu za każdym razem, gdy pojawiają się nowe funkcje lub treści. Menu nawigacyjne i ogólny układ muszą obsługiwać więcej kategorii/tematów bez zrywania. Projektowanie z miejscem na rozwój oznacza, że ​​główne prace projektowe i programistyczne można łatwo skalować w całym interfejsie.

Jak to przetestować: Zapytaj wszystkich interesariuszy o to, jak zawartość może się rozwijać w czasie w produkcie. Czy będziesz wspierać bardziej statyczne treści? Czy architektura będzie musiała obsługiwać filmy?

Typografia

16 – Używane są nie więcej niż dwie różne rodziny typów

Dlaczego to ma znaczenie: To nie jest stała zasada: czasami można wykonać więcej niż dwa. Ale ogólnie rzecz biorąc, dopasowanie więcej niż dwóch nie jest łatwą pracą. Ze względów użytkowych i wizualnych trzymanie się dwóch upraszcza hierarchię typograficzną, co poprawia zrozumienie.

Jak to przetestować: Upewnij się, że projekt nie miesza więcej niż dwóch rodzin typów. Pomogłoby, gdybyś upewnił się, że wybrane przez Ciebie rodziny są odpowiednio dopasowane (dowiedz się więcej tutaj).

17 – Czcionki używane do treści tekstowych mają rozmiar co najmniej 12 pikseli

Dlaczego to ma znaczenie: Znowu nie jest to stała zasada — teoretycznie można by użyć mniejszych rozmiarów do określonych celów — ale ogólnie rzecz biorąc, czytelność jest znacznie zmniejszona w przypadku rozmiarów poniżej 12 pikseli.

Jak to przetestować: Sprawdź całą zawartość i upewnij się, że czcionki użyte do nich mają co najmniej 12 pikseli.

18 – Zarezerwuj słowa pisane wielkimi literami na etykiety, nagłówki lub akronimy

Dlaczego to ma znaczenie: Wiadomo, że ograniczenie używania wielkich słów ułatwia zrozumienie — jest mniej ciężkie wizualnie i łatwiejsze do strawienia dla użytkownika. Powinna być używana szczególnie w przypadku podkreślenia lub bardzo ograniczonych przypadków – na przykład akronimów.

Jak to przetestować: Przeprowadź dokładną kontrolę treści i upewnij się, że słowa pisane wielkimi literami są ograniczone tylko do nagłówków, etykiet lub akronimów.

19 – Różne style czcionek lub rodziny służą do oddzielania treści od elementów sterujących

Dlaczego to ma znaczenie: Potrzebne są jasne wskaźniki określające, czym jest treść, a czym kontrolki – to znaczy, z czym użytkownik może wchodzić w interakcje. Tymi wskaźnikami mogą być rozmiar, kolor, położenie, czcionka itp. Czcionka jest ważna: używanie różnych stylów lub rodzin oznacza, że ​​użytkownik nie będzie się pomylić i łatwo zidentyfikuje, z czym może wejść w interakcję.

Jak to przetestować: Zidentyfikuj wszystkie elementy sterujące w swoim produkcie i upewnij się, że wyróżniają się na tle treści. Podczas przeprowadzania testów użyteczności zwróć uwagę, czy użytkownicy nie mają trudności z interakcją z kontrolkami.

20 – Rozmiar/waga czcionki rozróżnia typy treści

Dlaczego to ma znaczenie: ma duży wpływ na czytelność i zrozumienie. Dokonanie wyraźnego rozróżnienia między nagłówkami, podtytułami i akapitami zmniejsza psychiczne przeciążenie związane z trawieniem tej treści. Ma też zalety wizualne – wygląda i czuje się lepiej.

Jak to przetestować: Podczas przeglądania treści wewnątrz produktu upewnij się, że nagłówki, podtytuły i akapity używają różnych rozmiarów i grubości czcionek.

Interfejs użytkownika

21 – Bliskość i wyrównanie

Dlaczego to ma znaczenie: Użytkownik ma tendencję do grupowania – funkcjonalnie lub kontekstowo – elementów, które są blisko siebie. Dobrym tego przykładem jest pasek nawigacyjny. Podążanie za tym wzorcem i grupowanie połączonych elementów oznacza, że ​​użytkownik natychmiast rozumie Twój interfejs.

Jak to przetestować: Poszukaj elementów o podobnej funkcjonalności i sprawdź, czy (jeśli to możliwe) są zgrupowane.

22 – Wskaźnik postępu dla wieloetapowych przepływów pracy

Dlaczego to ma znaczenie: Zwłaszcza w przypadku wieloetapowych przepływów pracy, użytkownik może łatwo poczuć się przytłoczony lub zastanawiać się, ile czasu zajmie to w końcu. Wskaźnik postępu pomaga im zlokalizować się, ale co ważniejsze, tworzy poczucie spełnienia i zmniejsza częstotliwość wypadania.

Jak to przetestować: Sprawdź wszystkie przepływy wewnątrz produktu, w których istnieją różne kroki, aby coś osiągnąć, a następnie upewnij się, że postęp jest wskazywany przez wskaźnik.

23 – Elementy pierwszego planu (takie jak treść i kontrolki) można łatwo odróżnić od tła

Dlaczego to ma znaczenie: Ważne dla osób z niepełnosprawnością wzroku. Poprawia również krzywą uczenia się i rozumienie przez użytkownika. Wyraźne rozróżnienie ułatwia nawigację, zwraca większą uwagę na przyciski i ogólnie zwiększa użyteczność.

Jak to przetestować: zrzut ekranu produktu i rozmycie Gaussa tego zrzutu ekranu do promienia od około 3 do 5 pikseli. Czy patrząc na wynik możesz łatwo odróżnić, co jest na pierwszym planie, a co w tle?

Gratulujemy przejrzenia listy! To jednak nie koniec.

Twój produkt jest teraz bardziej solidny i być może poprawiłeś się w kilku obszarach – na przykład teraz jest bardziej dostępny – ale pamiętaj, aby zawsze testować, zbierać opinie użytkowników i ciągle powtarzać.