Наша цель открыть интернет-магазин с нуля. И так мы с вами создали примерную структуру магазина (об этом здесь), прикинули семантическое ядро сайта для будущего продвижения (в этой главе), подумали о преимуществах и сформировали мнение будующих пользователях и покупателях сайта (здесь). Ознакомились с требованиями Яндекс к странице с конаткными данными и интерфейсу сайта.
Теперь вы думаете, что пора говорить о дизайне сайта?
- НЕТ…
Нам следует сформировать более детальную картину нашего магазина. Дизай, расположение элементов - всё важно и не будет лишним. Чтобы не гадать и не делать лишних ошибок мы возьмем несколько сайтов ориентиров. Нет нужны копировать их дизайн и цветовую палитру, мы лишь только посмотрим как выглядят сайты, и попытаемся нащупать общие элементы, которые есть у всех ресурсов.
Поговорим о юзабилити сайта. Так на иностранный манер называется совокупность интерфейсов, меню и полей в видимой пользователю части сайта. Это ни что иное, как оптимальное расположение и дизайн (в широком смысле этого слова) хорошо знакомых нам элементов, с точки зрения удобства пользователя и повышения конверсии сайта. Корзина, меню категорий каталога, доставка, административные страницы, системы фильтров, дублирования меню по характеристике товара, баннеры, слайдеры, красивые кнопки и т.д.
Юзабилити сайта – очень узкоспециальная тема. Некоторые специалисты по интерфейсам говорят, что лишь одной перестановкой элементов, сменой дизайна могут увеличить конверсию интернет-магазина от 5% до 20% и более. Эта работа требует специфических знаний, поэтому специалисты по интерфейсам и юзабилити очень высокооплачиваемые работники.
Что же делать нам с вами. Людям, которые хотят открыть интернет-магазин с нуля, то есть почти бесплатно и не имеют средств для подробного анализа.
Обратимся к простостому и проверенному средству. Возьмём за основу сайт очень крупного кибер-маркета и посмотрим, как у него расположены те или иные элементы. А чтобы сформировать полное мнение, возьмём сразу несколько крупных ресурсов и посмотрим их юзабилити.
Все компании на слуху, все компании топовые, с огромным оборотом, пользующиеся услугами крупных IT-компаний и имеющие собственный штат програмистом. У них всё должно быть в порядке с юзабилити сайта.
Четыре магазина имеют фиксированный дизайн с шириной в районе 1000 пикселей и только ОЗОН имеет «резиновый дизайн», то есть страница «расползается» на всю ширину экрана монитора. Фиксированный дизайн аккуратней смотрится, он имеет меньше багов при просмотре с маленьких экранов. У масштабируемых на ширину экрана страниц другое преимущество. В поле зрения у покупателя больше информации, нет белых полей (сейчас преобладают широкоформатные мониторы). Но при верстке с «резиновым» дизайном больше проблем, у него нельзя фиксировать шрифт, много размеров должны быть выведено в процентах. Выбор автора в пользу фиксированной ширины страницы в 1024 пикс. Если вы решили открыть свой первый интернет-магазин с нуля, то лучше выберите также фиксированную ширину страницы. С ней будет меньше проблем.
На всех сайтах доминирует белый цвет, старые добрые #fff. У всех пяти сайтов фон страницы, карточки с товаром белый. Общий фон страниц (за фиксированной части) может несколько отличаться, для контрастности у quelle.ru он сероголубой, у mvideo.ru праздничные снежинки. Но в целом доминируют светлые цвета.
Теперь о цветах для шрифтов и элементов сайта. На всех сайтах присутствует один доминирующий цвет в нескольких тонах и несколько дополнительных цветов для выделения элементов. У quelle.ru – это синий (6 тонов) и красный для выделения, у ozon.ru также вариации синего и шрифт черный, спортмастер самый красочный, но также только два цвета (опять синий и красный), lamoda.ru – стильно черно-белый, eldorado.ru, mvideo.ru – брендовые цвета.
Заметьте, все сайты довольно скучны по сочетанию, с однотонной цветовой гаммой. Сайт интернет-магазина не должен отвлекать покупателя буйством красок (в этом отношений спортмастер самый яркий). Главное на сайте интернет-магазина – товар и ваши преимущества (реальные и мнимые), всё остальное лишь фон.
Что мы можем сказать о юзабилити по поводу цветовой палитры. Фон страниц белый, внешний фон слегка отличается для диссонанса (светлый градиент), и один доминирующий цвет для элементов магазина (несколько тонов). Для выделения информации используем, более яркий цвет, обязательно сочетающийся с основным (примеры сочетания цыетов: синий–оранжевый, синий-красный, черный-желтый).
Лучше всего сделайте в графическом редакторе карту цветов своего сайта. Нарежьте с десяток прямоугольных слоев и подберите тона и цвета. Палитра сайт готова.
Смотрим на шапку сайта (хедер).
Все магазины имеют небольшую шапку высотой до 250 пикселей. В шапке присутствует логотип и никаких сопутствующих картинок. Никаких туфелек, счастливых мам, красивых девушек, машинок и компьютеров, только логотип и элементы о которых мы поговорим ниже. Для визуализации акций на сайтах используются тематические баннеры или картинка фона.
Понимаю, что вам захочется впихнуть в шапку загогулистый автомобильный диск, тюбик лака для ногтей, или другую красивую картинку. Вы решили открыть интернет-магазин с нуля, и у вас не такой уж и большой выбор, особенно при шаблонном дизайне. Часто этого нельзя избежать, если шаблон предполагает только такую верстку и вы не знаете, как её исправить. Постарайтесь, чтобы картинка была небольшой. Лучше всего чтобы картинок вообще не было. Фото товаров – вот главные элементы, визуализирующие тематику сайта.
Здесь всё очевидно. Две колонки с левым сайдбаром – лучший варинат. Несогласных с таким построением много, увы таков облик среднестатистического интернет-магазина в рунете. Скучно, но эффективно. Желательно использовать разные шаблоны для групп страниц. Но если вы только начинаете свой путь, то сверстать несколько шаблонов будет сложно.
Низ сайта, для чего он?
В футер тоже всё стандартно. Он выделен цветом и содержит несколько колонок с ссылками на информационные страницы или частично дублирует навигацию. В нем так же можно разместить кнопки соцсетей и счетчики. Эта часть сайта самая низкокликабельная, поэтому размещать в ней хоть какие-то значимые элементы не стоит. В основном футер используется для перелинковки (дублирования ссылок) и административных страниц.
Теперь обратим внимание на основные элементы сайта и юзабилити, которые и формируют внешний вид страницы.
Занимает 25-35% шапки сайта. Над логотипом стоит поработать. Он должен быть простым, но запоминиющимся. Не стоит рисовать очень сложный логотип. Стиль заключается в простоте.
Важный элемент. У всех сайтов номера телефонов для связи хорошо выделены и размещены в шапке сайта. Номер телефона должен бросаться в глаза. Значит этот элемент важен и его следует учеть при верстке шаблона и прорисовке дизайна.
У всех рассматриваемых сайтов корзина размещена в шапке сайта ближе к правому краю. Это её общепринятое законное место и не стоит ничего менять.
Для этой группы ссылок место тоже устоялось. Шапка сайта, небольшой шрифт, где-то справа или в центре.
Если вы решил открыть интернет-магазин с нуля, то вам не обойтись без ошибок. Не стоит их придумывать, просто попытайтесь разместить все вышеперечисленные элементы в невысокой шапке, плотно их скомпоновав по местам.
Основной навигационный элемент, с помощью которого пользователь попадает в интересующий его раздел.
sportmaster.ru На главной странице горизонтальное меню выводящее на крупные группы товаров. Под слайдером расположена карусель с дополнительным меню выводящим на категории спорт инвентаря. На внутренних страницах в левой колонки появляется обычное меню подкатегорий.
ozon.ru. Под логотипом в видимой части сайта меню категорий с выпадающий списком. На внутренних страницах над основным меню появляется список подкатегорий. Так же есть дополнительные фильтры товаров.
lamoda.ru. Всю левую колонку занимают фильтры товаров. Меню категорий расположена в левом сайдабаре, горизонтальное меню группирует товары по общим характеристикам.
eldorado.ru. Меню в левом сайдбаре. На вложенных страницах меню поднимается на верх и меняется на выпадающий список с оригинальными эффектами.
mvideo.ru. Меню категорий представлено в основном поле с логотипами категорий. Достаточно спорная навигация не лишенная своей привлекательности.
quelle.ru. Меню в левой колонке, также есть горизонтальное меню по общим характеристикам нескольких групп.
У всех сайтов свой подход к навигации. Над интерфейсами этих гипермаркетов долго работали, стараясь сделать навигацию интуитивно понятной. Для человека пытающегося открыть первый интернет-магазин, будет очень трудно повторить эксклюзивные навигационные элементы.
Отметим общее.
Ни один сайт полностью не отказался от навигации по каталогу в левом сайбаре кроме mvideo.ru, хотя и на этом сайте она частично дублируется акциями и рекомендациями. Дополнительным навигационным элементом служит горизонтальное меню, позволяющее разбить каталог на большие группы с общими признаками. В нашем случае так сделали на двух сайтах по торговле одеждой и аксессуарами.
Рекомендации по меню категорий. Располагать его как можно ближе к шапке сайта в видимой части страницы. Меню не должно быть очень длинным. Дополнительно можно создать горизонтальное меню по общим характеристикам. В меню не использовать яркие отвлекающие элементы, графика должна выделять меню, но не доминировать над деревом категорий. Шрифт крупный хорошо читаемый.
Ширина основного поля или витрина, при фиксированном шаблоне обычно не превышает 800 пикселей. Эта колонка самая большая по площади. Чем ее заполнить?
Заполняем витрину на а главной странице так же, как это сделано в рассматриваемых сайта. Исключением является sportmaster.ru, всё таки этот сайт ближе к европейским интернет магазинам.
Многие владельцы интернет-магазинов стараются заполнить эту часть главной страницы множеством баннеров и других ярких пятен. Делать так не стоит. Основное поле главной страницы во всех магазинах лучше заполнять анонсами товаров (спецпредложения, новинки) из разных категорий с качественными фотографиями. Клиент должен сразу увидеть ваши лучшие товары и перейти непосредственно на страницу с товаром. Обратите внимание, не достаточно вывести просто новинки из каталога. Необходимо вывести товары, которые принесут вам максимальную прибыль или товары, группы товаров, в которых у вас есть преимущества (цена, эксклюзивность, скидки).
Если говорить о баннерах, то лучше их не делать выше 350 пикселей и обязательно привязывать к конкретной скидке или акции. Во многих магазинах можно увидеть бестолковые баннеры, рассказывающие о том, на какой классный сайт попал пользователь. Ваш посетитель и сам может оценить качество сайта.
Так же в витрине можно вывести информацию, которая крайне важна для целевой аудитории. Посмотрим интернет-магазин lamoda.ru. В прошлой главе мы рассмотрели на что обращают пользователи на сайте.
В lamoda.ru большинство клиентов, - женщины.
Женщины обращают внимание:
В шапке интернет магазина lamoda.ru и баннерах крупным шрифтом набраны ответы на самые главные «женские» вопросы. Доставка бесплатно, гарантия качества, примерка товара. Уже на главной странице они отвечаю на два самых важных вопроса из пяти. Наполнение сайта и страницы с товаров ответят на остальные.
Это можно взять «на вооружение». Постарайтесь дать себе точный ответ, что хочет получить клиент в вашем интернет магазине. Качество, креативные товары, модные «фишки» …
Во третьей части главы мы рассмотрим карточку товара и её роль в юзабилити интернет-магазина. Именно со страницы с товаром делается заказ. Удобство этой страницы крайне важно для конверсии сайта. Продолжаем работать над открытием интернет-магазина с нуля.
План курса и окончание первого раздела.В разделе: Новости интернета, сео, интернет технологии мира.
Первый раздел курса по созданию интернет-магазина выложен полностью, но не завершен. Уже сейчас видно, что в нем кое чего не достает. Все главы раздела будут постоянно дополняться и автор надеетс...
|
Курс по созданию интернет-магазина.В разделе: Новости интернета, сео, интернет технологии мира.Мы анонсируем новый бесплатный курс по созданию интернет магазина от А до Я. В этом пособии мы бы хотели максимально доступный и понятным языком описать все этапы создания и настройки интернет-мага...
|
 Глава 5. Часть 4. Анализ юзабилити конкурентов. Помогают конкурентыВ разделе: Создaние интернет-магазина.
В прошлых частях мы рассмотрели сайты крупных торговых сетей и онлайн-гипермаркетов. Но перед нами стоят менее амбициозные задачи заработать себе на жизнь, увеличить прибыль небольшого бизнеса. К...
|
CMS движок для создания интернет-магазинов - AMIRO.CMSВ разделе: Платные портальные CMS
AMIRO.CMS - популярный русскоязычный движок CMS для создания сайта. С его помощью можно решать такие задачи как создание различных разновидностей сайтов, интернет-магазинов, осуществлять управлен...
|
Нет комментариев. Ваш будет первым!
