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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Предыстория

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

— категория;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Архитектура

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

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

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

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

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

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

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

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

Digital-агентства

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

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

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

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

Другие сайты

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

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

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

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

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

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

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

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

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

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

#дизайн #юзабилитиаудит #ошибкиюзабилити #аудитсайта #аудитинтерфейса