Цель данного мероприятия – обеспечить эффективное взаимодействие между органами власти и разработчиками продукции в сфере безопасности.

На конференции в частности мы представим заинтересованным участникам GUI Machine. Постараемся рассказать о продукте и о его преимуществах, ответить на возникшие вопросы.

Если вы еще не зарегистрировались на конференцию, то это можно сделать здесь.

Теперь стоимость однопользовательской лицензии составляет 100$ (старая цена 549 евро).

Стоимость однопользовательской лицензии с сопровождением и обновлениями в течение года составляет 130$ (старая цена 569 евро).

Последующее ежегодное продление сопровождения и обновления – 40$.

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

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

Какую задачу ставит перед нами заказчик? В подавляющем большинстве случаев это – проектирование интерфейса в рамках существующего ТЗ. Техзадание, как правило, это объемный подробный документ, где, (по RUP, например) зафиксированы все бизнес-роли, сценарии (use-cases), функции системы. В большинстве случаев – информационная структура, часто прописаны форматы тех или иных данных (длина и тип полей, например). Бывает, что в том или ином объеме даже отрисованы экранные формы.

Но позвольте! Какой интерфейс я могу разработать, действуя в этих рамках? Жонглировать кнопками? Заниматься раскраской экранов? Скорее всего, полноценная работа юзабилити-специалиста выйдет за рамки ТЗ: будут предложены изменения в структуре системы, возможно – , функционале, не говоря уж об экранных формах.

Однако ТЗ – совершенно необходимая часть мало-мальски серьезного проекта. Это перевод неявных и плохоструктурированных ожиданий и «хотений» на четкий и однозначный технический язык. Такой перевод необходим для:

• Нормального планирования и контроля работы в ходе проекта;
• Фиксации объемов работ, а значит – сроков и стоимости (во многих проектах составление ТЗ является нулевым этапом и стоит отдельных денег);
• Формирования контрольного списка условий, по которому заказчик принимает работу.

Ведь что хочет заказчик (не ИТ-директор со стороны заказчика, а именно бизнес-заказчик)? Решения таких-то и таких-то проблем на таких-то и таких-то условиях. Вроде: «С помощью Системы мои сотрудники должны быстро и без ошибок фиксировать все данные по договору, проводить его по жизненному циклу, и создавать ежемесячные отчеты для меня».

Это очень общее и неточное описание, и на основе этого нельзя ни спланировать, ни выполнить работу. Поэтому за дело берутся бизнес-аналитики, системные аналитики, менеджер проекта. На свет появляется ТЗ. И там уже написано: «…Система должна базироваться на такой-то архитектуре, БД – содержать столько-то записей, сущность «договор» – такие-то поля такого-то типа…». ТЗ подписывается сторонами.

Проект закончен. Система сдается. И вдруг начинаются проблемы. Заказчик начинает придираться. Причем, на взгляд разработчиков, совершенно безосновательно. Архитектура соответствует ТЗ? Соответствует! Все вот эти поля есть в системе? Есть! Формата такого? Да, именно такого! Все как в ТЗ, которое согласовано и подписано! Так в чем же дело?

А дело в том, что в процессе перевода «хотений» в ТЗ произошла подмена бизнес-задач, которые должна решать система, ее техническими характеристиками.

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

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

Игнорировать ТЗ невозможно, и желание внести в него изменения встретит резкое неприятие разработчиков: на этот документ потрачены ресурсы, и, самое главное, он (часто с боем) подписан у заказчика. Кроме того, изменения могут привести к переоценке затрат на проект, чего также никому не хочется: утверждать смету – нелегкая задача.

Как же подружить ТЗ и интерфейс?

Очень просто: разрабатывать интерфейс ДО описания технических параметров проекта в ТЗ.

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

ТЗ, конечно, необходимо. Но часто бизнес-заказчику оно ни к чему, для него оно – филькина грамота. И теоретически оно вообще может ему не показываться.

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

Но абсолютного счастья нет. Какие минусы у данного подхода? Вот два самых явных:

• Увеличивается начальная стадия проекта – время до окончательной фиксации условий работ;
• Возрастает стоимость «нулевого» этапа – за счет внедрения процесса разработки интерфейса.

