Не секрет, что конверсия сайта во многом зависит от удобства взаимодействия с ним. Но не все люди одинаково хорошо владеют навыками работы и с десктопными, и с мобильными сайтами и приложениями. Как им помочь, не раздражая опытных пользователей, расскажем в статье.
Аффорданс в психологии и интерфейсе
Этот термин, предложенный психологом Джеймсом Гибсоном, не имеет точного перевода на русский язык. Он означает восприятие человеком предмета на основе впечатления от его внешнего вида и прошлого опыта. Так, представление об удобстве стула формируется с учетом его размера, высоты и обивки еще до проверки предположения на практике.
Применительно к разработке интерфейса сайта это понятие начал использовать Дональд Норман. В этом случае аффорданс является подсказкой или указателем на функциональность того или иного элемента. Самые распространенные примеры – стрелки выпадающего меню или текстовые призывы к действию. Глядя на них, пользователь понимает, какое действие требуется совершить, и что после этого произойдет. Помимо таких явных аффордансов, существуют скрытые, метафорические и так называемые негативные указатели, помогающие посетителям сориентироваться на сайте. Все они могут использоваться для упрощения навигации и, как следствие, повышения конверсии сайта.
Аффорданс в теории и на практике
На одном сайте могут присутствовать несколько видов аффордансов, и каждый из них будет полезен посетителям, если действительно находится на своем месте. В одних случаях требуются прямые указания, в других достаточно скрытых подсказок. Поэтому для начала следует разобраться, какие виды аффордансов существуют, и для чего они могут применяться.
Явные, или прямые, указатели
Эти подсказки призваны показать, как посетитель сайта или пользователь приложения может совершить нужное ему (или продавцу) действие. «Выпуклые» кнопки с призывом к действию, текст в полях для заполнения форм, подписи визуальных элементов – явные аффордансы, точно и недвусмысленно указывающие на назначение элемента.
Способы применения очевидны: предложения купить, оформить заказ или подписку, посмотреть товары или перейти в «корзину» необходимы и без аффордансов нереализуемы. Но явные указатели нужны и в других случаях. Если известно, что аудитория сайта слабо знакома даже с самой типичной навигацией, понадобятся подсказки. Без указателей сложно обойтись и на сайтах, где оригинальность дизайна превалирует над интуитивной понятностью интерфейса. И, наконец, предлагая пользователям новое приложение, стоит объяснить, как оно работает.
Чтобы не перегрузить страницы, можно использовать сочетание текста аффорданса с визуальным элементом. Так опытные пользователи поймут, куда нужно кликать, увидев картинку, а остальные смогут сориентироваться на сайте, прочитав подписи.
Метафорические, или символические, указатели
Это тоже весьма распространенный вид подсказок. Предполагается, что пользователь поймет назначение элемента, потому что видел его раньше на других сайтах. Пример – изображение конверта в поле подписки на рассылку, которое с первого взгляда ассоциируется с электронной почтой. Или кнопка call-back виджета с телефонной трубкой.
Чаще всего такие аффордансы используются для оформления главного меню и ссылок на типовые разделы сайта. Поэтому важно правильно подобрать изображение. Допустим, силуэт в платье может трактоваться как символ и каталога платьев, и раздела с женской одеждой вообще. При этом символические указатели могут одинаково восприниматься независимо от тематики и контента или зависеть от содержания страницы.
Скрытые указатели
Такие подсказки или элементы навигации появляются после совершения какого-либо действия, чаще всего – наведения курсора. Они призваны спрятать дополнительные функции, которые перегрузили бы страницу или отвлекли бы внимание пользователей от главного контента.
Использовать такие аффордансы следует осторожно: если действие, вызывающие появление указателя, совершается редко, пользователи могут так и не узнать о скрытых возможностях.
Негативные указатели
Назначение этих подсказок – показать, что пункт меню или другой элемент в настоящее время неактивен. Как правило, это бледные или «утопленные» кнопки и текст серого цвета. Такое оформление достаточно распространено и привычно для большинства пользователей. Если же человек впервые видит подобный элемент, контраст с другими кнопками и полями должен выступить как дополнительная подсказка.
Поэтому настоятельно не рекомендуется выбирать подобное оформление для кнопок и полей, которые всегда доступны для взаимодействия. Каким бы новаторским ни было дизайнерское решение, пересилить привычку ему вряд ли удастся.
Аффорданс в контексте
При использовании аффордансов важно не допускать двоякого толкования и учитывать опыт целевой аудитории. Конечно, подсказок, распознающихся почти моментально, уже достаточно много, но это не значит, что они знакомы абсолютно всем. И нужно учитывать, как тот или иной символ воспринимается на конкретном сайте.
Например, привычный «конверт», символизирующий электронную почту, может быть как визуальным элементом, привлекающим внимание к форме подписки на рассылку, так и ссылкой для перехода к отправке сообщения сотрудникам компании. Поэтому нужно проверять, правильно ли посетители сайта трактуют подобные элементы.
Но именно контекст позволяет использовать символические аффордансы нетипичным образом, при условии, что у посетителей сайта формируется правильный ассоциативный ряд. Если же аудитория консервативна, лучше выбирать привычные элементы, интуитивно понятные каждому, и не экспериментировать.
Вывод
Сочетание аффордансов облегчает понимание возможных способов взаимодействия с сайтом, не перегружая страницу инструкциями и многословными названиями разделов. Но излишний «символизм» может помешать пользователям, поэтому подобные элементы нельзя оставлять без внимания. В конце концов, посетители, не понявшие метафору, просто не совершат нужное действие.
