Макет страницы на сайте оператора связи согласуют сразу несколько подразделений: маркетинг, продажи, юристы, техническая служба, поддержка. Если им показать одну картинку, каждый увидит в ней своё и заметит «недостающее» уже на третьем круге правок. Ниже описано, как сократить число переделок за счёт подготовки и формата показа макета.
Почему макеты страниц оператора переделывают чаще других
У оператора страница почти всегда зависит от данных, которых нет на картинке. Тариф доступен не во всех регионах, цена бывает акционной, у подключения есть условия, а у адреса может не оказаться технической возможности. Дизайнер рисует «счастливый путь»: короткое название, одна цена, одна кнопка. Затем юристы просят добавить условия, а продажи спрашивают, что увидит абонент из другого города. Блоки приходится перестраивать, хотя дело было не во вкусе, а в неучтённых случаях.
Что зафиксировать до начала отрисовки
Проще всего договориться о составе страницы письменно, до первого экрана. Достаточно одной-двух страниц текста:
- цель страницы: например, оставить заявку на подключение или найти подходящий тариф;
- перечень блоков в порядке важности и ответственный за каждый;
- откуда берутся данные: из биллинга или системы управления сайтом либо вводятся вручную;
- как страница меняется по регионам: что скрывается, что подменяется;
- кто утверждает тексты условий и как быстро это происходит;
- на каких устройствах и в каких ширинах экрана страница должна работать.
Условный пример: страница тарифа домашнего интернета
Возьмём вымышленный фрагмент: верхний экран страницы тарифа «Дом Плюс». В нём название, скорость, абонентская плата «XXX ₽ в месяц», кнопка «Подключить» и ссылка «Проверить адрес». Ниже идут блоки «Что входит», «Стоимость подключения», «Оборудование» и «Условия».
В статичной картинке всё выглядит гладко. Для согласования стоит заранее ответить на вопросы, которые зададут разные отделы:
- Что видит посетитель, если по его адресу подключение невозможно? Нужен отдельный экран с предложением оставить контакт или выбрать другой тариф.
- Как выглядит цена с акцией, если у неё есть дата окончания? Где показывается обычная цена?
- Куда уходят условия, если они занимают полторы страницы: в раскрывающийся блок, отдельную страницу, и что остаётся рядом с ценой?
- Что будет, если название тарифа или оборудования окажется вдвое длиннее?
- Какие поля в форме заявки обязательны и что приходит в ответ после отправки?
Каждый ответ превращается в отдельное состояние макета. Их немного, но именно они вызывают большинство поздних правок.
Как показывать макет, чтобы замечания были по делу
Отдельная картинка десктопной версии для согласования недостаточна. Лучше показать:
- страницу с реальными текстами, а не «Lorem ipsum», включая самые длинные названия и условия;
- основные состояния: нет подключения, акция, другой регион, ошибка в форме;
- минимум три ширины экрана: телефон, планшет и обычный монитор;
- кликабельную схему переходов между страницей тарифа, проверкой адреса и заявкой.
Сразу заранее скажите согласующим, что именно от них ждут. Юристам нужно проверить формулировки и место условий, продажам — порядок блоков и путь к заявке, поддержке — понятность списка «Что входит». Замечания «не нравится» без пояснения попросите записывать по схеме: где, что не так, как должно быть.
Как собрать замечания и не уйти в бесконечный круг
Назначьте на стороне оператора одного ответственного, который собирает правки в единый список и снимает противоречия. Если маркетинг просит увеличить кнопку, а юристы — добавить текст рядом с ней, решать это должен один человек, а не дизайнер.
Разделяйте замечания на три типа: ошибка в макете, новое требование и вопрос вкуса. Ошибки исправляются сразу. Новые требования записываются с оценкой влияния на сроки и состав работ. Вкусовые правки стоит принимать, если с ними согласны ответственный и хотя бы один владелец данных. Заранее договоритесь о числе раундов, например двух. После утверждения зафиксируйте версию макета и перечень состояний: любое дальнейшее изменение идёт как отдельная задача.
Проверочный список перед подписанием макета
- Определена цель страницы и главное действие посетителя.
- Показаны состояния: нет технической возможности, акция, другой регион, ошибка формы.
- Тексты условий реальные и согласованы юристами оператора.
- Понятно, откуда берётся каждая цифра: цена, скорость, срок.
- Проверены длинные названия и большие объёмы текста.
- Макет показан для телефона, планшета и монитора.
- Есть единый список замечаний и один ответственный за решения.
- Зафиксированы версия макета и правила внесения изменений после подписания.
