Зарегистрируйтесь и оплатите любой тариф LPgenerator
Получите в подарок 3 бонуса на 9 470 руб.

Неоднозначность как главный недостаток плоского UI

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

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

Два варианта ссылки «Узнайте больше о нас» (Learn more about us)

Два варианта ссылки «Узнайте больше о нас» (Learn more about us)
Слева: невыразительный указатель
Справа: выразительный указатель

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

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

две версии страницы ювелирного интернет-магазина

Слева: версия с сильным указателем
Справа: версия со слабым указателем

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

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

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

Также специалисты Nielsen Norman Group проанализировали тепловые карты (heatmaps), чтобы выяснить, на что больше всего было направлено внимание пользователей в интерфейсе. Такие области окрашены на тепловой карте красным цветом. В 6 парах из 9 тепловые карты продемонстрировали заметную разницу. В версиях со слабыми указателями внимание людей было более рассеянно.  

Тепловые карты

Тепловые карты
Слева: версия страницы с сильным указателем
Справа: версия страницы со слабым указателем

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

в версии с выразительным указателем основное внимание пользователей было сконцентрировано вокруг целевых заголовка и ссылки

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

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

При повторном просмотре индивидуальных сессий специалисты Nielsen Norman Group обнаружили, что в случае с версией с традиционными указателями 86% пользователей сначала фокусировались на заголовке, после чего их внимание привлекала ссылка, и они определяли ее как цель. И лишь 50% пользователей следовали этому паттерну при просмотре версии со «плоскими» указателями, а это статистически значимая разница. В большинстве случаев эти люди определяли как свою цель подзаголовок 3 YEAR: PEARL, а не ссылку «Купить украшение с жемчугом». Ссылку, стилизованная под обычный текст, он просто не замечали.

Ссылку, стилизованная под обычный текст, он просто не замечали

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

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

Высоких вам конверсий! 

По материалам: nngroup.com

blog comments powered by Disqus
LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса
  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
copyright © 2011–2018 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".