Алоха, гайз!
Сегодня разберем на живых примерах юзабилити дизайн главной страницы сайта. Выделим 5 главных элементов, узнаем, как и где их лучше всего размещать.
Сразу обращаю ваше внимание, что речь в статье пойдет о юзабилити многостраничного сайта с категориями. Разбор будем вести на примере типичного интернет-магазина.
Сложно переоценить важность правильного восприятия сайта пользователем! Однако еще недавно таким уже привычным российскому слуху понятием, как usability, откровенно пренебрегали, отдавая предпочтение замысловатому дизайну и зачастую субъективным пожеланиям генерального. К счастью, времена меняются, и появляется все больше сайтов, ориентированных на пользователя.
Анализ юзабилити сайта
Любые изменения следует начинать с анализа текущей ситуации.
С чего начать анализ юзабилити сайта?
Для начала определите портрет своей ЦА. Это важно для выбора формата подачи информации. Чем подробнее будет портрет, тем лучше. Вот отличный пример портрета ЦА, который мне как-то прислали:
Портрет покупателя (писался по данным опросов операторов колл-центра, курьеров компании):
| “Женщина, 33 года, замужем, один ребенок, в ближайший год-два появится второй (как минимум они будут с мужем стараться). Живет почти на окрайне Москвы (метро войковская) на семью есть одна машина, есть собака. Она русская, православная. Доход на семью около 80-100 т.р.. У нее часто болит спина (после родов особенно) она недовольна своими волосами (они выпадают и секутся), у нее есть проблемы со здоровьем по женской части.Она очень хочет выспаться, хочет секса, хочет быть хорошей женой, матерью и дочкой, хочет чтобы ей завидовали и мечтает переехать в свой дом или большую квартиру. Она боится остаться одна и боится старости, она переживает за детей и мужа и боится остаться без денег, еще она боится растолстеть, остаться без денег и сглаза, когда она делает покупки — она боится что ее обманут. Она позитивная (часто проявляет позитивные эмоции, воспринимает шутки), не скандальная (ей проще уйти, чем доказывать свою правоту), в целом, она не обращает слишком пристального внимания на товар перед покупкой (по крайней мере не лезет вовнутрь), она увлекается рукоделием (или хотя бы ей это интересно), имеет профили в соцсетях и активно ими пользуется. (Особенно после 21-30, после того как укладывает ребенка спать.) Ее часто можно встретить в ТЦ, поликлинике и на детских шоу (например «Фиксики» в Крокусе)” |
Сразу становится ясно, в какой форме лучше всего преподнести УТП для данной аудитории, да?
Но не стоит зацикливаться на одной аудитории. Помимо вашей основной ЦА, определите также и вторичную аудиторию — потенциальных сотрудников, партнеров и т.д.
Постарайтесь ответить на следующие вопросы:
- Почему люди приходят к вам на сайт?
- Что они ожидают найти на нем?
- И, наконец, что нужно сделать, чтобы им было проще это найти?
Оценивая сайт с позиции клиента, вы сможете быстро определить его недоработки.
Юзабилити дизайн сайта должен быть разработан, в первую очередь, для удобства пользователя. Не нужно перегружать страницу лишними, пусть и красивыми элементами!
- Обозначайте важные утилиты (вход/регистрация/условия доставки)
- Делайте меню с ориентацией по левому краю с углубленностью не более чем в 3 клика (категория/подкатегория/товар)
- Не перегружайте навигационное, верхнее меню, оно должно содержать максимум 5-6 пунктов.
Навигационное меню, пример оформления.
- Расположите корректно следующие 5 элементов на главной странице сайта:
1. Уникальное торговое предложение
Все ваши достоинства, сверхспособности и плюшки упакуйте в несколько емких, красивых предложений и поместите в центр экрана, чтобы посетитель сразу понял, что именно вы готовы осчастливить его долгожданной покупкой/услугой — вежливо, быстро и со скидкой!
Пример:
Как правильно составить и разместить УТП на сайте
2. Обзоры популярных товаров/услуг
Данный блок охватывает сразу несколько типажей покупателей. Он может привлечь как импульсивного покупателя — тип, который реагирует на яркий цвет объявления (интересный факт, выявленный в ходе анализа: лучше всего на импульсивную персону работает желтый и красный цвет, синий для мужчин), склонный совершать незапланированные покупки повинуюсь ежеминутному желанию.
Так же, эта подборка ориентирована на заботливого потребителя — тип для которого важны отзывы, рейтинг товара, тут отлично работает элемент: «Этот товар здесь не просто так, ведь многие уже купили его!»
Пример:
Не заставляйте покупателя думать!
3. Корзина
Не затрудняйте пользователю возможность совершить покупку. Не стоит чрезмерно увлекаться дизайном кнопки корзины.
Тут есть всего два правила:
- Она должна находиться в правом верхнем углу страницы.
- Она должна быть контрастной.
Пример:
Пример оформления кнопки «корзина» на сайте
4. Контактная информация
Клиент, пришедший на сайт, должен иметь возможность легко найти вас. Позвонить и спросить о наболевшем, уточнить наличие, наконец, оставить заявку по телефону, — дайте ему эту возможность!
Что нужно учесть:
- Не используйте разный цвет и размер шрифта при написании номера.
- Располагайте контакты в правом верхнем углу экрана.
- Укажите время для звонка.
Не надо так:
Код города указан шрифтом меньшего размера, это затрудняет восприятие
Лучше так:
Код города и основной телефон хорошо читаются
5. Поиск по сайту
Добавьте поле поиска в верхнюю часть главной страницы рядом с меню. Это сильно упрощает навигацию для пользователя. Данный блок будет полезен для типа логическая персона — такой пользователь подбирает товар по заранее отобранным характеристикам, точно знает, что именно ему нужно, уже провел сравнительный анализ, воспользуется поиском почти наверняка.
Пример размещения:
Добавьте поле поиска по сайту для логической персоны!
С помощью этих нехитрых рекомендаций вы сможете влиять на основные KPI главной страницы:
- Снизится процент отказов
- Увеличится время проведенное пользователем на сайте
- Вырастет количество просмотренных страниц
Меняйте сайт, упрощайте навигацию, тестируйте и делитесь результатами в комментариях!
Помните, что улучшение юзабилити — лишь первый шаг на пути к идеальному сайту! Не стоит забывать про SEO оптимизацию и контент-маркетинг, но об этом чуть позже 😉
Очень полезная и интересная статья. Спасибо, что поделились хорошим юзабилити сайта