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

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

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

Содержание:

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

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

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

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

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

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

Кнопки

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

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

Основна кнопка при наведении меняет цвет на серый, “вторичный” цвет, что не совсем корректно. Следует заменить цвет на более темный или светлый оттенок активного оранжевого.
На вторичной кнопке наоборот, в обычном состоянии для текста используется “активный” оранжевый. Заменить на нейтральный черный.

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

Становится заметна неконсистентность набора основных элементов: данные кнопки отличаются от предыдущих не только наличием иконки, но и работают по другому:

Основная кнопка при наведении теперь не серая, а темно-оранжевая (как и должно быть).
На вторичной кнопке текст черный (как и должно быть).
Вторичная кнопка при наведении становится оранжевой, а должна становится чуть темнее серой.
Иконки должны быть “из одного набора”. В данном случае корзина - иконка с заливкой, а стрелка - заливка через негативное пространство.

При добавлении в корзину кнопка меняет свое состояние, что корректно, эффект необходимо сохранить:

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

Ссылки

Ссылки без подчеркивания:

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

Ссылки с подчеркиванием:

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

Ссылки со стрелкой:

Никак не реагируют на наведение мыши. Следует добавить смену цвета или анимацию стрелки.

Инпуты

Инпуты выполнены хорошо, серьезных недоработок не обнаружено. Что можно улучшить:

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

Поиск

Поиск выполнен хорошо, есть подсказки как по товарам, так и по категориям. Есть вся необходимая информация: цена, превью, название модели. Доработки:
В ПК версии в блоке “категории” образуется пустое пространство, т.к. ссылки расположены в одну колонку, а не две.
Кнопка “все результаты” должна быть всегда на экране, а не глубоко внутри скролла. Можно сократить результаты выдачи до 5-7 пунктов, но чтобы кнопка всегда была перед глазами.
В мобильной версии поле поиска короткое и узкое. Удобнее, когда оно занимает всю ширину экрана, а высота поля хотя бы 40рх.

Шапка сайта

Шапка сайта выполнена с большим количеством ошибок как ui, так и ux. Хедер нужно полностью обновить. Ориентироваться можно на rosmems. Ошибки текущей версии:

Шапка “полосатая” из-за чередования черной/белой подложки.
Строка о приложении не выровнена по центру относительно высоты блока.
Кнопка сравнения товаров по логике должна расплагаться рядом с корзиной.
Иконка Вотсапа растянута по ширине.
Сломана группировка основной правой части: ссылка конструктора и иконка корзины не выровнены относительно блока. Пространство используется неэффективно, много нефункциональных пустот.
Иконки сложные для восприятия и разные визуально, лучше от них отказаться или отрисовать качественный набор иконок у дизайнера.
Раздел “Главная” в навигации не нужен. Его функцию должен выполнять логотип сайта.

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

Подвал сайта

Подвал оформлен аккуратно, блоки гармонично сгруппированы и в ПК и в мобильной версии. Хотелось бы усилить акцент на контактной информации и добавить кнопку действия, например, “написать в вотсап”.
Строка об оферте отсутствует в мобильной версии, следует добавить.

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

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

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

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

Первый экран

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

Цель баннера - заставить пользователя кликнуть ради выгоды или из интереса. Здесь же баннеры некликабельные, не ведут внутрь сайта. Каждая картинка должна иметь на себе кнопку “в каталог”, “узнать подробнее” и пр. Должна быть индикация количества картинок в карусели. Желательно отобразить стрелки прокрутки или добавить автопрокрутку. Сейчас практически невозможно догадаться, что карусель можно вручную прокрутить. Другие проблемы:

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

Акции

УТП (уникальное товарное предложение) находится в странном месте всего одной строкой, хотя это должен быть первый слайд главного баннера. Для чего акции продублированы в маленьком формате? Достаточно карусели на первом экране страницы.

