Отрицателното пространство отдавна е основен елемент на добрия дизайн. Оставянето на празно място около елементите на дизайна е първото нещо, което ви идва на ум. Но тогава има дизайни, които използват това празно пространство, за да направят извод за елемент, който всъщност го няма (скритата стрелка между E и X в логото на FedEx веднага ми идва на ум като пример).

„E“ и „x“ в логото на FedEx създават стрелка в отрицателното пространство между тях.

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

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

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

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

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

Сходство

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

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

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

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

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

Продължение

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

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

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

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

Затваряне

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

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

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

Затварянето се използва много често при дизайн на лого, с други примери, включително тези за американската мрежа, NBC, Sun Microsystems и дори Adobe.

Друг много важен пример за затваряне при работа в UX и Проектиране на потребителски интерфейс е, когато се показва частично изображение, което изчезва от екрана на потребителя, за да му покаже, че има още какво да намери, ако плъзнете наляво или надясно. Без частично изображение, т.е. ако се показват само пълни изображения, мозъкът не интерпретира веднага, че може да се види повече и следователно потребителят е по-малко вероятно да превърти (тъй като затварянето вече е очевидно).

Близост

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

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

Вземете например тази група кръгове:

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

PDF от USPS пример за пример, където гещалтният принцип на близостта вреди на UX. Тъй като етикетите на полетата са по-близо до полетата под тях, хората погрешно вярват, че тук информацията се отнася за „c“. y 'd' информацията обаче трябва да се предоставя в полетата над текстовите етикети.

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

Фон на фигурата

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

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

Някои хора веднага ще видят дървото и птиците, когато видят логото на зоологическата градина в Питсбърг и PPG Aquarium, докато други ще видят горилата и лъва, вторачени един в друг.

Друг чудесен пример за принципа гещалт фигура / земя.

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

В тази известна илюзия, разработена от датския психолог Едгар Рубин, зрителят обикновено се представя с две интерпретации на фигури: две лица или ваза. Това е друг отличен пример за принципа фигура / земя.

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

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

Симетрия и ред

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

Ето още един добър пример за принципа на гещалт дизайн ' лаконичност ':

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

Обща съдба

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

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

Ято птици се разглежда като единична единица, когато лети в една и съща посока и следователно споделя обща дестинация. (от Мартин Адамс в Разпръскване )

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

Гещалтови принципи в UX дизайна

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

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