Влиянието на човешкото поведение върху вашите дизайнерски решения - Jonas Arleth

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

В тази статия ще ви кажа:

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

Слушайте тази публикация като подкаст!

Колко успешен е продукт или услуга, зависи от това колко добре разбирате вашата целева група

За да се постигне висока използваемост, оформлението трябва да угоди на първо място на потребителя, а не на вас. Трябва да е лесно за използване и посетителят трябва да стигне от А до Б, без да мисли много.

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

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

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

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

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

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

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

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

Използвайте правилните цветове

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

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

Кой бутон ви привлича? Пример за това как можем съзнателно да насочваме потребителите да вземат решение.

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

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

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

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

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

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

Потребителският интерфейс на телефонно обаждане също показва подобно поведение. Затварянето в червено и зелено се използва за приемане. Но това внимание се отнася за всички?

Целевата аудитория е от решаващо значение!

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

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

Актуализация:

Интересното е, че малко след като написах тази статия, прочетох публикация, в която HubSpot изследва точно тези два цвята в потребителски тест. Ставаше въпрос за това дали червен или зелен бутон причинява по-висок процент на конверсия. Цялото оформление беше същото, само един бутон е различен. Изненадващо, червеното спечели 21% повече кликвания. Но по-скоро ставаше въпрос за един вид бутон „купи ме“, който просто привлече повече внимание поради червения си цвят.

Следното се отнася за цветовете като цяло

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

РЕГИСТРИРАЙТЕ СЕ ЗА МОЯТ БЮЛЕТИН

Нови статии, епизоди на подкасти и ценни дизайнерски ресурси направо във вашата пощенска кутия!

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

Увеличете шансовете и предложите два пътя към целта

Имате ли задачата да накарате посетителя да извърши конкретно действие? След това удвоете шансовете си!

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

Четливостта на текстовете

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

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

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

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

Пример за лош поток на четене: записи в Wikipedia на по-големи размери на екрана

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

Правилно поставяне на важна информация

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

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

Таблица с диаграми показва най-популярния изпълнител първо, а не в средата или последния
Най-подходящите резултати от търсенето винаги са на първо място
Лого или име на уебсайт обикновено се поставят в горния ляв ъгъл

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

Привличайте вниманието чрез движение

Анимациите оживяват потребителския интерфейс. Всичко, което се движи, автоматично привлича вниманието ни. Но внимавайте! Бързо става твърде много!

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

Използвайте ефективно дизайна

Създаването на разбираемо и приятно оформление не е лесно. Необходим е много опит, изследвания и знания.

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

Споделете публикацията:

Научете повече за уеб и UI/UX дизайн и работа като свободна практика

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