Юзабилити (usability) сайтов

13 февраля наш сотрудник Денис Есаков выступал с презентацией "Юзабилити (usability) сайтов" в стиле Pecha Kucha для Empatika Open. Публикуем презентацию для ознакомления.

Скачать презентацию "Юзабилити (usability) сайтов" (*.pps), ~5Mb

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

Откуда ноги растут?

Термин "юзабилити" - это английское скрещение слов "use" и "ability", что в переводе на русский буквально означает "возможность использовать". Понятие "юзабилити" рассматривается в данной статье исключительно относительно пользовательских интерфейсов, а именно сайтов. В круг вопросов, которые охватывает юзабилити, также входит задача повышения производительности работы с сайтом как посетителей, так и обслуживающего персонала. Сайт должен быть не только удобным, но и нетребовательным к пользователю - минимум усилий для достижения поставленной цели.

Пользовательский интерфейс

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

Пользовательский интерфейс (UI - user interface, или GUI - graphical user interface) - это внешний вид сайта, а также все его элементы, которые оказывают влияние на взаимодействие с пользователем. В настоящее время чаще всего применяется и считается стандартом графический пользовательский интерфейс WIMP.

Графический интерфейс WIMP

WIMP - Window, Icon, Menu, Pointing device - Окно, Иконка, Меню, Манипулятор. На базе этих элементов и строится взаимодействие пользователя с программой, в нашем случае с сайтом.

Концепция DWIM

Одним из требований к хорошему сайту является концепция "делай то, что я имею в виду" или DWIM (англ. Do What I Mean). Концепция DWIM требует, чтобы система работала предсказуемо. Пользователь заранее интуитивно должен понять, что произойдет на сайте после того, как будет нажата та или иная ссылка.

Следует отметить тот факт, что интернет - это уже давно отнюдь не профессиональная среда и большинство пользователей всемирной сети - любители. Этот факт учитывается разработчиками программного обеспечения при создании программ-редакторов web-страниц. Они используют концепцию WYSIWYG (What You See Is What You Get, "что видишь, то и получишь") для упрощения процесса создания и редактирования сайтов.

В случае с web-сайтами, в облако тегов, описывающих пользовательский интерфейс, я дополнительно включаю следующие понятия:

• средства отображения информации (браузеры, Flash-плеер и пр.);
• устройства и технологии ввода данных (мышь, клавиатура, кнопки мобильного, стилус, экранная клавиатура и пр.);
• диалоги с пользователем (при отправке заказа и прочих действий пользователь должен получить FeedBack - заказ получен/обработан и пр.);
• обратную связь с пользователем (e-mail, форум, ICQ, телефон).

При анализе юзабительности сайта необходимо все это принимать во внимание.

Accessibility - доступность сайта

Одним из важнейших пунктов юзабилити сайта является оценка accessibility. Accessibility (от англ. "доступность") - доступность сайта для пользователей с различными органическими или техническими ограничениями. Хороший сайт должен быть одинаково доступен большинству пользователей: в различных браузерах (кроссбраузерность - одинаковое отображение в различных браузерах), при различных разрешениях экрана, на различных устройствах, а также в регионах с малой скоростью интернета.

Аффорданс

Еще одно понятие, которое необходимо ввести, прежде чем окончательно перейти к основной теме - юзабилити сайта - это аффорданс. Аффорданс (англ. affordance от afford - иметь или предоставлять возможность) - "приглашающее" (манящее) качество воспринимаемых предметов и событий. Это понятие ввел американский психолог Джеймс Гибсон в своей теории восприятия. А не так давно Дональд Норманн (консультант крупнейших технологических компаний - AT&T, Hewlett-Packard, Apple) ввел понятие "affordance" в сферу проектирования интерфейсов. Это загадочное слово трактует свое значение как ситуация, при которой объект показывает человеку способ своего использования своими же свойствами. Проще говоря, это когда посмотришь на предмет, и он сам тебе подсказывает, как его использовать.

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

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

Примерами аффорданса на web-сайтах являются поисковая строка, правильно оформленная текстовая ссылка (четыре состояния - link, visited, active, hover).

Итак, резюмируем: прежде чем создавать сайты необходимо понимать, что такое пользовательский интерфейс (UI), к каким стандартам UI привыкли пользователи, что такое DWIM, accessibility и аффорданс. Разобрались с основами - теперь переходим к юзабилити сайтов.

Юзабилити, или зачем делать сайты удобными

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

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

Примером хорошего юзабительного сайта может послужить сайт поисковой системы Яндекс:

Что тут удобного?

• ссылки полного цикла - все состояния - link, visited, active, hover);
• строка поиска в центре - это центральный вектор развития компании;
• дополнительные сервисы сгруппированы и снабжены иконками для улучшения восприятия;
• блок служебных ссылок в "подвале" сайта.

Все, что необходимо, помещается на так называемом "первом экране", хорошо сгруппировано, не перегружено графикой и интуитивно понятно.

Что должен сделать посетитель на вашем сайте?

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

По статистике LiveInternet, 20% посетителей просматривают не более трех страниц сайта, еще 30% просматривают от четырех до двадцати страниц. Оптимальный вариант - три клика. За три клика посетитель должен найти на сайте то, за чем он пришел. Если сайт продвигается с пониманием того, зачем это нужно Вам, то это Ваш целевой посетитель, и он пришел за тем что Вы хотите ему предложить.

Чтобы посетитель нашел то, за чем он пришел, необходимо опубликовать УТП (уникальное товарное предложение) на главной странице. Если предложений несколько, нужно разбить их на группы, создать для каждой группы отдельную страницу с подробным описанием. А на главной странице опубликовать короткие анонсы предложений со ссылками на нужные страницы.

Акцентирование

Акцентирование - один из способов добиться необходимого действия, подсмотренный в печатной рекламе. Не так давно один туристический портал провел эксперимент: разместил на главной странице сайта фото симпатичной девушки, смотрящей вбок к центру страницы. Рядом с головой девушки располагалась важная ссылка "Горящие туры", но взгляд девушки был устремлен ниже. И ссылку мало кто замечал. Фото девушки было переделано таким образом, что взгляд был направлен именно на эту ссылку, в итоге кликабельность данной ссылки возросла в разы.

Что требуется от хорошей системы навигации?

Основой навигации на сайте является меню. Подробное меню, хорошо выделяемое на фоне остального содержимого сайта. Такие элементы как ссылка на главную страницу, на карту сайта, контакты лучше оформить в виде небольших пиктограмм и вынести в "шапку" сайта, облегчив меню. Для сайтов от пятидесяти страниц желательно сделать подробную карту сайта в виде многоуровневого списка страниц и реализовать механизм "хлебные крошки". "Хлебные крошки" (англ. BreadCrumbs) - навигационная цепочка, представляющая собой путь от главной страницы до текущей. Выглядит следующим образом:

    Главная страница -> Категория -> Подкатегория -> Текущая страница

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

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

Юзабилити-тестирование

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

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

Исследование Eye-traking

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

Сейчас используют более совершенную технику: камеры Tobii (X120, T60); они светят в глаза человеку инфракрасным светом, который не виден, а отраженный от зрачков свет попадает обратно в камеру. Таким образом камера фиксирует движение глаз. Полученные данные дают точную карту передвижения глаз по объекту, по сайту.

Подобное исследование провели в прошлом году компания UsabilityLab совместно с компанией "Ашманов и партнеры" - "Исследование поисковых систем с применением технологии eye-tracking - 2009".