Первое впечатление имеет значение: почему так важен отличный визуальный дизайн

Опубликовано: 2021-07-22

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

Пользователям требуется около 50 миллисекунд (мс) (0,05 секунды), чтобы сформировать мнение о вашем веб-сайте, определяющее, останутся они или уйдут.

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

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

Это первое впечатление зависит от многих факторов: структуры, цветов, интервала, симметрии, количества текста, шрифтов и т. Д. Эта почта:

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

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

Исследование веб-сайтов и первые впечатления

Пользователи формируют мнение о дизайне за 17 мс.

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

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

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

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

Примечание. См. Массу рекомендаций и идей по тестированию в нашем всеобъемлющем отчете (247 рекомендаций специально для электронной торговли).

На то, чтобы взгляд остановился на ключевых областях веб-страницы, требуется 2,6 секунды.

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

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

Они обнаружили, что чем лучше первое впечатление, чем дольше участники остались на странице.

  • 21 лучшие идеи для A / B-тестирования электронной коммерции

    Автор CXL

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

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

Наибольший интерес у зрителей вызвали шесть разделов сайта:

  1. Логотип заведения. Пользователи потратили 6,48 секунды на эту область, прежде чем двинуться дальше.
  2. Главное меню навигации. Почти такой же популярный, как и логотип, субъекты в среднем просматривали меню 6,44 секунды.
  3. Окно поиска . Пользователи сосредоточились чуть более 6 секунд.
  4. Главное изображение сайта. Глаза пользователей фиксируются в среднем на 5,94 секунды.
  5. Письменное содержание сайта . Пользователи потратили около 5,59 секунды.
  6. Внизу веб-сайта . Пользователи потратили около 5,25 секунды.

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

Первые впечатления на 94% связаны с дизайном.

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

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

Из всех отзывов участников тестирования 94% касались дизайна:

  • Сложный;
  • Занятая планировка;
  • Отсутствие средств навигации;
  • Скучный веб-дизайн;
  • Использование цвета;
  • Всплывающая реклама;
  • Медленное знакомство с сайтом;
  • Мелкий шрифт;
  • Слишком много текста;
  • Фирменный стиль;
  • Плохие возможности поиска.

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

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

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

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

Ключевой вывод: отличный дизайн заставляет людей доверять вам и оставаться рядом. Плохой дизайн порождает недоверие и заставляет людей уходить.

Для первого впечатления визуальная привлекательность превосходит удобство использования.

В исследовании изучалось влияние визуальной привлекательности и удобства использования на производительность и удовлетворенность пользователей веб-сайтом.

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

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

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

Положительное первое впечатление может повысить общее удовлетворение.

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

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

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

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

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

Итак, если вы хотите произвести хорошее впечатление, с чего лучше всего начать?

Как произвести хорошее первое впечатление с помощью визуального дизайна

1. Выделите свой веб-сайт (и свою компанию) своим дизайном.

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

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

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

Из того, что я заметил, это происходит по двум основным причинам:

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

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

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

Методика ЗМЕТ в маркетинговых исследованиях от Тайлана Демиркая

«Фирменный стиль» - это не просто мягкая вещь, которую нужно отбрасывать. Еще в 1999 году Cheskin Research & Studio Archetype обнаружила, что шесть наиболее важных факторов в построении доверия с компанией электронной коммерции:

  • Бренд;
  • Навигация;
  • Выполнение;
  • Презентация;
  • Современные технологии;
  • Логотипы безопасности.

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

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

Что-то разделяет эти три сайта? Не совсем, даже если у них разные демографические группы.

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

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

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

Schott

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

Однако их догнала и дизайнерская тенденция, и теперь они больше похожи на любой другой сайт:

Shopify создал список из 100 красивых дизайнов электронной коммерции, в которых представлены компании с четкими первыми впечатлениями.

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

2. Вдохновляйте посетителей сайта на создание более сильных впечатление.

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

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

вдохновляющий вид на природу на чилийском туристическом сайте

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

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

Ключевой вывод: если вы продаете мечту (например, идею поехать в отпуск в Чили), вдохновляющая фотография - главный источник первого впечатления.

3. Убедитесь, что верхняя часть сгиба качается.

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

9 убийц доверия к веб-сайтам

Автор: Алекс Биркетт

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

  • Это поле предназначено для проверки, и его следует оставить без изменений.

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

Следовательно, то, что они видят сразу без прокрутки, определяет, будут ли они когда-либо прокручиваться вниз. С этим в мыслях…

Обратите особое внимание на свою навигацию.

пример четкой навигации по сайту

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

Согласно исследованию Business Insider о том, почему люди отказываются от тележек для покупок, 25% людей заявили, что «веб-сайт слишком сложен» (т. Е. Затруднена навигация), и около 60% отметили «скрытые расходы» (т.е. стоимость доставки ) в качестве основной причины, по которой они остались без родителей. инь .

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

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

изучите результаты покупок у неизвестного вам продавца.

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

Просто посмотрите, сколько информации передается при навигации на одном из моих любимых сайтов, ThinkGeek, даже не вдаваясь в его содержание:

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

Без лишней охоты легко найти:

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

Сравните это с крайним примером, таким как Zara, и вы поймете, почему это важно:

пример минималистичной навигации

Пример использования: Alight увеличивает поиск по сайту на 16% и покупок на 25%.

Старый свет

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

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

обновленная навигация по домашней странице с панелью поиска

В результате количество поисков по сайту увеличилось на 16%, а общее количество покупок увеличилось на 25%, все благодаря тому, что навигационная часть произвела сильное впечатление.

Первое впечатление - на веб-сайтах или в НБА - может длиться годами.

В исследовании экономистов Барри Став и Ха Хоанга изучалось влияние призыва на призыв в НБА. Они наблюдали за карьерой игроков в течение пяти лет после того, как их приняли на драфте. Пяти лет достаточно, чтобы проявить себя во многом, так что призывной приказ не играет роли, верно?

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

Каждое увеличение номера драфта (т.е. получение девятого драфта вместо восьмого) сокращало игровое время на целых 23 минуты. Невероятно, но порядок драфта продолжал предсказывать игровое время до пятого года в НБА, последнего года, измеренного в исследовании. У игроков, выбранных в первом раунде, также была более продолжительная карьера; они играли на 3,5 года больше, чем остальные.

пример домашней страницы, которая производит четкое и сильное первое впечатление

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

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

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

Заключение

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

Люди формируют свое мнение о вашем сайте за миллисекунды. Первая секунда на вашем веб-сайте может иметь большее значение, чем все последующие секунды (если таковые имеются). Убедитесь, что одна секунда производит хорошее первое впечатление.