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

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

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

Введение

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

1. Две системы обработки информации

Даниэль Канеман в своей книге "Думай медленно... Решай быстро" описывает две системы обработки информации людьми: 

  • Система 1: это наша "автоматическая система", которая в значительной степени непроизвольна и требует минимальных усилий. Однако она позволяет быстро обнаруживать простые взаимосвязи или распознавать закономерности. 
  • Система 2: эта система, напротив, медленна и требует значительных усилий, а также задействует большой объем нашего внимания. Обычно эта система используется при выполнении сложных видов деятельности, таких как решение математических примеров в уме. 

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

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

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

1. Система 1 формирует суждения пользователей о релевантности информации

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

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

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

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

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

2. Система 1 влияет на то, как пользователи воспринимают эстетику и, косвенно, удобство использования сайта

Люди, как правило, более снисходительны к продуктам с красивым дизайном. Если сайт является эстетически приятным, то пользователи будут воспринимать его более удобным для использования, чем он есть на самом деле. Система 1 позволяет очень быстро, на подсознательном уровне, принимать решение о том, красив ли сайт. Действительно, согласно исследованиям Гитте Линдгаард и ее коллег, вывод об эстетике сайта делается в течение 50 миллисекунд, и редко меняется, если дать людям больше времени.

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

3. Система 1 формирует суждение пользователей о том, можно ли доверять сайту

Когда пользователи впервые открывают страницу, они зачастую имеют определенную цель: то есть, Система 1 будет начинать свою работу, имея ввиду инструкции из Системы 2. Но если страница будет иметь элементы дизайна, которые сразу бросаются в глаза (например, одна красная кнопка среди черного текста), то Система 1 автоматически направит все внимание пользователей на эти элементы.  

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

  • движущееся объявление в верхней части страницы является очень заметным и будет восприниматься пользователями, как раздражающий элемент, что снизит доверие к сайту и соответственно, окажет отрицательный эффект;
  • широкая поддержка со стороны таких известных изданий, как New York Times или The Wall Street Journal могут повысить доверие к сайту и иметь положительный эффект.

2. Применение в дизайне

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

Определите ключевые рабочие процессы для каждой персоны 

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

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

Спросите себя: "На что обращает внимание персона Патрисия, для того, чтобы выполнить первый шаг своей задачи?”. Итак, после определения всех задач, которые могут захотеть выполнить ваши пользователи, спланируйте последовательность их действий и убедитесь, что вы правильно расставили приоритеты с точки зрения визуального структурирования информации, относящейся к этим действиям.

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

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

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

Как нам уже известно, Система 1 обращает внимание на любые элементы дизайна, которые визуально выделяются. Если они оказались актуальными для решения текущей задачи, отлично! Рассмотрим, как эти элементы влияют на восприятие эстетики, юзабилити и доверие к вашему сайту.

  • Избегайте конкурирующих, равнозначных кнопок призыва к действию. Если необходимо, чтобы на странице одновременно находились две кнопки CTA — сделайте им такое оформление, чтобы приоритет был очевиден. Если они слишком похожи или имеют одинаковый визуальный вес, то в итоге Системе 2 придется вмешаться и принять сознательное решение, что в конечном итоге займет значительно больше времени и создаст у пользователя ощущение когнитивного напряжения.
  • Ограничьте количество цветов и шрифтов и поддерживайте уровень контрастности. Слишком много цветов (более 4) и слишком много шрифтов (более 2) на странице или даже в инфографике могут привести к "эффекту радуги". Такое огромное количество вариаций дезориентирует Систему 1 и, вероятно, создаст впечатление зрительного хаоса. Не используйте низкоконтрастные цвета или крошечные шрифты — это создает у людей впечатление, что вы пытаетесь что-то скрыть от них, умышленно делая текст трудным для чтения.
  • Создавайте визуально сбалансированные макеты, проектируя их по сетке. Следуя ключевым эстетическим принципам, таким как симметрия и правильное выравнивание, можно гарантировать, что ваш сайт выглядит визуально приятно.  Сетка в некоторой степени ограничивает креативность, но, с другой стороны, она обеспечивает структуру и баланс, которые делают макеты более предсказуемыми.
Ваши самые заметные элементы дизайна должны быть понятными  и укреплять доверие
  • Четко сформулируйте, кто вы и чем занимаетесь. Если пользователям придется обратиться к Системе 2, чтобы выяснить, находятся ли они на нужном сайте, то это вероятнее всего приведет к подозрительности по отношению к вашему сайту. Не заставляйте своих пользователей заниматься поиском важной информации — четко говорите, кто вы и что вы делаете в кратком виде на самом видном месте вашего сайта.

Если это уместно, располагайте свой контент соответствующим образом, следуя правилам региона.  Даже такая, казалось бы, незначительная деталь, как ошибка в слове (например, “flavor” vs “flavour”, первый вариант принят в США, второй — в Великобритании), может являться звоночком для пользователей, о том что они находятся в неправильном месте, что приведет к моментальному переходу с вашего сайта к следующему результату поиска.

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

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

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

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

  • Тестирование скриншотов на время

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

  • Айтрекинг

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

  • Тесты юзабилити

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

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

Заключение

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

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

Источник:
nngroup.com
arrow