UI/UX-дизайн

Проектирование интерфейса сайта, приложения или панели: сначала потоки и кликабельный прототип, потом графический слой. Считаем цену формы формулой.

• индивидуальноОбъём
• Сайты и брендингОбласть
• 6 часов – 2 дняЗапуск

Кому это нужно

Цифровые продукты, SaaS и внутренние бизнес-системы.

Проблема

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

Что делаем

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

• Сценарии задач: цель пользователя, шаги и места, где их можно сократить
• Wireframe до графики, чтобы спор о структуре не стал спором о цвете
• Кликабельный прототип, чтобы пройти сценарии до того, как что-то попадёт в код

Что входит

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

• Flow: пути пользователя и все состояния, включая пустое и ошибочное
• Wireframe: компоновка экранов и иерархия контента без графики
• UI: сетка, типографика, цвета, компоненты и единые состояния элементов
• Прототип: кликабельная версия, на которой можно пройти реальный сценарий
• Тесты: прохождение сценариев с людьми вне команды и правки по итогам

Сроки

Реализация занимает 6 часов – 2 дня. Узкое место не рисование, а решения на вашей стороне: сколько ролей в системе, что видит каждая и какие функции входят в первую версию. Поэтому с этих вопросов и начинаем. Тесты прототипа планируем заранее: собрать несколько человек вне команды бывает дольше, чем сам дизайн — а без них останется мнение, а не результат.

Стоимость

Решают число экранов, объём исследований и то, нужен ли кликабельный прототип или достаточно статичного макета. Перепроектирование существующей панели мы оцениваем после того, как посмотрим на то, что уже работает — часто достаточно поправить несколько экранов вместо того, чтобы рисовать все заново, и мы говорим об этом до старта.

Что вы получаете

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

Когда редизайн UX не окупается

Четыре ситуации, в которых мы советуем подождать:

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

Ни одна из этих ситуаций не приговор навсегда — иногда достаточно подождать подходящего момента, а не отказываться от проекта совсем.

Формула: во сколько обходится сложная форма

Формула: Утраченные заявки = Число входов на форму × Процент отказов × Средняя ценность заявки. Число входов и процент отказов видно в Google Analytics (события начала и отправки формы); средняя ценность заявки — это ваша собственная цифра из CRM или отдела продаж, не наша.

Та же формула работает в обратную сторону: если снизить процент отказов хотя бы на несколько процентных пунктов, результат сразу показывает, сколько заявок это даёт в месяц — без каких-либо предположений о качестве дизайна.

Что нам нужно с вашей стороны

Четыре вещи, без которых работа не начнётся или застрянет на этапе согласования:

• Доступ к аналитике (Google Analytics или другой инструмент) с историей минимум за несколько недель.
• Доступ к панели, CMS или репозиторию, если мы проектируем существующий продукт, а не сайт с нуля.
• Один человек с вашей стороны, принимающий решения по потокам, — распределённая ответственность растягивает каждый этап.
• Список технических ограничений (фреймворк, библиотека компонентов, если уже есть) — проект должен реализовываться в том, что у вас есть.

Чем раньше готовы эти четыре пункта, тем меньше времени уходит на прояснение решений уже в ходе проекта вместо того, чтобы сделать это до его старта.

Как проверить эффект через месяц без нас

Формула: Коэффициент завершения задачи = Число пользователей, дошедших до цели / Число пользователей, начавших сценарий × 100%. Цель и начало сценария вы определяете сами (например, добавление товара в корзину и оплата заказа) и отслеживаете в аналитическом инструменте, который у вас уже есть, — без дополнительного софта.

Стоит сравнивать этот показатель до и после внедрения для одного и того же сегмента трафика, например только мобильного, — иначе разница в результате может объясняться сменой источников трафика, а не проектом.

Чего UX/UI не делает

Границы, о которых мы говорим прямо:

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

Эти границы мы определяем до старта, чтобы ни одна из сторон не предполагала того, чего другая не обещала.

Типичная ошибка при заказе редизайна

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

Цена этой ошибки растёт вместе с размером продукта — чем больше экранов затронул рескин, тем больше из них придётся перепроектировать во второй раз.

Полный редизайн против точечных правок — сравнение

Четыре пути, у каждого свой охват и свой результат:

• Полный редизайн от потоков — устраняет причину проблемы, но требует больше всего времени и решений с вашей стороны.
• Эвристический аудит и точечные правки — быстрее и дешевле, но не затрагивает ошибки, встроенные в структуру продукта.
• Тесты с пользователями без изменений в проекте — дешёвый источник знаний о проблеме, но сам по себе ничего не исправляет.
• Изменение только графического слоя (рескин) — улучшает внешний вид, оставляет те же пути и те же отказы.

Выбор между ними зависит от того, указывают ли данные на причину в структуре продукта или только в графическом слое.

Доступность и крайние состояния: чего обычно не хватает

Формула контраста из WCAG 2.1 (критерий 1.4.3): Контраст = (L1 + 0,05) / (L2 + 0,05), где L1 и L2 — относительная яркость более светлого и более тёмного цвета; для обычного текста результат должен быть не менее 4,5:1. Это считается бесплатными инструментами, доступными прямо в браузере, а не вопрос вкуса.

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

Что вы получаете

• Карта flow и wireframes ключевых экранов
• UI-дизайн и система повторно используемых компонентов
• Кликабельный прототип и материалы для передачи в разработку

Когда задача лежит в другом месте

Если задача звучит иначе, рядом стоят соседние области той же системы — AURA связывает их между собой, а не продаёт по отдельности:

• 3D-анимации — 3D-объекты, анимации при прокрутке и интерактивные сцены на сайте — для брендов, которые не хотят выглядеть как все. Честно говорим о весе сцены.
• UX и конверсия — Аудит UX и постоянная оптимизация конверсии для компаний, у которых есть трафик, но нет заявок: записи сессий, воронка и список правок по важности.
• Сайты и магазины — Сайты компаний, лендинги и магазины для локального бизнеса: структура вокруг одного решения клиента, мобильная версия, формы и замер с первого дня.
• Лендинг — Лендинг под одну кампанию: заголовок как в рекламе, один призыв к действию и замер конверсии с запуска — вместо главной страницы, которая рассеивает клик.