Пример SEO Аудита и Юзабилити. Полная оценка сайта

By in
368
Пример SEO Аудита и Юзабилити. Полная оценка сайта

Оглавление

Главная страница

Подвал

  • Стилистика ведущих сайтов — это подвал темного цвета. 
  • Фон подвала меняем на цвета логотипа #162457
  • Цвет ссылок в подвале делаем белым #FFFFFF
  • Заголовки цветом #ffbcde
  • Номера телефонов и текст белым #FFFFFF
  • Так будет выглядеть подвал после изменения цветов. 
  • Мелкая ошибка, название начинается с маленькой буквы.
Подвал изменен.png

Удаляем кнопку подняться наверх со всех страниц сайта. Этой кнопкой редко пользуются, но она на себя забирает много внимания.

Удалить кнопку вверх.png

Удаляем ссылку на Битрикс в правом нижнем углу. Эта ссылка может заинтересовать потенциальных покупателей и полностью увести от покупки.

Delete Bitrix button Luminarc.png

Шапка сайта

  1. Изменяем цвета навигации: О Компании, Подарки, Отзывы кнопки делаем цветом #ff0381
  2. Кнопки Каталог, Доставка и оплата делаем цветом #162457
  3. Убираем форматирование шрифта италик с кнопок.

Так будет выглядеть навигация 

head 2.png

4. Исправить текст рядом с фотографией девушки. Заменить “Онлайн консультант” на “Заказать обратный звонок”. Надпись сделать ссылкой для вызова формы заказа. Так это будет выглядеть

обратный звонок.png

5. Вход / Регистрация — удалить. Можно на этом месте написать слово “Корзина” и сделать обязательно ссылкой на корзину.

вход удалить.png

Оформление навигации слева

  1. Удаляем черточки между заголовками.
  2. Текст ссылок делаем #005a8c
  3. Ссылки подчеркиваем.
  4. При наведении оставляем розовый цвет #ff0381 и убираем подчеркивание.

Так будет выглядеть меню

Оформление левой навигации.png

Центральная часть страницы

  1. Удаляем слайдер под шапкой. 
delete slideshow.png

2. Добавляем блок навигации по центру который дублирует левую навигацию. Это ссылки без иконок в алфавитном порядке. 

2.1.Текст ссылок делаем #162457 

2.2. Ссылки подчеркиваем.

2.3. При наведении делаем розовый цвет #ff0381 и убираем подчеркивание.

3. Рекламные блоки ставим над и под центральной навигацией. Смотрите на картинке. Это не дизайн сайта, а расположение блоков на картинке для ясности что делать.

main ready.png

4. SEO текст остается без изменений.

5. Внизу над SEO текстом выводим товары в виде списка.

5.1. Выводятся все товары что есть на сайте, а сверху свежие поступления. Для оптимизации продаж в самый верх можно подставлять самые покупаемые товары, но не акционные.

5.2. Количество товаров не более 10 и не менее 5 на главной.

5.3. На внутренних страницах общего каталога по 20 товаров если показывается список товаров, а не плитка.  

подарочные сертификаты.png

6. Этот блок выводим над футером и под SEO текстом.  

Каталог товаров

  1. В таком виде каталог вполне достойно выглядит.
  2. Каталог можно полностью оптимизировать, что повлияет в первую очередь на SEO. 

    2.1. Категории имеют подкатегории. Вывести ссылки на них.

    2.2. Есть фильтры в категориях. Вывести ссылки и на них.

    2.3. Есть коллекции. Вывести ссылки и на них. 

Эта страница могла бы стать картой сайта с удобной навигацией для пользователей.

Это надо отдельно садиться и потратить неделю чтобы создать структуру каталога. Я дал ключевые направления что можно сделать.

Вот картинка чтобы вы понимали что за подкатегории в каталог товаров можно вынести уже сейчас.

Салатники Luminarc   купить в Москве.png

Категория

  1. По умолчанию поставить показ товара списком, а не плиткой как сейчас. Очень важно! 
  2. Самая важная часть категории это фильтр который сейчас имеет только одну полезную функцию это показ товара плиткой или списком. Удалить фильтр оставив только две кнопки показ товара плиткой или списком до полной замены на новый вариант описанный ниже.
фильтр.png
  1. При наведении на фильтр показываются ссылки. Нужно вместо пунктов выбора прописать статические ссылки. Коллекции не прописывать.

Пример страницы

Преобразованный фильтр будет иметь вид статических ссылок с заголовками вместо фильтра

23234324.png
  1. Ползунок на цене удалить и оставить только поля для ввода стоимости.
  2. Сделать выборку в каком порядке показывать товар. От дорогих к дешевым, от дешевых к дорогим и последние поступления по умолчанию, но нужна кнопка чтобы вернуться.

Показ категории плиткой

  1. При наведении на товар удалить функцию увеличения товара. Только рамка вокруг товара показывает что вы навели на товар.
  2. Заголовок товара синего цвета #005a8c и подчеркнутый. При наведении цвет становится #ff0381 и убирается подчеркивание. Размер шрифта 18px.
  3. Кнопку купить оставить как есть. При наведении на кнопку Купить делать ее темно-зеленого цвета #008000

Показ категории списком

  1. Изменить местоположение стоимости и кнопки купить в карточке товара. Должно выглядеть как на картинке. Стоимость и кнопка под текстом слева.
