Hierarchia wizualna dla początkujących

Hierarchia wizualna to organizacja obiektów w określonej kolejności, aby zwrócić uwagę na zamierzone obszary.

Powszechnie stosowana w projektowaniu UX, hierarchia wizualna zapewnia czytelnikowi łatwiejszą nawigację i pomaga skierować jego uwagę tam, gdzie chcesz.

Niewłaściwe użycie lub brak hierarchii wizualnej może sprawić, że odwiedzający witrynę będą zdezorientowani i zagubieni.

Hierarchia wizualna jest powszechna w plakatach i reklamach, aby pomóc skierować uwagę na zamierzone elementy.

Ten blog zapewni początkującym podstawy hierarchii wizualnej.

Uszkodzenie hierarchii wizualnej

Podział hierarchii wizualnej na prostsze części pomaga wyjaśnić, w jaki sposób projektanci radzą sobie z koncepcją projektową.

Trzy to trzy podstawowe role w hierarchii wizualnej, z których dwie są ściśle powiązane.

Rozmiar

Zmiana rozmiaru obiektów może pomóc zwrócić na nie uwagę lub oddalić się od nich.

Dla najważniejszych informacji, które chcesz wyrazić, konieczne jest pozostawienie największego rozmiaru. Użycie zbyt wielu elementów o podobnej wielkości zniweluje ten efekt, ponieważ nic tak bardzo się nie wyróżnia.

Skalowanie rozmiarów jest niezbędne, aby pokazać, jak wypada w porównaniu z innymi obiektami. Stworzenie poczucia równowagi pomaga w skalowaniu, aby podkreślić, jak twój największy obiekt wypada w porównaniu z mniejszymi.

Jeśli posiadasz informacje, które nie są ważne, posiadanie ich w małym rozmiarze sprawi, że nie będą przeszkadzać i pozostaną tam, gdzie użytkownicy będą je widzieć jako ostatnie.

Kolory i kontrast

Jaśniejsze kolory lepiej przykuwają uwagę niż inne. Efekt ten nasila się, gdy połączysz jasne kolory z ciemniejszym tłem. W rezultacie Twoje informacje są bardziej widoczne i z łatwością przyciągają uwagę.

Kolor i kontrast to dwa elementy wizualnej hierarchii, ale oba współpracują ze sobą bezbłędnie, aby przyciągnąć uwagę.

Jednym ze sposobów wykorzystania tej metody jest zmiana koloru tekstu poprzez podkreślenie go jaskrawym kolorem; przyciągnie uwagę przed jakimkolwiek innym matowym kolorowym tekstem.

Im większy kontrast, tym silniejsza jest uwaga. Dodanie drastycznych różnic kolorystycznych, takich jak ciemne tło z jasnoczerwoną czcionką, przyciągnie uwagę użytkownika i sprawi, że będzie to pierwsza rzecz, jaką zauważy na dowolnym obrazie lub stronie internetowej.

Tworząc kontrastowe kolory, aby przykuć uwagę, najlepiej ograniczyć je do minimum. Zbyt wiele skontrastowanych obiektów dezorientuje czytelnika i tworzy niepożądany i odpychający efekt.

Innym sposobem użycia kolorów jest wybranie podobnych palet w celu stworzenia korelacji między określonymi obiektami.

Najlepiej jest zarezerwować tę taktykę tylko dla najbardziej niezbędnych elementów na stronie, ponieważ to tam chcesz najpierw skierować całą uwagę.

Dobry projekt UX zawiera duży kontrast, przy czym większość estetyki wykorzystuje silny kontrast do tworzenia oszałamiających dzieł.

Wzorce F i Z

Jeśli chodzi o przekazywanie informacji głównie za pomocą tekstu, istnieją dwa podstawowe wzorce, które najlepiej wykorzystują sposób, w jaki przetwarzamy informacje wizualne.

Te wzorce działają w większości języków, ale świetnie sprawdzają się w języku angielskim, ponieważ słowa są czytane od lewej do prawej i od góry do dołu.

