Аффордансы – секретное оружие дизайнера

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

С помощью молотка мы применяем силу к объектам. Но вы знаете это благодаря его «указателям» (signifiers) . Ручка говорит нам о том, что мы можем схватиться за неё. Размер, форма и наружность молотка являются тонкими намёками на его предназначение. Допустим, вы не знаете, зачем нужен молоток. Но вы хотя бы сможете понять, как взять его в руку.

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

Форма должна предполагать функцию: Аффордансы vs. Указатели

Аффорданс — это то, что продукт может делать. Например, на сайте есть навигация. Но как пользователь узнаёт о наличии этой функции? Осознанный (очевидный) аффорданс — это предположение пользователя о том, как может работать навигация на сайте. И это предположение, конечно, должно совпадать с реальным аффордансом.

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

Давайте посмотрим на Behance. Их бесконечный скролл — один из способов представления навигации. Когда вы прокручиваете страницу вниз, появляется прелоадер в виде круга, прежде чем подгрузится больше контента. Прелоадер означает, что поток контента динамический. Без указателя мы могли бы быть сбиты с толку, когда откуда ни возьмись появился бы новый контент. А ведь нам казалось, будто страница кончилась.

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

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

Указатели бывают разных видов, каждый служит разным целям. Мы можем разделить их на 5 групп:

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

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

Явные указатели

Самый очевидный вид указателей. Явные указатели используют язык и внешние признаки для обозначения функции вещей. Что-то вроде кричащего текста «Нажмите сюда» определённо будет из этого вида.

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

На скриншоте из Copyblogger есть указание «click to play the video» — пример, когда использование явного указателя совсем не нужно, поскольку знак «play» хорошо передаёт смысл сообщения.

Итак, как же правильно применять явные указатели? Наташа Постоловска считает, что всё зависит от контекста. Явные указатели могут сделать настроение вашего продукта монотонным, а тон даже снисходительным. Вам следует использовать их только в следующих ситуациях:

Пользователи возможно не знакомы с распространёнными UI-паттернами. Если ваша целевая аудитория технически не подкована, или ваша технология новая и нераспространённая. Будучи явными, вы избавитесь от всех основных сложностей обучения.
Для действия не существует паттерна. Если нет другого способа объяснить действие, растолкуйте его для ваших пользователей. Хорошим примером будет приложение, где необходимо потянуть экран вниз для перезагрузки. Лучше всего будет написать что-то вроде: «Смахните вниз для перезагрузки».

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

На примере ниже из Interaction Design Best Practices CTA-кнопка — явный указатель. Применение текста «Start using it now!» — простейший способ передачи этой информации. Иконка с таким же значением была бы слишком неясной. Кнопка «Log In» тоже не подошла бы, потому что она подразумевает необходимость создания сначала нового аккаунта. Лучше всего выражаться ясным и понятным языком, поскольку предоставление электронной почты немедленно направляет вас в приложение.

Указатели-паттерны

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

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

Сайт Hulu отлично использует указатели-паттерны на своей главной странице. На изображении ниже вы заметите кликабельное лого, меню у верхнего края страницы, строку поиска с лупой, аккаунт-менеджера правом верхнем углу, стандартная кнопка проигрывания видео, слайдер со стрелкой-переключателем и пагинатор, указывающий на возможность прокрутки контента. Поскольку другие видео-хостинги как Youtube и Netflix используют похожие паттерны, такая тактика повышает узнаваемость (и тем самым лёгкость освоения) для пользователя.

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

Сильная сторона паттернов, однако, является и их слабостью. Всё по причине того, что их эффективность зависит от узнаваемости. Если вы работаете на молодую аудиторию (например, дети), далёких от техники людей (стариков или людей со недостаточным доступом к технике), вам лучше избегать использования паттернов.

Скрытые указатели

Вы когда-нибудь случайно наводили курсор на кусок текста, а он вдруг менял цвет, обнаруживая скрытую ссылку? Это пример скрытого указателя, тонкого, но полезного способа продемонстрировать функцию элемента. Если вы знакомы с Pinterest, то вы знаете, что опции взаимодействия с фото Pin, Send, и Like появляются, только когда вы наводите курсор на фото.

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

Когда можно пользоваться скрытыми указателями:

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

Когда не надо пользоваться скрытыми указателями:

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

Если вы сомневаетесь, как обозначить какое-либо действие, спросите себя, понравится ли пользователю ваш интерфейс, даже если он не узнает об этом действии. Если да, смело используйте скрытый указатель. К примеру, опция «Добавить в избранное» — это интеракция, помогающая распределять контент по приоритету, но её можно передать по-другому. Следовательно, вполне приемлемо выразить функцию «избранное» скрытым указателем.

Если хотите узнать больше о балансе минимализма и понятности, посмотрите эту полезную презентацию Дэна Саффера, основателя Kicker Studio.

Метафорические указатели

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

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

Большинство метафор являются частью меню/навигации приложения или сайта. Как видно ниже на примере из приложения *Chicago Works*, не так уж и плохо сочетать метафоры с текстом, если у вас не так много объектов. Комбинирование текста с визуальными подсказками помогает пользователям понимать функции гораздо быстрее.

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

Негативные указатели

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

Как правило, наиболее распространённый негативный указатель — это серый текст, как на примере выше из Photoshop. Умелое использование негативных указателей привлекает внимание к более доступным опциям; серый текст будто растворяется в фоне, в то время как чёрный кликабельный текст остаётся видимым. Применение серого текста для отображения недоступности настолько эффективно и популярно, что оно стало UI-паттерном.

Вывод

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

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

Джерри Чао — специалист по UX в области контентной стратегии в UXPin — сайт по созданию вайрфреймов и прототипов. Чтобы узнать больше о том, как создавать визуально удобные для восприятия интерфейсы, скачайте бесплатную электронную книгу Web UI Design for the Human Eye: Colors, Space, Contrast.