Nie wszystko jest ważne! O hierarchii w projektowaniu interfejsów.

Branża UX i UI na polskim gruncie przeżywa w ostatnich latach niezwykle dynamiczny rozwój. Jak zwykle bywa w takich przypadkach, jak grzyby po deszczu wyrastają nowe teorie. Byliśmy świadkami wielu rewolucji w myśleniu o projektowaniu, niemało pewnie jeszcze przed nami. Co więcej, branża UX i UI zdążyła już obrosnąć wieloma mitami, dotyczącymi samego procesu projektowania, podziału ról, a nawet zapytań o to, która z nich, UX czy UI, jest ważniejsza w ostatecznym kształcie produktu (spoiler alert: są równe).

Jednym z takich mitów jest teoria, że UI zaczyna się tam, gdzie zaczynają się ładne obrazki. Innymi słowy, rola UI Designera sprowadza się do wlania we frame’y (odpowiednio przygotowane przez UX-owca) tekstów, kształtów i fotografii. Stanowi wisienkę na wielowarstwowym, wymagającym prawdziwego kunsztu, torcie UX-owca. Ewentualnie bardziej brutalnie: UI nie wnosi niczego do funkcjonalności produktu, może robić go każdy, ewentualnie: im większe zapędy artystyczne ma biedak, tym gorzej dla niego, bo przecież wszystko już jest ustalone i zadziało się przed rozpoczęciem jego pracy.

O tym, że dobry design jest funkcjonalny i ładny, nie muszę chyba nikogo przekonywać. Sęk jednak w tym, że zdarza się nam zapominać, że w tym, co nazywamy pięknym, a więc tym co zwyczajowo należy do kompetencji UI-owca, zawiera się także sporo funkcjonalnego. Są to między innymi: odpowiednie formatowanie tekstu, praca nad kolorem, siatki i odległości, layout, praca z fotografią, głębia projektu, praca nad detalem i stojąca nad tym wszystkim hierarchia. Chciałbym poruszyć dzisiaj ostatni z wymienionych elementów, szczególnie w kontekście produktów cyfrowych, natomiast większość definicji i metod może znaleźć odniesienie w projektowaniu dla mediów tradycyjnych.

Czym jest hierarchia w designie?

Koncept wizualnej hierarchii bazuje na dwudziestowiecznej, strukturalistycznej teorii Gestalt (niem. gestalt, co znaczy: forma, wzór). Mówi ona m.in. o tym, że nasz mózg ma naturalną tendencję do odkodowywania informacji nie pojedynczo, gdyż takich jest za dużo, lecz zorganizowanych w grupy czy całe zespoły informacji. Co więcej, wiemy też, jakie aspekty wizualne mózg bierze pod uwagę w procesie poznawczym. Są to:

1. kolor: wartość, odcienie, kontrast,
2. rozmiar: większemu rozmiarowi mózg przypisuje większy priorytet poznawczy,.
3. wyrównanie: w zachodniej kulturze elementy wyrównane do lewej będą tymi, które nasz mózg zauważy jako pierwsze (w przeciwieństwie do kultur, gdzie np. teksty czyta się od prawej do lewej, jak arabska czy hebrajska); bardziej skomplikowane layouty czyta według wzorca litery F oraz Z,
4. postać: elementy regularne będą zwracały mniejszą uwagę niż fantazyjne kształty, tła jednolite będą z kolei mniej zauważalne niż patterny.

Hierarchia okazuje się być zatem elementem niezbędnym do prawidłowego odczytania informacji. Tak się składa, że jest to element stricte funkcjonalny, płynący z kontaktu użytkownika z komunikatem, a zarazem leży on w kompetencjach UI Designera.

Czemu służy hierarchia w projekcie?

Cytując Jakoba Nielsena i Dona Normana, twórców istniejącej od 1998 i zajmującej się tworzeniem interfejsów i doświadczeń użytkowników Nielsen Norman Group:

Hierarchia wizualna jest odpowiedzialna za dostarczenie doświadczenia. Jeśli masz problemy z odczytaniem komunikatu [strony www, strony z magazynu, ulotki etc. – przyp. własny],  jest to bardziej niż prawdopodobne, że brakuje mu jasnej wizualnej hierarchii. 

