Снова здравствуйте! Сегодня – о том, что такое юзабилити и как его проверять. И не забудьте почитать про оценку качества контента и маркетинговой упаковки сайта в предыдущих статьях из этой серии.
Юзабилити – это совокупность факторов, которые влияют на удобство пользования сайтом. Если пользователю неудобно им пользоваться, он просто закроет страницу и пойдёт искать нужную информацию или товар где-нибудь ещё.
А теперь разберёмся, как быстро провести анализ юзабилити сайта. Начнём с ориентирования. В идеале у нас есть:
- Логотип компании. Он нужен, чтобы пользователь сразу понимал, куда он вообще попал. В идеале к нему должна быть закреплена ссылка на главную страницу.
- Удобная структура меню сайта. Всё понятно интуитивно, ребусы и головоломки в комплект не входят.
- «Хлебные крошки». Так называются навигационные цепочки, которые дают возможность пользователю понять, в каком разделе или подразделе он сейчас находится, а также легко вернуться на предыдущие страницы категории.
- Выделенные ссылки в тексте. Тайную кнопку искать не нужно – и так понятно, что здесь находится ссылка.
- Наличие меню в подвале (футере). Позволяет не листать по полчаса страницу вверх, чтобы вернуться к основному меню и быстро перейти в нужный раздел. Можно заменить кнопкой «вернуться в начало страницы».
- Обозначение страницы, на которой находится пользователь. Это чтобы посетитель не заблудился. Идеально в сочетании с хлебными крошками.
- Наличие поиска. Функция, которая позволяет быстро найти нужный товар в огромном каталоге (или интересующую информацию на большом количестве страниц). Обратите внимание, что форма поиска не должна по сложности быть похожей на космический корабль. Строчка ввода и кнопка «искать». Всё.
- Кнопки со ссылками на аккаунты компании в социальных сетях. На ВК, Facebook, Instagram, Яндекс.Дзен или где Вы там ещё вместо работы сидите, а? Признавайтесь! Кстати, проверьте ссылки. Бывает, что их забудут прописать, в результате чего они ведут не туда, куда надо.
- URL. Это ссылка, которая отображается в верхней части браузера. В ней не должно быть шифров — только понятное название и иерархия разделов. Про «человеческие» URL обязательно расскажем чуть ниже.
- Кнопка «вернуться в начало» на длинных страницах. Либо закреплено меню навигации. Чтобы долго не листать вверх. Должна быть обязательно, на лендингах в первую очередь!
- Раздел «Контакты». Ссылка на него должна быть в меню (как в основном, так и в футере). Для удобства в подвал можно вставить форму обратной связи и схему проезда (на всех страницах). Адрес и номера обычно размещают в шапке.
- Доступная информация о ценах. Все цены размещаются в одной валюте и прикрепляются к карточке товара в каталоге. Если это невозможно, делаете очень заметный ПЕРЕХОД НА ПРАЙС ЛИСТ.
Хотите пример хорошего юзабилити? Да пожалуйста! ВК.
Напоминаем, сейчас мы говорили о навигации. Но на этом юзабилити не заканчивается. Переходим к картинкам.
- Все картинки пропорциональны. Соблюдайте пропорции! Растянутые рожицы людей с фотостоков смотрятся забавно, но не все пользователи оценят Ваш юмор.
- Информативность изображений. Вся графика должна соответствовать тематике сайта. В идеале используйте свои фото, а не изображения из сети.
- Увеличение при нажатии. Возможность увеличить картинку при нажатии. Особенно важна в тех случаях, когда её нужно рассмотреть в деталях.
- Подписи к картинкам. Если требуется, нужно объяснять, что показано на изображении в соответствующей подписи.
- Цветопередача. Не рекомендуется использовать формат gif без необходимости. Он значительно ухудшает качество и насыщенность цветов.
Вот сайт одной базы отдыха. Все пункты по чек-листу "картинки" выполнены:
Теперь поговорим о том, каким должен быть дизайн. Он является неотъемлемой частью пользовательского интерфейса, а не просто красивым дополнением. Подробнее:
- Оформление должно упрощать навигацию. Опытный дизайнер умеет сделать так, чтобы Ваши глаза сразу понимали, куда идти и что делать (нет, вовсе не то, о чём Вы подумали!). Графика подчёркивает основные навигационные элементы. Это делает сайт ещё удобнее.
- Делайте акцент на главном с помощью дизайна. Есть много уловок, чтобы заставить сконцентрировать взгляд покупателя на смысловых «пулях», которые побуждают совершить покупку. И если Вы очень быстро осознали выгоду предложения, но даже не увидели и половины страницы, то дизайнер – молодец.
- Подстройка под целевую аудиторию. Зная психологию и хотелки своего клиента, можно вдохновлять его на покупки с помощью оформления. Например, женские сайты традиционно делают в нежных пастельных тонах. Хипстеру понравятся модные картиночки и «не так как у всех», так что больше креатива! А вот гендиректору завода подавай что-нибудь простое, понятное, но солидное. Примеров куча, но об этом в другой раз.
Теперь о том, как это выглядит в реале:
Мы знаем, что Вам всё понятно, но подытожим.
Плохо: Навигация по сайту максимально удобная. Чтобы найти интересующую страницу или ссылку на сайте, нужен всего лишь компас, древняя карта из затонувшего где-то на Карибах британского галеона и бригада кладоискателей. Кстати, пока Вы долистали до верха страницы, Ваши друзья уже успели долететь до Кубы и даже отведать местного рома. Они уже назад летят, а Вы всё листаете. Пропорции картинок соблюдены так хорошо, что каждое фото с человеком напоминает кадр из фильмов ужасов. Кстати, Вы их так и не увидели, потому что временно ослепли от шедеврального дизайна сайта.
Хорошо: Кнопка «телевизоры» в меню ведёт на раздел «телевизоры». Нужную модель Вы находите за секунды, потому что на сайте есть поиск по каталогу. Все картиночки настолько аккуратные и красивые, что Вы даже представить не можете, насколько круто телевизор будет смотреться в квартире. Да и дизайн как будто сам берёт за ручку и ведёт куда-то, где Вам очень комфортно. А, кстати, Вы уже задаёте вопрос консультанту, потому что в футере сайта, где заканчивается описание товара, есть форма обратной связи.
Без юзабилити никуда!
Подытожив эту статью: сайт должен быть максимально удобным для пользователя. Иначе он не будет искать нужную информацию на нём. Проверить показатели юзабилити проще простого. Следуйте инструкциям из этой статьи и всё мгновенно поймёте.
До встречи в новых публикациях! Ставьте палец вверх и подписывайтесь на наш канал, а мы будем регулярно дарить Вам новые порции полезного и информативного контента. Кстати, больше статей ищите в нашем блоге.
Блог веб-разработки INTRID – https://intrid.ru/blog
Мы ВК – https://vk.com/intrid_web_studio
Мы в FB – https://www.facebook.com/intrid