Projektowanie interfejsów — co to jest? Popularne typy interfejsów

W projektowaniu interfejsu aplikacji lub strony internetowej ważne jest ciągłe pamiętanie, że to interfejs nie autora czy właściciela produktu, tylko użytkownika.

Tworzenie jest nie tyle procesem kreatywnym, ile dążeniem do spełniania oczekiwań statystycznego przedstawiciela grupy docelowej. Dobrze zaprojektowany interfejs działa jak cyfrowa forma rozwijania dywanu przed użytkownikiem, znając każdy jego możliwy krok i wskazując kierunek do celu.

Standardowo stosowanym typem, szczególnie w produktach kierowanych do szerokiej publiki, jest obecnie interfejs graficzny – GUI. W przeszłości częściej występowały interfejsy dopasowane do ograniczeń technologicznych sprzętu – takich jak niewielkie zasoby i uproszczone ekrany:

• CLI – Command Line Interface – wymaga znajomości komend, którymi wydaje się polecenia.
• VUI — Voice User Interface.

Obecnie interfejsy tekstowe nadal spotyka się w panelach administracyjnych sprzętu i oprogramowania. Działają szybciej od GUI, są mniej podatne na awarie, a trudność obsługi zniechęca do ingerencji w głębsze warstwy produktu bez profesjonalnego wsparcia technicznego.

Pomimo że GUI rozpowszechnił się najbardziej, rozwijane są także interfejsy zorientowane na obsługę głosową (VUI), czy gestami, za pomocą sprzętu wyposażonego w sensory.

Co to jest graficzny interfejs użytkownika?

UI w aplikacji lub na stronie internetowej, to zamknięta w sekwencjach ekranów lub podstron kompozycja statycznych oraz klikalnych elementów graficznych, które służą do interakcji użytkownika z produktem cyfrowym. Interfejs tworzy przestrzeń, w której użytkownik realizuje swoje cele za pomocą określonych działań. Czy to będzie wyszukiwanie, zakup, zostawienie komentarza czy odnalezienie informacji.

Przy aktualnym tempie rozwoju produktów cyfrowych, użytkownicy mają bardzo wiele alternatyw, często dostępnych za darmo. Dlatego walka z konkurencją w dużym stopniu toczy się w obszarze UI. Wygrywa ten, kto zaprojektuje interfejs bardziej użyteczny i funkcjonalny od innych.

Jak zaprojektować interfejs strony internetowej lub aplikacji mobilnej?

Dobry interfejs musi łączyć w sobie szereg cech. Użyteczność i funkcjonalność to tylko pierwsze z nich. Wymienia się je najczęściej, ponieważ dają największe pole do optymalizacji i eksperymentów. Kolejne cechy ważne dla dobrego interfejsu strony www, to:

• Wydajność i niezawodność. Niewiele jest rzeczy bardziej irytujących jakiegokolwiek użytkownika, niż bezsilność w obliczu niekończącego się wczytywania i serii wyskakujących w modelach błędów.
• Intuicyjność. Należy zakładać, że statystyczny użytkownik będzie za swoje błędy obwiniał interfejs. Im wcześniejsze zetknięcie z produktem, tym większe ryzyko. Dlatego warto robić wszystko, żeby interakcja przebiegała zgodnie z nawykami użytkownika wypracowanymi w interfejsach, których już używa.
• Estetyka. Powinna wyrażać szacunek do użytkownika oraz intencję budowania dobrego nastroju. Pierwsze wrażenie w zetknięciu ze stroną lub aplikacją powinno zapraszać do przejścia dalej.
• Praktyczność i podręczność. Skupienie na tych cechach pozwala wyeliminować dystraktory i skracać procesy prowadzące użytkownika do celu. Kiedy ktoś potrzebuje skorzystać z witryny czy aplikacji, jego pierwsze skojarzenia powinny dotyczyć sprawności jej użytkowania. Jeśli użytkownik kojarzy produkt z długimi czasami ładowania, wytężaniem koncentracji, poświęcaniem czasu na przyswajanie funkcji i wielokrotnym przeklikiwaniem się do miejsca, w którym w ogóle będzie mógł zacząć drogę do celu, prędzej czy później zrezygnuje z produktu.

Do ostatecznego projektu dobrego interfejsu UI designer dociera dwiema równoległymi drogami.

Pierwsza to badania UX, które na wielu etapach projektowania dostarczają, pogłębiają i aktualizują wiedzę o konkretnej grupie użytkowników. Dobiera się je w zależności od fazy projektu, specyfiki grupy docelowej i charakterystyki produktu. Mogą to być m.in. testy z użytkownikami, grupy fokusowe, testy A/B, czy wywiady pogłębione.

Druga to korzystanie z uniwersalnych dobrych praktyk wypracowanych przez branżę:

Zasada 1: spójność pod kątem graficznym. To zasługa kilku elementów:

• Ściśle ustalona paleta kolorów. 2 główne +3 pomocnicze, stosowane na podstawie numeru.
• Przestrzeń negatywna. Czyli wszystko, co nie jest treścią. Służy do zachowania balansu i zapobiegania przytłoczeniu użytkownika.
• Stały kształt elementów i grubość obramowań. Aby uzyskać efekt konsekwencji i harmonijnej przynaleźności elementów do jednego interfejsu.
• Korekta ze względu na iluzje optyczne. Takie, jak wizualna różnica w odbiorze odstępu koła od kwadratu niż dwóch kwadratów.

Zasada 2: czytelne grupowanie. Podział na sekcje pomaga w nawigacji i redukuje szanse zakłopotania użytkownika. Tego podziału dokonuje się poprzez konsekwentne ustalanie odległości pomiędzy elementami. Jeśli ilość miejsca jest ograniczona i różnice w odstępach między elementami sekcji a drugą sekcją są zbyt małe, wprowadza się elementy separacyjne, czy linie oddzielające.
Zasada 3: wspólny układ ekranów i podstron. Aby użytkownik nie pogubił się w interfejsie, musi mieć wrażenie, że kolejne etapy procesu mają wspólny mianownik. W jego zbudowaniu pomaga stosowanie gridów, które dzielą przestrzeń każdego ekranu/podstrony na kolumny w identyczny sposób. Wtedy, nawet jeśli któryś etap procesu zawiera nietypowe elementy, jak szersze pole formularza tekstowego, przydzielenie mu dwóch kolumn nie zaburza efektu spójności.
Zasada 4: tworzenie kontekstu dla treści. Interfejs musi tworzyć symbiozę z treścią, którą dostarcza. Język opisów, sens cel i logika procesu muszą być wspierane przez elementy, na których się znajdują oraz przestrzeń, która je otacza.

Podsumowanie

Projektowanie interfejsu aplikacji lub strony internetowej to złożony proces. Wymaga doświadczenia, znajomości zasad, intuicji i stałego dostępu do rzetelnych informacji o grupie docelowej. Zadaniem projektanta UI jest sprawnie adaptować rozwiązania uniwersalne do wymagań konkretnej persony. Efekt końcowy to połączenie celów użytkownika z biznesowymi założeniami właściciela produktu.