Урок юзабилити №1: Общие принципы проектирования веб-сайтов

О предмете

Если в курсе XHTML/CSS вы изучили основные технологии разработки веб-сайтов, однако на данном этапе вам еще рано приступать к созданию полноценных коммерческих проектов. Недостаточно освоить правила работы с некоторым инструментом, нужно научиться его правильно применять. То есть вы уже знаете, "как" делать, но пока еще не очень представляете, "что". Веб-сайты подчиняются различным стандартам, и это не только стандарты разметки, такие как HTML4, XHTML, CSS, но и стандарты проектирования навигационной структуры, элементов пользовательского интерфейса и прочих деталей. Задумывались ли вы, почему ссылка на главную страницу сайта называется "Home", а не, например, "Main"? Почему в русскоязычных ресурсах ссылка на главную страницу называется "Главная", а не "Домашняя"? Скорее всего, при создании своего сайта вы увидели, как это выглядит на других сайтах, и решили, что так принято.

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

Некоторые могут подумать: на большинстве сайтов ссылки расположены в левой верхней части страницы, а я не хочу быть таким, как все, поэтому расположу их справа внизу. Действительно, это добавит сайту оригинальности. Правда, при этом многие пользователи попросту не найдут нужные ссылки, ведь они ожидают увидеть их в левой части страницы. Они же знают, что так принято, но при этом не подозревают, что попали на сайт оригинального человека. :) Поэтому иногда оригинальность оборачивается неудобством интерфейса. Конечно же, это не повод создавать шаблонные сайты, которых уже и так слишком много. Среди дизайнеров годами длится спор: что важнее - дизайн или удобство? Кто-то создает сайты, ничем не примечательные с точки зрения внешнего вида, но простые и удобные. Другие говорят, что это банально и скучно, и создают красивые проекты с такой сложной структурой и запутанной навигацией, что найти все разделы сайта может лишь его автор. Эстетическое удовольствие очевидно, но ведь такими сайтами невозможно пользоваться! Ими можно только любоваться, как картинами в галерее. Такй подход уместен для визитной карточки дизайн-студии, но для информационного портала или приложения электронной коммерции недопустим.

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

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

Эргономика - наука об удобстве пользования. В промышленном дизайне эргономика играет ключевую роль, ведь согласитесь, никто не купит кресло, в котором неудобно сидеть, даже если оно будет очень красивым. Никто не будет пользоваться компьютерной мышью с сотней кнопок, ведь их неудобно нажимать. То же самое относится и к веб-сайтам. Кто же будет пользоваться интернет-магазином, если непонятно, на что нужно нажать, чтобы просмотреть каталог товаров или способы оплаты. Эргономика веб-сайтов в англоязычной литературе называется usability. По-русски так и говорят - юзабилити. Отцом науки юзабилити является Якоб Нильсен, написавший на эту тему несколько книг и множество статей. Посетите его сайт www.useit.com (ресурс англоязычный).

Что такое юзабилити

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

У юзабилити есть пять количественных составляющих:

Обучаемость: насколько легко пользователи могут выполнить основные задачи, впервые встретившись с незнакомым им интерфейсом?
Эффективность: после того, как пользователи ознакомятся с дизайном, как быстро они могут выполнить то же задание?
Запоминаемость: После того, как пользователь снова вернется к интерфейсу через определенный промежуток времени, насколько легко ему будет восстановить свои навыки работы с данным интерфейсом?
Ошибки: сколько ошибок делает пользователь, насколько серьезны эти ошибки, насколько легко пользователь может исправить эти ошибки?
Удовлетворенность: насколько пользователю приятно пользоваться данным интерфейсом?
Помимо юзабилити существует еще множество других важных качественных признаков дизайна. Один из ключевых - полезность, который описывает функциональность дизайна и отвечает на вопрос: является ли интерфейс тем, что пользователю нужно? Юзабилити и полезность одинаково важны: какой толк в программе, пусть даже и удобной в использовании, если она не делает то, что вам нужно? Плоха и та программа, которая гипотетически делает то, что вам нужно, но вы не можете с ней работать из-за ее сложного интерфейса. Для изучения полезности программы вы можете пользоваться теми же методами, что и при изучении качества ее юзабилити.

Зачем это нужно?

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

Первое правило е-коммерции гласит:
если посетители не могут найти товар, они никак не смогут его купить.

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

Как создать эргономичный проект

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

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

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

Более подробно методика эргономической оценки веб-сайта будет рассмотрена в следующих уроках.