Время и деньги – одни из самых критичных параметров проекта, и, не смотря на то, что ОБЩИЕ затраты на проект ПРАКТИЧЕСКИ ВСЕГДА снижаются, необходимость сразу же платить больше и ждать дольше (первых результатов) редко вызывает положительные эмоции у заказчика.

Противопоставить этому можно следующее:

Во-первых, взывать к логике заказчика, и расписывать ему все прелести юзабилити вообще и данного подхода в частности. Практика показывает, что это работает отнюдь не всегда: плюсы – оно, конечно, хорошо, но и денег СРАЗУ надо давать, а польза все же не очевидна. Ситуация медленно меняется с ростом общей «юзабилити-грамотности» населения: желание взять денег за интерфейс уже редко считают попыткой «развести». И здесь хорошо работают «success stories», особенно подтвержденные количественными данными.

Во-вторых, нужно выпячивать те «вкусности», которые заказчик лично получит в течение проекта. Это – чёткое представление о будущей системе и ее визуализация – в виде прототипа(ов), либо отдельных шаблонов (и/или документации). А это – очень важный момент и для разработчиков в том числе. Этим мы добиваемся согласованности ожиданий от результатов проекта, и практически избавляемся от разговора на разных языках при его сдаче.

Очевидно, что все эти приемы надо применять вместе, да еще и широко улыбаться и вкусно пахнуть при этом.

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

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

>>> Ссылка на источник <<<

>>>Скачать презентацию в pdf<<<

При общении с коллегами частенько скатываешься на тему обсуждения проектов и заказчиков. Иногда все получается «как по маслу»: тебе доверяют и твои решения легко принимаются и командой, и заказчиком; а иногда приходится буквально сражаться за каждую идею. Почему? Тут можно много и долго говорить, а можно просто сказать, что в первом случае заказчики или проектная команда «созрели». Если они «созрели», то работается намного продуктивнее и интереснее.

Года полтора назад, прочитав вот эту и эту статьи Якоба Нильсена, я так определил для себя степени зрелости компании к внедрению юзабилити:

Уровень 0: О юзабилити только где-то слышали или вообще не слышали

Уровень 1: Использование базовых юзабилити-методов в тестировании (контрольные списки, простейшая инспекция, проверка доступности…)

Уровень 2: Уровень 1 + внедрение проектирования интерфейсов и их графического дизайна

Уровень 3: Уровень 2 + простейшее “партизанское” пользовательское тестирование, исследование пользователей

Уровень 4: Создание собственного отдела юзабилити, юзабилити-лаборатории.

Казалось бы, все просто. Добиться создания отдела юзабилити – и вы уже сразу на четвертом уровне. Если бы так. Ну вот, у вас, к примеру, есть юзабилити лаборатория, а пользоваться ею вы и ваши сотрудники умеете? (Если не было предварительного опыта, только где-то через год у вас начнет что-то получаться)

Зрелость относится не только к компании, но и к отдельным специалистам, и к отделу в целом.

Эрик Шаффер пишет о том, что для того, чтобы специалист по юзабилити сумел работать на уровне, достаточном для независимой работы, требуется базовое образование и 3 – 5 лет работы на проектах соответствующего качества вместе с хорошим ментором. В наших реалиях эти сроки меньше, но объявления о поиске Usability Expert с опытом работы «от 1 года», по крайней мере, вызывают чувство недоумения.

Точно так же, как взрослеет отдельный специалист, взрослеет и отдел юзабилити целиком. Требуется время на освоение на должном уровне каждого нового метода, чтобы он заработал на 100%, на построение процесса внутри организации. Чем больший уровень развития, тем больше усилий и времени требуется для перехода на следующий. И срок тут идет скорее на годы, чем на месяцы. У Якоба Нильсена весь путь юзабилити взросления организации занимает порядка 20 лет.

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

Амели Буше (Amélie Boucher)

От переводчика

