Сайт для компании — один из ключевых инструментов привлечения аудитории. Качество пользовательского опыта и продуманность интерфейса напрямую влияют на конверсию и лояльность заказчиков.

Эта статья поможет вам разобраться в UX/UI дизайне. Мы рассмотрим:

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

Содержание:

Зачем вашему сайту грамотный дизайн?
Базовые элементы взаимодействия
Главная страница — лицо сайта. Разберем основные ошибки
Как каталог может убить конверсию сайта?
Карточка товара: важность деталей
Реализованные проекты
Услуги, которые не покупают: Почему страница услуг отталкивает, а не продает?
Итоги анализа

Зачем вашему сайту грамотный дизайн?

Раньше сайту хватало просто "быть". Сейчас пользователи за 5 секунд решают – остаться или уйти к конкурентам. Сайт, который раздражает или запутывает – сливает ваши деньги. Потенциальные клиенты уходят, не дойдя до заявки. Для решения этой проблемы и проводится UX/UI аудит.

Основная задача проведения UX/UI аудита – выявление элементов интерфейса, которые могут вызывать у пользователей раздражение или непонимание, что может приводить к сниженной конверсии относительно конкурентов.

Данный аудит направлен на выявление сторон проекта, требующих особого внимания; которые могут препятствовать комфортному взаимодействию с сайтом. В конечном итоге, оптимизация UX/UI должна привести к увеличению числа заявок и звонков, а также к укреплению позиции компании в своей сфере.

Базовые элементы взаимодействия

Кнопки

Основная и вторичные кнопки:

Кнопки пропорциональные, контрастные к фону, имеют четкую анимацию наведения через смену цвета на черный. Что нужно исправить:
Смену цвета желательно сделать не на черный цвет, а более темный оттенок синего. Черный смотрится грубо.
На разных кнопках встречается разное начертание у текста (видно на скриншоте). У кнопок одного приоритета должно быть полностью одинаковое оформление.
При верстке желательно учитывать, что строка текста имеет разные отступы сверху и снизу, из-за чего буквы визуально находится ближе к нижней границе кнопки. Соответственно, отступ сверху надо уменьшать (или наоборот, снизу увеличить).

Кнопки с иконкой:

Кнопка каталога непропорциональна. Иконка слишком крупная относительно текста, а линии с избытком жирные. Отступы по бокам заметно меньше, чем сверху и снизу. “Ушки” надо сделать больше, чтобы кнопка была более прямоугольной, менее квадратной.
У “Войти” и “Корзины”, при этом, иконки слишком тонкие, немного рябят на экранах. При наведении цвет надписи едва меняется, почти незаметно, а иконка вовсе статична.

Ссылки

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

Инпуты

Инпуты, скорее всего, взяты из сторонней библиотеки, поэтому сильно акцентировать внимание на них не будем. Да, дизайн с сайтом не совпадает, это заметно. Но валидация всех полей рабочая, UX хороший, поля сделаны достаточно качественно – это главное на текущий момент.

Поиск

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

Добавить возможность быстро удалить введенные символы.
Добавить поиск по категориям, а не только по товарам.
Затемнять фон в процессе использования поиска, чтобы лучше подсветить результаты.
В мобильной версии не всплывают подсказки, как в ПК, желательно починить эту проблему.
В мобильной версии, если в процессе ввода текста в поле поиска начать скроллить страницу, то появляется баг кнопки с поиском, она становится прозрачной, мерцает.
Текст на кнопке “Искать” при наведении сдвигается, надо починить. Начертание текста также отличается по стилю от основного сайта, обычно применяется более жирный вариант.
Непонятно, чем отличаются кнопки “Остальные” и “все результаты, они делают одно и то же. Оставить кнопку “Все результаты”

Хедер и футер (десктоп)

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

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

Подвал сгруппирован аккуратно, тут серьезных правок нет. Карта большая, удобная.

Хедер и футер (мобильный)

