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

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

Семь эвристик юзабилити для Web3

1. Обратная связь следует за действием
2. Безопасность и доверие
3. Наиболее важная информация очевидна
4. Понятная терминология
5. Действия должны быть как можно короче
6. Подключения к сети должны быть видимыми и гибкими
7. Управление из приложения, а не из кошелька

Определения и примеры

1. Обратная связь следует за действием

Если что-то происходит или уже произошло, это должно быть очевидно.

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

Подсказки:

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

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

2. Безопасность и доверие встроены по умолчанию

Безопасность должна быть в приоритете, и на этом следует делать акцент для пользователя. Людям очень важны их личные данные. Безопасность часто является основной проблемой для пользователей, поэтому ее следует учитывать на всех уровнях дизайна. Вы всегда должны стремиться завоевать доверие пользователей, но путь к достижению этой цели может быть совершенно разным в зависимости от приложения. Она не должна быть "последышем", а должна быть продумана от начала до конца. Укрепляйте доверие на протяжении всего пользовательского опыта, включая социальные сети и документацию, а также в конечном пользовательском интерфейсе. Такие вещи, как уровень децентрализации, статус мультиподписи казначейства и то, раскрыла ли команда свои личности, — все это влияет на доверие пользователей

Подсказки:

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

Пример: Добавьте список ваших аудитов в нижний колонтитул, большим шрифтом.

3. Самая важная информация очевидна

Для сложных систем показывайте только самые релевантные данные. Определите, что является наиболее важным, и выведите на самое видное место. Слишком много информации перегружает пользователя, и при принятии решения он обычно опирается лишь на одну часть доступной информации. В DeFi это, скорее всего, будет годовая процентная ставка (APR) в доходных приложениях и соотношение кредита к стоимости (LTV) в приложениях для кредитования.

Подсказки:

• Исследование пользовательской аудитории позволит выявить наиболее важную метрику
• Сделайте ключевую информацию большой, а остальные детали - маленькими и ненавязчивыми
• Люди не читают, они сканируют; убедитесь, что ваш дизайн легко сканируется

Пример: крупные полноцветные токены легко найти при сканировании. Годовая процентная ставка (APR) написана крупно и выделена акцентным цветом.

4. Понятная терминология

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

Подсказки:

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

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

5. Действия должны быть как можно короче

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

Подсказки:

• По возможности объединяйте "Одобрить" с другими действиями
• Группируйте этапы подписания как можно ближе друг к другу

Пример: объединение «добавления ликвидности» и «стейкинга» — это простой пример ускорителя, который экономит пользователю и время, и газ.

6. Подключения к сети должны быть видимыми и гибкими

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

Подсказки:

• Дайте неподключившемуся пользователю как можно больше доступа к приложению
• Покажите, к какой сети подключен пользователь
• Не заставляйте пользователя переходить в кошелёк, чтобы сменить сеть
• Если приложение требует, чтобы пользователь сменил сеть, предложите это действие из основного призыва к действию
• Если приложение содержит рынки или хранилища для нескольких сетей, четко укажите, какой набор пользователь сейчас просматривает

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

7. Управление из приложения, а не из кошелька

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

Подсказки:

• Информируйте пользователя о статусе системы через обратную связь в пользовательском интерфейсе
• Ведите учёт транзакций
• Предоставляйте ссылки на обозреватели блоков для старых транзакций
• Предоставьте быстрый доступ для смены сетей.

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