Od projektu UX do grafiki: nie zaczynaj budowy domu od dymu z komina

Odwrócony dom

Interfejs użytkownika to wszystko, co pośredniczy w relacji między użytkownikiem a narzędziem, suma wszystkich interakcji. Co jednak widać na pierwszy rzut oka? Grafikę — obrazki, ikony, kolorowe kształty i tym podobne. Być może dlatego tak łatwo pomylić projektowanie UX z projektowaniem graficznym.

Budowy domu nie zaczyna się od dymu z komina, lecz od dobrego projektu i solidnych fundamentów. Podobnie musi być w przypadku interfejsu. Jeśli pierwszym krokiem projektanta jest stworzenie pięknej grafiki, ze starannie dobranymi fontami, piękną paletą kolorów i drobiazgowo dopieszczonymi ikonami, oznacza to tyle, że ktoś próbuje dobierać kolor ścian, jeszcze przed rozmową z architektem. Można to robić, i nawet może to sprawić przyjemność, nie warto jednak jeszcze kupować farby. Zanim dojdzie do malowania,  wiele nieprzewidzianych rzeczy może się wydarzyć. Podobnie jest z projektowaniem interfejsów — warto już na początku prac rozważyć wizualną koncepcję serwisu, jednak nie warto poświęcać jej zbyt wiele czasu, jeśli nie mamy opracowanych solidnych podstaw. Bo istotą projektowania UI/UX nie jest i nie powinna być grafika. Kluczowa jest niewidzialna struktura kryjąca się pod powierzchnią.

A przecież tak wiele rzeczy trzeba uwzględnić, by zaprojektować solidny interfejs. Rzućmy okiem na 5 obszarów kluczowych dla dobrego projektu.

UX a fundamenty interfejsu użytkownika

Porządny interfejs użytkownika uda się zbudować jedynie wtedy, gdy oprzemy się na sprawdzonej wiedzy. Powinna ona dotyczyć przede wszystkim 5 kluczowych tematów: celu, użytkownika, kontekstu użycia, wzorców projektowych i reguł relacji człowiek-technologia.  Obok założeń projektowych mamy tu zatem wiedzę teoretyczną, opartą na solidnych badaniach naukowych, oraz wiedzę o użytkownikach, którą powinniśmy czerpać z kontaktów z potencjalnymi użytkownikami.

1. Cel

Pierwszą rzeczą, którą musimy ustalić, jest to, co my właściwie chcemy zaprojektować.  Do czego służyć ma projektowane narzędzie? Jakie funkcje powinno posiadać? Jakie potrzeby zaspokajać? Trzeba tu uwzględnić w równy stopniu cele twórcy (np. zarobić pieniądze, zdobyć użytkowników), jak i klientów (np. nauczyć się czegoś w przyjemny sposób, sprawdzić termin odjazdu autobusu).

2. Użytkownicy

Następnym krokiem jest ustalenie, kto będzie używał tego, co zaprojektujemy. Musimy dowiedzieć się czego szuka i czego potrzebuje ta konkretna grupa ludzi. Interfejs musi uwzględniać umiejętości, wiedzę i potrzeby swoich użytkowników. Zupełnie inaczej powinien wyglądać ekran zaprojektowany dla nastolatków, inaczej dla emerytów; inaczej zachęcimy do pracy ucznia gimnazjum, a inaczej pracownika banku. Musimy poznać naszych użytkowników i projektować specjalnie dla nich. Nieocenione są tu badania (testy z użytkownikami, wywiady pogłębione, itp.) oraz metody projektowania zorientowanego na użytkownika (persony, mapy empatii, itp.).

3. Kontekst użycia

Kolejną kwestią do rozważenia jest to, w jakich okolicznościach interfejs będzie wykorzystywany. W przypadku aplikacji kluczowe jest to, czy użytkownik będzie korzystał z niej na dużym ekranie komputera, czy na niewielkim ekraniku smartfona; czy posłuży się myszką i klawiaturą, czy raczej dotykiem; siedząc wygodnie w biurze, czy stojąc w trzęsącym się tramwaju. Projekt interfejsu musi być dostosowany do tych ograniczeń, w przeciwnym razie nie spełni swojej funkcji.

4. Wzorce i konwencje

 Gdy wiemy już kto, po co i w jakich okolicznościach, musimy wypracować dobrą strukturę i formę interakcji.  Tu powinniśmy skorzystać z rozwiązań znanych i popularnych. Użytkownicy mają swoją wiedzę i nawyki nabyte w kontakcie z technologią i łatwiej im będzie posługiwać się interfejsem podobnym do tego, co już znają. Są  wzorce interfejsów powszechnie znane i używane, takie jak na przykład metafora pulpitu, przycisk uruchamiający akcję, link przenoszący do kolejnej strony, itp. Dlatego kluczowe elementy interfejsu należy dobrać tak, by użytkownik z łatwością rozpoznał ich funkcję i świadomie z nich korzystał. Do stworzenia dobrego interfejsu niezbędna jest zatem wiedza na temat wzorców projektowych, zarówno tych fundamentalnych i niezmiennych, jak i tych będących przejściową modą.

5. Reguły współpracy człowiek-technika

Ostatnim ważnym obszarem wiedzy jest relacja pomiędzy człowiekiem a techniką. Naukowcy (i filozofowie!) od lat analizują ten skomplikowany związek, dzięki temu sporo wiemy o psychologicznych i poznawczych ograniczeniach człowieka. Pozwala to projektować interfejsy, w których użytkownik szybko dostrzeże kluczowe informacje i przyciski, zamiast błądzić wzrokiem po ekranie. Trzeba wiedzieć, kiedy wykorzystać animację, tak by ona pomogła zamiast rozpraszać; jakich kolorów użyć, by szybko przykuć uwagę; jak ułożyć tekst na ekranie, by dało się go czytać bez wysiłku.

Najpierw UX, potem grafika

Jak widać przygotowanie fundamentów interfejsu użytkownika to nie taka prosta sprawa. Dopiero posiadając wiedzę na wyżej wymienione tematy można budować: poczynając od ogólnej struktury, wytyczania ścieżek przejścia, dodawania poszczególnych funkcji i kontrolek. Tak zaprojektowany interfejs będzie użyteczny, funkcjonalny i dopasowany do potrzeb użytkownika. I to jest robota dla projektanta UX, który rozważy wszystkie powyższe kwestie i jeszcze wiele, wiele innych, a następnie opracuje projekt i  przedstawi go  w formie makiet funkcjonalnych lub interaktywnych prototypów. I dopiero wtedy, gdy to wszystko mamy już gotowe, potrzebna jest pomoc grafika.

Zadaniem grafika jest ubrać projekt w atrakcyjną formę. I jest to zadanie niezmiernie ważne — wygląd decyduje o pierwszym wrażeniu użytkowników, sprawia, że kontakt z narzędziem staje się przyjemnym przeżyciem. Zanim jednak grafik doda swoją magię, trzeba wykonać solidną pracę u podstaw, budując fundamenty interfejsu. Dlatego też do projektowania interfejsu należy zatrudnić najpierw UX-a, a potem grafika. Nigdy odwrotnie.  Rozpoczynanie budowy domu od dymu z komina sprawdza się tylko w poezji.

Podziel się tym artykułem:

Czasem strateg UX, po trochu badacz, architekt informacji i projektant. Czasem filozof i wykładowca akademicki, zafascynowany mediami, kulturą i człowiekiem. Ceni myślenie nieszablonowe i sztukę komunikacji.