Отечественный разум может поразительно скоро и совершенно верно справляться с одними задачами, но одновременно с этим он частенько терпит неудачу при ответе вторых. В понимании обстоятельств этого феномена кроется ключ к созданию действенных интерфейсов. К примеру, недавние изучения продемонстрировали, что люди довольно часто не подмечают трансформаций в подробностях изображения.
Вы имеете возможность сами в этом убедиться при помощи теста на «слепоту к трансформациям».
Слепота к трансформациям (change blindness) — это склонность человека упускать из вида перемены в изображениях, в особенности в то время, когда подобные коррекции появляются по окончании таковой визуальной помехи, как мерцающий экран.
Возможность происхождения этого феномена обусловлена двумя ответственными факторами:
1. Обрыв зрительного восприятия, что может случиться на протяжении перезагрузки страницы либо моргания, при стремительном перемещении глаз от одной точки фиксации к второй либо в момент трансформации положения дисплея с вертикального на горизонтальное.
2. Скорость: мгновенные трансформации в визуальных подробностях, наверное, замаскируются кроме того краткосрочными обрывами. В большинстве случаев, моргание глаза продолжается 300-400 миллисекунд, а слепота к трансформациям констатируется, кроме того в то время, когда изображение прерывают на 67 миллисекунд.
Оба этих фактора считаются общепринятыми для цифрового опыта, где визуальные элементы исчезают и появляются фактически мгновенно.
Но другие нюансы, наподобие внимания и неспециализированного визуального беспорядка, кроме этого играются ключевую роль, в то время, когда речь заходит о слепоте к трансформациям. По сути, в момент происхождения на дисплее любого трансформации вы подвергаетесь риску просмотреть его.
К примеру, на мобильном сайте Vans.com при выборе недоступного размера обуви либо одежды надпись «Add to cart» изменяется на «Out of stock». Но столь маленькая текстовая коррекция остается незаметной на фоне одного и того же интерфейса.
Vans.com: сообщение «Out of stock» было потеряно из виду, поскольку оно фактически ничем не отличалось от кнопки «Add to cart» и пребывало через чур на большом растоянии от главных территорий концентрации внимания пользователей (полей «Size» и «Quantity»)
Кроме того в случае если визитёры в итоге увидят новую подробность, эта мимолетная задержка поднимет неспециализированную «цена сотрудничества» (interaction cost). В действительности, кое-какие дизайнерские элементы особенно уязвимы перед слепотой к трансформациям, и потому должны разрабатываться с мыслью об этом явлении.
- Создание сайтов на базе online психологии
Сообщения об неточности и уведомления о статусе
Вовсе неудивительно, что как правило сообщения об неточностях подвергаются эффекту слепоты к трансформациям. Пользователь только что подтвердил форму, экран обновляется, а содержимое страницы дополняется всего лишь одним новым элементом.
На размещенном ниже примере Goodsourcing.com отображается ответственная неточность: уведомление о сбое передачи данных, которое информирует пользователя о том, что необходимое для заполнения поле «Job Title» выяснилось безлюдным. Но, кроме того столь ответственное сообщение возможно с легкостью потерять из виду, поскольку его визуальное представление замечательно вписывается в макет страницы.
Уведомление о сбое передачи данных в регистрационной форме (над заголовком «Member Registration») Goodsourcing.com отображается на странице по окончании ее обновления, но просто маскируется благодаря феномену слепоты к трансформациям.
Индикаторы прогресса либо статусные сообщения, доносящие до пользователей данные о текущем состоянии совокупности, кроме этого частенько упускаются из виду, потому, что эти небольшие визуальные элементы дополняют привычный вид дисплея. Кроме того таковой анимированный индикатор загрузки, как белый круг в центре приложения Southwest Airlines, возможно проглядеть, если он не выделяется на фоне содержимого экрана.
Слева: белый индикатор загрузки в приложении Southwest Airlines фактически нереально разглядеть, кроме того в то время, когда он находится в центре экрана. Справа: совершенно верно такой же индикатор на сайте Kayak.com заметен благодаря контрастному фоновому выделению, которое отличается от бэкграунда самого приложения.
- Привлеките внимание за счет дизайна, либо Принцип 3W!
Навигационные панели и меню
Навигационные панели кроме этого довольно часто становятся жертвами результата слепоты к трансформациям. Не смотря на то, что эти элементы очень важны, все же маркетологи довольно часто размещают их по краям макета, дабы пользователи имели возможность сосредоточиться на контенте посадочной страницы. Но на границах поля зрения люди менее чувствительны к малым трансформациям.
Нижеприведенный пример воображает навигацию в единой визуальной обработке, но в разных разделах сайта метки некоторых ссылок выглядят по-различному. Применение единого визуального навигационного стиля с различными ссылками в отдельных категориях сайта — это привычный и в полной мере понятный дизайнерский прием.
Но в этом конкретном случае необыкновенное размещение внутренней навигации в правом сайдбаре и неспециализированный визуальный беспорядок отвлекают внимание пользователей от навигационной структуры в целом. Да и подметить трансформации в ссылках при переходе на другую страницу тут еще сложнее.
Навигационная панель в правом сайдбаре изменяется на каждой странице сайта, но подметить эти дизайнерские ухищрения достаточно сложно.
- 5 обычных неточностей навигации сайта
Фильтры поиска
Для сокращения перечня взятых результатов оптимальнее всего применять фильтры, но додавать данный инструмент к функционалу сайта необходимо очень осторожно. Люди предпочитают пользоваться стремительной совокупностью поиска, дабы минимизировать собственные временные затраты, но в случае если отсев результатов случится мгновенно, они смогут попросту не подметить совершённых трансформаций.
Сайт Healthcore.gov удачно справляется с данной распространенной проблемой: фильтры задействуются конкретно в момент клика, не требуя от пользователей исполнения дополнительных действий.
Но дабы сделать отсев результатов более заметным, о применении фильтров тут информирует короткий визуальный индикатор: сообщение «Please wait» и серый оверлей-экран.
Сайт Healthcore.gov уверенный в том, что пользователи подмечают трансформации в итогах благодаря сообщению «Please wait», всплывающему в момент включения фильтров.
- Поведенческая психология, либо 3 метода подтолкнуть визитёра к конверсии
Борьба со слепотой к трансформациям
События, содействующие происхождению данного феномена, так распространены, что методы устранения данной неприятности должны быть знамениты любому веб-дизайнеру. Каждую из нижеприведенных методик направляться использовать в разных обстановках:
- Сократите к минимуму визуальные обрывы, избегая лишних обновлений страниц.
- Применяйте соответствующие визуальные выговоры для новых элементов (такие как контраст, отступ и размер), дабы убедиться в их заметности. Совершите «тест на прищуривание» и выясните, выделяется ли ваше новшество на неспециализированном фоне, в то время, когда вы откидываетесь назад и прищуриваете глаза?
- Старайтесь размещать серьёзные визуальные элементы рядом от территории концентрации внимания ваших пользователей.
- Задействуйте анимированные переходы, дабы избежать мгновенных трансформаций, каковые возможно потерять из виду по окончании визуального прерывания; анимация сможет растолковать визитёрам перемены в интерфейсе.
Слепота к трансформациям — это только один из многих психотерапевтических феноменов, оказывающих влияние на пользовательский опыт. Уделите больше времени изучению этих любопытных явлений и примените полученные знания для улучшения собственного сайта.
Высоких вам конверсий!
По данным: nngroup.com, Image source: jjs08
Случайные статьи:
МС ХОВАНСКИЙ & BIG RUSSIAN BOSS — Кто, если не Мы
Подборка похожих статей:
-
Почему маркетологам не стоит бояться «баннерной слепоты»?
Одним из самые удручающих фактов в сфере интернет-маркетинга есть то, что пользователи фактически не обращают внимания на контент рекламного характера. В…
-
5 Причин, почему плоский дизайн способствует увеличению конверсии
Термин «плоский дизайн» (от англ. flat design) на данный момент на слуху у каждого, кто занимается проектированием пользовательского опыта. В последние…
-
Почему частые запросы на продление триала — плохой знак?
Один из самые спорных вопросов для любого облачного бизнеса — это длительность триала и возможность его продления. На какой срок направляться давать…
-
Аутентичность vs красота: почему вам не нужен такой же дизайн, как у apple
Компания Apple доказала, что красота не только трудится, но и реализовывает. Объединив технологии и дизайн, Apple прошли путь от нишевого бренда для…