ДизайнЮзабилити. Mouse tracking, Eye tracking и тестирование.

Так, интерфейс мы уже создали (надеюсь мои вопросы вам в этом помогли), теперь настало время продемонстрировать его массам. А? Что вы говорите? Я говорил про тестирование? Точно!

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

Но давайте разберёмся, как же всё-таки можно выявить недостатки с точки зрения юзабилити. Взглянем в заголовок, и ответ придёт сам. Существует 2 вида тестирования, может уже кто-то что-то новое изобрёл, но я реально не в курсе (© Бородач), ибо предложенные ниже методы справляются с задачами просто на ура.

Начнем с mouse tracking.

По сути своей mouse tracking представляет собой отслеживание движений и кликов мыши. На основе полученных данных строится тепловая карта сайта. Она отлично помогает выявить слабые места. Всё просто и наглядно:смотрите куда пользователь клацал и сравниваете с тем, куда бы вы хотели, чтобы он клацал.

temp_site.jpg
Как выглядит тепловая карта

Например вы определили, что пользователи часто кликают по ссылке "О нас", и не замечают формы контактов, следовательно не могут связаться с вами или сделать заказ. В свою очередь - это означает, что форму необходимо воткнуть на более видное место.

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

link_site.png
А вот и карта ссылок

Вот, собственно и всё. А что вы хотели, всё прозрачно, как грабли. Лучше я больше времени уделю второй части нашей программы.

А, вот ещё что, среди хороших инструментов для данного занятия могу посоветовать Яндекс метрику и Google analitycs, по ссылкам вы попадёте на презентацию продукта, где подробно и ясно описаны все доступные возможности, так что я не буду заострять на этом внимание.

Из положительных сторон данной методики я отмечу:

  • Большое количество резидентов тестирования. То есть данные носят массовый характер и описывают поведение большинства.
  • Дешевизна. Ведь вы не тратите ни рубля, просто копируете скриптик, а инструмент сам всё собирает, парсит и выводит в виде красивого отчёта.
  • Наглядность и простота.

Ну а к отрицательным я отнесу:

  • Неадекватность. Mouse tracking просто показывает, куда тыкали пользователи, но не объясняет почему. Вдобавок анализируется поведение мыши, а не человека. Компьютеру пока далеко до чтения мыслей, а посему, он анализирует только то, что может. Если пользователь задержал мышь на одном месте, то это не значит что он туда смотрит.
  • Большое количество резидентов тестирования. Что? Это уже было в плюсах? Но это и минус, ведь мы не можем определить, зачем пользователь зашёл на сайт. То есть не можем отфильтровать случайных зевак, от наших "клиентов".
  • Узкая направленность. Mouse tracking можно использовать, увы, только там, где есть мышь. А если быть совсем точным, то самый-самый большой кусок от всех, проводимых таким методом, исследований приходится на web.

Eye tracking.

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

В классическом понимании eye tracking - это отслеживание движения взгляда пользователя. То есть реального поведения пользователя при работе с UI. В сравнении с тем же самым mouse tracking'ом, он значительно дороже (нужно оборудовать комнату для тестирования, купить ПО, потратить своё время и время субъекта тестирования), да и объём выборки в десятки, если не тысячи раз меньше. Однако при всём при этом, результат всегда точен!

Далее я буду рассматривать eye tracking не в классическом понимании, а немного модернизированном. Навороты эти помогут не только отследить движение взгляда, но и (самое главное) понять мотивы пользователя, почему он поступил так, а не иначе.

Вижу, как горят ваши глаза! Вы готовы надрать задницу багам юзабилити? Хорошо, тогда поехали.

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

test_ilove.png
Не очень внушительно

Хорошо, теперь у нас есть что тестировать, осталось разобраться как. Вы ещё не забыли, что мы рассматриваем юзабилити, как удобство использования пользователем чего-либо. А это значит, что нам нужны тестировщики - простые, среднестатистические пользователи нашего продукта. А нужно их всего-ничего: 3 человека. Почему так мало? Потому как это оптимальное сочетание "Количество выявленных недостатков - Затраченное время". Поясню: с каждым новым участником вы будете сталкиваться со всё большим количеством проблем, которые уже были изобличены, а значит будете всё больше времени тратить впустую.

