Клиент: бренд женской одежды Элема, которому нужно укрепить позиции в интернет-пространстве
Задача: запуск продаж продукции по всей России
Любой сайт - это инструмент, который решает задачи бизнеса.
Мы разработали проект интернет-магазина, цель которого - продажа товаров, производимых компанией Элема через Интернет.
Проект Элема представляет собой классический интернет-магазин. Вся информация о компании размещена на белорусском сайте elema.by, на российском сайте только краткая информация.
Сайт автоматически определяет регион пользователя, все, кто из Беларуси попадают на elema.by, все пользователи из других стран (не Беларуси), попадают на elema.ru
Интернет-магазин выполняет следующие функции:
- Служит каталогом всех товаров Элема, представленных в магазинах России.
- Предоставляет возможность
- найти (поиск),
- выбрать (фильтр, сортировка, каталог),
- заказать (заказ товара)
- оплатить (оплата и доставка) товары, представленные на сайте.
- Предоставляет информацию об оплате, доставке, возврате, компании, контактах (статические страницы).
- Предоставляет пользователю информацию об истории его заказов (личный кабинет).
Мы разработали прототип и подробно описали каждый блок и страницу будущего интернет-магазина из контекста сценариев пользовательского взаимодействия с будущим сайтом.
Каталог товаров (структура и наполнение)
Оз особенностей:
1. Российский и белорусский сайт имеют общую базу товаров. Наличие и цены сайты отличаются, сайты получают их из соответствующих выгрузок (отдельная выгрузка на Россию и одна на Беларусь).
2. Каждый товар может быть привязан к нескольким категориям и подкатегориям одновременно, при этом товар не дублируется и имеет 1 статичный URL.
3. Отдельно вынесли каталог “большие размеры”, так как после анализа спроса мы выдели довольно большой объем потребителей для которых это актуально.
За счет этих и ряда других функциональных особенностей мы оптимизировали работы администратора сайта, упростили внутренние бизнес-процессы, максимизировали количество страниц для сбора поискового трафика, сделали максимально релевантные страницы для работы с платным трафиком, сформировали лояльную группу пользователей с большими размерами и значительно повысили конверсию по ним.
В результате новый магазин уже за первые месяцы дал значительный рост.
Структура каталога на сайте формируется вручную администратором сайта .
Описание страниц сайта (внешний вид и поведение активных элементов, частично – реализация в CMS).
Главная страница (десктопная версия).
Шапка
Шапка является сквозным элементом сайта и отображается на всех страницах сайта в неизменном виде.
Шапка сайта содержит:
- Главное меню
- Дополнительное меню
Другие обязательные элементы шапки:
- Выбор региона
- Вход (регистрация)
- Магазины
- Корзина
- Логотип
- Фраза-идентификатор возле лого
Главное меню содержит:
- Каталог
- Большие размеры (отдельный каталог товаров больших размеров)
- Новинки
- Распродажа
- Коллекции
- Образы
- Блог
- ПОИСК
Дополнительное меню содержит:
- О Компании
- Оплата
- Доставка
- Партнерам
- Все магазины (отдельный пункт, не входящий в доп.меню, в дизайне расположен в один ряд с ним)
- Телефон (не активен, не кликабелен)
- ПРОФИЛЬ (ВХОД)
- КОРЗИНА
Пункты дополнительного меню по умолчанию выглядят, как на макете выше пункт «О компании» или «Оплата». По наведению – подчеркиваются (как на макете пункт «Доставка»). По клику – переход на выбранную страницу.
Когда пользователь находится на выбранной странице, пункт меню этой страницы остается подчеркнутым и неактивным (его нельзя кликнуть и перезагрузить страницу). А соседние пункты при наведении подчеркиваются (т.е. одновременно может быть два подчеркнутых пункта – текущий и тот, на который пользователь навел курсор).
Пункты основного меню по умолчанию выглядят, как на макете выше пункт «Большие размеры» или «Новинки». По наведению – подчеркиваются (как на макете пункт «Каталог») и появляется выпадающее меню. По клику – переход на выбранную страницу.
В выпадающее меню пункта «Каталог» попадают все категории товаров, которые есть на сайте. По умолчанию все пункты выглядят, как в макете 2 и остальные, по наведению – как первый (Пальто). По клику – переход в категорию в каталог.
В выпадающее меню пункта «Большие размеры» попадают все категории, в которых есть хотя бы 1 товар, отмеченный в системе управления сайтом как «большие размеры». Если товаров с меткой «большие размеры» в какой-либо категории нет, она в данное меню не попадает.
В выпадающее меню пункта «Новинки» попадают все категории, в которых есть хотя бы 1 товар, имеющий метку «Новинка». Если товаров с меткой «Новинка» в какой-либо категории нет, она в данное меню не попадает.
В выпадающее меню пункта «Распродажа» попадают все категории, в которых есть хотя бы 1 товар на скидке. Если товаров на скидке в какой-либо категории нет, она в данное меню не попадает.
Справа в выпадающем меню расположено изображение (без текста), в системе администрирования должна быть возможность задать его для каждого пункта с выпадающим меню (т.е. свое изображение для пункта «Каталог», свое – для «Большие размеры» и т.д.).
Пункты меню «Коллекции», «Образы» и «Блог» выпадающего меню не имеют.
При прокручивании страницы вниз, шапка крепится вверху экрана в немного измененном виде - остаются только пункты, указанные в макете:
Это пункты «Каталог», «Большие размеры», «Новинки», «Распродажа», «Коллекции», «Образы», «Блог» и разделы «Профиль, Вход» и «Корзина».
При наведении на пункты «Каталог», «Большие размеры», «Новинки» и «Распродажа» в закрепленном меню, выпадающее меню не выпадает.
Блок с логотипом и слоганом
Логотип кликабельный. По наведению – ничего, по клику – переход на Главную страницу сайта.
Слайдер
Управление через систему администрирования. Загружаем изображения и проставляем ссылки на нужные страницы (если ссылка не проставлена, слайдер становится не кликабельным, т.е нет перехода на заданную страницу). Есть возможность загружать не только статичные изображения, но и анимированные (Gif).
Изображений может быть от 1 до 10.
При наличие только 1 изображения в слайдере - стрелки не выводим. Если слайдов больше 1, то видны часть последующего и предыдущего слайдов. По клику на стрелку – сдвиг слайдера на 1 слайд в выбранную сторону. Слайдер зациклен, т.е. после последнего изображения появляется первое и наоборот (в любую сторону).
Если слайдов несколько, то автоматическая смена слайдов каждые 8 сек.
При наведении на изображение - слайдер останавливается.
Блок с преимуществами
В системе администрирования можно задать иконку и текст к ней (с возможностью восприятия html разметки, например, если нужно будет разбить текст на строки в нужных местах при помощи тега <br/>) и ссылку.
По умолчанию – как в макете 2-4 блоки. По неведению – как первый в макете (темный). По клику в любое место блока – переход по указанной ссылке.
Блок с баннерами
Баннеры фиксированных размеров и расположения. В системе администрирования загружается изображение и ссылка к нему. Все баннеры – просто изображения, без текстовых блоков или кнопок, но должна быть возможность загрузить и Gif.
По наведению – появляется белая маска на изображении (как на макете последний баннер). По клику – переход на заданную страницу.
Блок Актуальное
Блок наполняется товарами вручную в системе администрирования. Если выбрано 5 товаров или меньше – стрелки вправо-влево не появляются. Если больше 5 товаров – добавляются стрелки. Максимальное количество товаров в блоке – 10.
По клику на стрелку блок сдвигается на 1 товар в выбранную сторону. Блок зациклен, т.е. после последнего товара появляется первый.
По умолчанию превью товаров выглядят как на макете 1,2, 4 и 5 товары, по наведению – как 3.
Если у товара загружено видео, появляется дополнительный маркер «С видео»:
Маркеры «Новинка», «Хит» и «Скидка»
Товар получает метку «Новинка» автоматически при внесении на сайт и держится на ней в течение 30 дней. Затем автоматически снимается.
Метка «Хит» добавляется в системе администрирования в каждом товаре вручную.
Метка «Скидка» появляется автоматически, если в выгрузке на товар предусмотрена специальная цена (товар на скидке).
В превью товара отображаются размеры.
Бледно-серые размеры – существующие, но сейчас нет в наличии, их выбрать нельзя, они неактивны. Активный размер можно выбрать (отметится квадратом).
Отмеченная область на макете выше – не является ссылкой на страницу товара. Остальное пространство – является ссылкой на страницу товара и по клику происходит туда переход.
Иконки категорий
Фиксированные, заданы в верстке, в системе администрирования не редактируются.
По умолчанию – как 1, 2 и т.д, по наведению – как 3 (Плащи). По клику – переход в каталог в выбранную категорию.
Кнопка «Перейти в каталог»
По умолчанию темно-серая:
По наведению – серая:
По клику- переход в каталог.
ВНИМАНИЕ! Все кнопки на сайте выглядят и ведут себя аналогично данным кнопкам!
Баннер и блок Инстаграм
Баннер аналогичен описанным выше баннерам.
Блок Инстаграм выводит последние посты из профиля Инстаграм Элемы. Крупное изображение – добавлено в профиль последним. При добавлении нового изображения – оно занимает место крупного, а крупное попадает в блок с маленькими изображениями, сдвигая самое нижнее правое (в макете это девушка с меховым воротником).
«Смотреть больше» - ссылка, по клику - открывается в отдельном окне Инстаграм Элемы.
При клике на конкретное фото - в отдельном окне открывается страница Инстаграм с данным изображением.
Блок «Присоединяйтесь к нам»
«Присоединяйтесь к нам» - иконки соц.сетей со ссылками на аккаунты Элемы (редактируются в системе администрирования).
«Подписывайтесь на спецпредложения»: поле для ввода e-mail: валидация поля (только латиница, обязательный ввод @, точка с доменным “хвостиком”и т.д., размерность поля ограничить 50 символами). При клике в поле для ввода e-mail подсказка «Ваш e-mail» исчезает, вместо нее появляется курсор. Если ничего не написать в поле и убрать курсор – подсказка вернется.
Кнопка «Подписаться»: при наведении - становится серой, при клике - экран затемняется, появляется окно с сообщением “Вы успешно подписались на рассылку! Теперь Вы будете в числе первых, кто узнает о наших акциях, спецпредложениях и распродажах! Мы рады, что Вы с нами!”
Окно можно закрыть, нажав на Х в углу либо кликнув в любое место экрана. Поле для ввода e-mail очищается, можно вводить новый e-mail. Если введенный e-mail уже подписан на рассылку, во всплывающем окне появляется уведомление «Вы уже подписаны на нашу рассылку. Благодарим Вас!»
Блок с видео
Если загружено видео, отображается его превью (видео НЕ запускается автоматически при загрузке страницы). Только по клику на значок «play» видео начинает проигрываться.
Если видео не загружено – блок на главной странице не выводится. .
Блок SEO-текста
Каждая страница сайта имеет возможность добавления текста и редактирования. Названия перед блоками («Об Элема», «Актуальное») должны быть редактируемыми.
Блок перед футером «У Вас возник вопрос?»
Весь текст должен редактироваться в админке, ссылки по наведению – снимается подчеркивание, по клику – модальные окна с формами:
«Написать нам письмо»
поля формы “Имя”, “e-mail” и “Ваш вопрос” - обязательные, “телефон/skype” - не обязательное поле. Обязательна валидация и ограничение размерности полей.
При клике в любое поле - исчезает название поля, появляется курсор.
Кнопка “Отправить”: по наведению – серая, при клике - затемнение всего экрана + открытие окна с сообщением “Ваше сообщение успешно отправлено! Мы ответим Вам в течение 24 часов”:
Окно сообщения закрывается при клике на кнопку “close Х” в правом верхнем углу окна либо по клику в любое место экрана за пределами окна сообщения.
Если поля формы заполнены некорректно либо не заполнены обязательные – поля обвести красным и добавить подсказки - «введите корректные данные»
«Заказать обратный звонок»
Все поля ограничить по размерности, все поля обязательные (добавить * в текст-подсказку внутри полей).
Футер
Меню в футере должно редактироваться в админке (должна быть возможность добавлять, удалять, редактировать) пункты меню в каждом столбце.
Каждый пункт меню – это ссылка на соответствующую страницу сайта либо размер каталога. По наведению никак не меняются.
Карты оплаты неактивны.
«Перейти на мобильную версию» - по клику - переход на мобильную версию.
В самом низу по центру – Разработка сайта by FPA – ссылка на сайт http://fripl.ru/ открывается в новом окне.
Главная страница (мобильная версия)
Шапка
Закреплена, при прокручивании страницы остается вверху экрана.
Логотип – ссылка на главную страницу с любой страницы сайта.
В корзине указана сумма товаров, которые в ней находятся, если корзина пуста – 0 рублей.
Поиск
Разворачивается при клике, дает возможность пользователю ввести поисковый запрос:
«Бутерброд» меню
При клике – разворачивается такой вид:
Можно свернуть слайдом пальца влево либо нажатием на «Свернуть».
Любой пункт меню при клике выделяется черным жирным (как в макете пункт «Пальто»), также выглядит выбранный пункт. Текущий пункт неактивен, кликнуть и перезагрузить страницу нельзя.
Вход в личный кабинет
Аналогично десктопной версии – открывается форма для регистрации или входа.
Слайдер под шапкой сайта
Аналогичен десктопной версии, листается слайдом пальца в любую сторону.
Категории каталога
Выводятся все категории, которые есть в каталоге. По клику – переход в выбранный раздел каталога. По клику на кнопку «Перейти в каталог» - переход на главную страницу каталога (все товары). «Новинки» и «Распродажа» - категории, аналогично блоку в левом меню в десктопной версии.
Блок с баннерами
Изображения или gif, по клику – переход на указанные в админке ссылки для каждого баннера.
Блок «Актуальное»
Аналогичен блоку в десктопной версии, товары листаются по одному в любую сторону (по клику на стрелки либо слайдом пальца).
Блок «Присоединяйтесь»
Аналогичен десктопной версии, дает возможность подписаться на рассылку либо перейти в соцсети Элемы.
Подписка происходит аналогично десктопной версии, после ввода корректного адреса появляется окно-подтверждение.
Блок «Возникли вопросы?» он же футер в мобильной версии
Аналогичен десктопной версии, по соответствующим ссылкам открываются окна с формами обратной связи и заказа звонка, а также окна-подтверждения успешных действий пользователя.
+ ссылка на сайт Фрипл, как в десктопной версии в футере.
Переход на полную версию сайта
SEO-требования к сайту
1. Заполненные title и теги
Система управления сайтом должна давать возможность указать ВРУЧНУЮ уникальный title, description и h1 для всех html страниц сайта.
По умолчанию:
1.1. Title – должен формироваться автоматически. По умолчанию title должен соответствовать названию (заголовку) страницы.
1.2. meta name=description - должен формироваться автоматически. По умолчанию description должен соответствовать title.
1.3. meta name=keywords - должен формироваться автоматически. По умолчанию keywords должен соответствовать title , но все слова через запятую.
1.4 По умолчанию название страницы должно быть оформлено тегом <h1> для любой страницы сайта. Тег <h1> на странице может использоваться только один раз.
При этом следуют учитывать правила вложенности тегов заголовок. Не допускается в html коде страницы использование заголовков <h2>-<h6> ранее заголовка <h1> - т.е. сначала идет <h1> затем все остальные заголовки.
2. Требования к тексту и тегам H:
- На странице обязательно должен быть только один тег h1, остальные (<h2>, <h3>) – по необходимости;
- Должна быть возможность добавить «сео»-текст на все html страницы.
- Неприемлемо использование тегов в меню, технических блоках и верстке.
3. Формирование URL сайта в формате ЧПУ
- Общие требования к адресам страниц (URL):
- Единый формат для всех адресов страниц.
- Транслитерация кириллического текста.
- Уровень вложенности – до 3-4 (не включая главную страницу)
- Путь к странице должен отражаться в урле (должен соблюдаться порядок вложенности страницы)
4. Требования к Верстке страниц сайта:
- Необходимо убрать все ненужные блоки html кода, которые не несут полезной нагрузки для страницы.
- Все скрипты подгружать из отдельных js-файлов (за исключением скриптов счетчиков).
- Не оставлять больших кусков закомментированного кода в верстке
- Не использовать теги визуального и логического выделения (strong, b, i, em…) для оформления в дизайне.
- Не использовать теги заголовков H1-H6 для визуального оформления в дизайне.
5. Устранить технические дубли страниц
- «Склейка» технических дублей страниц со слешем и без слеша на конце, а также с расширениями (index.php, .htm и т.д.), со страниц с www на страницы без www.
- Использовать только 301 редирект
6. Использование rel="canonical"
Все страницы с одинаковым или похожим содержанием, расположенных на разных URL (например, страницы сортировки) должны содержать атрибут rel="canonical". Канонический УРЛ должен соответствовать ЧПУ ссылке БЕЗ параметров.
7. Атрибуты alt и title для изображений
Все изображения за исключением иконок, и логотипов (кроме логотипа сайта в шапке) должны иметь заполненные атрибуты alt и title. По умолчанию атрибуту alt и title должны советоваться title страницы. При этом, если на одной странице используются несколько изображений, атрибуты alt и title должны быть уникальными для каждой картинки.
8. Карта сайта
- XML карта сайта не должна включаться изображения (jpg, pnp и тд), а также страницы, закрытые от индексации в файле robots.txt
- По умолчанию XML карта сайта должна быть доступна по адресу : http://domen.by/sitemap.xml
- И в файлe robots.txt должен быть прописан пусть к файлу sitemap.xml «sitemap: http://domen.by/sitemap.xml»
9. Наличие файла robots.txt
- Необходимо создать файл robots.txt с правилами для поисковых систем.
- При разработке сайта обязательно прописать указание поисковым системам о запрете индексации страниц сайта. Это выглядит так:
- User-agent: *
- Disallow: /
- После переноса проекта на основной домен убрать правило Disallow: /
10. Корректный обработчик 404 ошибки
Все страницы, которые отсутствуют на сайте или не доступны должны выдавать ответ сервера 404. При этом пользователю должна быть показа страница в стиле сайта (должна быть шапка сайта, футер), указано, что страница не существует и пользователю должны быть предложены другие варианты (переход на гл стр или поиск по сайту и тд)
11. Требования к пагинации:
- На страницах пагинации (со второй и до последней) не должно быть блоков SEO-текста. Текст выводим только на основной странице раздела;
- Первая страница – ссылка на основную страницу раздела.
12. Использование микроразметки
- http://schema.org/
- Контакты (Микроформат hCard); hCard — популярный, широко используемый во всем мире открытый формат, предназначенный для публикации контактной информации в структурированном виде. Подробнее https://yandex.ru/support/webmaster/hcard/general.xml
- Хлебные крошки (Разметка с микроданными, Разметка с RDFa);
- Open Graph (Стандарт Open Graph разработан социальной сетью Facebook. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам).
- Отзывы;
- Товары и цены;
Проверить микроразметку можно здесь:
https://webmaster.yandex.ru/tools/microtest/
https://search.google.com/structured-data/testing-tool/u/0/
13. Отсутствие скрытых элементов
Например, не использовать по возможности display: none
14. Хлебные крошки
- Должны учитывать вложенность страниц
- Должен быть прописан полный путь (включая конечную страницу)
- Последняя (текущая) страница в хлебных крошках не должна быть ссылкой (на саму себя)
- 15. 301 редирект
- Если есть какие-либо перенаправления, то должен использоваться 301 редирект.
Что получил клиент?
- Разработан и запущен сайт на основании уже того, что было ранее сделано для Беларуси.
- При работе мы не вышли за заранее оговоренные рамки бюджета.
- Продажи по всей России с первых дней запуска.