Wzór F

Wzór F to idealny wybór dla projektów zawierających obszerny tekst. Wzór jest zgodny z literą, która od niego pochodzi, zaczynając od lewego górnego rogu i przesuwając się w prawo.

Następnie widz skanuje wzdłuż kręgosłupa w poszukiwaniu podtytułów lub nagłówków.

Wzór jest na przemian nazywany wzorem E, chociaż wzór F jest bardziej kultowy.

Aby użyć wzoru F, musisz umieścić wszystkie ważne informacje po lewej stronie w małych nagłówkach, aby przyciągnąć uwagę.

Ten projekt doskonale eliminuje nudę związaną z odczytywaniem tekstu z dużych bloków akapitów.

Użytkownicy mogą skanować nagłówki, aby znaleźć przyciągające wzrok nagłówki lub wypunktowania, ponieważ służą one przyciągnięciu uwagi.

Wzór Z

Podczas gdy wzór F jest odpowiedni dla witryn z dużą ilością tekstu, wzór Z jest inny.

Wzór Z jest idealny dla stron internetowych lub reklam, które nie zawierają kilku akapitów tekstu.

Projekt rozpoczyna się od umieszczenia informacji o najwyższym priorytecie w lewym górnym rogu, a następnie kaskadowo w prawym górnym rogu, lewym dolnym i prawym dolnym rogu.

Użytkownicy będą łatwo poruszać się po wzorcu Z, ponieważ jest to często używany projekt, który jest łatwy do zrozumienia.

Lewa górna część jest zwykle zarezerwowana dla logo, ponieważ będzie to pierwsza rzecz, którą ludzie zauważą. W prawym górnym rogu znajduje się wezwanie do działania umieszczone po tym, jak użytkownicy zobaczą logo firmy. Wezwanie do działania w tej sytuacji jest zwykle monitem o rejestrację.

Środek projektu zwykle zawiera obrazek, który ma wypełnić pustą część.

Dolny lewy i prawy zawiera cały zamierzony tekst lub informacje, które chcesz pokazać odwiedzającemu.

Zrozumienie typografii

Hierarchia typograficzna jest łatwa do zrozumienia i ma zastosowanie do każdego projektu zawierającego dużo tekstu, który stanowi zdecydowaną większość. Można go podzielić na trzy części, w kolejności nagłówek, podtytuły i wreszcie tekst.

Twoje nagłówki zawierają istotne informacje, są umieszczone najwyżej w Twoim projekcie i są najbardziej widoczną treścią.

Twoje podtytuły działają, aby posortować cały tekst i uporządkować bałagan akapitów. Zawsze utrzymuj podtytuły mniejsze niż nagłówki, ponieważ nie powinny konkurować o pierwszeństwo.

Podtytuły zapewniają użytkownikom prostą nawigację w celu znalezienia określonych informacji.

Twój ostatni kawałek to twój tekst, który zwykle zawiera akapity. Rozmiar czcionki powinien być mały, ale zachować czytelność. Poprzednie dwie sekcje mają na celu ułatwienie użytkownikom poruszania się po gęstych tekstach.

Znaczenie odstępów

W przypadku stron zawierających minimalną ilość informacji pozostawienie dużej ilości przestrzeni otaczającej ważne informacje spowoduje zwrócenie uwagi na centrum, w którym znajduje się cała przestrzeń.

Ta koncepcja powinna również dotyczyć wszystkich innych projektów, dodanie zbyt dużej ilości informacji spowoduje nieprzyjemne wrażenia użytkownika.

Otaczanie treści przestrzenią zapewnia prosty i łatwy do naśladowania projekt UX.

Upychanie zbyt dużej ilości informacji i pozostawienie małej przestrzeni wokół obszarów sprawi, że projekt będzie przytłaczający i sprawi, że ludzie poczują się zdezorientowani. Gdy użytkownicy są zdezorientowani, zawsze mają szansę opuścić Twoją witrynę, pamiętaj, aby przedstawić tylko ważne informacje.

