Перейти до основного вмісту
Change page

7 евристик для дизайну інтерфейсів Web3

Евристики зручності використання (юзабіліті) — це загальні «практичні правила», які можна використовувати для оцінки зручності вашого сайту. Наведені тут 7 евристик спеціально адаптовані для Web3 і мають використовуватися разом із 10 загальними принципами дизайну взаємодії (opens in a new tab) Якоба Нільсена.

Сім евристик зручності використання для Web3

  1. Зворотний зв'язок після дії
  2. Безпека та довіра
  3. Найважливіша інформація є очевидною
  4. Зрозуміла термінологія
  5. Дії максимально короткі
  6. Мережеві з'єднання видимі та гнучкі
  7. Керування з додатка, а не з гаманця

Визначення та приклади

1. Зворотний зв'язок після дії

Має бути очевидно, коли щось сталося або відбувається.

Користувачі приймають рішення щодо своїх наступних кроків на основі результатів попередніх. Тому вкрай важливо, щоб вони залишалися поінформованими про стан системи. Це особливо важливо у Web3, оскільки транзакціям іноді потрібен певний час для запису в блокчейн. Якщо немає зворотного зв'язку, який би повідомляв про необхідність зачекати, користувачі не впевнені, чи взагалі щось відбулося.

Поради:

  • Інформуйте користувача за допомогою повідомлень, сповіщень та інших сигналів.
  • Чітко повідомляйте про час очікування.
  • Якщо дія триватиме довше кількох секунд, заспокойте користувача за допомогою таймера або анімації, щоб він відчував, що процес іде.
  • Якщо процес складається з кількох етапів, показуйте кожен із них.

Приклад: Відображення кожного кроку, пов'язаного з транзакцією, допомагає користувачам зрозуміти, на якому етапі процесу вони знаходяться. Відповідні піктограми повідомляють користувачеві про статус його дій.

Informing the user about each step when swapping tokens

2. Безпека та довіра закладені в основу

Безпека має бути пріоритетом, і на цьому слід наголошувати для користувача. Люди дуже дбають про свої дані. Безпека часто є головною турботою користувачів, тому її слід враховувати на всіх рівнях дизайну. Ви завжди повинні прагнути завоювати довіру своїх користувачів, але способи досягнення цього можуть відрізнятися в різних додатках. Це не повинно бути чимось другорядним, а має свідомо проєктуватися на кожному етапі. Будуйте довіру протягом усього користувацького досвіду, включаючи соціальні канали та документацію, а також кінцевий інтерфейс користувача. Такі речі, як рівень децентралізації, статус мультипідпису скарбниці та те, чи є команда публічною (doxxed), впливають на довіру користувачів.

Поради:

  • З гордістю вказуйте свої аудити
  • Проходьте кілька аудитів
  • Рекламуйте будь-які розроблені вами функції безпеки
  • Виділяйте можливі ризики, включаючи базові інтеграції
  • Пояснюйте складність стратегій
  • Враховуйте проблеми поза інтерфейсом, які можуть вплинути на сприйняття безпеки вашими користувачами

Приклад: Додайте інформацію про аудити у футер, зробивши її помітною.

Audits referenced in the website footer

3. Найважливіша інформація є очевидною

Для складних систем показуйте лише найрелевантніші дані. Визначте, що є найважливішим, і надайте пріоритет його відображенню. Занадто багато інформації перевантажує, і користувачі зазвичай спираються на одну деталь під час прийняття рішень. У децентралізованих фінансах (DeFi) це, ймовірно, буде APR у додатках для отримання доходу та LTV у додатках для кредитування.

Поради:

  • Дослідження користувачів допоможе виявити найважливішу метрику
  • Зробіть ключову інформацію великою, а інші деталі — дрібними та ненав'язливими
  • Люди не читають, вони переглядають; переконайтеся, що ваш дизайн легко сканувати поглядом

Приклад: Великі повноколірні токени легко знайти під час швидкого перегляду. APR великий і виділений акцентним кольором.

The token and APR are easy to find

4. Зрозуміла термінологія

