5 min
16 czerwca 2023
Czym jest UI (User Interface)?
UI - jeśli odnieść się do najprostszej definicji - oznacza interfejs użytkownika. UI to termin stosowany w dziedzinie projektowania i informatyki, jest częścią urządzenia lub oprogramowania odpowiedzialną za interakcję między użytkownikiem a systemem. Celem UI jest zapewnienie użytkownikowi intuicyjnego, łatwego w obsłudze i efektywnego sposobu wejścia w interakcję z systemem lub oprogramowaniem.
Pisząc o UI najczęściej mamy na myśli Graficzny Interfejs (GUI - Graphical User Interface). Nie jest on jednak jedynym sposobem interakcji człowieka z maszyną. Istnieją interfejsy oparte na tekście (TUI), wierszach poleceń (CLI), pozwalające wejść w interakcję za pomocą głosu (VUI) i inne.
Posłuchaj artykułu w wersji audio.
Jak powinien wyglądać poprawnie zaprojektowany Graphical User Interface (GUI)?
Projekt GUI powinien być dobrze przemyślany i dostosowany do potrzeb grupy docelowej oraz kontekstu, w którym będzie używany. Z punktu widzenia użytkownika UI powinien być:
intuicyjny w obsłudze
spójny
dostępny
pomocny
estetyczny i atrakcyjny wizualnie
responsywny
efektywny
Z czego składa się Interfejs graficzny?
UI mogą znacznie się różnić w zależności od rodzaju produktu cyfrowego, celów, jakim mają służyć oraz funkcjonalności. Mogą się różnić ze względu na samych użytkowników. Na przykład ostateczny wygląd aplikacji dla seniorów, osób słabowidzących będzie inaczej projektowany niż dla osób nieposiadających różnego rodzaju ograniczeń.
GUI wykorzystuje elementy strukturalne, które razem definiują wygląd interfejsu.
Elementy składowe GUI można przyporządkować do 4 grup:
Input controls - kontrolki wprowadzania danych - należą do niej pola wprowadzania danych, dropdown’y (listy rozwijane), checkbox’y (pola wyboru), przyciski, przełączniki.
Navigational components - komponenty nawigacji - breadcrumbs’y, ikony, paginacja, menu, pole wyszukiwania, slajdery, tagi, taby.
Informational components - komponenty informacyjne - okna powiadomień, pop-up’u, progress bar, tool tip’u.
Containers - Kontenery (pojemniki) - akordeony.
Zasady projektowania UI
Mówi się, że dobrze zaprojektowany GUI jest “niewidoczny”. Użytkownik nie zwraca uwagi na to, czy w element jest umieszczony w odpowiednim miejscu. Jeżeli ten element jest integralny, postrzegany jako pomocny - spełnia swoją funkcję.
Aby zaprojektować “niewidoczny” interfejs ui designer posługuje się wieloma zasadami.
Oto kilka zasad wg Lucy Lockwood i Larry Constantine, stosowanie których czyni projektowanie o wiele bardziej efektywne.
W swoim podejściu do projektowania skupiają uwagę na user experience.
Zasada struktury
Zasada prostoty
Zasada widoczności
Zasada informacji zwrotnej
Zasada tolerancji
Zasada ponownego wykorzystania
Zasada struktury
Zasada struktury dotyczy architektury oraz sposobu organizacji elementów.
W ramach tej zasady, interfejs powinien być starannie zaplanowany i zorganizowany, aby umożliwić użytkownikom łatwe zrozumienie i nawigację.
Główne aspekty tej zasady to:
Hierarchia informacji - elementy powinny być zorganizowane hierarchicznie, w taki sposób, aby istniała jasna relacja między nimi.
Grupowanie i kategoryzacja - powiązane ze sobą elementy powinny być grupowane, wyraźnie odseparowane od pozostałych elementów.
Nawigacja - struktura powinna obejmować przejrzysty system nawigacyjny.
Konsystencja - interfejs użytkownika powinien być spójny w całym projekcie, zarówno pod względem stylu, jak i funkcjonalności.
Przejrzystość - struktura powinna być przejrzysta i łatwa do zrozumienia. Użytkownicy powinni być w stanie szybko zlokalizować potrzebne informacje i funkcje, bez zbędnego wysiłku czy zamieszania.
Zasada prostoty
Ta zasada mówi sama za siebie - interfejs musi być prosty, powinien ułatwiać wykonywanie prostych, typowych zadań, sprzyjać komunikacji między użytkownikiem a aplikacją w jego języku - za pomocą jasnych, prostych słów. Elementy interfejsu powinny być jednoznaczne i nie budzić wątpliwości. Przyciski i etykiety (elementy graficzne) powinny być klarowne i precyzyjne, aby użytkownicy wiedzieli, co się stanie po ich kliknięciu.
Zasada widoczności
Ta zasada zapewnia, że informacje i funkcje są łatwo widoczne dla użytkownika w odpowiednim czasie i kontekście. Jej celem jest eliminowanie niejasności, dezorientacji i trudności w zlokalizowaniu potrzebnych informacji i funkcji.
Zasada informacji zwrotnej
Istotne jest dostarczanie użytkownikowi za pomocą jasnych i konkretnych komunikatów odpowiedniej informacji na temat efektów jego działań.
Jest to ważna zasada projektowania, która ma na celu informowanie użytkownika o rezultatach, stanach, błędach lub innych zdarzeniach związanych z interakcją z interfejsem.
Zasada tolerancji
Celem tej zasady jest minimalizacja konsekwencji błędnych działań użytkownika poprzez zapewnienie elastyczności i wyrozumiałości w interakcji z elementami aplikacji. Projektowanie interfejsu powinno uwzględniać potencjalne błędy, jakie użytkownicy mogą popełnić, i zapobiegać im lub minimalizować ich wpływ na działanie systemu. Na przykład, jeśli użytkownik nie wypełnił wszystkich wymaganych pól formularza, interfejs może dostarczyć ostrzeżenie lub wskazać brakujące pola. Interfejs powinien dostarczać użytkownikom pomocnicze wskazówki i informacje kontekstowe, które pomogą im w zrozumieniu, jak korzystać z różnych funkcji i jak uniknąć błędów.
Zasada ponownego wykorzystania
Interfejs powinien umożliwiać wielokrotne wykorzystanie i ponowne użycie elementów w różnych kontekstach. Celem tej zasady jest zwiększenie efektywności projektowania oraz konsystencji i spójności w całym interfejsie, zmniejszając w ten sposób potrzebę ponownego przemyślenia i zapamiętywania informacji przez użytkowników.
Podsumowując - interfejsy projektowane są na podstawie licznych zasad.
Te zasady stanowią wytyczne i najlepsze praktyki, których celem jest tworzenie intuicyjnych, skutecznych i przyjaznych dla użytkownika interfejsów.
Dobrze zaprojektowany interfejs nie rozprasza, pozwala użytkownikom skupić się na wykonywanej czynności, przyczynia do pozytywnego doświadczenia użytkownika i skutecznej interakcji.