Влијанието на човековото однесување врз вашите одлуки за дизајн - Jonонас Арлет

За да дизајнираме добар распоред на веб, треба да разбереме како се однесуваат луѓето. Користењето на ова знаење за да ги испланирате следните чекори што е можно поудобно е она што го прави дизајнот ефективен.
Но, што влијае на тоа? Како луѓето ја разбираат веб-страницата? Дали постојат познати однесувања што можеме да ги прифатиме од реалниот живот?

Во оваа статија ќе ви кажам:

Како да ги натерате луѓето да разберат распоред кога никогаш порано не го користеле
Кои бои специфично привлекуваат поголемо внимание и зошто ние така ги перцепираме
Колку треба да биде широк блок текст и зошто
Кои анимации ни помагаат на веб-страница
Како можете да осигурите дека важните информации се дефинитивно видени
И како можете да ги зголемите шансите дека дефинитивно ќе се кликне на копче

Слушнете го овој пост како подкаст!

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

За да се постигне голема употребливост, изгледот треба да го задоволи корисникот, пред сè, не вие, тој треба да биде лесен за употреба и посетителот треба да стигне од А до Б без да размисли премногу.

Кога знаеме кој е корисникот и што сака, исто така е полесно да предизвикаме емоции. За да го направите ова, мора да разберете како одредени работи ги чувствуваат луѓето и зошто тие го прават тоа како што го прават тоа. Во најдобар случај, распоредот е дизајниран толку интуитивно што корисникот може да решава задачи без прекини. Задача може да биде навигација, но и процес на нарачка во онлајн продавница.

Штом корисникот ќе почне да размислува подолго, тој исто така почнува да не ги решава задачите интуитивно. Потоа го цедат. Колку повеќе од нив се судираат, толку повеќе станува фрустрирачка нивната поврзаност со производот и затоа со веб-страницата.

Како дизајнери, на нас е да ги запознаеме посетителите со задачи или свесно да ги водиме во една насока. За да го направите ова, мора да знаете како се однесуваат корисниците и работат соодветно на познати работи. Масите знаат како работи веб-страница или апликација. Како и да е, сè уште има голем број луѓе кои немаат идеја како изгледа корисничкиот интерфејс или како да го користат. Познавањето на целната група е од суштинско значење!

Многу е тешко да се донесат одлуки за дизајн кои не се однесуваат само на масите, туку се чувствуваат и индивидуално за секој корисник.

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

Со графички кориснички интерфејс управуваат различни луѓе. Да речеме дека е онлајн продавница. Многумина знаат да купуваат на Интернет, други можеби сè уште не. Но, како натерате сите да ја разбираат страницата брзо и лесно?

Мора да се обидете да ги запознаете со најблиското можно искуство што го знаат од нивниот живот. Дури и ако не знаат како да купуваат производи преку Интернет, тие имаат идеја за тоа како функционира во реалниот живот. Мора да го искористите ова знаење. Затоа е добро да ги пренесете реалните искуства на купувачот на веб-страницата.
На пример, ние сме навикнати да ставаме набавка во корпата за купување. Затоа, треба да користиме нешто слично во онлајн продавница. За корисникот, ова е позната врска што тој веднаш ја разбира.

Еве неколку примери за тоа како можете да го користите дизајнот за да влијаете на елементите на таков начин што корисникот ги разбира на посакуваниот начин.

Користете ги вистинските бои

Боите му помагаат на посетителот да се ориентира на веб-страницата. Особено кога сакаме да поттикнеме некоја акција, тие се совршени за привлекување внимание. Можеме да ги користиме за да активираме активности и свесно да го насочиме погледот во една насока.

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

Кое копче ве привлекува? Пример за тоа како можеме свесно да ги водиме корисниците да донесат одлука.

Само со користење на обоена површина можеме интензивно да го донесеме едно од двете копчиња во преден план. Безбојното копче со сива рамка се појавува незабележително и споредно. Ние секако можеме да ја искористиме оваа варијанта за да им олесниме на корисниците да донесат одлука.

Поголемиот дел од времето, ние сакаме да бидат откриени и активирани копчиња со кликање. Ова е единствениот начин да го водиме корисникот на следниот чекор или да активираме функција. За да може воопшто да се согледа, копчето мора да привлече внимание и да се разликува од другите предмети. Тоа помага да се зголеми контрастот на околните елементи. Во следниот случај, ова го прави црвената боја.

Црвената боја паѓа во очи, е предупредувачка боја за нас и затоа е тешко да се игнорира. Можеме да го искористиме ова за свесно да поставиме акција во преден план:

Свесно насочете ја ориентацијата на корисникот кон копче, како во овој пример со црвената боја. Фаќа око и тешко е да се игнорира како предупредувачка боја.

Да го земеме принципот на семафорот, каде стоиме кога е црвено и смееме да одиме кога е зелено. Многу луѓе веќе го интернализираа овој принцип. Во овој случај, знаеме дека кога станува збор за зелената боја, луѓето го прават следниот чекор. Ова чувство можеме да го пренесеме и на копче каде сакаме да се спроведе акција позитивно.

Како на семафор или одговарање на телефонски повик: Зелената сигнализација и нè придружува да го направиме следниот чекор.

