Следующая статья поможет вам: Наука, лежащая в основе дизайна: 8 психологических принципов, которые стоит применить к вашему следующему проекту
Когда дело доходит до этого, дизайн — это выбор. Каждый цвет, форма, линия, шрифт, текст и графика, которые вы используете, в конечном итоге повлияют на сообщение, которое вы пытаетесь донести.
Я часто разговаривал с людьми, которые знают, что им нужно совершенствоваться в дизайне, но они не чувствуют, что у них есть «природное чутье» к творчеству. Тем не менее, я утверждаю, что обучение хорошему дизайну имеет столько же общего с психологией и поведением пользователей, сколько и с творчеством.
Но изучение “психология дизайна«Это не значит, что нужно взять учебник, который расскажет вам о правильном и неправильном способе проектирования чего-либо. Это просто не работает.
Освежение в памяти психологических принципов (применительно к дизайну) поможет вам понять, что входит в создание интуитивного, преднамеренного опыта проектирования.
Хотите узнать больше? Ниже мы рассмотрим несколько психологических принципов, которые помогут вам запустить колеса.
8 психологических принципов, которые изменят ваш подход к дизайну
1) Ментальные модели
Ученые-компьютерщики и дизайнеры UX много думают и говорят о ментальные модели, потому что процесс разработки чего-то нового — например, макета веб-сайта или нового приложения — требует попытки раскрыть и действовать в соответствии с тем, что пользователи могут счесть интуитивно понятным.
Ментальное моделирование – это процесс составления карты что человек понимает о реальном мире через опыт и воспроизведение этих моделей при проектировании чего-либо в виртуальном пространстве. Это все о попытке раскрыть интуитивный процесс вашей аудитории.
Подумайте о своих компьютерных файлах и папках. Они основаны на том же старомодном методе организации жестких файлов, поэтому пользователю легко понять его, несмотря на то, что визуально он выглядит совсем иначе.
Для дизайнеров понимание того, что такое ментальное моделирование и почему оно важно, сводится к простому проектированию с учетом опыта ваших пользователей.
На протяжении всего процесса проектирования выполняйте «интуитивную проверку». Ваши визуальные эффекты движутся справа налево, сверху вниз? Является ли ваше сообщение ясным и легким для понимания, или оно непреднамеренно скрыто?
Проверка интуиции с другом или коллегой — отличный способ следить за тем, хорошо ли ваше ментальное моделирование работает в ваших проектах.
2) Эффект фон Ресторффа
Эффект фон Ресторффа это, проще говоря, идея о том, что чудак — это тот, кто запоминается.
При разработке иногда вы хотите, чтобы взгляд вашей аудитории был прикован к одному месту, даже если вокруг него есть другие элементы дизайна. Это может означать использование другого цвета, шрифта, размера и т. д.
В этом примере Target Jobs, британский инструмент поиска работы и карьеры, использовал это изображение, чтобы проиллюстрировать, как можно выделиться из толпы на рынке труда. Поместив группу похожих элементов рядом с одним другим элементом (красными туфлями), на этом изображении используется эффект фон Ресторффа, чтобы показать, насколько разные идеи действительно выделяются зрителю.
Хотя идея этого примера довольно проста, вы также можете использовать эффект фон Ресторффа на всех страницах вашего сайта, чтобы привлечь внимание пользователей к определенным местам на странице.
Например, при создании CTA вы можете использовать Von Restorff, чтобы создать контраст на своей странице и привлечь внимание пользователей, например:
3) Гештальт-принципы
Гештальт-психология исследует, как элементы воспринимаются по отношению друг к другу визуально. Принципы гештальта, или законы гештальта, сосредоточены именно на том, как элементы дизайна группируются вместе.
- Близость: Идея о том, что когда объекты расположены в непосредственной близости друг от друга, эти объекты рассматриваются как группа, а не по отдельности. Хотя в логотипе Unilever внутри буквы «U» много фигур, глаз все равно распознает эти объекты как группу, образующую букву «U».
- Сходство: Объекты, внешне похожие, будут восприниматься как один объект или как часть одной группы. В логотипе NBC похожие конусы воспринимаются как группа, потому что они похожи друг на друга.
- Закрытие: Закрытие происходит, когда форма все еще воспринимается как единое целое, даже если объект не полностью закрыт в реальности. В логотипе Girl Scout формы и пробелы используются для создания воспринимаемой серии силуэтов, хотя на самом деле заключены только некоторые из них.
- Непрерывность: Возникает при естественном переходе глаза от одного объекта к другому. Это часто происходит за счет создания изогнутых линий, позволяющих глазу двигаться вместе с линией. В олимпийском логотипе глаз может видеть, что объекты являются непрерывными, поскольку они связаны друг с другом, создавая сгруппированный визуальный эффект.
- Фигура и фон: Когда глаз замечает объект как объект, он отделяет объект (фигуру) от окружающего пространства (земли). В этом логотипе-дани Стиву Джобсу зритель видит белое пространство либо как фигуру, либо как землю, в зависимости от того, смотрит ли глаз на яблоко или на силуэт Стива Джобса.
4) Висцеральные реакции
Вы когда-нибудь сталкивались с веб-сайтом, изображением или чем-либо визуальным, что вам просто инстинктивно нравилось, но вы не всегда могли объяснить, почему? У вас, вероятно, был висцеральная реакция — вид реакции, которая только исходит из кишки.
Дизайн для внутренних реакций — это, по сути, дизайн для создания положительного эстетического впечатления. В какой-то степени нужно просто знать, как выглядит приятный для людей а что нет.
Airbnb использует интуитивный дизайн, чтобы запечатлеть красоту и экзотическую эстетику путешествий. Хотя у большинства сдаваемых в аренду Airbnb, вероятно, нет видов на пляж или красочных номеров, Airbnb использует дизайн, чтобы привлечь внимание своей аудитории и возможность путешествовать по миру.
Дизайн для интуитивного может быть таким же простым, как использование красивых фотографий и красочных изображений, чтобы привлечь внимание вашей аудитории.
5) Психология цвета
Мы часто связываем разные цвета с чувствами или мыслямипоэтому дизайнеры провели много исследований, чтобы выяснить, какие цвета ассоциируются у людей с разным настроением.
Чтобы лучше понять, какие цвета используются для разных настроений, воспользуйтесь отличной инфографикой о психологии цвета. В противном случае, вот основное изложение:
Синий: Надежный, спокойный, честный, надежный, сильный, заботливый
Корпоративный бизнес часто использует синий цвет, чтобы передать нейтральное чувство надежности. Facebookсиняя цветовая схема, например, помогает донести до пользователей, что это безопасная и надежная социальная сеть. Это помогает пользователям чувствовать приватность и безопасность даже при обмене и отображении большого количества личной информации.
Красный: Энергия, любовь, волнение, действие, смелость, страстность
Coca-Cola — один из классических примеров того, как компания использовала красный цвет в своем брендинге, чтобы показать, насколько захватывающим и энергичным является ее продукт.
Апельсин: Счастливая, общительная, дружелюбная, доступная
В HubSpot оранжевый — наш любимый цвет. И неудивительно, почему мы так его любим — он показывает нашей аудитории, как мы рады, что помогаем нашим клиентам улучшать маркетинг.
Желтый: Логичный, оптимистичный, дальновидный, уверенный в себе, игривый
Bzzy, приложение, которое позволяет вам легко автоматически отвечать своим друзьям, когда вы заняты, использует желтую цветовую схему, чтобы передать свой инновационный стиль, сохраняя при этом ощущение игривости.
Фиолетовый: Образный, творческий, ностальгический
Фиолетовая цветовая схема Kaleidoscope помогает передать творческий и полезный характер его приложения: приложение, которое помогает вам быстро и легко сравнивать файлы, когда вам нужно объединить изменения в разных версиях.
Зеленый: Рост, органический, натуральный, заботливый, свежий, земля
Для таких компаний, как Whole Foods, которые хотят подчеркнуть очевидную связь с природой и свежестью, использование зеленого цвета в качестве основы в своей цветовой гамме — не проблема. Зеленый помогает передать чувство естественности и органичности, которое Whole Foods стремится связать со своим брендом.
Черный: Изысканность, роскошь, соблазнительность, формальность, авторитет
Хотите путешествовать в VIP-стиле? 212 Supercars, компания по аренде роскошных автомобилей и услугам водителя, использует элегантный черно-белый дизайн, чтобы сообщить о своем роскошном и эксклюзивном бренде.
Многоцветный: Многоканальный, позитивный, игривый, дерзкий, безграничный
Google, классический пример многоканальной, веселой компании, эффективно сообщает об этом, используя многоцветную схему.
6) Психология форм
Как и цвета, люди связывать различные формы с определенными эмоциями и характеристики.
Хотя это и не является принципом, психология форм сводится к исследованиям, показавшим, какие характеристики людей соответствуют определенным формам.
Круги, овалы и эллипсы: Положительные эмоциональные сообщения, связанные с сообществом, дружбой, любовью, отношениями, единством и женственностью.
Круглый логотип AT&T помогает бренду передать чувство универсальности. Для беспроводной сети это имеет смысл. Использование формы помогает связать аудиторию с узнаваемым рисунком.
Квадраты и треугольники: Стабильность и равновесие, сила, профессионализм, эффективность, мощь и мужественность.
Microsoft и Delta используют в своих логотипах треугольники и квадраты. Это помогает создать ощущение стабильности и эффективности при просмотре логотипа, что является положительным чувством, связанным с брендами.
Вертикальные линии: Мужественность, сила и агрессия.
В то время как основная форма облака логотипа SoundCloud может передавать эмоции, связанные с мечтами и творчеством, вертикальные линии создают более агрессивный вид. Сочетание линий и общей формы облака помогает передать двойственность креатива и силу SoundCloud как инструмента.
Горизонтальные линии: Сообщество, спокойствие и спокойствие.
Кампания за права человека, как организация по защите гражданских прав, является прекрасным примером, который следует учитывать при построении сообщества и мира. А горизонтальные линии/прямоугольники, используемые в логотипе, действительно помогают передать равенство и спокойствие.
7) Теория двойного кодирования
Вы, наверное, уже слышали статистические данные о том, что наш мозг обрабатывает визуальная информация в 60 000 раз быстрее, чем текст. Хорошо, теория двойного кодирования Это идея о том, что как визуальные, так и вербальные сигналы могут представлять идеи, но использование обоих может помочь мозгу быстрее вспомнить эти идеи.
Другими словами, нам нужно зрительная и вербальная информация усваивать и запоминать информацию.
При проектировании это означает как можно больше иллюстрировать идеи, но при этом использовать словесные сообщения для полного объяснения идей.
В приведенном ниже примере на графике показано визуальное буквальное представление, изображающее первичные, вторичные и третичные цвета. Но чтобы полностью понять концепции, необходимо соединить визуальную информацию с письменной (вербальной) информацией. Двойное кодирование — это то, что помогает читателю по-настоящему понять концепцию.
8) Анализ затрат и результатов
Думаем мы об этом сознательно или нет, но каждое решение, которое мы принимаем, проходит через анализ выгоды и затратчто представляет собой просто процесс взвешивания затрат и выгод от действия, прежде чем мы его предпримем.
Если затраты превышают выгоды, мы не предпринимаем никаких действий.
Как дизайнеры, наша работа заключается в том, чтобы убедиться, что все, что мы разработали, имеет преимущества, которые перевешивают затраты. Это означает, что мы делаем наш контент максимально простым для аудитории, но при этом достигаем цели контента.
Подумайте о представлении формы на ваших целевых страницах. Допустим, вы хотите предложить своей аудитории какой-нибудь первоклассный контент, например шаблон или электронную книгу высокого уровня.
Когда вы разрабатываете стратегию, чтобы заставить пользователей заполнять форму, чтобы заявить права на этот контент, вы должны помнить о разработке процесса конверсии с учетом анализа затрат и выгод вашей аудитории. Другими словами, не просите больше, чем вам нужно.