Правильный подход к разработке технического задания на дизайн интернет-магазина

Каждый раз, когда дизайнер просит заказчика выслать требования, в мире умирает один котик, заказчик начинает гуглить, в надежде найти образец технического задания. Часто образцы ТЗ очень общие и обычно представляют собой простой бриф с основной информацией о компании. Не удивительно, ведь товары в магазинах разные, цели разные, аудитории отличаются, соответственно и дизайны должны отличаться, значит, найти шаблон технического задания, по-быстрому заполнить и отправить — плохая идея.

В этой статье разберемся, что мечтает увидеть дизайнер в техническом задании, что в нем писать, и на какие вопросы ответить.

Сразу предупреждаю, речь про тщательный подход. Поэтому если вы хотите управиться за час, лучше продолжайте искать шаблон ТЗ.

Парадокс заказчика

Казалось бы, заказчик — это максимально заинтересованное лицо в получении качественного, продающего дизайна для своего интернет-магазина. Ему этот дизайн оплачивать и с ним жить, от качества и продуманности дизайна во многом зависит конверсия магазина. Но почему-то заказчики постоянно норовят скинуть с себя работы по подготовке контента и присылают «рыбу» вместо чистовика, копируют у конкурента и т. п. Как результат, заказанный и оплаченный дизайн, получается «не про них», решает не их задачи, а какие-то «типовые».

В дизайне, сделанном без реального контента, нет  акцента на важных продающих моментах в тексте, который появляется на сайте позже, когда дизайн уже готов, сверстан, а веб-сайт работает.

Поэтому, если нет желания всерьез готовить материал для магазина — не заказывайте дизайн, используйте готовое решение. Там как раз все универсально и усреднено. Поставите свой логотип, вобьете товары и текст, выделите важные места жирным и красным и окей. Кстати, у меня в блоге есть подробная статья о преимуществах готовых решений. Прочитайте, возможно, это решение действительно вам подойдет, тогда вы сэкономите много денег на разработке.

С чего начинается дизайн интернет-магазина

Многие полагают, что работа начинается с письма дизайнеру: «Уважаемый %дизайнер%, нам нужен дизайн интернет-магазина %название%. Сколько это будет стоить, и успеете ли вы до понедельника? Другие думают, что сначала нужен некий схематичный рисунок  — скетч, вайрфрейм.

В обоих случаях результат будет, а если дизайнер опытный (делал много проектов вашей тематики), то получится не только красиво, но и удобно. Но все равно не совсем то.

Потому что разработка тех. задания на дизайн начинается с подготовки контента.

Под контентом я подразумеваю помимо текстов и фото еще и дополнительную информацию (пол и возраст аудитории, целевые действия для разных страниц, УТП, перечень и краткое описание маркетинговых программ и т. п.)

Что включать в техническое задание на дизайн

 Чем больше информации про будущий сайт вы предоставите – тем лучше дизайнер проработает общую концепцию дизайна и каждую страницу в отдельности, тем больше макет будет соответствовать вашим задачам.

Все идеи у дизайнера появляются только после ознакомления с информацией по заказу (контентом). Его может быть мало, например, только это:

• название магазина;
• тематика;
• ряд пожеланий;
• список ссылок на магазины со схожей тематикой, которые нравятся заказчику;
• структура разделов;
• структура каталога,

Так делают почти все. Это самый распространенный список материалов, которые обычно заказчик включает в техническое задание на разработку дизайна своего интернет-магазина. Все прочее остается за кадром на усмотрение дизайнера и на его совести. Что-то переходит по эстафете на усмотрение верстальщика и далее на откуп программиста. Как вы понимаете, при таком подходе проблемы накапливаются на каждом шаге.

Более полный перечень материалов для дизайнера должен быть примерно таким:

Этот список значительно подробнее того минимума что обычно предоставляют дизайнеру (см. выше) но на полноту не претендует. Тем не менее, если пропустил что-то важное — пишите в комментах к этой статье.

Название магазина

Фирменный стиль. Если есть обязательно дайте дизайнеру брендбук, чтобы дизайн интернет-магазина сочетался с общим стилем компании. Если брендбука нет, что вполне обычное дело, то могут пригодиться любые элементы вашего фирменного стиля (визитки, буклеты и т. п.) или пришлите хотя бы логотип. Если и логотипа нет, тогда дайте напишите рекомендации, что будет на сайте вместо логотипа. Например, это может быть просто название магазина, набранное текстом. Возможно, дизайнер согласится подумать над вашим лого за дополнительную оплату. Обсудите это с ним. 

