3 нива на визуален и емоционален дизайн при създаване на уебсайт

Емоционалният дизайн като мощен инструмент при създаването на уебсайт

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

Това, разбира се, е добре, но не е достатъчно – емоциите никога не са играли голяма роля в интернет маркетинга, поне доскоро.

Защо стана така? Защото в интернет обикновените човешки емоции се удавят в студено цифрово море от рационални концепции: функционалност и ефективност. Хората бяха толкова заети с опитите си да се адаптират към световната мрежа като ново местообитание, че за известно време забравиха за най-важната част от човешката природа - емоциите. Разумът взе връх над чувствата.
Вместо да използваме интернет според собствените си условия, ние самите се приспособихме към неговата технологична — и следователно безлична — природа. И това се отразява при изработка на всички уебсайтове.

И ако не бяха нашите далновидни съвременници като Дон Норман или Арън Уолтър, всички ние, от гигантите в киберпространството до обикновените потребители, включително, разбира се, уеб маркетинг специалисти и дизайнери, щяхме да се фокусираме върху подобряването на технологичните процеси, пренебрегвайки потенциала на емоционалния дизайн при изработка на уебсайт.
емоциите при създаване на съвременния уеб дизайн на сайта
Емоциите оставят най-дълбок отпечатък в дългосрочната памет, те карат човек да чувства, че другата страна на взаимодействието в глобалната мрежа е същият човек , а не машина.
В книгата си „Емоционален дизайн“ (2004) Норман обяснява защо „привлекателността работи най-добре“. Според автора погледът към красивите неща събужда креативността в човека и разширява обхвата на възприемане на околната среда, като по този начин едновременно с това минимизира влиянието на дребните недостатъци в същите неща.

И така, заключава Норман, атрактивните продукти улесняват решаването на проблеми, което прави тяхната естетическа привлекателност необходимо условие за успех (например за рекламиране на оферта).

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

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

След практическо проучване Norman излезе с концепцията за "три нива на визуален дизайн" (три нива на визуален дизайн), според която уебсайт ще бъде едновременно лесен за употреба (използваем) и красив.

С други думи, в книгата си гуруто на „използваемостта като сливане на когнитивна наука, дизайн и инженерни изчисления“ (и един от основателите на Nielsen Norman Group) разби аргумента на опонентите си, представяйки го като фалшива дилема (фалшива дихотомия), отколкото, общо взето, е тя. :)

Арън Уолтър, дизайнер и експерт по оптимизиране на потребителското изживяване, написа друга страхотна книга за новата ера на уеб дизайна при изработка на уебсайт - "Проектиране за емоция".

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

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

В нашата нова статия ще си припомним каква е теоретичната основа на добрия дизайн при съзаването на уебсайт, ще разгледаме концепцията на Норман за „3 нива на визуален дизайн“ и ще се опитаме да разберем как на практика е възможно да се проектира емоция и да се внедри на уебсайт при неговото изграждане.
Поискайте безплатна консултация!

И научете как да направите сайта си уникален

Теоретични основи на добрия дизайн при изработка на уебсайт

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


За да поставите стабилна основа, трябва да знаете 3 неща:


  • какви са вътрешните цели на вашия дизайн;
  • кой ще посети вашата целева страница;
  • в какъв контекст посетителите ще използват целевата страница.

Така че, нека започнем да изливаме основата. :)


Вътрешни цели на дизайна


Преди да започнете работа по изработка на уебсайт, не забравяйте да се запитате: какви са вашите собствени цели? Това не означава, че вашето „Аз“ трябва да доминира в целия процес, но трябва да разберете какъв образ ще използвате, за да общувате с целевата аудитория, какви ценности и възгледи ще им демонстрирате, как искате да покажете се на потенциални клиенти.


Въоръжени с такива знания, вие не само ще действате ясно и последователно, но и ще се представите като такъв пред представителите на вашата целева група.


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


Потенциални посетители


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


Контекст на употреба


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

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

3 нива на визуален дизайн при изработка на уебсайт според Norman

Norman е идентифицирал 3 нива на визуален дизайн, които могат да бъдат използвани за предизвикване на желани емоции чрез външния вид на продукта.


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


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


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


3-те когнитивни нива, идентифицирани от Норман и след това свързани с визуалния дизайн, са:


  • интуитивно ниво (висцерално ниво),
  • поведенческо ниво,
  • рефлексно ниво.

