Використання метафор у дизайні сайтів та інтерфесів
«Те, як ми думаємо, що ми відчуваємо, і що ми робимо щодня, значною мірою залежить від метафори». — Лакофф та Джонсон
Давайте подивимося, як можна використовувати метафори для поліпшення досвіду користувача (user expirience) на своєму сайті.
1. Метафори можуть показати незнайомі поняття у конкретних умовах
Почнемо з найпростіших та найпопулярніших метафор в інтернеті – це Іконки. Ці маленькі символи допомагають користувачам швидко зрозуміти концепцію. Іконки зазвичай посилаються на те, з чим ми знайомі у фізичному світі. Це допомагає прикріпити до інформації якусь знайому асоціацію.
Приклад: на сайті Startups, This Is How Design Works значоклампочки (мене осінило!) використовується для позначення слова інновації; значокгайкового ключа - для позначення виробництва чогось корисного; а значокпензля представляє «естетичне»:
Метафори можуть бути творчо використані для пояснення складних чи незвичайних концепцій. Погляньте на сторінку 404-ої помилки в блозі Х'ю Вілкінса:
Багато користувачів Інтернету не знають, що таке 404 помилка.
(І це нормально, до речі. Ви, шановний читачу, напевно досвідчений користувач інтернету. І все ж таки, ви можете не знати, наприклад, плюси та мінуси різних видів МДФ — зате це чудовознає мебляр. І йому може бути так само смішно, коли хтось цього не знає. Тому люди повинні спілкуватися між собою якомога зрозумілішою мовою, наводячи різні аналогії.)
Стандартні сторінки з 404-ою помилкою можуть збивати не дуже досвідчених користувачів з пантелику. Але тут замість технічних пояснень — чому запитувана сторінка не доступна, користувач бачить гумористичний образ біжучого ніндзя, що вкрав сторінку, що запитується.
Метафори ще можна використовуватиме пояснення процесу.
«Datashift» показує уявну машину, яка перетворює іконки різних соц. медіа в статистичні дані, що відображаються на екрані:
Звісно, це абстрактний процес. Але стає зрозумілим, які послуги компанія пропонує.
2. Метафори можуть створити знайомі відчуття
Ми любимо класифікувати речі (і боїмося невідомого). Щоразу, коли ми щось не дізнаємося, наш мозок намагається щосили, він хоче зрозуміти — на що ми дивимося.
(Ось чому гештальт-принципи можна застосовувати у дизайнерській роботі.)
Ми використовуємо шаблони, щоб отримати уявлення – чого очікувати. Впізнавання ментальних моделей допомагає нам зрозуміти та прийняти незнайомі речі. ІнтерфейсPaper (додаток для малювання на iPad), дозволяє використовувати етюдник - це метафора для створення знайомих асоціацій:
3. Метафори викликають емоції! :) :(
Враження зберігаються у пам'яті довше, ніж будь-яка інша інформація. Ви можете не запам'ятати, скільки коштувало морозиво, але запам'ятайте, що воно було дуже смачне!
Емоції зроблять ваш дизайн привабливим для людей, більш ефективним, приємним та незабутнім.
Як згадувалося вище, іконки допомагають нам зрозуміти абстрактні поняття.Але якщо їх перебільшити і розробити з душею, як на сайті Eye Bridge, вони теж викликають емоції:
Поки ми пов'язуємо абстрактну іконку — чашку кави з певним значенням або функцією, її детальне зображення змушує нас подумати ще й про смачну і гарячу каву. Таке двошарове смислове тістечко.
4. Метафори можуть привернути увагу користувачів
Метафори можна використовувати для привернення уваги до сайту в цілому, або дуже специфічних елементах на окремих веб-сторінках. Речі, які ми дізнаємося, привертають нашу увагу — так само, як ми дізнаємось знайомі обличчя у великому натовпі незнайомих людей.
Наприклад, у нас є асоціація з бейджиками – конференції та семінари. Іменний бейджики означають, що ви зареєстрований користувач. Ви заплатили за участь або маєте право на щось доступне лише небагатьом. Цю метафору можна використовувати на сайті (розроблена Meng To), щоб зробити реєстраційну форму привабливішою:
А Flourish вирішили використати дерево. Дерево пояснює, що вони роблять (разом із гаслом «Ми вирощуємо веб-сайти, що процвітають у найсуворіших кліматичних умовах»). Велике велике дерево посередині пустелі, які чудово почувається! Так вони свідчать про силу своїх послуг. Ілюстрація і метафора привабливі і незабутні.
5. Метафори можуть мотивувати користувачів до дій
Перекладаючи взаємодії, які ми знаємо з реального світу в інтернет, ми передаємо на екран наші знання щодо використання чогось. Завдяки цьому можна інтуїтивно зрозуміло, що робити.
Сайт Cascade Brewery Co пропонує класні метафори для навігації за меню:
Ще один чудовий спосіб підштовхнути дореєстрації - зворотний відлік тривалістю в одну хвилину:
Немає жодних попереджень — що станеться, коли закінчиться час? Але все одно, дуже цікаво, навіть із елементом ризику. А цікавість – одна з найсильніших мотивацій. Ще проявляється дух змагання — чи встигнемо чи ні?
Висновок
Метафори можуть стати потужним інструментом для поліпшення досвіду користувача (UX). Вони здатні:
- пояснити абстрактні чи складні поняття
- створити знайомі відчуття
- стати емоційним тригером
- звернути увагу на ваш сайт чи його окремі компоненти
- мотивувати користувачів щось зробити
Як ви використовуєте метафори у своїх проектах? Може ви бачили інші хороші приклади того, як метафори використовуються в інтернеті?