20 советов по разработке дизайна интернет-магазинов
Обычное дело. Человек ищет в интернете нужный ему товар, находит через любимый им поисковик электронный магазин, в котором этот товар продаётся, входит по ссылке в поисковой выдаче на страницу магазина и... со скоростью пули покидает её! Или другой сценарий. Красивый ресурс позиционирует себя как шедевр с точки зрения веб-дизайна и удобства для посетителей. Однако, потенциальный клиент, находясь на страницах этого сайта, расходует массу времени, тратит силы и, наконец, потеряв терпение, так и не завершает процесс покупки.
Задача дизайнера электронного магазина заключается не только в создании внешне привлекательного веб-сайта. "Внешность", конечно, важна для формирования у посетителя позитивного отношения к ресурсу, но для успеха интернет-коммерции более значимым является прохождение клиентом всего процесса – от входа на целевую страницу до совершения оплаты товара.
Ниже мы представляем некоторые рекомендации, следуя которым, дизайнер электронного магазина создаст сайт, одновременно красивый и способствующий логическому завершению покупателем своих действий по приобретению товара. Нижеследующий список не является исчерпывающим. Возможно его расширение за счёт практических знаний, приобретённых при осуществлении профессиональной деятельности по созданию интернет-магазинов.
1. Сделайте посетителей свободными в подборе нужного товара
От дизайнера электронного магазина требуется активное использование поиска по сайту с применением фильтров. Посетитель должен как можно раньше перейти к анализу всех предложений для поиска того, что требуется именно в его случае. Связь здесь прямая - чем больше посетитель получит в своё распоряжение фильтров, тем меньше сил и времени он затратит на нахождение нужных ему товаров и услуг.
Такие возможности чрезвычайно полезны при подбора товара в соответствии с какими-то численными параметрами, к примеру, одежды в зависимости от размера. Посетитель испытывает настоящее воодушевление и энтузиазм по поводу возможности приобретения, если убеждается, что одежда, подобранная с затратами сил и времени, продаётся в магазине именно в том размере, за которым он "охотился".
2. Обеспечьте посетителям возможность простого и быстрого изменения своего выбора
При узком поиске товаров внутри какой-либо группы, к примеру, только одежды определённого бренда, посетитель может со временем изменить то или иное своё решение. В этом контексте крайне важным является наличие возможностей отмены сделанного выбора и перехода к новому товару. Причём, нужно сделать так, чтобы выбор можно было отменять не с помощью кнопки браузера "Назад". Это приводит к потере сведений, уже введённых в формы, влечёт за собой возвращение в исходную поисковую точку и очень раздражает посетителей.
3. Сделайте панель поиска легкодоступной
Посетители всегда активно пользуются поисковым сервисом электронного магазина. Доказано, если человек оказался на сайте ради приобретения какой-то конкретной вещи, то в первую очередь он введёт запрос в поисковую строку. Однако, даже в том случае, если посетитель не определился с конкретным выбором, он всё равно будет искать нужный ему объект с помощью поисковика интернет-магазина.
На каждой странице магазина должна быть размещена хорошо заметная и удобная для посетителя поисковая строка. Желательно снабдить свой поисковый сервис инструментом автоматической демонстрации названий разделов магазина в зависимости от вариантов поисковой фразы, набираемой посетителем. Наличие этой дополнительной информации может стать стимулом для потенциального клиента к анализу тех предложений, которые ранее им не рассматривались.
4. Сведения о временном отсутствии товара должны быть хорошо видимыми и толковаться однозначно
Одна из ошибок дизайнера электронного магазина заключается в неправильном уведомлении посетителей о временном отсутствии товарных позиций. Да, для поисковой оптимизации плохо, когда сегодня информация о товаре удаляется с виртуальной витрины, а завтра снова появляется там.
Однако, урон репутации магазина будет куда более серьёзным, если потенциальный клиент, заполнив все необходимые формы и приготовившись оплатить покупку, вдруг узнает, что товар отсутствует. Легко вообразить, как он рассердится! Очевидно, что в этот магазин посетитель, если и придёт когда-нибудь, то это будет нескоро и уж точно по совсем крайней необходимости. Люди любят себя и не любят тех, кто не ценит их время.
Вывод. Сведения об отсутствующих товарах должны предоставляться ещё до старта процесса выбора. И посетитель должен понимать эту информацию однозначно.
5. Используйте только качественные фотоснимки
Успех интернет-коммерции зиждется, главным образом, на качестве визуального представления товаров. В отличие от обычного магазина, здесь покупатель объективно лишён возможности увидеть товар, что называется, вживую. Благодаря достаточному количеству качественных фотоизображений товаров посетители могут получать представление о товарах, что во многом облегчает принятие решения о совершении покупки.
Разрабатывая дизайн веб-страниц, обязательно следует обращать внимание на данный фактор. Допускается использование разных способов преподнесения визуальной информации. Она может быть представленной, например, в виде слайд-шоу или миниатюр, которые связываются с большими изображениями. Также нужно помнить, что низкое качество фотоснимков испортит впечатление посетителей не только от товара, но и от всего магазина.
6. Покупательская корзина должна размещаться на виду
Покупатели любят, когда не нужно совершать переход на страницу корзины всякий раз при добавлении в неё очередного товара. Поэтому крайне важно, чтобы корзина отображалась на всех страницах магазина.
Нередко дизайнеры размещают этот важный элемент в боковой панели. Однако, целесообразнее размещать корзину в самой заметной области веб-страницы: она настолько же важна в процессе покупки, как и поисковая строка. Поэтому оба эти элемента должны быть всегда под рукой. Особенно корзина.
Помимо того, корзина должна описываться достаточно информативно. То есть, покупатель должен получать сведения не только о количестве помещённых в корзину товаров. Хороший подход – использовать эскизы товаров или хотя бы их иконки. Это сделает корзину информативной и придаст ей, так сказать, "жизненности".
7. Обеспечьте простоту и удобство навигации по магазину
В крупных электронных магазинах с широким набором предложений все товары разделяются, как правило, по категориям. При этом используются всевозможные меню, например, выпадающие. Их применение даёт возможность избавиться от загромождения веб-страниц мешающими элементами, что, в свою очередь, обеспечивает пользователю доступ в любые разделы магазина.
Таким образом, использование выпадающих меню является наиболее простым и эффективным способом создания системы навигации по электронному магазину. Сделайте простой и понятный сайт интернет-магазина для того, чтобы посетители могли без труда ориентироваться в его разделах.
Хороший вариант навигации по сайту представляет собой использование достаточно известных интернет-пользователям навигационных цепочек, называемых на профессиональном жаргоне "хлебными крошками".
8. Сведения о стоимости доставки покупок не должны размещаться только на завершающей странице
Большинство посетителей ещё до заказа товара интересуются стоимостью доставки его приобретения. Большой процент сделок срывается, когда непосредственно перед нажатием кнопки "Оплата" покупателю вдруг открывается, что вместе с оплатой доставки он должен уплатить сумму, превышающую его бюджет. В этом случае возникает риск того, что процесс покупки так не будет завершён. Во избежание подобного развития событий сведения о стоимости доставки необходимо размещать вместе с информацией о товаре – на одной странице.
9. Каждый пиксель изменений должен быть обоснован
Принимая решение об изменениях веб-дизайна вашего ресурса, спросите самого себя – а для решения каких задач вносится данное изменение? Ответьте на два вопроса. Во-первых, для чего это магазину? И, во-вторых, каким образом это изменение поможет посетителям выполнять на сайте значимые для проекта действия?
Качество веб-дизайна электронного магазина должно быть таким высоким, чтобы сайт выглядел, как говорится, на все сто. Гламурность дизайна для покупателя вторична. Куда значимее для него функциональность и наличие информации о нужном ему товаре.
10. Помните о том, что будет выполняться поисковая оптимизация (SEO)
Дизайнеры часто принижают значение SEO для электронного магазина. Этот подход неверен в корне. Без проведения грамотного поискового продвижения необходимое для процветания магазина количество посетителей (трафик) может привести только дорогостоящая реклама.
При разработке веб-дизайна необходимо помнить об этом постоянно. Вместе с оптимизатором нужно продумывать, каким образом использовать ключевые запросы, выяснять, все ли ключевики будут уместны для всех страниц магазина. Практика SEO показывает, что целесообразно размещать ключевые запросы либо в навигационном меню, либо на свободном участке под заголовком веб-страницы.
11. Добавьте магазину индивидуальных черт
Для выделения своего магазина из большого числа похожих сайтов нужно придать ему некоторые индивидуальные черты. Очевидно, что простота навигационной системы ресурса лежит в основе успеха, но одного этого явно недостаточно. Наличие каких-то особенных нюансов, если хотите, "изюминок", превратит ваш электронный магазин в ресурс, на страницы которого посетители будут приходить снова и снова.
12. Добавьте на веб-страницы кнопки социальных медиа
Вероятность привлечения прямых покупателей, скажем, из сервиса микроблогов "Twitter" может оказаться не очень высокой. Однако, продвижение в социальных медиа играет важную роль в поисковой оптимизации, поскольку связано с созданием большого количества ссылок на магазин. Размещая виртуальные кнопки соцсетей, вы, тем самым, стимулируете ваших посетителей обмениваться в сети сведениями о магазине, о товарах, об условиях.
Важным является выбор места для размещения этих кнопок. Разумеется, они не должны располагаться где-то на главных позициях, мешая посетителям получать сведения о ваших товарах, но и, отправляя их, так сказать, на "дальний план", например, в нижнюю часть веб-страницы, вы превращаете их в бесполезный инструмент.
Выше уже упоминалось, что успех электронной коммерции основывается на визуальном представлении товаров покупателям. Поэтому рекомендуем вам размещать на веб-страницах магазинов кнопки сервиса "Pinterest".
13. Посетитель должен получать информацию о товаре быстро
Люди, ищущие товары в интернете, хотят быстро просматривать страницы разделов электронного магазина и в короткий срок находить интересные предложения. Любое перенаправление их на отдельные страницы товаров создаёт задержку в просмотре и вызывает недовольство посетителей.
Быстрый просмотр информации по товарам целесообразно реализовывать на платформе "Ajax". В режиме предварительного просмотра можно масштабировать фотоизображение изделий или предоставлять дополнительные сведения о них. Эти шаги позволят повысить позитивное восприятие посетителями как отдельных товаров, так и магазина в целом.
14. Разместите на страницах форму подписки на ваши новости
База данных адресов электронной почты реальных людей является чрезвычайно ценным инструментом интернет-маркетинга. Однако, обзаведение собственным списком адресов для e-mail-рассылки рекламных писем - процесс длительный. Размещайте на страницах магазина форму подписки на ваши новости, и вы существенно сократите срок формирования полезной для вашего бизнеса базы данных электронных адресов. Разместить можно любую стандартную форму, нужно лишь постараться, чтобы она была более привлекательна, нежели на конкурирующих сайтах.
15. Не загромождайте страницы с описаниями товаров
Сайт электронного магазина нужно содержать в чистоте, что означает отсутствие на его страницах элементов, наличие которых ослабляло бы внимание посетителя к процессу покупки товара.
Кроме того, сайт должен быть простым. Фотоснимки товаров вкупе с аккуратным описанием и прочей информацией должны размещаться в отдельном пространстве. Не следует увлекаться сторонней рекламой, отвлекающей посетителя от ваших предложений.
Будьте осторожны, добавляя на страницу товара разделы вроде "Вместе с этим товаром покупают ещё и...". Бесспорно, это превосходный способ стимулирования посетителя к расширению ассортимента покупок. Однако, при слишком активном применении этого инструмента можно прийти к хаосу на веб-странице.
16. Публикуйте отзывы покупателей
При получении позитивных отзывов от покупателей, связанных ли с товаром или просто с работой магазина, обязательно найдите возможность для их размещения на сайте. Что бы ни говорили скептики, положительные отзывы работают и стимулируют новых посетителей к совершению покупки в данном магазине. Оформляйте отзывы как отдельное окно с прокруткой или размещайте их в боковой панели. Так вы займёте минимум полезного пространства.
17. Наглядно продемонстрируйте все возможные варианты товара
Как правило, производители выходят на рынки с широким набором спецификаций продуктов. Таким образом, выбор товара часто сводится к анализу модификаций основного товара. Выполнение этих действий покупателями должно быть простым и понятным. Например, одежду целесообразно демонстрировать в разных комбинациях расцветок и размерных линеек.
18. Не размещайте отвлекающие элементы на страницах завершения покупки
При переходе покупателя к этапу проверки заказа и его оплате необходимо обеспечивать простоту завершения этого процесса. С веб-страниц завершения покупки нужно удалить все отвлекающие элементы - боковую панель, навигационные кнопки и рекламные баннеры. Оставьте на странице единственную кнопку "Оплатить".
Не размещайте на этой странице информацию о других предложениях. Посторонний контент на странице завершения покупки не исполняет полезных функций, а, напротив, лишь вредит, поскольку покупатель, обращая на него внимание, может отложить оплату покупки с тем, чтобы просмотреть другой товар. И вернётся ли он после этого на страницу оплаты – большой вопрос. Практика показывает, что конверсия у раздела оплаты покупки наиболее высока, если он оформляется в виде отдельной страницы.
19. Кнопка "Добавить в корзину" должна быть хорошо заметна
Напомним, что кнопка добавления товара в корзину должна размещаться на всех страницах электронного магазина. Наряду с этим, она должна быть хорошо заметной посетителю. Определённая смелость в изображении этой кнопки повышает шансы её прямого использования.
20. Сделайте обратную связь простой
Технологии, используемые при создании интернет-магазина, предполагают, что основное общение покупателей и персонала происходит в интернете. Размещайте коммуникативные инструменты на страницах таким образом, чтобы посетитель не испытывал затруднений в установлении контакта с персоналом магазина. И обязательно предложите альтернативные способы связи, например, использование обычного телефона. Наличие возможности уточнения деталей заказа по телефону вызовет доверие у потенциальных покупателей к электронному магазину.
