идея без структуры
Понятно, зачем продукт, но непонятно, из каких экранов он состоит и в каком порядке человек по ним идёт.
Найдём 5 причин, почему клиент
не доходит до заявки.
не доходит до заявки.
Проверим этапы взаимодействия с клиентом, найдём точки потерь и предложим решения для роста.
сайты и интерфейсы.
Создаём интерфейсы и цифровые продукты.
продукт
Проектируем цифровые продукты: разбираем задачу и пользователей, строим структуру и сценарии, рисуем интерфейсы со всеми состояниями и собираем дизайн-систему, по которой продукт можно разрабатывать и развивать дальше.
от 15 000 ₽точная смета — после разбора задачи
один продукт
много состояний
исследованиеструктура и сценарииинтерфейс и состояниядизайн-системапередача в разработку
когда подключают нас?
пользователи теряются
Люди доходят до середины сценария и уходят: форма длинная, шаги непонятны, ошибки ничего не объясняют.
интерфейс разъехался
Каждый новый раздел рисовали отдельно: разные отступы, кнопки и таблицы в одном продукте.
разработка переспрашивает
В макетах нет состояний, крайних случаев и правил адаптива — команда додумывает логику сама.
нужен личный кабинет
Нужны роли, права, таблицы, фильтры и история действий, а не витрина с описанием услуг.
продукт вырос
Функций стало много, навигация перестала держать структуру, поиск нужного занимает минуты.
исследование до первого экрана
решение принимают
данные, а не вкус
Каждое интерфейсное решение опирается на конкретный сценарий, ограничение системы или наблюдение за поведением людей. Если основания нет, мы честно называем решение гипотезой и закладываем способ её проверить.
интервью
Говорим с пользователями и с теми, кто отвечает за продукт внутри компании: что должно происходить и что мешает сейчас.
разбор текущего
Проходим существующий продукт по сценариям, фиксируем шаги, лишние действия и точки отказа.
карта пути
Раскладываем путь клиента по этапам: что он делает, что видит, что решает и где теряется.
конкурентный обзор
Смотрим, какие решения стали привычными в категории, чтобы не переизобретать базовые паттерны.
из исследования в структуру
информационная архитектура
- разделы и их подчинённость
- навигация и её глубина
- именование пунктов меню
- карточная сортировка на живых людях
сценарии
- основной путь к цели
- альтернативные ветки
- точки принятия решения
- что происходит при отказе
прототип
- схемы экранов без цвета
- расстановка блоков и приоритетов
- кликабельная связка экранов
- проверка на 3–5 пользователях
крайние случаи
- длинные тексты и большие числа
- нет прав доступа
- нет интернета
- сотни строк в таблице
состояния экрана
пустое состояние
Первый экран нового пользователя. Это не «нет данных», а инструкция: что здесь появится и какое действие нужно сделать прямо сейчас.
- объяснение назначения раздела
- одно основное действие
- пример или демо-данные, если уместно
здесь появятся заявки — создайте первую
загрузка
Показываем структуру будущего содержимого, а не крутящийся индикатор в центре пустоты. Человек понимает, что именно грузится и сколько блоков появится.
- каркас на месте будущих данных
- интерфейс не «прыгает» после загрузки
- отдельное поведение для долгих операций
с данными
Рабочее состояние: таблицы, фильтры, сортировка, массовые действия. Проверяем его не на трёх строках, а на объёме, который будет через год.
- плотность строк и читаемость
- фиксированные шапки и колонки
- сохранение фильтров при возврате
- выгрузка и печать
ошибка
Сообщение объясняет, что произошло и что делать дальше. Введённые данные не теряются, действие можно повторить без прохождения сценария заново.
- текст ошибки на человеческом языке
- сохранение введённого
- повтор действия одной кнопкой
- разделение ошибок формы и сервера
не удалось сохранить заявку: сервис оплаты не ответил. данные сохранены, попробуйте отправить ещё раз
доступ и роли
Разные люди видят разный продукт. Проектируем, что именно скрыто, что показано только для чтения и как человек может запросить расширение прав.
- матрица ролей и операций
- режим только для чтения
- запрос доступа внутри интерфейса
- журнал действий пользователей
админполные права и настройки
менеджерработа с заявками
наблюдательтолько просмотр
успех
Завершение сценария — тоже проектируемый экран. Человек должен понимать, что дальше: куда вернуться, что проверить, когда придёт результат.
- подтверждение выполненного действия
- номер заявки или ссылка на объект
- следующий логичный шаг
- уведомление на почту или в мессенджер
заявка №1048 отправлена — ответ придёт на почту
визуальный слой и дизайн-система
интерфейсная система
- типографическая шкала с фиксированными размерами и высотой строки
- шаг сетки и система отступов вместо случайных значений
- цветовые роли: фон, текст, действие, предупреждение, отключено
- радиусы, границы и правила разделения блоков
компоненты
- кнопки, поля, селекты, чекбоксы
- таблицы с сортировкой и фильтрами
- модальные окна и боковые панели
- уведомления и подсказки
состояния компонентов
- обычное и наведение
- фокус с клавиатуры
- активное и отключённое
- ошибка и валидация
адаптив
- поведение на 320 px и шире
- перестроение таблиц в карточки
- приоритет элементов на узком экране
- размеры зон нажатия
доступность
- контраст текста и фона
- навигация с клавиатуры
- читаемые размеры от 20 px
- подписи к полям и иконкам
паттерны
- как выглядит форма из десяти полей
- как устроен многошаговый сценарий
- как показываем подтверждение и отмену
- как оформляем длинные списки и пагинацию
документация системы
- правило применения каждого компонента
- что можно менять, а что нельзя
- версионирование библиотеки
- порядок добавления нового компонента
что получает разработка?
макеты
Экраны для всех разрешений, сгруппированные по сценариям, с понятной структурой слоёв и именованием.
состояния
Каждый ключевой экран отрисован в пустом, загрузочном, заполненном, ошибочном и ограниченном по доступу виде.
компоненты
Библиотека с вариантами и состояниями, из которой собираются экраны, а не набор отдельных картинок.
спецификация
Отступы, размеры, поведение при изменении ширины, правила переноса текста, порядок фокуса.
логика
Что происходит после нажатия, какие поля обязательны, какие проверки выполняются на клиенте, какие на сервере.
ресурсы
Иконки, иллюстрации и изображения в нужных форматах и плотностях, подготовленные для веба.
как идёт работа?
погружение
Разбираем задачу, бизнес-ограничения и текущий продукт, собираем доступы и данные.
на выходе: список сценариев и ограниченийструктура
Собираем архитектуру разделов и пользовательские пути, согласуем логику до визуала.
на выходе: карта экранов и сценариевпрототип
Делаем кликабельную схему без цвета и проверяем её на реальных пользователях.
на выходе: прототип и заметки по тестаминтерфейс
Отрисовываем экраны, состояния и адаптив, параллельно собирая компонентную библиотеку.
на выходе: макеты и библиотека компонентовпередача
Проводим встречу с разработкой, описываем поведение и отвечаем на вопросы по ходу сборки.
на выходе: спецификация и доступысопровождение
Проверяем собранный продукт против макетов и правим то, что расходится с задуманным поведением.
на выходе: список расхождений и правокчто остаётся у клиента?
рабочий файл
Организованный проект с экранами, компонентами и историей версий, доступный на стороне клиента.
дизайн-система
Библиотека компонентов с состояниями и правилами применения, пригодная для новых разделов.
карта сценариев
Схема экранов и переходов, по которой видно, как устроен продукт целиком.
спецификация
Документ с поведением интерфейса, крайними случаями и требованиями к адаптиву.
проекты
геопрофи
Пересобрали структуру сайта и сценарии обращения: разделы, карточки услуг и формы заявок приведены к одной компонентной системе.
радар
Внутренний инструмент студии: спроектировали интерфейс работы с данными, состояния списков и логику фильтров.
шрифты
Раздел выдачи собственных шрифтов: предпросмотр начертаний, выбор параметров и сценарий получения файлов.