Эмоциональный веб дизайн: Читать Эмоциональный веб-дизайн онлайн (полностью и бесплатно)

Читать Эмоциональный веб-дизайн онлайн (полностью и бесплатно)

Аарон Уолтер Эмоциональный веб-дизайн

От партнера российского издания

«Эмоциональный дизайн» – это название сразу заставило меня вспомнить замечательную книгу Виктора Папанека «Дизайн для реального мира» и не менее интересный документальный фильм Гари Хаствита Objectified (я затрудняюсь найти русский аналог этому слову, столь же емкий по смыслу). Мысленно возвращаясь к этим работам и открывая новую книгу с таким многообещающим названием, я предвкушал интереснейшее чтение. И не ошибся.

Надо обладать большим мужеством, чтобы написать книгу о дизайне. Впрочем, одного мужества явно недостаточно – требуются большой и разноплановый опыт, равно как и колоссальная исследовательская работа. Аарон Уолтер мастерски демонстрирует и то и другое. Я настоятельно рекомендую вам читать книгу рядом с компьютером – примеры сайтов, которые вы в ней встретите, полезно увидеть на экране. Их не так много, но все они весьма показательны и дают возможность познакомиться с понятием эмоционального дизайна, рассмотреть его с учетом разных целей, функционалов, заложенных в эти сайты, оценить его с точки зрения привлечения пользователей и способности влиять на процесс принятия решений в разных целевых аудиториях.

С моей точки зрения, изюминка книги – в немногочисленных, но тщательно подобранных примерах, на которых автор обстоятельно и со знанием дела показывает, как средствами дизайна можно создать удобную и уютную атмосферу сайта. Атмосферу, которая с первых же минут располагает к дальнейшему его изучению и вызывает желание воспользоваться продвигаемой услугой, купить предлагаемый товар. Я сам не смог удержаться от искушения и с удовольствием опробовал в действии пару из них. Значит, работает! А это самое главное.

Приятного и полезного вам чтения.

С уважением,Евгений Храмов,директор по развитию,Корпорация РБС

Предисловие

Мы хотим, чтобы наши работы выделялись. Мы хотим, чтобы они производили впечатление, которым хочется поделиться с другими. Мы хотим создавать нечто исключительное.

Часто, желая поразить других, мы добиваемся лишь кратковременного успеха. Одни, создав 30-секундный рекламный ролик, который идет перед трансляцией финала Суперкубка и где персонажи отвечают на звонки преувеличенным «WHA-A-ATS A-A-AWP?»[1], заставляют некоторое время говорить о себе в офисных коридорах. Другие запускают вирусные видео с собаками на скейтбордах. Но кого этим заинтересуешь надолго? Подлинный успех приходит тогда, когда удается создать что-то неординарное, что заставляет людей обсуждать нашу работу недели, месяцы и даже годы. Ведь те, кого нам удалось поразить, еще долго будут говорить об этом. Умение добиваться непреходящего интереса – святой Грааль мира рекламы, где сарафанное радио правит бал. Завоевав внимание как можно большей аудитории, мы видим, как растет наша популярность, а вместе с ней и доходы. И неважно, какую бизнес-модель мы для этого избрали.

Но признания можно добиться, лишь достигнув другой вершины – удовольствия. Ведь один человек посоветует другому только то, что ему по-настоящему понравилось. И если мы хотим добиться стабильного признания, нужно доставить людям такое удовольствие, которое они запомнят надолго.

Объясняя, как разработать дизайн, способный затрагивать наши эмоции, Аарон проделал невероятную работу. Внимайте его словам. Он собрал в одной маленькой книге огромное количество теорий и практических советов. Она поможет вам создать дизайн, который сделает ваш продукт привлекательным. И вы сможете достичь заоблачных высот в вашем бизнесе!

Джаред Спул, CEO[2] и основатель User Interface Engineering

1. Эмоциональный дизайн

Промышленная революция, подпитываемая цепной реакцией идей и инноваций, пронеслась по Западному полушарию в конце XVIII–XIX веках. За это время мы научились превращать полезные ископаемые в станки, сельскохозяйственные машины и транспортные системы – предшественников грандиозных инноваций XX века. Машина для очистки хлопка, паровой двигатель, телеграф и телефон обещали нам будущее, полное новых возможностей и процветания.

Несмотря на то что промышленная революция родилась из утопической веры в прогресс человечества, сам человек нередко оказывался за ее пределами. Ремесленников – кузнецов, сапожников, жестянщиков, ткачей – заменили станки, способные производить больше продукции за меньшие деньги. Машины прочно обосновались в нашем мире, и рука человека все меньше касалась повседневной жизни.

Но были и те, кто противился слепому маршу во имя прогресса. Параллельно с развитием промышленности в середине XIX века возникло движение Arts and Crafts[3]. Его участники стремились сохранить ремесленное производство хотя бы в сфере предметов домашнего обихода. Они ценили вещи, которые проектировали, изготавливали и использовали в повседневной жизни. Они понимали, что мастер вкладывает в изделие частичку себя и этим даром можно наслаждаться многие годы.

Нечто подобное можно встретить и в наши дни. В погоне за большими урожаями и низкими ценами фермерские хозяйства превратились в бездушные корпорации, ставящие прибыль гораздо выше человеческого благополучия. В то же время мелкие фермеры ищут новые рынки, а потребители – продукты питания, произведенные людьми и для людей. Пока гипермаркеты поставляют безликие товары массового потребления, сайты вроде Etsy и Kickstarter позволяют художникам и любителям делать вещи своими руками и продавать собственные изделия. И те имеют спрос. Ведь приобретая работу независимого мастера, вы поддерживаете его творческое мышление, его семью (а не какую-то безликую корпорацию), а взамен получаете возможность жить с вещью, у которой есть история. И это приятно.

Мы, веб-дизайнеры, часто оказываемся в подобной ситуации. Существует масса возможностей быстро и дешево конструировать незамысловатые сайты, не налаживая при этом отношений с аудиторией. Мы могли бы создавать проекты, используя фотографии из стоков, стандартные шаблоны и тексты. Мы могли бы низвести индустрию дизайна до уровня конвейерного производства в духе эпохи промышленной революции. И у такого подхода наверняка найдутся свои поклонники.

Но мы можем пойти и по иному пути – пути художников, архитекторов и дизайнеров Arts and Crafts, которые верили, что человеческий фактор и самореализация – это не просто один из множества способов работать, а насущная необходимость.

С удовольствием сообщаю вам, что многие работники Сети уже встали на верный путь. Дальше я расскажу о приемах, которые создатели эмоционального дизайна используют не только для того, чтобы наладить связь с аудиторией, но и чтобы закрепить свой успех. В основе же всего – идея эмоционального дизайна. Такой дизайн опирается на психологию и творческий подход, его цель – подарить пользователям новые впечатления и создать ощущение, что к ним обращается человек, а не машина.

Мы не сразу поняли, насколько необходим нам эмоциональный дизайн. Чтобы научиться разговаривать с аудиторией по-новому, нам понадобилось время. Раньше мы не нуждались в нем потому, что еще не научились быть собой – мы все еще пытались быть машинами.

Какими мы были

Всемирной паутине далеко не сразу удалось установить эмоциональную связь со своими пользователями. Конечно, за способность объединять людей, находящихся в разных уголках света, она получает свои заслуженные пять баллов. Но корни этой связи всегда были слишком академичны, а потому суховаты. Как только первопроходцы Сети научились их поливать, она сразу же превратилась в благодатную почву для пузырей доткомов[4]. Я помню, как в конце 1990-х писал текст для собственного сайта, используя королевское «мы», пытаясь тем самым создать впечатление, что пишу от лица огромной компании. На самом деле за высокопарными фразами скрывался парень, сидящий в своей спальне в пижаме и мучившийся с html. Я не пытался быть самим собой, я хотел походить на крупных игроков.

Однако в середине 2000-х жизнь в Сети круто поменялась. Все те, кого сократили или уволили, когда пузырь доткомов лопнул, либо создали собственные компании, либо укрылись в своих спальнях и, облачившись в пижамы, принялись создавать новые сайты и приложения.

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

Именно тогда появились Twitter и Facebook, которые полностью изменили принципы общения в Сети. Эти новые социальные инструменты позволили пользователям делиться друг с другом деталями своей повседневной жизни. Возможно, это звучит не слишком серьезно, зато ясно говорит о том, насколько изменилась манера нашего сетевого общения. До появления социальных сетей мы вели себя сухо и строго профессионально, застегивались на все пуговицы. Сегодня наши беседы больше похожи на дружеские, хотя некоторая сдержанность им и не помешала бы.

Эмоциональный веб-дизайн

Надо обладать большим мужеством, чтобы написать книгу о дизайне. Но также требуется большой разноплановый опыт и колоссальная исследовательская работа. Всё это есть у Уолтера Аарона. Он написал замечательную книгу, которая называется «Эмоциональный веб-дизайн».

Однообразие — не лучший инструмент для привлечения клиентов. К сожалению в сети существует множество дешевых незамысловатых  сайтов, которые созданы по шаблону.  Теперь понятно почему они, будучи в разных цветовых гаммах все равно выглядят как строй оловянных солдатиков. Имея яркий и пестрый лик, — они бездушны. Потому что при их клонировании абсолютно не налаживались отношения с аудиторией.

Не у всех есть возможность или желание сделать сайт уникальным. Потому что придумать для него дизайн и в соответствии с макетом грамотно сверстать его требует больших усилий и значительных средств. Кто-то не имеет средств, другому как всегда не хватает времени на реализацию собственного проекта. Всегда находятся дела, поважнее сайта.

Продают эмоции!

Какие существуют механизмы взаимодействия с целевой аудиторией, чтобы расположить сердца клиентов? Чтобы сайт привлекал клиентов, достаточно вызывать положительные эмоции. Удовольствие или удивление в сочетании с неповторимым стилем — это основы эмоционального дизайна.

Познакомиться с понятием «эмоциональный дизайн» можно на примере удачных сайтов.

Как оценить дизайн сайта

Рассматривать эмоциональный дизайн надо с:

1. Учетом разных целей.
2. Функционала, заложенного в сайт.
3. С точки зрения привлечения пользователей.
4. Способности влиять на процесс принятия решений в разных целевых аудиториях.

Что можно достичь с помощью дизайна

Средствами дизайна можно создать удобную и уютную атмосферу сайта, которая с первых же минут располагает к изучению контента и вызывает желание воспользоваться предлагаемыми услугами или купить товар. Сайт должен выделяться, производить впечатление, которым хочется поделиться с другими.

С помощью дизайна мы можем дружески общаться с людьми.

Как разработать дизайн, способный затрагивать наши эмоции

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

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

Вот несколько рекомендаций

1. Делайте сайт личным, не нужно подражать мегакорпорациям. Хорошо, когда у него есть одна отличительная черта – индивидуальность. Потратьте  пару минут на изучение сайта, и вы поймете, что за люди его сделали.  Истинный мастер не просто применяет свои навыки – в его продукте чувствуется прикосновение его рук, его работа излучает тепло.
2. Искренность должна быть главным качеством личности, олицетворяющей ваш бизнес в интернете.
3. Пользователи ждут, что за сайтом на который они пришли, стоит тот, с кем они могут установить эмоциональную связь. И это очень важный и ключевой момент. С помощью шаблонного дизайна установить такую связь будет крайне сложно.
4. Постарайтесь сделать дизайн, который по-человечески индивидуален и в то же время прагматичен.

Дизайн интерфейса — это дизайн для человека, для будущего пользователя вашим сайтом. Очень хорошо иллюстрирует потребности пользователя аналогия пирамиды Маслоу.

Интерфейс:

Elena Schweitzer / Shutterstock.com

Интерфейс должен быть функциональным. Он обязан отвечать потребностям пользователя. Если пользователь не может сделать с его помощью то, что хочет, он не станет тратить своё время.

Интерфейс должен быть надежным.  Если сайт будет работать со сбоями, то пользователи вскоре это поймут и перестанут им пользоваться.

Интерфейс должен быть удобным. Основные задачи должны решаться легко, быстро и не требовать специальных навыков. Запутанная и плохо продуманная структура сайта не сможет удовлетворить потребности пользователя.

Сайт должен быть функциональным, надежным и удобным

Удобство использования, или юзабилити, всегда было краеугольным камнем дизайна интерфейсов. Если вы создали удобный интерфейс, то вы функциональную задачу вы решили. Нужно стремится к тому, чтобы сайт был функционален, надежен и полезен всем, для кого он разрабатывается.

Многие сайты и приложения производят на пользователей хорошее впечатление, потому что позволяют подняться в пирамиде потребностей еще на один уровень – к удовольствию и радости. Представьте себе, что интерфейс одновременно помог вам решить свою задачу и заставил вас улыбнуться. Это было бы замечательно!

Работая над дизайном сайта нужно сосредоточиться на двух вещах – простоте и удобстве использования. Создание простого дизайна, который позволяет легко справляться с любыми задачами — и есть основная задача разработчика.

Простота и практичность — это, конечно, здорово, но мы можно добиться и большего. Дизайн сайта должен дарить радость. Интерфейс должен быть простым и он идеален, если нет ничего лишнего.

Нужно представлять себе людей, для которых вы разрабатываете дизайн. Сделайте их жизнь ярче, светлее, веселее. Дайте им надежду на то, что и в их работе есть повод для радости. И этого уже никто не забудет.

Положительные эмоции могут служить эффективным раздражителем. Они налаживают связь с пользователями, заставляя их переживать опыт. Если вы найдете способ чтобы создать приятное воспоминание, то однозначно не потеряете доверие клиентов.

Если вам удается выйти за пределы строгой функциональности и подарить приятные эмоции, то ваш сервис будет привлекать все больше посетителей и доходы будут расти. Вот почему эмоциональный дизайн так важен для бизнеса.

Чтобы построить эмоциональную связь с аудиторией, нужно продемонстрировать индивидуальность своего бренда. Когда у вашего бренда есть индивидуальность, аудитория чувствует с ним связь, как с живым человеком. Люди хотят строить отношения с реальными людьми. Индивидуальность, в свою очередь,  создает эмпатию и показывает аудитории улучшенную версию самих себя.

Мы запрограммированы искать эмоции в человеческих лицах. По этой причине использованные в дизайне фотографии людей могут влиять на аудиторию.

Иногда мы ощущаем присутствие людей благодаря совершенно абстрактным вещам, например пропорциям. Пифагор и древние греки осознали это, открыв золотое сечение — пропорцию, свойственную многим творениям природы, включая человеческое тело.

Мы можем не осознавать, что золотое сечение присутствует в дизайне таких вещей, как, например, iPod, но наше подсознание сразу замечает идеальные пропорции, присущие и нашему телу.

Золотое сечение

Художники и архитекторы тысячелетиями применяют этот принцип, создавая произведения искусства и архитектуры. Веб-дизайнеры также начали использовать этот принцип. Дуг Бауман делая новый дизайн Twitter размечал страницу по золотому сечению.

Новый дизайн интерфейса Twitter использует золотое сечение для разметки страницы, делая ее более удобной и привлекательной для человеческого глаза.

Читать онлайн «Эмоциональный веб-дизайн» автора Уолтер Аарон — RuLit

Аарон Уолтер

Эмоциональный веб-дизайн

Джейми и Оливеру, подарившим мне самые яркие эмоциональные переживания

От партнера российского издания

«Эмоциональный дизайн» – это название сразу заставило меня вспомнить замечательную книгу Виктора Папанека «Дизайн для реального мира» и не менее интересный документальный фильм Гари Хаствита Objectified (я затрудняюсь найти русский аналог этому слову, столь же емкий по смыслу). Мысленно возвращаясь к этим работам и открывая новую книгу с таким многообещающим названием, я предвкушал интереснейшее чтение. И не ошибся.

Надо обладать большим мужеством, чтобы написать книгу о дизайне. Впрочем, одного мужества явно недостаточно – требуются большой и разноплановый опыт, равно как и колоссальная исследовательская работа. Аарон Уолтер мастерски демонстрирует и то и другое. Я настоятельно рекомендую вам читать книгу рядом с компьютером – примеры сайтов, которые вы в ней встретите, полезно увидеть на экране. Их не так много, но все они весьма показательны и дают возможность познакомиться с понятием эмоционального дизайна, рассмотреть его с учетом разных целей, функционалов, заложенных в эти сайты, оценить его с точки зрения привлечения пользователей и способности влиять на процесс принятия решений в разных целевых аудиториях.

С моей точки зрения, изюминка книги – в немногочисленных, но тщательно подобранных примерах, на которых автор обстоятельно и со знанием дела показывает, как средствами дизайна можно создать удобную и уютную атмосферу сайта. Атмосферу, которая с первых же минут располагает к дальнейшему его изучению и вызывает желание воспользоваться продвигаемой услугой, купить предлагаемый товар. Я сам не смог удержаться от искушения и с удовольствием опробовал в действии пару из них. Значит, работает! А это самое главное.

Приятного и полезного вам чтения.

С уважением,

Евгений Храмов,

директор по развитию,

Корпорация РБС

Мы хотим, чтобы наши работы выделялись. Мы хотим, чтобы они производили впечатление, которым хочется поделиться с другими. Мы хотим создавать нечто исключительное.

Часто, желая поразить других, мы добиваемся лишь кратковременного успеха. Одни, создав 30-секундный рекламный ролик, который идет перед трансляцией финала Суперкубка и где персонажи отвечают на звонки преувеличенным «WHA-A-ATS A-A-AWP?»[1], заставляют некоторое время говорить о себе в офисных коридорах. Другие запускают вирусные видео с собаками на скейтбордах. Но кого этим заинтересуешь надолго? Подлинный успех приходит тогда, когда удается создать что-то неординарное, что заставляет людей обсуждать нашу работу недели, месяцы и даже годы. Ведь те, кого нам удалось поразить, еще долго будут говорить об этом. Умение добиваться непреходящего интереса – святой Грааль мира рекламы, где сарафанное радио правит бал. Завоевав внимание как можно большей аудитории, мы видим, как растет наша популярность, а вместе с ней и доходы. И неважно, какую бизнес-модель мы для этого избрали.

Но признания можно добиться, лишь достигнув другой вершины – удовольствия. Ведь один человек посоветует другому только то, что ему по-настоящему понравилось. И если мы хотим добиться стабильного признания, нужно доставить людям такое удовольствие, которое они запомнят надолго.

Объясняя, как разработать дизайн, способный затрагивать наши эмоции, Аарон проделал невероятную работу. Внимайте его словам. Он собрал в одной маленькой книге огромное количество теорий и практических советов. Она поможет вам создать дизайн, который сделает ваш продукт привлекательным. И вы сможете достичь заоблачных высот в вашем бизнесе!

Джаред Спул, CEO[2] и основатель User Interface Engineering

1. Эмоциональный дизайн

Промышленная революция, подпитываемая цепной реакцией идей и инноваций, пронеслась по Западному полушарию в конце XVIII–XIX веках. За это время мы научились превращать полезные ископаемые в станки, сельскохозяйственные машины и транспортные системы – предшественников грандиозных инноваций XX века. Машина для очистки хлопка, паровой двигатель, телеграф и телефон обещали нам будущее, полное новых возможностей и процветания.

Несмотря на то что промышленная революция родилась из утопической веры в прогресс человечества, сам человек нередко оказывался за ее пределами. Ремесленников – кузнецов, сапожников, жестянщиков, ткачей – заменили станки, способные производить больше продукции за меньшие деньги. Машины прочно обосновались в нашем мире, и рука человека все меньше касалась повседневной жизни.

вернуться

Автор имеет в виду известную серию рекламных роликов пива Bud, герои которых постоянно использовали характерное приветствие. Здесь и далее прим. ред.

вернуться

Chief Executive Officer (англ.) – высшая исполнительная должность в компании. В принятой в России иерархии аналог генерального директора.

Эмоциональный дизайн сайта — правила, инструменты, советы дизайнерам

На этапе разработки макета дизайнеры представляют в голове конечный результат. Они вкладывают в него определённые эмоции, но на практике часто интерфейсы остаются «живыми» только на бумаге.

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

Что такое эмоциональный дизайн

Любой интерфейс должен решать задачи людей. Приложение для чтения новостей и сайт с каталогом врачей несут пользу. Первый продукт даёт доступ к актуальной сводке событий, а второй помогает найти специалиста. Эмоциональный user interface — графический продукт, который сочетает в себе уникальность и удобство. Он позволяет установить прочную связь с аудиторией и привязывает её невидимым нитями к приложению или сайту.

Каждый бэкграунд и экран должны транслировать определённую эмоцию. Для разных продуктов посыл может отличаться: радость, грусть, восторг или злость. Негативные впечатления обычно влияют на аудиторию лучше положительных. Приложение для поиска дома бродячим животным должно вызывать сострадание. Чтобы человеку захотелось вспомнить, кто из знакомых сможет приютить собачку или у него возникло желание помочь самостоятельно.

Специалисты по графике часто говорят, что плохой интерфейс можно определить совокупностью критериев. На самом деле задача сводится к проверке на эмоциональность. Если сайт или приложение не передают эмоций, они бесполезны. Клиент не проникнется сутью продукта, не сможет установить связь с компанией и быстро забудет, что недавно заходил на сайт или устанавливал приложение.

Нет ничего хуже, чем красивая «оболочка» без души. Если оставить интерфейс без эмоций он потеряется в тысячах аналогичных решений конкурентов и не сможет выполнить задачи клиента. Посыл, который транслирует цифровой продукт, закладывается на этапе разработки. Заказчик должен предоставить портрет целевой аудитории и обозначить главные эмоции, которые хочет вложить в сайт или приложение.

Продукт становится «живым» благодаря смыслам, которые закладывает в него дизайнер. Важно понять, что эмоциональность не должна появляться после тестирования интерфейса. Если пользователь не сможет воспользоваться меню или другим элементом управления, он ощутит разочарование и злость, но так не должно быть. Эмоции — часть истории, которую дизайнер передаёт с помощью контента и графики.

Интерфейс выше отлично иллюстрирует задачу эмоционального дизайна. Сайт идеально вписывается в концепцию, согласно которой пользователь взаимодействует с продуктом в зависимости от контекстуальных посылов, заложенных в разных частях UI. Хочется узнать, кто управляет фермой, и сколько животных там обитает.

Как выбрать эмоции для наполнения интерфейса

Главная проблема, которую предстоит решить дизайнеру — правильно передать качества, характеризующие продукт. Обычно на этапе разработки макета клиент предоставляет портрет аудитории: «Разрабатываем приложение для тех, кто интересуется инвестициями в акции. Интерфейс должен быть современным и удобным. Главные эмоции: оптимизм, удовлетворенность и уверенность».

Дизайнер обычно строго выполняет техническое задание и старается не отступать от заявленных условий. В случае с приложением для инвестиций кроме описанных эмоций можно добавить ещё комфорт и расслабленность. Покупка акций через смартфон должна быть чем-то вроде реклакса. Это парадоксально, ведь любые задачи, связанные с деньгами, требуют максимальной концентрации. Аналитики скажут, что пользователь должен быть сосредоточен на покупке или пополнении баланса.

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

Внешний вид приложения криптовалютного кошелька создан идеально. Дизайнер грамотно расставил акценты и максимально адаптировал контент под трансляцию правильных эмоций. Тёмная тема создаёт строгую атмосферу, большая синяя кнопка покупки токенов сразу привлекает внимание. Таким же цветом выделена вкладка с самыми дорогими криптовалютами.

Отдельного внимания заслуживают графики цен, которые отображают последнюю покупку и продажу. В первом случае зелёный символизирует прибыль, а красный убыток. UI максимально строгий и лаконичный. Еще с «порога» люди понимают, что приложением надо пользоваться ответственно и нажимать на кнопку покупки, только при полной уверенности в результате.

Выбрать эмоции, которые будет передавать цифровой продукт легко. Выполните несколько простых действий:

1. Пообщайтесь с клиентом и соберите информацию в целостный образ. Не бойтесь задавать дополнительные вопросы.
2. Посетите ресурсы, на которых обитает целевая аудитория. В случае с приложением для криптовалюты — это форумы инвесторов, группы в социальных сетях, тематические сайты. Узнайте, что волнует пользователей, и какие эмоции они обычно испытывают при взаимодействии с элементами ниши.
3. Станьте на время частью ЦА. Это самый простой способ, который помогает специалистам абстрагироваться от решения задачи. Посмотрите на будущий цифровой продукт глазами тех, кто будет им пользоваться.
4. Посмотрите решения конкурентов и подумайте, какие эмоции они вызывают. Выделите сильные и слабые стороны.
5. Соберите полученную информацию воедино и представьте клиенту своё видение. Расскажите о нестандартных идеях и теориях, которые хотите проверить.

Важно понять, что в большинстве случаев эмоции сложные. Не просто злость или грусть, а смесь разных чувств, которые сложно описать одним словом. Большинство дизайнеров берут базовые ощущения и начинают разработку интерфейса.

Посмотрите, насколько круто специалист по анимации превратил стандартный проект в интерактивный фильм. Сначала пользователи видят красивый дом в горах, а затем маленькую хижину в окружении дикой природы. Динамичный образ работает лучше всяких отзывов и ничем не подкрепленных гарантий. Люди видят, что компания потратила много денег на разработку нестандартного сайта, показывает фотографии из реальных путешествий и заботится о клиентах.

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

Дизайнер выбрал правильные эмоции и смог представить образ в динамике. Сайт состоит из четырех лаконичных и красивых слайдов, которые полностью выполняют поставленную задачу. Необязательно делать длинные лендинги, выкладывать огромные альбомы из путешествий и тратить деньги на вовлекающие описания.

Инструменты эмоционального дизайна

Установить связь с аудиторией помогают разные средства. Разберём основные, чтобы новички могли понять, как действовать и осознали, что интерфейс — не просто набор графических элементов, а «живой» организм. Он работает по определённым условиям, которые задал дизайнер и программист.

Цвет

Цветовая концепция — базовое средство для создания эмоциональной связи. Это фундамент будущего проекта, который будет приносить пользу компании. От правильного выбора цвета зависит, как аудитория воспримет продукт, и какими эмоциями будут заряжаться пользователи.

Красный не всегда отражает агрессию или злость, а зелёный — природу или натуральность. Все зависит от контекста. Если поместить улыбающийся смайлик на красный фон, пользователи испытают смешанные чувства. Позитивные эмоции смешаются с нерелевантным бэкграундом и, скорее всего, они перевесят остальные визуальные средства.

Для установки сильной связи между продуктом и целевой аудитории одного цвета недостаточно. В тоже время от правильного выбора оттенков зависит очень многое. Используйте другие инструменты для усиления связи.

Лица

Некоторые компании скрывают людей, которые работают над проектами. Есть мнение, что потенциальным клиентам не интересно, кто стоит за созданием шампуня или нового торта. Имеет значение только конечный результат, а не человек, который за ним стоит.

Показывать лица определённо стоит, если это уместно в рамках конкретного проекта. Портфолио программиста без фотографии владельца — всё равно, что разговор с незнакомцем. Пользователям придётся додумывать образ самостоятельно, переходить в социальные сети или на форумы за дополнительной информацией. В нишах, где прямой контакт с клиентами стоит на первом месте, обязательно нужно показывать лицо человека, который будет взаимодействовать с аудиторией.

В примере выше видно, что разработчик сосредоточен на решении конкретных задач. Фотография подобрана не совсем удачно, кроме уверенности читается эмоция надменности. При первом знакомстве с сайтом складывается впечатление, что дизайнер и программист Карлос Мендоза чересчур уверен в себе.

Лица можно использовать для решения разных задач. На посадочной странице, продвигающей услуги SEO-специалиста, гармонично впишутся динамичные фотографии, отражающие разные эмоции по мере прокручивания страницы. В первом блоке он будет грустным, потому что предыдущие подрядчики не сделали ничего для успешного продвижения сайта. Во втором — серьёзным и целеустремлённым. В третьем — радостным после повышения трафика проекта.

Слова

Если цвет — это фундамент, а лица — кирпичная кладка, то слова можно представить в виде цементного раствора, надёжно фиксирующего два важных компонента. Правильный текст не даёт визуальному образу развалиться на кусочки и создаёт эффект завершенности.

Текст — важный сигнал, который подсказывает аудитории, что дизайнер хотел показать с помощью цвета и лиц. Слова почти никогда не будут лишними. В примере с проектом по экотуризму хватает и динамичных картинок, но короткий текст усиливает эмоциональность и даёт полезную информацию.

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

Суть проекта для путешественников — максимально вовлечь аудиторию, чтобы получить как можно больше клиентов с активной подпиской. На первом экране пользователей встречает фраза «Не слушайте, что они говорят. Посмотрите своими глазами». Она идеально описывает концепцию тревел ниши. Красивые картинки и захватывающие описания не могут передать эмоции, которые испытывает путешественник во время изучения новых уголков природы.

Если дизайнер научится вкладывать в графические элементы конкретный посыл, он автоматически перейдёт в «высшую лигу». Перестанет быть тем, кто просто разрабатывает проекты по техническому заданию без собственного осмысления. Клиенты от этого только выиграют — они получат вместо красивого интерфейса «воронку», которая будет эффективно засасывать пользователей и не оставят им шанса уйти без конверсий.

6 советов дизайнерам

Эмоциональный дизайн требует максимальной концентрации и работающей интуиции. Специалист должен точно понять атмосферу, которая будет окутывать пользователей в момент знакомства с приложением или сайтом, и воссоздать её по шагам.

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

1. Позаботьтесь об удобстве

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

Если анимация мешает нормальному восприятию информации — удалите её. Старайтесь делать меню и другие важные элементы максимально простыми. Можно добавить красивый эффект появления для навигации, но прятать её за двумя кликами нельзя.

Дашборд в приложении для обучения сделан красочно и просто. На первом месте статистика, отражающая прогресс ученика. Виджеты показывают, сколько курсов в процессе изучения, а сколько уже завершено. Есть минималистичный календарь и наглядный индикатор, отражающий количество закрытых целей.

Приложение красивое и удобное. Интерфейс транслирует правильную эмоцию. Он бросает пользователям вызов и мотивирует на прохождение новых курсов. Человеку хочется закрыть как можно больше программ, чтобы цифры в статистике стали красивыми и открылось новое достижение.

2. Продумайте функциональность

Приложение или сайт должны строиться не только на базе эмоций. Продукт становится бесполезным, если не сможет вовлечь аудиторию в ежедневное использование. В цифровом мире конкуренция зашкаливает и у любого проекта есть всего пара минут, чтобы зацепить пользователя.

Старайтесь создавать интерфейс так, чтобы основное внимание было сосредоточено на полезных свойствах. Иллюстрации, динамика и другие фишки в совокупности не дадут настолько сильных эмоций, как простой механизм, который экономит время пользователей. Например, если человек долго не может выбрать сервис грузоперевозок, а приложение поможет решить эту задачу — он на подсознательном уровне будет вспоминать его каждый раз, когда возникнет аналогичная потребность.

Приложение для заказа еды с первого экрана мотивирует людей расслабиться и просто делать покупки. Мягкая цветовая гамма, тематические иллюстрации и яркие call to action расставляют правильные акценты и создают идеальную атмосферу для шоппинга.

3. Освойте минимализм

Если не можете сконцентрироваться на простых интерфейсах, эмоциональный дизайн — отличная возможность начать обучение с новой силой. Хороший интерфейс показывает людям работу продукта в действии. Пользователям не нужно самостоятельно разбираться в том, как настроить приложение или воспользоваться меню на сайте.

Старайтесь сделать так, чтобы дизайн окутывал продукт и помогал ему раскрываться с правильной стороны. Графическая «оболочка» должна быть не более чем катализатором, который ускоряет процесс знакомства с решением, которое станет повседневным инструментом.

4. Не забывайте про геймификацию

В дизайне и маркетинге уже давно используется понятие «геймификация». Это метод вовлечения, который предполагает общение с целевой аудиторией в форме игры. Людям часто бросают вызов и подогревают интерес различными бонусами. Например, после установки приложений для инвестиций предлагают пройти короткое обучение и начисляют на счёт баллы, которые можно потратить на покупку дешёвых акций.

Главное преимущество геймификации в том, что она работает на любой аудитории. Даже люди, далёкие от игр, вовлекаются в процесс и выполняют все задачи, которые закладывал дизайнер, маркетолог и другие специалисты.

На геймификации строятся все современные сервисы. Когда человек тратит время на длинный пост в Инстаграме и видит ответную реакцию в виде роста подписчиков и новых ответов — он заряжается дофамином и крепко привязывается к платформе. Аналогичным образом спроектированы приложения коммерческих проектов. С сайтами в этом плане сложнее — для развития комьюнити сначала надо дать аудитории весомые бонусы.

5. Познакомьтесь с иммерсивным дизайном

Новое для многих дизайнеров понятие обозначает дизайн, который обеспечивает полное погружение в суть продукта. Эта особенность интерфейса в большей степени лежит в поле ответственности программиста. Благодаря совершенствованию технологий многие операции на смартфонах можно выполнять жестами или даже голосом. Пользователь максимально вовлекается в управление и чувствует себя чуть ли не пилотом самолёта.

Если дополнить эффект погружения красивой анимацией и нестандартными иллюстрациями пользователи будут взаимодействовать с «живым» интерфейсом. Если раньше не сталкивались с концепцией Material Design, обязательно посмотрите нашу статью по этой теме. Дизайнеры Google решили представить графический интерфейс, как объект с физическими свойствами. Иммерсивный дизайн гармонично дополняет эту систему.

6. Добавьте анимацию

Чтобы не говорили скептики, интерактивные интерфейсы всегда работают лучше статических. Анимация оживляет продукт и делает его более интересным.

Можно в очередной раз привести пример с проектом по туризму, который мы показывали в этой статье. За счёт динамичной смены иллюстраций и красивых эффектов потенциальные клиенты максимально вовлекаются в процесс и на подсознательном уровне хотят отправиться в путешествие.

Аналогичный подход успешно используется на сайте с вакансиями в стартапах. На первом экране девушка отчаянно хочет найти работу и кричит о своих способностях. На втором слайде появляется мужчина, который пристально рассматривает детали вакансии. Анимация показывает, что на поиск работы уйдёт мало времени и проект в этом поможет.

Эмоциональный дизайн — основа любого успешного проекта. Дизайнеров, которые могут быстро прочувствовать энергетику продукта и перенести её в цифровой мир, ждёт успех и бесконечный поток клиентов. Компании, которые будут сотрудничать с такими специалистами, смогут многократно увеличить лояльную аудиторию и вырастить адвокатов бренда.

Мы в веб-студии IDBI стараемся сделать всё, чтобы интерфейс вызывал у пользователей правильные эмоции. Посмотрите, насколько точно нам удалось передать сильный характер немецкого бренда Jack Wolfskin в дизайне интернет-магазина.

Читать онлайн книгу Эмоциональный веб-дизайн

сообщить о нарушении

Текущая страница: 1 (всего у книги 7 страниц) [доступный отрывок для чтения: 2 страниц]

Назад к карточке книги

Аарон Уолтер
Эмоциональный веб-дизайн

Джейми и Оливеру, подарившим мне самые яркие эмоциональные переживания

От партнера российского издания

«Эмоциональный дизайн» – это название сразу заставило меня вспомнить замечательную книгу Виктора Папанека «Дизайн для реального мира» и не менее интересный документальный фильм Гари Хаствита Objectified (я затрудняюсь найти русский аналог этому слову, столь же емкий по смыслу). Мысленно возвращаясь к этим работам и открывая новую книгу с таким многообещающим названием, я предвкушал интереснейшее чтение. И не ошибся.

Надо обладать большим мужеством, чтобы написать книгу о дизайне. Впрочем, одного мужества явно недостаточно – требуются большой и разноплановый опыт, равно как и колоссальная исследовательская работа. Аарон Уолтер мастерски демонстрирует и то и другое. Я настоятельно рекомендую вам читать книгу рядом с компьютером – примеры сайтов, которые вы в ней встретите, полезно увидеть на экране. Их не так много, но все они весьма показательны и дают возможность познакомиться с понятием эмоционального дизайна, рассмотреть его с учетом разных целей, функционалов, заложенных в эти сайты, оценить его с точки зрения привлечения пользователей и способности влиять на процесс принятия решений в разных целевых аудиториях.

С моей точки зрения, изюминка книги – в немногочисленных, но тщательно подобранных примерах, на которых автор обстоятельно и со знанием дела показывает, как средствами дизайна можно создать удобную и уютную атмосферу сайта. Атмосферу, которая с первых же минут располагает к дальнейшему его изучению и вызывает желание воспользоваться продвигаемой услугой, купить предлагаемый товар. Я сам не смог удержаться от искушения и с удовольствием опробовал в действии пару из них. Значит, работает! А это самое главное.

Приятного и полезного вам чтения.

С уважением,

Евгений Храмов,

директор по развитию,

Корпорация РБС

Предисловие

Мы хотим, чтобы наши работы выделялись. Мы хотим, чтобы они производили впечатление, которым хочется поделиться с другими. Мы хотим создавать нечто исключительное.

Часто, желая поразить других, мы добиваемся лишь кратковременного успеха. Одни, создав 30-секундный рекламный ролик, который идет перед трансляцией финала Суперкубка и где персонажи отвечают на звонки преувеличенным «WHA-A-ATS A-A-AWP?» 1

  Автор имеет в виду известную серию рекламных роликов пива Bud, герои которых постоянно использовали характерное приветствие. Здесь и далее прим. ред.

[Закрыть], заставляют некоторое время говорить о себе в офисных коридорах. Другие запускают вирусные видео с собаками на скейтбордах. Но кого этим заинтересуешь надолго? Подлинный успех приходит тогда, когда удается создать что-то неординарное, что заставляет людей обсуждать нашу работу недели, месяцы и даже годы. Ведь те, кого нам удалось поразить, еще долго будут говорить об этом. Умение добиваться непреходящего интереса – святой Грааль мира рекламы, где сарафанное радио правит бал. Завоевав внимание как можно большей аудитории, мы видим, как растет наша популярность, а вместе с ней и доходы. И неважно, какую бизнес-модель мы для этого избрали.

Но признания можно добиться, лишь достигнув другой вершины – удовольствия. Ведь один человек посоветует другому только то, что ему по-настоящему понравилось. И если мы хотим добиться стабильного признания, нужно доставить людям такое удовольствие, которое они запомнят надолго.

Объясняя, как разработать дизайн, способный затрагивать наши эмоции, Аарон проделал невероятную работу. Внимайте его словам. Он собрал в одной маленькой книге огромное количество теорий и практических советов. Она поможет вам создать дизайн, который сделает ваш продукт привлекательным. И вы сможете достичь заоблачных высот в вашем бизнесе!

Джаред Спул,CEO 2

  Chief Executive Officer (англ.) – высшая исполнительная должность в компании. В принятой в России иерархии аналог генерального директора.

[Закрыть]

и основатель User Interface Engineering

1. Эмоциональный дизайн

