Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

ATTENTION! Дальше будет много полезного и интересного. При написании статьи даже не думали, что она получится такой объёмной. Поверьте, те 15—20 минут, которые вы могли бы потратить на просмотр рилсов в «Запретграме», того стоят. Наша статья — это своего рода прикладная инструкция, по ней можно самостоятельно сделать UX/UI-аудит сайта. Устройтесь поудобнее, налейте себе кофейку или чашечку чая. Приятного чтения!

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

Все мы любим глазами. По данным разных статистик, около 94 % пользователей в первую очередь обращают внимание на дизайн сайта и удобство взаимодействия с ним. Если для того, чтобы купить кроссовки, клиенту нужно пройти многоуровневую систему регистрации, огонь, воду и медные трубы — он поспешит уйти с веб-ресурса и не станет блуждать из раздела в раздел. Устаревший или слишком креативный дизайн тоже оттолкнет потенциального покупателя. Однажды разочаровавшись, пользователь вряд ли воспользуется сервисом снова. Ухудшение поведенческих факторов вызовет падение трафика и снижение конверсии. C’est la vie!

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

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

UX/UI-аудит сайта: что это и зачем нужен анализ?

Начнем с азов. UX (User Experience) «пользовательский опыт» — то, каким образом юзеры взаимодействуют с сервисом. Это критерий удобства сайта. UI (User Interface) «пользовательский интерфейс» — то, как выглядит веб-ресурс. UX/UI-аудит — комплексная диагностика, она позволяет понять с какими сложностями сталкивается юзер и помогает определить причину его ухода с сайта. Ещё исследование даёт возможность проанализировать визуальную составляющую сервиса.

Некоторые подрядчики ограничиваются лишь общим списком советов «экспертов». Их рекомендации типа: «кнопку обратной связи на главной странице лучше сделать чуть темнее» и «шрифт заголовков увеличить», как правило, не подкреплены никакими исследованиями. Зачем это делать никто не объясняет. Вероятнее всего эффект от такого лжеаудита будет, как от подорожника при переломе. Ну или повезёт, и решения, которые предложит подрядчик сработают, но это неточно. Возможно вы просто потратите время и деньги.

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

Качественный UX/UI-аудит должен включать:

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

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

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

2. UX-аудит — анализ ресурса на удобство и простоту использования. Проверяется прежде всего навигация, функционал и структура всех страниц, измеряется количество шагов юзера до ЦД. Параллельно исследуется целевая аудитория.

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

3. UI-аудит проверяет визуальную составляющую сайта. Стиль сервиса должен быть актуален, так как именно он производит первое впечатление на пользователя. Анализ позволит выявить устаревшие решения. На примере референсов вы поймёте в каком направлении нужно двигаться.

4. SEO-аудит — исследование текущей ссылочной структуры сайта и её сравнение с конкурентами. Результат — обоснованный список рекомендаций.

Резюмируем, комплексный UX/UI-аудит сайта должен включать в себя огромное количество артефактов, а не только общий список советов «экспертов».

Чтобы не быть голословными разберём конкретный пример из нашей практики.

Как это делаем мы: UX/UI-аудит сайта на примере Karfidov Lab

Предыстория

В феврале 2023 года в Func. обратился давний клиент — Karfidov Lab. Это крупное конструкторское бюро полного цикла, у которого есть свои офисы в Санкт-Петербурге, Москве и Екатеринбурге. Лаборатория занимается промышленным дизайном, разработкой технической документации, созданием полноразмерных прототипов и производством высокотехнологичных продуктов.

Наша команда в далеком 2018 году разрабатывала для Karfidov Lab текущий сайт. После релиза поддержкой и контентным наполнением веб-ресурса клиент занимался самостоятельно.

За 5 лет изменилось позиционирование лаборатории, накопилось критическое количество ошибок и багов. Поэтому клиент и обратился в Func. со следующими запросами:

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

Чтобы найти проблемы, сформулировать рекомендации и составить план будущих работ, решили начать с UX/UI-аудита сайта. Так как базовую аналитику и описание целевых аудиторий предоставил клиент, команда Func. делала:

  • аудит текущего сайта (десктопной, мобильной и английской версии) в пяти разрешениях (1920 px, 1440 px, 1280 px, 768 px, 375 px);

  • анализ аналогов и конкурентов;

  • исследование визуальных трендов.

Ниже расскажем подробнее о процессе работы, артефактах и интересных наблюдениях.

Этап 1. Анализ текущей версии сайта

Редизайн и разработка — трудоемкий процесс, который в лучшем случае занимает 3—4 месяца. Было важно, чтобы на это время сайт лаборатории «не замер», а потенциальные клиенты продолжали использовать веб-ресурс.

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

  • ошибки в вёрстке;

  • ошибочные и спорные UX-решения;
  • ошибки и рекомендации в работе с контентом;
  • ошибочные и спорные UI-решения.

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

