3 нива на визуален и емоционален дизайн при създаване на уебсайт
Емоционалният дизайн като мощен инструмент при създаването на уебсайт
И научете как да направите сайта си уникален
Теоретични основи на добрия дизайн при изработка на уебсайт
Няколко основни концепции формират основата на всеки добър дизайн, емоционален или друг. Защо сега говорим за базата? Тъй като разработването на дизайн е подобно на изграждането на къща. И в двата случая се нуждаете от солидна основа, върху която можете да изградите стени.
За да поставите стабилна основа, трябва да знаете 3 неща:
Така че, нека започнем да изливаме основата. :)
Вътрешни цели на дизайна
Преди да започнете работа по изработка на уебсайт, не забравяйте да се запитате: какви са вашите собствени цели? Това не означава, че вашето „Аз“ трябва да доминира в целия процес, но трябва да разберете какъв образ ще използвате, за да общувате с целевата аудитория, какви ценности и възгледи ще им демонстрирате, как искате да покажете се на потенциални клиенти.
Въоръжени с такива знания, вие не само ще действате ясно и последователно, но и ще се представите като такъв пред представителите на вашата целева група.
Последователността и предсказуемостта ще допринесат за вашия авторитет в очите на вашата целева аудитория, което е много важно за хората, които възнамеряват да влязат в комуникация и взаимодействие с вашия бизнес.
Потенциални посетители
Познаването на демографските данни на вашата целева аудитория ще ви даде груба скица на оформлението на страницата. По-нататъшното проучване на целевия пазар - как посетителите ще използват вашия уеб ресурс, през кои устройства ще имат достъп, какво е важно за тях и какво не е - ще помогне за изясняване на детайлите, „насочване“ на графиките към потенциални потребители. Без това знание ще бъде трудно създаване на уебсайт, който да бъде едновременно красив и удобен за посетителите.
Контекст на употреба
След това помислете за контекста на вашият уебсайт. Познаването на ситуацията и обстоятелствата, при които потребителите ще посетят вашия сайт, е ценен стратегически актив. Помислете за различните емоции, които могат да възникнат по време на посещение на целевата страница и разберете каква роля ще играете вие в оформянето им и каква роля ще играят самите посетители.
3 нива на визуален дизайн при изработка на уебсайт според Norman
Norman е идентифицирал 3 нива на визуален дизайн, които могат да бъдат използвани за предизвикване на желани емоции чрез външния вид на продукта.
Тези нива са научно базирани на знанието за това как работи човешкият мозък и могат да се използват като ръководство за създаване на атрактивна, ефективна, лесна за използване и запомняща се оферта или интерфейс.
Норман, заедно с 2-ма колеги от Северозападния университет, САЩ, проведе проучване върху механизмите на емоцията, показвайки, че различните нива на нашия мозък формират най-отличителните и най-развити качества на човешката личност.
Тези нива определят трудовите умения и творческите способности на хората; позволи ни да бъдем художници, музиканти и писатели; позволяват на хората да имат и подобряват културата с нейния език, изкуство, хумор и музика; дават ни възможност да осъзнаем своето място в света и да осмислим натрупания опит.
3-те когнитивни нива, идентифицирани от Норман и след това свързани с визуалния дизайн, са:
Сега нека ги разгледаме в този ред.
Интуитивно ниво
Първото, което е и най-ниско, е интуитивното (висцералното) ниво. Това е нивото под прага на осмисленото осъзнаване (предсъзнанието) - на него емоционалните сигнали от околната среда се интерпретират автоматично.
Висцералното ниво работи инстинктивно, влияе върху възприемането на външния свят и следователно върху личните и универсалните културни ценности.
Впечатленията, получени на това ниво, имат пряко емоционално въздействие върху хората. Норман нарича дейност, инициирана на интуитивно ниво, „поведение отдолу нагоре“.
За визуалния дизайн това означава, че интуитивното ниво на познание се занимава с основните влияния на външната среда, нещо видимо, осезаемо. Качеството на интуитивния дизайн може да се научи просто чрез наблюдение на първите впечатления на потребителите.
Добрият интуитивен дизайн ни кара да почувстваме поне нещо и в идеалния случай ни радва.
Атрактивен долен колонтитул от Vimeo. Дизайнът няма друга функция освен да привлича вниманието.
Поведенческо ниво
Поведенческо ниво - разбиране как работи нещо, как работи, как можем да го използваме и какъв опит ще придобием в резултат на това.
Това, което има значение на това когнитивно ниво, е функционалността, представянето, физическите усещания.
Визуалният дизайн на това ниво се описва с формулата „функционални елементи, които отговарят на реалните нужди“. Поведенческият интерфейс трябва да бъде интуитивен и полезен за потребителя. Ясно е, че неудобният и неразбираем дизайн на уебсайт предизвиква отрицателни емоции, а неговият антипод предизвиква само положителни емоции.
За да постигнете този ефект, трябва наистина да знаете точно от какво се нуждае вашият потребител - например като наблюдавате на практика как той взаимодейства с потребителския интерфейс на даден уебсайт.
Разделена клавиатура на Ipad с "фантомни бутони". Ако сте свикнали да пишете Y с лявата си ръка, пак можете да го направите.
Рефлексно ниво
Рефлексното ниво е „най-горният етаж“ на нашите когнитивни процеси. Норман нарича дейността, която се извършва на това ниво, „поведение отгоре надолу“.
Това е съзнанието като такова (ум, разум), съдържащо чувства, емоции и знания от по-висок порядък. На рефлексно ниво ние тълкуваме и разбираме околната среда, говорим за света и мислим за себе си.
Рефлексното ниво е продукт на осъзнаване, опит и учене, то доминира над другите 2 нива: използвайки разума, човек може да контролира както автоматизираното поведение, така и емоционалните влияния.
Във визуалния дизайн компетентността като продукт на опита ни позволява да реагираме по различен начин на някакъв феномен или обект - вече знаем какво е - отколкото в случая, когато дори не сме разбрали какво точно гледаме.
Рефлексният дизайн определя цялостното ни впечатление от даден продукт, докато мислим за всички аспекти на продукта: значението на посланието, културните аспекти, целта на продукта и дали изобщо трябва да помним цялата тази информация.
Картата на магистралите на САЩ, представена като карта на метрото, е чудесен пример за отразяващ дизайн.
При добра графика всичките 3 нива работят заедно. Не е задължително да са с „равно тегло“, но тъй като възприемаме цялата мрежа на тези 3 нива, всички те трябва да са насочени поне към потребителя.
Тези нива дори могат да се противопоставят помежду си – например след дълги размишления върху видяното крайното ни мнение ще се разминава с първото впечатление от него. Освен това хората интерпретират образите по изключително личен начин и имат лични предпочитания за интуитивни, поведенчески и рефлексни качества.
Например външният вид на дизайна на страницата е само на едно ниво – интуитивен. Начинът, по който работи даден продукт, е сферата на поведенческия дизайн, а дългосрочното въздействие („все още е красиво нещо!“) е рефлекс.
Комбинирането на всичките 3 нива в правилната пропорция е същността на добрия дизайн при изработка на уебсайт:
И научете как да направите сайта си уникален
Внедряване на емоциите в дизайна при съдаване на уебсайт
Как дизайнерите и търговците могат да приложат това знание на практика? Как да внедрим емоциите в дизайна при изработка на уебсайт?
Всяка уеб страница има няколко елемента, които могат да я направят лична, „не като другите“, а също така ви позволяват да я разглеждате като „носител на емоции“.
Някои от тях са очевидни - това са цветове, геометрични фигури, изображения. Други не са толкова очевидни - хумор, разпознаване, дисонанс, интонация на комуникация и съпричастност. Именно към тях сега насочваме вниманието си.
Хумор
Хуморът е ефективен начин за свързване с хората. Любезен смях или дори мимолетна усмивка може да стопи леда на предпазливостта и да помогне на хората да се почувстват комфортно, независимо дали става дума за случайна среща на улицата, събирания с приятели или първото посещение на вашият уебсайт.
Въпреки това хуморът е деликатен въпрос, защото е трудно да се обобщи: това, което е смешно за един човек, е обидно за друг. Преди да използвате хумор на вашата целева страница/уебсайт/маркетингова кампания, не забравяйте да направите това: на първия етап проучете целевата аудитория и определете контекста за използване на вашия уебсайт. Сега помислете дали вашата целева група ще оцени подобно чувство за хумор?
Също така имайте предвид, че може да не успеете да развеселите всички посетители, но може да успеете да ги засрамите или дори обидите. Струва ли си?
И не забравяйте, че наличието на хумор в сайта ще повлияе на това как посетителите ще ви възприемат.
В Designing for Emotion Уолтър илюстрира пример за това как хуморът може да бъде реализиран с помощта на анимационния талисман на услугата за пощенски списък MailChimp. Името на сладката маймуна е Фреди фон Чимпенхаймер и Уолтър смята, че той е перфектният домакин, който да посреща гости и да ги кара да се чувстват като у дома си.
Freddie перфектно отразява такива характеристики на марката като надеждност, простота и неформалност на комуникацията, без да придава на платформата глупав вид.
Талисманът работи, защото Фреди се шегува с посетителя по забавен начин, но в същото време той никога не пречи на работния ви процес.
Важно е. Хуморът трябва да е ангажиращ, но не и досаден.
Фреди фон Чимпенхаймер е най-известното прилагане на хумор в дизайна на SaaS решение :)
А това е пример на нашият сайт за извозване на строителни отпадъци. Тази страница даде много клиенти
Много клиенти имахме от тази страница
Признание
По природа ние постоянно търсим емоционални връзки с други хора. Ето защо толкова много обичаме изображенията на лица на уебсайтове - когато видим лице, автоматично се задейства емоционален тригер: чувстваме нещо, изпитваме съпричастност, оценяваме, че разпознаваме някой като нас.
Същото се случва и с текстовото съдържание: ако потребителят прочете за проблем, подобен на този, който има, тогава, като правило, човек с благодарност ще се възползва от предложението да помогне за разрешаването му. Това е много важно при изработка на уебсайт.
Уолтър обяснява в книгата си, че това е така, защото познаваме себе си толкова добре, че приемаме собствената си природа като отправна точка, с която се опитваме да свържем всичко, което виждаме около нас.
Дори ще ни направи впечатление страница, която не съдържа директно изображения на човек. Разпознаването на пропорциите на човешкото тяло в дизайна на сайта вече е достатъчно, за да го признаем за разпознаваем и хармоничен.
Ето защо дизайнерите често използват "златното сечение", за да помогнат за свързването на абстрактна концепция с пропорциите на човешкото тяло.
Разпознавайки себе си - дори в най-абстрактната форма - ние чувстваме, че имаме нещо повече от монитор с куп код и няколко снимки: зад тях подсъзнателно усещаме присъствието на човек, което ни помага да се чувстваме комфортно и да усещаме вид връзка.
Уолтър описва персонализирането на уеб ресурс като ключ към създаването на "по-човешки" дизайн.
Twitter знае много за "златното сечение"
Дисонанс
Друга черта, обща за всички хора, е да поставят целия свят в собствените си модели на възприятие. Тези когнитивни шаблони помагат на човек да разбере „какво е“, „за какво служи“ и „как работи“.
Те ни дават да знаем какво да очакваме от света около нас, това ни вдъхва чувство на увереност, така че ни е по-удобно да живеем.
Консултантът по използваемост Тод Фолансби в отличната си статия „Мозъците са съгласни! Казусът за насоки за използваемост на уебсайтове (Brains Agree: The Case for Website Usability Guidelines) убедително обяснява защо хората обичат моделите и стереотипите толкова много, защо ги търсят онлайн толкова трудно, колкото и в реалния свят.
Насоките за използваемост се основават на дълбоко разбиране на това как информацията се обработва в умовете ни. Прилагането на тези правила помага на дизайнерите да предложат на потребителите структура, съответстваща на техните собствени модели на възприемане.
Докато потребителите прилагат тези модели към дадена уеб страница при изработка на уебсайт и разбират, че всичко отговаря на техните очаквания, те нямат затруднения да се съсредоточат върху съдържанието и бързо да постигат своите (и на търговците) цели.
Защо стереотипните уебсайтове се конвертират по-добре?
Въпреки това, ако създадем уебсайт, който не отговаря на споменатите модели/стереотипи, можем да предположим, че събитията ще се развият в 2 посоки: или потребителите няма да разберат веднага какво има пред тях, няма да могат да навигирайте в ресурса, те ще бъдат разочаровани и ще го напуснат; или ще се радват да бъдат разсеяни от скучните стандартни решения и ще възприемат този дисонанс с техните очаквания като положително или забавно преживяване.
Реакцията на посетителите силно зависи от това кои са те и от контекста, в който използват вашият уебсайт.
Ако знаете, че посетителите възнамеряват да намерят определена информация, преди да сключат голяма B2B сделка с вас, уверете се, че задоволявате желанието им да видят разпознаваем „типичен“ уеб ресурс.
Ако очаквате посещение от креативната класа, която цени нестандартното мислене, тогава можете да използвате някакъв визуален дисонанс, за да привлечете вниманието на потенциални клиенти.
Уебсайт на агенция за брандиране SubPlot: опростено оформление, но необичайно, забавна и нетрадиционна навигация ангажира посетителите, като същевременно остава лесна за използване
Интонация на комуникацията
Тонът на гласа, използван на вашbzn уебсайт, е важен емоционален фактор. Начинът, по който общувате с потребителите, говори много за отношенията ви с тях. Докато устно им предавате определени послания, вашата интонация показва какво мислите за тях, както и какво искате да мислят за вас - поне според психолога Фридеман Шулц фон Тун (Friedemann Schulz von thun).
Интонацията силно влияе върху първото впечатление от бизнеса. Ако завършите сериозна търговска реклама с хумористична нотка, потребителите може да не ви вземат на сериозно. От друга страна, ако продавате някакви смешни дрънкулки, говорейки за тях с мрачния тон на мениджъра на траурната церемония, също е малко вероятно да бъдете слушани.
Важно е да разберете какво и на кого продавате, както и контекста, в който офертата ще бъде разпространена.
Wufoo владее уникална интонация на гласа
Съпричастност
Удобна целева страница, красива на външен вид и с отлична използваемост - и изведнъж неочаквано висока степен на отпадане и малък брой потенциални клиенти.
Какъв е проблемът тук, обяснява в лекцията си „Изкуството и науката на съблазнителните взаимодействия“ (The Art and Science of Seductive Interactions) уеб дизайнерът и консултант по използваемост Стивън Андерсън (Stephen Anderson).
Силните и дългосрочни взаимоотношения, както и положителното потребителско изживяване, твърди той, могат да бъдат изградени само чрез привличане и ангажиране на хора.
Потребителите са объркани в световната мрежа от доста време. Приемайки го за даденост, те вече не оценяват нещо добро и не се изненадват, когато намерят съдържанието, което търсят.
Сега е време за нещо повече от пасивна консумация. Хората искат да участват, да се забавляват, да се забавляват. Ангажираността може да бъде под формата на игри, социални взаимодействия или персонализиране на съдържание.
Обичаме неща, персонализирани според нашите нужди и интереси, можем да играем браузър игри с часове в социалните медии, аплодираме всяко забавно видео, на което попаднем, докато сърфираме в мрежата, нали?
Разбира се, както във всички горепосочени случаи, как ще ангажирате и в крайна сметка ще конвертирате посетители зависи от целевата аудитория и настройките на рекламната кампания. Ако потребителите просто търсят най-ефективния начин за взаимодействие с вашия сайт, тогава опростете тази процедура до краен предел.
На уебсайта Slavery Footprint посетителите могат да научат за връзката с робството като срамна институция в човешката история по увлекателен и интерактивен начин.
Заключение
Емоционалният дизайн превръща случайните посетители във фанатици, готови да разкажат на другите за положителното си преживяване.
Арън Уолтър
Емоционалният дизайн при създаване на уебсайта има много качества. Ставаме по-креативни, ако попаднем на нещо привлекателно. Креативността прави проблемите по-лесни за възприемане и по-лесни за решаване.
Емоциите осигуряват положителни преживявания, които правят хората по-щастливи и оставят добри спомени.
Норман идентифицира три нива на визуален дизайн въз основа на различни нива на когнитивни процеси: интуитивно (външен вид), поведенческо (използваемост) и рефлексно ниво (лично удовлетворение, самочувствие и памет).
Вътрешните цели на проекта, както и нуждите и очакванията на потребителите, ще определят как дизайнерът балансира определените 3 нива, за да постигне максимална реализация.
Високи реализации за вас!