Лекция 6. Принципы дизайна интерфейса. Этапы создания интерактивных прототипов. Средства быстрого конструирования.

Вопросы:

1. Основные этапы разработки

2. Первоначальное проектирование

3. Создание прототипа

4. Тестирование и модификация прототипа

Основные этапы разработки

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

Первоначальное проектирование

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

Собственно проектирование состоит из следующих этапов:

1. Определение необходимой функциональности системы.

2. Создание пользовательских сценариев.

3. Проектирование общей структуры.

4. Конструирование отдельных блоков.

5. Создание глоссария

6. Сборка и начальная проверка полной схемы системы.

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

Определение необходимой функциональности системы

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

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

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

Анализ целей пользователей

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

«Должен поджаривать мелкие предметы, преимущественно хлеб»

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

Анализ действий пользователей

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

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

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

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

Низкоуровневые и высокоуровневые функции

Существует два принципиально разных подхода к определению функциональности системы. При первом подходе система снабжается максимальным количеством функций, при этом результаты многих из них являются суммой результатов других функций. При другом подходе все составные функции (метафункции) из системы изымаются. Ярким представителем первого подхода является Corel PhotoPaint, не менее ярким представителем другого – Adobe PhotoShop.

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

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

Проектирование отдельных блоков

Итак, теперь вы знаете, сколько экранов (страниц) вам нужно и что должно происходить на каждом экране. Настало время проектировать отдельные экраны. Это, пожалуй, самая сложная часть работы (не считая наблюдения за пользователями). Хуже того, она плохо поддается алгоритмизации. Но помимо этого есть еще две вещи, которые вам нужно узнать: GOMS и адаптивная функциональность.

Предсказание скорости

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

В 1983 году Кард, Моран и Ньювел создали метод оценки скорости работы с системой, названный аббревиатурой GOMS (Goals, Operators, Methods, and Selection Rules – цели, операторы, методы и правила их выбора). Идея метода очень проста: все действия пользователя можно разложить на составляющие (например, взять мышь или передвинуть курсор). Ограничив номенклатуру этих составляющих, можно замерить время их выполнения на массе пользователей, после чего получить статистически верные значения длительности этих составляющих. После чего предсказание скорости выполнения какой-либо задачи, или, вернее, выбор наиболее эффективного решения, становится довольно простым делом – нужно только разложить эту задачу на составляющие, после чего, зная продолжительность каждой составляющей, всё сложить и узнать длительность всего процесса. Обычно тот интерфейс лучше, при котором время выполнения задачи меньше.

Впоследствии было разработано несколько более сложных (и точных) вариантов этого метода, но самым распространенным всё равно является изначальный, называемый Keystroke-level Model (KLM). К сожалению, этот вариант метода имеет определенные недостатки (что, впрочем, уравновешивается его простотой):

- он применим в основном для предсказания действий опытных пользователей;

- он никак не учитывает ни прогресса в обучении, ни возможных ошибок, ни степени удовлетворения пользователей;

- он плохо применим при проектировании сайтов из-за непредсказуемого времени реакции системы.

Для его использования достаточно знать правила разбиения задачи на составляющие и длительность каждой составляющей

Правила GOMS:

- Нажатие на клавишу клавиатуры, включая Alt, Ctrl и Shift (К): 0, 28 сек

- Нажатие на кнопку мыши (М): 0, 1 сек

- Перемещение курсора мыши (П): 1, 1 сек (разумеется, время, затрачиваемое на перемещение курсора, зависит как от дистанции, так и тот размера цели. Тем не менее, это число представляет достаточно точный компромисс).

- Взятие или бросание мыши (В): 0, 4 сек

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

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

Адаптивная функциональность

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

Возьмем пульт от телевизора. Телевизор выключается только одной кнопкой на пульте, но включается от нажатия любой кнопки. Это не следует напрямую из логики системы, но это естественно. Когда на этаж приезжает лифт с неавтоматическими дверями, дверь можно открыть ещё до того, как погаснет кнопка вызова (чтобы лифт не увели). Это не вполне логично, но естественно. Другой известный, но не всеми осознаваемый, пример: когда Windows при входе в систему спрашивает пароль, нужно нажать Ctrl+Alt+Delete. В этом же диалоговом окне есть кнопка Справка, нажатие на которую открывает ещё одно диалоговое окно, повествующее о том, как нажать эти три клавиши. Так вот, чтобы войти в систему, это окно не нужно закрывать, нажать Ctrl+Alt+Delete можно по-прежнему. С системной точки зрения это неправильно (почему пользователь не закрыл сначала окно с подсказкой? ), но для пользователей это естественно.

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

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

Создание глоссария

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

Теперь этот список нужно улучшить. Для этого:

- Уменьшите длину всех получившихся элементов.

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

- Уменьшите длину всех получившихся элементов.

- Проверьте, что одно и то же понятие не называется в разных местах по-разному.

- Проверьте текст на совпадение стиля с официальным для выбранной платформы (если вы делаете программу, эталоном является текст из MS Windows).

- Убедитесь, что на всех командных кнопках стоят глаголы-инфинитивы.

После чего список стараться не менять его в будущем.

Сбор полной схемы

К этому моменту вы обладаете:

- общей схемой системы

- планами отдельных экранов

- глоссарием.

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

Рис. 3. Пример готовой схемы интерфейса сайта.

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

Проверка схемы по сценарию

Последней задачей перед построением прототипа является проверка внутренней логики системы. Дело в том, что всегда существует вероятность того, что вы что-то забыли или спланировали неправильно. Как уже было сказано, исправить эти ошибки лучше всего до построения прототипа (даже первой его версии). Конечно, многие структурные ошибки нельзя найти никакими методами, кроме длительного логического анализа. С другой стороны, практика показывает, что почти все найденные ошибки будут существенными. Так что лишняя проверка не повредит.

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

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

Экспертная оценка

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

Построение прототипа

Не полируйте прототип

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

Итак, как быстрее и дешевле построить прототип?

Первая версия. Бумажная

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

Вторая версия. Презентация

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

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

Фактически для большинства систем этой версии оказывается достаточно.

Третья версия

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

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

Четвертая версия

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

Постановка задачи

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

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

Собственно тестирование

Технически сеанс тестирования довольно прост. Нужно иметь несколько пользователей, которые ни разу не видели текущего состояния системы. За исключением редких случаев, когда ваша система рассчитана на продвинутых пользователей (power user), нужно подбирать не слишком опытных субъектов. Тестерам дается задание, они его выполняют, после чего результаты анализируются.

Впрочем, в большинстве случаев достаточно помнить следующее:

- Тестирование на одном пользователе позволяет найти примерно 60% ошибок. Соответственно решайте сами, сколько пользователей необходимо для одного сеанса.

Мыслим вслух

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

Модификация

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