Бильфельд Н.В., Затонский А.В. Основы разработки интерфейсов: Реализация в системе Borland Delphi
Подождите немного. Документ загружается.
1
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
Государственное образовательное учреждение
высшего профессионального образования
«ПЕРМСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»
БЕРЕЗНИКОВСКИЙ ФИЛИАЛ
Н. В. Бильфельд, А. В. Затонский
ОСНОВЫ РАЗРАБОТКИ ИНТЕРФЕЙСОВ.
Реализация в системе Borland Delphi
Учебное пособие
Допущено Учебно-методическим объединением ВУЗов по
университетскому политехническому образованию в качестве учебного
пособия для студентов высших учебных заведений, обучающихся по
направлению 230100 «Информатика и вычислительная техника»
Березники 2010
2
ББК 32.07
УДК 004
Б61
Рецензенты:
Заслуженный деятель науки РФ, доктор технических наук, профессор,
заведующий кафедрой автоматизированных систем Уфимского
государственного авиационного технического университета
Куликов Г.Г.
Кандидат технических наук, доцент кафедры автоматизации
технологических процессов Березниковского филиала Пермского
государственного технического университета
Кирин Ю.П.
Бильфельд Н.В., Затонский А.В.
Б61 Основы разработки интерфейсов. Реализация в системе Borland
Delphi: Учеб. пособие / Перм. гос. техн. ун-т, Березниковский филиал, 2010.–
96 с.
Предлагаются рекомендации по разработке эргономичных интерфейсов
и их реализации средствами Borland Delphi. Приведенные примеры являются
характерными для типовых интерфейсов информационных систем и могут
быть использованы в широком спектре программного обеспечения.
Предназначено для студентов направления «Информатика и
вычислительная техника» при изучении дисциплин «Технологии
программирования», «Надежность, эргономика и качество АСОиУ»,
«Информационные технологии».
ISBN
© Пермский государственный
технический университет, 2010
3
Введение
Интерфейс является неотъемлемой частью большинства программ и
информационных систем. Значительная часть претензий к программе так или
иначе связана с реализацией интерфейса. Неудобный, неэргономичный
интерфейс не позволяет пользователю сосредоточиться на решении тех
проблем, которым посвящена программа или информационная система.
Правильное применение средств реализации эргономичных
интерфейсов, особенно в процессе обучения, представляет определенную
проблему. Студенты, изучив среды визуальной разработки приложений,
таких как Delphi и С++ студенты, осваивают базовые компоненты создания
интерфейсов (страницы Standard и Additional) палитры компонентов. Затем
они переходят к изучению других функциональных возможностей среды, в
частности разработка многоуровневых приложений (страницы System, Midas,
Internet), разработка баз данных (страницы Data Access, Data Controls, ADO),
продолжая пользоваться при разработке интерфейсов привычными
стандартными компонентами и методами.
Используя обычные подходы программирования, как правило, для
каждого компонента, используемого в разрабатываемом приложении,
пишется свой обработчики событий, не смотря на то, что код этих
обработчиков практически повторяется. Минимальная оптимизация кода,
которая встречается в таких случаях – это написание своей процедуры и
обращение к ней из обработчиков необходимых компонентов.
Также, если посмотреть на интерфейсы распространенных приложений
(Word, Excel, Delphi) можно заметить, что эти интерфейсы немного
отличаются от интерфейсов, разработанных студентами в курсовых и
дипломных работах.
Можно перечислить основные отличия работ студентов от
профессионально разработанных интерфейсов.
• Все компоненты управления, как правило, находятся на специальных
панелях, а не в клиентской области приложения.
• Данные панели можно перемещать простым перетаскиванием мыши,
располагая их в различной последовательности (друг за другом, друг под
другом, горизонтально, вертикально и т.д.)
• Данные панели можно настраивать, скрывая или показывая отдельные
группы компонентов.
• Внизу клиентской области, как правило, располагается строка состояния,
в которой могут выводиться как подсказки, так и сведения о состоянии
функционирования программы, причем таких групп вывода может быть
несколько.
• Основные пункты меню дублируются кнопками, которые располагаются
на панелях. Кнопки имеют пиктограммы, которые могут изменяться при
наведении на них курсора мыши.
4
• Кнопки могут образовывать группы взаимосвязанных кнопок, из которой
включенной может быть только одна. Состояния кнопок фиксируются
(например, выбор типа шрифта в Word).
• Как кнопки, так и соответствующие пункты меню могут быть активными,
либо не активными в зависимости от необходимой последовательности
выполнения операций.
• Слева от соответствующих пунктов в меню могут присутствовать флажки,
сигнализирующие о включенном или выключенном состоянии.
В принципе, большинство из перечисленных пунктов, можно
реализовать и с помощью стандартных панелей, кнопок, раскрывающихся
списков и т.д., но чтобы обеспечить необходимую функциональность
потребуется достаточно большой объем кода, что мешает сосредоточиться на
алгоритмах решаемой задачи и отнимает достаточно много времени.
Цель данного пособия – рассмотреть отдельные методы и подходы при
разработке интерфейсов, включая их рациональное проектирование, и
основные компоненты, использование которых не вызывает особой
сложности, но позволяет реализовать популярные профессиональные
интерфейсы.
Материалы пособия могут использоваться при изучении дисциплин
«Технологии программирования», «Надежность, эргономика и качество
АСОиУ» и «Информационные технологии» учебного плана направления
230100 «Информатика и вычислительная техника», а также при
самостоятельном изучении проблем, связанных с построением качественных
интерфейсов.
Основные свойства интерфейсов
Основные понятия эргономики
Эргономика (от др.-греч. εργον – работа и νόµος – закон) – научная
дисциплина, комплексно изучающая производственную деятельность
человека и ставящая целью её оптимизацию. Эргономика возникла в 1920-х
годах в связи со значительным усложнением техники, которой должен
управлять человек в своей деятельности. Первые исследования по
эргономике начали проводиться в Великобритании, США и Японии. Термин
«эргономика» был принят в Великобритании в 1949 году, когда группа
английских учёных положила начало организации Эргономического
исследовательского общества. В СССР в 20-е годы предлагалось название
эргология, в США раньше имелось собственное наименование –
исследование человеческих факторов, а в ФРГ – антропотехника, но в
настоящее время наибольшее распространение получил английский термин.
В последнее время эргономика отходит от классического определения и
перестаёт быть строго связана с производственной деятельностью.
Определение, принятое Международной Эргономической Ассоциацией (IEA)
5
в 2007 году: «Эргономика – область приложения научных знаний о человеке
к проектированию предметов, систем и окружений, используемых им».
Эргономика изучает действия человека в процессе работы, скорость
освоения им новой техники, затраты его энергии, производительность и
интенсивность при конкретных видах деятельности. Современная
эргономика подразделяется на микроэргономику, мидиэргономику и
макроэргономику:
• Микроэргономика (иногда её неверно упоминают как миниэргономику)
занимается исследованием и проектированием систем «человек-машина».
В частности, проектирование интерфейсов программных продуктов
находится в ведении микроэргономики.
• Мидиэргономика занимается изучением и проектированием систем
«человек-коллектив», «коллектив-организация», «коллектив-машина»,
«человек-сеть». Именно мидиэргономика исследует производственные
взаимодействия на уровне рабочих мест и производственных задач. К
ведению мидиэргономики, в частности, относится проектирование
структуры организации и помещений; планирование и установление
расписания работ; гигиена и безопасность труда.
• Макроэргономика исследует и проектирует более общие системы, такие
как «человек-общество», «организация-система организаций».
При изучении и создании эффективных управляемых человеком
систем, в эргономике используется системный подход. Для оптимизации
управляемых человеком систем эргономика использует научные изыскания
психологии, физиологии (особенно нейрофизиологии), гигиены и
безопасности труда, социологии, культурологии и многих технических,
инженерных и информационных дисциплин. Некоторые термины
эргономики стали широко употребляться в быту, например, человекочас
(мера временной ёмкости деятельности). В настоящее время открытия
эргономики используются не только на производстве, но также в быту, в
спорте и даже в искусстве.
Юзабилити (англ. usability – дословно «пользуемость», «возможность
быть используемым») – понятие в микроэргономике, обозначающее общую
степень удобства предмета при использовании; термин схож с термином
«эргономичность», однако имеет иную область распространения и
отличается нюансами определения. Применительно к компьютерной технике
термином юзабилити называют концепцию разработки пользовательских
интерфейсов программного обеспечения, ориентированную на максимальное
психологическое и эстетическое удобство для пользователя.
Термин «юзабилити» часто используется как синоним слова
«эргономичность» в контексте таких продуктов, как бытовая электроника,
информационные системы или средства связи. В более широком значении он
может также употребляться для определения степени эффективности
выполнения механическими объектами и инструментами – такими,
например, как дверная ручка или молоток – предписанных им функций.
6
Таким образом, наиболее адекватным переводом слова «usability» будет
«удобство и простота использования, применения», и даже «практичность».
Интерфейс пользователя (UI – user interface) – совокупность средств,
при помощи которых пользователь общается с различными устройствами,
чаще всего – с компьютером или бытовой техникой, либо иным сложным
инструментарием (системой).
Интерфейс пользователя компьютерного приложения включает:
• средства отображения информации, отображаемую информацию,
форматы и коды;
• командные режимы, язык «пользователь – интерфейс»;
• устройства и технологии ввода данных;
• диалоги, взаимодействие и транзакции между пользователем и
компьютером, обратную связь с пользователем;
• поддержку принятия решений в конкретной предметной области;
• порядок использования программы и документацию на неё.
Пользовательский интерфейс (ПИ) часто понимают только как
внешний вид программы. Однако на деле пользователь воспринимает через
него всю программу в целом, а значит, такое понимание является слишком
узким.
В действительности ПИ объединяет в себе все элементы и компоненты
программы, которые способны оказывать влияние на взаимодействие
пользователя с программным обеспечением (ПО).
Это не только экран, который видит пользователь.
К этим элементам относятся:
• набор задач пользователя, которые он решает при помощи системы;
• используемая системой метафора (например, рабочий стол в MS
Windows);
• элементы управления системой;
• навигация между блоками системы;
• визуальный (и не только) дизайн экранов программы;
• средства отображения информации, отображаемая информация и
форматы;
• устройства и технологии ввода данных;
• диалоги, взаимодействие и транзакции между пользователем и
компьютером;
• обратная связь с пользователем;
• поддержка принятия решений в конкретной предметной области;
• порядок использования программы и документация на нее.
Для упрощения восприятия функции программы пользователем при
разработке пользовательского интерфейса желательно использовать
метафоры, смысл и порядок использования которых определен ниже.
7
Рис. 1. Основные элементы интерфейсов windows-приложений
Элементы интерфейсов и критерии качества
Русская терминология интерфейса фактически отсутствует. В русском
глоссарии фирмы Microsoft, которая, по понятным причинам, является
законодателем мод в этой области, переводятся термины «radio button» и
«checkbox». В английском языке, например, элемент управления, называемый
в мире Microsoft «spinner», в мире Apple называется «little arrows». Таким
образом, не для всех элементов можно подобрать формально правильные
названия, т.е. такие названия, которые как-то связаны с обозначаемым
Поле ввода
Крутилка
Контекстное
меню
Радиокнопки
Чекбоксы
Расширенный
комбобокс
Раскрывающийся
комбобокс
Командная
кнопка
Кнопка доступа
к меню
Индикатор степени выполнения
Рамка группировки
Ползунок
Вкладки
Список
единственного
выбора
Список
множественного
выбор
а
Раскрывающийся
список
8
элементом. У тех же элементов, которым такие названия подобрать можно,
эти названия получаются очень длинными: одно слово «Drag» рекомендуется
переводить как «Установите указатель мыши в любом месте выделенного
текста и, нажав левую кнопку мыши, перетащите выделенный участок текста
в нужное место». Поэтому принято элементы управления называть их
английским названием в транслитерации: чекбокс, комбобокс и т.д. Иначе
можно попасть в ситуацию известного анекдота, в котором один сварщик
говорит другому: «Скажи же, о мой друг и коллега Иван, зачем ты капаешь
мне за шиворот нагретый до семисот градусов Цельсия припой?..».
Существуют, конечно, названия, которые переводятся и хорошо, и
сравнительно кратко, например, список и прокрутка.
В [1] систематизированы основные детали интерфейсов (рис. 1).
Существует четыре основных (все остальные – производные) критерия
качества любого интерфейса, а именно [1]:
• скорость работы пользователей;
• количество человеческих ошибок;
• скорость обучения;
• субъективное удовлетворение от работы.
При этом подразумевается, что соответствие интерфейса задачам
пользователя является неотъемлемым свойством интерфейса.
Удобство интерфейса
Удобство использования ПИ описывается при помощи критериев:
1. Понятность, то есть легкость обучения.
2. Трудоемкость решения задач с использованием ПИ (иначе говоря,
скорость работы).
3. Частота ошибок при работе с ПИ.
4. Субъективное удовлетворение от работы с ПИ (обратно пропорционально
количеству жалоб).
Понятность, обучение
Обучение возможно только при наличии стимула и знания о
возможности обучения. Для начала обучения надо информировать о
функциональности и пользах от каждой функции. Простота и понятность не
исключают, а только ускоряют обучение. Основные средства обучения:
1. Общая «понятность» системы.
2. Наличие обучающих материалов и их качество.
Понятность нельзя оценить количественно. Оценка понятности
автором и пользователем никогда не совпадает. Понимание возможно в
пределах устоявшейся системы понятий. Механизмы понятности:
1. Ментальная модель: понятен набор сущностей и правила работы с
ним. Понимать сущность происходящих процессов необязательно.
«Сохранить документ или нет?» – неясно, что, зачем, куда сохранить,
почему это надо. При формировании ментальных моделей возможны
9
либо ритуал, либо разъяснение сущностей. Элементы,
функциональность которых зависит от контекста, усложняют
ментальную модель, и их лучше не использовать.
2. Метафора: интерфейс понятен по аналогии с известными
устройствами (рабочий стол Windows, WinAmp). Недостатки метафор:
а. не для любой функциональности можно подобрать метафору;
б. подходящая метафора – только та, о которой знают все, и
которую легко передать интерфейсом;
в. метафора сковывает функциональные возможности;
г. копируемый образец не всегда работает идеально;
д. часто метафору достаточно использовать в документации, не
перенося в интерфейс.
3. Наглядность (affordance): интерфейс подсказывает принципы работы.
Способы передачи аффорданса:
а. повторение конфигурации объекта конфигурацией интерфейса
(рис. 2);
б. видимая принадлежность управляющих элементов объекту;
в. визуальное совпадение аффордансов реальных объектов с
аффордансами интерфейсов (кнопка предлагает на себя нажать);
г. изменение свойств объекта при подведении курсора (аналог
тактильного исследования).
Рис. 2. Отсутствие (слева) и разные варианты аффорданса в дизайне
газовой плиты
4. Стандарт: хорошо понимается то, что привычно (популярно).
Естественным способом организации работы является
непосредственное (предметное) манипулирование объектами. Его удобно
пояснить на примере удаления файлов. Такое простое действие, если его
проанализировать, состоит из следующих элементарных действий (табл. 1).
Первые три действия у любого метода одинаковы, различие между
методами только в конце процедуры.