Что такое аффордансы и как они улучшают юзабилити25.07.2017 12:36

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

Наиболее близкий к реальности перевод английского термина affordance — это «возможность». Но истинное значение термина намного шире, поэтому в русском языке понятие аффорданса так и закрепилось без перевода.

Аффорданс — означает свойство объекта или среды, которое позволяет произвести с этим объектом или фрагментом среды те или иные действия © Википедия.

Если переводить на бытовой уровень: у чашки есть ручка за нее можно взять, если где-то есть кнопка на нее можно нажать, есть стул на него можно сесть — всё это аффордансы.

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

Программа обучения: «Проектирование интерфейсов: UX-дизайн от стратегии до тестирования»

Явные аффордансы

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

Хороший пример — кнопки «Купить», «Добавить в корзину» или «Оформить заказ» в интернет-магазинах.

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

Еще один пример — формы на сайтах с образцами заполнения полей.

Поля форм являются аффордансами, а текстовое пояснение делает их явными.

Паттерны

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

Обратите внимание на пример выше: паттерн складывается из нескольких аффордансов — заполнение полей формы и последующий клик по кнопке.

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

Неявные аффордансы

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

Скрытые

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

Вот как выглядит обычное фото ВКонтакте, если на него не наведен курсор:

Как только мы наводим на него активный курсор, появляются стрелки для перехода между изображениями — скрытые аффордансы:

А если мы передвинем курсор в верхнюю часть изображения — появится возможность лайкнуть фото — еще один скрытый аффорданс:

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

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

Метафорические

Еще один прием упрощения интерфейса не в ущерб возможностям и пользовательским сценариям — это использование метафор.

Взгляните еще раз на пример с лайком ВКонтакте:

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

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

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

К этой же категории относятся всевозможные иконки: конвертик — для отправки емейла, телефонная трубка — для звонка, крестик — для закрытия страницы или приложения и так далее.

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

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

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

Ложные аффордансы

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

Примеры ложных аффордансов:

  • некликабельный логотип или переход по клику на логотип на страницу, отличную от главной;

  • оформление обычного текста в виде ссылки или некликабельные ссылки в тексте;

  • горизонтальная прокрутка сайта при скролле и т.д.

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

Читать еще: «Что такое UX-аналитика»

Оптимизация аффордансов

Для оптимизации аффордансов можно применять два подхода: по отдельности или совместно.

  1. Составление профилей задач.

Раскладывание пользовательского сценария на отдельные действия и анализ их с позиции приоритета, частоты и сложности.

  1. Проведение живых тестов.

Изучение мнения пользователей об интерфейсе и анализ их отзывов о взаимодействии с ним.

Оба подхода можно объединить для получения более точной и объективной информации.

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Полный текст статьи читайте на Нетология