Далее, нам следует определится с целями, которые должен предоставлять наш интерфейс. В моём случае - это продавать услуги данной организации (ребрендинг, предоставление брендов для старт-апов, фирменные стили). Сейчас, как мы видим, этого не происходит, но мы постараемся это исправить.

Цели готовы, двигаемся вперёд. Возьмите лист бумаги и составьте список из 5 - 10 задач, которые обеспечат выполнение ваших целей. Например: чтобы пользователь захотел работать с организацией, ему нужно узнать, что они из себя представляют. Значит задачей будет: Получение информации и о компании.

Вы пишите, не отвлекайтесь. Готово? Хорошо. Теперь лёгким движением мыши превратите эти задания в сценарии для ваших подопытных. Под сценарием я подразумеваю моделирование ситуации, при которой пользователь должен будет выполнить задачу из вашего списка. Старайтесь не давать никаких подсказок, пользователь должен будет работать самостоятельно.

Пример:

  • Задача - Получить информацию о компании
  • Сценарий - Вы хотите заняться своим собственным делом. Знакомый сказал, что знает, где вам могут помочь и дал ссылку на ilovebrand.ru . Проверьте правдивость данной информации и узнайте, чем именно занимаются владельцы сайта.

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

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

Как проходит само тестирование.

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

При этом, вы должны быстрёхонько записывать все проблемы, с которыми столкнулся наш испытуемый. Поверьте, писать придётся много. И не забывайте сохранять нейтралитет: не давайте пользователю подсказок, только пояснения, если они требуются, не выдавайте правильное направление эмоционально. Говорить должен пользователь, не вы. Вы пишите.

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

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

  • 1) Возникает ощущение незакончености
  • 2) Не понятно, чем занимаются владельцы сайта
    • На главной соорудить разъясняющий контент (это может быть и текст и поясняющие иллюстрации)
  • 3) Пользователи ожидают другой контент на главной странице
    • Добавить новости
    • Развернуть заголовки работ
    • В самой работе сделать ссылку "назад"
    • Слайдшоу со следующими работами
    • Обрамить картинки
  • 4) Меню теряется, как и блоки справа
    • Добавить пункт «О нас»
    • Убрать пункт «ilovebrand» он вводит в заблуждение
    • Добавить пункт «Портфолио»
    • Перенести «Контакты» в меню
    • Переименовать «Алгоритм воплощения», сделать короче «Как мы работаем»
  • 5) Невозможно сделать заказ на услугу
    • Добавить кнопку или заметную ссылку
  • 6) В отзывах нет выполненной работы, непонятно, за что благодарят
    • Добавить выполненные работы
    • Добавить отзывы с других ресурсов
    • Также возможно добавить в портфолио пункт «Как это делалось»
  • 7) Добавить больше информации о себе
    • Возможно разместить фотографии не вертикально, а горизонтально. А под ними написать кратко о себе.
  • 8) Добавить поиск

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

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

Всем спасибо, все свободны.

Комментарии

Аватар пользователя Inglar
Inglar написал:

☺ живые примеры это всегда классно -)))

вот мои наблюдения:
1. пункт Lovebrands: переименовать в "Главная"
2. пункты верхнего меню сделать белого цвета
3. вертикальное меню: сделать шире
4. при активном пункте меню - underline
5. Картинки в тизерах по щелчку должны вести на фулл статью (как на этом сайте)
6. Ну и может пунктир пустить в конце каждой статьи что бы визуально разделять

но какой то голый сайт

25.11.2011 21:06
Аватар пользователя Smouk
Smouk написал:

Мои комментарии:
1) Лучше вообще убрать, эту функцию уже выполняет лого.
2) Согласен
3) Лучше вообще убрать ;)
4) Само собой разумеется )))
5) Полностью согласен
6) разделители - хорошая идея, но я вообще контент переоборудую главную ))

Голый - голый )))

25.11.2011 22:13
Аватар пользователя SeeSeven
SeeSeven написал:

Благодарю за статьи о Юзабилити :) . Много полезного.

22.02.2012 21:03
Аватар пользователя Гость
Гость написал:

чудно

22.08.2013 15:20

Комментировать