Цей термін був вперше запропонований психологом Джеймсом Гібсоном, потім був застосований до теорії комп'ютерних інтерфейсів Дональдом Норманом в його книзі «Психологія речей, які нас оточують», відомим керівництвом в області промислового дизайну і розробки додатків.
Аффорданс (affordance) - цей термін не має усталеного перекладу на російську мову. Інтуїтивна зрозумілість призначення, очевидна функціональність, зручність використання, і т. П. - всі ці поняття, описують те, що розуміється під аффордансом.
Складно переоцінити його значення для розуміння того, як створювати ефективні продають сторінки, привабливі для користувачів інтерфейси. Під аффордансом розуміють візуально визначається властивість предмета або елемент дизайну, який повідомляє користувачеві про те, що предмет або елемент можна використовувати таким собі конкретним чином. Наприклад, форма, висота і глибина горизонтальній поверхні можуть натякати на те, що на ній можна сидіти. Або елемент дизайну, який має вигляд звичної всім кнопки, повідомляє тим самим, що на нього слід натискати.
Саме тому на аффорданс треба звертати більше уваги. Ну і, звичайно ж, розуміти, які типи аффордансов є і як їх краще всього використовувати.
явний аффорданс
Ці речі очевидні тому, що у користувача є чітке розуміння, як можна взаємодіяти з даними елементом, навіть якщо він ніколи раніше не бачив такого в інтерфейсах.
Елемент інтерфейсу PayPal очевидний - кнопка передбачає натискання, а текст на ній (надішліть собі SMS з посиланням на додаток) пояснює результат натискання.
Явний аффорданс особливо важливий в наступних випадках:
Ну і, звичайно, потрібно знати міру. Якщо ви пропонуєте свої додатки людям з достатнім досвідом, то кожен раз пояснювати, що ось на це посилання треба клікнути, а тут ось треба ввести текст, буде зайвим.
контекстний аффорданс
Ми дізнаємося в смузі вгорі екрану з окремими словами навігаційне меню. Ми розпізнаємо в окремій фразі в прямокутній рамці, виділеної тінями, кнопку і розуміємо, що на неї треба натискати. А стрілка вниз поруч з посиланням або фразою вимагає розкриття списку.
Контекстний аффорданс ефективно працює в складних інтерфейсів, дозволяючи швидше розібратися з призначенням тих чи інших елементів.
Наш мозок постійно робить це, подумки розбираючи інтерфейси при взаємодії з сучасними програмами і сторінками.
Ось, наприклад, список аффордансов на сторінці Envato Studio:
Але, звичайно, знову ж таки, все залежить від досвіду користувачів. Якщо ви робите інтерфейс для технічно грамотних відвідувачів, які мають великий досвід спілкування з додатками і сторінками, тут варто максимально використовувати усталені звички взаємодії, наголошуючи переважно на контекстний аффорданс. А якщо для тих, у кого такий досвід є недостатнім - для дітей, і т. П. То тут багато аффорданси повинні бути явними для полегшення впізнавання.
Такий підхід корисний для спрощення інтерфейсу - коли функціонал складний, можна частину другорядних елементів «заховати», зробивши їх прояв залежним від умов. Але в такому випадку, звичайно, є ризик, що відвідувач ніколи не зможе використовувати прихований елемент, просто не знайшовши його.
Приховані елементи треба застосовувати з розумінням їх місця і важливості - одна справа, коли кнопка «Подобається» з'являється при наведенні курсору на зображення, інша справа, коли доступ в саму галерею стає можливий тільки після якихось подібних дій на сторінці. Ніколи не використовуйте прихований аффорданс для принципово важливих функцій.
Аналогічно цьому, абсолютно недоречні приховані елементи на Лендінзі - там все повинно бути гранично ясно і зрозуміло, але ось додаток, яке користувач купить і буде якийсь час освоювати його функціонал, цілком може містити неочевидні елементи.
Деякі символи залежать від контексту. Лупа в поле документа або зображення символізує збільшення. Але поряд з полем введення тексту - пошук.
Використання символів зберігає місце - вони коротші, ніж пояснюючі написи для явного аффорданса.
Важливо ретельно вибирати символи. Ось приклад:
Погодьтеся, символ автомобіля погано пояснює, що за допомогою цієї кнопки належить поділитися інформацією про направлення або місцезнаходження. Тут краще підійшов би символ карти.
Символ «сердечко», наприклад, може посилатися на цілий ряд аффордансов:
- Натискання на нього зазначає щось як вподобане мені
- Той, хто розмістив зазначений мною об'єкт, отримає повідомлення, що він мені подобається
- Воно дозволяє мені зберегти зазначений об'єкт як «вибране»
- Я зможу отримати доступ до колекції обраних мною об'єктів
Інший приклад - символ посилання, два зчеплених ланки ланцюга. Приклад нижче показує, що навіть невелика стилізація цього символу, перетворення його в знак нескінченності ламає стереотип і шаблон сприйняття:
Помилковий або негативний аффорданс
Бувають ситуації, коли елемент своїм виглядом повідомляє нам одне, а дизайнер використовує його зовсім інакше:
- Елемент виглядає як кнопка, але він не натискається
- Логотип не повертає користувачів в початок сайту
- Текст, схожий на посилання (синій і з підкресленням) не є посиланням
- Зелена кнопка (що передбачає створення чогось) видаляє дані
- Слово сірого кольору, зазвичай означає відсутність функціоналу містить посилання
- Конверт, що асоціюється з електронною поштою, відсилає SMS
Це може сильно заплутати користувачів і, звичайно ж, таких речей треба уникати. Якими б привабливими при цьому не здавалися дизайнерські ідеї.
Іншим прикладом може бути використання світло-сірого кольору в активних елементах сайту. Як правило, в інтерфейсах елемент, тимчасово функціональний, виділяється світло-сірим кольором:
В даному прикладі поле з паролем має сірий колір, що означає, що воно не може бути змінено. Для активації поля зміни пароля треба натиснути кнопку «Змінити».
Якщо ви захочете використовувати сіру СТА-кнопку, відвідувачі не будуть на неї натискати, думаючи, що вона непрацездатна. Погодьтеся, що в прикладі нижче вам здається, що кнопка «visit our list of design services» не працює.
Отже, ми розглянули ряд типів аффорданса, способу, яким елементи інтерфейсів повідомляють користувачам про свій функціонал:
- явний аффорданс
- контекстний аффорданс
- прихований аффорданс
- символічний аффорданс
- помилковий аффорданс
Вибирайте правильний тип для своєї ситуації і уникайте типових помилок, про які ми говорили вище.