Общие требования и пожелания

• Список ссылок на магазины со схожей тематикой, которые нравятся заказчику. С перечнем того что именно нравится на каждом сайте.
• Цветовая гамма. Если есть фирменный стиль, то цветовая гамма будет ясна из него. Если нет, пожелания заказчика точно пригодятся.
• Адаптивность. Будет ли дизайн адаптивным. Сейчас это почти мастхэв. Гугл начал в мобильной выдаче выше ранжировать сайты адаптированные под мобильные устройства. Поэтому делать магазин без адаптивности, все равно что покупать гаджет трехлетней давности. Но указывая, что адаптивная версия нужна, будьте готовы к увеличению стоимости минимум на 20-25%.

Не стоит сначала писать, что адаптивный дизайн не нужен, а потом, когда дизайн почти готов передумать. Это не в ваших интересах. Может выйти как в том анекдоте. Лучше сделать адаптив сразу, тогда дизайнер сможет лучше продумать, как будет выглядеть мобильная версия дизайна, как складываться блоки и т. п.

Структура разделов

Главная, Каталог товаров, О магазине, Контакты, Поддержка и т. п. Про все разделы магазина есть отдельная статья. Достаточно подготовить в вордовском файле в виде нумерованного дерева или таблицы.

Структура каталога товаров

То же самое что структура разделов, но в данном случае это структура конкретно одного раздела «Каталог товаров». Если интернет-магазин небольшой и разделов в нем мало, то лучше будет объединить этот пункт с предыдущим. Если разделов и подразделов много, то удобнее вынести его в отдельный файл. Подготовить можно в формате Ворд, в виде маркированного списка в несколько уровней вложенности.

Обязательно отметьте наиболее важные разделы в каталоге товаров, чтобы на них сделать акцент.

Примерное количество товаров

Магазины с маленьким ассортиментом отличаются от супермаркетов, поэтому дизайнер должен знать какой интернет-магазин он рисует. Обозначьте, пусть примерно, сколько товаров у вас будет в обозримом будущем. Не через 3–5 лет, когда вы захватите мир, а в ближайшие полгода.

Список страниц, которые должны быть нарисованы дизайнером

Посмотрите мою статью с таблицей (там можно скачать таблицу), в статье дается список, какие страницы нужно заказывать дизайнеру, кратко сказано зачем и расставлены приоритеты (высокий, средний, низкий).

Каждая страница, которую вы будете заказывать обязательно должна быть в структуре разделов (см. пункт выше «Структура разделов»). Не должно быть ситуации, когда в списке страниц к разработке есть, например, страница «Контакты» а в структуре ее нет. Это неверно. В обратную сторону вполне допустимо, т. е. список страниц к разработке может быть существенно меньше, чем общая структура магазина.

УТП

Уникальное торговое предложение (википедия). Дайте дизайнеру ваше УТП, чтобы он хорошо показал его в дизайне. Небольшой пример УТП:

100% гарантия доставки. Мы гарантируем что ваш заказ будет вам доставлен и совершенно точно не потеряется по дороге. Как мы можем давать такие гарантии? Очень просто, мы берем ответственность на себя! Если заказ вдруг потеряется мы за свой счет продублируем заказ либо вернем вам полную стоимость заказа, включая расходы на доставку.

Конечно, только одного пункта для УТП недостаточно. Должны быть и другие, показывающие чем ваш магазин лучше. Мне нравится когда УТП обрабатывает страхи клиента. 

Целевые действия для основных страниц

Об этом позже будет отдельная статья – подписывайтесь в соцсетях, чтобы не пропустить. Понятно, что в интернет-магазине основная цель – покупка. Но есть промежуточные цели: выбор товара, добавление в корзину, просмотр определенных страниц, просмотр или клик баннера акции и др.

Целевая аудитория

На каких покупателей ориентирован магазин. Как минимум нужно указать пол и возраст.

Например, если у вас магазин женской одежды для полных, то скажите об этом дизайнеру, постарайтесь точно очертить целевую аудиторию, желательно уточнить, почему вы считаете что ваша целевая аудитория именно эта.

Для разработки правильного дизайна важно знание аудитории. Согласитесь, подача материала в интернет-магазине одежды для 40-50 летних пышек и толстушек из молодежной аудитории должна отличаться, так же как и стиль одежды для них.

Если в магазине разные разделы ориентированы на разные группы покупателей (по полу / возрасту / платежеспособности и т. п.) об этом тоже нужно сказать  дизайнеру. Прочитайте статью о целевой аудитории и советах как составлять портрет покупателя.