Нижние табы не нужно делать цветными, это лишний раз нагружает экран и, в большинстве случаев, выглядит несовременно. Подложку делаем белой, а иконки - в оттенках серого. Тогда появляется возможность использовать фирменный синий цвет для расстановки акцентов.
У корзины отсутствует индикация заполненности. Дублирование раздела в шапке и в табах, в шапке ее можно удалить.
Все иконки из шапки и табов имеют разную толщину линий и являются иконками из разных наборов, нет цельности в дизайне.
Иконки в шапке расположены слишком плотно друг к другу, это приводит к ошибочным нажатиям.
При переходе в поиск и в корзину иконки должны как-то менять свое состояние, чтобы визуально было понятно, что мы перешли внутрь раздела.
В раскрытом меню-бургере нужно скрывать кнопку “к началу страницы”.

Карта хорошего размера, ее удобно использовать. Менять не надо. Но контакты стоит выровнять по левому краю, чтобы сделать текстовый блок аккуратнее.
Подвал в таком виде неудобно использовать и выглядит не совсем аккуратно. Стоит рассмотреть вариант со свернутыми пунктами. Этот способ сокращает длину подвала и упрощает поиск нужных ссылок.

ПОДПИШИТЕСЬ НА РАССЫЛКУ

чтобы не пропустить самые актуальные новости в SEO

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности

Главная страница — лицо сайта. Разберем основные ошибки

Основной экран

На данном этапе заметно, какой большой процент пространства занимает шапка сайта, она почти доминирует над баннером.

Стрелки прокрутки находятся у границы экрана, стоит переместить их в один уровень с основным контейнером сайта.
В мобильной версии текст на картинках не читается, а стрелки прокрутки разъехались по экрану.
Слишком много карточек в Выгодных предложениях, из-за чего картинки начинают рябить. В один ряд для интернет-магазина желательно делать 4-5 карточек, не больше.
В мобильной версии единовременно показывается всего 1 карточка вместо двух.
В мобильной версии пропал отступ перед кнопкой В корзину, а цена со скидкой выравнивается по правому краю, вместо левого.
Стрелки прокрутки для таких блоков удобнее использовать, когда они находятся над блоком, а не внутри него. В мобильной версии стрелки можно не использовать вообще, если обеспечена удобная горизонтальная прокрутка блока.
Внутри карточки нет явного акцента ни на одной из текстовок.
Цену можно значительно увеличить в размере.

В анализе конкурентов был сайт с хорошими аналогичными блоками, с которых можно копировать компоновку карточек:

Подбор покрытий

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

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

Клиенты

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

Отзывы

Отзывы выполнены аккуратно в обеих версиях, но автоматическая прокрутка здесь излишняя, мешает читать текст отзыва. Как и в случае с карточками товаров, стрелки прокрутки лучше вынести, чтобы они не перекрывали контент и удобнее кликались. В идеале встроить реальные отзывы из Яндекса, как у polpol.ru.

Примеры работ

Блок хорошо сделан, но будто вы стесняетесь своих работ.
Можно делать фотографии крупнее, пусть будет только 2 или 3 фото разом, но больших. Выберите только самые крутые фотографии и покажите их наглядно.

Можно добавить ссылку на подробный фотоотчет, как сделали spb.olimp-parketa.ru.

Текстовый блок

Для нарезки и доставки стоит оформить отдельный блок, более заметный клиентам, т.к. это важно, как сопутствующая услуга. Сюда же можно отнести Монтаж, которому у вас уделено особое внимание. Хорошо подойдет подобный блок, который одновременно является ссылкой во внутренние разделы сайта:

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

Как каталог может убить конверсию сайта?

Заголовок “Подбор параметров” можно убрать. И так очевидно, что это поле фильтров.
Не совсем понятно, зачем прописывается количество упаковок, если в корзину мы кладем в квадратных метрах. Если есть значимый спектр клиентов, кто покупает именно в упаковках, то нужен переключатель, как у конкурента. Тогда клиент сможет быстро и удобно добавить нужное количество упаковок. И подпись о размере упаковки следует сгруппировать с количеством упаковок, а не с кнопкой – это логическая ошибка.
Чекбоксы слишком маленького размера, тяжело по ним кликнуть мышью. В мобильной версии нужно увеличить отступ между пунктами, чтобы снизить вероятность случайных нажатий.
В фильтрах указываем просто “Цена”, т.к. фильтра по оптовой цене нет, в любом случае будет только розничный вариант. Оптовые цены можно указывать под основной ценой мелким серым шрифтом.
Фото в карточках хотелось бы крупнее и в классическом квадратном формате. Если сократить количество карточек в ряду до 3, то будет как раз удачный размер.

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