Сега нека ги разгледаме в този ред.


Интуитивно ниво


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


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


Впечатленията, получени на това ниво, имат пряко емоционално въздействие върху хората. Норман нарича дейност, инициирана на интуитивно ниво, „поведение отдолу нагоре“.


За визуалния дизайн това означава, че интуитивното ниво на познание се занимава с основните влияния на външната среда, нещо видимо, осезаемо. Качеството на интуитивния дизайн може да се научи просто чрез наблюдение на първите впечатления на потребителите.

Добрият интуитивен дизайн ни кара да почувстваме поне нещо и в идеалния случай ни радва.

дизайнът при изграждане на уебсайта

Атрактивен долен колонтитул от Vimeo. Дизайнът няма друга функция освен да привлича вниманието.

Поведенческо ниво


Поведенческо ниво - разбиране как работи нещо, как работи, как можем да го използваме и какъв опит ще придобием в резултат на това.


Това, което има значение на това когнитивно ниво, е функционалността, представянето, физическите усещания.


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


За да постигнете този ефект, трябва наистина да знаете точно от какво се нуждае вашият потребител - например като наблюдавате на практика как той взаимодейства с потребителския интерфейс на даден уебсайт.

дизайнът от айпад при изграждане на уебсайта

Разделена клавиатура на Ipad с "фантомни бутони". Ако сте свикнали да пишете Y с лявата си ръка, пак можете да го направите.

Рефлексно ниво


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


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


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


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


Рефлексният дизайн определя цялостното ни впечатление от даден продукт, докато мислим за всички аспекти на продукта: значението на посланието, културните аспекти, целта на продукта и дали изобщо трябва да помним цялата тази информация.

дизайнът от айпад при изграждане на уебсайта

Картата на магистралите на САЩ, представена като карта на метрото, е чудесен пример за отразяващ дизайн.

При добра графика всичките 3 нива работят заедно. Не е задължително да са с „равно тегло“, но тъй като възприемаме цялата мрежа на тези 3 нива, всички те трябва да са насочени поне към потребителя.


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


Например външният вид на дизайна на страницата е само на едно ниво – интуитивен. Начинът, по който работи даден продукт, е сферата на поведенческия дизайн, а дългосрочното въздействие („все още е красиво нещо!“) е рефлекс.


Комбинирането на всичките 3 нива в правилната пропорция е същността на добрия дизайн при изработка на уебсайт:


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

И научете как да направите сайта си уникален

Внедряване на емоциите в дизайна при съдаване на уебсайт

Как дизайнерите и търговците могат да приложат това знание на практика? Как да внедрим емоциите в дизайна при изработка на уебсайт?


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


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


Хумор


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


Въпреки това хуморът е деликатен въпрос, защото е трудно да се обобщи: това, което е смешно за един човек, е обидно за друг. Преди да използвате хумор на вашата целева страница/уебсайт/маркетингова кампания, не забравяйте да направите това: на първия етап проучете целевата аудитория и определете контекста за използване на вашия уебсайт. Сега помислете дали вашата целева група ще оцени подобно чувство за хумор?


Също така имайте предвид, че може да не успеете да развеселите всички посетители, но може да успеете да ги засрамите или дори обидите. Струва ли си?


И не забравяйте, че наличието на хумор в сайта ще повлияе на това как посетителите ще ви възприемат.


В Designing for Emotion Уолтър илюстрира пример за това как хуморът може да бъде реализиран с помощта на анимационния талисман на услугата за пощенски списък MailChimp. Името на сладката маймуна е Фреди фон Чимпенхаймер и Уолтър смята, че той е перфектният домакин, който да посреща гости и да ги кара да се чувстват като у дома си.


Freddie перфектно отразява такива характеристики на марката като надеждност, простота и неформалност на комуникацията, без да придава на платформата глупав вид.


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


Важно е. Хуморът трябва да е ангажиращ, но не и досаден.

хумор при изграждане на уебсайта

Фреди фон Чимпенхаймер е най-известното прилагане на хумор в дизайна на SaaS решение :)

А това е пример на нашият сайт за извозване на строителни отпадъци. Тази страница даде много клиенти

хумор в дизайна при изграждане на уебсайта

Много клиенти имахме от тази страница

Признание


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


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


Уолтър обяснява в книгата си, че това е така, защото познаваме себе си толкова добре, че приемаме собствената си природа като отправна точка, с която се опитваме да свържем всичко, което виждаме около нас.


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


