UI/UX-дизайн
Услуга
01
UI/UX-дизайн
Интерфейс, в котором менеджер тратит лишние две минуты на заказ, за год съедает рабочую неделю. Считать эти минуты скучно, но именно они решают, будут люди пользоваться системой или вернутся в таблицы.
Работы
02
Проекты студии
С чем
Всё, чем пользуются регулярно и по работе. Там, где интерфейс открывают сто раз в день, цена неудобства считается в зарплатах.
- Личные кабинеты клиентов и партнёров
- Админки и панели управления
- Внутренние системы: заявки, склад, заказы
- Сложные формы, расчёты и конфигураторы
- Каталоги с фильтрами и подбором
- Дашборды и отчёты для руководителя
Главное отличие от сайта — роли. У администратора, менеджера и клиента разные задачи и разные экраны, и рисовать «один интерфейс на всех» означает сделать неудобно каждому.
Второе отличие — состояния. Пустой список, долгая загрузка, ошибка сервера, права без доступа: в реальной работе их видят чаще, чем красивый экран с данными, а рисуют почему-то в последнюю очередь.
В каждом
Входит в работу
- Карта ролей и сценариев
- Кликабельный прототип
- Состояния: пусто, ошибка, загрузка
- Логика форм и валидации
- Дизайн-система компонентов
- Поведение на узком экране
- Проверка контраста и клавиатуры
- Передача разработчикам с описанием
Сценарии и роли
S.
Смотрим, кто и зачем заходит в систему и что делает чаще всего. Пятиминутная задача, которую выполняют двести раз в месяц, важнее редкого сложного отчёта.
- Интервью с пользователями
- Разбор текущей системы
- Карта ролей
- Частые сценарии
- Смета и срок
- 1 неделя
Прототип и проверка
S.
Собираем кликабельный прототип и даём его вашим же сотрудникам. Полчаса наблюдения за тем, как человек ищет кнопку, стоят десяти совещаний о том, где она должна быть.
- Прототип экранов
- Логика переходов
- Проверка на людях
- Правки по итогам
- Утверждение логики
- 1–3 недели
Дизайн и передача
S.
Отрисовываем экраны и все их состояния, собираем компоненты в систему, описываем поведение и передаём разработчикам вместе с ответами на вопросы.
- Экраны и состояния
- Формы и ошибки
- Дизайн-система
- Описание логики
- Передача в разработку
- 2–5 недель
Сколько это
Считаем по числу ролей и уникальных экранов. Кабинет, где клиент смотрит заказы, и система, в которой три роли ведут сделку от заявки до отгрузки, различаются не оформлением, а количеством продуманных сценариев.
Разбор существующего интерфейса стоит дешевле проектирования и часто окупается сам: список из двадцати проблем, отсортированный по важности, даёт вашей команде работу на квартал без нашего участия.
Разбор интерфейса
- Проход по сценариям
- Список проблем по важности
- Наброски решений
- Срок 1–2 недели
Кабинет или админка
- Сценарии и прототип
- Экраны и состояния
- Дизайн-система компонентов
- Срок 3–6 недель
Продукт целиком
- Несколько ролей и модулей
- Тестирование на пользователях
- Сопровождение разработки
- Срок от 2 месяцев
Вилки даны как ориентир: точная сумма считается после карты сценариев. Разработку интерфейса считаем отдельно — дизайн можно передать и вашей команде.
Кому это
Компаниям с внутренней системой, которой пользуются каждый день и на которую жалуются. Обычно всё начинается с фразы «менеджеры не работают в системе» — и в половине случаев это вопрос интерфейса, а не дисциплины.
Тем, кто запускает личный кабинет для клиентов: там цена ошибки выше, потому что клиента нельзя обучить и заставить. Он просто позвонит менеджеру, и кабинет станет ещё одной статьёй расходов.
Если нужен дизайн обычного сайта или лендинга, это другая услуга — веб-дизайн. Если интерфейс — это каталог и корзина, смотрите разработку интернет-магазина: там UX уже внутри проекта.
Типичные
01
Интерфейс повторяет структуру базы данных. Пользователь видит «сущности» и «справочники» вместо своих задач и не понимает, с чего начать.
02
Форма из тридцати полей на одном экране. Половина заполняется наугад, и данные в отчётах перестают что-либо значить — та же болезнь, что у карточек в CRM.
03
Состояния не нарисованы. Разработчик придумывает их сам, и пустой список выглядит как поломка, а ошибка сервера — как белый экран.
04
Дизайн утверждает руководитель, а работают в системе другие люди. Красиво выглядит на демонстрации и мешает каждый день.
Что нужно
Доступ к тем, кто пользуется системой. Не к руководителю отдела, а к людям за экраном: они за десять минут покажут места, о которых в требованиях не написано ни слова.
Доступ к текущей системе, если она есть, хотя бы в демо-режиме со скриншотами. Работать по описанию «там всё сложно» можно, но это дороже и дольше.
Список ролей и того, что каждой роли можно и нельзя. Права — половина логики интерфейса: экран администратора и экран клиента различаются не цветом.
Контакт разработчиков, если они уже есть. Часть решений упирается в то, что система умеет отдавать, и лучше выяснить это на прототипе, а не на приёмке.
Что смотрим в
Разбор — самая дешёвая часть работы и самая полезная на старте. Проходим сценарии руками и записываем, где спотыкаемся.
Путь до цели
Сколько экранов и кликов между «хочу оформить заказ» и «готово». Каждый лишний шаг умножается на число повторений в месяц.
Формы
Что обязательно, что можно подтянуть автоматически, когда появляется ошибка. Валидация после отправки формы из тридцати полей — классика жанра.
Поиск и списки
Как человек находит нужную запись среди тысячи: фильтры, сортировки, сохранённые выборки. Обычно здесь и живёт основная боль.
Состояния
Пустой список, ошибка, нет прав, долгая загрузка. В рабочей системе их видят каждый день, а рисуют почему-то в последнюю очередь.
Как измеряем
Спорить о том, стало ли красивее, можно бесконечно. Поэтому до работы фиксируем несколько цифр и сравниваем их через месяц после запуска.
Время на типовую задачу: сколько минут уходит у менеджера на оформление заказа сейчас и сколько после. Замерить можно секундомером на пяти попытках, никакой аналитики для этого не нужно.
Доля записей, заполненных наугад. Если после переделки формы поле «источник заявки» перестаёт быть свалкой из «другое», интерфейс начал работать вместе с человеком, а не против него.
Обращения в поддержку и к коллегам с вопросом «а как тут». Их число падает первым — и это самая честная метрика из всех, потому что её невозможно нарисовать.
Как передаём в
Интерфейс отличается от сайта тем, что половина работы лежит в логике, а не в картинке. Поэтому вместе с макетами отдаём описание поведения: что происходит при ошибке, какие поля обязательны, что видит пользователь без прав.
Компоненты собраны в систему: кнопки, поля, таблицы, модальные окна с их состояниями. Разработчик собирает новый экран из готовых деталей, и через полгода десятая страница выглядит как первая.
Отдельно проговариваем поведение на узком экране и с клавиатуры. Внутренние системы часто открывают на ноутбуке с маленьким разрешением, а часть сотрудников работает без мыши быстрее, чем с ней.
Когда разработка идёт на нашей стороне, всё это остаётся внутри проекта. Если у вас своя команда, отвечаем на вопросы во время сборки — так дешевле, чем принимать готовое и переделывать.
Материалы по теме
А Квадрат
Частые
Чем это отличается от веб-дизайна?
Сайт просматривают, интерфейсом пользуются. Здесь на первом месте сценарий и скорость работы: важнее, за сколько кликов менеджер оформит заказ, чем как выглядит заголовок на первом экране.
Сколько стоит?
Разбор существующего интерфейса — от 60 000 ₽, проектирование кабинета или админки — от 120 000 ₽. Продукт с несколькими ролями считается по экранам после карты сценариев.
Что вы отдаёте в результате?
Карту сценариев, кликабельный прототип, макеты всех состояний и дизайн-систему в Figma. Плюс описание логики: что происходит при ошибке, пустом списке и долгой загрузке.
Нужно ли тестировать на людях?
Пять человек из вашей команды за прототипом на полчаса находят большую часть проблем. Это дешевле любого исследования и точно честнее, чем спорить о вкусах на совещании.
Дорабатываете существующий интерфейс?
Да, и чаще всего именно так. Система работает, но люди тратят на неё лишние часы: начинаем с разбора, дальше перерисовываем экраны по приоритету — самые больные первыми.
Вы можете и разработать интерфейс?
Можем: разработка считается отдельно от дизайна. Если у вас своя команда, отдаём макеты ей и отвечаем на вопросы во время сборки.
Давайте
Расскажите, кто работает в системе и на что жалуется чаще всего, — предложим, с чего начать. Иногда достаточно разбора и трёх правок, и мы скажем об этом прямо.