ПЕРЕВОДЫ
Слепота к изменениям
в UX: Определение
Aldiko для Android: при открытии меню элементы управления в правом верхнем углу экрана заменяются лупой. Инструмент поиска останется незамеченным, потому что (1) люди будут смотреть на расширенное меню, которое будет прямым результатом их действий; (2) они будут ожидать, что другие элементы экрана останутся неизменными (как это обычно происходит при взаимодействии с большинством пользовательских интерфейсов).

Также мы выявили, что желательно, чтобы окно поиска не заменялось иконкой “лупа” на рабочем столе. На экране мобильного устройства, однако, этот шаблон более удобен, чем на рабочем столе: наши исследования показывают, что инструмент “лупа” достаточно хорошо обнаруживается, даже когда окно поиска отсутствует. Однако, если окно поиска по умолчанию не видно, то при щелчке по иконке поиска, рядом с ним (а не на большом расстоянии друг от друга на экране) должно появиться текстовое поле, чтобы люди не пропустили его.
Университет Джона Хопкинса также использовал анимированную главную страницу и скрыл поиск под значком. Но, по крайней мере, он отображал поле поиска рядом со значком поиска и затемнял движущийся фон, чтобы уменьшить влияние конкурирующей анимации.

Полупрозрачные навигационные панели или плавающие кнопки, которые появляются в верхней части страницы, также находятся под угрозой остаться незамеченными, так как часто прокрутка страницы маскирует их. Надежда обычно возлагается на то, что люди заметят эти полосы и выберут одну из опций внутри них, вместо того, чтобы прокручивать страницу вверх. К сожалению, движение страницы может легко заблокировать движение, вызванное появлением полосы, особенно когда цвет полосы смешивается с цветом страницы, как в примере New York Times ниже.
Техасский университет A&M не только заменил поле поиска значком поиска, но также расположил текстовое поле поиска далеко от значка поиска. К тому же, анимация изображения главной страницы конкурирует с появлением окна поиска.
NYTimes для iPhone: В начале прокрутки вверх люди могут пропустить полупрозрачную панель навигации, которая появляется в верхней части экрана, потому что они сосредоточены на прокрутке страницы. Осложняющим фактором является то, что визуальные эффекты панели навигации недостаточно отличаются от содержимого страницы.
Резюме: Что такое слепота к изменениям и почему значительные перемены в продукте могут остаться незамеченными.

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

Так что же такое слепота к изменениям? В одном из самых известных фильмов всех времен Альфреда Хичкока "Психо", детектив Арбогаст смотрит на дом Нормана Бейтса, проецируемый на темное безоблачное небо. Камера возвращается к лицу детектива и следует за ним, когда он идет к дому. Сцена все еще темная, но небо внезапно затянулось облаками.

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

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

Определение: Слепота к изменениям - это склонность людей игнорировать изменения, которые происходят за пределами их внимания.

В психологии “слепоту к изменениям” лучше всего иллюстрирует серия экспериментов, проведенных в середине 1990-х годов. В этих экспериментах участникам показывали изображение сложной сцены в течение приблизительно 0,5 секунды. Затем дисплей выключали на долю секунды, и снова показывали то же изображение. Однако, при втором показе картинки, некоторые детали были изменены, например: объект изменил размер, цвет, был добавлен или удален элемент. Участники эксперимента должны были идентифицировать изменения на двух изображениях. В некоторых из этих исследований люди просматривали две версии много раз, пока смогли обнаружить изменение. Многим потребовалось 20 или 40 повторов, чтобы найти его.

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

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

Причины слепоты к изменениям

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

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

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

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


Слепота к изменениям в дизайне интерфейсов

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

Например, когда пользователь нажимает на меню-гамбургер в приложении Aldiko для Android, он ожидает, что изменения на экране будут связаны с этим действием, а именно, что новые элементы будут локализованы в области, охватывающей содержимое меню. Их глаза останутся в этой области, и они вряд ли заметят, что кнопка “выбора действия” в правом верхнем углу экрана была заменена на иконку поиска.
На мобильном сайте Chicago Tribune также используется панель навигации, которая появляется вверху страницы, когда люди начинают прокручивать страницу вверх. Однако в этом случае визуальный дизайн бара делает его более заметным.

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

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

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

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

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

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

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

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


Источник:

NN Group: Change Blindness in UX: Definition
ПРОФЕССИЯ
UX/UI ДИЗАЙНЕР
3-х месячный практический курс
от ведущей дизайн студии

скидка — 35% в этом месяце
ПОДЕЛИТЬСЯ МАТЕРИАЛОМ
ХОЧЕШЬ ПОЛУЧАТЬ ЛУЧШИЕ НОВОСТИ ПО ДИЗАЙНУ ЗА НЕДЕЛЮ?
ПЕРЕВОДЫ
Руководство по созданию вайрфреймов для мобильных приложений - 2020
ПЕРЕВОДЫ
Психология UX (часть 2)
ПЕРЕВОДЫ
Психология UX (часть 1)
© 2016 Your company
ПЕРЕВОДЫ
Слепота к изменениям
в UX: Определение
Aldiko для Android: при открытии меню элементы управления в правом верхнем углу экрана заменяются лупой. Инструмент поиска останется незамеченным, потому что (1) люди будут смотреть на расширенное меню, которое будет прямым результатом их действий; (2) они будут ожидать, что другие элементы экрана останутся неизменными (как это обычно происходит при взаимодействии с большинством пользовательских интерфейсов).

