Zasady projektowania — wprowadzenie do hierarchii wizualnej

Wraz ze zmianami technologii i interfejsów użytkownika rośnie zapotrzebowanie na umiejętności projektowe w zakresie projektowania wizualnego. Czy wraz ze świeżymi przykładami typowego interfejsu użytkownika pojawiającymi się co roku zmieniło się nasze podstawowe zrozumienie hierarchii wizualnej, percepcji i kompozycji?

Współczesna koncepcja percepcji wzrokowej jest zakorzeniona nie tylko w nauce, ale także w psychologii. W konsekwencji, niezależnie od nieustannie zmieniających się interfejsów użytkownika, sposób, w jaki widzimy i odbieramy informacje wizualne, pozostanie taki sam. Biorąc to pod uwagę, czy współczesne projektowanie interakcji może ulepszyć podstawy kompozycji graficznej i hierarchii wizualnej?

Podstawowe zasady percepcji wizualnej mają kluczowe znaczenie dla każdego projektu wizualnego, ponieważ instruują, w jaki sposób informacje z osadzonym znaczeniem mogą być przekazywane tak szybko, jak to możliwe. Ponieważ jednak projektowanie wizualne jest bliskim kuzynem projektowania graficznego, standardy te zostały ustanowione dla mediów drukowanych i nie zostały jeszcze przedefiniowane w przypadku technologii cyfrowej.

Coś w rodzaju „cyfrowej szkoły Bauhausu”, która mogłaby potencjalnie ustanowić nowe zasady projektowania, jeszcze się nie uformowało. Ponieważ ludzie doświadczają interfejsu użytkownika w zupełnie inny sposób niż druk, zasady hierarchii wizualnej i kompozycji są nie tylko przestarzałe, ale po prostu zwijają się w interfejsie użytkownika.

W większości projektanci nadal mają tendencję do traktowania ekranu jako statycznego, dwuwymiarowego obiektu, a wyzwaniem dla interaktywnych projektantów jest wprowadzanie innowacji wykraczających poza zwykłe stosowanie formatów druku w swoich projektach związanych z mediami cyfrowymi. Ale zanim nowe projekty będą mogły się rozwijać, konieczne jest ponowne przyjrzenie się podstawowej hierarchii wizualnej, percepcji i kompozycji.

Hierarchia wizualna: nowe zrozumienie kompozycji wizualnej dla interfejsów interaktywnych

Czym jest hierarchia wizualna i dlaczego jest ważna? Hierarchia wizualna to układanie treści w kompozycji w celu skutecznego przekazywania informacji i przekazywania znaczenia. Hierarchia wizualna kieruje widzów najpierw do najważniejszych informacji, a następnie do treści drugorzędnych.

Ustanowione poprzez odpowiednie użycie rozmiaru, koloru, kształtu, odległości, proporcji i orientacji, znaczenie, koncepcja i nastrój kompozycji są przekazywane poprzez kreatywne użycie elementów graficznych, które określają wizualną hierarchię.

Hierarchia wizualna ma kluczowe znaczenie dla każdego rodzaju projektu wizualnego, niezależnie od tego, czy jest to strona docelowa, która musi kierować wzrokiem odwiedzającego, czy nawigacja w mobilnym interfejsie użytkownika. Zrozumienie przez użytkownika każdego elementu jest oparte na innych elementach kompozycji i ich kontekście. Elementy kompozycyjne są odpowiednio traktowane w celu stworzenia relacji wizualnych, a tym samym ustanowienia wizualnej hierarchii w całym projekcie.

Kolor w hierarchii wizualnej

Wiele zasad hierarchii wizualnej może wydawać się dość prostych, a nawet banalnych, ale stanowią one krytyczny fundament dobrego projektu wizualnego. Na przykład kolor jest najbardziej wpływowym elementem twórczym w projektowaniu wizualnym.

Rozważ bezpośrednie skojarzenia czerwonego krzyża z krzyżem monochromatycznym. Niemal powszechnie czerwony krzyż oznacza neutralność i ochronę. Taki jest potencjał do natychmiastowej komunikacji za pomocą koloru. Kolor jest również często używany do identyfikacji grup, na przykład, gdy jeden czerwony krzyż spośród trzech monochromatycznych w jakiś sposób wyróżnia się jako bardziej znaczący.

