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

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

Сегодняшняя статья — это перевод «Change Blindness: Why People Don’t See What Designers Expect Them To See» автора Kathryn Whitenton (Nielsen Norman Group).

Pic

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

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

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

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

  1. Прерывание нашего визуального восприятии, которое может возникнуть, когда перезагружается страница, когда наши глаза быстро перескакивают от одной точки фиксации к другой, или когда смещается отображаемая картинка при изменении ориентации устройства из вертикального в горизонтальное.
  2. Скорость: если детали картинки изменяются мгновенно, то они скорее всего останутся незамеченными даже при коротком прерывании. Время моргания глаза обычно составляет 300-400 миллисекунд; слепота к изменениям была обнаружена при прерывании в отображении картинки всего на 67 миллисекунд.

Оба эти фактора часто возникают при работе с цифровой информацией, где визуальные элементы постоянно появляются и исчезают почти мгновенно. Другие факторы (такие как фокус внимания или общий визуальный беспорядок) также вызывают слепоту к изменениям. По сути, каждый раз когда новый элемент появляется на текущем экране, есть риск того, что он может быть не замечен. Например, на мобильной версии сайта Vans.com, если посетитель выбирает недоступный размер, то надпись на кнопке «Add to Cart» меняется на «Out of Stock». Но это небольшое изменение в тексте незаметно, когда остальное содержимое экрана остается прежним.

vans-out-of-stock

Vans.com: сообщение «The Out of Stock» осталось незамеченным, т.к. оно выглядело слишком похожим на «Add to Cart» и было размещено слишком далеко от места фокуса внимания пользователя (внимание пользователя было сосредоточено на полях «Размер» и «Количество»).

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

Сообщения об ошибках и уведомления о статусе

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

error_goodsourcing

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

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

progress-indicator

Слева: белый индикатор прогресса в приложении Southwest Airlines практически невозможно заметить, хотя он и расположен в самом центре экрана. Справа: аналогичный индикатор прогресса Kayak.com выглядит заметно, т.к. он расположен на контрастном фоне, который выделяет этот элемент относительно остального содержимого приложения.

Навигация и меню

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

vitalyoga-special-offerings

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

Фильтрация результатов

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

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

healthcaregov

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

Борьба со слепотой к изменениям:

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

  • Минимизация прерывания визуального восприятия путем избежания перезагрузки страницы, насколько это возможно.
  • Использование соответствующих визуальных акцентов (контрастность, размер, отступ) на важных новых элементах , чтобы гарантировать их заметность. (Используйте «проверку косоглазием»: отклонитесь назад и скосите глаза — вы видите новый элемент?)
  • Стратегическое размещение новых важных визуальных элементов ближе к точке, где уже сосредоточено внимание пользователя.
  • Возможность анимированных переходов, чтобы избежать мгновенных изменений, которые могут остаться незамеченными из-за прерывания; анимация может эффективно сообщать об изменениях в интерфейсе.

Оригинал: Change Blindness: Why People Don’t See What Designers Expect Them To See

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s