Термінологія має бути зрозумілою та доречною. Технічний жаргон може стати величезною перешкодою, оскільки він вимагає побудови абсолютно нової ментальної моделі. Користувачі не можуть пов'язати дизайн зі словами, фразами та концепціями, які вони вже знають. Усе здається заплутаним і незнайомим, і виникає крута крива навчання, перш ніж вони взагалі зможуть спробувати цим скористатися. Користувач може звернутися до децентралізованих фінансів (DeFi) з бажанням заощадити трохи грошей, а натомість знаходить: майнінг, фармінг, стейкінг, емісії, хабарі (bribes), сховища (vaults), локери (lockers), veTokens, вестинг, епохи, децентралізовані алгоритми, ліквідність, що належить протоколу… Намагайтеся використовувати прості терміни, які будуть зрозумілі найширшому колу людей. Не вигадуйте абсолютно нові терміни лише для свого проєкту.

Поради:

  • Використовуйте просту та послідовну термінологію
  • Максимально використовуйте існуючу мову
  • Не вигадуйте власні терміни
  • Дотримуйтесь загальноприйнятих правил у міру їх появи
  • Навчайте користувачів якомога більше

Приклад: «Ваші винагороди» — це загальнозрозумілий, нейтральний термін; а не нове слово, вигадане для цього проєкту. Винагороди номіновані в USD, щоб відповідати ментальним моделям реального світу, навіть якщо самі винагороди виплачуються в іншому токені.

Token rewards, displayed in U.S. dollars

5. Дії максимально короткі

Прискорюйте взаємодію користувача шляхом групування піддій. Це можна зробити як на рівні смарт-контракту, так і в інтерфейсі користувача. Користувачеві не потрібно переходити з однієї частини системи в іншу — або взагалі залишати систему — щоб виконати звичайну дію.

Поради:

  • Поєднуйте «Схвалити» з іншими діями, де це можливо
  • Об'єднуйте кроки підписання якомога ближче один до одного

Приклад: Поєднання «додати ліквідність» і «стейкати» є простим прикладом прискорювача, який економить користувачеві як час, так і газ.

Modal showing a switch to combine the deposit and stake actions

6. Мережеві з'єднання видимі та гнучкі

Інформуйте користувача про те, до якої мережі він підключений, і надавайте зрозумілі швидкі посилання для зміни мережі. Це особливо важливо в мультичейн-додатках. Основні функції додатка мають залишатися видимими навіть у разі відключення або підключення до мережі, що не підтримується.

Поради:

  • Показуйте якомога більшу частину додатка у відключеному стані
  • Показуйте, до якої мережі наразі підключений користувач
  • Не змушуйте користувача переходити в гаманець, щоб змінити мережу
  • Якщо додаток вимагає від користувача змінити мережу, запропонуйте цю дію з головного заклику до дії (CTA)
  • Якщо додаток містить ринки або сховища для кількох мереж, чітко вказуйте, який саме набір наразі переглядає користувач

Приклад: Показуйте користувачеві, до якої мережі він підключений, і дозволяйте змінити її на панелі додатка.

Dropdown button showing the connected network

7. Керування з додатка, а не з гаманця

Інтерфейс користувача має повідомляти користувачеві все, що йому потрібно знати, і надавати контроль над усім, що йому потрібно зробити. У Web3 є дії, які ви виконуєте в інтерфейсі, і дії, які ви виконуєте в гаманці. Зазвичай ви ініціюєте дію в інтерфейсі, а потім підтверджуєте її в гаманці. Користувачі можуть відчувати дискомфорт, якщо ці два напрямки не інтегровані ретельно.

Поради:

  • Повідомляйте про стан системи через зворотний зв'язок в інтерфейсі користувача
  • Зберігайте запис їхньої історії
  • Надавайте посилання на оглядачі блоків для старих транзакцій
  • Надавайте швидкі посилання для зміни мереж.

Приклад: Ненав'язливий контейнер показує користувачеві, які відповідні токени є в його гаманці, а головний заклик до дії (CTA) надає швидке посилання для зміни мережі.

Main CTA is prompting the user to switch network