Jasne, bogate kolory wyróżniają się bardziej niż wyciszone, dzięki czemu mają większy efekt wizualny. W interfejsie kolor może być użyty do przedstawienia poczucia struktury i wskazania dostępnych interakcji. Pojedynczy kolor w obrębie monochromatycznego interfejsu może wyróżnić wybór, a nawet zasugerować, co znajduje się poza przyciskiem, nad którym najeżdża użytkownik.

Kolor jest również zaszczepiony znaczeniem i emocjami, które mogą przekazywać wyraźne informacje do podświadomości widza. W brandingu przeprowadzono wiele badań psychologicznych nad kolorem, ponieważ wywołuje on instynktowną reakcję u konsumentów, zanim wejdą w jakąkolwiek znaczącą interakcję z marką. Na przykład błękity są często postrzegane jako niezawodne, bezpieczne i uspokajające, podczas gdy czerwienie stymulują i zwiększają częstość akcji serca. Jednak kolory mogą mieć różne znaczenie w zależności od kultury.

Dobrym przykładem znaczącego, strukturalnego wykorzystania koloru w projektowaniu stron internetowych jest witryna Names for Change. Strona natychmiast komunikuje swoją strukturę za pomocą koloru; organizacja jest domyślnie rozproszona, ale można ją uporządkować według tematu i/lub koloru.

Jednak wybrane tony pomagają przezwyciężyć jedną z potencjalnych trudności dla znaczenia strony. Zbieranie funduszy na przedmioty codziennego użytku, takie jak skarpetki lub tampony, nie jest wystarczająco ekscytujące, aby się sprzedać, więc radykalny ton graficzny witryny podnosi wartość percepcyjną przedmiotów codziennego użytku, jednocześnie ustanawiając niezbędną podstawową strukturę organizacyjną.

Rozmiar w hierarchii wizualnej

Wyobraźmy sobie ilustrację przedstawiającą jednego dużego ptaka siedzącego obok trzech mniejszych. Ta prosta grafika, bez żadnych dalszych informacji, natychmiast komunikuje relację między jej elementami: rodzicem i dziećmi, które wspólnie komunikują rodzinę.

W tradycyjnym projektowaniu graficznym typową strategią jest uczynienie najważniejszych elementów największymi, a następnie hierarchiczne zmniejszenie elementów. Rozmiar ustanawia hierarchię wizualną, ponieważ największe elementy najpierw przykuwają uwagę i dlatego wydają się najważniejsze.

W treści tekstu często stosuje się różne rozmiary czcionek, aby wskazać znaczące różnice, takie jak nagłówki, sekcje i cytaty. Treści drugorzędne, takie jak podpisy obrazów, są zwykle mniejsze, aby nie konkurować z głównym tekstem.

Rozważ niektóre z najczęściej używanych interfejsów wizualnych, takich jak Instagram. Nic na ekranie nie konkuruje z obrazami i filmami — zajmują one ponad 60 procent większości ekranów. Cel interfejsu użytkownika jest natychmiastowy.

Przykładem podważającym typową strukturę hierarchii wizualnej w projektowaniu stron internetowych jest strona portfolio studia artystycznego Ro/Lu. Ich niezwykła strona może nie jest najbardziej intuicyjna, ale podważa wizualną aranżację typowego portfolio kreatywnego online. Ze względu na celową losowość ich różnorodnych projektów, za każdym razem, gdy odwiedzający odwiedza witrynę, dominuje inny, co sprawia, że ​​każda wizyta jest wyjątkowa i interesująca.

Praca nie jest zorganizowana hierarchicznie w portfolio większości kreatywnych studiów projektowych, ponieważ każdy projekt jest wyjątkowy i uważany za równie ważny. Projekt strony Ro/Lu tworzy dynamiczną kompozycję o różnym poziomie zainteresowania przy każdej wizycie i zachęca widzów do zapoznania się z obszernym portfolio studia. W konsekwencji eklektyczny, interdyscyplinarny charakter studia projektowego jest reprezentowany przez losowe wyświetlanie treści.

Dopasowanie w hierarchii wizualnej

Wyrównanie w wizualnej hierarchii komunikuje poczucie porządku poprzez łączenie elementów przestrzennie. Podobnie jak w przypadku rozdziałów w powieści nieliniowej, wyobraź sobie kwadrat wystający poza linię w kompozycji graficznej. Gdy pojedynczy element przełamuje założoną strukturę, wyróżnia się z kompozycji i tym samym nabiera znaczenia w stosunku do reszty.

