Найти тему
Black Caviar Games

Аффордансы и их использование

Оглавление

Аффорданс (от английского to afford) - это “манящее или приглашающее качество воспринимаемых предметов и событий”. Или “интуитивно понятное (объективное или ощущаемое, воспринимаемое) свойство объекта (среды, интерфейса), указывающее на то, каким образом следует взаимодействовать с данным объектом или использовать его”. Ввел термин психолог Джеймсон Гибсон в книге «The Senses Considered as Perceptual Systems» (1966).

Сложно? Глядя на кружку, вы сразу же понимаете, что ее можно взять за ручку и выпить налитый в нее напиток. Видя кнопку “купить” на сайте интернет-магазина - что нажатие приведет на страницу с оформлением заказа.

-2

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

Аффордансы в дизайне интерфейсов

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

-3

Мы ожидаем от интерфейсов удобства и красоты, причем чаще отдаем предпочтение первому. Это происходит потому, что понятное - значит, знакомое и практичное, но не обязательно оригинальное. Задача UX/UI-дизайнера - сделать кнопки и переключатели похожими на те, которые пользователь видит на реальных приборах.

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

Аффордансы в геймдизайне

-4

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

Классификация аффордансов

Явные и неявные (скрытые)

-5

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

Текстовые и графические

-6

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

Паттерны

-7

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

Истинные и ложные

-8

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

Зачем мне знать про аффордансы?

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

Источники:

1. 65 pixels. Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 1 - https://vc.ru/design/198754-pochemu-krasivoe-kazhetsya-udobnym-razbiraem-interfeysy-s-tochki-zreniya-nauki-chast-1

2. Денис Нарижный. Что такое аффордансы и как они улучшают юзабилити - https://netology.ru/blog/affordance-usability

3. Марина Яланска. Аффордансы в дизайне интерфейсов (перевод Яна Австрейха) - https://awdee.ru/affordances-in-ui/

#Аффорданс #Классификацияаффордансов #дизайнинтерфейсов