Русские документы
RSS rusdoc.ru  Найти :
Последние поступления
  Hardware:
Видеоустройства
Системные платы
Процессоры
Мобильные устройства
Аудиосистема
Охлаждение системы
Накопители информации
КПК и ноутбуки
Телефоны и связь
Периферия
Система
Сети
Разные устройства
 
  Programming:
Web-разработка
Языки программирования
Технологии и теория
Разработка игр
Программная инженерия
 
  Software:
Операционные системы
Windows 7
Базы данных
Обзоры программ
Графика и дизайн
   
  Life:
Компьютерная жизнь
Разные материалы
   
Партнеры
Публикация
Правовая информация
Реклама на сайте
Обратная связь
Экспорт в RSS Экспорт в RSS2.0
   

Индуктивный пользовательский интерфейс

Microsoft Inductive User Interface Guidelines

Автор: Microsoft Corporation
Перевод: Никита Зимин
Мария Аршава
Источник: Microsoft Inductive User Interface Guidelines
Материал предоставил: RSDN Magazine #6-2004
Опубликовано: 18.07.2005
Исправлено: 23.07.2005
Версия текста: 1.0
Как использовать этот документ
Различные способы представления индуктивного пользовательского интерфейса
Что такое «индуктивный пользовательский интерфейс»?
IUI в действии: решение общих проблем проектирования
Проблема: программы трудно использовать
Дедуктивный пользовательский интерфейс
Решение: индуктивный пользовательский интерфейс
Процессы
Шаги по созданию индуктивного пользовательского интерфейса
Шаг первый: Сосредоточить каждый экран на одной единственной задаче
Шаг второй: Сформулировать задачу
Шаг третий: Сделать содержимое страницы отвечающим задаче
Шаг четвертый: Предложить ссылки на вторичные задачи
Дополнительные рекомендации
Используйте общие шаблоны экранов
Предоставьте экраны для запуска задач
Сделайте понятным то, как выполнить задачу, используя control-ы на экране
Предоставьте простой способ закончить задачу и начать новую
Сделайте следующий шаг навигации понятным
Поддержка пользователей
Первичная помощь
Вторичная помощь
Приложение: Проектирование и тестирование Microsoft Money 2000
Проектирование и тестирование Money 2000
Тесты удобства использования
Сравнение с веб-сайтами
 

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

Как использовать этот документ

Данный документ описывает общие принципы индуктивного пользовательского интерфейса и демонстрирует использование этих принципов на примерах. Большинство примеров относится к Microsoft Money 2000, поскольку на настоящий момент (февраль 2001 г. — прим. перев.) этот продукт наиболее полно использует индуктивный пользовательский интерфейс.

Различные способы представления индуктивного пользовательского интерфейса

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

Что такое «индуктивный пользовательский интерфейс»?

Индуктивный пользовательский интерфейс (Inductive User Interface, IUI) — это новая модель пользовательского интерфейса, предлагающая способ сделать прикладные программы более простыми, разбивая функциональность на экраны или страницы, которые проще как описывать, так и понимать. Microsoft реализовала эту модель в Microsoft Money 2000, крупной коммерческой прикладной программе, и получила хорошие результаты. Неофициальные тесты говорят о том, что в этой модели пользователи могут выполнять задачи так же быстро, как и в традиционных интерфейсах, и могут легче найти то, что им нужно.

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

ПРИМЕЧАНИЕ

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

IUI в действии: решение общих проблем проектирования

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

Проблема: программы трудно использовать

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

Основные причины, осложняющие использование современных программных продуктов, таковы:

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

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

Дедуктивный пользовательский интерфейс

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


Рисунок 1. Что я сейчас делаю? Как я узнаю, что я закончил?

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

Теперь взгляните на диалог с точки зрения случайного пользователя. Многие пользователи, увидев этот диалог, спросят: «И что я должен с этим делать?». Когда появляется этот диалог, пользователь должен остановиться и выяснить, что делать дальше. Во-первых, пользователь должен сделать вывод, что большой белый квадрат — это пустой список, который нужно заполнить элементами. Маленькая надпись над квадратом — «Things» — дает неясный намек. Некоторые пользователи попробуют написать что-нибудь внутри квадрата, потому что он выглядит как поле ввода.

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