Sztywna kompozycja może wydawać się zastała i nieciekawa wizualnie, chyba że element wybija się z siatki wizualnej, czyli z poczucia ładu. Niewspółosiowość lub „przełamanie siatki” jest okazją do nadania elementowi graficznemu większej wagi wizualnej. Ta koncepcja ma fundamentalne znaczenie dla wizualnej hierarchii w projektowaniu.

Zgodnie z zasadą tradycyjnego projektowania wizualnego, elementy umieszczone w centrum kadru wydają się mieć większe znaczenie. Na przykład główna treść lub elementy interfejsu mogą być umieszczone w centrum, podczas gdy nawigacja, menu i inne drugorzędne treści są często trzymane po bokach.

Ale pionierscy projektanci lubią kwestionować status quo. Kiedy interaktywny projekt stosuje podstawowe zasady hierarchii wizualnej, a następnie przesuwa granice w innowacyjne kompozycje wizualne, powstają ciekawe nowe doświadczenia. Używając innego wyrównania, powstają nowe skojarzenia i znaczenia między elementami.

Na przykład projekt DNA to witryna, która wykorzystuje szereg niespójnych hierarchii, aby komunikować twórczą konstrukcję albumu muzyka. Struktura strony jest złożona, podobnie jak budowa albumu.

Najpierw goście są zapraszani do słuchania muzyki, przeklikając utwory z albumu, które tradycyjnie są ułożone w formacie albumu. Jednak umożliwiając odwiedzającym ponowne wyrównanie elementów DNA witryny, koncepcja albumu jest przekazywana nie tylko jako seria utworów, ale jako nieliniowa konstrukcja fragmentarycznych elementów w czasie.

Kształty w hierarchii wizualnej

Jeśli chodzi o kształty, zastanówmy się, jak natychmiast prosty kształt serca komunikuje swoje potencjalne zastosowanie do „polubienia” w większości interfejsów społecznościowych. Aby ustalić znaczenie lub grupy, rozważ jedno serce z czterech kręgów. Formy geometryczne są jak kolory, w których kształty niosą ze sobą pewne konotacje, które nadają elementom osobowość lub znaczenie.

W projektowaniu interaktywnym kształty geometryczne są niezbędne do efektywnej komunikacji, ponieważ przekazują znaczenie szybciej i bardziej uniwersalnie niż tekst. Zamiast tekstu ikony (symbole), które często mają proste kształty geometryczne, stały się odpowiednikiem większości systemów nawigacyjnych i interfejsów użytkownika.

Cel „polubienia” obrazu, pobrania pliku, wykonania połączenia telefonicznego lub sprawdzenia wiadomości jest przekazywany w prosty i bezpośredni sposób za pomocą ikon (kształtów geometrycznych). Ta forma efektywnej komunikacji wizualnej staje się coraz ważniejsza na globalnym rynku, na którym produkty cyfrowe często obsługują ogromną międzynarodową publiczność posługującą się wieloma językami.

Aby podkreślić różne tryby interakcji między tradycyjnym drukiem a mediami cyfrowymi, rozważ różnicę między przeszukiwaniem rzeczywistej gazety w sekcji Sztuka a używaniem ikony wyszukiwania w większości aplikacji. Do niedawna większość gazetowych stron internetowych układała swoje strony tak, jak gdyby były drukowane, a doświadczenie przeglądania treści było niezdarne i dezorientujące.

Przełamując tradycyjne układy stron internetowych, witryna Signes du Quotidien wykorzystuje podstawowe kształty kwadratów i kół w subtelny sposób, aby przedstawić unikalną hierarchię wizualną, która prowadzi odwiedzających przez zawartość. Menu znajduje się na środku strony, a gdy odwiedzający je klikną, pojawiają się cztery kolorowe kropki reprezentujące cztery sekcje witryny. Odwiedzający następnie przeciągają jedną z kropek na kwadrat, aby przejść do tej sekcji.

Ruch w hierarchii wizualnej

Ruchomy element będzie miał większą wagę wizualną w grupie stagnujących elementów, a ruch w hierarchii wizualnej jest zasadą, której nie można zastosować w druku, ale z pewnością można ją włączyć do zestawu narzędzi projektanta wizualnego.