Хорошая реализация карусели у КаменьГарант. Есть стрелки прокрутки, индикатор слайдов, УТП на первом слайде, кнопки действия, хорошо кадрированные фото на фоне:

Карусель товаров с табами

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

Услуги

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

Данный блок отсутствует в мобильной версии

Мобильная версия — важный канал привлечения клиентов.

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

Категории товаров

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

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

Среди конкурентов отличное решение у КаменьГарант.

Популярные категории

Этот блок находится на своем месте, в отличие от обычного блока категорий. Является хорошим вспомогательным навигационным блоком. После обновления ui получится аналог блока rosmems:

После обновления ui получится аналог блока rosmems:

О нас

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

Галерея и отзывы

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

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

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

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

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

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

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

48 позиций на странице слишком много для базового значения. Обычно счет другой: 25, 50, Все.

Неясна сортировка “по коду товара”. Что является кодом? Строка “пп-001-2с” это часть названия товара, если оценивать визуально. Скорее всего, это артикул, который должен быть прописан отдельно, меньшим шрифтом. Либо оставить только сортировку по названию, которое по сути является название+артикул.

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

При наведении на карточку, они слегка разъезжаются, что неприятно глазу. Карточки без кнопок, наоборот, “скукоживаются”. Достаточно эффекта усиления тени, как будто карточка приподнялась над поверхностью, без изменения высоты.

В последней карточке нет кнопок. Скорее всего, это означает, что товар не в наличии? Нужно добавить индикатор наличия товара, как на скриншоте слева. Даже если товар отсутствует, кнопка должна оставаться на своем месте, но в состоянии disable и с дублированием надписи “нет в наличии”.

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

Блок “Вы недавно смотрели” выполнен на голову выше, чем аналоги на прошлой странице, именно так стоит оформлять карусели на сайте. Более современный индикатор страницы с приятным эффектом, есть стрелки прокрутки, удобный скролл с телефона. Стоит внедрить и на Главную страницу.

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

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

В хлебных крошках последний пункт является текущей страницей. Т.е. здесь не хватает пункта “памятник ПП-001…”

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

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

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

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

Под карточкой в табах есть вкладки Описание и Отзывы. Не хватает пунктов Оплата, Доставка, Гарантия.

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

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

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

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

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

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

Длинные строки

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

Чтобы закрыть основные вопросы клиентов, добавьте блок типа Вопрос-Ответ. Это позволит скрыть часть текста, а также закрыть простые вопросы без помощи менеджера или консультанта.
Мотивация

Каждая страница услуги должна выполнять не только информационную функцию для клиента, но и мотивирующую – четко формируйте УТП и оставляйте СТА элементы: кнопки и формы для связи.
Статьи

Если сократить текст невозможно, используйте формат статьи – узкая колонка текста на белой подложке.
Преимущества

Уникальные преимущества и выгоды стоит разбавить иконками и представить в виде коротких пунктов (как на Главной).
Больше примеров

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

Конструктор товара как преимущество

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

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

Итоги

Рассмотренный сайт содержит достаточно большое количество UX/UI недоработок, которые требуют оперативного исправления. Некоторые сайты-конкуренты показывают значительно более продвинутый уровень: имеют выверенный дизайн, более сильное юзабилити, продуманную структуру и навигацию. Наиболее выгодно выделяется rosmems.ru и памятники-недорого.рф. На эти примеры можно ориентироваться: взять лучшие практики и адаптировать их под цели текущего проекта.

Требуется переработка компонентов UI набора и системы отступов

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

Текущее состояние шапки необходимо доработать, особенно на мобильных устройствах. Основные рекомендации даны в первом разделе документа.
Необходимо переработать страницу товара

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

Если сайт адекватно не адаптирован под мобильные устройства, компания теряет огромный процент заказов. На сегодняшний день, наличие адаптива это обязательное условие для любого бизнеса. Исправление этой проблемы не только увеличит конверсию, но и улучшит SEO и поднимет доверие к компании.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оплатить⠀⠀⠀