В печатных изданиях и в Интернете можно найти немало публикаций по различным частным аспектам проблематики юзабилити. Работ, посвященных анализу теоретико-методологических основ юзабилити, появляется значительно меньше. Мы хотели бы восполнить этот пробел и начать серию публикаций, в которых вопросы компьютерной эргономики рассматриваются на стыке различных областей знаний: технической эстетики и дизайна, психологии, философии техники…. Публикации будут включать как переводные, так и наши собственные исследовательские материалы.
Для начала мы хотели бы предложить вниманию наших читателей статью французской исследовательницы Амели Буше «Эргономика и красота». Работа была написана еще в 2004 году, однако затронутые в ней вопросы не утратили своей актуальности и сегодня. Что важнее: красота или функциональность? Каковы критерии красоты и эстетичности применительно к программным продуктам? Какую роль играет пользовательское восприятие чисто эстетических аспектов ПО в формирование представлений о его функциональности?
Надеемся, что предлагаемые статьи вызовут интерес читателей и станут предметом продуктивного обсуждения.

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

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

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

Удобство и красота — вещи взаимосвязанные

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

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

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

Эстетика на службе юзабилити

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

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

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

(1) функциональные элементы, поддерживающие взаимодействие человека и компьютера (кнопки, иконки и т. п.).

(2) декоративные элементы, роль которых заключается лишь в том, что они делают интерфейс красивым, приятным для глаз.

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

Существует, однако, и другое мнение. Одним из его приверженцев является Дональд Норман — известный специалист как в области дизайна интерфейсов, так и в области психологии. Он считает, что эстетическая привлекательность существенно повышает удобство в работе, делает сам процесс взаимодействия человека и машины приятным. «Aesthetics matter: attractive things work better” («Эстетика важна: вещь красива — значит, нужна»), – пишет Норман.

Эстетика для эстетики

Скажем несколько слов в защиту красоты-самой-по-себе, существующей как дополнение к функциональности. Чисто визуальные элементы могут не приносить никакой ощутимой пользы, увеличивать информационную плотность и время загрузки веб-страниц; кроме того, иногда они отвлекают внимание от важных вещей. Все это, однако, не умаляет той пользы, которую могут принести декоративные элементы. Уже упоминавшийся выше Дональд Норман так пишет о роли цвета в восприятии интерфейса пользователем: “Although my reasoning told me that color was unimportant, my emotional reaction told me otherwise” (Хотя разум говорил мне, что цвет не важен, моя эмоциональная реакция свидетельствовала о другом).

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

Эстетика и функциональность: материалы психологических исследований

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

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

Природная тяга к красоте

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

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

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

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

Юзабилити — не только и не столько удобство использования

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

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

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

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

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

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

What is beautiful is good: роль эстетического фактора в оценке функционального удобства ПО

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

Знания о формировании впечатления на основе физической информации можно и нужно использовать при создании интерфейсов. Можно высказать предположение о том, что внешний вид интерфейса приводит нас к выводам о том, что он обладает теми или иными характеристиками, удобен или неудобен в работе и т. п. Для иллюстрации влияния на формирование эстетической привлекательности вещи на формирование субъективных представлений о качестве приведем еще одну цитату из Дональда Нормана: “Wash and polish your car – doesn’t it drive better?” (Отмойте свою машину до блеска — разве она не ездит лучше?) В формировании представлений об удобстве той или иной вещи большую роль играет чувство удовлетворения от ее использования. Представления об удобстве интерфейса во многом обусловлены его эстетической привлекательностью. Создание действительно удобных в использовании приложений невозможно без тесного сотрудничества разработчиков со специалистами по эстетике и дизайнерами.

Первоисточник

Патрик Кокс (Patrick Cox)

От переводчика

