UX\UI АУДИТ
Сайт: https://spbskupka78.ru/

Версия сайта по состоянию на 28.07.2024
В данном аудите я буду рассматривать сайт комплексно:
UX-дизайн (User Experience — «пользовательский опыт») отвечает за то, как интерфейс работает.
UI-дизайн (User Interface — «пользовательский интерфейс») отвечает за то, как интерфейс выглядит.
Структура — очередность и актуальность блоков\страниц.
Маркетинг — комплексные меры по увеличению конверсии
1 / Общая оценка
Сайт должен донести до пользователя основной призыв, что именно его технику\товар\имущество — компания выкупит по выгодной цене и максимально удобно для пользователя

Позиций товаров для скупки много, много различных категорий, это основная проблема со стороны UX. Поэтому структура и навигация сайта должна быть выполнена по типу интернет-магазина.
Основным правилом для интернет магазинов является ПРИНИЦП ХИКА (подробнее тут):
Чем больше вариантов, тем сложнее принять решение.
Поэтому пользователь должен максимально быстро и удобно выбрать свой собственный вариант, без разбавления пользовательского внимания на лишние смыслы/акценты/варианты

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

Поэтому можно при разработке прототипа сайта можно опираться на их практический опыт
В качестве примеров будут использованы сайты крупных компаний из смежных ниш
ВАРИАНТЫ В ПРИМЕРАХ НЕ ЯВЛЯЮТСЯ ВУЗУАЛЬНЫМИ ПРИМЕРАМИ ДЛЯ КОНЦЕПТА ДИЗАЙНА

Они лишь показывают композицию блоков

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

Без диалога с заказчиком — не могу предоставить варианты дизайна
2 / Главное меню
Боковое меню (1)
Описание
Повторяет функционал верхнего основного меню, не помещается на одном экране, смещает контент вправо.
Проблема
Пользователь может не увидеть свой вариант и покинуть сайт, добавляется лишний смысловой шум
Варианты решения
1. Объединить категории, чтобы пункты меню были видны без скролла
2. Удалить боковое меню, вынести все в главное
Верхнее меню (2)
Описание
Повторяет функционал бокового меню, не помещается на одной строчке
Проблема
Пользователь может не увидеть свой вариант и покинуть сайт, добавляется лишний смысловой шум
Варианты решения
1. Объединить категории, чтобы пункты меню были видны на одной строчке
2. Сделать меню шире, чтобы поместилась вторая строчка
3. Удалить боковое меню, вынести все в главное
Шрифты
Описание
Очень много разных начертаний (размер, толщина и тп) в меню
Проблема
Пользователю сложно найти необходимые акценты, добавляет визуальный шум
Варианты решения
1. Разработать фирменный стиль с четкой иерархией в типографике:
Заголовок \ Подзаголовок \ Основной текст \ Кнопки\ссылки

Для каждого значения использовать только его начертание во всех текстах компании (сайты, документация, сувенирка, печатная продукция, соцсети и тп)
Логотип
Описание
Зажат, плохого качества
Проблема
Создается ощущение "дешевизны"
Варианты решения
1. Задать отступы в соответствии с фирстилем компании, перенести рядом с логотипом название и позиционирование компании
Пункты меню
Описание
В пунктах меню нет страниц для повышения лоялньности клиентов к компании
Проблема
Пользователь не может оценить свое доверие к компании
Варианты решения
1. Добавить в меню страницы типа: О компании \ Отзывы \ Кейсы и тп
2 / Главный экран
Офферы (5)
Описание
Слабый акцент на самом важном моменте
Проблема
Пользователь может пропустить офферы
Варианты решения
1. Добавить акценты: Подзаголовки, иконки, анимацию, негативное пространство, колонки и тп
Главная кнопка (6)
Описание
Акцентная и в меру агрессивная кнопка
Проблема
НЕТ
Варианты решения
НЕТ, с ней все хорошо
Фон (9)
Описание
Черный фон, который далее не используется в стилистике страницы
Проблема
Неповторяющиеся элементы дизайна добавляют визуальный шум, который мешает пользователю сконцентрироваться
Варианты решения
Привести к общему концепту дизайна страницы
Графика (7)
Описание
Смысловая, побуждающая к действию иллюстрация — идеально со стороны маркетинга
Проблема
Неповторяющиеся элементы дизайна добавляют визуальный шум, который мешает пользователю сконцентрироваться
Варианты решения
Привести к общему концепту дизайна страницы, добавить иллюстрации в таком же стиле далее по сайту
Наложение меню (3)
Описание
Меню просвечивает отступ блока главного экрана
Проблема
Лишний визуальный шум, который мешает пользователю сконцентрироваться
Варианты решения
Переверстать HEADER или блок главного экрана
Кнопка (6)
Описание
Хороший дизайн, но нет перспектив
Проблема
Пользователь должен четко понимать, что будет с ним после того или иного действия
Варианты решения
1. Добавить перспективы принятия решения:
  • мы свяжемся с вами через (точный промежуток времени, без диапазонов) и …
  • мы вышлем вам (реальная польза без спама)
  • мы сделаем вам (реальная польза)
  • мы предоставим именно ту информацию, которую вы ищите
и тп
Позиционирование
Описание
Скупка в Санкт-Петербурге
Хотите продать?
Проблема
Хотите продать — агрессивное, но точное УТП. Нужно разбавить агрессию конкретикой
Варианты решения
1. Добавить в УТП какой-либо пункт из оффера
2 / Блок услуг
Навигация
Описание
Очень много одинаковых пунктов навигации на экране.
Проблема
Пользователю сложно выбрать куда нажать, снижает вероятность принятия решения
Варианты решения

  1. Систематизировать навигацию по типу крупных сетевых компаний со схожими товарами
Фон
Описание
Фон с паттернами
Проблема
Паттерны (узоры) «размыливает» внимание пользователя, что мешает пользователю принять решение
Варианты решения
1. Убрать весь визуальный шум
Подложки
Описание
Плашки \ Шейпы \ Прямоугольники имеют общую стилистику (радиус закругливания углов, тени, цвет)
Проблема
Данная стилистика встречается не во всех местах, добавляет визуальный шум
Варианты решения
1. Привести концепт дизайна к обющему стилю, добавить стандартным блокам скрипты, которые это сделают
Шрифты
Описание
Очень много разных начертаний (размер, толщина и тп) на сайте
Проблема
Пользователю сложно найти необходимые акценты, добавляет визуальный шум
Варианты решения
1. Разработать фирменный стиль с четкой иерархией в типографике:
Заголовок \ Подзаголовок \ Основной текст \ Кнопки\ссылки

Для каждого значения использовать только его начертание во всех текстах компании (сайты, документация, сувенирка, печатная продукция, соцсети и тп)
Заголовок
Описание
Нет заголовка
Проблема
Пользователь должен четко понимать, что он может узнать, получить с этого блока
Варианты решения
1. Удалить лишний блок
3 / Второй блок услуг
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Слишком длинный блок, структурировать, либо сжать композицию до компактного размера
Призыв к действию
Описание
Не нашли свое устройство?
Проблема
НЕТ, удачное решение
Варианты решения
НЕТ
4 / Отзывы
Аналогичные проблемные элементы, описание и варианты решения представлены выше
Доказательства
Описание
Нет доказательств подлинности отзывов
Проблема
Снижается лояльность пользователя, большинство считают отзывы "фейковыми"
Варианты решения

  1. Добавить рейтинг из яндекса, авито и тп
  2. Добавить ссылку на данный ресурс для подтверждения
5 / Приемущества
Аналогичные проблемные элементы, описание и варианты решения представлены выше
Контакты
Описание
Нет кнопки для действия
Проблема
Пользователи сейчас достаточно обленились, сложное действие снижает конверсию
Варианты решения
  1. добавить кликабельный телефон либо кнопку
Акценты
Описание
Иконки не несут смысловой нагрузки
Проблема
При первом просмотре сайта — пользователи замечают только нужные им акцентные смыслы
Варианты решения
1. Заменить иконки на смысловые, в общей стилистике сайта
Типографика
Описание
Висячие предлоги, союзы на конце строк
Проблема
Создают визуальный шум
Варианты решения
1. Использовать nbsp через типограф тильды
Смыслы в приемуществах
Описание
Очень понятно и конкретно, возможно после большого интервью с копирайтером — получится сделать еще лучше. Но конверсия сайта — говорит, что все хорошо
Проблема
НЕТ
Варианты решения
НЕТ
6 / Roadmap
Аналогичные проблемные элементы, описание и варианты решения представлены выше
Ритмика текста
Описание
Смыслы — правильные и ясные
Проблема
Страдает ритмика текста, нужен рерайт. Прочитать без запинок и «на лету» сложно
Варианты решения

  1. Рерайт в нейросетях
  2. Пригласить в проект копирайтера
7 / Квиз
Аналогичные проблемные элементы, описание и варианты решения представлены выше
Композиция
Описание
Сухо, выбивается из стилистики
Проблема
Нет дизайна, пользователю становится скучно
Варианты решения
1. Использовать графику из главного блока
Сложное действие
Описание
Нет перспектив, пользователь не знает, что будет после прохождения квиза
Проблема
Квиз — всегда сложно, много кто считает, что после прохождения квиза ему придется оставить номер телефона, а стоимость он так и не узнает
Варианты решения
Нужно дать обещание, что будет после прохождения квиза, и возможно предоставить гарантии в виде кйесов ранее заполненных квизов??? нужно интервью для детализации этого момента
8 / Текст
Аналогичные проблемные элементы, описание и варианты решения представлены выше
Газетная верстка
Описание
Большой объем текста
Проблема
Мало кто читает такие объемы текста
Варианты решения
1. Использовать подзаголовки, колонки, иконки
Хотите продать свою технику, но не знаете, как получить честную цену?
Мы поможем вам! Мы готовы выкупить вашу технику

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

Так что если вы хотите продать свою технику, не стесняйтесь связаться с нами! Мы готовы ответить на все ваши вопросы и помочь вам получить лучшую цену за вашу технику.
Смыслы в тексте
Описание
Пользователи должны видеть только конкретику без «воды»
Проблема
Смыслы повторяют офферы, УТП и приемущества
Варианты решения
Удалить блок
9 / 2 Roadmap
Повторяющийся блок — удалить, группировать с имеющимся
10 / Блог
Аналогичные проблемные элементы, описание и варианты решения представлены выше
Комполозиция
Описание
Слишком большой блок
Проблема
Большое внимание нужно уделать только элементам, которые реально приносят вам прибыль, повысили акценты тут — снизили акцент на важных
Варианты решения
  1. Изменить композицию
  2. Разрешить к показу только 4 статьи, остальные за кнопкой «Показать еще»
  3. Использовать слайдер
  4. Убрать изображения для компактности
11 / Контакты
Аналогичные проблемные элементы, описание и варианты решения представлены выше
Контакты
Описание
Нет кнопки для действия
Проблема
Пользователи сейчас достаточно обленились, сложное действие снижает конверсию
Варианты решения
  1. Добавить кликабельный телефон либо кнопку
Акценты
Описание
Важный блок без акцентов
Проблема
Пользователи обязательно должны "зацепиться" на этом блоке
Варианты решения
1. Изменить композицию блока, использовать иллюстрации
Форма обратной связи
Описание
Нет формы обратной связи
Проблема
Прототипичный для многих блок в контактах, многие ищут его именно там
Варианты решения
Добавить форму
12 / SEO-текст
Аналогичные проблемные элементы, описание и варианты решения представлены выше
Акценты
Описание
SEO-текст должен быть максимально незаметным для пользователя
Проблема
Забирает часть внимания с других блоков, но не влияет на принятие решения
Варианты решения

  1. Переверстать
  2. Использовать отдельное начертание шрифта (Light, 14px)
  3. Убрать изображение
  4. Растянуть на все 12 колонок, чтобы сжать высоту
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages. Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied." Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages. Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied." Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
13 / Контакты-2
Аналогичные проблемные элементы, описание и варианты решения представлены выше


Поднять блок к контактам
Карты
Описание
2 карты тормозят сайт, мешаются пользователю
Проблема
Неудобно использовать блок
Варианты решения

  1. Группировать все на одной карте
Стилистика
Описание
Разные блоки и элементы с одним смыслом — добавляют визуальный шум
Проблема
Снижается конверсия
Варианты решения
1. Группировать в один блок, использовать стилистику всего сайта
14 / Видео
Аналогичные проблемные элементы, описание и варианты решения представлены выше
Расположение
Описание
Видео расположено тут, просто для того чтобы было
Проблема
Малая часть пользователей дойдет до него, а оно крутое!
Варианты решения
  1. Использовать видео через блок VD16 (виджет)
  2. Поднять выше и использовать его совместно с другим контентом
  3. Использовать зуглушку (изображение) к видео, чтобы скрыть стилистику YOUTUBE
15 / Footer
Аналогичные проблемные элементы, описание и варианты решения представлены выше

ЛОГОТИП чужой организации
Категории
Описание
Сложно найти нужный пункт
Проблема
Нет категорий и визуальной навигации в блоке
Варианты решения
  1. Переверстать блок в ZEROBLOCK
  2. Использовать категории, колонки, иконки, вкладки и тп
16 / Главные экраны в категориях
Аналогичные проблемные элементы, описание и варианты решения представлены выше

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

Отличная от стилистики сайта
Информация только путает пользователя, а должна поднимать лояльность, как кейсы скупки
18 / Приемущества-2
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Отличная от стилистики сайта

Использовать блок с преимуществами с главной страницы
19 / Приемущества-3
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Отличная от стилистики сайта
Использовать блок с преимуществами с главной страницы
20 / Услуги
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Отличная от стилистики сайта
Важный блок, который должен быть также и на главной странице. Не помещается на одном экране, поэтому нужно переверстать, чтобы все поместилось
21 / Примущества-3
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Отличная от стилистики сайта, повторяющиеся смыслы из преимуществ

На этом месте должен быть мощный призыв к действию
22 / Категории
Аналогичные проблемные элементы, описание и варианты решения представлены выше

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

Данный блок нужно размещать ниже, уже после того, как пользователь получил всю информацию про планшеты
23 / Слайдер
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Заголовок про слайдеры, но вместо него вопрос-ответ

Блок вопрос-ответ должен быть также на главной странице
24 / Категории-2
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Отличная от стилистики сайта

Слишком объемная композиция, нужно сделать компактной

Отсутствует отступ под заголовком, но большой отступ после блока
25 / Вопрос-ответ 2
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Продублировать в соответствии с категорией на всех других страницах
26 / Призыв к действию
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Блок отличается от стилистики сайта

Продублировать в соответствии с категорией на всех других страницах
25 / Вопрос-ответ 3
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Блок вопрос-ответ уже есть на странице
27 / Купить товар
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Новая совершенно отличная от всего услуга без заголовка, офферов, УТП и без акцента

Продублировать в соответствии с категорией на всех других страницах
28 / Преимущества 4
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Блок отличается от стилистики сайта
29 / Контакты -2
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Блок отличается от стилистики сайта

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

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

Нужно выделять подзаголовки, делить на смысловые части, выносить фактоиды в колонки и тп
32 / API-2
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Блок отличается от стилистики сайта

На странице с недвижимостью — информация по технике

Небрежное заполнение пунктов меню
33 / Мобильная версия
Аналогичные проблемные элементы, описание и варианты решения представлены выше

Долгая загрузка, поэтому видна заливка шейпов, убрать заливку

Длинные блоки по 3−4 пролистывания — заставляют часто скроллить, поэтому пользователь может пропустить нужны блок.
Нужно структурировать и укорачивать второстепенные блоки, оставлять внимание только тем, которые приносят заявки.
34 / ИТОГИ
Навигация
На одном экране не должно находиться двух и более равнозначных ссылок в одно и тоже место

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

Все ссылки, стрелки и т. п. должны функционировать
Структура
Блоки с одинаковым смыслом не должны повторяться

Блоки, которые есть на нескольких страницах — должны быть похожи и должны располагаться в одних и тех же местах.
Стилистика
Все блоки должны иметь только одну стилистику
Шрифты
Все Заголовки должны иметь одно общее начертание
Все Подзаголовки должны иметь одно общее начертание
Весь основной текст должны иметь одно общее начертание
Типографика
Не должно быть длинных газетных блоков
Не должно быть висячих предлогов\союзов
Иллюстрации
Должны иметь один стиль
Иконки
Должны иметь один общий стиль, должны нести смысл
Отступы
Между разными смысловыми блоками должны быть везде одинаковыми минимум 60px и максимум 150pх
Кнопки
Должно быть 2 варианта: основное действие и второстепенное
Фон
Нужно убрать паттерны, оставить фон чистым, различаться по цвету в зависимости от смысла, а не случайно
Офферы
Должны иметь смысловые акценты
Заголовки
Все блоки должны иметь конкретные заголовки с фактами
CTA
На странице должно быть минимум три призыва к действию, каждый должен идти после сильного по смыслу блока
Лояльность
Цена, удобство и доверие — ваши главные ценности, которыми Вы должны привлекать клиентов, они должны иметь общие процентные соотношения по объему на сайте
Текст
Не должен содержать красивой «ВОДЫ», только факты и конкретика
Должен иметь удобную ритмику
Должен иметь единый стиль обращения к пользователю
Формы, кнопки призыва
Должны иметь перспективы, после каждого клика - пользователь должен понимать, что с ним произойдет, и почему это действие ему выгодно
35 / Рекомендации