Эмоциональный веб-дизайн
Шрифт:
Housing Works – некоммерческая организация, цель которой – положить конец СПИДу и бездомности. Каждый день Housing Works меняет чью-то жизнь. Их работа наполнена эмпатией, добротой и верой в обычных людей.
Когда в 2008 году компания Happy Cog создавала новый дизайн сайта Housing Works (рис. 3.8), она черпала вдохновение в специфике организации и индивидуальности работающих в ней людей.
Рис. 3.8. Housing Works
Ден Молл, ведущий дизайнер Housing Works, говорит об этом так:
Очевидно, что сердце Housing Works бьется благодаря людям, которые работают здесь, и тем, для кого они работают. Главное – тепло и забота. Создавать сайт, который вы видите сегодня, следуя этим критериям, было довольно легко.
Большие фотографии на главной странице и цитаты о том, как Housing Works меняет судьбы, формируют связь между посетителями и организацией. Улыбающиеся лица и истории людей сменяют друг друга, помогая сайту получить прекрасные результаты в сфере человеческого общения.
Кадрирование фотографий формирует эмоциональное восприятие. Когда в кадр попадает только лицо человека, зрители сосредоточиваются на нем, и это вызывает у них душевный отклик. Более широкий охват заставляет зрителей обращать внимание не только на лицо, но и на все, что попадает в кадр. Фотографии на странице Housing Works скадрированы так, чтобы взгляд останавливался именно на лицах запечатленных людей, – это заставляет сопереживать им.
Сила индивидуальности
Подобно тому как наша индивидуальность меняется в зависимости от ситуации, в которой мы оказываемся, должна меняться и индивидуальность разрабатываемых нами проектов. Универсального решения не существует. Если мы перестанем думать об интерфейсах как о скучных панелях управления и начнем воспринимать их как людей, с которыми хочет общаться наша целевая аудитория, мы сможем создать прочные эмоциональные связи.
Но необходимо помнить, что подчеркнутая индивидуальность может кому-то не понравиться, и в этом нет ничего страшного. В мире бизнеса, если индивидуальности сталкиваются лбами, эффект может быть положительным. Если люди не понимают вас, вероятно, они просто не ваши клиенты, – соответственно, вы избавляетесь от проблем в будущем, которые могли бы возникнуть при общении с ними. В седьмой главе я расскажу о том, что делать ставку на индивидуальность – это риск, но практика показывает, что он оправдан.
Сделав индивидуальность основой вашего дизайна, вы сможете впоследствии усилить эмоциональное взаимодействие. Об этом – в следующей главе.
4. Эмоциональное взаимодействие
Итак, индивидуальность – отличный способ взаимодействия с аудиторией. Она дает пользователям понять, кто вы, формирует эстетику и интерактивный дизайн сайта.
«Дизайн-образ» из третьей главы – это общая схема для создания эмоционального дизайна. Сейчас по этой схеме, я буду выстраивать структуру взаимодействия, в основе которой лежат психологические принципы, призванные создать у вашей аудитории длительные положительные воспоминания.
Жизнь учит нас анализировать эмоциональные реакции. Как вы реагируете, когда удивлены, когда что-то предвкушаете или когда от вас что-то утаивают? Что вы чувствуете, когда ваш статус повышается
Удивление и радость
Замечали ли вы, что, когда на радио вдруг начинает играть ваша любимая песня, вы испытываете большую радость, чем если бы включили ее сами? Удивление усиливает эмоциональный отклик. Когда вы предвкушаете что-либо, ваши эмоции распределены во времени. Удивление сжимает эмоции до одного мгновения, делая реакцию более интенсивной и оставляя отпечаток в памяти.
Во второй главе говорилось о том, что наше сознание ищет нарушение закономерностей и выделяет когнитивные и визуальные контрастные элементы, с тем чтобы мы могли реагировать соответствующим образом. В момент удивления мы переживаем высококонтрастную ситуацию, которую не могли предсказать. Сюрприз захватывает наше внимание и отсекает лишние детали, оставляя в памяти лишь необычное.
Дизайнеры используют это весьма полезное свойство психики, чтобы распределить внимание и сформировать поведение пользователей. Мы знаем, что пользователи сайтов и приложений быстро обрабатывают информацию и их внимание ограниченно. Элемент неожиданности, встроенный в интерфейс, ломает поведенческую закономерность и заставляет мозг заново считывать ситуацию.
Вслед за удивлением всегда приходит пропорциональный ему эмоциональный отклик. Отследив контраст, мозг должен быстро среагировать. На глубокий анализ нет времени, и мозг вынужден полагаться на эмоции и интуицию. Дизайнеры интерфейсов обожают добиваться подобной реакции пользователей, ведь при правильном подходе она лишает их возможности усомниться в необходимости покупки и отказаться от нее. Однако вы должны помнить, что цель не обмануть или одурачить посетителя – аудитория наверняка поймет подобную игру и не станет доверять вашему бренду. Цель – положительное восприятие нашего бренда, а затем и лояльность.
Photojojo удалось добиться когнитивного кунг-фу удивления и закрепить свой коммерческий успех.
Photojojo: атака услужливых кукол
Photojojo – сайт, который стремится сделать цифровую фотографию более веселой. Его разработчикам удалось добавить в копилку покупательских впечатлений удивление. С развитием Сети дизайн интернет-магазинов становился все более типовым и однообразным – это облегчало пользователям процесс покупки товаров. Делая сюрпризы покупателям, Photojojo полностью изменяет эмоциональную сторону этого процесса – теперь все хотят продолжать шопинг.
На каждой странице Photojojo есть корзина для покупок, дизайнеры наделили ее яркой индивидуальностью. Она серая и грустная – сначала вы не понимаете почему (рис. 4.1), но стоит добавить в нее какой-либо товар, она начинает улыбаться и зеленеет от радости. Оказывается, корзина счастлива только тогда, когда ее брюшко набито товарами, которые вы хотите приобрести.
Рис. 4.1. Корзина Photojojo грустит, пока покупатель не добавит в нее товар, после этого она начинает улыбаться