Co może komunikować ruch poza dosłownym tłumaczeniem samego siebie? Ruch jest często używany w interfejsie użytkownika jako wskazówka, z którą element można wchodzić w interakcje. Czy użycie ruchu może zostać posunięte dalej i wykorzystane jako sposób na przekazanie czegoś wyjątkowego? Jeśli hierarchia wizualna dotyczy nie tylko skuteczności komunikacji, ale także osadzonego znaczenia, w jaki sposób ruch może być używany jako podstawowe narzędzie komunikacji wizualnej?

W przypadku witryny Pamiętam, główny interfejs (który jest animowany) natychmiast się wyróżnia, ponieważ zachęca do interakcji. Chociaż ruch i interfejs są funkcjonalnymi narzędziami nawigacyjnymi, projektanci wizualni wykorzystali potencjalną utratę tych elementów jako sposób na przekazanie podstawowej misji witryny: choroby Alzheimera. Podobnie jak blednące wspomnienia pacjentów, dla których organizacja zbiera fundusze, strona powoli rozpływa się w nicości bez aktywnej interakcji.

Dźwięk w hierarchii informacji

Dźwięk jest kolejnym narzędziem niemożliwym do wykorzystania w mediach drukowanych, ale wciąż rozwijanym zgodnie z zasadami hierarchii. Ponieważ dźwięk jest całkowicie niewizualny, nie ma żadnych zasad, do których można by się odwoływać. Ale dźwięk może być również narzędziem projektowym, które skutecznie komunikuje treść, a także nastrój lub znaczenie. Elementy projektu, które niosą określone dźwięki, mogą być pogrupowane względem siebie, a te, które są najodważniejsze, mogą wydawać się najważniejsze lub mogą oznaczać oddzielenie od grupy.

Jakość dźwięku dołączonego do elementu powinna szybko identyfikować, charakteryzować lub pomagać ustrukturyzować treść. W jaki sposób dźwięk, który kontrastuje z towarzyszącym mu elementem wizualnym, może przekazać nowe znaczenie?

Same dźwięki mogą być tak złożone, że tworzą cały nastrój lub przesłanie projektu, zanim dostrzeże się coś wizualnego. Tak jak kolorowe tło tworzy nastrój, dźwięk może znajdować się w tle lub przekazywać informacje zwrotne w interfejsie użytkownika, takie jak reagowanie na naciśnięcie przycisku na telefonie komórkowym. Zasada tej techniki jest podstawowa, ale kreatywność, z jaką można ją zastosować, jest tam, gdzie może się zdarzyć magia.

Ze względu na swoje znaczenie w twórczości kolektywu, strona internetowa stworzona na wystawę niemieckiej grupy artystycznej ZERO w Guggenheim wykorzystuje dźwięk jako nastrojowe tło, a także jako formę informacji zwrotnej podczas poruszania się po stronie. Pogrubione dzwonki stanowią elementy reprezentujące początki tematu, podczas gdy trzeciorzędne projekty klikają w tle.

Pojęcie hierarchii wizualnej

Hierarchia wizualna jest prostą koncepcją, a zrozumienie teorii jest w rzeczywistości łatwiejsze niż praktyczna zdolność projektanta do wykonania dobrze zorganizowanej kompozycji. Niemniej jednak bycie pomysłowym w nowym medium przy jednoczesnym zachowaniu dobrego projektu jest wyzwaniem.

Cały czas pojawiają się nowe media, a trudne sytuacje nie ustępują – wręcz przeciwnie. Obecnie w użyciu jest ponad 200 różnych rozmiarów ekranu. A to tylko te dwuwymiarowe. Najpierw był internet, przeglądarki komputerowe, potem telefony komórkowe i tablety, a teraz wkraczamy na nowe terytorium dzięki technologiom, takim jak telewizja interaktywna, IoT, urządzenia do noszenia, wirtualna i rozszerzona rzeczywistość.

Projekt, który naprawdę przesuwa granice mediów cyfrowych, jest wciąż w powijakach. Mamy nadzieję, że zasady hierarchii wizualnej i dobrego projektowania nadążą za szybkim postępem technologii, dzięki czemu nasze doświadczenie mediów cyfrowych pozostanie pełne znaczenia i przyjemności.

Dalsza lektura na blogu Toptal Design:

• Popraw swój UX dzięki przejrzystej hierarchii wizualnej
• Podstawy projektowania — przewodnik po hierarchii wizualnej (z infografiką)
• Zasady projektowania: wprowadzenie do hierarchii
• Najlepsze praktyki projektowania interfejsu użytkownika dla lepszej skanowalności
• Popraw swój UX dzięki zasadom udanego projektowania interakcji