Korzystanie z wyrównania

Ważne jest, aby dopasować projekty, ponieważ losowe rozmieszczenie tekstu spowoduje, że obraz będzie gorączkowy.

Wzory F i Z ucieleśniają zastosowanie wyrównania. Projekty z wzorem F wykorzystują wyrównanie do lewej, podczas gdy projekty z wzorem Z wykorzystują wyrównanie do lewej i prawej oraz wyrównanie do środka.

Tworząc projekt wizualny z tekstem jako fokusem, najlepiej wyrównać do lewej.

W przypadku projektów stricte wizualnych z uproszczonym naciskiem, wyrównanie wszystkich elementów do środka zwykle tworzy atrakcyjny projekt.

Korzystanie z siatek

Podczas budowania projektów siatki są powszechną metodą pomagającą w procesie tworzenia. Zastosowanie zasady trójpodziału daje możliwość nadania balansu Twoim projektom.

Aby zastosować zasadę trójpodziału, dodaj siatkę do swojego projektu i pozwól mu spocząć na dwóch liniach poziomych i pionowych. Rezultatem jest projekt, który jest przyjemny i mniej męczący dla oczu.

Obiekty znajdujące się bliżej środka będą zwracać uwagę, a te odległe będą zwracać uwagę na końcu.

Bliskość i relacja

Gdy elementy są bliżej siebie, czytelnik założy, że są ze sobą powiązane.

Pomoże to uporządkować wiele informacji i ułatwić widzom ich zrozumienie.

Grupowanie obrazów z tekstem oznacza, że ​​oba są ze sobą powiązane, a czytelnicy kojarzą je ze sobą. Jeśli obraz i tekst są daleko od siebie, czytelnik założy, że oba elementy nie są ze sobą powiązane i nie mają ze sobą nic wspólnego.

Czcionki i hierarchia wizualna

Zmiana rozmiaru czcionki przy użyciu większych czcionek zarezerwowanych dla ważnych informacji pomoże skierować na nie uwagę.

W przypadku plakatu imiona i nazwiska powinny być pisane jedną z większych czcionek, natomiast elementy, takie jak adres, powinny być pisane małą czcionką.

Przechodząc od rozmiaru czcionki, używanie różnych typów czcionek pomoże skierować uwagę użytkownika. Użyj innej czcionki dla tytułów, podtytułów i tekstu informacyjnego. Ta metoda projektowania pomoże nadać Twojej pracy efekt, którego potrzebuje, aby przyciągnąć i utrzymać uwagę czytelnika.

Wskazówki dotyczące hierarchii wizualnej

Zanim zaczniesz tworzyć swój projekt, spisanie kilku notatek może pomóc w uporządkowaniu projektu, a nawet w tworzeniu bardziej estetycznych projektów.

Zanotuj najważniejsze informacje, których potrzebujesz do ustalenia priorytetów, oraz metody, których użyjesz, aby to zrobić.

Spróbuj też wyobrazić sobie podróż czytelnika i spróbuj ulepszyć projekt UX, usuwając wszelkie zaśmiecające szczegóły.

ROI z dobrego projektu UX jest zawsze wart dodatkowej pracy, więc nie lekceważ jego znaczenia.

Zakończyć

Hierarchia wizualna polega na dyktowaniu, w jakiej kolejności chcesz skierować uwagę czytelnika; chcesz, aby najważniejsze informacje były widoczne w pierwszej kolejności, a następnie wszystko inne.

Użycie kontrastu może stworzyć kolory, które pojawiają się i stają się pierwszą rzeczą, którą czytelnicy zauważają w projekcie.

Wiedząc, jakie informacje chcesz, aby czytelnicy widzieli jako pierwsze, możesz wykorzystać wszystkie elementy hierarchii wizualnej, aby zapewnić innym dobry projekt UX.