Удобные кнопки и навигация: как сделать сайт, который приносит деньги, а не отпугивает клиентов

Когда я только начинал работу в SEO в далеком 2010 году, никто даже не задумывался, что сайт или интернет-магазин должен быть удобным как на ПК, так и на мобильном устройстве.

Тогда достаточно было просто создать сайт и немного над ним «поколдовать».

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

За 10 лет работы над созданием и продвижением больше чем 500 интернет-магазинов я сделал выводы и могу смело сказать, что:.

95% сайтов имеют одинаковые юзабилити-ошибки (с англ.

— Usability — показатель удобства пользования веб-ресурсом), а их владельцы даже об этом не подозревают;.

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

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

В итоге вы будете недополучать клиентов.

Список юзабилити-ошибок на страницах сайта.

Все ошибки я буду показывать на примере сайта ukrposhta.

Более детально ознакомиться с полным юзабилити-аудитом сайта «Укрпошты» Вы можете здесь.

«Укрпошта» — партнер компании PLERDY.

Наша совместная задача — сделать сайт компании максимально удобным для миллионов пользователей.

Юзабилити-аудит состоит из анализа пользовательского интерфейса (user interface) и пользовательского опыта (user experience).

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

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

Что можно посмотреть благодаря карте кликов.

Если ошибки пользовательского интерфейса может проверить тестировщик даже без помощи сервисов и программ, то анализ пользовательского опыта можно провести только на основе карты кликов.

Что привлекает пользователя на странице.

На главной странице «Укрпошты» пользователи первый клик, как правило, делают по кнопке «Отследить» без введения номера.

Рекомендую эту кнопку сделать некликабельной, если в поле ничего не введено или добавить валидацию на поле, чтобы страница результатов поиска не открывалась, пока не введен номер.

Когда пользователи уходят с сайта или переходят на другую страницу.

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

На каком экране больше всего кликов.

На первом экране главной страницы «Укрпошты» собрано 89 % всех кликов.

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

Ошибки в работе элементов сайта вам мог предоставить тестировщик.

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

Основные рекомендации для создания удобного сайта или интернет-магазина.

Возможность легко сменить язык сайта.

В личном кабинете «Укрпошты» такой возможности не предусмотрено.

Наличие адаптивной верстки.

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

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

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

Дальше я расскажу детальнее о каждой ошибке.

Нужно разработать интерфейс под каждое устройство.

На мобильной версии сайта меню открывается только по клику на нем.

А на персональном компьютере таким способов открывать меню не удобно, так как пользователь должен сделать дополнительный клик.

Такую ошибку можно встретить и в нашем случае.

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

Самый заметный элемент на экране — призыв к действию.

На сайте «Укрпошты» кнопка «Отследить» это топ элемент.

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

А вот на странице новостей призыв к действию не предусмотрен.

Нужно добавить кнопку «Читать подробнее».

Используйте интуитивно понятные иконки.

В данном кейсе могу навести пример такой ошибки.

В главному меню нет иконки стрелки, которая интуитивно сообщает посетителю что это меню имеет подкатегории.

Так, ценность других баннеров снижается.

Кликабельный логотип.

Логотип кликабелен и ведет на главную страницу, а на главной странице — не перезагружает страницу.

В нашем случае эта ошибка присутствует.

На главной странице надо убрать ссылку с логотипа.

Тем более эта ссылка ведет на дубль страницы.

Возможность мгновенно проскролить страницу вверх.

К счастью, этой проблемы нет на сайте «Укрпошты».

Элементы сайта и их дизайн.

Не всегда только ошибки можно найти в функционале.

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

Соблюдение F-паттерна сканирования.

Более продвинутый уровень – расположение наиболее важных элементов сайта на странице по схеме в виде буквы F.

Именно так скользит взгляд пользователя, согласно многочисленным исследованиям.

Самое заметное место – верхний левый угол страницы.

Отталкиваясь от этой теории, для лучшей заметности на странице новости рекомендую переместить кнопку «Все новости» под надпись «Новости» или возле блока в одном ряду.

Кнопки и их функционал.

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

Используйте только «честные» кнопки.

И все.

Например, на сайте «Укрпошты» есть кнопки с неправильным названием.

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

Поиск на сайте и навигация.

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

Поиск всегда должен быть вверху страницы.

Именно там его ожидает увидеть пользователь.

Сейчас на сайте «Укрпошты» поиск выглядит как иконка.

Так как на сайте присутствует два поиска: по сайту и для отслеживания посылки, поиск по сайту нужно правильно акцентировать.

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

Поиск на сайте «Укрпошты» не работает: страница перезагружается и не показывает результатов поиска.

Подсказать, что делать дальше, если нет результатов поиска.

Поиск на сайте должен или вывести результат или предупредить пользователя об отсутствии каких-либо результатов.

На сайте «Укрпошты» поиск даже не показывает пользователю, что запрос неверен или не найден на этом сайте.

Также есть проблема и при отслеживании номера отправления.

При введении несуществующего номера на странице нет информации, что такой номер не найден.

Главное меню на сайте.

Меню одно из самых главных элементов на сайте.

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

Главное меню должно быть одинаковым на всех страницах.

На сайте «Укрпошты» оно везде одинаковое.

Но есть страницы, которые не пользуются популярностью в пользователей.

Эти страницы лучше переместить в футер (нижняя часть страницы, — прим.

В нашем примере — это страница «Карьера».

ua/ отсутствует поле поиска.

Выделить пункт, где находится пользователь.

На сайте отсутствует стиль CSS active, который отвечает за подсветку элемента для посетителя.

Так он сразу поймет, на какой странице он сейчас.

Доступное главное меню.

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

В нашем случае при скролле страницы в меню сайта отсутствует номер телефона.

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

Это явно не удобно.

Заметность подуровней.

На мобильной версии сайта в меню не видно какая категория основная, а какая второстепенная.

Страница контактов (отделений).

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

Отсутствие полной информации о компании и удобство пользования страницей сразу отталкивает «горячего» клиента.

Полная информация о каждой точке.

Зайдя на страницу «Контакты», в нашем случае – отделения, он должен увидеть полную информацию о каждой точке, если есть несколько точек.

В нашем примере эта рекомендация соблюдена.

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

На сайте «Укрпошты» пользователь может выбрать способ поиска нужного отделения.

На основе кликов можно увидеть, что пункт «Искать по индексу» является топ элементом.

Отталкиваясь от того, что разница между количествами кликов на пункте «Искать по регионам» и на полях для ввода 2 тыс.

кликов, рекомендую изменить структуру этой страницы.

Пункт поиска сделать открытыми и разместить слева.

Карту разместить справа.

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

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

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

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