Все найденные ошибки, замечания и рекомендации собрали в Google Sheets.

В каждой строке были указаны следующие параметры:

— раздел/страница/экран сайта;

— скриншот ошибки;

— описание недочёта;

— разрешение, в котором найдена ошибка;

— категория;

— приоритет исправления;

— сопутствующий комментарий или рекомендации.

Финальная версия отчёта
Финальная версия отчёта

Немного интересной статистики. В результате UX/UI-аудита удалось выявить 152 ошибки, из них:

  • 51 ошибка в верстке;
  • 59 ошибочных или спорных ux-решений;
  • 14 спорных UI-решений;
  • 28 ошибок и рекомендаций в работе с контентом.

Далее разберём каждую категорию отдельно.

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

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

Ещё несколько распространенных ошибок:

  • «кривая» вёрстка: слишком большие или маленькие расстояния между объектами, некорректно отображающиеся изображения, пустые поля и «поехавший» текст;

  • дублирование объектов: текстов, слайдов, кнопок и полей;
  • недочёты навигации: некорректные переходы между разделами сайта, отсутствие возможности возвращения на предыдущие экраны, различия в наименовании пунктов навигации на разных страницах, неправильное выделение текущего раздела или страницы.

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

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

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

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

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

  • выстроить зависимости между разными блоками полей, так как выбор одних параметров может противоречить выбору других;
  • уменьшить количество обязательных для заполнения полей. Особенно это касается таких параметров, как «комментарий» или «ваш вопрос»;
  • добавить кнопки «Отмена» или «Вернуться назад» для нескольких шаговых форм;

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

в) Спорные UI-решения — есть мнение, что красивое работает лучше. И его подтверждают исследования Дональда Нормана — когнитивного психолога и специалиста в области компьютерной инженерии и дизайна. Согласно его научным работам, человеческий мозг воспринимает информацию на трёх когнитивных уровнях, подробнее о них можно почитать здесь и здесь. Так вот самый первый — интуитивный (visceral). На нем восприятие происходит очень быстро и неосознанно. Всё просто — оценивается привлекательность объекта, он либо красивый, либо вызывает отторжение.

Руководствуясь этим мнением, проверили визуальную составляющую сайта и нашли несколько спорных UI-решений. Самые яркие из них:

  • слишком большие межстрочные расстояния у заголовков;
  • в меню не считывались контакты, потому что не соблюдалось правило ближнего/дальнего;
  • некорректные размеры заголовков в мобильной версии.
Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

г) Рекомендации в работе с контентом — текст на сайте должен понятно и просто отвечать на все «что», «как», «сколько» и «почему» пользователя. Полная информация поможет юзеру быстро принять решение и совершить целевое действие. Тяжелый текст, фаршированный сложной терминологией, никто читать не будет.

Во время UX/UI-аудита составили список моментов, которые требуют доработки:

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

Этап 2. Анализ аналогов и конкурентов

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

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

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

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

В итоговый список конкурентов и аналогов включили 19 компаний, их разделили на группы:

  • студии, которые клиент считает своими конкурентами;
  • компании, регулярно получающие отраслевые награды;
  • зарубежные конструкторские бюро и студии промышленного дизайна;
  • IT-компании, как бизнесы с аналогичными процессами.

При анализе сравнивали следующие параметры:

  • UX-решения;
  • визуальные приёмы (UI);
  • структуру контента;
  • tone of voice.

Все наблюдения собрали в таблицу Google Sheets, в ней есть 2 вкладки: аналитика и список сайтов, которые мы исследовали.

Таблица «Анализ аналогов и конкурентов»
Таблица «Анализ аналогов и конкурентов»

Во вкладке «Аналитика» разобрали основные экраны:

  • меню;
  • главная страница;
  • услуги;
  • проекты;
  • формы.

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

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

Во-вторых, многие конкуренты на главной странице размещают отраслевые награды, цифры о компании — всё, что подтверждает их опыт, экспертность, авторитетность и достоверность (E-E-A-T). Напомним, что именно по этим параметрам поисковые системы оценивают веб-ресурсы.

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

Это не все наблюдения, но самые яркие.

Этап 3. Визуальное исследование

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

Кстати, настоятельно советуем, всем UX/UI-дизайнерам и не дизайнерам книгу этого дедули — «Дизайн привычных вещей». Одна из главных мыслей — дизайн должен быть человекоориентированным и упрощать нашу жизнь. Именно поэтому в рамках UX/UI-аудита проводим масштабное визуальное исследование референсов. Кроме того, примеры помогают:

  • погрузиться в контекст;
  • застраховаться от повторов;

  • найти новые удачные UI-решения;
  • наглядно представить идею заказчику и т. д.

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