Пользователя также могут интересовать вопросы более высокого уровня: «Сколько элементов я должен поместить в список? Нужно ли вводить элементы в определенном порядке? Почему этот диалог появился в этом месте? Для чего он?»

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

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

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

Решение: индуктивный пользовательский интерфейс

Цель IUI как нового способа проектирования программ — уменьшить объем размышлений пользователей, нужных для успешного перехода между частями продукта и использования его функций. Слово inductive («индуктивный») происходит от глагола induce , что означает — идти, следуя влиянию или убеждению.

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

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

  • Что я должен сейчас делать?
  • Куда нужно перейти, чтобы выполнить следующую задачу?

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

Эта предпосылка может быть раскрыта в последовательность из четырех шагов:

  1. Сосредоточить каждый экран на одной-единственной задаче.
  2. Сформулировать задачу для каждого экрана.
  3. Привести содержимое страницы в соответствие задаче.
  4. Предложить ссылки на вторичные задачи.

Описывая основные принципы IUI, данный документ демонстрирует эти принципы в действии, используя примеры из Microsoft Money 2000 и других программ. Рассматривайте эти примеры как частные способы представления IUI, а не как точную модель для реализации.

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

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

Эти четыре шага и пять рекомендаций — ключ к проектированию IUI.

Процессы

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

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

Шаги по созданию индуктивного пользовательского интерфейса

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

Шаг первый: Сосредоточить каждый экран на одной единственной задаче

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

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

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

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

Пример

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

Money 2000 и индуктивный пользовательский интерфейс

IUI-модель была разработана в ходе создания Microsoft Money 2000 — приложения, используемого для управления личными финансами. Это большая Windows-программа с более чем миллионом строк кода.

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

IUI был впервые использован в приложении, выполненном в веб-стиле. Но он также может быть использован с такими традиционными интерфейсными элементами, как окна и диалоги.

В Microsoft Money 99 пользователи часто выполняли множество задач на одном экране. Например, на рисунке 2 показан интерфейс «Менеджер счетов».


Рисунок 2. Менеджер счетов в Money 99 поддерживал множество задач на одном экране.

Этот экран объединяет как часто используемые задачи, например, переход к отдельному счету, так и редко используемые – создание и удаление счетов. Ни одна из этих отдельных задач не имеет прямого выражения в заголовке экрана — «Менеджер счетов». Многие пользователи сочтут этот экран таким же сложным, как и диалог на рисунке 1. В обоих случаях пользователь должен догадаться о назначении экрана и том, как его использовать.

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


Рисунок 3. Экран Money 2000 сосредоточен на одной задаче: выборе счета.

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

Иногда пользователям может понадобиться добавить или удалить счет. Чтобы выполнить эту задачу в Money 2000, пользователи переходят на второй экран (показанный на рисунке 4), сосредоточенный на настройке счетов.


Рисунок 4. Экран Money 2000, сосредоточенный на настройке счетов.

В IUI-версии Money 2000 назначение каждого экрана гораздо яснее. Кроме того, на каждом экране больше свободного места, отданного под выполнение назначения страницы. Например, в менеджере счетов Money 99 очень мало места уделялось кнопке Удалить счет , потому что она использовалась намного реже, чем другие команды этого экрана. Напротив, экран «Настройка счетов» в Money 2000 может показать эту команду более заметно.

Что такое «одна задача»?

Как вы узнаете, действительно ли экран сосредоточен только на одной задаче? Экран, поддерживающий много задач, может быть описан как имеющий только одно назначение — если это назначение достаточно абстрактно. Вот вам практический способ: экран сосредоточен на одном назначении, если дизайнер может выразить это назначение в виде краткого, выразительного и естественно звучащего экранного заголовка.

Разработчики Money 2000 предполагали дробление этих экранов ( Выберите счет для использования и Настройка ваших счетов ) на большее количество экранов. Однако, поскольку каждый экран уже имел краткий, осмысленный и естественно звучащий заголовок, дизайнеры решили, что экраны уже достаточно сосредоточены. Если не получается придумать простой и ясный заголовок при разработке экрана, наверняка вы пытаетесь вместить слишком многое на один экран.

Шаг второй: Сформулировать задачу

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

Это еще один просто звучащий принцип, который часто не соблюдается. Например, ранние выпуски Microsoft Money содержали экраны с такими заголовками как Онлайновый менеджер финансовых сервисов ( Online Financial Services Manager ) или Баланс по счету . По расположению и названиям control-ов пользователям приходилось догадываться о назначении и поведении этих экранов.

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

Удобные экраны — ясные заголовки

Экраны, выполняющие множество задач, требуют абстрактных или сложных заголовков. Например, экран Money 99, показанный на рисунке 2, позволял пользователю как переходить к счетам, так и настраивать набор счетов. Абстрактный заголовок «Менеджер счетов» был дан этой странице в попытке охватить оба эти предназначения. Хотя у пользователей и могли быть идеи по поводу того, что могла делать страница «Менеджер счетов», они могли в действительности не осознавать, что самой обычной задачей для этого экрана был просто выбор счета.

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

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

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

Заголовок экрана показывает ясность дизайна

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

Сравните экран оплаты счетов в Money 99 (слева, в данном случае под счетом понимается документ на оплату – прим. ред.), который наделен статичной меткой страницы (Ближайшие платежи и взносы, Upcoming Bills & Deposits), и соответствующий экран из Money 2000 (справа) с точным заголовком («Щелкните по счету, который вы хотите оплатить»):


Рисунок 5. Статичный заголовок в Money 99 (слева) и инструктивный, активный заголовок в Money 2000.

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

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


Рисунок 6. Макет экрана и заголовка для задания пароля в Windows.

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

Рекомендации по выбору экранных заголовков

Данный раздел описывает простую технику по выбору хороших экранных заголовков. Используя эту технику, дизайнер представляет друга, который спрашивает: «Для чего этот экран?», а затем предлагает ясный и полезный ответ, который завершает фразу «Это экран, на котором ты…». Слова, которые завершают эту фразу, являются заголовком экрана.

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

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

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

Следующая таблица содержит некоторые примеры экранных заголовков из Money 99 и заголовки для тех же или связанных с ними экранов из следующей версии — Money 2000.

Заголовки экранов в Money 99 Новые заголовки экранов в Money 2000 Примечание
Менеджер счетов Выбрать счет Настройка ваших счетов Статичный заголовок заменен активными заголовками.
Подробности счета (Account Details) Изменить настройки счета Статичный заголовок изменен на активный, конкретный заголовок.
Календарь платежей Оплата счета Нечеткий заголовок сделан описательным.
Онлайновый менеджер финансовых сервисов После перепроектирования страница оказалась не нужна.

Сделайте экранный заголовок заметным

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

Шаг третий: Сделать содержимое страницы отвечающим задаче

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

Если заголовок экрана ясен и прост, разработка экрана обычно не вызывает затруднений. Например, один из экранов Money 2000, показанный выше (рисунок 3), озаглавлен «Выберите счет для использования». Экран с таким заголовком, очевидно, должен содержать простой список счетов. Другой экран Money 2000 озаглавлен «Отметьте элементы для включения в ваши налоги». Естественно, этот экран содержит список элементов с отметками.

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

Содержательные области экрана

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

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

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

Предоставьте ясный выход со страницы

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

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

Подробнее по этой теме см. Предоставьте простой способ закончить задачу и начать новую в разделе Дополнительные рекомендации .

Шаг четвертый: Предложить ссылки на вторичные задачи

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

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

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

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

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

Визуальный дизайн вторичных задач

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


Рисунок 7. Пример экрана из Money 2000. Обратите внимание на вторичные задачи, перечисленные слева.

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

Дополнительные рекомендации

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

Используйте общие шаблоны экранов

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

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

Предоставьте экраны для запуска задач

Продукты, спроектированные в стиле IUI, часто используют особые экраны, спроектированные для того, чтобы пользователь начинал с набора задач. Такие экраны называются страницами действий (activity pages), потому что они формируют связанные группы часто используемых задач. Такие страницы предоставляют начальную точку для работы пользователя. Страница действий обычно содержит ссылки на другие страницы, где пользователь выполняет работу. Страницы действий спрашивают пользователя: «Что вы собираетесь сейчас делать?», - и предлагают список возможных ответов. Чтобы помочь пользователю распознать страницы действий, их можно делать по особому шаблону.

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

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


