UX-анализ

Pc-service.by – UX-анализ

Lumio
https://lumio.by/

ТАБЛИЦА НАИБОЛЕЕ ВАЖНЫХ ХАРАКТЕРИСТИК САЙТА

Доступность сайта

Быстрое время загрузки

Необходимо поработать над оптимизацией в мобильной версии,

низкая загрузка сайта.

Отсутствие горизонтальной прокрутки (скролл)

Отсутствие ссылок на несуществующие страницы

Кроссбраузерность

Адаптация под мобильные устройства

Идентификация
пользователю с первых секунд должно быть понятно, куда он попал и кто Вы такие

Логотип на видном месте

Главную страницу можно опознать за 5 секунд

Взаимодействие с аудиторией

Заметные призывы к действию

Наличие форм обратной связи

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

Типографика

Не более 3 шрифтов

Читабельный размер шрифта

Низкая / высокая контрастность

Использование выделений жирным шрифтом и курсивом

Наличие абзацев

Наличие подзаголовков

Использование списков

Выравнивание текста, отсутствие разрывов между словами

Межстрочный интервал

Необходимо немного увеличить

Соблюдение орфографических, грамматических и пунктуационных норм

Навигация по сайту

Интуитивное ориентирование по разделам сайта

Четкое понимание структуры меню сайта

Кнопка "Наверх"

Наличие функции поиска на сайте

Дизайн сайта

Стили и цвета оформления постоянны

Использование не более 3 цветов

Тематические изображения

Мобильная версия
дополнительно к замечаниям выше

Оптимальное размещение элементов в хедере

Необходимо пересмотреть

Расстояние между кликабельными элементами

 UX-анализ
Pc-service.by – UX-анализ

Lumio
https://lumio.by/

ДЕСКТОПНАЯ ВЕРСИЯ

Общие рекомендации
для всех страниц

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

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

Из примеров:

-Успейте купить. Предложение истекает 1-го августа;

-Есть вопросы? Задавайте;

-Не можете определиться? Спросите совета у наших онлайн-операторов (конкретно в

этом случае рекомендуется добавить на сайт чат-бота);

-Есть вопросы? Напишите нам – будем рады ответить.

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

0.4. Кнопки, которые ведут к разным действиям, должны различаться визуально.

КУПИТЬ ОФОРМЛЕНИЕ ЗАКАЗА

ПЕРЕЙТИ В КОРЗИНУ ОФОРМИТЬ ЗАКАЗ

0.5. Не на всех карточках отображается кнопка "Купить".

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

Хедер, меню

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

0.8. На данный момент не совсем понятно для чего выделен раздел "Оплата и доставка"
является ли он самым важным? Так же такое выделение раздела вводит пользователя в
замешательство, т.к. есть ощущение, что он активен и пользователь в данный момент
находится именно в этом разделе.

0.9. Рекомендуется зафиксировать шапку сайта, что позволит ей оставаться постоянно

видимой в процессе прокрутки.

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

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

Корзину можно оставить в правом углу, но лучше перенести ее в поле меню.

12. Рекомендуется увеличить символы соц. сетей внутри иконки, на данный момент они
маленькие, плохо читаются.

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

Футер

14. Необходимо выровнять элементы.

12. Рекомендуется добавить кнопку заказать звонок под номера телефонов. Таким образом
мы очередной раз призываем пользователя к действию.

КАРТОЧКА ТОВАРА

13. Необходимо отслеживать единое оформление карточек товаров. Кнопка призыва к

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

14. Кнопка приклеилась к названию товара, необходимо сделать отступ.

15. Так как на данный момент, нет возможности добавить цены на сайт, то можно вернуть
старые цены и написать "от...", так пользователи будут ориентировочно иметь
представление о ценах.

16. Не обязательно, но желательно добавить кнопку «Купить в один клик», которая

существенно повышает конверсию продаж. Такую кнопку располагают под стандартной
кнопкой «Купить» («Добавить в корзину») или около нее. И если при нажатии кнопки
«Купить» клиент будете переброшен в раздел «Оформление заказа», то при покупке в 1
клик он просто вводит свои контактные данные.

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

18. Переключатели лучше расположить горизонтально, это более удобное расположение и

более привычный паттерн для пользователя.
 UX-анализ
Pc-service.by – UX-анализ

Lumio
https://lumio.by/

ДЕСКТОПНАЯ ВЕРСИЯ

Рекомендации для отдельных страниц

1. Главная

1.1. Не хватает микровзаиомдействия. Рекомендуется сделать отзывчивой всю карточку.

Сейчас анимация работает только при наведении на название.

1.2. Маленькие отступы — блоки сайта прилипают друг к другу. Это перегружает страницу и
создает путаницу, как будто это одно целое, а не разные по смыслу части.

1.3. Элементы переключения накладываются на карточку, это выглядит неаккуратно и

тяжело для восприятия.

1.4. Сделать больше отступы. Маленькие отступы мешают быстрому восприятию текста.

2. Каталог

2.1. Рекомендуется убрать подкатегории сверху, выбор подкатегорий есть в боковом меню.
Благодаря этому освободится пространство.

2.3. Маленькие отступы, не позволяющие разделить абзацы. Необходимо увеличить

отступы для более лучшего восприятия текста.

3. Оплата и доставка

3.1. Заголовок "Доставка" и "Оплата" нужно сделать едиными по стилю оформления. Это
два заголовка и они должны быть одного размера.

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

4. Производители

4.1. Рекомендуется отображать выбранного пользователем производителя другим

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

4.2. Необходимо переименовать раздел в меню шапки, т.к. там название раздела
"Бренды" при переходе же на страничку название меняется на "Производители",
таким образом мы путаем пользователя.

5. Контакты

5.1. Рекомендуется поменять местами форму обратной связи с картой. Более удобно
будет для пользователя если рядом с информацией о местоположении будет
находится карта.

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

6. Корзина

6.1. Нет возможности продолжить покупки. То, что пользователь зашел в корзину, не
значит, что на этом этапе он уже завершил свой путь по сайту. Он может захотеть
просто посмотреть, что уже купил, и на какую сумму. Затем – продолжать покупки. И
если у вас нет нужной кнопки в корзине «Продолжить покупки», вы тем самым
отрезаете пользователю путь назад в каталог.

6.2. Нет пометки о том, что товара нет в наличии. Очень частая ошибка – в каталоге
товар отмечен как такой, что есть на складе. Выясняется, что его нет, только после
того, как покупатель выбрал товар или даже оплатил его. Это выглядит попросту как
обман.

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

6.4. Рекомендуется увеличить изображение товара, сейчас оно очень маленькое, не

сразу можно опознать товар.

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

6.6. После ввода нужного количества товара пользователю приходится обновлять

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

7.1. На этом этапе стилевое оформление корзины уже выглядит совсем по другому. Тут
она приобретает уже более табличный вид, необходимо свести к единому стилю
оформления.
 UX-анализ
Pc-service.by – UX-анализ

Lumio
https://lumio.by/

АДАПТИВНАЯ ВЕРСИЯ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА

Общие рекомендации
для всех страниц

Адаптивные версии должны быстро загружаться, поэтому должны быть максимально

легкими и упрощенными в сравнении с полной версией.

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

Большинство рекомендаций для мобильного адаптива после внесения правок в десктопную

версию будут учтены.

8. Шапка занимает очень много места на экране, необходимо пересмотреть расположение

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

9. Телефоны в футере лучше расположить списком, это улучшит читабельность.

10. На мобильных устройствах лучше заменить хлебные крошки функционалом "Назад".

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

пользователь может не попасть пальцем по нужной ему кнопке.

12. В карточке товара очень большой отступ между блоками, необходимо уменьшить.

13. Маленькое расстояние между кликабельными элементами на странице

"Производители", пользователю будет тяжело попасть по нужному ему разделу.

14. Текстовые блоки лучше расположить друг за другом вниз. Это поможет избежать
разрыва строк и улучшить читабельность и восприятие информации.

15. В корзине кнопка "Оформление заказа" не кликабельна. Не происходит перехода на

страничку где можно оформить заказ.

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

ЗАКЛЮЧЕНИЕ

Внесение выявленных во время анализа правок позволит улучшить восприятие как

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

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

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

Все это формирует положительный пользовательский опыт взаимодействия с интерфейсом.