Промышленная революция, подпитываемая цепной реакцией идей и инноваций, пронеслась по Западному полушарию в конце XVIII–XIX веках. За это время мы научились превращать полезные ископаемые в станки, сельскохозяйственные машины и транспортные системы – предшественников грандиозных инноваций XX века. Машина для очистки хлопка, паровой двигатель, телеграф и телефон обещали нам будущее, полное новых возможностей и процветания.

Несмотря на то что промышленная революция родилась из утопической веры в прогресс человечества, сам человек нередко оказывался за ее пределами. Ремесленников – кузнецов, сапожников, жестянщиков, ткачей – заменили станки, способные производить больше продукции за меньшие деньги. Машины прочно обосновались в нашем мире, и рука человека все меньше касалась повседневной жизни.

Но были и те, кто противился слепому маршу во имя прогресса. Параллельно с развитием промышленности в середине XIX века возникло движение Arts and Crafts 3

  Arts and Crafts – движение «искусств и ремесел», возникло в XIX столетии в Англии. Одним из его основоположников был художник Уильям Моррис.

[Закрыть]. Его участники стремились сохранить ремесленное производство хотя бы в сфере предметов домашнего обихода. Они ценили вещи, которые проектировали, изготавливали и использовали в повседневной жизни. Они понимали, что мастер вкладывает в изделие частичку себя и этим даром можно наслаждаться многие годы.

Нечто подобное можно встретить и в наши дни. В погоне за большими урожаями и низкими ценами фермерские хозяйства превратились в бездушные корпорации, ставящие прибыль гораздо выше человеческого благополучия. В то же время мелкие фермеры ищут новые рынки, а потребители – продукты питания, произведенные людьми и для людей. Пока гипермаркеты поставляют безликие товары массового потребления, сайты вроде Etsy и Kickstarter позволяют художникам и любителям делать вещи своими руками и продавать собственные изделия. И те имеют спрос. Ведь приобретая работу независимого мастера, вы поддерживаете его творческое мышление, его семью (а не какую-то безликую корпорацию), а взамен получаете возможность жить с вещью, у которой есть история. И это приятно.

Мы, веб-дизайнеры, часто оказываемся в подобной ситуации. Существует масса возможностей быстро и дешево конструировать незамысловатые сайты, не налаживая при этом отношений с аудиторией. Мы могли бы создавать проекты, используя фотографии из стоков, стандартные шаблоны и тексты. Мы могли бы низвести индустрию дизайна до уровня конвейерного производства в духе эпохи промышленной революции. И у такого подхода наверняка найдутся свои поклонники.

Но мы можем пойти и по иному пути – пути художников, архитекторов и дизайнеров Arts and Crafts, которые верили, что человеческий фактор и самореализация – это не просто один из множества способов работать, а насущная необходимость.

С удовольствием сообщаю вам, что многие работники Сети уже встали на верный путь. Дальше я расскажу о приемах, которые создатели эмоционального дизайна используют не только для того, чтобы наладить связь с аудиторией, но и чтобы закрепить свой успех. В основе же всего – идея эмоционального дизайна. Такой дизайн опирается на психологию и творческий подход, его цель – подарить пользователям новые впечатления и создать ощущение, что к ним обращается человек, а не машина.

Мы не сразу поняли, насколько необходим нам эмоциональный дизайн. Чтобы научиться разговаривать с аудиторией по-новому, нам понадобилось время. Раньше мы не нуждались в нем потому, что еще не научились быть собой – мы все еще пытались быть машинами.

Какими мы были

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

  Пузырь доткомов – стремительный рост капитализации интернет-бизнесов в период с 1995 по 2000 год. Лопнул 10 марта 2000 года, когда произошло обвальное падение индекса высокотехнологичных компаний NASDAQ. В результате сотни интернет-компаний обанкротились, были ликвидированы или проданы.

[Закрыть]. Я помню, как в конце 1990-х писал текст для собственного сайта, используя королевское «мы», пытаясь тем самым создать впечатление, что пишу от лица огромной компании. На самом деле за высокопарными фразами скрывался парень, сидящий в своей спальне в пижаме и мучившийся с html. Я не пытался быть самим собой, я хотел походить на крупных игроков.

Однако в середине 2000-х жизнь в Сети круто поменялась. Все те, кого сократили или уволили, когда пузырь доткомов лопнул, либо создали собственные компании, либо укрылись в своих спальнях и, облачившись в пижамы, принялись создавать новые сайты и приложения.

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

Именно тогда появились Twitter и Facebook, которые полностью изменили принципы общения в Сети. Эти новые социальные инструменты позволили пользователям делиться друг с другом деталями своей повседневной жизни. Возможно, это звучит не слишком серьезно, зато ясно говорит о том, насколько изменилась манера нашего сетевого общения. До появления социальных сетей мы вели себя сухо и строго профессионально, застегивались на все пуговицы. Сегодня наши беседы больше похожи на дружеские, хотя некоторая сдержанность им и не помешала бы.

Занавес над нашей жизнью поднимается, и мы видим радость, беспокойство, подавленность и остальные эмоции, которыми наполнены наши дни. В третьей главе я расскажу о том, что искренность должна быть главным качеством личности, олицетворяющей наш бизнес в Сети. Ведь пользователи ждут, что за сайтами и приложениями, которые они посещают, стоит тот, с кем они могут установить эмоциональную связь.

В этой книге вы найдете много примеров дизайна, который по-человечески индивидуален и в то же время прагматичен. Возможно, сейчас вы буквально трепещете от волнения, не зная, как начать следовать принципам эмоционального дизайна, не раздражая при этом своего начальника. Я рассмотрю проверенные на деле образцы, которые помогут вам обосновать идею внедрения эмоционального дизайна в вашем очередном проекте, и поделюсь информацией, которая подтвердит его эффективность. Помните, что мы не должны идти по ложному пути и игнорировать простые человеческие потребности. С помощью дизайна мы можем дружески общаться с людьми.

Итак, с чего начать? Как и любой хороший дизайнер интерфейсов 5

  В оригинале: user experience designer. В буквальном переводе – дизайнер пользовательского опыта. Термин user experience в широком смысле означает ощущения, возникающие у человека при непосредственном взаимодействии с объектами окружающего мира. В настоящее время в сфере информационных технологий сложилась практика перевода данного термина как «опыт взаимодействия». Это понятие применяется для описания ощущений и реакции пользователей при посещении сайта, работы с приложением и т. п. В данном контексте речь идет о разработке дизайна интерфейса.

[Закрыть], начну с рассмотрения потребностей тех, для кого мы создаем дизайн.

Хеллоу, Маслоу

В 1950–1960-е годы американский психолог Абрахам Маслоу открыл то, что мы все знали, но не могли сформулировать: независимо от пола, возраста, расы или статуса все мы имеем базовые потребности, которые необходимо удовлетворять. Свою идею Маслоу представил в виде так называемой пирамиды потребностей ( рис. 1.1).

^{Рис. 1.1.Пирамида потребностей Маслоу}

Маслоу подчеркивал, что в первую очередь нужно удовлетворить расположенные в основании пирамиды физиологические потребности: в отсутствие возможности дышать, есть, спать и справлять нужду все остальное теряет смысл. Когда эти потребности удовлетворены, появляется необходимость чувствовать себя в безопасности: мы не можем быть счастливы, если боимся получить увечья, потерять семью, имущество или работу. Кроме того, нам нужно чувствовать связь с другими людьми, чувствовать себя любимыми. Удовлетворение этих потребностей позволяет нам попасть на следующий уровень, где располагаются самоуважение и уверенность в себе, столь необходимые для достижения успеха. Пирамиду Маслоу венчает важная категория – самореализация. Когда все базовые нужды удовлетворены, мы чувствуем потребность в творчестве, интеллектуальном и духовном развитии. То, как Маслоу выстраивает иерархию базовых потребностей человека, помогает нам понять наши цели при проектировании интерфейсов. Мы могли бы довольствоваться и тремя нижними ступенями пирамиды – физиологическим комфортом, безопасностью и признанием, но только верхний уровень делает нашу жизнь полноценной. Дизайн интерфейса – это дизайн для человека, в данном случае для пользователя. Попробуем выстроить потребности пользователя наподобие пирамиды Маслоу, и вот что получится ( рис. 1.2).

^{Рис. 1.2.Переименовываем ступени пирамиды Маслоу в соответствии с нуждами наших пользователей}

Освоить основы

Интерфейс должен быть функциональным.Он обязан отвечать потребностям пользователя. Если пользователь не может сделать с его помощью то, что хочет, он не станет тратить на приложение время. Помните, как Apple выпустила Ping? Она пыталась построить социальную сеть вокруг музыкальной библиотеки iTunes. Попытка завершилась провалом, во многом потому, что пользователи не могли обмениваться композициями с друзьями в Twitter и Facebook. Они быстро поняли, что в новой системе нет интересующих их функций, ушли и больше не вернулись.

Интерфейс должен быть надежным.Помните, как пользователи Twitter ненавидели кита, появление которого означало, что сервер перегружен или недоступен? Если сервер время от времени падает, то пользователи покинут его.

