Топ-10 ошибок, которые мы находим на клиентских сайтах. Часть 1

В начале 2022 года мы в Asanov Agency запустили услугу аудита сайтов. Это первая часть подборки типовых проблем клиентских проектов. Статья поможет маркетологам и разработчикам избежать повторения распространенных ошибок. А для владельцев сайтов послужит чек-листом проблемных зон.

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

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

Проверка качества текстов относится скорее к SEO-аудиту, однако мы всё равно включаем её в чек-лист. Структурированные и понятные тексты напрямую влияют на пользовательский опыт. В компактном и последовательно составленном тексте человек легко найдёт ответы на вопросы и решение собственных «болей». Скучный, неоформленный, сухой текст большого объёма скорее всего не будет прочитан вообще. Если посетитель сайта не находит нужную информацию, он уходит искать её дальше. Будет расти процент отказов, а время проведённое на странице и глубина просмотров будут снижаться.

Самой частой ошибкой в области контента является использование текстов, которые перенасыщены прямыми вхождениями SEO-ключей. Чтобы разбавить эти тексты и искусственно увеличить объём, копирайтеры добавляют туда большое количество воды. Под водой мы понимаем все виды языкового мусора: использование вводных конструкций, штампов и перегруженных предложений. Языковой мусор негативно сказывается не только на читаемости, но и на SEO-оптимизации сайта. Поисковые системы давно научились ранжировать сайты не только по количеству ключей, но и по степени полезности текста.

Придерживайтесь информационного стиля и вы добьётесь желаемого результата. Пользователи будут легко воспринимать текст, а поисковики высоко ранжировать страницы. Длинные тексты для SEO-ботов следует переписать и сделать полезными для людей. Для проверки текстов используйте сервис Главред: https://glvrd.ru/. Он даст тексту оценку и подскажет, что исправить.

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

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

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

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

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

На клиентских сайтах ошибки в микротекстах чаще всего проявляются следующим образом:

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

Пользователь должен понимать что произойдёт после нажатия на кнопку. Поэтому кнопка должна называться глаголом: «Оформить заказ» вместо «Оформление заказа», «Зарегистрироваться» вместо «Регистрация».

Системные сообщения должны быть написаны понятным пользователю, «человеческим» языком.

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

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

На клиентских сайтах главная страница часто не даёт представления о бизнесе и его УТП. Полезное пространство хедера и первого экрана занимается вторичной информацией, которая не имеет пользы для посетителя. Вот несколько примеров типовых ошибок:

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

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

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

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

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

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

За последний год общероссийская доля мобильного трафика составила 61,83% процентов, доля десктопного - 36,2%. Это наглядное доказательство того, что без адаптивной версии сайт не может нормально функционировать и приносить прибыль. Адаптив реализован в 100% клиентских проектов, которым мы выполнили юзабилити-аудит. В то же время качество планшетной и мобильной версии у половины сайтов оказалось на низком уровне.

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

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

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

Между мобильной и десктопной версией допустимы только визуальные отличия. Контент и функционал должны быть идентичны. Иногда для этого используется принцип «mobile first»-разработки: сначала дизайнится версия под маленький экран, а потом под большие разрешения.

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

Проверку адаптива начните с бесплатного сервиса Google, который автоматически оценивает степень оптимизации под мобильные устройства: https://search.google.com/test/mobile-friendly. После этого займитесь ручным поиском описанных выше типовых ошибок. Одновременно с этим проверяйте сайт на наличие расхождений с десктопной версией. С той же целью пройдите с мобильного телефона конверсионные сценарии, которые доступны в рамках вашего проекта.

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

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