Доступ в Я.Метрику, Google Analitics или LiveInternet

Этот пункт желателен, если вы переделываете дизайн у уже работающего магазина. Данные из этих систем аналитики многое могут сказать опытному дизайнеру. Если у вас работающий магазин, на нем установлена какая-то система аналитики, не упускайте возможность — сделайте к ней доступ дизайнеру. Как давать гостевой доступ к счетчикам, я писал в отдельной статье.

Контент для каждой страницы

Самый объемный пункт при написании технического задания к дизайну. Желательно чтобы присутствовало содержимое для каждой страницы из «Списка страниц, которые должны быть разработаны дизайнером». Если в этом списке 50 страниц — для каждой должен быть свой контент. Либо если не контент, то описание что на странице будет размещено.

Контент, который вы отправляете дизайнеру, должен быть чистовиком! Не черновиком не тестовым, не для пробы, не временным, не скопированным у конкурентов, не «вставьте пока так, а позже доделаем». Чистовиком!

Если у вас не готов контент, значит, заказывать дизайн рано!

Не контент должен подгоняться под дизайн, а наоборот, правильный дизайн усиливает сказанное.

Информацию для каждой страницы можно вставить в отдельные файлы или все в один. Главное, чтобы дизайнеру было легко понять, что к какой странице относится. Обязательно картинки отдельно от текста.