Корисничкиот интерфејс на телефонски повик, исто така, покажува слично однесување. Закачување во црвена и зелена боја се користи за прифаќање. Но, ова внимание се однесува на сите?

Целната публика е клучна!

Дури и ако двата примери погоре звучат веродостојно за нас, тие генерално не се применуваат. Функција за боја на семафор може да работи во Германија, но сепак има многу луѓе од други култури кои различно ги перцепираат боите. Во Кина на пр. Б. веб-страниците се целосно шарени. Ако таму служевме онлајн продавница, тоа веројатно ќе имаше тотално негативно влијание врз нашето однесување на сурфање.

Со цел свесно да се контролира однесувањето на посетителите, распоредот мора да се тестира на целната група. Само преку анализи можете навистина да откриете дали одредена одлука за боја доведе до поголем успех.

Ажурирање:

Интересно, кратко откако ја напишав оваа статија, прочитав објава во која HubSpot ги испита точно овие две бои на тест за корисник. Се работеше на тоа дали црвено или зелено копче предизвикува поголема стапка на конверзија. Целиот распоред беше ист, само едно копче е различно. Изненадувачки, црвената доби 21% повеќе кликови. Но, стануваше збор повеќе за некакво копче „купи ме“, кое едноставно привлече поголемо внимание поради црвената боја.

Следното се однесува на боите воопшто

Потоа, има поголемо внимание и соодветно на тоа повеќе дејствување кога се зголемува контрастот со околните елементи. Не само кај луѓето кои можат да ги согледаат боите, туку и кај оние кои имаат слепи бои.

ПРИЈАВЕТЕ се за мојот весник

Нови написи, епизоди на подкасти и вредни ресурси за дизајн директно до вашето сандаче!

Покрај ажурирањата на моите блогови, еднаш неделно ќе добивате интересни врски и содржини за веб-дизајнери, кои ќе ги споделувам само во овој билтен!

Зголемете ги шансите и понудете два начина до целта

Дали имате задача да го натерате посетителот да изврши одредено дејство? Потоа двојно зголемете ги вашите шанси!

Секој гледа различно на веб-страница, поради што елементите што се видно поставени за вас може да се забележат само на втор поглед. Осигурете се дека одредени инструкции се појавуваат повеќе од еднаш и со тоа ја зголемуваат можноста за посакуван ефект.

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

Постои човечко однесување што го учиме од рана возраст и затоа е втиснато во нашите животи. Кога започнавме да ги поврзуваме буквите и да ги читаме зборовите како реченици, тоа го сторивме од лево надесно од самиот почеток. Промената на ова однесување на веб-страница би била фатална. Никој не можеше правилно да ги чита пасусите и никој не би зборувал за пријатно корисничко искуство. Овој аргумент се однесува на барем повеќето региони (некои исто така читаат од десно кон лево).

Но, не само улогата на читање игра улога. За нас, текстот е полесен за читање дури и ако ширината на пасусите не е премногу широка. Ова му помага на окото да не се лизне при промена на линиите, што обезбедува пријатен проток на читање.

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

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

Пример за слаб проток на читање: Записи на Википедија на поголеми големини на екранот

Дефинитивно негативен пример за ова е Википедија. Ако погледнете статија тука на поголем екран, станува скоро невозможно да се пресели во следната линија. Секоја промена на линијата станува напор.

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

Ако сакаме да се видат важни информации, тогаш поставувањето игра клучна улога. Последното покажување важни работи нема смисла. Знаеме дека на веб-страница се гледа од горе надолу. Само кога некој сака повеќе информации, тој ќе навлезе подлабоко во страницата.

Затоа, информациите на горниот дел се поважни од информациите подолу, бидејќи тие прво се појавуваат откако ќе се вчита страницата. Овој метод го наоѓаме и во други области:

Табела со графикони го покажува најпопуларниот уметник прво, не во средина или последниот
Најрелевантните резултати од пребарувањето секогаш се на прво место
Лого или име на веб-страница обично се поставува горе лево

Ова можеби за некои не изгледа како ново знаење, но сепак треба да сфатите дека ако имате информации што посетителот дефинитивно треба да ги види, треба и да ги поставите повисоко. Само така може да се убеди. Во зависност од кој преглед на уредот, ова видливо поле може да биде различно!

Привлечете внимание преку движење

Анимациите го оживуваат корисничкиот интерфејс. Сè што се движи автоматски го привлекува нашето внимание. Но, внимавајте! Брзо станува премногу!

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

Ефикасно користете го дизајнот

Да се создаде разбирлив и пријатен распоред не е лесно. Потребно е многу искуство, истражување и знаење.

Разбирањето и примената на основите е од суштинско значење за ефективно користење на дизајнот. Примерите погоре ќе ви помогнат во ова. Ако сакате да дознаете повеќе за тоа, можете да се претплатите на мојот билтен тука. Потоа ќе ве известам за нов пост.

Сподели објава:

Дознајте повеќе за веб и UI/UX дизајн и работа како хонорарец

Мојот неделен билтен е најдобриот начин за пристап до најновите објави на блогови, епизоди на подкасти и вредни ресурси за дизајн.