Иллюстрации: Артём Морозов

Что служит мерой юзабилити?

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

Но люди такие разные! Кому-то нравится, чтоб меню находилось сверху, кому-то — чтобы снизу. Кому-то нравится, когда ссылки подчеркиваются, а кому-то — когда выделяются цветом. Между тем, когда работаешь над большим проектом, довольно часто защищать дизайн приходится не перед одним человеком, а перед целой приемной комиссией. У каждого из ее участников в душе собственное чувство прекрасного, и наверняка они будут задавать вопросы и требовать обосновать принятые по интерфейсу решения. Ну и как же тогда улаживать конфликты? Как определять золотую середину? Совершенно очевидно, нужна какая-то объективная и понятная человеку мера качества выполненной работы. Что же может служить такой мерой в интерфейсах?

Время. Человеческое время.

Почему? Всё очень просто, как в жизни: чем задача проще, тем меньше времени нужно на её выполнение (ну, при том условии, что человек вообще настроен задачу решить). Ведь любой интерфейс построен на решении тех или иных задач, так? Вот и получается, что задача людей, работающих над юзабилити проекта, и заключается в том, чтобы сложные задачи упрощать настолько, насколько это возможно. А успешность их стараний как раз и обращается сэкономленным временем.

Как измерять время, не измеряя время?

Итак, время — это наша мера юзабилити. Здорово! Но что дает нам это бесценное знание? Ведь и без того понятно, что если мы сделаем удобный и проработанный интерфейс, человек при работе с ним будет тратить меньше времени, чем с менее удобным. Но вот какая закавыка — получается, чтобы понять, удалось ли нам разработать удобный интерфейс, нам нужно сначала его проверить на людях. И это, конечно, важно — проводить тестирование сделанного интерфейса, никто этого не отрицает, — но ведь должны же быть какие-то инструменты, позволяющие хотя бы примерно оценить сложность выполнения задачи до того, как её начнут оценивать пользователи. Ведь каждое такое тестирование — дополнительный расход. Собственные ощущения — штука весьма и весьма субъективная.

Как быть? Как измерять время, которое пользователь будет тратить на выполнение задачи, не измеряя этого времени?

В этом нам помогут пять действий, которые пользователь может выполнять в вашем интерфейсе:

5 ключевых действий на сайте

Балл, в данном случае, — это условная мера времени. Для того чтобы выполнить какую угодно задачу в вашем интерфейсе, пользователь так или иначе будет совершать эти действия. И соответственно, чем большее количество этих действий человек должен выполнить для решения той или иной задачи, тем большее число баллов задача получает и, соответственно, тем больше времени человеку понадобится на её решение.

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

А теперь давайте-ка разберемся, как это работает на практике!

5 действий в действии

Первым делом нам понадобится определить, какие задачи наш интерфейс позволяет решить! Рассмотрим абстрактный пример (примеры из жизни, к сожалению, закрыты договорами о неразглашении). Пусть этим абстрактным примером будет сайт по продаже котят.

Стартовая страница сайта.

Допустим, этими задачами будут:

  1. Знакомство с каталогом котят (подразумевается изучение пользователем всех позиций).
  2. Изучение профилей котят (подразумевается изучение 1 профиля котёнка).
  3. Покупка котенка.

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

Итак, давайте-ка рассмотрим каждое действие отдельности!

1. Знакомство с каталогом котят, ЗКК (всего на сайте 24 котенка, а на странице отображается по 8)

Так выглядит страница каталога котят.

Наводим мышкой на нужный пункт меню, кликаем, страница перегружается, изучаем страницу, скроллим, наводим мышку на ссылку «следующая страница», снова кликаем, изучаем страницу, снова скроллим, наводим мышку на ссылку «следующая страница» снова кликаем, изучаем страницу, снова скроллим, снова кликаем. Каталог изучен. Получается:

2. Изучение профиля котенка

Так выглядит профиль котенка.

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

3. Покупка котенка

Чтобы купить котенка, придется перейти на страницу заказа.

Котенка мы покупаем только после того, как изучили его профиль, так? Вот что получается: нам нужно теперь после изучения профиля, навести мышку на кнопку «Купить» и кликнуть на неё. После этого мы попадаем на страницу оформления товара, где мы заполняем необходимые поля (ради этого дополнительных действий вводить не будем, просто примем, что на это у нас уйдет примерно 20 баллов), вслед за чем мы жмём на кнопку «Оформить заказ» и, вуаля, готово! Заявка отправлена и на это действие мы потратили:

Собираем всё в таблицу:

Задачи Количество баллов
Знакомство с каталогом котят 42
Изучение профиля котёнка 53
Покупка котёнка 89

Ну что? Вроде бы не так уж плохо? Возможно. Если вам совершенно наплевать на то, как жаждет наш пользователь поскорее повстречаться со своим замечательным котенком!

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

Проведем ревизию задач!

1. Изучение каталога котят

Начнем с каталога. Чтобы ознакомиться с каталогом котят, нам пришлось выполнить 2 группы действий:

  1. Переходить в каталог с главной страницы — эту группу действий можем убрать целиком! Раньше на главной странице была информация о компании, но будем реалистами. Люди пришли на сайт за котами, и мы должны дать им котов, как можно скорее. Таким образом, каталог котят переносится на главную страницу.
  2. Просматривать каталог страницу за страницей. 8 котят на страницу — слишком мало! Лучше выводить их по 25 штук, а по возможности даже всех скопом (в данном случае — это одно и то же).
  3. Добавим фильтр! Это позволит людям, которые уже знают, что им нужны белые персидские котята, быстрее находить необходимого симпатяжку!
Так выглядит каталог на сайте после доработки.

Итак, что нам дали эти нехитрые манипуляции? Сколько действий человек теперь должен выполнить, чтобы ознакомиться с нашим каталогом? А всего ничего — просто 3 раза проскроллить страницу и чуть больше времени потратить на изучение материала на странице:

А раньше было ЗКК = 42 балла.

То есть, наши нехитрые манипуляции позволили нашим посетителям изучать каталог в 2 раза быстрее!

2. Изучение профиля котенка

Здесь мы можем дать человеку возможность изучать профиль котёнка, не уходя со страницы каталога, а во всплывающем окне. Это позволит нам выкинуть из формулы перезагрузку страницы. Сэкономили ещё 5 баллов!

Профиль котенка не такой уж сложный, его вполне можно уместить во всплывающем окне!

3. Покупка котенка

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

Оформление заказа тоже спрячем во всплывающем элементе!

Итак, имеем два случая покупки: «экспресс-покупку» одним кликом прямо из каталога и покупку из профиля котенка:

В первом случае мы сэкономили примерно 39 баллов на действие. А во втором — около 30 баллов, что тоже недурно.

Давайте-ка ещё раз посмотрим на таблицу:

Собираем всё в таблицу:

Задачи Количество баллов
(было)
Количество баллов
(стало)
Экономия
Знакомство с каталогом котят 42 21 21 (50%)
Изучение профиля котёнка 53 28 25 (47%)
Покупка котёнка 89 Экспресс-покупка = 50 баллов 39 (43%)
Обычная покупка = 59 баллов 30 (33%

Выводы

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

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