“Реанимация”. Выпуск 5: Редизайн интернет-магазина

CS-Cart Russian Build and International
Отличия Русской сборки CS-Cart от Международной и как обновиться
23.11.2017
как создать маркетплейс
Как создать Marketplace на Multi-Vendor
30.11.2017

“Реанимация”. Выпуск 5: Редизайн интернет-магазина

preview-5

Основная идея
Конверсия важнее красоты; яркие продающие кнопки; хедер не должен быть перегружен информацией; минимализм в дизайне; простота взаимодействия; удачное размещение элементов.
Полезные сервисы
mindmaster.com

Здравствуйте! В пятом выпуске eCommerce реалити-шоу “Реанимация” ведущий Роман Кежелис говорит о начале работ над визуальной составляющей магазина, призванной максимально повысить конверсию. Ведущий затрагивает темы разработки прототипа и важных принципов, которыми нужно руководствоваться при редизайне. В качестве наглядного пособия Роман демонстрирует две удачных и востребованных темы от AlexBranding и, отталкиваясь от них, рассказывает об основных продающих элементах дизайна, разработке мобильной версии сайта и выборе хостинга для CS-Cart.


Принципы создания дизайна

Прежде всего стоит уяснить самое главное: дизайн не так важен в магазине, как его функционал. Когда магазин делается “от дизайна”, его разработка почти гарантированно затягивается, и под визуальную составляющую куда сложнее адаптировать функционал, чем в рамках готового функционала спроектировать дизайн. Отсюда вытекает второй важный принцип, выделенный Романом: конверсия важнее красоты. Если вы задаетесь целью открыть магазин, то наверняка с желанием извлечь прибыль, а не показать всем красоту. Не стоит также забывать, что красота - понятие относительное, и идеального дизайна в природе не существует, а потому погоня за ним обречена. Стоит ли упоминать о том, какие средства будут на это затрачены? Вопрос риторический. Теперь, когда мы четко выставили приоритет функционала над дизайном, перейдем к другим принципам. Так Роман, помимо уже описанного, выделяет говорящий сам за себя принцип “не заставляйте меня думать”. Он означает, что в дизайне все должно быть просто и понятно, а элементы располагаться на своих привычных местах. Например, манипуляции с перемещениями корзины из правой верхней части сайта не приведут ни к чему хорошему, и клиент, как и любой человек, ленивый по своей природе, просто уйдет. Его нежелание разбираться в чужих творческих порывах понятно, он не обязан это делать, тем более если есть, из чего выбрать на рынке. Когда же все соответствует ожиданиям потенциального клиента, а в магазине главенствует минимализм, при котором убрано все лишнее, то и шансы что-то продать возрастают. В этом, согласно Роману, могут также помочь яркие продающие кнопки. Ведущий рекомендует делать их красными или желтыми, но бывают и случаи, когда эти цвета не подходят к дизайну. Так для черно-белого цветового исполнения сайта целесообразно использовать черные кнопки. Из всех описанных выше принципов складывается последний, но не менее важный: простота взаимодействия с сайтом. Помните, приступая к разработке дизайна, важно четко определиться с тем, для кого мы его рисуем. Требуется снова взглянуть на свою аудиторию и на основе ее анализа понять, какие решения могут оказаться удачными, а какие - нет. Здесь вновь может пригодиться карта целевой аудитории с сервиса mindmaster.com, которая упоминалась в предыдущем занятии.

О новых и готовых шаблонах

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

Но не обязательно придумывать дизайн с нуля, когда можно воспользоваться готовым и адаптировать его под нужды конкретного магазина, что чаще всего делается быстрее, а, значит, дешевле. Об этом ведущий рассказывает на примере шаблонов UniTheme и YOUPI, отвечающих сегодняшним стандартам интернет-магазинов, и даже смотрящих в будущее. Шаблон UniTheme без какой-либо адаптации лучше всего подходит магазинам, продающим электронику, бытовую технику и запчасти. Он предоставляет возможность быстрого старта магазина всего за час, после которого можно уже начать продавать, минимально отвлекаясь на проработку визуальной составляющей. В том и заключается неоспоримое преимущество готовых шаблонов, когда разработка хорошего магазина, согласно Роману, на движке CS-Cart составляет 300-400 часов, а на “Битрикс” - 500-700, и это не учитывая последующие доработки функционала!
Второй шаблон - YOUPI - это взгляд в будущее. Здесь внедрена модель максимального вовлечения клиента в процесс выбора товара и отражено то, какими интернет-магазины станут в скором времени в отношении внешнего вида и размещения блоков. Так роль продавцов здесь выполняют рекламные баннеры, которые удачно размещены среди карточек товаров на страницах категорий.


Разбор составляющих

Выделив преимущества готовых шаблонов дизайна, ведущий переходит непосредственно к важным его составляющим. Сперва Роман советует, отталкиваясь от структуры сайта, определиться с тем, какое меню будет использоваться в магазине: вертикальное или горизонтальное. Вертикальное подойдет для интернет-магазинов с большим количеством категорий товара, которые не помещаются горизонтально, а горизонтальное меню, соответственно, удачно впишется в магазин с меньшим числом категорий. Блок баннеров рядом (или внизу, в зависимости от выбранного меню) должен привлекать покупателя так своим исполнением, чтобы на изображение хотелось кликнуть. Хедер (она же “шапка”) не должен быть перегружен информацией, достаточно понятного позиционирования в виде слогана, номера телефона для связи и логотипа. Последний должен носить понятный характер, так как именно на лого первым делом чаще всего и обращает внимание посетитель сайта. Целесообразно также вывести на главную страницу блок с самыми продаваемыми товарами и комплектами товаров. Блок с отзывами из социальных сетей дополнительно помогает посетителю решиться на покупку, когда тот видит позитивные мнения от реальных людей. Что касается страницы с категориями товаров, то здесь Роман выдвигает хорошо знакомый медикам принцип “не навреди”. Например в CS-Cart уже реализована вполне удобная страница категорий, поэтому не нужно вносить какие-то излишества, достаточно просто адаптировать ее под общий внешний вид сайта. Для карточки товара существует пара хитростей, которыми поделился ведущий. Статус “нет в наличии” негативно сказывается на конверсии, но его можно заменить на “под заказ”. Цену товара имеет смысл писать не крупным шрифтом, потому что в подсознании клиента она кажется меньше, чем та же цена, написанная крупно. На карточке товара также стоит отобразить гарантии магазина, а под ними - описание, характеристики и отзывы, размещенными в отдельных вкладках. Характеристики товара рекомендуется снабдить маленькими иконками для наглядности.

Мобильная версия и хостинг

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

Дополнительно Роман уделил внимание выбору хостинга для CS-Cart, так как тот требует дополнительного сетевого окружения для быстрой работы. Корректная настройка также крайне важна, но в процессе можно столкнуться с массой неожиданных проблем, особенно если вы не являетесь специалистом в данной области. Мы можем помочь вам правильно выбрать хостинг и провести все необходимые настройки.

***

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

До скорых встреч!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>