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

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

Аннотация: Эта статья описывает новую модель пользовательского интерфейса, названную «индуктивный пользовательский интерфейс» (inductive user interface, IUI). Называемая также «индуктивной навигацией», IUI-модель показывает — как сделать прикладные программы более простыми — разбивая функциональность на экраны или страницы, которые проще как описывать так и понимать. IUI-модель проявляется в разнообразных проектах Майкрософт, наиболее заметно — в Microsoft Money 2000. Данная статья является скорее введением в IUI, чем утвержденным и всесторонним набором рекомендаций и правил. (25 печатных страниц)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Процессы

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

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

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

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

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

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

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

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

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

Пример

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

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

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

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

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

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

Рисунок 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) или Балансирование учетной записи. По расположению и названиям контролов пользователям приходилось догадываться о назначении, и поведении этих экранов.

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

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

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

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

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

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

Заголовок экрана показывает прозрачность проекта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Точные размеры и форма содержательных областей экрана зависит от дизайна программы. В 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример: Выберите ваш рисунок

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

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

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

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

Задачи

Пример: Выбор экранной заставки

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

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

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

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

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

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

Названия для других контролов

Пример: Наберите ваш пароль

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

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

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

Изменить другую учетную запись

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

…помогают новым проектировщикам…

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

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

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

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

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

Тесты юзабилити

В ходе разработки 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 по сравнению с Money 99.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перевод: Никита Зимин,
ведущий разработчик компании «Деловые программы»,
Мария Аршава, переводчик

Вернуться к списку статей