Дизайн — статьи о сайтах
Типичная история: макет утвердили, верстка готова, и тут выясняется, что у платья нет размера S, название не помещается в две строки, а на телефоне кнопка «В корзину» уходит за пределы экрана. Каждая такая находка означает правки уже после верстки. Их можно сократить, если на согласовании смотреть не только на внешний вид, но и на поведение страницы.
Что согласовывать: картинку или работу страницы
Макет в графическом редакторе показывает один идеальный момент: все фото на месте, названия короткие, размеры в наличии. Реальный магазин почти никогда так не выглядит. Поэтому перед согласованием сформулируйте для каждого типа страницы одно действие покупателя. Для карточки товара это может быть так: «понять, как вещь сидит, выбрать размер и цвет, узнать условия доставки и возврата, добавить в корзину». Тогда вы будете проверять макет по этой задаче, а не по тому, нравится ли вам шрифт.
Какие страницы и состояния нужно увидеть до верстки
Одной главной страницы недостаточно. Минимальный набор для магазина одежды: главная, каталог с фильтрами, карточка товара, корзина, оформление заказа. Для каждой страницы попросите макеты хотя бы в двух вариантах: для широкого экрана компьютера и для смартфона. Если планшет важен для вашей аудитории, нужен и он.
Кроме того, для ключевых блоков запросите нестандартные состояния:
- размер не выбран, выбран, закончился;
- товара нет в наличии совсем;
- у товара одна фотография и двенадцать фотографий;
- цена со скидкой и без нее;
- очень длинное название и пустое описание;
- каталог, в котором по фильтру ничего не найдено;
- корзина с одним товаром и с десятью.
Условный пример: блок выбора размера в карточке
Возьмем вымышленный товар: «Платье-рубашка из хлопка, цвет индиго». В макете над кнопкой «В корзину» стоит ряд квадратиков XS, S, M, L, XL, а под ним ссылка «Таблица размеров». Выглядит завершенно, но вопросов остается много, и лучше задать их сейчас:
- Как выглядит размер, которого нет: серый, зачеркнутый, скрытый? Можно ли оставить заявку на его поступление?
- Что произойдет, если нажать «В корзину» без выбранного размера? Где появится подсказка и как она выглядит?
- Таблица размеров откроется в окне или на отдельной странице? Как ее закрыть на телефоне?
- Помещаются ли пять размеров в одну строку на экране шириной 320 пикселей или они переносятся?
- Видна ли кнопка «В корзину» на телефоне без долгой прокрутки после галереи фотографий?
- При смене цвета меняются фото и список доступных размеров или только подпись?
Если ответов в макете нет, их придумает верстальщик, и вероятность, что они совпадут с вашими ожиданиями, невелика.
Реальный контент вместо «Lorem ipsum»
Текст-заполнитель и идеальные фото скрывают проблемы. Передайте студии хотя бы десять настоящих карточек: с реальными названиями, составом, ценами и фотографиями так, как их присылает поставщик. Сразу станет видно, что у одних товаров снимки вертикальные, у других квадратные, а в описаниях по два предложения или по двадцать. Решите заранее, как обрезать фото, какие поля обязательны и что показывать, если поле пустое. Отдельно уточните, кто и в каком формате будет готовить фотографии после запуска: от этого зависит, насколько точно макет будет повторяться в живом каталоге.
Как организовать согласование, чтобы правки не росли
Назначьте одного человека с правом окончательного решения. Если макет смотрят директор, маркетолог и закупщик, а замечания приходят в разное время и противоречат друг другу, переделки неизбежны. Просите собирать правки одним списком и привязывать каждую к конкретной странице или блоку.
Договоритесь, как различать два вида замечаний. Первое: в макете не так, как вы согласовали ранее. Это исправление. Второе: появилась новая идея, например добавить блок «С этим товаром смотрят». Это изменение задачи, и его стоит оценить отдельно по срокам и стоимости. Когда оба вида смешаны, спор начинается уже на этапе приемки.
Фиксируйте результат письменно: «Макеты карточки товара, версия 3, согласованы, после этого изменения оформляются отдельной задачей». Это не бюрократия, а способ не вспоминать через месяц, о чем договаривались.
Проверочный список перед тем, как сказать «согласовано»
- Для каждой страницы есть вариант для компьютера и для смартфона.
- Показаны состояния: нет размера, нет товара, пустой результат фильтра, ошибка в форме.
- В макете использованы реальные названия, цены и фотографии из вашего ассортимента.
- Понятно, что происходит при нажатии на каждую кнопку и ссылку.
- Есть места для условий доставки, оплаты и возврата, и тексты для них у вас готовы.
- Форма оформления заказа содержит только те поля, которые нужны для выполнения заказа.
- Все замечания собраны одним списком от ответственного лица.
- Версия макета названа и подтверждена письменно.
Если на любой пункт ответ «нет», лучше потратить день на уточнение сейчас, чем неделю на переделку готовой верстки.
