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

Еремеевский Артем

...

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

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

...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 4. Размещение ключевой информации в зоне наибольшего внимания на примере магазина «Мир Гика»

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

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

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

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

Что

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

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

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

Центральный контент. Здесь следует обратить внимание на еще одну особенность просмотра страниц, так называемый эффект буквы F, когда посетитель просматривает первые две строки, а потом перемещается по вертикали. Второй строкой, как правило, выступает верхняя часть контента (первая строка – шапка с меню), и она привлекает внимание посетителя практически сразу. И ваша задача – задержать его внимание, расположив красочные баннеры, уникальные предложения, информацию об акциях или даже видео. Чем необычнее будет подача, тем больше шансов, что случайный посетитель превратится в покупателя. Но основная цель этого элемента – не продать, а именно задержать внимание.

Ошибки, которые могут отпугнуть потенциального клиента

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

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

Телефонный номер имеет еще большее влияние, если ваш магазин торгует по всей России. В этом случае, по многочисленным статистическим исследованиям, порядка 30–40 % посетителей – москвичи, и они, зайдя на сайт и не увидев московского номера, могут просто закрыть его. Это влечет за собой сразу две проблемы: во-первых, вы теряете потенциального клиента, во-вторых, сильно сокращаете среднее время просмотра вашего сайта, что в свою очередь отрицательно влияет на поисковую выдачу (проще говоря, при поиске ваш сайт будет ниже, чем мог бы).

Собственно, сейчас приобрести московский номер можно даже в том случае, если вы живете на противоположном конце страны. Для этого есть множество сервисов, например skypeinrus.ru позволяет приобрести московский номер за 850 рублей в месяц и переадресовывать звонки на ваш «Скайп». Это очень просто и удобно.

Следует учесть еще один момент. Если вы вывешиваете телефонный номер (а как вы поняли, сделать это нужно обязательно), то он должен быть доступен как минимум в рабочее время. Если же у вас нет возможности организовать постоянный прием звонков, следует создать автоответчик (и очень желательно – возможность заказа обратного звонка). Данную функцию можно также организовать через «Скайп», например, используя утилиту Pamela for Skype (www.pamela.biz/en), она помимо автоответчика умеет много чего еще: запись разговоров, перенаправление звонков (например, на ваш сотовый) и прочее. Саму запись для автоответчика создать не проблема – существуют организации, делающие это профессионально, они легко находятся через поиск по фразе «создание записи автоответчика».

Вторая серьезная ошибка – это отсутствие контента. Что вы скажете, зайдя в книжный магазин, где будут лежать всего две книги? Или зайдя в супермаркет с молочными продуктами, где будет стоять лишь одна бутылка молока? А если вы увидите скучающего кассира и полное отсутствие клиентов? Унылое зрелище, не правда ли?

Но почему-то владельцы интернет-магазинов считают, что такое же унылое зрелище допустимо для их детищ. Поэтому можно часто увидеть пустые категории без товаров, минимальное описание условий работы. Да-да, часто, зайдя в раздел «Доставка», можно увидеть фразу типа «Курьерская доставка по Москве – 200 рублей». И все. А где сроки? Где информация про точность и вежливость курьеров, про то, что нужно быть на связи, иначе курьер не дозвонится? Где все условия, которые внушат доверие к данному виду доставки и объяснят ее удобство? Расписывайте все подробно, чтобы у клиента не оставалось вопросов.

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

Главная страница

Восприятие и информация на главной странице: как удержать клиента

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