Визуалната йерархия при дизайна на уеб страници

Как хората гледат на дизайна на един уеб сайт? Когато дизайнерът знае как човек възприема това, което вижда, той може да подреди елементите на всяка уеб страница максимално ефективно. В резултат сайтът привлича потребителите, кара ги да останат за по-дълго и да се запознаят с повече съдържание. Да разгледаме „формулата на успеха“ по-подробно.

Съдържанието на една уеб страница следва специфична йерархия. Заглавията са преди текста, менюто обикновено е най-отгоре или изскача отстрани, когато сайтът се разглежда на смартфон. Дизайнерите организират съдържанието така, че най-важното да се вижда първо. Подредбата следва низходящата линия от най-висок към най-нисък приоритет. Освен по отношение на организацията на съдържанието по важност, терминът „йерархия“ се използва и за да се покажат връзките между отделните секции в рамките на уеб страницата, където те съществуват, разбира се.

Когато потребителите разглеждат уеб страницата, те реално определят йерархията за себе си. Това, което първо грабне вниманието им, е най-важното. Така те разглеждат елементите на съдържанието йерархично, като всеки следващ е подчинен на предишния.

Принципи на йерархията
Човешкото око възприема информацията визуално, а не под формата на блокове от данни. За разлика от компютрите, ние, хората, сме оставени на „милостта“ на естествената работа на зрението. Съвременните хора от малки са свикнали с големи изображения, придружени с кратък текст с едър шрифт, които са характерни за детските книжки с картинки и комиксите. Това трябва да бъде взето предвид при дизайна на уеб сайт.

Факторите, които определят йерархията при възприемане на информацията от човешкото око и с които трябва да е съобразено оформлението на уеб страниците включват:

Размер - Колкото по-голям е елементът, толкова повече ще привлича вниманието в сравнение с по-малките елементи на уеб страницата. Това е изпитано във времето решение - заглавията на водещите страници на вестниците винаги са много голям шрифт, за да „грабнат окото“.

Цвят - Ярките цветове привличат повече внимание от „скучните“ тонове. След тях идват по-наситените и леко по-тъмните. На трето място идват бледите - те създават усещане за отдалеченост. На дъното на цветната йерархия са сивкавите „убити“ тонове.

Контраст - Драматичният цветови контраст е по-впечатляващ от лекия. Той позволява на важните елементи на уеб страницата да се откроят. Всичко е относително, както за казали философите. Главната част на страницата, където ще е основното съдържание, трябва да е като къща, в която да Ви се иска да влезете - слънчева, просторна и приветлива. Тя е в контраст с footer-a на страницата, който е като основата на къщата – трябва да излъчва сигурност, стабилност и надеждност, като същевременно трябва да е изключително полезен за потребителите.

Подредба - Трябва да има ред при елементите на дизайна на уеб страницата. Една от най-често използваните традиционни подредби включва голяма колона с основното съдържание и по-малка отдясно на нея, която обикновено служи за навигация (както е при нашия блог). Важната техническа информация обикновено е в горния десен ъгъл на страницата - това може да е бутон за запитване или кратка форма за влизане в профил, какъвто е случаят с Facebook например.

Повторение – Повтарянето на стилове дава усещане на потребителите, че съдържанието в еднакъв стил е свързано. Например удебеленият текст в тази статия означава, че това е основната тема (есенцията) на параграфа. По същия начин, всички думи и изрази в синьо показват, че когато се кликне на тях, ще се отвори друга уеб страница.

Близост - Колкото по близо един до друг се поставят елементи на дизайна, толкова по-силна е връзката между тях от гледна точка на потребителите. При настоящото изброяване на фактори например има един ред разстояние между тях, което показва, че са отделни елементи, но същевременно нямат отделно обособени заглавия, което дава да се разбере, че това е листа. До сега не се бяхте замисляли върху това от гледна точка на потребителското преживяване, нали?

Празни пространства - Известни още като негативни или бели пространства, те се използват за ограждане не елементи на уеб страницата, така че да изпъкнат. Чрез тях се постигат две важни ползи: визуално се разграничава всеки блок информация и същевременно тя става по-лесна за възприемане.

Консистенция и стил - Чрез тях се дава приоритет на една част от съдържанието пред друга, освен че се постига по-реалистично усещане и се създава естетика. Както и шрифтовете, те могат да зададат тона за дизайна на уеб сайта. Ето един пример. Туристическа агенция иска две рекламно-целеви страници, като едната трябва да рекламира почивка на море, а другата отдих край езеро. За първата се използва фон, показващ морето в близък план – кристално чиста вода, под която се вижда ситен бял пясък. Когато същата техника се приложи за страницата, рекламираща отдих на езеро обаче, вместо пясък се виждат големи тъмни камъни. Консистенцията в случая става прекалено разсейваща, а и не толкова приятна за окото, защото е много наситена – камъните имат по-плътна и по-богата консистенция в сравнение с финия пясък.

Една от основните тенденции при изработката на модерни уеб сайтове е да се използват психологически похвати, за да може дизайна да „хваща окото“. По този начин потребителите се ангажират със съдържанието по-лесно и същевременно на по-дълбоко ниво. Разбира се, трябва да има баланс между психологическите и естетическите похвати.

Йерархически модели
Има основни модели за йерархия на уеб страници. Те са базирани на начина, по който движим погледа си, когато отворим нова страница на екрана. Например на български, както и на другите европейски езици, се чете отляво надясно и това естествено ни кара да погледнем първо към горната лява част на екрана. На иврит и арабски се чете отдясно наляво и дизайнерите, които създават уеб сайтове за потребители, използващи тези езици, трябва да се съобразят с това. Тук ще предложим два йерархически модела, които могат да се приложат при дизайна на уеб страници за сайтове, чиито потребители четат отляво надясно.

Z модел
Този модел се препоръчва за уеб страници с малко количество текст - това обикновено са рекламни страници за даден продукт или бранд, като такива могат да са и продуктовите страници в рамките на онлайн магазин. Потребителите виждат подредените „плочки“ с текст и го разглеждат, преминавайки от горната лява част към горната дясна част и после към долната лява част (по диагонал) и от там към долната дясна част.

Йерархията на елементите и съответно на информацията трябва да следва това движение, което съответства на латинската буква Z. Има четири информационни точки, свързани с три линии. Интересно е да се отбележи, че този модел често се използва не само за уеб сайтовете с адаптивен дизайн (responsive design), които работят на таблети и смартфони, но и за мобилни приложения.

F модел
Този модел обикновено се използва за страниците на уеб сайтове, които имат обемно текстово и/или видео съдържание. При него потребителите преглеждат най-горната част на страницата отляво надясно, а след това се спускат надолу, следейки лявата страна на страницата и внимавайки за визуални подсказки за това, което търсят. Когато го намерят, преглеждат съдържанието пак отляво надясно. Този процес се повтаря, докато не достигнат края на страницата. Така се получава модел, приличащ на латинската буква F. Чудесен пример за такова йерархическо оформление е листата с фактори, която е част от тази статия.

Напълно е възможно на един уеб сайт да има страници с дизайн по Z модела и F модела едновременно. Началната страница обикновено е построена въз основа на първия, а страниците със статии са изградени по втория модел. Напълно е възможно да се използва и креативен микс от двата модела в рамките на една уеб страница.

Обобщение
Йерархията създава ред, за да може уеб страниците да са изработени така, че да имат смисъл за потребителите и те да ги използват активно. Дизайнерите дават приоритет на определени елементи в зависимост от това какво искат да направят потребителите и какво брандът иска да накара потребителите да направят. Останалото е творчество.

Споделете в: