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