ISSN 1312-0379

Главна > Статии > Content

Визуални наративи: въведение във визуалната организация. От Люк Вроблевски.

Изкуство срещу наука. Естетика срещу ползваемост. Експертите по ползваемостта са от Марс, графичните дизайнери са от Венера. Спорът между дизайна (визуалният такъв) и дизайна (от технологична гледна точка) продължава и сега. Един уеб сайт, обаче, не може да взема страни: той има нужда от това и двата типа дизайн да са успешни.

“Интерактивният дизайн е хомогенна смес от графични изкуства, технология и психология.” — Brad Wieners Wired, 2002

И така, какъв е смисълът от този спор? Може би разделителната линия е заложена в нашите мозъци: лявото полукълбо (логика) срещу дясното полукълбо (интуиция). Или пък ако приемем по-малко крайна позиция: малко инженери са отделяли време, за да изучават изкуството и малко артисти са прекарвали време в програмиране или провеждане на тестове за ползваемост. Но времената се променят. Визуалните дизайнери, работещи за Мрежата, имат нужда да разберат медията, в която работят и затова много от тях започнаха да програмират. Много от тях са влизали в лабораториите за ползваемост.

Но какво се случва в другия лагер? Ровят ли се разработчиците и професионалистите изследващи човешкия фактор в литература посветена на гещалт и цветознанието? Те със сигурност имат инструментите нужни за това - различни програмни среди правят смесването на изображения, цветове и шрифтове (с всякакви форми и размери) изключително лесно. Но със силата идва и отговорността. А в този случай и нуждата да се разбере как визуалната информация комуникира с вашата аудитория.

“Откриваме, че хората бързо оценяват даден сайт единствено по визуалния дизайн.” — Stanford Guidelines for Web Credibility, 2002

Визуалната комуникация може да бъде разглеждана като съставно цяло от взаимно преплетени части: индивидуалност (или външен вид и усещане) и визуална организация. Индивидуалността на една презентация е онова, което създава емоционалното въздействие — инстинктивната ви реакция на онова, което виждате. Създаването на една уместна индивидуалност изисква използването на цветове, типографски техники, изображения, форми, мотиви и т.н., за да се отправи правилното послание към вашата аудитория. Тази статия, обаче, се концентрира върху другата страна на визуалната комуникация: визуалната организация.

Как виждаме: визуални взаимоотношения

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

Този процес се ускорява от способността ни да групираме информацията визуално. Когато гледаме един стрък трева, близките обекти, които имат подобен цвят, форма, размер и позиция биват обединени и придобиват един общ смисъл: поляна. Ние нямаме нужда да сравняваме всеки стрък с останалите.

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


Илюстрация 1: Принципи на възприятието: близост, подобие, последователност, завършеност.

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

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


Илюстрация 2: Визуални разлики между обектите.

Наратив: визуална йерархия

“Дизайнерите могат да създават нормалност от хаоса; те могат да комуникират ясно идеи, организирайки и обработвайки думи и изображения.” — Jeffery Veen, The Art and Science of Web Design

Сега след като разбираме основните начини за визуално разграничаване на обектите, можем да хвърлим поглед върху общия план: използване на визуалните взаимоотношения, за да се разкаже една ясна, разбираема история. Елементите на един "визуален наратив" се подреждат в лесноразбираема йерархия според важността си. Центърът на вниманието привлича вниманието на зрителя, а всяка следваща точка на фокуса прибавя нещо към историята. Това логическо подреждане е познато като визуална йерархия.

За да се създават ефективни визуални йерархии, ние използваме визуални взаимоотношения, прибавяйки към или намалявайки визуалната тежест на елементите на страницата, като по този начин установяваме един шаблон за движение през визуалното оформление. Визуалната тежест може да бъде измерена чрез степента, в която даден елемент на страницата привлича вниманието ни или задържа интереса ни. Големите червени букви, например, контрастират с белия фон далеч повече, отколкото една светлосива точка. В резултат, визуалната тежест на червените букви грабва вниманието ни първа, макар че тя може и да не задържи вниманието ни толкова дълго, колкото едно детайлно изображение.