Рисунок 8. Начальная страница в Money 2000 — страница действий. Она перечисляет несколько часто используемых задач и предоставляет ссылки на наборы задач на следующих страницах.

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

Например, раздел «Налоги» в Money содержит все функции продукта, связанные с налогами. Область «Налоги» предлагает ссылки на эти функции на странице «Центр налогов» (Tax Center).


Рисунок 9. Экраны финансовых центров Money 2000 — другой пример страницы действий.

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


Рисунок 10. Макет страницы действий для управления учетными записями пользователей в Windows.

Сделайте понятным то, как выполнить задачу, используя control-ы на экране

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

Предоставьте простой способ закончить задачу и начать новую

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

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

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

Запуск и завершение процессов

Этот раздел описывает процессы , технику работы с задачами, которые занимают более одного экрана.

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

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

Название процесса

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

Реализация процессов

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

Когда пользователи уходят со страницы процесса, этот процесс остается активным в стеке процессов. Пользователи могут завершить этот процесс, вернувшись к экрану, откуда они ушли, и продолжить процесс. Это позволяет пользователям «сделать крюк», вернуться, а затем продолжить процесс. Чтобы увидеть, как работает это поведение, начните любой онлайновый процесс покупки в WWW, покиньте сайт, а затем нажмите кнопку «Назад». Как правило, вы получите возможность возобновить процесс с того места, где вы его покинули.

Кнопка «Готово»

Чтобы закончить с экраном и пройти к следующему экрану процесса, экраны могут отображать кнопку в нижней части страницы. Название этой кнопки — «Дальше», «Готово» или что-то вроде этого. Если кнопка завершает процесс и процесс может быть вызван из нескольких мест, название кнопки «Готово» может содержать название места, откуда был запущен процесс (например, «вернуться в ххх» – прим.ред.).

Панель навигации

На любом экране пользователь может решить, что он закончил с текущим разделом продукта и хочет начать что-нибудь другое. Он может захотеть прервать работу с текущим экраном и перейти к другой части продукта. Панель навигации (navigation toolbar) предлагает пользователю набор ссылок для запуска новых задач. Как и в случае остальных списков ссылок на задачи, эти ссылки должны следовать подробно обсуждаемому в следующем разделе принципу – «следующий шаг навигации должен быть понятным».

Сделайте следующий шаг навигации понятным

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

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

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

Поддержка пользователей

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

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


Рисунок 11. Чтобы помочь пользователю, под ссылками на каждую задачу приведен текст первичной помощи.

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

Первичная помощь

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

Заголовок экрана

Пример: Изменить рисунок.

Заголовок экрана — это первый и наиболее важный элемент, который появляется на экране. Его назначение — описать на языке пользователя задачу, которая может быть завершена на этой странице. В экранном заголовке нужно избегать описания деталей выполнения задачи. Текст экранного заголовка должен относиться только к основной задаче этого экрана. Как правило, чем проще и короче описание задачи, тем лучше. Более подробно об этом см. Шаг второй: Сформулируйте задачу .

Подзаголовок экрана

Пример: Вы также можете загрузить из Интернет новый рисунок.

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

Задачи

Пример: Выберите экранную заставку.

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

Названия кнопок команд

Пример: Создать пароль.

Существует три типа командных кнопок:

  • «Отменить».
  • «Готово».
  • Кнопки совершения действий.

Кнопки действий должны использовать активные названия вместо «ОК». Например, используйте «Создать пароль» вместо «ОК».

Названия для других control-ов

Пример: Введите пароль.

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

Ссылки «Связанные задачи»

Пример: Связанные задачи

Изменить другой счет

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

Ссылки «Смотри также»

Пример: Смотри также

Изменить вашу тему

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

Подробнее о вторичных задачах см. Визуальный дизайн вторичных задач .

Вторичная помощь

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

Всплывающие подсказки (InfoTips)

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

Страницы справки «Узнать больше о»

Пример: Узнать больше о

Загрузка файла

Ссылки «Узнать больше о» ("Learn about") открывают страницы справочной системы, такие как обзоры функций, концептуальная информация, информация о поддержке пользователей и процедурная информация. Чтобы не загромождать экран, вам следует минимизировать количество ссылок «Узнать больше о» на каждом экране.

Приложение: Проектирование и тестирование Microsoft Money 2000

