Każdy zorientowany na użytkownika produkt cyfrowy potrzebuje dwóch warstw projektowania: User Experience oraz User Interface. Jeśli chcemy zacząć projektować na obydwu warstwach, musimy wypracować dwie różne perspektywy, a następnie kompromis pomiędzy ich priorytetami. Dużo łatwiej o ten kompromis, kiedy UX oraz UI skupione jest w jednych rękach – UX/UI Designera.
Projektowanie UX mocno opiera się na psychologii. Pomimo że nazwa stanowiska to „Designer”, potrzebne są kompetencje badawcze. Zanim ruszy projektowanie, należy przygotować grunt w postaci analizy:
Klienta
Produktu
Konkurencji – także mniej bezpośredniej
Grupy docelowej
W czasie pracy pomagają wyniki badań przeprowadzone przez UX Researchera, jednak takie samodzielne stanowisko nie funkcjonuje wszędzie i najczęściej można polegać tylko na analizach powyższych punktów oraz na swojej wiedzy.
Na podstawie zebranych wniosków, można rozpocząć projektowanie pozytywnych doświadczeń użytkownika.
Pierwsze prace odbywają się na prostych makietach. Należy skupić się na priorytetach charakterystycznych dla tego etapu. Projekt ma zawierać strukturę każdej podstrony, wyostrzać hierarchię wizualną elementów, zarządzać obciążeniem poznawczym i wskazywać ścieżki interakcji. Dużo ważniejsza od estetyki tych makiet jest ich elastyczność, a więc możliwość szybkiej edycji i mnożenia wersji do późniejszego porównywania użyteczności. Proste projekty, złożone z luźnych elementów (na przykład plansze papieru z głównym oknem i poukładanymi na tym tle oddzielnymi papierowymi elementami interfejsu, które można przesuwać), pozwalają na szybkie tworzenie wielu różnych konfiguracji.
Prędzej czy później, dla każdego UX Designera staje się jasne, że jego produkty nie mogą być idealne. Grupy nawet podobnych użytkowników mają odmienne podejścia do interfejsów. Zdarza się, że nie warto proponować nic ciekawego, ponieważ starsze rozwiązania nawigacyjne są na tyle zakorzenione w nawykach odbiorców, że wygrywają z nawet najbardziej dopracowaną innowacją. Aby rozwiać wątpliwości i zainwestować czas w najlepsze rozwiązania, przeprowadza się cykliczne testy proponowanych wersji interfejsu. Makiety low-fi są zastępowane przez ich wersje high-fi.
Interfejs musi nabrać estetyki i spójnego design systemu. Projektowanie na tym etapie odbywa się na podstawie makiety high-fi. Ostateczny projekt może nieznacznie różnić się od nich, ale musi odwzorowywać założoną konwencję użycia i rozmieszczenia elementów, hierarchię i sposób działania. Na etapie projektowania interfejsu należy opracować warstwę graficzną wszystkich komponentów w taki sposób, aby ich wygląd i sposób działania był spójny, a cały produkt naśladował konwencję ich użycia, tym samym był intuicyjny.
Kiedy jest się autorem zarówno prototypów UX-owych jak i warstwy graficznej, nie ma ryzyka nieporozumień i konfliktów. Skraca się czas docierania do ostatecznego kształtu interfejsu. Przyjmując jednocześnie perspektywę UX oraz UI, łatwiej postawić w centrum użytkownika i zrezygnować z graficznych ambicji tam, gdzie będą one zbędne lub szkodliwe dla user flow. Ponadto, wiele programów graficznych jest współdzielonych przez UX oraz UI designerów, dlatego łatwo przechodzi się do kolejnych etapów.
Pierwsze interfejsy, z którymi zawodowo styka się projektant, to programy, z których sam korzysta. Już na początku, przyswajając ich funkcje, można trafić na materiał do analiz. Napotyka się zarówno na wyzwania wynikające z budowy interfejsu, jak i kluczowe decyzje jakiegoś UX / UI designera, które sprawiają, że pewne funkcje można rozumieć niemal od pierwszego zetknięcia się z nimi.
Finalnie jednak chodzi o tę drugą stronę medalu. Uruchomienie własnych projektów. Na warsztat można wziąć interfejsy, które są dostępne publicznie. Ekrany znajomych aplikacji, screenshoty stron internetowych oraz inne przykłady interfejsów, które inspirują do zmiany.
Kiedy zbierze się potrzebne oprogramowanie i powyższy materiał, potrzeba spoiwa, które połączy te dwie wartości. Wiedzy.
Można ją zdobyć m.in. z książek (częściej o UX, niż UI), e-booków, artykułów online. Przy okazji researchu pod kątem wiedzy, projektant ponownie zetknie się z nowymi interfejsami stron internetowych, na które warto spojrzeć okiem „krytycznego użytkownika”, oprócz konsumowania treści.
Przy okazji zgłębiania wiedzy z różnych źródeł, warto rozszerzać jej zakres o dziedziny współzależne od interfejsu. Z dwóch powodów.
Proces rozwoju od fazy przygody do projektanta UI/UX powinien przebiegać równolegle na 3 płaszczyznach. Można je zebrać w poniższej tabeli z przykładami:
| Narzędzia | Inspiracje | Teoria |
|
|
|
| Materiały | ||
Pierwsze kroki w projektowaniu UI/UX szybko przyniosą pytania.
Zadaniem palety kolorów jest budowanie hierarchii elementów oraz nadawanie im statusu. Relacje pomiędzy kolorami, a także kontrasty, pozwalają sterować uwagą użytkownika. Przyciągać jego uwagę do poszczególnych elementów zgodnie z hierarchią ich ważności. Przykład statusu podkreślonego kolorem, to poszarzały button wśród kolorowych, który sugeruje opcję niedostępną; lub znane wszystkim, niebieskie podkreślenie hiperłącza.
Aby sprawnie rozpocząć pracę z kolorem przy projektowaniu UX (szczególnie będąc początkującym), warto sięgnąć po dedykowane narzędzia, dzięki którym łatwiej dobrać kolory podstawowe. Na przykład:
Następnie tworzy się pełną paletę i tu przydaje się wiedza o kolorach.
Od czytelności zależy szybkość przeglądania, przyswajania treści, a także motywacja użytkownika do interakcji. Celem jest implementacja tekstu łatwego do skanowania i nawigacji. To wymagające zadanie, ponieważ czcionki są wszędzie i w wielu miejscach nie da się ich zastąpić obrazami. Czytający musi mieć przed oczami przyjemne w odbiorze kategorie menu, banery, wskazówki, opisy, czy artykuły. Obok doboru słów, którym zajmuje się UX writer, ich graficzne przedstawienie gra kluczową rolę.
Jedną z podstawowych zasad jest konserwatywne podejście. Najwygodniejszy kontrast to czarne litery na białym tle. Krój powinien być prosty, nawet zbliżony do najpopularniejszych, najbardziej domyślnych czcionek spotykanych w internecie. W nagłówkach używa się jednej czcionki. W dłuższych blokach tekstowych można dodać jeszcze jedną, ale nie więcej. Parametry, na które zwraca się uwagę, to interlinia, odstęp pomiędzy literami i długość wiersza. Jeśli projekt dotyczy aplikacji mobilnej, używa się węższego kroju, aby zmieścić więcej tekstu w linii. Teksty lane nie powinny mieć mniejszych czcionek, niż 16pt.
Kluczem do przyjemnego odbioru interfejsu jako całości jest balans kompozycji. Balans oznacza równowagę roli. Nie powinny przeważać ani elementy interaktywne, ani przestrzeń negatywna. Obszary nie mogą konkurować ze sobą o uwagę użytkownika.
Waga wizualna elementów po obu stronach powinna być zachowana. Można osiągnąć 4 rodzaje balansu:
Interfejs to projekt bardzo elastyczny, ale przez to najeżony pułapkami. Większość z nich pojawia się z powodu przeoczenia wskazówek z dziedziny UX. Druga strona to zbyt wielka ambicja graficzna. Chęć wykazania się znajomością dziedziny, kreatywnością, podbudowana przywiązaniem do własnych pomysłów.
W projektowaniu interfejsu nie ma na to miejsca. Zasady są zdefiniowane przez ograniczenia techniczne, a oczekiwania użytkowników są precyzowane po każdym nowym teście. Spójność można zachować tylko poprzez konsekwencję i minimalizm. Komponenty produktu muszą być do siebie zbliżone stylem, kolorystyką i fontem. Proporcje pomiędzy nimi należy utrzymać na wszystkich ekranach. Użytkownik ma poruszać się w przewidywalnym dla niego środowisku. Spójność musi być zachowana także w stylu budowania przekazu. Produkt powinien mówić tym samym językiem na każdym ekranie, nawet jeśli treść pisały różne osoby.
Zdarza się, że właściciel projektu ma już inne produkty cyfrowe w portfolio. Wtedy łatwiej można przeanalizować gotowe rozwiązania z jego portfolio i dopasować nowy interfejs, aby docelowy klient czuł się tak samo wygodnie w świeżym produkcie, jak w tych dobrze poznanych.
Warto wspomnieć, że w świecie UI designerów budowane są kompleksowe źródła rozwiązań UX/UI, charakterystyczne dla danej marki — Design Systemy. Zawierają komplet zasad projektowania interfejsów idealnie zgodnych z aktualną polityką brandu. Dla przykładu swoje systemy publicznie udostępnia Apple, Google, Microsoft, IBM, czy Audi. Warto czerpać z nich inspiracje.
Przeglądanie Design Systemów pozwala odkryć wiele sposobów na budowanie dobrych interfejsów, które jednocześnie stają się kompleksowym, wciągającym oraz intuicyjnym środowiskiem pracy użytkownika.
Budowa takiego systemu z reguły nigdy się nie kończy. Sprawdzone rozwiązania są do niego dodawane, a dawne – udoskonalane. Projektowanie każdego nowego interfejsu to z jednej strony okazja do czerpania z takiego źródła, a z drugiej, do wzbogacania go.