Продажи смартфонов и планшетов растут с каждым днем, и это уже говорит о необходимости повышенного внимания к интерфейсам для мобильных устройств. На каких принципах должен основываться дизайн приложений и сайтов для мобильных девайсов? Как удовлетворить все запросы пользователей, которые становятся все более и более требовательными?
По имеющимся прогнозам, в течение 2011 года объем продаж планшетов существенно возрастет, а объем продаж смартфонов существенно превысит объем продаж телефонов традиционного образца. Как показывает практика, пользователи предпочитают приложения для веб-навигации, уже установленные на телефоне, специальному программному обеспечению, которое нужно специально покупать или скачивать. Что это означает? В первую очередь — то, что в настоящее время перед веб-разработчиками и дизайнерами стоит задача учета особенностей мобильных устройств. Задача, следует заметить, не самая простая (см. статью известного специалиста в области веб-дизайна Якоба Нильсена «Мобильный контент: вдвойне сложнее» – http://www.useit.com/alertbox/mobile-content-comprehension.html, русский перевод- http://itopti.livejournal.com/2578.html, а также множество примеров дизайна на сайте http://www.mobileawesomeness.com/).
Специалист по юзабилити Патрик Кокс сформулировал 10 принципов, на которых должна основываться разработка мобильных приложений и сайтов http://www.ergonomie-interface.com/mobile-tactile-nomade/conception-site-web-mobile/). Приглашаем читателей к обсуждению; будем рады, если кто-то сможет поделиться собственным опытом проектирования интерфейсов для мобильных приложений.

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

Практические рекомендации:

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

2. Используйте тэги для обозначения типа содержимого: например, em для подчеркивания или abbr для обозначения аббревиатуры. Подробный список тэгов см. здесь: http://www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage/

3. Пользуйтесь тэгом div только для выделения больших блоков материала, связанных друг с другом. Для выделения отдельных абзацев пользуйтесь специальными тэгами: ul для составления маркированных списков, span для выделения небольших блоков содержимого.

4. Помните о том, что семантическая паутина – это способ организации содержания, к стилю не имеющий никакого отношения.

Четко формулируйте задачу

Мобильная версия сайта должна быть предназначена для решения ограниченного числа задач. При ее создании необходимо особенно четко формулировать цели. Если место для сайта уменьшается на 80%, то и от 80% намеченных планов также придется отказаться. Функциональность мобильной версии сайта существенно ограничена по причине небольшого размера экрана. Например, в версию сайта для большого экрана можно запросто включить такие функции, как реклама новых продуктов компании, просмотре личных сообщений, заполнение небольших контактных форм, индикация последних сообщений в Твиттере и т. п. Но для мобильной версии такой вариант не годится: разместить все это на экране смартфона вряд ли получится. Уменьшение размера элементов содержимого — тоже не выход: не будет же пользователь просматривать сайт через увеличительное стекло!
Выход один: ограничиться наиболее необходимыми функциями, чтобы для них хватило места на экране.

Пример: сжатое и ясное представление информации на сайте (мобильная версия портала http://bluemountain.ca/ ).

Практические рекомендации:

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

Избегайте перезаполнения!

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

Пример: упрощенная и хорошо организованная горизонтальная навигация (http://m.journeys.com/) .

Практические рекомендации:

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

Не используйте выделенного состояния!

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

Практические рекомендации:

• Для обозначения ссылок используйте кнопки, а не подчеркивание текста.
• Обозначайте доступ к более подробному содержимому при помощи стрелок.
• В оформлении кнопок пользуйтесь оттенением и рельефными линиями.
• Используйте знакомые и понятные иконки. Избегайте иконок непривычного вида для обозначения типов действий («добавить», «изменить», «назад», «вперед» и т. п.)

Пример: удачный вариант дизайна навигационных кнопок.

Пишите крупным шрифтом, просто и понятно

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

Практические рекомендации:

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

Пример: подача информации в виде кратких и емких текстовых блоков

Используйте элементы содержимого сайта в навигации

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

Практические рекомендации:

• Пользуйтесь списками меню для перехода к подменю или другим экранам.
• Проектируйте сайт как галерею экранов; применяйте творческий подход к организации прогулки посетителей по этой виртуальной галерее.

Пример: организация мобильной версии сайта как виртуальной галереи (сайт американской рок-группу Neon Trees).

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

Пример: минимум цветов и контрастность — залог удачного дизайна (http://world.g-shock.com/).

Практические рекомендации:

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

В общем стиле сайта главное — простота

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

Пример: форма для входа на мобильную версию сайта (социальная сеть для любителей пива Untapped – http://untappd.com/?mobile=true)

Обеспечьте возможность обратной связи

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

Практические рекомендации:

• При нажатии на определенную область экрана вид сайта должен изменяться (это служит подтверждением того, что нажатие действительно имело место).
• Используйте Java-скрипты (типа Jquery или Scriptaculous) для организации полноценного диалога с пользователем.
• Показывайте ход загрузки страницы с помощью анимации.

Сохраняйте пустые места

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

Пример — меню, удобное для навигации при помощи устройств с сенсорным экраном (мобильная версия портала http://www.charlesluck.com/ ).

Практические рекомендации:

• Для обозначения ссылок используйте не подчеркивание текста, а кнопки, объекты, иконки.
• Создавайте внутренние поля достаточных размеров, чтобы пользователь мог четко различать элементы.
• Увеличение высоты строк делает текст более удобным для чтения на экране мобильного устройства.

Первоисточник

Чтобы все всем было понятно

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

Обратим внимание на рубрику Taking Strattera (т. е. «Прием препарата»). Можно ли по прочтении данного заголовка однозначно сказать, чему конкретно посвящена данная рубрика? Конечно же, нет. Тексты, собранные под рубрикой с таким названием (не будем забывать о многозначность английского глагола to take), могут рассказывать как о том, как именно нужно принимать препарат (показания к приему, дозировка и т. п.), так и о том, почему нужно принимать именно этот препарат, а не какой-нибудь другой. Кроме того, под эту рубрику вполне подходят и тексты, описывающие результаты приема этого самого препарата. Из меню рассматриваемого сайта неясно, какую конкретно информацию содержит соответствующий раздел. Проблема могла бы быть решена с помощью выпадающего меню, включающего пункты «Показания», «Дозировка», «Эффект препарата и и т.п.». Использование выпадающего меню сделало бы работу с сайтом гораздо более удобной: посетители стали бы сразу переходить в необходимый раздел, не тратя времени на просмотр лишней и совершенно ненужной им информации.
На обсуждаемом сайте имеется еще один пример использования неудачных языковых выражений. Рубрика, в которой приведены полезные ссылки, имеет название Resources. Данный вариант представляется не совсем удачным: слово resources обозначает все возможные источники информации по теме, а не только ссылки на материалы в Интернете; кроме того, слово links является более употребительным; при беглом просмотре страницы оно сразу же будет «схвачено» пользователем. Сделать систему навигации более понятной можно опять же при помощи выпадающего меню, состоящего из пунктов «Полезные ссылки», «Библиография», «Материалы для скачивания».

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

Говорить с пользователем на его языке

У представителей каждой профессии вырабатывается собственный язык, непонятный для непосвященных. Хорошее владение языком профессионального общения является одним из показателей интеграции человека в профессиональное сообщество. Однако для того, чтобы рассказывать о своей деятельности другим людям, профессионал должен пользоваться понятным им языком — в противном случае он просто не будет понят.
Иногда бывает так, разработчики смотрят на мир, что называется, через призму собственной профессии и общаются с пользователям точно так же, как общаются между собой на специализированных форумах и блогах. Мне нередко приходилось сталкиваться с подобным явлением при редактировании текстов для специализированных сайтов и руководств пользователя. Например, в интерфейсе программы, целевой аудиторией которой являются менеджеры и бизнес-аналитики — люди, не владеющие компьютерным профессиональным жаргоном, мною была встречена фраза «Выбрать попап для меню….» Само слово «попап» по-русски звучит некрасиво и неуклюже. Да и сама фраза не будет понятной для непосвященных. Посоветовавшись с разработчиками, мы решили заменить ее на «Выбрать всплывающее меню для пункта…» – данный вариант звучит значительно красивее и естественнее с точки зрения грамматических и стилистических норм русского языка.

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

Трудности перевода

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

Что значит выражение Searchable PDF? Сможет ли начинающий пользователь понять его смысл? Подумали ли разработчики о том, что среди пользователей могут быть люди, не знающие английского языка? Можно ли считать понятным и удобным интерфейс, текстовая часть которого представляет собой ералаш из русских и латинских букв?

В России проблема перевода ИТ-терминологии имеют особую актуальность. Компьютерные термины приходят в русский язык из английского. Заимствованные из английского термины зачастую не приживаются в русском языке как раз потому, что они с большим трудом вписываются в структуры фонетических, грамматических и орфографических норм нашего языка. Во многих европейских языках оказалось успешной стратегия передачи английских терминов при помощи «родных» корней . В русском языке в подавляющем большинстве случаев имеет место прямое заимствование. Положение усложняется и тем, что русский язык использует кириллическую систему письма. В языках с письменностью на латинской основе английские слова в большинстве случаев заимствуются в оригинальном написании языка-источника. В русском же языке очень остро стоит проблема транслитерации, влекущая за собой целый ряд сложных проблем. Какой вариант написания предпочтительнее: плэйсходер или плейсхолдер? Чек-бокс или чекбокс? Понятно, что отсутствие единого варианта написания тоже отрицательно сказываеся на удобстве работы с интерфейсами. Попытки заменить новые термины русскими эквивалентами не увенчались успехом. На специализированных форумах встречаются попытки заменить слово «плэйсхолдер» на «подстановщик» или «заменитель», но широкого распространения подобная практика пока что не получила. Английское checkbox иногда передается по-русски как «флажок» или «флаговый переключатель». Однако под «флажком» скорее понимается галочка, устанавливаемая в форму — но как в таком случае следует называть саму эту форму? Выражение «флаговый переключатель» не приживается в языке, потому что выглядит чересчур громоздким и неуклюжим.
Проблемы адаптации заимствованное терминологии не имеют однозначного решения. История свидетельствует о том, что попытки реформирования языка сверху всегда заканчиваются полным провалом. Но она свидетельствует также и о другом: язык представляет собой самоорганизующуюся систему, и чужеродные элементы, не вписывающиеся в естественный ход ее развития, со временем отбрасываются. Так было, например, с футбольными терминами: слова «хавбэк» и «голкипер» не прижились в русском языке, уступив место привычным «полузащитник» и «вратарь». С новейшей компьютерной терминологией произойдет то же самое: что-то уйдет, что-то останется…

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

Окулографические исследования (иногда называемые также айтрэкингом, от англ. eye tracking) стали весьма модной тенденцией в сфере веб-разработки. Действительно ли они так полезны и эффективны? В чем заключается различие между окулографией и традиционными методиками юзабилити-тестирования и эргономической оценки? Попытка ответа на эти вопросы будет предпринята ниже.

Анализ того, что мы видим

Окулография уже давно используется в научных исследованиях, а также в промышленности. Смысл исследования заключается в анализе движения взгляда и зон визуальной фокализации, на которых концентрируется взгляд. Анализ осуществляется на основе показаний специального прибора — окулографа (айтрекера).
Чаще всего целью исследования является изучение реальных сценариев работы с сайтом путем отслеживания движений взгляда. Предметом исследования является компоновка информации на сайте и ее пертинентность, т. е. соответствие информационным потребностям пользователя. Данные анализа могут быть представлены в двух формах: траектория движения взгляда (англ. gaze plot) и тепловая карта зон (англ. heat map).

График движения взгляда отображает последовательность движений глаз при рассматривании образа. Остановки взгляда обозначаются кружками, а линии передвижения — чертами.

Тепловая карта документирует зоны длительной или многократной фиксации взгляда. Красным цветом обозначены места, в которых взгляд останавливался наиболее долго (или к которым он возвращался несколько раз).

Айтрекинг и маркетинг

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

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

Выявление паттернов навигации с помощью окулографического исследования

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

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

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

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

Тепловые карты F-образного сканирования.

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

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

Окулографическое исследование как средство измерения юзабилити веб-страниц

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

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

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

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

Точки фиксации взгляда на заполняемых текстовых полях.

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

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

Заключение

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

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

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

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

Одного взгляда достаточно?

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

Айтрекинг можеть показать то, что пользователь видит, но не то, что он думает В отличие от других методик юзабилити-тестирования, испытуемые во время айтрекинга не озвучивают своих мыслей вслух и не говорят о том, что они думают, чувствуют, понимают. Действия испытуемых не сопровождаются вопросами исследователей типа «Что Вы пытаетесь сделать сейчас?» или «Какого результата Вы ожидаете, кликая по этой ссылке?». Если кто-то из участников прервет выполнение задания — весь тест пойдет насмарку. Вербализация может повлиять на поведение пользователей: они могут затрачивать больше времени и усилий на выполнение заданий. Окулографические исследования позволяют избежать подобных искажений, но при этом необходимо, чтобы взгляд и внимание пользователя были зафиксированы исключительно на интерфейсе. Существует множество методик окулографического анализа, однако все они, как правило, имеют целью получение данных о локализации точек длительной фиксации взгляда и измерение продолжительности фиксации. С помощью айтрекинга можно:

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

Факты или ощущения пользователя?

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

Во время юзабилити-тестирования испытуемый рассказывает обо всем, что он думает и чувствует.

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

Привлекательно для взгляда или привлекательно для пользователя?

Если взгляд пользователя задержался на том или ином элементе интерфейса, это далеко не всегда значит, что этот элемент привлек его внимание. Айтрекинг дает лишь косвенную информацию о специфике пользовательского восприятия приложений и сайтов. Методики окулографических исследований появились задолго до того, как появился Интернет. Они уже давно и активно используются в науке и в промышленности. Так, например, многие производители автомобилей осуществляют оценку степени усталости водителя по специфике движения его взгляда (время фиксации на посторонних, т. е. не имеющих никакого отношения к управлению автомобилем, элементах; продолжительность закрытия век и т. п.). Еще одним важным окулометрическим показателем является расширение зрачков. Зрачки расширяются в зависимости от освещенности и от степени усталости. Чем больше расширяются или сужаются зрачки, тем больше усилий затрачивается на усвоение и запоминание визуальной информации. Это подтверждается и данными проводимых одновременно с айтрекингом исследований мозга. Энцефалография мозга позволяет уточнить данные айтрекинга и получить дополнительную информацию о распределении и фиксации внимания испытуемого. Исследования зрачков еще не получили широкого применения в окулографии — во многом потому, что причины сужения и расширения зрачков трудно определить однозначно. Точные данные возможно получить лишь в лабораторных условиях.

Выводы

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

Заключение

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

Сильные стороны айтрекинга:

• Айтрекинг позволяет выделить зоны, к которым пользователь проявляет повышенное внимание. Зонами повышенного интереса считаются те, накоторых взгляд пользователя задерживался наиболее долго, а также те, к которым он возвращался несколько раз;
• По результатам айтрекинга можно представить тексты так, чтобы их было удобно читать с экрана (подобрать необходимый тип шрифта, размер, текст, разделить текст на визуальные блоки определенного размера и т. п.);
• С помощью айтрекинга можно воссоздать траекторию движения взгляда по интерфейсу (определить, что привлекло внимание в первую очередь, в какой последовательности просматривались элементы интерфейса и т.п);
• Окулографические исследования позволяют подобрать наиболее удачное с точки зрения удобства пользователя расположение элементов интерфейса (кнопок, изображений и т. п.);
• С помощью айтрекинга можно установить, как именно пользователи ищут нужную информацию, что позволяет скорректировать дизайн приложения или сайта с учетом потребностей пользователя;
• Методики айтрекинга могут быть объединены с другими методиками юзабилити-исследования;

Слабые стороны айтрекинга

• На основании результатов айтрекинга нельзя сделать выводов о том, что именно привлекло внимание пользователя: ценная информация или же просто эффектное графическое оформление;
• Если взгляд пользователя неоднократно возвращался к тому или иному участку экрана, это далеко не всегда значит, что данный участок представляет для него интерес. Пользователь мог возвращаться взглядом к одному и тому же месту, чтобы потому что расположенные там текстовые фрагменты или графические изображения оказались для него непонятными;
• Из того, что те или иные визуальные элементы интерфейса привлекли повышенное внимание пользователя, отнюдь не следует, что эти элементы действительно удобны для решения конкретных задач;
• С помощью айтрекинга невозможно зафиксировать мысли, чувства и эмоции, возникающие у пользователя при работе с интерфейсом, и уж тем более — установить, что именно понравилось или не понравилось пользователю;
• Определенные трудности возникают при использовании айтрекинга для исследования подвижных интерфейсов смартфонов или планшетов.