Ето защо дизайнерите често използват "златното сечение", за да помогнат за свързването на абстрактна концепция с пропорциите на човешкото тяло.


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


Уолтър описва персонализирането на уеб ресурс като ключ към създаването на "по-човешки" дизайн.

Пример от twitter в дизайна при изграждане на уебсайта

Twitter знае много за "златното сечение"

Дисонанс


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


Те ни дават да знаем какво да очакваме от света около нас, това ни вдъхва чувство на увереност, така че ни е по-удобно да живеем.


Консултантът по използваемост Тод Фолансби в отличната си статия „Мозъците са съгласни! Казусът за насоки за използваемост на уебсайтове (Brains Agree: The Case for Website Usability Guidelines) убедително обяснява защо хората обичат моделите и стереотипите толкова много, защо ги търсят онлайн толкова трудно, колкото и в реалния свят.


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


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


Защо стереотипните уебсайтове се конвертират по-добре?


Въпреки това, ако създадем уебсайт, който не отговаря на споменатите модели/стереотипи, можем да предположим, че събитията ще се развият в 2 посоки: или потребителите няма да разберат веднага какво има пред тях, няма да могат да навигирайте в ресурса, те ще бъдат разочаровани и ще го напуснат; или ще се радват да бъдат разсеяни от скучните стандартни решения и ще възприемат този дисонанс с техните очаквания като положително или забавно преживяване.


Реакцията на посетителите силно зависи от това кои са те и от контекста, в който използват вашият уебсайт.


Ако знаете, че посетителите възнамеряват да намерят определена информация, преди да сключат голяма B2B сделка с вас, уверете се, че задоволявате желанието им да видят разпознаваем „типичен“ уеб ресурс.


Ако очаквате посещение от креативната класа, която цени нестандартното мислене, тогава можете да използвате някакъв визуален дисонанс, за да привлечете вниманието на потенциални клиенти.

Пример от агенция за брандиране в дизайна при изграждане на уебсайта

Уебсайт на агенция за брандиране SubPlot: опростено оформление, но необичайно, забавна и нетрадиционна навигация ангажира посетителите, като същевременно остава лесна за използване

Интонация на комуникацията


Тонът на гласа, използван на вашbzn уебсайт, е важен емоционален фактор. Начинът, по който общувате с потребителите, говори много за отношенията ви с тях. Докато устно им предавате определени послания, вашата интонация показва какво мислите за тях, както и какво искате да мислят за вас - поне според психолога Фридеман Шулц фон Тун (Friedemann Schulz von thun).


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


Важно е да разберете какво и на кого продавате, както и контекста, в който офертата ще бъде разпространена.

Пример от wuffo за в дизайна при изграждане на уебсайта

Wufoo владее уникална интонация на гласа

Съпричастност


Удобна целева страница, красива на външен вид и с отлична използваемост - и изведнъж неочаквано висока степен на отпадане и малък брой потенциални клиенти.


Какъв е проблемът тук, обяснява в лекцията си „Изкуството и науката на съблазнителните взаимодействия“ (The Art and Science of Seductive Interactions) уеб дизайнерът и консултант по използваемост Стивън Андерсън (Stephen Anderson).


Силните и дългосрочни взаимоотношения, както и положителното потребителско изживяване, твърди той, могат да бъдат изградени само чрез привличане и ангажиране на хора.


Потребителите са объркани в световната мрежа от доста време. Приемайки го за даденост, те вече не оценяват нещо добро и не се изненадват, когато намерят съдържанието, което търсят.


Сега е време за нещо повече от пасивна консумация. Хората искат да участват, да се забавляват, да се забавляват. Ангажираността може да бъде под формата на игри, социални взаимодействия или персонализиране на съдържание.


Обичаме неща, персонализирани според нашите нужди и интереси, можем да играем браузър игри с часове в социалните медии, аплодираме всяко забавно видео, на което попаднем, докато сърфираме в мрежата, нали?


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

Пример от Slavery Footprint за в дизайна при изграждане на уебсайта

На уебсайта Slavery Footprint посетителите могат да научат за връзката с робството като срамна институция в човешката история по увлекателен и интерактивен начин.

Заключение


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

Арън Уолтър


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


Емоциите осигуряват положителни преживявания, които правят хората по-щастливи и оставят добри спомени.


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


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


Високи реализации за вас!

Искате безплатна консултация?

Оставете своите контакти