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

Что представляет собой аффорданс?

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

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



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

Разновидности аффордансов

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

1. Явные — используют отсылки к хорошо знакомым вещам, намекающим на конкретное действие. Когда кнопка в приложении похожа на кнопку в реальном мире, мы понимаем, что на нее можно нажать. Надписи и иконки на ней говорят, что произойдет после этого.
2. Скрытые — появляются после совершения действия. Это могут быть подсказки, всплывающие при наведении курсора на элемент UI или, к примеру, выпадающее меню.

В зависимости от внешнего вида аффордансы бывают:

• Графические — показывают возможности интерфейса с помощью визуальных образов. К этой группе относятся фотографии, логотипы, иллюстрации, иконки, кнопки, поля ввода и уведомления. Графические аффордансы лучше всего воспринимаются и запоминаются пользователями.
  
  
  
• Текстовые — помогают с помощью типографической иерархии структурировать и донести информацию, которую невозможно передать в виде изображений (инструкции, пояснения, призывы к действию). Название пункта меню или подпись к картинке исключает некорректную интерпретацию элемента интерфейса.
• Аффордансы-паттерны используют нашу любовь ко всему привычному. Существует множество аффордансов-паттернов: кликабельные логотипы, ведущие на главную страницу, подчеркнутый текст ссылок, юридическая информация внизу экрана, 3 линии или вертикальные точки, скрывающие дополнительные функции или пункты меню.
• Анимированные – имитируют в цифровом пространстве наши действия в реальном мире: изменение цвета ссылки или кнопки при нажатии, перетаскивание объектов при копировании, смахивание экрана и другие действия.
• Негативные — их задача состоит в том, чтобы показать неактивное состояние элемента интерфейса.
• Ложные — подсказки-обманки, создающие у пользователей неверные ожидания от использования элемента. Иногда дизайнеры используют их специально, но обычно это ошибка, приводящая к разочарованию пользователей.

Как получить максимум пользы от аффордансов?

Чтобы аффордансы сделали интерфейс сайта или приложения интуитивным и удобным в использовании, они должны быть максимально оптимизированы под конкретный продукт и его аудиторию. Чтобы этого добиться, UX/UI-дизайнеру нужно:

1. Составить подробный профиль пользовательских задач.
   Разделите целевой маршрут пользователя по сайту или приложению на отдельные действия. Проанализируйте каждое из них и продумайте соответствующие аффордансы, чтобы облегчить задачу пользователя и ускорить принятие им решения. Далее останется соединить все части маршрута в единое целое и замкнуть его на целевое действие (кнопку оформления заказа, например).
   
   
   
2. Регулярно проводить А/В тестирования.
   После внедрения улучшений и доработок обязательно проводите A/B-тестирование и сравнивайте эффективность прежней и обновленной версий интерфейса. Такие проверки не только определяют более привлекательный для аудитории вариант, но и помогают определить новые направления для совершенствования юзабилити ресурса.

Заключение

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