Dobrze uporządkowany pod względem wizualnym projekt nie tylko dobrze wygląda, ale wręcz dopiero taki umożliwia skuteczne poznanie zawartych w nim informacji. Jest jeszcze kilka argumentów, które motywują skupienie się na hierarchii wizualnej w stopniu wysokim. Mózg, jak już pisałem wyżej, działa w sposób ograniczony (co gwarantować ma jego efektywność), co oznacza, że na zainteresowanie odbiorcy masz czas liczony w milisekundach. Hierarchia jest tym, co daje mu punkt zaczepienia, a następnie prowadzi przez projekt – może zatem być budulcem tej uwagi lub jej zabójcą. Nasz mózg woli także rozpoznawać i identyfikować niż przypominać sobie. I tak, owszem, hierarchia, która jest nośnikiem relacji ustalonych na gruncie teorii Gestalt, robi robotę mózgowi.

Co składa się na hierarchię wizualną?

Teorie są tym lepsze, kiedy dają wyrażać się w praktyce. Filozofia Gestalt ma swój wyraz w wizualnej architekturze informacji. Stosowanie płynących z niej kilku zasad jest pierwszym krokiem do zbudowania prawidłowej hierarchii w projekcie. Oto one:

1. zasada podobieństwa: mózg będzie grupował elementy podobne do siebie pod kątem koloru czy kształtu (np. bullet listy, formularze z grupami checkboxów),
2. zasada kontynuacji: czytamy liniowo, więc elementy następujące po sobie w kolumnach będziemy chcieli traktować jako całość,
3. zasada domknięcia: jeśli figura lub znak są niedomknięte (przerwane koło, przycięty znak), nasz mózg nie ma problemów z „uzupełnieniem” i rozpoznaniem kształtu,
4. zasada bliskości: elementy leżące blisko siebie traktujemy jako jedną grupę informacji i będziemy szukać pomiędzy nimi powiązań semantycznych – przykładem niech będzie menu główne na stronie www: widząc je, wiesz, że będziesz poruszał się po naczelnej strukturze strony i że znajdują się tam najważniejsze elementy (np. karty produktów, należące do jednej kategorii w sklepie internetowym),
5. zasada kształtu i tła: nasz mózg będzie starał się zawsze oddzielić kształt od tła; wykorzystuje się to często w nadawaniu znaczeń przestrzeni negatywnej w projekcie (np. logo FedEx czy WWF),
6. zasada symetrii: nasz mózg szuka symetrii – przełamanie tej zasady z jednej strony daje możliwość zakomunikowania czegoś ważnego, wyróżnienia elementu, z drugiej natomiast brak wierności tej zasadzie w projekcie będzie wzbudzać niepokój u użytkownika.

Oprócz Gestalt w hierarchii ważne są: konsekwencja (nadawanie i utrzymywanie znaczeń pomiędzy powtarzalnymi elementami), kontekst (projektując dla danego medium, powinniśmy używać elementów znanych użytkownikowi, np. nawigacja typu breadcrumbs na stronach www), umiejętne zarządzanie tzw. białą przestrzenią (wprowadza spokój i rytm do projektu), typografia (czytelność fontu i stopniowanie wielkości), priorytetyzacja elementów wizualnych (pierwszego, drugiego i trzeciego rzędu).

Co decyduje o hierarchii w projekcie?

Znasz zasady, ręce palą się do kolejnego „idealnie zhierarchizowanego” projektu. Pozostaje tylko pytanie o to, co konkretnie masz zrobić i jak zrealizować te zasady? Jako UI-owiec na szczęście masz całą paletę narzędzi, dzięki którym projekt będzie wewnętrznie spójny, zorganizowany i ostatecznie skoncentrowany na potrzebie użytkownika, którą jest chęć zapoznania się z tym, co masz mu do przekazania. Do najważniejszych z nich należą: wielkość fontu (font height), grubość fontu (font weight), interlinia (line height), kolor, marginesy zewnętrzne i wewnętrzne (margins, paddings), wielkość elementu, obramowanie, styl obramowania, wypełnienie tła, przezroczystość. Hierarchia, oprócz opisanych przeze mnie wcześniej aspektów, polega na trzech głównych operacjach na elementach, które składają się na Twój projekt:

• na wzmacnianiu wizualnym najważniejszych informacji,
• na osłabianiu wizualnym mniej istotnych informacji,
• na miksie dwóch powyższych, czyli wzmacnianiu przez osłabienie.

Nie wszystko jest ważne (priorytetyzacja informacji)

