1 3 1160x620 - Аффордансы в дизайне. Дизайн привычных вещей

Секретный код встроен в каждое приложение, веб-сайт и интерфейс, который вы используете. Под вашими пальцами скрыт мир, по которому путешествуют дизайнеры интерфейсов, оказавшиеся заложниками в войне между сложностями технологий и стремительным развитием потребностей пользователей. Эти дизайнеры загадочно изъясняются неологизмами (squircle, sharrow, neumorphism) и шибболетами на тему еды (hamburger menu или meatball menu? Candy bar или toast?).

Их код состоит из вещей, называемых аффордансами. Те, кто свободно говорит на языке аффордансов, обладает интуитивным пониманием того, как работает дизайн.

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

История аффордансов

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

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

ux research big - Аффордансы в дизайне. Дизайн привычных вещей

Профессиональная подготовка UX-исследователей

Научитесь определять потребности пользователей! 3 месяца обучения, ведущие эксперты, удостоверение о повышении квалификации НИУ ВШЭ, менторство
Узнать подробнее

Исследования Нормана в области юзабилити-дизайна, дизайна, ориентированного на человека и универсального дизайна, стали основой современного цифрового продуктового дизайна. Но концепция аффордансов обрела жизнь сама по себе. Дизайнеры взяли первоначальное определение и немного изменили его: сегодня дизайнеры используют «аффордансы» для обозначения «свойств объектов, которые показывают пользователям действия, которые они могут предпринять».3

Вот пример аффордансов в реальном мире:

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

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

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

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

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

Наши телефоны, ноутбуки, планшеты, часы и наушники имеют так много функций, что многие взаимодействия по умолчанию являются цифровыми. Как выглядит хороший аффорданс в цифровом мире? Если хорошие аффордансы – это те, которые соответствуют характеру взаимодействия, что происходит, когда взаимодействие осуществляется пальцем (или указателем мыши) на плоской стеклянной поверхности?

Эволюция аффордансов

Дизайнерам первых компьютеров нужно было выяснить, как выглядят хорошие цифровые аффордансы. Большинство встроенных в интерфейсы подсказок основаны на знакомых физических объектах: вещи, хранящиеся в памяти вашего компьютера, называются файлами, а файлы сгруппированы в папки. Как вы используете реальную папку? Вы открываете ее. Мы можем легко найти нужную команду для доступа к цифровым папкам, потому что она называется «Открыть». Эти аффордансы существуют уже более 70 лет.4

Некоторым дизайнерам приходилось иметь дело с совершенно новыми функциями, не имевшими аналогов в реальном мире. Например, как представить гиперссылку – фрагмент текста, плавно соединяющий два документа вместе? Тим Бернерс-Ли, изобретатель Всемирной паутины, должен был это выяснить. Он выбрал синее подчеркивание. Но нет причин, по которым синий цвет означает «ссылку»:

Я думаю, что первый WWW-клиент … использовал только подчеркивание для представления ссылки, поскольку это была дополнительная форма выделения, которая не так часто используется в реальных документах. Синий появился, когда браузеры стали цветными – я не помню, в какой из них первым использовался синий цвет.5

Подобным образом на заре Интернета создавались сотни аффордансов. URL-адрес страницы размещается вверху. Текст отображается в столбце с вертикальной прокруткой. Рядом с выпадающим меню есть треугольник, указывающий вниз. Курсор мыши представляет собой наклонный треугольник с хвостом, а когда вы наводите курсор на ссылку, он похож на перчатку Микки Мауса.6

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

Это второе определение хороших аффордансов: некоторые аффордансы полезны не потому что они естественны, а потому что стали нормой. Дизайнеры используют общепризнанные иконки, паттерны, метки и макеты, чтобы новым пользователям было проще находить и использовать функции. Как выразился Якоб Нильсен:

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

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

Как дизайнеры используют аффордансы

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

Создавайте дизайн множества однотипных вещей – футболок, плакатов, страниц MySpace – и начнете распознавать общие элементы. Распознавание аффордансов не гарантирует, что вы будете детально понимать почему они работают, но, по крайней мере, многие неопытные дизайнеры могут определить, как они работают.

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

Но иногда аффордансы существуют без очевидной причины. Поскольку я снова и снова использую одни и те же аффордансы, я задаюсь вопросом: «Действительно ли это правильный способ делать что-то?» По мере того, как Интернет существует уже четвертое или пятое десятилетие,9 многие дизайнеры отказываются от аффордансов, которые когда-то считались само собой разумеющимися. Например, Google находится в эпицентре битвы за уничтожение URL-адреса, одного из немногих сохранившихся аффордансов, которые отличают веб-страницу от приложения.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Аффордансы в дизайне. Дизайн привычных вещей
Гамбургер-меню (hamburger menu), митболл-меню (meatball menu) и бэнто-бокс меню (bento box menu)

Аффордансы повсюду

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

Аффордансы – это скрытый язык дизайна интерфейсов. Неправильное использование аффордансов может замедлить рост компании, как это известно на примере Snapchat.12 Правильное их использование приносит прибыль в миллионымиллиарды, и триллионы долларов.

По этой причине аффорданс всегда будет частью дизайна привычных вещей.

Оригинал: matthewstrom.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

47 важных советов для UI и UX дизайнеров

Эта статья – список важных советов для UI / UX дизайнеров, дизайнеров взаимодействия или продуктовых дизайнеров любого уровня

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы