Шпаргалка оптимизатора. Выпуск 19: Юзабилити

Следующий выпуск «Шпаргалки оптимизатора» выйдет 20 августа, тема: Продвижение в Google

Задавайте вопросы нашим специалистам:

Twitter: #seolib
Facebook: http://www.facebook.com/pages/SeoLibru/129377607096335
E-mail: feedback@seolib.ru

В следующем выпуске они ответят на ваш вопрос.

Юзабилити

1. Где лучше размещать фильтр товаров? Сбоку или сверху? Как пользователю будет удобнее?

Единого правила нет. Нужно отталкиваться от количества критериев выбора и удобства.

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

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

Скриншот страницы http://appliances.wikimart.ru/small/microwaves/:

2. Сколько полей должно быть в форме обратной связи?

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

А. Коммерческий сайт (крупный интернет-магазин ulmart.ru):

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

Б. Информационный сайт (крупный новостной портал ria.ru):

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

В. Личный сайт (блог Сергея Кокшарова devaka.ru)

Личный сайт Сергея Кокшарова предлагает самую простую форму обратной связи из всех вышеперечисленных. Для отправки сообщения достаточно написать хотя бы одну букву.

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

3. На нашем сайте можно заказывать еду на дом. У нас есть 2 варианта, как поступить с корзиной:

а) Когда клиент нажимает «В корзину», ему высвечивается табличка «Пицца Классическая добавлена в корзину». Так со всеми товарами. Пока пользователь выбирает товары, содержимое корзины и стоимость он не видит. Для этого ему нужно скроллить наверх.

б) Пока клиент выбирает товары, корзина с содержимым и ценой отображается справа (плавающий блок), т.е. он постоянно видит, что у него в корзине и сколько это будет стоить.
Какой вариант лучше выбрать? Что будет удобнее? Мы склоняемся ко второму варианту, но думаем, не будет ли раздражать этот блок?

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

В данной ситуации вы можете выбрать компромиссный вариант.

Возьмем пример первого сайта в ТОПе по запросу «заказать пиццу в москве»:

Вид страницы с верхним блоком

Вид страницы при прокрутке вниз

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

4. При создании сайта или при реконструкции нужна ли консультация с юзабилити специалистом? И если да, то какие нужно задать ему вопросы, чтобы получить в итоге грамотный и логичный сайт? Сможет ли юзабилист сделать прототипы сайта? Нужно ли создавать ТЗ для юзабилиста?

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

Если вы только собираетесь делать сайт – вам нужно хорошо понимать свою целевую аудиторию, цели, которые должен выполнять сайт, функционал, требования к сайту. Всю эту информацию должен запросить у вас специалист. На основе этого вы создаете ТЗ (причем желательно делать его вместе с юзабилистом). Если вы хотите реконструировать сайт, важно указать слабые места сайта, о которых вы знаете, или в чем сомневаетесь.

Список вопросов юзабилиста может быть примерно таким:

1-2. Доступ к Яндекс. Метрика и Google Analytics
3. Распределение по возрасту:
— 18-24
— 24-35
— 35-50
— старше 50
4. По полу:
— мужской
— женский
5. По семейному положению
6. По наличию/количеству детей
7. По уровню доходов на 1 члена семьи
8. По месту проживания
9. Основные источники трафика на сайт
10. Какие рекламные мероприятия Вы проводите?
11. Откуда основные пользователи узнают о вашей компании?

В зависимости от тематики сайта, список вопросов может быть дополнен или наоборот – некоторые вопросы будут не актуальны. Так, например, если вы продаете электронный товар (необходимо пополнение счета), то возраст и пол не так важны, но важен опыт использования платежных систем.

5. На моем сайте сквозным блоком идет слайдер, не мешает ли это пользователю? Стоит ли вообще использовать слайдеры и в каких случаях?

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

  • где он расположен;
  • какую информацию он несет пользователю.

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

Если же у вас слайдер не мешает находить другую информацию на странице (пользователю четко видно меню, элементы навигации, кроме слайдера легко доступен для ознакомления основной контент); слайды содержат полезную информацию, например, о горящих скидках или какой-то акции и важных преимуществах вашей компании по сравнению с конкурентами, тогда слайдер весьма полезен.

6. Делаем интернет-магазин по продаже бытовой техники. Какой должна быть оптимальная страница оформления заказа?

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

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

Пример плохой реализации:

Очень хорошая страница, с которой можно брать пример, на rozetka.com.ua:

Запомните: чем меньше действий совершает покупатель – тем лучше.

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

Как нельзя:

Как нужно:

Предложите помощь при оформлении с помощью онлайн-консультанта. Пример реализации:

7. На наш товар цена меняется чуть ли не каждый день. Не знаем, как сделать лучше – менять цены каждую неделю или писать «Уточняйте цену»? При первом варианте переживаем, что люди будут ругаться на несоответствие цен, при втором – что будут уходить с сайта.

Согласны, оба предложенных вами варианта имеют недостатки.

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

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

8. Какая онлайн-форма связи с компанией удобнее всего: скайп, ICQ, онлайн-консультант?

На этот вопрос невозможно ответить однозначно — все зависит от вашей целевой аудитории.

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

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

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

Самое важное при использовании любой онлайн-формы или сервиса связи – это постоянное наличие оператора. Если вы не можете обеспечить оператора 24/7, то должны четко указать у себя на сайте, что оператор присутствует с такого времени по такое, в остальное время пользователи могут отправить письмо на почту. Соответственно, в период, указанный вами, оператор должен быть на месте и отвечать максимально быстро на все вопросы пользователей.

9. Какая информация должна быть на странице «О нас»? Фото – это обязательный элемент?

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

На странице «О нас» желательно подробно рассказать, кто вы и с какой целью создали этот сайт. Можно немного рассказать историю «вашего дела» или «вашей фирмы». Фотографии не являются обязательным атрибутом, но, само собой, люди больше будут доверять вашему сайту, если увидят что за ним стоят «реальные люди» или «реальные организации». Также компании иногда пишут о своих достижениях на этой странице – это тоже верно, так как важно не только рассказать о себе, но и преподнести себя с хорошей стороны.

10. Что должно быть в первом экране городского портала? Достаточно того, что будут только фото и меню? Или обязательно в первый экран должен попадать еще какой-то текст?

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

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

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

Пример первого экрана:

11. С какой стороны должно находиться меню с ассортиментом – слева или справа?

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

12. На нашем сайте кнопка «В корзину» и «Купить в один клик» на карточке товара находятся рядом и выглядят одинаково, это нормально? Не будет ли это путать клиента?

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

Пример хорошей реализации:

Предыдущие выпуски «Шпаргалки оптимизатора» читайте здесь.

На вопросы отвечали специалисты компании SeoLib.ru и Siteclinic.ru: Юрий Кушнеров, Евгений Аралов, Владимир Столбов, Александр Явтушенко, Никита Простяков, Андрей Рыбкин.