Аффорданс

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

Аффорданс

Основой для большинства цифровых аффордансов стали физические объекты. Например, данные, которые хранятся в памяти компьютера, называются файлами, а файлы сгруппированы в папки. Как мы используем реальную папку? Мы открываем ее. Поэтому можно легко найти нужную команду для доступа к цифровым папкам — «Открыть». Такие аффордансы существуют уже более 70 лет.

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

Некоторые примеры аффордансов из реального мира:

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

Некоторые примеры аффордансов в интерфейсах:

  • Когда вы видите поле ввода, вы понимаете что его можно заполнить текстом
  • Синий цвет и подчёркивание говорят о том, что текст является ссылкой
  • Вы знаете, что курсор мыши — наклонный треугольник с хвостом, а при наведении на ссылку он превращается в перчатку Микки Мауса на macOS или в руку с торчащим пальцем на Windows
  • Лупа возле поля ввода сигнализирует о том, что на сайте есть функция поиска

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

Книги

Книга Дональда Нормана «Дизайн вещей будущего»

Пара цитат из книги:

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

Книга Дональда Нормана «Дизайн вещей будущего»
Аффорданс

Статьи

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

Аффорданс

Перевод практической статьи Марины Яланска из блога Tubik «Аффордансы в дизайне интерфейсов». В статье автор классифицирует аффордансы по принципу работы и по внешнему виду, а также подробно рассказывает о том, как использовать аффордансы в интерфейсах.

Аффорданс

Статья 65pixels «Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 1». В ней авторы рассказывают, как с помощью аффордансов можно вести пользователя по интерфейсу и какие типичные ошибки допускают дизайнеры при работе с аффордансами.

Аффорданс

Примеры аффордансов

<i>По форме кнопки внизу понятно, что она кликабельна, а текст внутри предлагает зарегистрироваться, чтобы получить 10% скидку на первый заказ</i>
По форме кнопки внизу понятно, что она кликабельна, а текст внутри предлагает зарегистрироваться, чтобы получить 10% скидку на первый заказ
<i>За кнопкой-гамбургером скрывается полное меню сайта</i>
За кнопкой-гамбургером скрывается полное меню сайта
<i>Форма объекта, иконка-лупа и плейсхолдер с надписью «Search recipes» (найти рецепты) дают понять: перед вами поле ввода</i>
Форма объекта, иконка-лупа и плейсхолдер с надписью «Search recipes» (найти рецепты) дают понять: перед вами поле ввода
<i>Активная кнопка на панели вкладок становится цветной, а другие представляют собой негативные аффордансы</i>
Активная кнопка на панели вкладок становится цветной, а другие представляют собой негативные аффордансы
<i>Кнопка — один из главных интерактивных элементов в физическом и цифровом мирах. Распознать её помогут особая форма, контрастность, цвет или текстовая подпись</i>
Кнопка — один из главных интерактивных элементов в физическом и цифровом мирах. Распознать её помогут особая форма, контрастность, цвет или текстовая подпись

Больше переводных статей, инструментов и вдохновения для дизайнеров — в нашем телеграм-канале.

77
Начать дискуссию