Илюстрация 3: Три обекта с различна визуална тежест, определяна от вариациите в цвета, формата и текстурата.

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

Илюстрация 4: Най-тежките (доминиращи визуално) елементи в този цирков плакат са изображенията на изпълнителите и заглавието. Те оформят впечатлението за общия план: циркът е в града. Най-леките (най-малко доминиращи) елементи в йерархията са цените на билетите и подробностите. Ако йерархията беше обърната, малко хора щяха да разберат, че цирка е в града. Вместо това те щяха да се объркат, преминавайки покрай плакати, които изглежда промотират “$5.50.”

Една балансирана йерархия осигурява не само ясни напътствия за разпознаване и разбиране на информацията, но също така помага обединяването на отделните елементи на страницата в единно цяло. Това създава чувство за ред и баланс. Без визуална йерархия, елементите на страницата се борят за внимание и в крайна сметка никой от тях не печели. Във всички йерархии само конкретни елементи трябва да са на върха; останалите трябва да "следват примера" им. Уместното разположение на всеки елемент в йерархията се определя от съобщението, което се опитвате да предадете.


Илюстрация 5: В оформление с ефективна визуална йерархия, ясно различимата визуална тежест на всеки елемент води зрителите през страницата по информативен и уместен начин.

На практика

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


Илюстрация 5: Ако всички елементи в една страница имат еднаква визуална тежест, човек трудно може да вникне в смисъла на страницата. Смисълът се създава чрез разлики и сходства между елементите и тяхното място във визуалната йерархия на страницата.

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

Съдържание

  • Заглавие на страницата
  • Заглавие на подсекция
  • Връзки
  • Допълнителна информация (цитати и др.)

Навигация
  • Обозначение за местонахождението
  • Опции в навигацията от най-високо ниво
  • Опции в поднавигацията
  • Пътечка (breadcrumbs)

Допълнителни елементи
  • Сайт идентификатор
  • Инструменти на сайта (пазарска количка, карта на сайта и др.)
  • Footer информация (privacy policy, информация за контакти и др.)


Илюстрация 7: Визуална йерархия на стандартна уеб страница.

Разбира се, има много ситуации, в които отклонения от тази форма са препоръчителни (на навигационни страници, главни страници и др.) Съдържанието, аудиторията и целите на всяка страница трябва да определят йерархия й. Независимо от това, визуалното оформление на всеки елемент на уеб страницата винаги трябва да бъде:

  • Уместно спрямо и показателно за функцията на елемента
  • Осъществявано по неизменен начин из целия сайт
  • Позиционирано правилно във визуалната йерархия на страницата (по начин, отразяващ относителната важност на елемента)

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


Илюстрация 8: В тази онлайн форма, визуалната йерархия води потребителя през необходимите за създаване на заявка стъпки. Освен това тя поставя ударение (чрез цвят, позициониране и мащаб) върху първата стъпка (“Ordering from...”) и последната стъпка (“Sign-In” бутона). Същевременно, допълнителната информация е приглушена (има малка визуална тежест) и не си противеречи с основната последователност във взаимодействието със сайта.

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

Разполгайки с огромен брой уеб страници и приложения, от които да избират, потребителите често разчитат на визуални подсказки (особено в първите моменти), за да оценят уеб интерфейсите. Ето защо една добре измислена визуална организация може да повиши ползваемостта драстично, групирайки информацията в смислени последователности и елементи на страницата. Една такава система разчита на разбиране за това как хората използват визуалните взаимоотношения, за да различват обектите и за това какво разкриват тези взаимоотношения на зрителите (чрез визуалната тежест и йерархия). Но визуалната организация е само половината от визуалната комуникация. Останалото - индивидуалността (или външния вид и усещането) - е друга история...

За повече информация:

Да поговорим за това

Ако изпитвате нужда да поговорите за тази статия с някой, да кажете колко (не) ви харесва или въобще - форумът е отворен непрекъснато. Заповядайте »