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

5

МЕТОДЫ И СИСТЕМЫ ЗАЩИТЫ ИНФОРМАЦИИ

УДК 004.514

ПРИМЕНЕНИЕ ПРИНЦИПОВ ПОСТРОЕНИЯ ЭФФЕКТИВНЫХ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ СИСТЕМ

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

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

Электронный документооборот, или, более широко, автоматизация процессов подготовки и согласования документов, находит все большее применение в различных сферах деятельности бизнеса и государства. Согласно отчету Gartner, в настоящее время в мире насчитывается более 70 млн. пользователей систем электронного документооборота. При этом мировой рынок систем документооборота является одним из быстрорастущих - по оценкам IDC, его рост составляет до 47,2% в год. В России наблюдается похожая ситуация - исследования определяют объем рынка систем электронного документооборота в России в 2008 г. на уровне $170 млн., при этом отмечается тенденция к его увеличению. Однако применение систем документооборота сопряжено с рядом трудностей как организационного, так и технического характера.

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

На основании анализа работ [1-14], посвященных разработке пользовательских интерфейсов, можно выделить наиболее значимые принципы, представленные ниже.

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

ЭЛЕКТРОННОГО ДОКУМЕНТООБОРОТА Д.А. Кораблев

Введение

Пользовательские интерфейсы

Отрезки золотой пропорции выражаются бесконечной иррациональной дробью 0,618..., если с принять за единицу, а = 0,382. Отношение же отрезков а и Ь составляет 1,618.

С золотым сечением связано имя итальянского математика Фибоначчи. Ряд чисел 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 и т.д. известен как ряд Фибоначчи. Каждый член ряда, начиная с третьего, равен сумме двух предыдущих, а отношение смежных чисел ряда приближается к отношению золотого сечения (21: 34 = 0,617; 34: 55 = 0,618).

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

- Все окна, предоставляемые пользователю для работы, необходимо проектировать таким образом, чтобы соотношение ширины и высоты равнялось золотой пропорции 0,618.

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

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

Проиллюстрируем применение принципа золотого сечения в системах автоматизации документооборота. Допустим, макет страницы имеет фиксированную ширину, 960 рх, и содержит два основных блока - таблицу документов и список папок (в примере рассмотрен интерфейс системы управления документооборотом компании ЮТК [3]), тогда они будут поделены так, как показано на рис. 1.

| с

Входящие

■ Лицо, которое Вы завещаете:

Создать документ ^ Удалить

593рх

|[м

о и документы

поиск Показывать за весь период V 0 Группировка

1-20 из 45 .рА'Ц Показать с 1 по 20 документов на страницу

Название документа Создан Изменен ▼

[71 у| Отчет о недвижимости на Майорке, купленной с корпоративной кредитки 0 Поручение найти зажигалку - нечем прикурить

0 ^ Отчет о праздновании Дня Сурка [7] у] Отчет о повторении Дня Сурка

| | |ц]'| Отчет о недвижимости на Майорке, купленной с корпоративной кредитки | | Поручение найти зажигалку - нечем прикурить

| | |ц]| Отчет о праздновании Дня Сурка | | Отчет о повторении Дня Сурка

[7] у| Отчет о недвижимости на Майорке, купленной с корпоративной кредитки

27 мая Сегодня 12:15

30 мая Сегодня 9:30

21 декабря 2005 г 30 мая

27 мая 27 мая

30 мая 21 мая

21 декабря 2005 г 11 мая

27 мая 4 мая

30 мая 30 апреля

27 мая 11 февраля

® ® ®

(Я)

Иастройки вида

Входящие списком Исходящие списком Группировка по сроку Просроченные списком V Сохранить вид Управление

Папки

Г^: ЩевЬеуа Мзуагоуа Г^ Могогоу 1г". Ре1утауа 1 . [1окоу

Рис. 1. Интерфейс системы управления документооборотом компании ЮТК

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

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

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

- однотипные задачи объединять в отдельные группы, отделенные друг от друга визуальным разделителем;

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

- группировать подобные инструменты в соответствующие панели инструментов.

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

Хороший пример системы, использующей принцип группировки, - интерфейс системы документооборота СИБУР [6] (рис. 2). Все однотипные задачи, выполняемые пользователем, сгруппированы, озаглавлены и визуально отделены друг от друга.

11

пчч ПЦПТ" *

Г,АвЦчМ Схчои»!" £В>.,.Ч(Н11Н О-*:-

