СМВ - студия мебели
Пример ручного аудита для улучшения восприятия сайта и выявления точек роста
Главная страница
Шапка
Часто для удобства пользователей используют общеустановленные правила, это важно для быстрой адаптации пользователя на любом сайте. Например, одно из установленных правил: логотип компании в левом верхнем углу, если вы пройдётесь по крупным (и популярным) сайтам, то увидите, что логотипы стоят слева, например:
У пользователя вырабатывается привычка – «логотип компании слева», если пользователь хочет узнать, что за компания, первое место, куда он посмотрит, это левый верхний угол.
На существующем сайте видим, что данное правило не используется. Да, пользователь найдет логотип компании. Но на подсознательном уровне знакомство с сайтом начнется с замешательства, может, он четко не скажет проблему, но подумает, что с сайтом что-то не то.
Баннер
Изображение и текст в баннере задает весь тон странице (или сайту), большинство пользователей могут уходить на первом же экране сайта (первый экран – то, что помещается в экран монитора при первом открытии сайта).
Качество используемого фото очень низкое, мы видим пиксели и расплывчатость, это может оттолкнуть часть посетителей. Также мы видим фотографирующую руку, это говорит о непрофессиональном подходе к фото, и создается впечатление маленькой непроверенной компании, что также оттолкнет пользователей.
Светлый шрифт заголовка на светлом фото не контрастный и плохо читается. Нужно либо затемнять все фото, либо делать фон под заголовок. Например:
УТП (уникальные торговые предложения)
Важно в баннере озвучить какие-то предложения, которые могли бы зацепить пользователя, например: «установим раковину до нового года бесплатно», тем самым, мы подтолкнем посетителя к заявке, а если ему не нужна раковина, он может начать искать предложения под свою цель. И опять же, не закроет сайт в первые секунды.
Второй вариант – вместо статичного баннера сделать слайдер (листающиеся баннеры). И разместить несколько предложений и акций.
Примеры «цеплялок»
Нечитаемые блоки
Проблема с нечитаемостью текста заметна ещё и в блоке под баннером.
Нужно выбирать контрастные цвета, чтобы не заставлять посетителей напрягать зрение.
Структура блоков «Название-кнопка-содержимое»
Блоки на главной странице, например, «Портфолио» и «Каталог» нарушают логику предоставления информации. Сначала должен идти заголовок, потом содержимое блока (фотографии или карточки разделов) и уже потом кнопку перехода в каталог или портфолио.
Правильное построение блока. Пример:
Кнопка «Заказать»
При нажатии на кнопку заявки пользователя отправляет на форму из 6 шагов, любой пользователь испугается и уйдет, представляя, какой объем информации ему нужно будет сообщить для заявки. Важно, чтобы пользователь совершал как можно меньше действий для связи с вами.
В современных сайтах делают всего одно важное поле - номер телефона (даже имя уже не обязательно). Все для того, чтобы пользователь как можно легче для него мог оставить заявку. Если вы посмотрите на Озон и Wildberries, да и любые другие крупные сайты, вы увидите, что они максимально сокращают шаги до отправки заказа.
Чем меньше действий пользователю нужно сделать для заказа, тем больше шанс, что пользователь это сделает.
Использование цветов
У сайта есть основной цвет (оранжевый), его использование обосновано. Вторым цветом был выбран синий, на черном фоне данный синий выглядит грязно.
Основной цвет должен быть в большей части представлен на сайте, второстепенный цвет используется как акцентный. На сайте же в нескольких блоках синего больше, чем основного цвета.
Шрифты
Важно выдерживать сайт в единых шрифтах, тем самым, будет соблюдаться целостность. Разрешается использовать не более 2-ух шрифтов. Профессиональные дизайнеры могут нарушать данное правило, но на то они и профессионалы, они знают, как это делать.
Общий стиль сайта
У сайта нет целостности, ощущается, будто сайт делали разные люди. Возьмем, например, этот блок:
Видим, что используются прямые линии и закругления по углам.
Теперь смотрим на этот блок:
В данном блоке нет прямых контуров, но есть «клякса» и крупная нестрогая цифра.
Данный стиль (стиль хаотичных клякс, гигантизма в некоторых элементах) не придает аккуратности сайту (если сайт не специально делается в подобном стиле), и не подходит тематике компании, первые ассоциации от стиля — это не аккуратность.
Сайт, где оправдан такой стиль – развлечения. Пример:
Данные стили не похожи друг на друга и даже противоречат друг другу.
Этот блок проточит всему стилю сайта, также изображение на фоне не доходит до края.
Портфолио
https://smv-ekb.ru/primeri-rabot/
Складывается ощущение, что выполненных работ мало. Пользователь увидит 3 блока с фото и подумает, что компания выполнила всего 3 работы. Потребуется больше времени, чтобы осознать, что каждый блок – это каждый вид работ и в слайдере загружено много фотографий под каждый вид работ.
Как можно поступить. Вариант первый – разбивать портфолио на проекты
Вариант второй (если для каждого проекта не делали много фото) – использовать стиль ВК. Просто много фотографий для каждого вида работ
Адаптив (сайт с телефона)
Баннер
В некоторых местах на сайте не хватает отступов, например у заголовка в баннере.
Также посмотрите, что видит пользователь, нижняя часть фото закрыта текстом и кнопкой. В открытой части фото внимание привлекает заляпанное грязное зеркало.
Блок «Наши работы»
При нажатии на фото для просмотра поближе текст описания полностью перекрывает фото.
Блок «Материалы»
Светлый заголовок находится на светлом фоне, что сложночитаемо. Также важно понимать, что у всех посетителей могут разные устройства с разной цветопередачей экранов. Что читаемо на одних устройствах, то будет неразборчиво на других.
Подписи уходят за экран.
Выводы
- Общее ощущение от сайта - неаккуратность в мелочах + видим, что сайт не придерживается единого стиля.
- Отсутствие чёткого предложения, посетителю непонятно, почему он должен обратиться именно к вам.
- Недоработанность дизайна и сайта в целом, сайт не имеет дизайна как такового, ощущается, будто сайт набросан за один вечер из разных блоков просто, чтобы был сайт у компании.
- Желательно переделать сайт, начиная с единой концепции и дизайна. То есть сначала сделать прототипы (схемы), на которых учесть все элементы, предусмотреть место и для информационной, и для коммерческой составляющей сайта, потом переходить к дизайну, оценить визуал и баланс цветов, а уже после этого из картинки делать код и запускать сайт в работу.