UI/UX дизайн для Web3: кошельки, dApps и экраны продуктов

3 проверки до первого экрана в Figma

Перед началом работы над ui ux дизайном мы фиксируем 3 проверки: задачу пользователя, взаимодействия с кошельком и требования к передаче разработчику. Этот ранний анализ помогает выявить недостающие продуктовые решения до того, как они распространятся по экранам.

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

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

Как сделать действия с кошельком понятными для пользователей?

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

Каждое взаимодействие с кошельком получает место в сценарии — от подключения до обратной связи по транзакции. Вайрфреймы показывают, что видят пользователи перед продолжением. Затем прототип связывает согласованные взаимодействия для ревью.

Мы документируем состояния, которые ваш продукт должен объяснить:

• Подключение: действие пользователя и что подтверждает интерфейс.
• Транзакция: информация, показываемая до подтверждения пользователем.
• Прогресс: что сообщает интерфейс, пока выполняется действие.
• Завершение: как пользователь понимает, что действие закончено.
• Ошибка: что произошло и что пользователь может сделать дальше.
• Газ: где применимо, как интерфейс представляет информацию о газе.

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

7 элементов, которые может объединить ваша передача в Figma

7 частей могут быть объединены в одной передаче Figma, в зависимости от потребностей вашего продукта. Ваша команда может просмотреть предполагаемый сценарий и увидеть, как экраны связаны с повторно используемыми паттернами.

• Заметки по исследованию: потребности пользователей и рассмотренные продуктовые вопросы.
• Обзор конкурентов: наблюдения за интерфейсами из предоставленных референсов.
• Пользовательские сценарии: основные задачи, решения и альтернативные пути.
• Вайрфреймы: структура экранов и иерархия до визуальной доработки.
• Визуальная система: направление дизайна, примененное к интерфейсу.
• Библиотека компонентов: повторно используемые элементы для единообразных экранов.
• Кликабельный прототип и заметки по тестированию: связанные взаимодействия и результаты юзабилити.

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

Если требуется более широкая проработка визуального направления, см. брендинг для криптопроектов. Для текстов продукта создание контента для крипты может поддержать интерфейс.

5 шагов от первого сообщения до финальных заметок по дизайну

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

1. Отправьте контекст продукта. Поделитесь продуктом, целевыми пользователями, основной задачей, существующими экранами и известными ограничениями.
2. Изучите материалы. Мы анализируем предоставленные исследования, референсы конкурентов и текущие экраны. Мы отмечаем вопросы, влияющие на пользовательский сценарий.
3. Создайте карту и вайрфреймы. Мы связываем основной путь и важные альтернативные состояния. Вайрфреймы фиксируют структуру до визуальной доработки.
4. Разработайте дизайн и прототип. Мы создаем визуальную систему и экраны интерфейса. Затем связываем согласованные взаимодействия в кликабельном прототипе.
5. Протестируйте и передайте. Мы проводим юзабилити-тестирование в рамках согласованной работы. Включаем релевантные выводы и организуем файл Figma для разработчиков.

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

Что может подтвердить прототип Web3?

3 вводных помогают нам определить полезную отправную точку: пользователь, задача и текущие материалы продукта. Мы можем начать с краткого описания продукта. Экраны или исследования полезны, но не обязательны для старта.

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

Перед отправкой запроса соберите то, что у вас есть:

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

Отправьте эти материалы через контакт. Мы изучим задачу и отметим открытые решения. Вы получаете письменное коммерческое предложение в течение 2 рабочих дней. Отправьте: описание продукта, целевых пользователей и основной сценарий, который вы хотите спроектировать.

Как мы работаем

1. Отправьте контекст продуктаПоделитесь продуктом, целевыми пользователями, основной задачей, существующими экранами и известными ограничениями. Укажите ответственного за ревью дизайн-решений.
2. Подтвердите работу и графикМы согласовываем, какие сценарии, элементы дизайна и точки ревью включены до начала работы.
3. Создайте карту сценариев и вайрфреймыМы изучаем доступные материлы, картируем ключевые пути и состояния, фиксируем структуру экранов.
4. Разработайте дизайн и прототипМы создаем визуальную систему и экраны, затем связываем согласованные взаимодействия в Figma.
5. Протестируйте и передайтеМы проводим юзабилити-тестирование в рамках согласованной работы, учитываем релевантные выводы и организуем файл Figma для разработчиков.