Книга Интернет-магазин с нуля. Полное пошаговое руководство - Артем Еремеевский

И запомните главное: не существует золотой формулы идеального движка. Его выбор – это дело вкуса, каждому нравится свое.

Основы технического дизайна магазина

Цели и задачи современного дизайна

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

Вы можете навешать сколько угодно красивых штучек, картинок или анимации, но если дизайн создает клиенту неудобства, то вся эта красота будет попросту излишней. Изначально дизайн в вашем магазине должен быть максимально прост для пользователя. Многие совершают ошибку, натыкав сразу всего – и кнопку «Быстрый заказ», и рейтинги, и отзывы, и все это получается разбросанным по странице, создавая хаос. Отсюда итог: дизайн наворочен, а клиент путается и ничего не находит.

Влияние юзабилити на продажи

Приведу два примера, чтобы стало понятно, о чем идет речь.

...

Первый пример

Магазин drumshop.ru (он действительно создавался экспертом по юзабилити, с которым мы знакомы лично). Что сразу бросается в глаза? Прежде всего простота: все, что нужно, у вас под рукой. Слайдер на главной странице, категории слева, несколько хитов пониже, информация о магазине сверху. Это и есть современный дизайн, когда графические навороты уступают место удобству и легкости.

...

Второй пример

Магазин gadgetmarket. tv . Первая мысль: «Куда же здесь кликать?» Зачем на клиента выливается сразу весь поток информации: и чат с надписью 24/7/365 ( который почему-то офлайн), и выбор валюты ( хотя магазин работает в России), и слайдер, и ужасное форматирование, и много всего другого. Основа современного дизайна – простота и легкость, а если подключаете новые фишки, то надо очень четко продумать их расположение и то, насколько удобно будет клиенту их находить.

Иначе в итоге вы просто создадите кучу различных элементов, а юзабилити от этого будет только страдать. А это самым прямым образом влияет на продажи. Когда я впервые увидел «Мир Гика», в нем, с точки зрения юзабилити, было все очень, мягко говоря, нехорошо. Посидев пару дней и исправив множество моментов в дизайне, я увидел, что это увеличило юзабилити и, как следствие, конверсию минимум на 50 %.

Каким же образом создать дизайн? Вариантов у вас три:

✓ сделать все самому;

✓ нанять специалистов (фрилансеров, студию и т. д.);

✓ использовать готовые решения.

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

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

Остается третий и, пожалуй, самый верный способ на начальном этапе – готовый шаблон. Все движки и сервисы имеют ряд готовых шаблонов, которые, как правило, не блещут изысканностью и продуманностью. Поэтому не советую использовать их. За 2–5 тысяч рублей можно найти платные и доработанные шаблоны почти на любой популярный движок или сервис. Этим вы обеспечите, во-первых, относительную уникальность (потому что платные шаблоны используются намного реже бесплатных), а во-вторых, профессиональный вид вашего магазина.

Впрочем, можно пойти и другим путем, доработав самостоятельно или с помощью фрилансеров бесплатный шаблон: обеспечить зонирование (об этом ниже), подбор цветов и другие мелочи. Но это опять же выльется в те же 1–5 тысяч рублей фрилансерам и потраченное время.

И запомните главное: если у вас нет опыта, не пытайтесь дорабатывать шаблоны самостоятельно, будь они платные или бесплатные.

Зонирование при разработке дизайна

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

Согласно многочисленным исследованиям, внимание посетителя по сайту распределяется неравномерно (рис. 1 и 2).

Рис. 1. Распределение внимания посетителя по странице сайта

Рис. 2. Диаграмма Гутенберга

Наибольшее внимание клиентов привлекает верхняя область страницы (рис. 3).

Рис. 3. Зона наибольшего привлечения внимания

Именно там нужно расположить все, что важно клиенту. Как правило, это:

1. Шапка (логотип + контакты).

2. Ссылки на значимые страницы (доставка, оплата, о компании и т. д.).

3. Категории.

4. Баннеры, уникальное торговое предложение.

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

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

Базовое расположение элементов магазина

Разобравшись с зонированием, вы наверняка зададитесь вопросами, какая информация является наиболее важной для клиента и что же расположить в каждом конкретном блоке. Остановимся на этом подробнее.

Шапка сайта. Здесь обязательно располагается ваш логотип (слева) и контакты (телефоны, «Скайп» и т. д.). Удачным решением будет разместить в правом верхнем углу блок корзины – это стандарт, к которому все привыкли, а область пониженного внимания не будет подгонять клиента к оформлению заказа, а позволит сосредоточиться на выборе товара. Следует учесть, что все элементы необходимо разграничить, то есть контакты не должны сливаться с блоком корзины или логотипа.