UX i UI: gdy grafika ma być używalna

Gdy projektant grafiki medialnej projektuje do ekranu — stronę internetową, aplikację, biuletyn — estetyka to tylko połowa zadania. Drugą połowę to to, czy użytkownik potrafi się orientować, rozumie, co się dzieje, i osiąga swój cel bez frustracji. To pole nazywa się UX (user experience, doświadczenie użytkownika), podczas gdy UI (user interface, interfejs użytkownika) to konkretny wizualny projekt przycisków, menu, pól i zawartości.

UI to to, co widzisz: kolory, typografia, ikony, odstępy i wygląd komponentów. UX to to, co doświadczasz: czy łatwo jest znaleźć produkt, zrozumieć cenę, dokonać zakupu? Projekt może mieć piękny UI i straszny UX — piękne przyciski, których nikt nie potrafi znaleźć. Jako projektant mediów przyczyniasz się głównie do UI, ale Twoje wybory hierarchii, kontrastu i czytelności są jednocześnie bezpośrednią pracą nad UX.

Najczęściej używaną listą kontrolną dla użyteczności są dziesięć heurystyk użyteczności, które Jakob Nielsen opublikował w ich znanej formie w 1994 r. Nie są to wymogi prawne, ale szerokie zasady, które można stosować do każdego projektu cyfrowego, aby znaleźć miejsca, gdzie użytkownicy mogą się zgubić lub być zaskoczeni.

• 01Widoczność statusu systemu: zawsze pokazuj, co się dzieje — np. że coś się ładuje lub jest zapisane.
• 02Zgadzaj się z rzeczywistością: używaj słów i pojęć, które zna użytkownik, nie wewnętrznego żargonu.
• 03Kontrola użytkownika i wolność: ułatw cofnięcie się i powrót.
• 04Konsystencja i standardy: identyczne elementy powinny wyglądać identycznie i zachowywać się identycznie.
• 05Zapobiegaj błędom: dobre wybory domyślne i jasne ostrzeżenia są lepsze niż komunikaty o błędach.
• 06Rozpoznawanie zamiast przypominania: pokaż opcje — nie zmuszaj użytkownika do ich zapamiętywania.

Taka sama zawartość musi działać na dużym ekranie, tablecie i małym telefonie. Design responsywny oznacza, że układ dostosowuje się do szerokości ekranu: kolumny się stoją, obrazy się skalują, i menu zmienia formę. Dla grafika oznacza to, że nie projektujesz jedną stałą stronę, ale system komponentów, które mogą się przepływać — i że myślisz o telefonie od początku zamiast zmniejszać design desktopowy na końcu.

Zanim zaprojektuje się poszczególne strony, całość musi być spójna: jakie strony istnieją, jak połączają się w menu i linki, i jaką ścieżkę użytkownik zwykle podąża od pierwszej wizyty do celu? Nosi to nazwę architektury informacji. Prosta mapa podróży użytkownika – krok po kroku od potrzeby do działania – często ujawnia luki i ślepe zaułki, na długo przed narysowaniem jednego piksela.

Cyfrowe kursy projektowania zwykle działają w dwóch warstwach. Wireframe to szkic struktury i zawartości bez gotowej grafiki – co powinna zawierać strona i w jakiej kolejności? Prototyp to klikalne modelowanie projektu, gdzie możesz przetestować przepływ, zanim cokolwiek będzie zaprogramowane. Oba oszczędzają drogie objazdów: znacznie taniej jest przesunąć pudełko w szkicu niż przebudować gotową stronę.

Większe rozwiązania cyfrowe buduje się na systemie projektowania: bibliotece stałych komponentów (przyciski, karty, formularze) z określonymi kolorami, typografią i spacjami. Zapewnia to spójność na wielu stronach i konkretyzuje współpracę z programistami - mówimy o tych samych nazwanym elementach składowych. Rolą projektanta grafiki medialnej jest często utrzymanie wizualnej spójności systemu i zgodność z tożsamością marki.

Pamiętaj także o dostępności: wymagania kontrastu, czytelna typografia i wiadomości, które nie opierają się tylko na kolorze, mają znacznie większe znaczenie na ekranie niż w druku, ponieważ użytkownicy i ich urządzenia są tak różne. Dobry UX to ostatecznie projekt, który działa dla jak największej liczby osób.

“Użytkownik nie przychodzi, aby zobaczyć twój projekt — użytkownik przychodzi, aby rozwiązać zadanie. Twój projekt jest oceniany na tym, jak łatwo to poszło.”

— Podstawowa zasada w doświadczeniu użytkownika