Этот раздел был адаптирован из описания, написанного дизайнерами. Он описывает, как команда Microsoft Money 2000 изменила процесс проектирования и тестирования, чтобы приспособить его к IUI-модели.

Проектирование и тестирование Money 2000

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

Более ясные заголовки и проекты…

Дизайнеры Money 2000 заметили, что часто функции описывались с использованием слов, которые на самом деле не присутствовали на экране. В IUI-модели экраны должны сами себя описывать. Например, раньше команда описывала, что экран названный «Календарь платежей» (Payment Calendar) предназначался для оплаты счетов. В Money 2000 этот экран называется «Оплата счетов». Все элементы, которые не связаны с этим назначением, были перенесены на вспомогательные экраны, результатом чего стал более ясный дизайн.

Другой пример касается экрана, названного «Онлайновый менеджер финансовых сервисов» (Online Financial Services Manager). Команда пыталась выработать простое объяснение для назначения этого экрана. Когда они не смогли прийти к нужному варианту, они удалили этот экран и разнесли его функции на несколько более логично определенных страниц.

Помощь новым дизайнерам…

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

…и техническим писателям

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

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

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

Тесты удобства использования

В ходе разработки Money 2000 команда провела несколько тестов удобства использования, чтобы рассмотреть различие между старой структурой навигации Money 99 и изменениями, сделанными в результате применения IUI-модели.

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

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

Команда создала прототип на Microsoft Visual Basic и HTML, который имитировал действия с личными финансами, обычно выполняемыми в Money. В этом прототипе пользователи могли переходить по более чем 50-ти страницам, представляющим основные разделы продукта. В этих разделах они могли настраивать финансовые учетные записи, оплачивать счета, просматривать отчеты и работать со своими инвестициями.

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

Общие предпочтения показали, что четверо текущих пользователей Money предпочли Money 99 (версию, которую они использовали дома), тогда как остальные семь пользователей предпочли новый прототип текущей версии. По остальным измерениям, между пользователями этих трех групп не было различий. По показателям общей производительности, пользователи были в неправильном разделе продукта в два раза чаще при использовании Money 99 (2.82 раз на задачу), чем в прототипе (1.45 раз на задачу). Другие данные о предпочтениях и измерения производительности, хотя и незначительно, но показали преимущество прототипа. На основании этих данных и другого тестирования, команда разработки Money решила применить принципы IUI в Money 2000.

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

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

Пользователи Money 2000 успешно выполнили 89% задач, в то время как пользователи Money 99 успешно завершили лишь 74% задач. Кроме того, мера общего субъективного удовлетворения навигацией также имела тенденцию к возрастанию для Money 2000 по сравнению с Money 99.

Контролируемое тестирование

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

Тест состоял из приложения «Stock Market Viewer», которое позволяло пользователям изменять изображение биржевого отчета, показанного на экране. Пользователи могли выбрать, какие колонки данных включить в отчет, порядок колонок отчета, их выравнивание и количество десятичных знаков после запятой. Дизайнеры хотели посмотреть, как будет работать подход IUI применительно к этой задаче, в сравнении с традиционным графическим интерфейсом пользователя.

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


Рисунок 12. Для выбора и настройки колонок отчета был использован традиционный диалог.

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


Рисунок 13. IUI-версия главной страницы тестового приложения.

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


Рисунок 14. Каждая страница выполняет одну-единственную задачу, которая ясно описана в заголовке страницы.

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

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

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

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

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

Сравнение с веб-сайтами

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

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

 

Реклама:


Последнее на сайте :
28.05.2015:
Нужен надежный хостинг с поддержкой php mysql?
Бесплатный конвертер для видео файлов
Немножко философский пост про то, как мы в глаза смотрели
Самые заметные проблемы облачных провайдеров за 2012 год
Распределительная сеть дата-центров мирового масштаба — сердце империи Google
Google выделяет миллионы долларов на новый конкурс по взлому Chrome
Top 5 раздражающих моментов в работе программиста
Глава мобильного подразделения Ubuntu Ричард Коллинз рассказал о планах
Обзор планшета Acer ICONIA W7. Windows 8 по-профессиональному
Как получить nano-sim для iPhone 5?



Реклама:





© Copyright 1998-2012 Александр Томов. All rights reserved.