Интерфейс должен быть удобным.Основные задачи должны решаться легко, быстро и не требовать специальных навыков. Вы пытались хоть раз купить билет на самолет онлайн? Если да, ставлю пять баксов на то, что всякий раз, ожидая, пока сайт загрузится, вы с трудом сдерживали поток ругательств. И не вы одни. К счастью, компания Hipmunk ( http://hipmunk.com) выпустила на рынок новую панель инструментов для бронирования билетов онлайн.

Исторически сложилось, что удобство использования, или юзабилити 6

  Юзабилити – в буквальном переводе «возможность использования». Понятие, обозначающее уровень удобства предмета (в первую очередь утилитарного, а не эстетического) для использования в заявленных целях.

[Закрыть], всегда было краеугольным камнем дизайна интерфейсов. Если вы создали удобный интерфейс, то ваши шансы на успех высоки. Но представьте себе, что по тем же меркам живет автопром… Мы бы до сих пор мечтали об AMC Pacer 7

  AMC Pacer – инновационная модель, созданная компанией American Motors Corporation (AMC) в марте 1975 года. Позиционировалась как «первый широкий маленький автомобиль», не уступающий по уровню комфорта своим полноразмерным собратьям. Машина имела очень необычный, футуристический для тех лет дизайн – округлые формы и большую площадь остекления.

[Закрыть]1978 года выпуска.

Многие сайты и приложения производят на пользователей хорошее впечатление, потому что позволяют подняться в пирамиде потребностей еще на один уровень – к удовольствию и радости. Представьте себе, что интерфейс одновременно помог вам решить свою задачу и заставил вас улыбнуться. Это было бы круто! И уж точно стоит того, чтобы об этом рассказать друзьям. Нам нужны новые критерии оценки качественного дизайна. Чтобы произвести на пользователя действительно незабываемое впечатление, потребуется выйти за пределы удобства использования.

Удобный = съедобный

Если вы много работаете в Интернете, то, возможно, уже пользуетесь удобным приложением Basecamp ( http://basecamphq.com), разработанным компанией 37Signals ( рис. 1.3).

^{Рис. 1.3.Basecamp – приложение для управления проектами}

Работая над ним, дизайнеры 37Signals сосредоточились на двух вещах – простоте и удобстве использования. Их идеи, собранные на сайте Getting Real ( http://bkaprt.com/de/2), уже вдохновили целое поколение веб-разработчиков на создание простого дизайна, который позволяет легко справляться с любыми задачами.

37Signals помогла нам преодолеть нижнюю ступеньку пирамиды. Стремясь к простоте и спартанскому дизайну, эта компания создала эталон функционального, надежного и удобного веб-приложения. Несмотря на просьбы пользователей о новых функциях или изменениях в технологическом процессе, Basecamp остался верен своей первоначальной идее. В этом его сила и слабость. За годы работы их интерфейс существенно менялся всего несколько раз, потому-то он предсказуем, удобен и пользователю легко его освоить. Но если интерфейс не развивается, появляется риск потерять связь с потребностями пользователей. То же происходит и с дизайном. Несмотря на то что дизайнеры 37Signals многому нас научили, за последние годы изменились и сама Сеть, и наше отношение к ней. Простота и практичность – это, конечно, здорово, но мы можем добиться и большего. Наш веб-дизайн должен дарить радость.

Вспомните обед, который вам понравился больше всех других. Не просто хороший, а поражающий воображение, изменяющий сознание обед, в который вы влюбились. Что вам запомнилось больше всего? Оформление блюд? Необычное сочетание вкусов? Внимательные официанты, приятное окружение? Скорее всего, такие сильные эмоции вызвало сочетание всех этих факторов. А теперь попробуйте вспомнить, приходила ли вам в голову мысль о питательной ценности поданных блюд? Сомневаюсь (в противном случае вам нужно чаще бывать на свежем воздухе). Обед удовлетворил ваши физиологические потребности, но запомнилось удовольствие.

Почему бы и нам не стремиться к тому же в дизайне? Прежде мы разрабатывали практичные интерфейсы точно так же, как повара готовили съедобную пищу. Конечно, все мы хотим, чтобы еда была питательной, но вкус для нас важен не меньше. Так почему мы довольствуемся удобством использования, если интерфейс может быть одновременно и удобным, и приятным?

Взять, к примеру, Wufoo – компанию, которая создает не только удобный, но и веселый интерфейс.

Wufoo: больше чем польза

Wufoo ( http://wufoo.com/) – популярное сетевое приложение, позволяющее людям создавать веб-страницы со специальными формами и подключать их к базам данных. Wufoo применили эмоциональный дизайн непосредственно к интерфейсу ( рис. 1.4). Подобно Basecamp, Wufoo – практичное приложение. Его пользователи хотят, чтобы все работало быстро. Создание баз данных и проектирование форм не самый простой процесс, если вы не слишком компетентны в технических вопросах. Однако Wufoo позволяет справиться с этой задачей легко и, в отличие от их конкурентов, весело.

^{Рис. 1.4.Wufoo – практичное и веселое приложение для разработки веб-страниц}

Интерфейсы Wufoo просты, в них нет ничего лишнего. Несмотря на то что приложение предоставляет продвинутым пользователям весьма серьезные рабочие инструменты, оно не отпугивает и менее компетентных, тем самым сохраняя равновесие, позволяющее компании не застрять в узкой потребительской нише. Миллионы пользователей создают свои веб-формы, и я утверждаю, что работать с Wufoo надежно. Подобно Basecamp, компания стремится к тому, чтобы ее продукты были функциональны, надежны и полезны всем.

Но у Wufoo есть одна отличительная черта – индивидуальность. Потратьте на изучение приложения пару минут, и вы поймете, что за люди его сделали. Это читается между строк. Верх приборной панели украшает шекспировская строчка «О, на что только не осмеливаются люди!» Над примером, который можно подогнать под свои требования, написано: «Это пустая страница. Заполните ее, пожалуйста. Она шикарная!» Обратите внимание на цвета и шрифты без засечек, создающие неформальную обстановку. Углы всех элементов сглажены, что производит мультяшное впечатление. Даже если вы никогда не встречались с разработчиками приложения, вы словно читаете их мысли, которые находят продолжение в дизайне: «Wufoo – всего лишь софт, но посмотрите, какой он человечный и обаятельный».

Разрабатывая концепцию софта, один из основателей Wufoo, ведущий дизайнер пользовательских интерфейсов Кевин Хейл, не оставил без внимания эмоциональную сторону дела:

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

Кевин представлял себе людей, для которых он разрабатывал дизайн. Это люди, работающие в тесных офисных отсеках и находящиеся под постоянным прессингом начальства. Им нужно собирать информацию, у них постоянно горят сроки, и рутинная работа их не вдохновляет. Созданное Кевином приложение дает пользователям надежду на то, что и в их работе есть повод для радости. Оно способно сделать серые, холодные рабочие места более теплыми и уютными. И этого точно никто не забудет.

Wufoo создали настоящие мастера своего дела, но сейчас я говорю не о технической стороне. Истинный мастер не просто применяет свои навыки – в его продукте чувствуется прикосновение его рук, его работа излучает тепло. Можно долго перечислять элементы дизайна, составляющие неповторимый стиль Wufoo, но в данном случае целое больше, чем сумма слагаемых. В четвертой главе я расскажу о том, как Wufoo использует эмоциональную связь, чтобы произвести глубокое впечатление на клиентов. Конечно, в основе того, что они делают, лежат научные идеи. Например, что эмоции и память тесно связаны между собой.

Эмоции и память

Переживания оставляют глубокий след в нашей памяти. Эмоции и воспоминания возникают и хранятся в лимбической системе, которая представляет собой совокупность отделов головного мозга. В книге Brain Rules («Правила мозга») биолог Джон Медина рассказывает о связи между эмоциями и памятью:

Эмоционально окрашенные события гораздо дольше хранятся в памяти и вспоминаются более детально, чем нейтральные.

Как это происходит в нашем мозге? Свою роль в этом играет префронтальная область коры головного мозга, отвечающая за такие функции, как решение проблем, управление вниманием и подавление эмоциональных импульсов. И если префронтальный кортекс – это генеральный директор мозга, то поясная извилина 8

  Часть лимбической системы, отвечающая за регуляцию сердцебиения и кровяного давления.

[Закрыть] – его личный помощник. Помощник предлагает руководителю фильтровать информацию и помогает организовывать телеконференции с другими частями мозга, особенно с мозжечковой миндалиной, участвующей в управлении эмоциями. Мозжечковая миндалина заполнена нейротрансмиттером дофамином, который она использует так же, как ассистент – листочки post-it. Когда мозг обнаруживает вызвавшее эмоции событие, миндалина выделяет дофамин, который способствует запоминанию и переработке информации. Иными словами, она пишет на листочке «Запомни это!». Как только мозг прикрепит этот листок с напоминанием к определенной информации, она будет обрабатываться более тщательно. А это как раз то, чего добивается каждый родитель, учитель и руководитель.

Мистер Медина, добавьте в этот список и дизайнеров!

Причина, по которой эмоции и память так тесно связаны, весьма практична: это сохраняет нам жизнь. Не имея возможности запоминать, мы были бы обречены раз за разом сталкиваться с негативным опытом и не могли бы использовать положительный опыт. Представьте, что вы съели вкуснейший килограммовый кусок бекона, а на следующий день забыли его восхитительный вкус. Такую жизнь, друг мой, не стоило бы проживать.

Еще в младенческом возрасте мы формируем эмоциональную связь с родителями: когда мы плачем, а родители в ответ предлагают нам еду, чистый подгузник или нежное прикосновение, их реакция вынуждает наш мозг вбрасывать в кровь успокаивающие нейротрансмиттеры. Цикл повторяется, и мы начинаем верить в то, что родители будут реагировать на нас каждый раз, когда мы будем в них нуждаться. В результате в нашем мозгу формируется эмоциональная связь.

Подобный цикл имеет место и в дизайне интерфейсов. Положительные эмоции могут служить эффективным раздражителем. Они налаживают связь с пользователями, заставляя их переживать опыт, похожий на разговор с близким другом. Может показаться, что особый дизайн и тексты в Wufoo – всего лишь хитрый трюк, но на самом деле речь идет о работе напрямую с мозгом. Это способ создать приятное воспоминание и увеличить вероятность того, что пользователи не перестанут доверять Wufoo и не изменят ему. Вскоре вы убедитесь, что к такому же выводу пришли разработчики многих сайтов и приложений. Они поняли, что, если им удается выйти за пределы строгой функциональности и подарить приятные эмоции, их сервис будет привлекать все больше посетителей и их доходы будут расти. Эмоциональный дизайн полезен для бизнеса. Именно так говорит Крис Линдленд, СЕО магазина модной одежды для людей с чувством юмора Betabrand ( рис. 1.5). На сайте Betabrand ( http://betabrand.com) выложены материалы, на чтение которых уходит примерно тридцать минут, а также отличная галерея супергероев-любителей, демонстрирующих невероятную одежду. Это очень большой объем контента. Линдленд описывает Betabrand как онлайн-журнал, который торгует одеждой. Вещи играют роль артефактов или напоминания о времени, проведенном на сайте. Надевая пару штанов марки Cordaround, вы наслаждаетесь не только уникальными характеристиками ткани – вы становитесь членом тайного общества, открывшего для себя это чудо моды и новейших технологий.

^{Рис. 1.5.Betabrand видит себя онлайн-журналом, который вдобавок продает одежду. К тому же она может «снизить коэффициент сопротивления ткани» на поразительные 16,24 %}

У каждой вещи есть своя веселая история, и Линдленд уверен, что радость, которую он дарит людям, превращается в доход от продаж и экономию на маркетинге.

Информация о веселых вещах и впечатлениях быстро и бесплатно путешествует по Сети. Люди задумываются: «А почему бы нет?» Они чувствуют потенциал вещей, о котором приятно говорить.

Связь между эмоциональным дизайном и коэффициентом окупаемости инвестиций (ROI) будет рассмотрена в седьмой главе. Но прежде чем обратиться к данным, давайте посмотрим на принципы дизайна, обеспечивающие успех Betabrand.

Назад к карточке книги «Эмоциональный веб-дизайн»

Библиотека стартапера: «Эмоциональный веб-дизайн»

Ладно бы такой ужас творился только в сфере госструктур. Но слова вроде «юзабилити» и «человекопонятные адреса» остаются тайной за семью печатями для — казалось бы — неглупых и современных людей, занимающих руководящие посты в банках, финансовых учреждениях, стартап-фондах. Чем дальше начальник от понятия «удобного сайта», тем более немыслимые требования к веб-дизайну он выдвигает. Попробуем победить это неизбежное зло при помощи книги, которая сегодня лежит на полке в «Библиотеке стартапера».

В наше поле зрения попала книга Аарона Уолтера Designing For Emotion («Эмоциональный веб-дизайн»), которая хоть и вышла на русском языке 2 года назад, но своей актуальности не потеряла. Дело даже не в том, что 80% сайтов Рунета не вызывает никаких эмоций (или вызывают глухое раздражение) при их постоянном использовании. Сам автор тоже человек далеко не безызвестный: это его стараниями онлайн-сервис для рассылок MailChimp обрел тот внешний вид, который теперь всем нам привычен. Да, обезьянка-почтальон и прочие «фишки» — тоже результат работы Аарона Уолтера. На момент написания своей книги о веб-дизайне он не только был дизайнером-практиком, но еще и преподавал в штате Джорджия.

В чем польза

Сразу предостерегу: это — не трактат о веб-дизайне. Тонкая книга в гибкой обложке, которая читается за 1 день, не предусматривает раскрытия сокровенных тайн веб-дизайна. Зато в ней простым и доступным языком, с  множеством примеров и конкретных ссылок рассказано тем, кто до вчерашнего дня вообще никакого понятия о веб-дизайне не имел, почему ваш сайт стоит изменить.

Отдадим должное Аарону: он весьма просто сумел показать, как отличить положительно принимаемый публикой сайт от безликой «конвеерной» штамповки сайтов под заказ. Но «Эмоциональный веб-дизайн» лично я рекомендовал бы не для студий или агентств. Она — для менеджеров, которые принимают решения, ничего не понимая в веб-дизайне и при этом «зарубив» на корню блестящие идеи в угоду тому, что «все делают». Аарон Уолтер рассказывает и показывает, как делать не стоит, как — наоборот стоит. И в итоге — как сделать ваш сайт приятным, быстрым, удобным и продающим.

5 главных уроков

1. Эксперименты в области эмоций и дизайна начались еще во времена Гутенберга с выпуском первой печатной книги. Именно он придумал шрифт, максимально похожий на почерк монахов, которые раньше переписывали книги.

2. Антропоморфность используемых на сайте персонажей, схожесть их черт с лицом ребенка, просто человеческие лица в оформлении сайта — те элементы, благодаря которым и можно привлечь внимание. Все они помогают продавать готовый продукт посредством вашего сайта.

3. Не забывайте о золотом сечении: его используют все успешные ИТ-компании.

4. Важный элемент — контрастный минимализм. Так вы точно сможете выделиться в «толпе» одинаковых веб-сайтов. В свое время по этому пути пошли в команде целого ряда стартапов — и не прогадали.

5. Разрабатывая новый сайт, помните о множественных рисках, связанных с использованием юмора, различных графических элементов, сочетанием разных технологий и дизайнерских решений. И не забывайте: ни одна книга и ни один специалист не даст вам унив

РЕЦЕНЗИЯ: «Эмоциональный веб-дизайн» — покажите это вашему начальнику

Давайте признаем: веб-дизайн большинства сайтов государственных структур и учреждений откровенно печален. Причем печален он не потому, что на разработку этих сайтов не выделили денег. Наоборот: некоторые госзаказы на разработку сайтов поражают воображение озвученной суммой для победителя такого тендера. Дело в другом.

«Юзабилити» — понятие, незнакомое большинству тех, кто принимает решение в госструктурах относительно облика и функционального удобства веб-ресурсов. И как ни прискорбно, даже во многих коммерческих структурах директор / начальник отдела очень «далек» от понятия «удобный сайт». Как можно изменить эту укоренившуюся тенденцию (в особенности — если вы сами понимаете, что должно быть / чего не должно быть на сайте для широкой аудитории)? Книга, о которой речь пойдет сегодня, может стать первым шагом для изменения устоявшегося вокруг нас «совкового» подхода к веб-дизайну как таковому.

Главное о книге

Сегодня на моем столе — «Эмоциональный веб-дизайн», книга Аарона Уолтера, переведенная Павлом Мироновым и увидевшая свет на русском языке в 2012 году благодаря издательству «Манн, Иванов и Фербер». Аарон Уолтер вам, может быть, и не знаком, зато все (или практически все) читатели «Лайфхакера» хотя бы раз в жизни видели его детище: сервис почтовых рассылок MailChimp. Именно его интерфейс, логотип и общий стиль (включая обезьяну-почтальона) и разработал Аарон. 10 лет до того, как создать облик одного из самых популярных онлайн-сервисов для почтовых рассылок, он преподавал веб-дизайн. Живет автор в штате Джорджия, США, и помимо веб-дизайна собирается освоить профессию бариста.

Книга сама небольшая, в мягкой обложке и читается сравнительно быстро. Возможно, я бы ее прочел и за один день а так, читая понемногу каждый вечер, завершил чтение за 3 дня. На простых и доступных примерах (с названиями проектов, ссылками на них, списком рекомендуемых книг и статей, а также скриншотами самих сайтов) Аарон Уолтер «на пальцах» объясняет разницу между дизайном, который вызывает у людей положительные эмоции, и одинаковыми «штампованными» сайтами.

Первые впечатления

Эта книга — не для дизайнеров. Человек, который занимается веб-дизайном уже не первый год или сталкивается по работе с разработкой нормальных веб-проектов, не найдет в ней каких-то секретов или «лайфхаков», без которых его профессиональная деятельность невозможна. Но эта книга крайне полезна, если дать ее прочесть не-дизайнеру, отвечающему за принятие решений по дизайну в компании или государственной структуре. Объяснения и примеры настолько просты, что — честно говоря — не знаю, кем надо быть, чтобы после прочтения «Эмоционального веб-дизайна» по-прежнему требовать от веб-дизайнера «весь текст поместить на главной, а еще баннеров побольше: у нас много партнеров, и пусть форма авторизации будет с 5 полями.»

«Минусы» книги:

• Технических советов и профессиональной конкретики в ней нет.
• В качестве примеров приведены сайты коммерческих проектов, но их всего 5-6 и отобраны они в основном на базе субъективных предпочтений автора. Хотелось бы посмотреть на примеры креатива из  числа государственных учреждений (кому интересно — например, что-то вроде сайта департамента полиции Милуоки), общественных сервисов, больше внимания уделить вопросам электронной коммерции. Если вы тоже это ищете — данная книга вам, скорее всего, не подойдет.

«Плюсы» книги:

• Доступным языком рассказано, почему удовольствие, радость, удивление, предвкушение в сочетании с яркой индивидуальностью вашего проекта — это важные составляющие не только для почтового сервиса, социальной сети или магазина сувениров, но и ключ к успеху современного банка, бухгалтерского или платежного сервиса.
• Ее можно (и нужно) читать не-специалистам, чтобы понимать и оценивать простые решения для веб-дизайна, а не искать самые сложные и громоздкие, которые смогут «охватить абсолютно всё».

5 важных / интересных вещей, которые я почерпнул из «Эмоционального веб-дизайна»

• Эксперименты в области графического дизайна, вызывающего положительные эмоции, ведутся человечеством со времен Гутенберга, разработавшего шрифт, максимально приближенный к рукописному почерку монахов.
• Антропоморфность, использование человеческих лиц и персонифицированных персонажей — то, что привлекает внимание посетителей на сайте и помогает продавать итоговый продукт.
• Принцип разработки дизайна с использованием «золотого сечения» использовали все успешные ИТ-компании и онлайн-сервисы: от Apple до Twitter.
• Контрастный минимализм — отличительная черта сайта, который хочет выделиться среди толпы конкурентов (так поступили, к примеру, в Tumblr).
• В разработке эмоционального веб-дизайна всегда есть факторы риска: использование юмора и нестандартной графики, уровень доверия аудитории к новинкам, компоновка элементов на странице и т.д. Универсального рецепта успеха здесь не существует; но есть принципы и тенденции, которые стоит учитывать при создании сайта, который будет нравиться людям и будет удобен для них.

Кому рекомендую прочесть

Людям, занимающим руководящие посты в организациях, компаниях и ведомствах, которые далеки от дизайна и юзабилити, но силятся понять, чего хотят «все эти дизайнеры», когда представляют эскизы корпоративного / ведомственного сайта.

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

«Эмоциональный веб-дизайн», Аарон Уолтер

Купить на litres.ru Купить на amazon

Эмоциональный веб-дизайн | Психология веб-дизайна

Если вы разработали сайт, охватывающий пять из шести уровней дизайна, вы превзошли большинство сайтов в сети. Даже великие дизайнеры не смогут рассмотреть первые пять слоев в дизайне. Остановка здесь, однако, игнорирует один из фундаментальных аспектов человеческого бытия — эмоции.

Эмоции — это последний аспект дизайна, к которому вы должны стремиться. Эмоции упускаются из виду, когда веб-дизайн сводится к статистике; пользователи выполняют желаемые действия или нет.Люди не такие простые. И в результате их поведение тоже. По большому счету, мы считаем себя логическими существами, чьи эмоции только мешают. Это не тот случай; эмоции являются причиной некоторых из величайших аспектов современной жизни, и, несмотря на то, что веб-сайты неодушевлены, пользователи на самом деле взаимодействуют с ними эмоционально.

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

Понимая, что известно об эмоциях, вы можете создавать дизайн, который убедительно влияет на пользователей. Для этого не обязательно становиться психологом; вам просто нужно базовое понимание. Хотя эмоциональный дизайн трудно поддается количественной оценке, он имеет ощутимые преимущества. Прежде чем мы погрузимся в человеческие эмоции, давайте посмотрим, какую пользу они приносят вашей работе.

Почему дизайн для эмоций?

Чрезмерный упор на логику в первую очередь вызван обесцениванием эмоций. На самом деле, по большому счету, люди переоценивают то, как логика влияет на то, что они делают и как они чувствуют. Нам нравится думать, что наши действия являются результатом хорошо продуманных рассуждений, но это не всегда так… На самом деле, рассуждения часто оказываются запоздалыми.

Было время, когда эмоции считались пережитком эволюции. Это было не только неважно, но и препятствовало рациональному мышлению.Логика считалась высшей и отдельной сущностью. Теперь мы знаем, что чем более развитый вид, тем более он эмоциональным. Тем не менее, по сей день люди пытаются игнорировать эмоции при принятии важных решений, потому что им кажется, что они затуманивают их суждения.

На самом деле логика и эмоции настолько переплетены, что никакое решение не принимается без эмоций. Во многих случаях решения принимаются исключительно эмоциями и позже оправдываются только логикой. Вы можете быть уверены, что на все, что пользователь делает на вашем сайте, так или иначе влияют его эмоции.

Когда вы сфокусированы на визуальных эффектах и ​​удобстве использования, легко получить туннельное зрение. Вы можете получить сайт, который прост в использовании и выглядит привлекательно, но полностью игнорирует эмоции пользователя. Поскольку все поведение и решения основываются на эмоциях, вы не можете удовлетворить основную потребность дизайна.

Вы можете использовать дизайн, чтобы повлиять на эмоции пользователя и повысить успех дизайна. В частности, эмоции влияют на отношение пользователей, влияют на их поведение и изменяют их опыт на сайте.Даже самые логичные люди согласятся, что веб-сайт должен приносить удовольствие. Однако радость — это эмоция, а не рациональный вывод.

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

Изменение отношения

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

Вы хотите, чтобы пользователи относились к вашему сайту положительно, независимо от того, был ли он создан заново или основан на предыдущем опыте. Так бывает не всегда; даже незначительные проблемы с удобством использования могут вызвать у пользователя негативное отношение. К счастью, отношение по своей природе всегда меняется, поэтому негативные или равнодушные чувства могут сместиться в сторону позитивных. Как вы уже догадались, это достигается за счет эмоциональной вовлеченности.

Влияние на поведение

Эмоции играют решающую роль в принятии человеческих решений. В своей книге «Эмоциональный дизайн» ученый-когнитивист Дон Норман описывает исследование нейробиолога Антонио Дамасио, который изучал людей с пониженными эмоциональными способностями (но в остальном нормальной функцией мозга).

Он обнаружил, что они часто испытывали трудности с принятием решений, особенно в случаях равнозначных альтернатив. Если убрать эмоции, ответить на простой вопрос: «Едем ли мы сейчас или через пятнадцать минут?» Будет практически невозможно.Фраза «мыслить логически» часто используется для поощрения принятия рациональных решений; по иронии судьбы, без эмоций вы не сможете судить, какое решение стоит принять.

Многие решения основаны на том, что «приятно», а это чисто эмоционально. Позже мы можем придумать причины для этого, но выбор был сделан именно на эмоциях.

В последних двух главах мы обсуждали, как эстетические предпочтения являются результатом подсознательных висцеральных реакций. Многие люди ведут себя так же.

Когда-то выживание человека основывалось на способности быстро оценить

.

Как использовать эмоции для лучшего веб-дизайна и UX

Знаете ли вы, что 94% первого впечатления пользователей о вашем бизнесе определяется дизайном вашего сайта?

В этом посте мы рассмотрим, как можно использовать эмоции в веб-дизайне, чтобы произвести хорошее впечатление, улучшить пользовательский интерфейс (UX) и увеличить количество конверсий.

Продолжайте читать мои советы для инсайдеров или воспользуйтесь нашими услугами по веб-дизайну, чтобы узнать, как наше отмеченное наградами агентство может улучшить ваше присутствие в Интернете!

Почему эмоции важны для веб-дизайна?

Часто эмоции играют большую роль в процессе конверсии вашего сайта.

Понимание эмоций пользователей и включение сочувствия в ваш дизайн позволяет создавать долгосрочные отношения. И людям будет комфортнее работать с вашим бизнесом.

Без эмоций и сочувствия творческий процесс не работает, и посетители с меньшей вероятностью конвертируются и становятся клиентами.

4 совета по началу работы с эмоциональным веб-дизайном

Теперь давайте рассмотрим четыре совета по включению элементов дизайна, которые вызывают эмоции посетителей и лучше отвечают их потребностям.

1. Сделайте качественное погружение и разработайте личность конечного пользователя

Каждый раз, когда я начинаю новый проект веб-дизайна (большой или маленький), я исследую конечных пользователей клиента, чтобы выявить возможности и наметить конечные цели проекта.

Вы можете легко идентифицировать своих конечных пользователей, просмотрев демографические данные в Google Analytics и сопоставив их с тем, что вы знаете о своей пользовательской базе.

С этой информацией вы можете начать создавать целевых персонажей.

После того, как я определил ключевых персонажей для проекта, я хотел бы надеть «очки конечного пользователя», чтобы облегчить просмотр веб-сайта их глазами.

Притворяясь конечным пользователем, я выполняю следующие шаги:

• Прихожу на объект с поставленной целью (например, купить пару обуви).
• Я отмечаю все эмоции и реакции, возникающие у меня при просмотре сайта.
• Я спрашиваю: «Предоставляет ли этот сайт ценность для меня (пользователя) на каждом этапе процесса конверсии?»
• Я выявляю все препятствия, которые мешают мне купить или отправить контактную форму.
• Я выполняю те же шаги на планшете или мобильном устройстве, чтобы оценить UX, определить пропущенные шаги и выявить нечеткую информацию.

Затем я повторяю те же шаги при использовании веб-сайтов конкурентов, все время ведя записи.

Когда у меня есть все записи, я снимаю «очки конечного пользователя» и начинаю разбираться в реакциях, которые у меня были на каждом сайте.

Это мой любимый способ проведения качественного конкурентного анализа — ставя себя на место конечного пользователя, я могу создавать проекты, которые лучше соответствуют их потребностям и эмоциям.

2. Отправьте онлайн-опросы пользователей

Онлайн-опросы — очень полезный инструмент, когда вы хотите получить от конечных пользователей прямую обратную связь об их потребностях и эмоциях, которые вызывает ваш сайт.

Мне нравится сочетать свое «качественное глубокое погружение», приведенное выше, с отзывами конечных пользователей, чтобы создать план проекта веб-дизайна.

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

Задайте себе следующие вопросы:

• Что я хочу знать, когда этот опрос будет завершен?
• Почему я хочу это знать и чем это доказать?
• Каким будет результат?
• Как мне проанализировать свои данные, чтобы ответить на мои вопросы?
• Есть ли какие-то дополнительные факторы, которые мне нужно учитывать?

Вы можете легко настроить опросы пользователей с помощью Hotjar или Crazy Egg, связанных с Survey Monkey.

Собрав ответы, вы можете сравнить отзывы и определить возможности, которые помогут лучше удовлетворить потребности пользователей с помощью вашего дизайна.

3. Проведение тестов на предпочтения

Затем тесты предпочтений помогут вам использовать мнения и эмоции аудитории, чтобы улучшить дизайн вашего веб-сайта.

Допустим, вы начали свой проект по веб-дизайну после проведения первоначального исследования и вошли в фазу каркасного моделирования или прототипирования.

Если вы хотите получить отзывы о своих прототипах, быстрые тесты предпочтений — это экономичный способ получить информацию свежим взглядом.

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

4. Добавьте на свой веб-сайт информационный, обнадеживающий и убедительный контент.

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

При прохождении вышеуказанных тестов вы, вероятно, обнаружили области напряжения пользователей и, возможно, некоторое сопротивление преобразованию.

Напряжение пользователей обычно связано с отсутствием на вашем веб-сайте:

Выявив области, вызывающие напряженность, вы можете написать контент, чтобы ответить на вопросы пользователей и помочь им уверенно вести с вами дела.

Начните улучшать свой веб-дизайн и UX!

Настройка на потребности вашей аудитории и включение эмоциональных элементов дизайна улучшит дизайн вашего сайта и упростит конверсии.

Если вам нужна помощь в обновлении дизайна вашего сайта или проведении аудита UX, WebFX с радостью вам поможет.

Благодаря более чем 1000 веб-сайтов, запущенных для клиентов и более чем 50 наградам за веб-дизайн, наша команда может помочь вам создать собственный сайт, который будет соответствовать вашим бизнес-целям.

Свяжитесь с нами сегодня, чтобы связаться с экспертом по веб-дизайну и узнать, как веб-дизайн может улучшить продажи, или позвоните нам по телефону 888-601-5359 !

.

лучших принципов эмоционального дизайна для создания привлекательного и приятного пользовательского интерфейса

В наши дни, с развитием эмоционального дизайна, все большее число дизайнеров UX / UI осознают важность эмоций и начинают создавать эмоциональных интерфейсов для улучшения UX .

Дональд Артур Норман, соучредитель известной Nielsen Norman Group, впервые ввел термин «эмоциональный дизайн» в своей знаменитой книге под названием « Emotional Design » и подчеркнул большое влияние эмоционального дизайна на дизайн веб-приложений и приложений для лучшего и более приятный UX.

Тем не менее, как вы можете вложить эмоции в дизайн своего веб-интерфейса или интерфейса приложения и привлечь больше клиентов в качестве UX / UI-дизайнера？ Вы ищете практические принципы или примеры эмоционального дизайна, которые помогут вам создать привлекательный и восхитительный пользовательский интерфейс для веб-приложений или веб-приложений?

Вот 6 эффективных принципов эмоционального дизайна и примеры для вашего вдохновения. Чтобы помочь вам создавать более впечатляющие и эмоциональные интерфейсы, также будут представлены некоторые примеры прототипов веб-сайтов / приложений (все они созданы с помощью , более простого, быстрого и интеллектуального инструмента для создания прототипов , Mockplus):

Во-первых, что такое эмоциональный дизайн в дизайне пользовательского интерфейса веб-приложений или приложений?

В дизайне веб-интерфейса или интерфейса приложения эмоциональный дизайн часто указывает на подход к дизайну, который UX / UI-дизайнеры используют для доставки положительных эмоций (таких как счастье, комфорт, радость и т. Д.) С помощью креативных элементов интерфейса или групп элементов, таких как цвета, микрокопия, макеты и тд.

Более того, иногда, чтобы вызвать правильную эмоциональную реакцию у пользователей сети / приложения, некоторые дизайнеры даже творчески вкладывают некоторые отрицательные эмоции (например, грусть, сожаление и печаль и т. Д.) В свой дизайн пользовательского интерфейса, чтобы произвести впечатление на пользователей лучшим UX и продажи продукции.

Короче говоря, отличный эмоциональный дизайн веб-сайта / приложения может не только быстро привлечь внимание пользователей, но и заставить их чувствовать себя хорошо при покупке вашего продукта.

В этом примере используются все элементы интерфейса, особенно пара «фото и текст», чтобы обеспечить чувство безопасности и побудить пользователей без колебаний покупать это программное обеспечение безопасности.

Как создать эмоциональный интерфейс для лучшего UX?

Как мы уже говорили выше, каждый элемент или деталь пользовательского интерфейса веб-сайта или приложения может быть потенциальным источником эмоций. Итак, как можно более творчески и эффективно использовать эти часто используемые элементы интерфейса для создания привлекательного и эмоционального веб-сайта / приложения? Чтобы помочь вам, вот 6 эффективных принципов эмоционального дизайна для вашего вдохновения:

1. Используйте визуальные элементы, чтобы вызвать эмоции у пользователей

Визуальные элементы могут быть разработаны так, чтобы вызывать эмоции.Ниже приведены некоторые визуальные элементы, с помощью которых вы можете попытаться вызвать эмоции пользователя:

* Используйте цвета, чтобы привлечь пользователей и вызвать эмоции

Color, один из важнейших визуальных элементов в дизайне интерфейса, играет жизненно важную роль в привлечении и удержании пользователей — даже на первый взгляд. Это также эффективный элемент для выражения эмоций дизайнерами.

Например, вообще говоря, красный и желтый часто обозначают счастье, энтузиазм, молодость, радость и т. Д.Используя эти цвета или цветовые схемы в своем дизайне, вы можете легко вызвать соответствующие эмоции и заставить пользователей чувствовать себя счастливыми и приятными.

И синий, зеленый и черный часто дарят ощущение покоя, комфорта и свободы. Используя эти цвета или цветовые схемы в своем интерфейсе, вы можете подсознательно помочь пользователям стать более терпеливыми и рациональными.

Короче говоря, используйте цвета в своем дизайне, чтобы вызвать различные эмоции пользователей и предложить различные эмоциональные переживания.

Этот пример веб-сайта китайского ресторана выбирает красный и желтый, наиболее типичные цвета Востока, в качестве цветов темы.Такая цветовая гамма не только делает дизайн более красивым и привлекательным, но и позволяет покупателям узнать немного больше о восточных культурах. И невольно хочется попробовать все перечисленные блюда.

На этой странице с ошибкой 404 используется сине-белая цветовая схема, чтобы незаметно передать ощущение комфорта и спокойствия. Такая стратегия дизайна может эффективно уменьшить разочарование пользователей, когда они внезапно получают надоедливое сообщение об ошибке 404.

* Утешайте аудиторию ясными, интуитивно понятными и иерархическими макетами / типографикой

Веб-сайт / приложение с более интуитивно понятными, иерархическими и четкими макетами или типографикой, как правило, более привлекательны для пользователей и предлагают им более приятный опыт.

Более интуитивно понятный, иерархический и понятный макет может сделать ваш веб-интерфейс / интерфейс приложения более простым и удобным для пользователя. Это упрощает пользователям быстрый поиск необходимой информации.

* Создавайте привлекательные и приятные интерфейсы с контрастами и группами

Вы также можете добавить контрасты и группы визуальных элементов, чтобы сделать интерфейс более удобным и приятным.

Например, вы можете легко добавить фотографии, микрокопии и другие визуальные элементы, а также различные цвета, места размещения, размеры, назначения, слои и многое другое, чтобы создать привлекательный и интуитивно понятный дизайн пользовательского интерфейса с четкой иерархией. Это очень эффективно для улучшения пользовательского опыта.

Как показано на этом прототипе веб-сайта, вы можете легко использовать компоненты «Изображение», «Метка», «Кнопка» и другие компоненты вместе, чтобы создать удобный и привлекательный прототип пользовательского интерфейса с различными размерами, размещениями, назначениями, цветами и другими свойствами в Mockplus. .

Кроме того, вы также можете визуально оптимизировать свой веб-сайт / приложение с помощью фигур, сеток, анимации и других визуальных элементов.

Чтобы создать такой минималистичный веб-сайт с лучшим UX, вы можете легко попробовать функции Mockplus « Auto Data Fill » и « Repeater », чтобы создать интуитивно понятную сетку.Затем перетащите компоненты «Ярлык» и «Текстовая область», чтобы создать четкую визуальную иерархию с изменениями размеров, типографики, размещения и цветов. Это может быть действительно полезно для предоставления пользователям более приятного опыта.

Короче говоря, продумайте дизайн каждого визуального элемента, чтобы намеренно создать эмоциональную связь с аудиторией вашего веб-сайта / приложения.

2. Создавайте лучший опыт с помощью творческих и умных взаимодействий

В веб-дизайне / дизайне приложений интерактивный дизайн часто расширяет функции и эффективно удовлетворяет потребности пользователей, обеспечивая пользователям более приятный опыт.

Другими словами, хороший дизайн взаимодействия между веб-приложением и веб-приложением не только достаточно прост, чтобы пользователи четко знали, что и как делать. Это также позволяет пользователям беспрепятственно завершить взаимодействие, приобрести продукт или успешно прочитать необходимую информацию. Это действительно важно для того, чтобы предложить пользователям более приятный опыт.

В этом дизайне приложения нетрудно понять, как войти в систему. А когда пользователи вводят пароль, анимированный человечек наверху закрывает глаза.Если пароль введен неверно, цвет пароля автоматически станет красным. Такой приятный дизайн привлекает людей, заставляя их чувствовать себя в безопасности. Это именно то, что выделяет этот дизайн.

3. Обеспечьте интересный и увлекательный опыт с уникальным стилем дизайна и темой

Уникальный стиль дизайна и тема могут не только выделить ваш дизайн, но и дать пользователям лучшее представление о ваших приложениях, продуктах или брендах. Иногда он может даже превратить пользователя в промоутера продукта .

Ниже приведены некоторые рекомендации, которым вы можете следовать при проектировании эмоций:

* Упростите / оптимизируйте пользовательский интерфейс веб-сайтов и приложений с помощью различных стилей и техник дизайна

Минималистский стиль дизайна может эффективно упростить дизайн вашего веб-приложения или веб-приложения, повысить скорость загрузки и улучшить взаимодействие с пользователем. ( Нажмите, чтобы узнать лучшие секреты и примеры минималистского дизайна веб-сайтов )

Минималистичный дизайн веб-сайта может предоставить пользователям более простой и приятный опыт.

Плоский дизайн, один из самых популярных стилей дизайна среди дизайнеров UX / UI, может помочь создать отличный веб-сайт / приложение с четкой визуальной иерархией и позволяет пользователям быстро находить интерфейс и необходимое содержимое. ( Нажмите, чтобы найти 10 примеров плоского веб-дизайна для вдохновения )

Для создания такого плоского прототипа веб-сайта вы можете легко использовать библиотеку значков Mockplus (которая предлагает пользователям более 3000 векторных значков во всех сферах жизни), чтобы добавлять значки и создавать интуитивно понятный веб-сайт с плоским дизайном.Плоский дизайн может эффективно облегчить работу пользователей и предложить им лучший UX.

Метод прогрессивного раскрытия информации также полезен для вас, чтобы предложить лучший и более приятный UX.

Метод прогрессивного раскрытия информации играет жизненно важную роль в улучшении взаимодействия с пользователем.

* Предлагайте разнообразные эмоциональные переживания с разными темами дизайна

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

Например, когда вы разрабатываете веб-сайт / приложение специально для детей, вы должны добавлять яркие цвета, милых мультяшных персонажей, интересные анимации / видео и другие элементы, полные детства и счастья. Такие элементы могут легко помочь вам привлечь больше пользователей, позволить им понравиться вашим веб-сайтам / приложениям и удерживать их там надолго.

* Рассмешите публику

Шутки или юмористические слова / фотографии / анимация могут быстро привлечь внимание пользователей, вызвать эмоциональную реакцию и эффективно удержать их.Итак, в свой дизайн пользовательского интерфейса подумайте о добавлении элементов, которые заставят вашу аудиторию смеяться, ради лучшего UX и увеличения продаж продукта.

Юмор на странице с ошибкой может легко помочь вам успокоить аудиторию и эффективно уменьшить ее негативные эмоции.

Короче говоря, предлагайте пользователям разнообразный эмоциональный опыт с разными стилями и темами дизайна.

4. Используйте хорошо сделанную микрокопию / копию для выражения эмоций

Слова — всегда полезный способ выразить эмоции.И в дизайне веб-сайтов / приложений слова тоже работают. По сравнению с некоторыми утомительными, безличными или скучными инструкциями, сообщениями об ошибках, уведомлениями, отзывами и другими текстами веб-сайтов / приложений, слова, полные эмоций, могут быть более убедительными и привлекательными.

Эмоциональный и трогательный текстовый дизайн в сочетании с некоторыми персонифицированными значками помогает создать эмоциональную связь с пользователями и предложить лучший эмоциональный опыт.

Интересная микрокопия делает ваш сайт привлекательным, а также может ослабить негативные эмоции пользователей.

В дополнение к милой иллюстрации пингвина, этот прототип также разработан с креативным и запоминающимся дизайном микрокопии, чтобы привлечь пользователей и позволить им щелкнуть, чтобы продолжить без каких-либо колебаний. Это определенно магия хорошо сделанной микрокопии.

5. Создавайте индивидуальные дизайны веб-приложений и веб-приложений с помощью своего творчества

Идея! Идея! Идея! Креативная дизайнерская идея всегда важна для успешного эмоционального дизайна веб-сайта / приложения. Вот почему большинство дизайнеров всегда ищут и просматривают огромное количество свежих эмоциональных примеров дизайна веб-сайтов / приложений и ресурсов для вдохновения, прежде чем они действительно начнут создавать дизайн.( Нажмите, чтобы увидеть больше бесплатных дизайнерских материалов и ресурсов )

Креативные идеи всегда помогают персонализировать дизайн вашего веб-сайта / приложения и сделать его более эмоциональным и уникальным.

Используйте творческие идеи, чтобы вызвать эмоции и выделить дизайн вашего веб-сайта.

Чтобы помочь вам создать отличный эмоциональный дизайн веб-сайта / приложения, вы можете загрузить и использовать Mockplus, чтобы легко и быстро создавать прототипы, тестировать и повторять свои дизайнерские идеи.

Во-первых, Mockplus предлагает мощную библиотеку компонентов, библиотеку значков и библиотеку стилей компонентов , чтобы вы могли легко прототипировать свои дизайнерские идеи в их полной мере.

Во-вторых, Mockplus предоставляет 8 способов протестировать проект и поделиться им. Это может помочь дизайнерам быстро проверить свои дизайнерские идеи и эффективно собирать отзывы.

В-третьих, если вам нужно совместно создавать эмоции, стоит попробовать функцию для управления командой и совместной работы в недавно выпущенных редакциях Team и Enterprise.

6. Произведите впечатление на пользователей деталями

Эмоциональный дизайн можно использовать во многих типах веб-интерфейсов / приложений (таких как страницы входа / регистрации, направляющие страницы, страницы обратной связи, страницы ошибок 404 и т. Д.), Чтобы уменьшить негативные эмоции пользователей, направить их при просмотре веб-сайт / приложение, предлагайте им более приятный UX и увеличивайте продажи продуктов.( Щелкните, чтобы проверить 14 лучших дизайнов страницы с ошибкой 404 для вдохновения )

Изменение значков выражений в этом дизайне окна поиска действительно креативно и привлекает внимание. Это также хороший снимок, который быстро заставляет пользователей полюбить этот дизайн.

Приветственные слова на этой странице входа очень милые и очень эффективны для удержания пользователей.

Детали также могут сделать веб-сайт / приложение выдающимся и успешным.Обратите внимание на каждую деталь вашего интерфейса и сделайте свой дизайн наполненным эмоциями.

Надеюсь, все эти принципы и примеры эмоционального дизайна будут вам полезны.

Советы / заметки по эмоциональному дизайну в Интернете / приложении

Когда вы пытаетесь оживить свой интерфейс эмоциями, помните эти советы по дизайну, чтобы избежать нежелательных проблем:

1. Никогда не будь слишком эмоциональным

Вообще говоря, все ваши эмоциональные замыслы призваны вызвать эмоции у пользователей и позволить им оставаться на веб-сайте / в приложении в течение более длительного времени.Но это не значит, что вы можете свободно выражать свои эмоции и чувства там. Чем больше эмоциональных элементов вы добавите, тем выше риск, с которым вы столкнетесь или вызовете недовольство пользователей. Никогда не будьте слишком эмоциональны в дизайне пользовательского интерфейса.

Добавление правильных цитат (от известного человека) — мощный способ эффективно вызвать эмоции у пользователей. Однако слишком много цитат может привести к противоположным результатам и ухудшить положение.

2. Эмоциональный дизайн вашего веб-сайта / приложения не работает вечно

Все постоянно меняется.Также меняются символы (такие как часто используемые слова, изображения, значки, предметы и т. Д.), Которые вызывают эмоции. Таким образом, дизайнеры должны понимать, что эмоциональный дизайн их веб-приложений или веб-приложений не будет работать вечно и их необходимо своевременно обновлять.

3. Не забывайте об основных функциях и характеристиках

Основные характеристики и функции — самая важная часть веб-дизайна или дизайна приложения. В конечном итоге решается, останется ли пользователь ваше приложение / веб-сайт или покинет его напрямую, в зависимости от того, предлагает ли оно практическое содержимое и функциональные возможности, отвечающие их потребностям.Итак, никогда не забывайте об основных функциях и особенностях, независимо от того, какой тип дизайна вы пытаетесь создать, например, эмоциональный дизайн (анализируемый в этой статье), дизайн визуальной иерархии или стили дизайна (обсуждаемые в предыдущих статьях).

4. Обратите внимание на сценарии проектирования

В дизайне эмоционального интерфейса вы также должны обращать внимание на сценарии дизайна.

Например, юмор может быстро привлечь внимание пользователей и доставить им больше удовольствия.Однако юмор нельзя использовать во всех дизайнерских сценариях.

Искажение

В настоящее время дизайн пользовательского интерфейса зависит не только от функциональности, удобства использования и надежности веб-приложения / веб-приложения. Также необходимо учитывать эмоциональный дизайн веб-сайта / приложения. Не стоит недооценивать силу эмоционального дизайна. Попробуйте добавить эмоции в дизайн своего интерфейса, чтобы улучшить UI и UX.

Надеюсь, все эти принципы и примеры эмоционального дизайна могут быть достаточно полезны для вас, чтобы создать удивительное и приятное веб-приложение.

.

Как создать веб-сайт с эмоциональным воздействием

Мы, люди, пытаемся убедить себя, что мы разумные существа, которые делают выбор на основе логики. По правде говоря, мы очень эмоциональных человек. Чем усерднее мы пытаемся убедить себя в своей рациональности, тем большее влияние наши эмоции оказывают на наши решения.

Дизайнеры веб-сайтов должны учитывать, какие эмоции вызывает их сайт. Недостаточно убедиться, что сайт производит впечатление, которое вы собираетесь произвести.Сайты, которые не вызывают эмоциональной реакции , быстро забываются. Когда вы начинаете проектировать свой сайт, вам нужно учитывать человеческие эмоции.

Emotion и Веб-дизайн

В своей книге « Emotional Design » Дональд Норман утверждает, что пользователи воспринимают предметы, которые эстетически приятны, как более эффективные. Эта концепция применима (почти) ко всему, отсюда и причина, по которой она была применена к веб-сайтам.

Эмоция может быть как положительной, так и отрицательной, и вызывается у пользователя как реакция на определенные элементы дизайна.Реакция на эти элементы у мужчин и женщин разная, и на нее также влияет культура. Например, Дайан Сир утверждает, что если женщинам не нравится онлайн-стиль и формат веб-сайта, они с меньшей вероятностью будут эмоционально вовлечены в него. Это может иметь очень серьезные последствия, особенно если этот сайт является веб-сайтом электронной коммерции (и эмоций — очень актуальная тема для сайтов онлайн-покупок).

Начните с концепции

Прежде чем вы начнете искать потенциальных клиентов, вам понадобится концепция дизайна вашего веб-сайта.Вам нужно выяснить, что нравится вашей целевой аудитории и какое сообщение вы собираетесь отправить. Вы бы не захотели пересечь континент без карты; хотя вы можете добраться до места назначения, добраться туда будет намного сложнее, чем если бы у вас изначально был план.

При разработке концепции веб-сайта вы должны учитывать ряд факторов, например:

• Сообщение, которое вы хотите передать.
• Ваш корпоративный имидж.
• Особенности дизайна, которые помогут донести сообщение до ваших потенциальных клиентов.
• Какие конструктивные особенности могут повредить сообщение.

Каково ваше сообщение?

Запуск с четкого сообщения значительно упростит процесс. Контент, подчеркивающий эмоции сообщения, поможет вашему сайту добиться успеха. Очень внимательно относитесь к любому контенту, который конфликтует с сообщением. Хотя есть место для придания глубины аргументу, его необходимо тщательно продумать.

Источник изображения: MediaBriefing

В дополнение к этому, особое внимание необходимо уделить тональности доставки этого контента.Не секрет, что люди любят юмор. Так что осторожно, добавление легкой дозы юмора к контенту может стать отличной стратегией, чтобы сломать лед и заставить пользователей чувствовать себя комфортно. Обратите внимание на акцент на слове «осторожно». То, что кажется вам юмористическим, не обязательно будет юмористическим для ваших читателей. Кроме того, чрезмерное использование юмора может иметь неприятные последствия, поскольку пользователи могут воспринимать ваш веб-сайт (и вашу компанию) как непрофессиональный.

Таким образом, сообщение — это больше, чем простые слова и элементы дизайна.Необходимо убедиться, что эти элементы вызывают правильные эмоции. Все элементы дизайна, от текстового контента до элементов дизайна и эмоций, составляют значимую страницу. Убедитесь, что элементы гармоничны, иначе вы запутаете многих пользователей лендинга.

Сообщение и связанные с ним эмоции должны соответствовать имиджу вашей компании, а также друг другу. Пользователям нравится последовательность, и авторитетные компании должны адаптировать сообщение своей веб-страницы к своему корпоративному имиджу. Иначе люди запутаются.

Никогда не следует вводить пользователей в заблуждение, потому что это увеличивает шансы, что их просмотр приведет к отказу. Это особенно актуально для домашних и целевых страниц, которые служат вводной частью вашего веб-сайта. Держите свое сообщение простым, эмоциональные реакции ясными и нарушайте правила дизайна только тогда, когда вы хотите выразить точку зрения.

Получение сообщения через

Все на веб-сайте должно иметь цель. Бессмысленный выбор дизайна разочаровывает посетителей. Если какая-то функция не имеет очевидного значения, пользователи будут разочарованы, потому что не могут понять, что она означает, или придадут ей личное значение.Хотя более глубокое изучение выбора может показаться неплохим, оно может противоречить вашему посланию.

Источник изображения: Research-live

Пользователи будут придавать эмоциональное значение любому выбору дизайна, который вы делаете. Упростите их и свою жизнь, придавая ясный смысл с самого начала.

Согласованность — важная составляющая четкого сообщения. С веб-дизайн последовательность означает больше, чем просто уверенность в том, что текст не противоречит сам себе. Это означает, что все элементы страницы гармонично сочетаются друг с другом и соответствуют вашему корпоративному имиджу.Постарайтесь четко обозначить смысл и эмоций в своем дизайне, чтобы избежать путаницы.

Согласованность должна соблюдаться на всех носителях. Всегда используйте свой логотип на веб-сайтах, в сообщениях электронной почты и в учетных записях социальных сетей ; тогда он всегда будет ассоциироваться с вашей компанией. Эта ассоциация может быть бесценной, особенно если вы работали над созданием последовательного социального имиджа. В конце концов, постоянно используемый логотип сам по себе может раскрыть смысл.

Тщательно выбирайте элементы дизайна

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

На эту тему написано

пачки, но вы всегда должны помнить, что цвет особенно важен при разработке страницы. От желтого для счастья, синего для спокойствия и красного для волнения, цвет может создать уместную эмоциональную реплику. Индивидуальные предпочтения могут больше влиять на конкретного зрителя, но каждый цвет имеет определенный установленный эмоциональный вес, который распознает средний зритель.

Воспринимаемая близость изображений к зрителю может быть важным эмоциональным сигналом. Чем ближе изображение появляется и чем больше оно находится в поле зрения, тем больше оно передает срочность и интимность. Воспринимаемая дистанция часто приводит к эмоциональной дистанции. Если изображения не попадают в большую часть поля зрения, они не кажутся такими важными, и изображение может показаться глупым.

Изображения также могут вызывать эмоции тем, что они отображают. Например, изображение улыбающейся девушки может выражать положительные эмоции.

Источник изображения: One Extra Pixel

Какое бы значение ни было у вашего изображения, оно должно быть очевидно из контекста. Не заставляйте своего зрителя угадывать, почему присутствует изображение.

Вам следует использовать стандартные элементы пользовательского интерфейса, если только часть вашего сообщения не состоит в том, что вы уникальны и современны. Принимая решение не использовать эти элементы интерфейса, убедитесь, что вы понимаете назначение каждого из них. Нарушение правил проектирования, не зная, почему они являются стандартными, никогда не является хорошей идеей. Отклоняйтесь только в том случае, если изменение является улучшением — и вы понимаете, почему.

Если вы действительно отклоняетесь от стандартных элементов пользовательского интерфейса, убедитесь, что изменение явное и их расположение хорошо обозначено. Ни один зритель не любит играть в прятки с панелью меню. Заставить зрителя сделать это — хороший способ создать отскок. Новые функции могут создавать ощущение уникальности для веб-страницы, но убедитесь, что эти функции не мешают работе страницы. В меню, которое появляется только тогда, когда зритель просматривает большие иллюстрации, есть ряд специальных элементов, которые могут снизить удобство использования вашего интерфейса. .Будьте осторожны, применяя любые уникальные особенности дизайна.

Даже простой выбор шрифта может полностью испортить веб-страницу. Некоторые шрифты считаются стандартными и более профессиональными, например, Arial и Times New Roman. Использование другого шрифта может выделить вашу страницу. Однако это также может сделать вашу страницу непрофессиональной.

Намерение Эмоции

Поймите эмоциональную цель и полезность каждого сделанного вами дизайнерского решения, иначе неудачный выбор может снова и снова преследовать вас.Выбирайте шрифты, которые напоминают ваш корпоративный имидж, а не конфликтуют с ним.

Собирая веб-сайт, убедитесь, что все отдельные части подходят друг другу, а также вашему сообщению. Непродуманное сочетание делает любой веб-сайт глупым. Хотя вам может потребоваться простота , между простотой и скукой есть тонкая грань. Столь же тонкая грань проходит между волнением и замешательством.

Убедитесь, что ваша страница находится на правильной стороне разделения.Если вам нужна помощь в разработке запоминающейся веб-страницы, подумайте о найме команды дизайнеров. Дизайнеры могут помочь вам передать сообщение, которое вы хотите отправить, быстро и эффективно, поскольку они знают все важные элементы успешной веб-страницы. Не доверяйте свой бизнес неквалифицированной команде. При необходимости вызовите профессионалов.

Хотите узнать больше?

Если вас интересует пересечение UX и дизайна пользовательского интерфейса, подумайте о том, чтобы пройти онлайн-курс «Шаблоны дизайна пользовательского интерфейса для успешного программного обеспечения» или «Дизайн-мышление: руководство для начинающих».Если, с другой стороны, вы хотите освежить в памяти основы UX и юзабилити, вы можете пройти онлайн-курс по пользовательскому опыту (или другой теме дизайна). Удачи вам в обучении!

(Изображение: Depositphotos)

.