Рассмотрим такие проекты:

Обычно такие проекты вводят изменения последовательно, основываясь на тщательном изучении пользовательского поведения, а также учитывая развитие интерфейса и современных тенденций.

Rozetka

Интернет-магазин Rozetka создан в 2005 году, поэтому считается одним из самых старых ecommerce-сайтов в нише электротоваров. В рейтинге Similarweb он занимает 11 ступеньку по объему трафика в Украине. По предварительным оценкам, ежемесячно его посещают 67 млн раз. Это куда больше населения Украины, которое составляет около 45 млн жителей.

Что было?

В 2009 году Rozetka выглядел немного непривычно, хотя у него был знакомый нам сегодня логотип, зеленый цвет в элементах дизайна и похожее положение блоков.

 

К сожалению, некоторые фото не подтягиваются в архиве. Пустыми также остались места, используемые под рекламные баннеры. Был единственный неприметный призыв к действию «Купить», расположенный в левом верхнем уголке возле изображения. В то же время с помощью клика по изображению или надписи под ним вы могли перейти на карточку товара с детальным описанием, отзывами и возможностью добавить товар в сравнение. Эти элементы сайта сохранились и в современной версии.

На главной странице выделено место для анонсов новых товаров (под навигационным меню). Справа – блоки с описанием акций и информацией для покупателей. Информационный блок включал «Новости» и статьи с обзорами техники (тогда еще и мечтать не могли о видеообзорах). Внизу страницы была возможность подписки на новости (в то время этой формы хватало, чтобы убедить пользователей оставить свой email).

Продвижение магазина происходило за счет акций и новостей. Это можно понять по тегам заголовков (H1-H6), которые используются в языке интернет-разметки HTML для структурирования текстовых элементов на страницах. В 2009 году они обозначили тегом H1 блок «Акция» и H2 для информационного блока. Названия товаров имели только теги H3:

Исходя из современных тенденций, настоящей изюминкой дизайна было использование счетчика в «подвале» сайта, показывающего количество реальных посетителей в месяц:

Что стало?

В 2019 году Rozetka остается флагманом среди сайтов с точки зрения юзабилити. Изменился логотип, цветной контраст выделяет шапку с навигацией от основной части сайта, а также в центре появился баннер с акционным предложением:

Современный дизайн предлагает пользователям блоки, которые отличают этот магазин от других: в шапке – навигация по категориям, форма для поиска и «корзина», слева – навигация по категориям, товары на странице размещены «плиткой».

Prom

Prom.ua – самая большая в Украине торговая площадка онлайн, которая дает возможность открыть собственную страницу с товарами для любого бизнеса. Существует с 2008 года. По количеству посещений сайт занимает 14 место в Украине. Оценка трафика составляет около 62 млн визитов в месяц.

Что было?

К сожалению, в веб-архиве не сохранились страницы каталога с 2009 года. Однако сохранилась версия 2011 года:

 

Если не обращать внимания на некоторые неточности в воспроизведении дизайна в интерфейсе веб-архива, то увидите основные решения, которые выносились на главную страницу: поиск, рекомендованные категории, рубрикатор, новые отзывы и возможность добавить компанию. Все очень просто и лаконично.

Что стало?

Современный дизайн Prom был презентован в 2017 году. В нем изменилось все, начиная с логотипа, заканчивая цветовой гаммой. Синий цвет заменили фиолетовым:

 

Также изменили основные блоки главной страницы: кроме категорий товаров, баннеров с предложением отдельного товара здесь появился список разных товаров, предлагаемых магазинами.

Hotline

Hotline – известная платформа для сравнения цен разных интернет-магазинов. История проекта началась еще в 1992 году с появления каталога с прайсами на компьютеры. Очевидно, что его можно считать самым давним электронным изданием в Украине. С 2006 года проект полностью перешел в интернет.

Сегодня Hotline занимает 32 место в стране по объему ежемесячных посещений. За предыдущими данными его трафик составляет 17,3 млн визитов в месяц.

Что было?

В веб-архиве сохранился дизайн 2010 года:

Главная страница перенасыщена элементами навигационного меню, которое было многоуровневым. Вся страница включала три блока: слева – фильтры, по центру – основное окно со спецпредложениями и новинками, справа – информация об акциях и скидках.

Интересно, что в мета-тегах не заполнены поля description и keywords. В 2010 году эти критерии считались очень важными для SEO-продвижения:

Что стало?

В 2017 году появилась современная версия Hotline, которая отличается лаконичным дизайном:

Основную часть страницы занимает большой баннер с предложениями товаров магазина, а под ним – актуальные предложение и хиты продаж.

Единственным странным моментом стало то, что главная страница в новом дизайне была лишена тегов заголовков (H1-H6), которые являются одними из основополагающих для структурирования текстовых элементов в разметке HTML.

Allo

Интернет-магазин Allo создан в 2008 году. В рейтинге посещаемости среди украинских сайтов Allo занимает 56 место, с ориентировочным ежемесячным трафиком в 13 млн визитов.

Что было?

В 2009 году сайт состоял из трех рабочих окон: слева – каталог товаров, по центру – список отдельных товаров, справа – вход на сайт, информация об акциях и новости:

Что стало?

В 2019 году структура сайта получила совсем другой вид:

Если рассмотреть структуру интернет-магазина, то она практически полностью переделана: новое положение логотипа, поля поиска и блока выбора категорий. В центральной и верхней части главной страницы большие баннеры с товарами. С главной страницы убрали форму с полями для регистрации на сайте.

В 2019 на странице есть определенные ошибки в HTML-разметке: на сайте прописаны, но не заполнены теги H1 и H4, необходимые для структуризации текстовых элементов на сайте. Однако категории корректно обозначены тегом Н2:

Мета-теги Title и Description, необходимые для корректного отображения страниц сайта, в результатах поисковой выдачи на странице заполнены. Также на главной странице микророзметка OpenGraph, которая способствует корректному отображению информации с сайта в социальных сетях, является неполной.

MakeUp

В 2005 году появляется интернет-магазин косметики MakeUp. С ежемесячным трафиком в 7,8 млн посещений, MakeUp занимает 71 место среди сайтов Украины по посещаемости.

Что было?

Десять лет назад в дизайне сайта использовали такой цветовой прием, как градиент от желтого к фиолетовому.

Интересно, что в 2009 году на главной странице вместо текста для H1 использовали логотип сайта:

При этом мета-теги на главной странице тщательно заполнены. Хотя длина тега Title больше рекомендованной и не составляет 55-60 символов. Также не все фото имеют атрибут alt, описывающий информацию, которую несет изображение – он нужен для увеличения релевантности контента на сайте.

Что стало?

За 10 лет дизайн сайта кардинально изменился. Стал лаконичным и сдержанным, с использованием нового логотипа и шрифтов.

Сегодня центральной частью главной страницы является большой баннер с товарами магазина. Также дизайнеры выбросили блоки с лишней информацией, которая была на сайте в 2009 году.

Стоит отметить, что в 2019 году заголовки прописаны корректно.

Также грамотно заполнены мета-теги.

F.ua

В 2007 году был зарегистрирован F.ua. В 2014 году этот домен купил интернет-магазин, ранее известный как Fotos.ua. Сегодня магазин на 210 ступеньке в рейтинге посещаемости украинских сайтов. Его трафик составляет около 4,5 млн посещений в месяц.

Что было?

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

Заголовки Н1 и Н2 на главной странице были корректно проставлены.

Мета-теги также полностью заполнены, с соблюдением всех требований.

Что стало?

В 2019 году структура сайта практически не изменилась, за исключением незначительных правок. Дизайн доработан в некоторых деталях, которые выполнены с целью улучшения общего юзабилити. Изменился логотип компании, реорганизовали некоторые блоки с категориями товаров. Все остальное оставили как было. Предыдущий дизайн был выполнен в 2014 году, и за 5 лет не слишком много изменилось.

В блоке с телефонными номерами теперь все открыто (раньше номера были скрытыми), удален блок со способами оплаты в верхней части сайта, а также появился блок, где свои услуги могут предлагать другие интернет-магазины.

Так как кардинальных изменений не было, заголовки остались в первозданном виде. Был только добавлен тег H2 к надписи города, где находится покупатель, чтобы максимально оптимизировать региональные запросы.

Все мета-теги в 2019 году корректно заполнены. Сайт имеет максимально полную микроразметку, которая адаптирована не только под социальные сети в общем, но и отдельно под Twitter. Это обеспечивает более полное отображение информации про страницы при размещении ссылок в Facebook, Twitter и других подобных ресурсах.

Как видите, даже успешные интернет-магазины когда-то выглядели совершенно по-другому. Со временем веб-технологии становятся сложнее и прогрессивнее, а дизайн – более простым и изящным. Сегодня для достижения успеха главное иметь стиль и подачу, а замысловатые дизайны с кучей ненужных функций давно перестали быть актуальными.

Автор: Андрей Чорный, CEO Plerdy