Пример группировки от sampo

По клику на “В корзину” появляется модальное окно, такого быть не должно, это очень устаревший формат. Можно показывать небольшое всплывающее окошко внизу экрана (на обеих версиях). Или писать на кнопке “В корзине”, чтобы было ясно, что клик сработал и товар добавился.
Некоторые фильтры, которые есть у конкурентов, а здесь – нет: цвет, товар по акции, тип дерева, назначение, фаска.
Желательно обновить UI пагинатора, т.к. сейчас с телефона попасть по нужной странице очень трудно. Каждая страница должна быть оформлена небольшой кнопкой.

Карточка товара: важность деталей

Основной блок

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

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

Убрать восклицание в строке об оптовой цене.
Иконка видео сливается с полом, она должна быть контрастной. Например, на белой подложке.
Не нужно размещать сертификат в каждой карточке товара. На Главной странице будет достаточно. Или же можно скрыть документ ниже, в табы.
Видеообзор это очень хорошо, но на краю экрана кнопку не видно. Логотип некликабельный, но визуально он сильно больше кнопки. Либо добавить кликабельность, либо сместить акцент на кнопку.
Блок карточек, по сути, может быть заменен на одну единственную форму обратной связи, рядом с которой можно указать перечень поводов для обращения. На текущий момент блок не функционален, занимает много места, не несет пользы клиенту. Сначала необходимо продемонстрировать товар.

Табы и "Почему мы"

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

В мобильной версии Блок можно сделать слайдером, по 2-3 пункта в строке. “Смотреть еще” в блоках такого типа не используют.

О нас в цифрах

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

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

Дополнительно нужно акцентировать внимание на этих блоках мобильной версии:

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

Отличный пример таблицы:

В подобном исполнении табов контент желательно располагать внутри вкладки, а не внизу под общим списком. По умолчанию можно сделать таб Характеристик раскрытым:

Таб клиента:

В мобильной версии обязательно правим верстку карточек. Сейчас мы имеем вертикальное полотно карточек с пустым пространством справа. В таких блоках либо карусель, либо по 2 карточки в ряду.

Мобильная версия на достаточно высоком уровне исполнена только у polpol и sampo. Именно на них можно ориентироваться при разработке новой структуры страниц.

Реализованные проекты

Данный раздел необходимо доработать, чтобы эффективно снижать у клиентов страх покупки – люди увидят, что покрытие красиво смотрится в реальных условиях. Плюс, можно повысить средний чек, если показать удачные сочетания напольных и настенных покрытий (как пример).

Как облегчить восприятие большого количества фотографий и структурировать страницу:

Добавить фильтрацию по типу помещений или покрытия;
Добавить поле поиска внутри данного раздела (опционально);
Выстроить иерархию контента – у каждого проекта должна быть обложка, четкий заголовок. Остальные фото можно спрятать в карусель, как на маркетплейсах.
Количество контента можно сократить до 10-15 фото на проект.
Каждому проекту добавить структурированное описание: какие материалы использовали (со ссылками в каталог), площадь помещений и особенности работ, отзыв заказчика. Можно показать в формате небольшой таблицы.
К каждому проекту можно добавить кнопку “Хочу также”, как делают конкуренты.
Внизу страницы (или в начале 2-3 экрана) разместить открытую форму обратной связи.

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

Услуги, которые не покупают: Почему страница услуг отталкивает, а не продает?

Страницы услуг, в данном случае это услуги по монтажу покрытий, – это ключевые страницы сайта, которые требуют не меньшей проработки, чем каталог и Главная. Есть возможность значительно увеличить эффективность данного раздела. Сейчас он работает не на 100% из-за устаревшего дизайна и слабой верстки. Пользователи привыкли к интуитивно понятным и визуально привлекательным страницам. Если лендинг не отвечает современным требованиям, то компания сталкивается со снижением доверия клиентов (вы кажетесь ненадежными) и потерей конверсии (целевые действия не выполняются).