ЗЧИПГПДш

А

В Поступившие г

л

■ ПЗИУПИЯ нмичниич НДИНПМ ПОЩН'ППГМТ

■ ^ч^Г^,;-.-. ЯДН"^* -±«14« А.Г

- II почюгу доСыч. няЬ н и гштйдидг! Н^

- < г т.:.: - «¿т » гхУ 1уУ и

■ 1 & чстчтИ.Уч лалднкнь ^

Е<(*п«Т|« О Ъ

■ ■ к ■ ка-14 ДМ.' т-д:?

|ЬЛ1ЦТЛ щткв^д^ ГУИДЦ.1 е»

■ - < ытга. в шм .-у-уе

^на ЖЙМЙ^ЧУГ N А

Календарь - ©

« 1 ш. • |И

1 ! 2 * 1 Ь 1

2 5 ■д й и

И ±1 ¿а —й а

X т;

а. и 31 2 :г «3

- Направленные

■■ •г-1-7-,:. 1Г. т. ..■ --а-.' ь- :.-■

* г?г* ■ I? ■ ■-.--

Ччта 1Л,

[дл-лпд пола^..

оратае Л

■ ~ к шип

Т ч^бги 5 1Т1МГ I

Шаблоны

си

^ Гкчт/^емщ

■ ССж^гиСг+Ы

1

Совещания

ь

■ -: ПУУ>Цдаб^и тсбтш дцпЫм.га

-1 /м -чл-.■ м™.-.^.* э.Е

■ < с± лйш ? шшсй шпиийишалы

Посту-иш* 32

.'. На гадгатЕО^

На гтодготюче !

Подгороплйнй 2 Г

I lc.fi,! 'Ч,С 1-1 Г ^щг г, |',-1пп,п,чи

Г.'~ падчдпч« нтогоь налтикл на пт

Г7Т & КВЯЗТДДЛ.И ТСТ'

Сгднсзотвд »

' Иаи.1,'ой^ лют?™ 6«

Я X Л ]

Черновики

> -чд-дтте..т^->.гУ^тс. у,гттодтуташгч X

— ■ О МУШ! т.Ногату ТИ|1 *

■-> Ш т»сч гмс-яц Е. ^ лдпгжти чг~ я

—

О ЫУШ! паялй *

л ГТодгдтсагть 1У1ЧСТ» у гомчту ашдивад X

" О ЫЧШ1 ПМЯЙ *

-- Гмо.ШДЕ.Н налдд^жп, д

— П(кКи

Рис. 2. Интерфейс системы управления документооборотом СИБУР

Кошелек Миллера. Принцип назван в честь ученого-психолога Г.А. Миллера, который исследовал кратковременную память, проверяя выводы, сделанные ранее его

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

- количество пунктов меню не должно превышать 7-9;

- количество кнопок на панелях инструментов не должно превышать 7-9;

- количество опций на каждой закладке также не должно превышать 7-9;

- если количество элементов, соответствующих пп. 1-3, превышает 9, необходимо создать дополнительный уровень группировки (смотри предыдущий раздел).

Хорошим примером применения данного принципа служит главное окно системы документооборота «Босс-Референт») [7] (рис. 3): тринадцать кнопок на левой панели, между которыми есть три визуальных разделителя, воспринимаются гораздо лучше, чем если бы кнопки шли единым блоком. Можно заметить, что число пунктов меню не доходит до семи, а в основном элементов меньше. Такие небольшие группы объектов хорошо воспринимаются взглядом пользователя, уже слегка утомленного сложными интерфейсами современных программ.

Рис. 3. Интерфейс системы управления документооборотом «Босс-Референт»

Обратная связь

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

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

Применение принципа:

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

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

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

Отсутствие достаточной обратной связи гарантированно приводит к фрустрации и является одной из самых опасных ошибок при проектировании интерфейса [9]. Хороший пример обратной связи - работа системы управления документооборотом компании ЮТК (рис. 4): если пользователь допустил ошибку в заполнении, он сразу получает уведомление об этом.

Рис. 4. Интерфейс системы управления документооборотом компании ЮТК

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

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

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

- все поля ввода должны быть выполнены одним цветом;

- неизменяемая часть интерфейса должна иметь цвет, отличный от цвета полей ввода и основного цвета;

- поля, обязательные для заполнения и необязательные, должны быть выполнены в разных цветах.

Хорошим примером служит интерфейс системы документооборота «ЕВФРАТ» [11] (рис. 5), в котором используется не более трех основных цветов.

Щ Регистрация. Внутренние документы ¡~

Документ Редактирование Поручение Согласование Настройки Помощь

Э-Ш1 51^31! 1| II 54- шчшш-шг-\шт в|ш>а ШШиЯ у а

Регистрационный номер ^ Дата регистрации Вид документа" Кол ичёствд листов'

I"! 1 1.8 04 500?: у | 0 Г

краткое содержание

2

Связки Контроль

Связанные документы а

Рег. номер Тип документа В ид документа Дата регистрации Тип связи Добавить

х 1 юказать Щщг Обновить

Присоединенные файлы

№ Название присоединенного файла Добавить

1 Юказать

Рис. 5. Интерфейс системы управления документооборотом «ЕВФРАТ»

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

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

- аналогично должны меняться панели инструментов;

- при выделении объекта нужно выводить рядом всплывающее меню с перечнем характерных операций;

- первоначально на экране должно присутствовать минимальное количество компонентов, а все редко используемые элементы должны быть убраны в пункты меню. Хорошим примером применения этого принципа являются контекстные панели инструментов системы «Босс-Референт» (рис. 6), которые меняются в зависимости от того, с какой частью программы в данный момент работает пользователь.

Рис. 6. Интерфейс системы управления документооборотом «Босс-Референт»

Умное заимствование. Базовое заимствование - это использование стандартных элементов, общих для всех программ Windows (меню, списки, кнопки и т.п.). Это позволяет легко добиться последовательности в интерфейсе. Заимствование широко распространенных приемов дизайна интерфейсов и удачных находок авторов конкурирующих программ позволяет резко сократить время обучения и повысить комфорт пользователя. При работе он будет использовать уже приобретенные навыки - этот вопрос затрагивает и принцип равенства между системой и реальным миром [12].

Рис. 7. Интерфейс систем управления документооборотом «□осзУ18юп» и «Ьапйосэ»

Применение принципа: при сохранении документа использовать стандартное диалоговое окно операционной системы или внешне похожее на него;

- при выборе цвета и шрифта интерфейса использовать стандартное диалоговое окно операционной системы;

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

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

Программы, лидирующие па рынке, часто обладают схожим дизайном, например интерфейс системы «DocsVision» [13] (рис. 7, слева) и интерфейс системы «LanDocs» [14] (рис. 7, справа).

Заключение

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

Литература

1. Проектирование пользовательского интерфейса на персональных компьютерах. Стандарт фирмы IBM. Вильнюс: DBS Ltd, 1992.

2. Гультяев А.К., Мишин В.А. Проектирование и дизайн пользовательского интерфейса. - СПб: КОРОНА-принт, 2000.

3. Система управления документооборотом компании ЮТК [Электронный ресурс]. -Режим доступа: http://www.stcompany.ru/, свободный.

4. Жарков С.В. Shareware: профессиональная разработка и продвижение программ. -СПб: BHV-СПб, 2002.

5. Тео Мандел. Дизайн интерфейсов. - М: ДМК пресс, 2005.

6. Интерфейс системы документооборота СИБУР [Электронный ресурс]. - Режим доступа: http://www.stcompany.ru/, свободный.

7. Система «Босс-Референт» [Электронный ресурс]. - Режим доступа: http://www.boss-referent.ru/, свободный.

8. Головач В.В. Дизайн пользовательского интерфейса II. Искусство мыть слона [Электронный ресурс]. - Режим доступа: http://uibook2.usethics.ru/, свободный

9. Тидвел Дж. Разработка пользовательских интерфейсов. - СПб: Питер, 2008.

10. Раскин Дж. Интерфейс: новые направления в проектировании компьютерных систем. - М.: Символ-Плюс, 2005.

11. Система электронного документооборота и автоматизации делопроизводства «ЕВФРАТ-Документооборот» [Электронный ресурс]. - Режим доступа: www.evfrat.ru, свободный.

12. Торрес Р. Дж. Практическое руководство по проектированию и разработке пользовательского интерфейса. - М.: Вильямс, 2002.

13. Организация документооборота и бизнес-процессов на современном предприятии. [Электронный ресурс]. - Режим доступа: www.docsvision.com, свободный.

14. Система LanDocs [Электронный ресурс]. - Режим доступа: www.landocs.ru, свободный.

Кораблев Дмитрий Александрович - Санкт-Петербургский государственный университет информационных технологий механики и оптики, аспирант, [email protected]