Иногда заказчик присылает дизайнеру кучу неструктурированных файлов, среди которых винегрет из картинок, архивов, текстов, презентаций и pdf`ок. Заказчику самому лень разбираться в них, и он надеется, что разберется дизайнер. Это неправильно и неуважительно.

Если вы затрудняетесь сказать, что должно быть на системных страницах таких как «404 (страница не найдена)» и других подобных, то оставьте их стандартными, такими, как их выдает CMS или подсмотрите у конкурентов (о заимствовании сказано ниже). Можно честно написать в ТЗ что эти страницы нужны, но вы затрудняетесь дать им содержимое, и полагаетесь на его усмотрение (это только для системных страниц допустимо, для остальных заказчик должен собрать и прислать контент).

Давать что-то на усмотрение дизайнера можно только в том случае если вы ему доверяете.

Часто заказчик сначала говорит, что полагается на мнение дизайнера, а когда видит результат, у него появляются идеи, он начинает требовать корректировки, хотя ранее писал, что не знает как сделать правильно — это порядком бесит, не надо так.

Пример описания товара

При составлении ТЗ, нужно дать дизайнеру описание, как товар будет представлен на карточке товара. Какие у него будут характеристики, параметры, описание.

Не забудьте указать, какие из перечисленных параметров покупатель может выбирать. Например, для одежды обычно выбирается цвет и размер.

Понятно, что не у каждого товара одновременно будут присутствовать все перечисленное, но, как вы понимаете, дизайнер должен нарисовать универсальную карточку товара, чтобы учесть в ней место для всей информации.

Перечислю некоторые параметры и характеристики, наиболее часто встречающиеся при описании товара:

• Название.  Максимально длинное, которое может быть у вашей продукции. Это нужно чтобы дизайнер предусмотрел место под самый длинный заголовок товара, тогда короткий точно войдет и с длинным проблем не возникнет.
• Описание. Будет ли у товара текстовое описание, помимо перечисления параметров и характеристик. Если да, то в ТЗ для дизайнера обязательно нужно предоставить такое описание, чтобы он мог использовать его в макете. Не забудьте указать какой максимальный объем текста будет у описания. Это важно чтобы дизайнер решил как расположить текст и предусмотрел как будет выглядеть короткое или длинное описание.
• Фото. Если планируется иллюстрировать некоторые товары несколькими фотографиями, то нужно обязательно сказать что у каких-то товаров фото будет всего одно, у других больше, но не более Х штук (где Х максимальное количество фоток, которые будут у вас для товара, в пределах разумного конечно. Обычно бывает не больше 5-6 шт.).
• Видео. Если иногда будет видео, прямо скажите что видео будет только у части товаров, но его наличие нужно предусмотреть в карточке товара.
• Бренд. Напишите, как бренд будет показан на карточке. Будет ли это текст или картинка-логотип. Будет ли ссылка с бренда на страницу всех товаров этого бренда. Кроме того, лого у брендов бывают разные, у одних вертикальные, у других горизонтальные, третьи по высоте и ширине одинаковые, иногда вы не сможете / забудете найти лого для бренда. При разработке дизайна все эти вещи нужно учесть, чтобы не было ситуации, когда дизайнер предусмотрел только один вариант (например, горизонтальный логотип) и загруженный логотип бренда (вертикальный)  непредвиденно растянул дизайн страницы. Опытный дизайнер такие вещи учитывает, но нелишни будет ему об этом дополнительно напомнить, написав в ТЗ.
• Размер. Размеры обычно бывают, например, у обуви или одежды. Если это одежда и обувь нужно указать какие размерные сетки используются. Для обуви это может быть европейская, американская, российская. Обязательно укажите максимальный список размеров для одного товара. Если у вас не бывает детских размеров и супербольших размеров и минимальный размер начинается с 38-го а заканчивается 44-м, то обязательно скажите об этом дизайнеру. Зная, что у вас в магазине у товара одновременно не будет больше 6 разных размеров, дизайнер сможет, например, вместо универсального решения — выпадающего dropdown-списка — использовать более наглядные radiobuttons без боязни что дизайн поломается. Либо, наоборот, предусмотрит возможность без опасения «поломать» страницу добавлять много размеров для одного товара.
• Цвет. Сказанное выше для «размера» применимо и для параметра «цвет». Точно так же нужно дать дизайнеру примеры цветов, высказать пожелания по способу отображения выбора цветов в карточке товара. Совет: дважды подумайте прежде чем делать выбор цвета не текстом, когда выбирается просто слово «зеленый», «желтый», а выбираются соответствующие квадратики с цветом. Это неудобно пользователю т. к. разные мониторы по-разному отображают цвета и дополнительные сложности для контент-менеджера при добавлении товара (ему придется добавлять код цвета), то же самое с выгрузкой товаров из 1С. Если там у вас не хранится код цвета товара, то на сайт он, конечно тоже не выгрузится. Придется как-то этот вопрос решать.
• Единица измерения (штуки, литры, килограммы и т. п.). Некоторые товары бывают разной фасовки. Например, можно приобрести 200 гр. банку кофе Nescafe, а можно 400 гр. банку. Если у вас есть такие товары хотя бы в одном разделе, вам нужно решить как это будет выводиться в карточке товара и будет ли. Есть всего три варианта. Первый, когда на детальной странице товара можно выбирать сколько граммовую банку с кофе купить, второй, когда каждый вес банки с кофе это отдельный товар со своей отдельной страницей и третий – совмещающий два предыдущих. Какой вариант станете использовать – выбор за вами. Плюсы и минусы есть у каждого.
• Количество в наличии. Иногда в карточке товара магазин прямо указывает сколько штук этого товара есть в наличии. В других магазинах пишут менее открыто: «много», «средне» или «мало» или еще менее конкретно — указывают «есть в наличии» или «нет в наличии». Как будет у вас – решать вам. Для разных случаев лучший свой вариант, а иногда стоит их совмещать.
• Наличие товара в магазинах. Если у интернет-магазина несколько офлайновых магазинов или точек самовывоза, то в карточке товара иногда указывают где покупатель может забрать товар прямо сейчас.
• Время поступления отсутствующего товара на склад. В крупных магазинах техники, бывает что товара нет в наличии прямо сейчас, но есть дата, когда он прибудет на склад. Это удобно для покупателя, он видит, что товар скоро будет и может подождать, вместо того чтобы покупать в другом месте.
• Состав. Если для описания товара важно указать что входит в его состав / из чего сделан. Актуально, например, для продуктов питания, одежды, обуви.
• Старая / новая цена. Обычно, когда к товару применяют скидку, старую цену тоже указывают, чтобы у покупателя были ориентиры, насколько снижена цена и сколько он экономит. Нужно сказать дизайнеру, чтобы он не забыл цену до скидки. Так же стоит перечислить другие маркетинговые фишки, которые нужно предусмотреть в дизайне.
• Размер скидки. Помимо указания старой и новой цен, иногда указывают размер скидок в % и/или рублях.
• Товар под праздник. Перед праздниками, например, Новым годом, некоторые магазины отмечают ряд товаров как наиболее подходящие к случаю. Это могут быть новогодние вечерние платья, которые до Нового года были просто вечерними платьями, «Пена для бритья» к 23-му февраля и т. п. варианты. Такая маркировка товаров помогает навести покупателя на правильные мысли. А также положительно сказывается на SEO (подробнее об этом в СТАТЬЕ)
• Комплектность. Если у товара возможна комплектность, то нужно ее указывать. Значит, о наличии в описании товара этого параметра дизайнер должен знать. Комплектность — это запасная пуговица для джинсов, зарядное для сотового телефона и т. д.
• Инструкция применения.
• Аксессуары.
• Похожие товары.

Этот список далеко не полный — только пример, что нужно указывать при описания товара в ТЗ для дизайнера. Посмотрите статью «Главные кнопки в интернет-магазине», в которой говориться что и в каких случаях писать на кнопке «Купить».

Разные карточки товара

Если у вас в магазине продаются товары очень разные, например, телевизоры и одежда, то описание карточки товара нужно сделать свое для каждого такого типа товара. Как минимум потому что у них существенно отличаются описания, параметры и характеристики. Поэтому универсальности может не получиться. А еще потому что иногда имеет смысл не грести все под одну гребенку, а сделать разный дизайн карточек товара для очень разных типов товаров.

То же самое, если товары сильно отличаются по аудитории и/или цене. Например, если в продаже есть обычные свадебные платья и вип-платья, они отличаются по цене и по платежеспособности аудитории, то есть смысл сделать другой дизайн карточки товара для таких платьев, чтобы дополнительно подчеркнуть их особый статус. А то и вообще сделать свой дизайн всему разделу.

Кто-то, может быть, помнит, как выглядел магазин «Евросеть» в исполнении Студии Артемия Лебедева? Там как раз был реализован подобный подход — отличались карточки товаров для обычных телефонов и вип моделей.  Кому интересно, посмотрите в Веб-архиве. Ссылки я дал.

Инструменты на сайте

Какие будут, на какой странице / разделе. В ТЗ на дизайн обязательно нужно перечислить функционал каждой страницы. В интернет-магазине обычно это:

• Фильтр по характеристикам товара в разделе «Каталог». Описывая фильтр, важно не забыть указать какие характеристики товара участвуют в фильтре (размер, цвет, бренд и т. д.). 
  Чтобы фильтр был по-настоящему удобным инструментом и реальным помощником покупателю при выборе товара в нем обязательно должны присутствовать параметры, важные для вашей целевой аудитории при выборе этого товара. Подумайте, как покупатели выбирают ваш товар и станет ясно какие параметры в фильтре должны быть обязательно. Зная это, дизайнер сможет облегчить покупателям выбор и постарается сделать преимущества более заметными.
• Сортировка. По каким параметрам будет сортировка товаров. Например, по цене (от большей к меньшей и наоборот), по популярности, по рейтингу.
• Сравнение. Если в интернет-магазине нужна возможность сравнивать товары, напишите об этом дизайнеру при составлении технического задания. Не забудьте указать, какие параметры товара будут участвовать в сравнении. «Сравнение товаров» это целый сервис (а не просто ссылка в карточке товара), поэтому для него нужна отдельная страница, ее тоже нужно нарисовать. Еще нужен информер на каждой странице каталога товаров, сообщающий сколько товаров находится в сравнении и позволяющий быстро перейти на страницу сравнения.
• Избранное. Если планируете давать пользователю возможность откладывать понравившиеся товары в избранное, то этот функционал нужно предусмотреть в дизайне. Не забудьте что кроме ссылки «добавить в избранное» (или «Отложить») в карточке товара, должны быть отрисована страница «Список товаров в избранном» (с кнопочкой «убрать из Избранного») и на каждой странице каталога товаров ссылка «Перейти к Избранному».
• Поиск.
• Быстрый заказ / заказ в один клик.
• Плавающая корзина. Маленькая корзина в каталоге товаров. Как только в корзине появляется товар, она приклеивается к верхней части окна браузера и показывает, сколько товаров находится в корзине, на какую цену. Иногда в маленькой корзине дают возможность удалять товар и менять его количество. Если вам этот функционал нужен — напишите об этом в ТЗ.

География магазина

Работает магазин на один город, на несколько или на всю страну.

Если у вас несколько магазинов или точек самовывоза, скажите об этом сразу, чтобы страница «Контакты» была сделана правильно, а в корзине не забыли функционал по выбору точек самовывоза.

Поля в корзине

Поля которые будет заполнять покупатель, чтобы оформить заказ, способы доставки, способы оплаты, взаимозависимость их между собой.

Готовность к обсуждению

Если вы непрофессионал и допускаете что можете быть неправы, при этом доверяете опыту дизайнера, стоит написать в ТЗ примерно следующее: «Если вы считаете что я ошибаюсь в каком-то из своих пожеланий, или что-то в моих идеях можно улучшить / упростить  / сделать оптимальнее — давайте обсуждать, я с радостью прислушаюсь к вашему мнению».

Прорабатывая дизайн нужно помнить что некоторые, на первый взгляд простые вещи в функционале могут сильно усложнить работу программисту, а значит, увеличить цену разработки. Или, что хуже, усложнить вашу дальнейшую работу над сайтом, добавив большой пласт рутинной ручной работы, которой нужно избегать и автоматизировать (ручная работа приводит к накоплению ошибок на сайте).

Для разных проектов пункты, конечно, могут меняться и дополняться. Но даже этот усредненный перечень материалов, которые нужно давать в ТЗ на дизайн, если будет с должным вниманием подготовлен заказчиком, существенно улучшит качество дизайна для вашего интернет-магазина.  Конечно, если попадет к адекватному дизайнеру.

Три типа дизайнеров

Раз уж говорим про правильный подход к разработке дизайна интернет-магазина, следует отметить, что важная часть успеха — правильный дизайнер. Если дизайнеру безразличен результат, который получит клиент и важно сделать ровно настолько, чтобы работа была принята, то даже самое подробное ТЗ на дизайн сайта не гарантирует качественного результата. Хотя нужно отметить, что имея на руках детально описанное задание, заказчику проще контролировать ход работы и указывать на недостатки.

Для простоты я делю дизайнеров всего на 3 группы:

Хороший дизайнер

Имеет большой опыт работы, ему важно непросто заработать, но и чтобы у клиента был результат. Понимает что цель дизайна — эффективность решения задач. Знает о существовании целевых действий, понимает как среди них расставлять акценты и приоритеты. Такой дизайнер задает много вопросов, вытягивать из клиента как можно больше информации. Часто у заказчика после общения с ним появляется неприятное ощущения «я так мало понимаю в этом». Такой дизайнер старается вникнуть в проект, предлагает свои идеи решения или даже функционал. Мыслит не только как художник, но и как UX-специалист и маркетолог.

Мастер фотошопа

Дизайнер, которому не все равно какие работы у него получаются — сделает красиво. Красота — высшая целесообразность. Удобность вторично, эффективность — нет, не слышал. Красивые дизайны нравятся заказчикам и легко ими принимаются, поэтому работы у такого дизайнера обычно много. Если дать ему хорошее ТЗ — сделает хорошо, но по привычке будет уходить в красивости.

Х1як, Х1як и в продакшн

 Дизайнер, который работает просто за деньги, сделает, «как получится», на основе той инфы что уже есть, внесет правки, поступившие от клиента и готово. Следующий!

Клиентоориентированная версия этого дизайнера предложит заказчику несколько цветовых схем и поиграет со шрифтами.

Такие дизайнеры не привыкли работать качественно, в их отношении к работе всегда будет заметен подход «поскорее отвязаться от этого заказа и взять следующий», они постоянно пытаются «забыть» о каких-то пунктах в ТЗ, имеют низкий уровень работы в целом, для скорости используют клипарты, библиотеки иконок, пиратские шрифты, часто не заморачиваются на удобную компоновку слоев в исходнике, что затрудняет работу верстальщика. Но плохому дизайнеру наплевать на это, равно как на эффективность дизайна, который он сделал. Даже самое продуманное ТЗ на дизайн не существенно улучшит его работу.

Три приведенных типа дизайнеров — это неполная «классификация». Есть промежуточные варианты. Многое зависит от заказчика. Можно и хорошего дизайнера задолбать глупыми требованиями, он устанет спорить, махнет рукой и персонально для вас спустится со своего первого места на второе или даже третье.

Кто-то сейчас подумал, что для успеха достаточно найти правильного дизайнера, а уж он даже с минимальным ТЗ сделает дизайн магазина на отлично. Это так, но только отчасти. Хотите действительно хороший результат, тогда не забывайте, о чем было сказано в начале статьи — главное в дизайне — контент. А за вас его никто не подготовит / разработает / соберет.

Почему не нужно копировать лидеров рынка

Продумывая задание на дизайн интернет-магазина не всегда нужно смотреть на крупных конкурентов – лидеров рынка.

Какие-то вещи перенимать нужно, но осознанно, понимая, зачем вы это делаете. Нельзя слепо копировать функционал, только потому, что так сделано у лидера.

Сайты больших интернет-магазинов имеют свою специфику в силу количества групп товаров, большого числа разделов и подразделов, огромного ассортимента. Поэтому небольшим интернет-магазинам не пойдет на пользу копирование крупных. Да и не всегда у лидера все идеально в плане юзабилити и SEO.

Почему-то принято считать, что лидеры постоянно тестируют свои магазины на эффективность, внедряют новшества, семь раз отмерив. Считается, что если какая-то деталь у них сделана именно так, значит, так нужно. Возможно, так и есть в Амазон.ком или Заппос.ком, но идеализировать в этом плане топ интернет-магазинов Рунета точно не стоит.

Крупные интернет-магазины, главенствующие в какой-то нише, обычно обновляют дизайн и функционал своего сайта не слишком часто (на то у них есть свои веские причины). Если об этом не помнить, есть шанс скопировать устаревший сайт, которому уже 3-4 года,  а через несколько месяцев после своего запуска узнать что «образец для подражания» был кардинально обновлен.

Конечно, нужно изучать чужой опыт и перенимать хорошие решения. Например, если вы не знаете как в вашем интернет-магазине одежды сделать вывод показов результатов поиска по товарам, то идите в Вилдберриес, Ламоду, КупиВип и посмотрите как сделано у них. Бенчмаркинг — нормальная практика.

Если вы не знаете как лучше сделать пагинацию в каталоге товаров, то перенимать опыт у Вилбдеррис и Ламоды не стоит. Посмотрите статью про правильную пагинацию.

И еще, некоторые заказчики любят рисовать вайрфреймы / скетчи и отправлять их дизайнеру. не нужно этого делать. Хороший дизайнер на ваши вайрфреймы особого внимания не обратит. Если посчитает нужным – сделает по-своему. Плохой дизайнер сделает, все как вы нарисовали, лишь бы вы работу приняли. Для себя, чтобы лучше представлять структуру страницы, раскладку на странице объектов – делайте. Но отправлять дизайнеру не нужно.

Что дает тщательная подготовка ТЗ на дизайн

Переходим к любимому раздела Капитана Очевидность. Перечислим плюсы, которые дает тщательный подход к разработке технического задания на дизайн сайта.

Сразу видим каким будет дизайн

Огромный плюс в предоставлении дизайнеру контента для всех страниц в том что, принимая дизайн, вы будете видеть, как выглядит именно ваш сайт, а не какой-то абстрактный сайт с фотками и текстами, надерганными для примера из других интернет-магазинов. Это позволит не отвлекаться на красивые картинки, которые для примера поставлены дизайнером, а оценивать объективно, видеть страницы ровно так, как их будет видеть потенциальный покупатель и делать это на стадии дизайна, а не в самом конце, когда контент-менеджер уже внес материал в готовый сайт и завтра открытие.

Заранее видим проблемы дизайна

Другой важный момент, вытекает из предыдущего. Дизайн, сделанный без использования тестовых материалов, а целиком на информации, предоставленной заказчиком, поможет заказчику увидеть свои проблемы еще до запуска магазина на этапе дизайна. Хочется ли купить? Достаточно ли убедительно выглядит товар, чтобы продавать его за такую цену? Убеждают ли вас тексты на сайте о том, что вам можно доверять. Все ли достаточно просто и понятно? Только одно это понимание уже дорогого стоит.

Вполне может оказаться, что заказчик, увидев, как плохо выглядят в каталоге товаров фотографии одежды, отснятые на манекене, решит переснять весь ассортимент с привлечением проф. модели. Потому что, посмотрев, дизайн он понял, что сам не купил бы так плохо представленный товар даже за вдвое меньшую цену.А если бы дизайнер поставил  в этот же макет фотографии «для примера», то заказчик понял бы проблему только спустя 1-2 мес. когда в готовый сайт, за несколько дней до запуска разместили реальные (а не тестовые) товары. Таким образом, бюджет, запланированный на старт, для первоначальной рекламы проекта будет слит впустую, только за счет плохой привлекательности товаров (никто не будет покупать), или придется откладывать запуск. А предоставив дизайнеру фотографии товара сразу, клиент получил 1-2 месяца времени на то, чтобы сделать нормальную фотосессию. А за эти 1-2 месяца как раз закончится разработка интернет-магазина.

Лучшее решение бизнес-целей

Хороший дизайн, сделанный по вашему контенту (без «рыбы»), лучше доносит важную информацию до покупателя, делает все сказанное на сайте более убедительным. Помогает подать материал правильно, в нужной последовательности, с акцентами на целевых действиях и на важных местах в тексте.

Предсказуемость результата

Чем тщательнее техзадание на дизайн, чем больше страниц будет разработано, тем более предсказуемым будет результат. Проще говоря, когда у вас есть подробный, детально проработанный дизайн, вы уже точно знаете чего ожидать. В этом случае дизайн будет являться своего рода техническим заданием для следующих этапов – верстки и интеграции в CMS (я, по традиции под CMS подразумеваю 1C-Битрикс :-)

Без внятного ТЗ — результат ХЗ.
— народная мудрость.

Снижение рисков

Все знают что риски нужно сокращать, если мы хотим получить более-менее предсказуемый результат, в сколько-то приемлемые сроки, за более-менее ту цену, на которую рассчитывали. Так вот, если у вас детально проработан дизайн – это два ТЗ: на верстку и на программинг.

Конечно, наличие отдельных заданий на верстку и программную часть лишними не будут, можете — сделайте. Но обычно настолько идеальных проектов не бывает . Поэтому когда в дизайне отрисована каждая страница, каждое модальное окно — это очень упрощает работу front-end-разработчику и программисту.

Простой пример: если страницы отрисованы не все что нужны, то в верстке они тоже будут не все. Но при этом страницы типа «Ошибка 404 — страница не найдена» и т. п., все равно нужны.

Если магазин разрабатывает студия, они эти моменты обычно учитывают, если заказчик сам управляет созданием магазина (и не разбирается в технической части), сначала заказывает дизайн, потом верстку и т. д. — ошибки неизбежны.

Заказчик может вообще не знать о некоторых страницах, которые должны присутствовать.

 Либо не сможет объяснить «техническим языком» что и как должно быть сделано на тех страницах, которых нет в дизайне, но которые нужны. Это вызывает непонимание со стороны сначала верстальщика, а потом программиста. Ведет к неверной оценке объема работы, которая в итоге ложится на заказчика.

Поэтому чтобы избежать странных формулировок в объяснениях с верстальщиком или программистом типа «Страниц нет, но они нужны» лучше все же их заранее отрисовать. Да, вы больше потратитесь на дизайн, но здорово увеличите вероятность получить свой интернет-магазин сразу на приемлемом уровне.

Можно будет снизить вероятность, когда верстальщик или программист скажут «работа о которой вы говорите не входила в оговоренный объем и нужно доплатить».

Я уже давал выше ссылку на статью, где подробно перечислены страницы магазина, которые нужно заказывать дизайнеру. Но хочу отметить, что не всегда нужен полный список страниц, перечисленных в той статье.

Аргумент в конфликтных ситуациях. Когда все требования к дизайну описаны должным образом, при возникновении спорных, ситуаций (например, при верстке) вы можете ссылаться на свое подробное ТЗ, как на железный аргумент. Этот документ, приложенный к договору, будет отличным подспорьем.

Подытожим

Главная ошибка при заказе дизайна — не давать всю необходимую инфу дизайнеру. Конечно, дизайнер сделает свою работу и с минимумом контента. Но сами подумайте, как ему сделать хорошо продуманную карточку товара, если он не знает точно, что на ней будет? Как сделать удобную корзину, если непонятно какие буду в ней поля и какая между ними взаимозависимость? А представьте что ему таких страниц для вашего магазина нужно отрисовать 20 – 50 шт. Приходится искать компромиссы, придумывать, как сделать универсально, чтобы материалы, которые пока не предусмотрены, позже было куда запихивать.

Другая ошибка — перечислить в ТЗ только список страниц (пусть даже с контентом для каждой), не сказав про «Целевые действия» и «Целевую аудиторию» (о наличии этих пунктов в ТЗ говорится выше). В этом случае ТЗ на дизайн формально перечисляет страницы, которые нужно нарисовать и элементы, которые на этой страницы должны присутствовать и не описывает основные моменты взаимодействия с клиентом. При таком подходе заказчика к ТЗ, дизайнер, если он не слишком заинтересован в результате может подойти к вопросу тоже формально — сделать что перечислено и посчитать на этом работу выполненной.

Хотите хорошо — не ленитесь, перед заказом дизайна подготовьте контент. Потому что соответствие дизайна вашим задачам пропорционально качеству материалов, который вы  предоставите дизайнеру.

Повторюсь: Если у вас не готов контент для каждой страницы — дизайн заказывать рано.

Нельзя написать портрет, если заказчик не приходит позировать. Костюм, пошитый на заказ, будет не по размеру, если мерку снимут не с вас. С дизайном интернет-магазина то же самое — невозможно сделать хорошо, если заказчик не предоставил всей нужной информации.

Иногда, заказчику, если он уверен, что не справится с задачей, стоить нанять  исполнителя не только на дизайн, но и на составление ТЗ. Если, конечно, на это есть бюджет. Разработка технического задания на дизайн или проектирование, техзадание на верстку и контроль выполнения, ТЗ на программную часть — такие же этапы работы, как и создание дизайна сайта. Только эти этапы менее очевидные и неспециалистам мало заметны. Даже если их не делают именно как отдельные этапы, так или иначе, они все равно выполняются.