Тема дизайна сайтов для интернет-магазинов вначале мне показалась простой, дальше некуда. Я начала набрасывать текст, когда добралась до 20 пункта поняла, что материал подобрался не на одну статью. Пришлось развернуться на 180 градусов и начать сначала. В итоге, без отступлений и теории, получилась выжимка, которую вполне можно назвать «Памяткой разработчику». В ней 7 и еще одно правило дизайна, который стимулирует интерес целевой аудитории и поднимает продажи интернет-магазинов.
1.
Дизайн главной страницы интернет-магазина = дизайну интерьера оффлайн-магазина по своему значению и, во многом, по смыслу. Да, за пределами рекламной кампании в соцсетях, Директе или где-то еще, это не самая посещаемая страница сайта, но именно она задает тон в истории про позиционирование и попадание в целевую аудиторию. Не превращайте ее в оду SEO-оптимизации.
Главная страница должна «продавать» целиком концепцию интернет-магазина, а не 30 новинок бытовой техники, 35 пар чулок и 40 хипстер-стайл гаджетов, которые завтра сменят следующие 30, 35 и 40, и так до бесконечности. Впрочем, слайдером во всю прокрутку экрана тоже увлекаться без оснований не стоит.
2.
Главная по посещаемости страница сайта – точка входа при грамотном продвижении в поисковиках и на партнерских площадках – карточка товара/услуги. Она должна решать 3 задачи: продавать товар, формировать доверие к продавцу (особенно актуально при онлайн-платежах), удерживать на сайте, стимулируя желание вернуться и купить что-то еще. Эти же задачи + еще парочку должны решать и все остальные страницы, кстати. Не забудьте про кнопки «поделиться» в популярных соцсетях.
3.
Всегда проверяйте, нашлось ли место для: списка (слайдера/галереи) рекомендованных товаров, дополняющих, просмотренных. Не забыта ли при верстке опция (кнопка/текст/иконка) Wish list (она же «отложить») и насколько она очевидна. Достаточно ли текста на страницах, на месте ли все материалы, помогающие рассказать о товаре максимально ясно и точно.
4.
Проверяйте вывод сайта на всех доступных устройствах еще на стадии разработки тестовых версий до утверждения. Он должен адекватно (объяснимо/очевидно) отображаться на маленьких экранах, подстраиваться под разрешение мобильных телефонов. На телефоне протестируйте юзабилити. Не устал ли палец листать экран, пока вы добирались до конца списка товаров или до футера (подвала) страницы? Не слишком ли много места занимают фотографии? Нет ли ошибок, разрывов, накладок слоев? Дорабатывайте сразу по мере обнаружения недочетов.
5.
Проверьте, не перегружен ли дизайн элементами.
- Отработали ли вы все возможности для визуальной оптимизации необходимого контента.
- Спрятали ли неизбежный информационный “мусор”, который требуют разместить SEO оптимизаторы, так, чтобы он, как минимум, не бросался в глаза при просмотре.
- Еще раз прокрутите в голове все опции вывода товаров: варианты слайдеров/закладок/вложений/списков/галерей. Горизонтальные и вертикальные варианты верстки сложных объектов.
- Вспомните, что сайд бар служит не только для вывода рубрикатора, фильтров и баннеров. Используйте его и для вывода постов из профилей соцсетей, последних отзывов / рейтингов / комментариев, новинок и постов в блоге.
6.
Не забывайте про видео-материалы. Демонстрация продуктов или сопровождение их “живым” видео-контентом об их свойствах/о бренде/с инструкциями по применению и т.п. могут стать решающим аргументом в принятии решения о покупке. А еще они повышают степень доверия к продавцу, особенно, если это видео, снято специально для сайта. Но! Уважайте посетителей не выкладывайте на сайт некачественный фото- и видео-контент, который перекроет негативом все ваши достижения на ниве оптимизации сайта.
7.
Если интернет-магазин оснащен блогом, не забудьте отделить его визуально от основного контента, не потеряв связь со стилистикой всего магазина, и обозначить его наличие на всех страницах сайта, включая главную. Одного пункта в меню недостаточно. Блог призван привлекать, развлекать, учить и удерживать потенциальных и лояльных клиентов. Это не прихоть заказчика, а инструмент для продвижения сайта и повышения продаж. Каждый пост в блоге, должен напоминать о продажах, даже если копирайтер забыл об этом. Рекомендованные списки товаров, просмотренные, новинки – все, что уместно, должно сопровождать публикацию. Если блога нет, постарайтесь, чтобы содержимое аккаунтов в соцсетях, которыми вы, наверняка, пользуетесь для продвижения своего интернет-магазина, было видно вашим потенциальным клиентам на любой странице сайта.
Плюс один... лайфхак от AdLife Studio
Когда сайт практически готов к запуску, пока его наполняют копирайтеры и контент-менеджеры, возьмите условный «отпуск» от этой работы. Займитесь бумажной работой, переключитесь на что угодно всей своей креативной командой, которая отвечает за дизайн. Включая владельца проекта. Как минимум, на день - это 24 часа. Постарайтесь не заглядывать к конкурентам и воздержитесь от заказов в интернет-магазинах.
Только через сутки рано утром - до работы, можно даже до завтрака и до того, как все проснутся, а голова прояснится - откройте в тишине проект на компьютере или на телефоне (что вам важнее в плане позиционирования?). И пролистайте все ключевые страницы. Главная-карточка товара-страница каталога-блог-запись блога-корзина-... Попробуйте добавить товары в корзину, потом что-то удалить. Пройдите затем все стадии оформление заказа до момента оплаты. Вернитесь на главную страницу или в корзину...
Потратьте на это 30 минут, не больше. А теперь прислушайтесь к себе.
Если вы почувствовали раздражение, усталость, стресс, нетерпение; не заболели ли у вас глаза или голова, попробуйте зафиксировать из-за чего это происходит, когда именно или после чего появились эти ощущения.
Сайт ни в коем случае не должен вызывать стресса или утомления. Предполагается, что человек будет проводит на нем много времени выбирая товары (это идеальный клиент), значит, процесс должен быть максимально комфортным. Исправляйте ошибки сразу, не дожидаясь индексации сайта поисковыми системами.