Собранные ассоциации помогли выделить сферы для исследования. В итоге отобрали 61 сайт компаний из смежных отраслей:

  • промышленный дизайн — 17;
  • архитектура — 12;
  • сайты с товарами — 10;
  • digital-агентства — 15;

  • другое — 7.

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

Далее подробнее разберем особенности типографики, тексто-графического контента и вёрстки сайтов каждой отрасли.

Промышленный дизайн

Главная страница на всех веб-ресурсах этой категории содержит короткую информации о студии и примеры работ.

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

На 12 из 16 сайтах на главной странице акцент сделан на карточках с работами. 14 из 16 студий размещают проекты со скроллом вниз. И только 2 используют слайдер-галерею с автоматическим перелистыванием.

Страницы о компании на 11 из 13 веб-ресурсах, представленных на примере ниже, содержат текст и фотографии. В половине случаев композиция сбалансирована и устойчива. Еще 3 сайта либо оставили на странице просто текст, либо разместили информацию о компании на главной.

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

Также отметили, что 7 из 17 сайтов в сфере промышленного дизайна используют анимацию на страницах. В основном она сделана на текстах и длится 1,5 секунды. Картинки загружаются сразу, затем тексты, также есть лёгкие видео и GIF-анимация.

Посмотреть анимацию на главных страницах аналогичных сайтов можно здесь и здесь.

Еще одно интересное наблюдение — особое внимание на веб-ресурсах уделяется типографике и шрифтам. В 13 из 17 случаев используются закрытые гротески с вытянутой формой.

Архитектура

Анализ наполнения сайтов 12 архитектурных студий показал, что только 5 сервисов из нашей подборки используют динамичную подачу проектов на главной странице. На 10 веб-ресурсах применяются линии как дополнительный графический элемент.

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

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

В типографике большая часть сайтов использует закрытые гротески. На 3 ресурсах заметили написание в строчных буквах.

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

Сайты с товарами

8 из 10 сервисов в этой отрасли используют главную страницу как портфолио. Основной акцент на продукции. Все примеры из подборки выглядят весьма минималистично — нет теней и других эффектов, блоки разграничены тёмным оттенком, у карточек встречается фон, который отделяет их от общей подложки.

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

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

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

На 2 из 10 сайтов увидели популярный в дизайне тренд на скругления. Более мягкие углы кажутся менее броскими и добавляют дружелюбности сервису.

Digital-агентства

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

Также только 8 из 14 digital-агентств комбинируют на главной тексты про услуги и карточки с примерами работ. Благодаря этому страница не выглядит переполненной.

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

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

На 11 из 14 сайтах есть большой контраст между заголовками и текстом из-за крупного размера шрифта первых.

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

Другие сайты

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

Сделай то — не знаю что, или зачем нужен UX/UI-аудит сайта

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

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

Те данные, которые мы получили благодаря анализу референсов, соотнесли с устойчивыми трендами и результатами крупных исследований на тему роли цвета в маркетинге. Кстати, рекомендуем к прочтению работы Nielsen Norman Group, Bottomley and Doyle и Ника Коленды.

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

  1. Для сайта лучше использовать тёмную тему, такое решение обусловлено привычками целевой аудитории конструкторского бюро (мужчины от 30 до 60 лет).
  2. Так как большинство сайтов (48 из 61), которые мы исследовали, предпочитают закрытые гротески с вытянутой или геометрической формой, предложили заменить шрифт Cera на Suisse Intl. Новый шрифт нейтрален, сдержан и строг, поэтому больше подходит сайту конструкторского бюро.

  3. Стоит использовать максимум 2 начертания шрифта одного семейства. Если необходимо выделить текст, то следует писать его в верхнем регистре (но текста не должно быть много, лучше ограничиться 10 или 20 символами).

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

  5. 31 сайт использует анимацию на страницах, возможно стоит использовать этот приём и протестировать его эффективность.
  6. Если проектов много, то стоит использовать фильтры. Акценты за счёт цвета допустимы, но в небольших количествах. Важно сохранить баланс.

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

Вместо итогов

Все хорошее рано или поздно заканчивается, наша огромная СТАТЬЯ тоже. В результате UX/UI-аудита клиент получил качественное исследование не только собственного сайта, но и анализ веб-ресурсов его аналогов и конкурентов. Разумеется, все описанные выводы в презентациях и таблицах — это гипотезы, частично подтверждённые некоторыми исследованиями. Но как они будут работать, необходимо проверять на практике. Отчёты аудита — лишь руководство к действию, если хотите — рецепт врача, но не само лечение заболевания.

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

Используйте эту статью, как инструкцию для самостоятельной проверки сайта. А если не хочется разбираться, то доверьте UX/UI-аудит сайта нам. Мы поможем отыскать ошибочные или спорные UX/UI-решения и исправить их.

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

99
Начать дискуссию