Kiedy widzisz, że coś jest „ładnie zaprojektowane”, możesz przyjąć dwie strategie. Pierwsza to uznanie, że masz do czynienia z efektem pracy niezwykle utalentowanego designera. Drugą możliwością jest wzięcie projektu „na warsztat” i próba zrozumienia, w jaki sposób zostało to osiągnięte. Zdarza się, że projektant popełnia błąd już na samym początku pracy, w założeniu, że wszystko jest ważne. Zazwyczaj nie pomaga mu w tym zleceniodawca (często autor tekstów i materiałów, które masz zaprojektować), dla którego oczywistością jest, że wszystko, co napisał, jest ważne. Jako projektant musisz wiedzieć lub musisz potrafić znaleźć tę informację, czy to przez badania, czy to przez research, czy wywiad ze zleceniodawcą, co tak naprawdę jest ważne z perspektywy ostatecznego odbiorcy. Następnie wzmocnić ją wizualnie lub osłabić. Najlepiej będzie, jeśli uporządkujesz je w system zawierający informacje o kilku (zależnie od stopnia skomplikowania projektu) stopniach ważności. Umożliwi Ci to położenie akcentów na odpowiednie elementy designu, wygaszenie innych, a w ostatecznym rezultacie pozwoli efektywnie odkodować wszystkie informacje, jakie zawiera projekt.

Rozmiar to nie wszystko (wielkości fontów w projekcie)

Składając teksty w swoich projektach, nie zapominaj, że oprócz wielkości fontu masz jeszcze do dyspozycji jego grubość (font weight), możliwość zapisania tekstu wersalikami, a także w różnych odcieniach szarości. Do większości projektów wystarczą dwie grubości fontu (regular oraz bold), wersaliki oraz trzy stopnie szarości:

• ciemna do zapisywania informacji pierwszego rzędu (np. tytuł artykułu),
• szara do mniej istotnych informacji (np. data, kiedy artykuł został opublikowany),
• jasny szary do tekstów o najmniejszym priorytecie (np. copyright w stopce artykułu).
• Ważne! Wyznaczając szarości dla tekstów, pamiętaj (projektując zarówno produkt cyfrowy, jak i do druku), by spełniały one wszystkie trzy standardy czytelności.

Bądź wyrazisty (o kolorach transparentnych)

Zdarza się, że projektanci próbują uzyskać efekt osłabienia priorytetu informacji przez nadawanie elementom przezroczystości mniejszej niż 100%. Nie rób tego z co najmniej trzech powodów. Nie pomożesz w ten sposób hierarchizacji (o tym za chwilę), a tekst na tle o barwie innej niż biała straci kontrast, a więc i czytelność. Ponadto: wyobraź sobie scenariusz, w którym tekst o kolorze, nazwijmy go, transparentnym, trafia na wzorzyste tło: wzór przeziera przez tekst i wygląda nieczytelnie, nieprofesjonalnie i po prostu głupio. Co zatem należy robić? Jeśli masz do czynienia z tekstem na białym tle, obniż kontrast czerni, by osłabić priotytet elementu. Nieco bardziej skomplikowana jest kwestia tekstu na tle kolorowym – w tym przypadku szary tekst zawsze będzie wyglądał źle. Musisz pobrać i zastosować próbkę koloru z tła, na którym znajduje się tekst i dostosować jego nasycenie i jasność.

Wyróżnienie przez osłabienie (o kolorze w ogóle)

Kolor jest ważnym czynnikiem w budowaniu hierarchii. Podobnie, jak w przypadku skali szarości, warto, by każdy z użytych w projekcie przez ciebie kolorów miał co najmniej dwa priorytety: silny i słaby. Często napotkasz w pracy nad projektem sytuację, gdzie ani zmiana koloru, ani zmiana grubości fontu nie wystarczy, by element wystarczająco wyróżnić na tle innych. Bardzo dobrym wyjściem jest wówczas zajęcie się leżącymi w jego pobliżu obiektami i obniżenie ich priorytetu. Zmniejszenie kontrastu w przypadku szarości lub ustawienie odpowiedniej jasności bądź nasycenia powinno doprowadzić cię do oczekiwanego rezultatu.

Zważ, co widzisz (rola kontrastu w projektowaniu)

