Czym jest UI (User Interface)?

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:

1. Input controls - kontrolki wprowadzania danych - należą do niej pola wprowadzania danych, dropdown’y (listy rozwijane), checkbox’y (pola wyboru), przyciski, przełączniki.

2. Navigational components - komponenty nawigacji - breadcrumbs’y, ikony, paginacja,  menu, pole wyszukiwania, slajdery, tagi, taby. 

3. Informational components - komponenty informacyjne - okna powiadomień, pop-up’u, progress bar, tool tip’u.

4. 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. 

1. Zasada struktury

2. Zasada prostoty

3. Zasada widoczności

4. Zasada informacji zwrotnej

5. Zasada tolerancji

6. 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.