tovar .png

2. 100% Гарантия Качества значок стоит поставить на фотографиях в нижнем левом углу и удалить из правой колонки. Текст не делать на всю ширину, а справа оставить пустое место.

Реализация что показана достаточно сложная. Это вопрос к тому кто будет делать как правильно реализовать чтобы красиво смотрелась гарантия качества в нижнем правом углу картинки.

Она должна быть в рамке товара или заходить как на примере?

Она должна быть в углу картинки. 

zakladki tovar 1.png

3. Кнопки “В закладки / отложить” и Сравнить поставить под названием товара. Значки сделать розового цвета #ff0381

zakladki tovar.png
  1. При наведении на кнопку купить сделать ее темно-зеленого цвета #008000

5. Кнопка купить не должна добавлять товар в корзину из списка. Эта кнопка должна вести на товар. 

6. Добавить ссылку “Добавить в корзину” под кнопкой купить. Кнопка работает как раньше кнопка купить.

zakladki tovar 2.png

7. Заголовок товара синего цвета #005a8c и подчеркнутый. При наведении цвет становится #162457 и убирается подчеркивание. Размер шрифта 18px.

zagolovok tovara.png

.8 Размер шрифта в описании товара в списке 14px, а line-height 16px.
9. Удалить из описания информацию: Артикул, Коллекция, Цвет. 

Страница Товара

  1. Удалить рекламный блок под ценой товара.
block pod conoi.png

2. Текст Карточки товара сделать шрифтом 16px

Шрифт в карточке товара.png
  1. Исправить ошибку когда товары которые смотрели показываются столбиком, а не один рядом с другим. В хроме эта ошибка то появляется то ее нету.
Кружки для пива Luminarc ДРЕЗДЕН 2 шт 330 мл Купить в Москве  159 руб.png

  1. Удалить “Другие товары из коллекции”. Можно оставить только текстовые ссылки под надписью “Другие товары” для SEO. Для продаж это мешает. 
Другие товары.png

5. Не работает разметка schema корректно. Не показывается фотография, если человек хочет поделиться товаром в facebook.

6.”Описания товара”, “Можно использовать” и “Отзывы” должен быть шрифт 16px 

7. Из-за специфики товара, что каждый раз переходить в корзину неудобно. Надо добавить ссылку “Добавить в корзину”. Нажатие на нее не перебрасывает в корзину, а работает как раньше работала кнопка купить. На рисунке вариант реализации. 

добавить в коризну.png

Доставка и Оплата

  1. Исправить текст на странице. Смотрите на картинке.
  2. В заголовке страницы должны быть написанно Доставка по России и по Украине. Вместо слова Доставка.
Доставка и оплата.png

Акции — Накопительная скидка

  1. Из двух страниц: 

Сделать одну страницу с названием Накопительный бонус или Бонусная система.

  1. Размер шрифта на странице 16px, цвет черный.

Подарки

Хорошо оформлена страница. Можно сделать красивей увеличив важные заголовки до шрифта в 20px и поместить предложения в рамки. (на доходы не повлияет)

Только текст немного слетел, что надо подправить.

Подарки.png

Контакты

  1. Лишний текст на странице контактов.
  2. У вас указано время работы в шапке. Исправьте что-то одно.
  3. Не работает карта.

Наверное должна грузиться карта ))  

Контакты.png

О Компании

  1. Исправить размер шрифта с 15px на 16px. 
  2. Ошибка верстки над заголовком.
о компании.png

Оптовикам

  1. Сделать шрифт текста на странице 16px.
  2. Ссылка для оптовиков должна находится в футере. Можно удалить столбик личный кабинет и туда ее в футер и добавить. 

Отзывы

  1. На страницах товаров размер шрифта увеличить до 16px.
отзывы.png
  1. На странице “Отзывы” размер шрифта увеличить до 16px.

Корзина

  1. Отправлять пользователя сразу же в корзину после нажатия кнопки купить. Он сам примет решение продолжать покупки или оформить заказ в корзине.
  2. Добавить надпись в корзине розовым цветом #ff0381. *Минимальная сумма заказа 1000 рублей
  3. При наведении на кнопку Оформить заказ делать кнопку темно-зеленым цветом #008000

Оформление Заказа

  1. Продублировать кнопку Оформить заказ и сделать рамку темнее в комментариях
Оформление заказа 3.png
  1. На странице после подтверждения заказа сделать шрифт текста 16px.
Оформление заказа.png

2.1. Так же и внизу страницы увеличить шрифт до 16px

Оформление заказа 2.png

Адаптивный дизайн сайта

Один и тот же человек должен вносить правки в этот дизайн и сделать адаптивный дизайн. Ниже рекомендации. В адаптивном дизайне около 30% роста конверсии.

Планшеты

  1. Дизайн должен сжиматься до разрешения 768px
  2. В дизайне с плиткой убирается третья колонка товаров справа.
  3. В дизайне со списком товаров я убрал стоимость справа и должно хватать места.

Мобильные телефоны

  1. Дизайн должен сжиматься до разрешения 320px
  2. Список товаров показывается как одна колонка в дизайне плиткой. Вы две колонки не поместите в экран 320 чтобы там хоть что-то было видно.

54321
(1 vote. Average 5 of 5)
Оставте комментарий

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