КП.конструктор: как я проектирую понятные интерфейсы
Бесплатный сервис для веб-студий и дизайнеров: коммерческое предложение с расчётом — и PDF клиенту за 3 клика. Весь продукт мой: сценарии, интерфейс, аудит и метрики.
Задача
Студии и дизайнеры собирают КП вручную в Figma или Word: долго, цену считают на калькуляторе, каждое КП выглядит по-своему.
Сервис, где КП с расчётом собирается за минуты и сразу уходит клиенту в PDF или мессенджер.
Как я работала
Версия 1
Быстро проверила идею: правка прямо на листе А4.
Тест на себе
Проходила сценарии как пользователь и записывала, где спотыкаюсь.
Итерации
Из частных правок вывела 8 общих правил интерфейса.
Аудит
10 эвристик Нильсена на ноутбуке и телефоне — 9 находок.
Исправления
Все 9, плюс 33 автопроверки, чтобы ничего не сломалось.
Данные
Цели и воронка в Яндекс Метрике, тест с пользователями — в процессе.
8 правил, которые я вывела из правок
Подпись над полем
Пояснение — под ним. Одна схема для всех полей.
Минимум текста
Что нужно не всем — в «i» или раскрывающийся блок.
Одно главное действие
Синим — только то, что ведёт к результату.
Язык пользователя
«Скидка», а не «Вычесть из стоимости».
Отмена вместо «Вы уверены?»
Удаление сразу, рядом «Вернуть».
Честные формулировки
Непонятное убираю, а не объясняю.
Порядок мысли
Клиент → прайс → услуги → скидки.
Лист и редактор связаны
Поле показывает свой блок на листе.
Три главных решения
Выбрать, а не вбивать
Шаблон предлагал этапы, а не то, что студия продаёт. Каждую услугу вбивали руками.
«Популярные услуги» с описанием и ценой — в КП за 1 клик. Свой прайс загружается одной кнопкой и остаётся для следующих КП.
Скидка, которой можно верить
Механика вместо смысла, а расчёт ошибался: итог уходил в минус, 10 % при смене на ₽ становились 10 ₽.
«Скидка · Подарок», готовые фразы, выбор «Вычесть / Не менять». Если до срока меньше 7 дней — предупреждение: оставить или перенести.
Видно то, что правишь
Во время правки лист стоял на обложке: меняешь заголовок — а видишь чёрный фон.
Лист сам прокручивается к блоку поля в фокусе и подсвечивает его. Клик по блоку открывает нужное поле.
Эвристический аудит
Проверила продукт по 10 эвристикам Нильсена — на ноутбуке и телефоне. Серьёзность от 1 (косметика) до 4.
| # | Эвристика | Проблема | ||
|---|---|---|---|---|
| 1 | Видимость состояния | Лист не показывал то, что правишь | ✓ | |
| 2 | Согласованность | «Предпросмотр» в трёх местах | ✓ | |
| 3 | Узнавание | Разница двух кнопок прайса — только в «i» | ✓ | |
| 4 | Соответствие миру | Иконка «Сбросить» похожа на «Назад» | ✓ | |
| 5 | Предотвращение ошибок | Кнопка активна при пустом прайсе | ✓ | |
| 6 | Предотвращение ошибок | Срок «до 31.10» за 2 дня до конца месяца | ✓ | |
| 7 | Минимализм | Чёрные переключатели тяжелее главной кнопки | ✓ | |
| 8 | Видимость состояния | Названия услуг обрезаются на телефоне | ✓ | |
| 9 | Согласованность | Надпись «Новое КП» похожа на кнопку | ✓ |
Результат в цифрах
Первое КП → PDF
Популярная услуга с описанием и ценой → в КП
Скидка 10 % с готовой фразой
Свой прайс из файла — и он остаётся для следующих КП
Посчитано по кратчайшему пути — одинаково на ноутбуке и телефоне.
Разберу ваш сайт так же
На консультации посмотрю ваш сайт или сервис глазами клиента и по тем же 10 эвристикам.
- Покажу, где клиенты спотыкаются и уходят
- Объясню, что исправить в первую очередь
- Дам список правок, который можно отдать разработчику
Пишите в Telegram — @ladakondrateva
