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

Что это такое и как это помогает конверсии и юзабилити программных продуктов, разбираемся вместе с авторами Smashing Magazine.

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

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

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

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

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

Явный аффорданс создается языковыми средствами или же физической формой. Надпись «Нажми!» предлагает нажать. Кнопка, которая выделяется из фона и при помощи теней выглядит как кнопка, на которую можно нажать, предлагает нажать на нее. Дверная ручка с надписью «Нажать вниз» предлагает нажать на нее. Поле текстового ввода «Введите комментарий» предлагает ввести комментарий. Во всех этих случаях аффорданс выражен явно и однозначно.

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

Элемент интерфейса PayPal очевиден — кнопка предполагает нажатие, а текст на ней (отправьте себе SMS со ссылкой на приложение) поясняет результат нажатия.

Также очевидна кнопка проигрывания видео на сайте CopyBlogger, поясненная надписью «Нажми, чтобы запустить видео».

Явный аффорданс особенно важен в следующих случаях:

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

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

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

Контекстный аффорданс

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

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

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

Контекстный аффорданс эффективно работает в сложных интерфейсах, позволяя быстрее разобраться с предназначением тех или иных элементов.

Наш мозг постоянно делает это, мысленно разбирая интерфейсы при взаимодействии с современными приложениями и страницами.

Вот, например, список аффордансов на странице Envato Studio:

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

Скрытый аффорданс

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

Такой подход полезен для упрощения интерфейса – когда функционал сложен, можно часть второстепенных элементов «спрятать», сделав их проявление зависимым от условий. Но в таком случае, конечно, есть риск, что посетитель никогда не сможет использовать скрытый элемент, просто не найдя его.

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

Аналогично этому, совершенно неуместны скрытые элементы на лендингах – там все должно быть предельно ясно и понятно, но вот приложение, которое пользователь купит и будет какое-то время осваивать его функционал, вполне может содержать неочевидные элементы.

Символический аффорданс

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

Некоторые символы зависят от контекста. Лупа в поле документа или изображения символизирует увеличение. Но рядом с полем ввода текста – поиск.

Использование символов сохраняет место – они короче, чем поясняющие надписи для явного аффорданса.

Важно тщательно выбирать символы. Вот пример:

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

Некоторые символы стали уже почти стандартными обозначениями определенного функционала. Телефонная трубка, конверт и т. п.

Символ «сердечко», например, может ссылаться на целый ряд аффордансов:

• Нажатие на него отмечает нечто как понравившееся мне
• Тот, кто разместил отмеченный мной объект, получит уведомление, что он мне нравится
• Оно позволяет мне сохранить отмеченный объект как «избранное»
• Я смогу получить доступ к коллекции избранных мной объектов

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

Ложный или отрицательный аффорданс

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

• Элемент выглядит как кнопка, но он не нажимается
• Логотип не возвращает пользователей в начало сайта
• Текст, похожий на ссылку (синий и с подчеркиванием) не является ссылкой
• Зеленая кнопка (подразумевающая создание чего-то) удаляет данные
• Слово серого цвета, обычно означающее отсутствие функционала содержит ссылку
• Конверт, ассоциирующийся с электронной почтой, отсылает SMS

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

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

В данном примере поле с паролем имеет серый цвет, что означает, что оно не может быть изменено. Для активации поля изменения пароля надо нажать кнопку «Сменить».

Если вы захотите использовать серую СТА-кнопку, посетители не будут на нее нажимать, думая, что она неработоспособна. Согласитесь, что в примере ниже вам кажется, что кнопка «visit our list of design services» не работает.

Итак, мы рассмотрели ряд типов аффорданса, способа, которым элементы интерфейсов сообщают пользователям о своем функционале:

• Явный аффорданс
• Контекстный аффорданс
• Скрытый аффорданс
• Символический аффорданс
• Ложный аффорданс

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

По материалам блога Smashing Magazine