Также мы выявили, что желательно, чтобы окно поиска не заменялось иконкой “лупа” на рабочем столе. На экране мобильного устройства, однако, этот шаблон более удобен, чем на рабочем столе: наши исследования показывают, что инструмент “лупа” достаточно хорошо обнаруживается, даже когда окно поиска отсутствует. Однако, если окно поиска по умолчанию не видно, то при щелчке по иконке поиска, рядом с ним (а не на большом расстоянии друг от друга на экране) должно появиться текстовое поле, чтобы люди не пропустили его.
Университет Джона Хопкинса также использовал анимированную главную страницу и скрыл поиск под значком. Но, по крайней мере, он отображал поле поиска рядом со значком поиска и затемнял движущийся фон, чтобы уменьшить влияние конкурирующей анимации.

Полупрозрачные навигационные панели или плавающие кнопки, которые появляются в верхней части страницы, также находятся под угрозой остаться незамеченными, так как часто прокрутка страницы маскирует их. Надежда обычно возлагается на то, что люди заметят эти полосы и выберут одну из опций внутри них, вместо того, чтобы прокручивать страницу вверх. К сожалению, движение страницы может легко заблокировать движение, вызванное появлением полосы, особенно когда цвет полосы смешивается с цветом страницы, как в примере New York Times ниже.
Техасский университет A&M не только заменил поле поиска значком поиска, но также расположил текстовое поле поиска далеко от значка поиска. К тому же, анимация изображения главной страницы конкурирует с появлением окна поиска.
NYTimes для iPhone: В начале прокрутки вверх люди могут пропустить полупрозрачную панель навигации, которая появляется в верхней части экрана, потому что они сосредоточены на прокрутке страницы. Осложняющим фактором является то, что визуальные эффекты панели навигации недостаточно отличаются от содержимого страницы.
Резюме: Что такое слепота к изменениям и почему значительные перемены в продукте могут остаться незамеченными.

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

Так что же такое слепота к изменениям? В одном из самых известных фильмов всех времен Альфреда Хичкока "Психо", детектив Арбогаст смотрит на дом Нормана Бейтса, проецируемый на темное безоблачное небо. Камера возвращается к лицу детектива и следует за ним, когда он идет к дому. Сцена все еще темная, но небо внезапно затянулось облаками.

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

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

Определение: Слепота к изменениям - это склонность людей игнорировать изменения, которые происходят за пределами их внимания.

В психологии “слепоту к изменениям” лучше всего иллюстрирует серия экспериментов, проведенных в середине 1990-х годов. В этих экспериментах участникам показывали изображение сложной сцены в течение приблизительно 0,5 секунды. Затем дисплей выключали на долю секунды, и снова показывали то же изображение. Однако, при втором показе картинки, некоторые детали были изменены, например: объект изменил размер, цвет, был добавлен или удален элемент. Участники эксперимента должны были идентифицировать изменения на двух изображениях. В некоторых из этих исследований люди просматривали две версии много раз, пока смогли обнаружить изменение. Многим потребовалось 20 или 40 повторов, чтобы найти его.

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

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

Причины слепоты к изменениям

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

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

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

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


Слепота к изменениям в дизайне интерфейсов

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

Например, когда пользователь нажимает на меню-гамбургер в приложении Aldiko для Android, он ожидает, что изменения на экране будут связаны с этим действием, а именно, что новые элементы будут локализованы в области, охватывающей содержимое меню. Их глаза останутся в этой области, и они вряд ли заметят, что кнопка “выбора действия” в правом верхнем углу экрана была заменена на иконку поиска.
На мобильном сайте Chicago Tribune также используется панель навигации, которая появляется вверху страницы, когда люди начинают прокручивать страницу вверх. Однако в этом случае визуальный дизайн бара делает его более заметным.

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

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

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

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

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

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

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

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


Источник:

NN Group: Change Blindness in UX: Definition
ПРОФЕССИЯ
UX/UI ДИЗАЙНЕР
3-х месячный практический курс
от ведущей дизайн студии

скидка — 35% в этом месяце
ПОДЕЛИТЬСЯ МАТЕРИАЛОМ
ХОЧЕШЬ ПОЛУЧАТЬ ЛУЧШИЕ НОВОСТИ ЗА НЕДЕЛЮ?
ПЕРЕВОДЫ
Руководство по созданию вайрфреймов для мобильных приложений - 2020
ПЕРЕВОДЫ
Психология UX
(часть 2)
ПЕРЕВОДЫ
Психология UX
(часть 1)