Самые критичные моменты на сайте:

Шапка сайта

Шапка сайта должны быть максимально приближена по визуалу к основному сайту.
Типографика

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

Верстка инпутов неаккуратная из-за нарушенных правил типографики.
Формы

Все формы на страницы идентичные, имя+телефон. Из 9 блоков – 3 являются формой. Это слишком много. Достаточно формы на баннере и внизу страницы.
Преимущества

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

Карточки с покрытиями хорошо сделаны на Главной странице, их можно в том же виде перенести на данную страницу.

Похожий раздел есть на сайте olimp.

Раздел о монтаже есть на сайте конкурента, и визуально он полностью соответствует основному сайту, хотя по структуре ближе к лендингу. Такое решение не отпугнет клиентов и не нарушит их равномерное погружение по ресурсу.

Набор блоков у конкурента значительно перекликается с Симфонией, поэтому решения можно перенимать в этот проект.
В мобильной версии есть дополнительная проблема в виде первого экрана. На текущий момент в верхней части сайта большой пустой отступ, логотип и шапка занимают треть пространства, а баннер слишком мал и не привлекает внимания.

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

Итоги

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

Следует доработать UI-компоненты в дизайн системе.

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

Многие тексты недостаточно структурированы, что усложняет восприятие для пользователей. Чтобы упростить взаимодействие, рекомендуется переработать типографику как на ПК, так и на мобильной версии, с соблюдением иерархии. Наборные тексты следует оформить небольшими абзацами, и обязательно провести вычитку текста на повторы, воду, некорректные формулировки.
Важно, чтобы все блоки сайта корректно помещались в область просмотра, а пространство использовалось эффективно.
Слишком крупная или неаккуратная верстка создает несколько проблем:
1. Потеря функциональности – часть информации может быть скрыта за пределами экрана, из-за чего пользователи не увидят важные элементы;
2. Усложненная навигация – пользователи вынуждены скроллить страницы значительно дольше, что вызывает раздражение и приближает к отказу;
3. Небрежное впечатление – сайт кажется устаревшим, сделанным без должного внимания к деталям, что подрывает доверие к компании.
Стоит дополнительно проверить верстку на стандартных разрешениях (2460, 1920, 1024, 768, 360рх). Уменьшить размеры крупных блоков, пересмотреть их композицию.

Была ли статья полезной?

Оставить комментарий

Статьи и новости

Другие статьи...

Поисковая оптимизация от агентства Pragmatix - Эффективные действия для лучшего результата

В агентстве Pragmatix вы можете заказать продвижение вашего сайта в поисковых системах Google и Яндекс. Наша команда предлагает качественную оптимизацию для вашего бизнеса по честным ценам. Оставьте заявку и сделайте вклад в успешный рост сайта уже сейчас!

Комплексное SEO продвижение в Москве | Цены в агентстве Pragmatix

Комплексное SEO-продвижение под ключ от агентства интернет-маркетинга Pragmatix. Увеличим коммерческий трафик, повысим конверсию, сделаем сайт продающим.

SEO — продвижение сайта в ТОП. Заказать раскрутку в сео в Яндекс и Google в Москве

Продвижение сайтов в Москве под ключ от агентства PRAAGMATIX. Обеспечим рост позиций, за счет эффективного СЕО, Оптимизация в поиске повышает посещаемость сайта и доверие потребителей

SEO аудит который дарит эмоции от потенциала роста

Всесторонний анализ работы вашего ресурса, направленный на достижение высоких позиций в поисковой выдачи

SEO — продвижение сайтов в Google. Особенности раскрутки и цены в Москве

SEO — продвижение сайта в поисковой системе Google. Заказать продвижение сайтов в ТОП-10 Google. . Стоимость услуг продвижения в Google

Ищете экономичное SEO без ущерба для качеству?

Ищете предсказуемые результаты SEO?

Неясны стратегии SEO-специалиста?

В поисках системного подхода?

Устали от обещаний?

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

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

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

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

Оплатить⠀⠀⠀