Czasem nie będziesz miał wpływu na wielkość elementów, które przyjdzie Ci ze sobą komponować. Najprostszym przykładem są tu zestawienia ikon z tekstem. Ikony, zwłaszcza w odmianie zwartej (pełnej), często przytłaczają tekst. Może tak się dziać za każdym razem, kiedy musisz skomponować ze sobą elementy, na które nie masz wpływu, a które różnią się pod kątem wielkości czy wagi. Rozwiązaniem w takiej sytuacji jest zabawa kontrastem. Zmniejszenie kontrastu ikon, przy jednoczesnym zachowaniu kontrastu tekstu, sprawi, że ikony będą mniej przytłaczające. W skrajnych przypadkach możesz też próbować zmniejszyć jasność koloru ikon.

Treść ponad znaczeniem (o etykietach)

Konieczność stosowania etykiet w projektach wzrosła w ostatnim czasie, zwłaszcza w kontekście produktów cyfrowych. Najczęstszym pytaniem, które projektant zadaje sobie przy projektowaniu tekstu zawierającego etykietę i jej wartość, jest: co ma większy priorytet: etykieta czy jej wartość? Postawię sprawę jasno: etykieta jest ważniejsza od wartości jedynie w przypadku, gdy jesteśmy pewni, że użytkownik będzie jej szukał w pierwszej kolejności. Przykładem może tu być karta specyfikacji technicznej produktu lub rozbudowana baza danych. Jeśli nie opisujesz technicznych aspektów smartfona czy pralki, to zawsze wartość etykiety będzie ważniejsza niż ona sama i to ją powinieneś wyróżnić. Przy okazji rozważ następujące przypadki:

czy na pewno potrzebujesz etykiety – jeśli wartości „czytają się” same (mowa o takich, jak adres e-mail, nr telefonu, miasto i kod, a nawet imię i nazwisko), najprawdopodobniej etykieta będzie zbędna,

czy nie będzie korzystniejszym połączenie etykiety z wartością w zwarty tekst – jeśli komunikaty są nieskomplikowane (np. „Liczba pokoi: 5”), warto się zastanowić, czy bardziej nie sprawdzi się zwykły napis (np. „5 pokoi”) – tekst wtedy jest bardziej przyjazny użytkownikowi oraz omija się problem pogrubienia samej liczby, co zwykle nie wygląda dobrze.

Nie wierz na słowo (akcje pierwszego, drugiego i trzeciego rzędu)

Jeśli mowa o akcjach, to oznacza, że mowa będzie o produkcie cyfrowym. Semantyka stanowi bardzo ważny aspekt projektowania. Są jednak momenty, kiedy należy z niej zrezygnować na rzecz hierarchii – i takimi są akcje, które prezentujesz użytkownikowi w związku z danym elementem. Nawiązując do Gestaltu: przedstawiając je w podobny wizualnie sposób (np. kwadraty z wyśrodkowanym napisem), utrudnisz zapoznanie się z ich znaczeniem użytkownikowi, zatem osiągniesz efekt przeciwny do zamierzonego. Rozróżnienie akcji pierwszego, drugiego i trzeciego rzędu nie tylko pozwoli ci zasugerować użytkownikowi kolejny krok, ale przede wszystkim umożliwisz mu zapoznanie się z opcjami.

Nie pomyl hierarchii (semantyka strony www)

Na koniec, pozostając przy pracy nad produktem cyfrowym, warto wspomnieć o czymś, co nie zawsze musi być oczywiste. W swojej pracy spotkasz się ze hierarchią dokumentu html, która niejednokrotnie może okazać się pomocna. W niektórych wypadkach zdarzy się jednak, że nie będzie ona miała nic wspólnego z hierarchią wizualną projektu i będziesz musiał ją zignorować. Przykładem może być projekt dashboardu, gdzie otwierający go nagłówek h1, nie ma nic wspólnego z ważnością tej informacji i musi ona przyjąć mniejszy priorytet niż właściwa jego zawartość.

Ładnie i funkcjonalnie

Hierarchia decyduje o projekcie w jego wymiarze mikro i makro, jest tym, co czyni design nie tylko ładnym, ale również funkcjonalnym. Odpowiednim posługiwaniem się narzędziami, których dostarcza oraz byciem świadomym wyzwań, jakie stwarza, i możliwości, jakie daje, możesz uczynić swój projekt lepszym i bardziej przyjaznym dla użytkownika. Pamiętaj o hierarchii!