Разработка интерфейса прикладного программного обеспечения с использованием моделей построения «CyberCalk 1.0.»

4

МИНИСТЕРСТВО НАУКИ И ОБРАЗОВАНИЯ УКРАИНЫ
ДОНЕЦКИЙ НАЦИОНАЛЬНЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ

КАФЕДРА КСМ

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
к курсовой работе
по дисциплине

«Проектирование человеко-машинных интерфейсов »

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

«CyberCalk 1.0.»

Выполнила:

Ст. гр ПКД-07

Никифорова Маргарита Юрьевна

Проверил:

Хоруженко Андрей Сергеевич

Павлий Виталий Александрович

ДОНЕЦК - 2008

СОДЕРЖАНИЕ

Введение………………………………………………………………………………...2

1. Описание актуальности, целей и задач разрабатываемого ПО, его

назначение и область применения.................................................................................3

2. Обзор программных продуктов, имеющих аналогичные цели и назначение…...4

3. Разработка интерфейса ПО  и краткое описание основных

элементов управления………………………………………………………………….9         

3. 1 Описание назначения основных окон приложения, элементов управления.....9

3. 2 Описание функциональности ПО и способов взаимодействия

пользователя с ним........................................................................................................13

3. 3 Описание принципов композиции и организации элементов управления

и визуализации, а также описание выбранного стиля и цветовой гаммы...............13

4. Разработка алгоритмов и блок-схем, описывающих функциональность ПО….15

5. Разработка алгоритмов и блок-схем, описывающих процесс визуализации

и модификации поведения нестандартных управляющих элементов....................19

6. Разработка прикладного программного обеспечения….…………………...…...21

7. Разработка тестов юзабилити-тестирования………………………...…………...23   

Выводы………………………………………………………………………………...24

  Перечень ссылок…………....………………………………………………………...25

Приложение А. Техническое задание             

Приложение Б. Тексты (листинги) разработанного программного обеспечения...26

Приложение В. юзабилити-тест для ПО…………………………………………….36

ВВЕДЕНИЕ

Пользовательский интерфейс программы - это совокупность элементов, позволяющих пользователю программы управлять ее работой и получать требуемые результаты. Фактически, пользовательский интерфейс - это канал, по которому осуществляется взаимодействие пользователя и программы. Почему есть необходимость вообще говорить о ПИ? Дело в том, что исходя из самой идеи, программа пишется для пользователя, для удовлетворения его потребностей. В итоге же часто получается, что программист пишет программу "для себя", т.е. никому больше она не нужна, потому что кроме автора этой программы понять ее мало кто смог. И можно, конечно, доказывать, что алгоритм программы гениальный, и что код работает очень быстро и занимает меньше места по сравнению с аналогичными программами, но эти моменты будут интересовать только программистов, потому что будут понятны только им и только ими будут оценены должным образом. Пользователь же предъявляет совершенно иные требования, чем программист, так как смотрит на код снаружи, а не изнутри. И, соответсвенно, большей популярностью будет пользоваться та программа, прежде всего, с которой пользователи нашли общий язык, остальные же параметры интресуют пользователей во вторую очередь [1].

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

1 ОПИСАНИЕ АКТУАЛЬНОСТИ, ЦЕЛЕЙ И ЗАДАЧ РАЗРАБАТЫВАЕМОГО ПО, ЕГО НАЗНАЧЕНИЕ И ОБЛАСТЬ ПРИМЕНЕНИЯ

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

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

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

              Область применения: небольшие расчеты дома и на предприятиях.

2 ОБЗОР ПРОГРАММНЫХ ПРОДУКТОВ, ИМЕЮЩИХ АНАЛОГИЧНЫЕ ЦЕЛИ И НАЗНАЧЕНИЕ

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

Рассмотрим их работу более подробно на примере программы «Калькулятор» и «Блокнот».

Программы представлены на рисунках 2.1 и 2.2.

Рисунок 2.1 - Внешний вид программы «Калькулятор»

Рисунок 2.2 - Внешний вид программы «Блокнот»

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

Один из вариантов работы со стандартным калькулятором в Windows :

- вводим первое значение (будем называть это данным x). В поле ввода данных появляется введенное число, это показано на рисунке 2.3;

Рисунок 2.3 - Введенное первое данное

- далее выбираем операцию, которая необходима. В поле ввода данных введенное число не исчезает, при повторном нажатии на эту же операцию или иную ошибки не возникает, это показано на рисунке 2.4;

Рисунок 2.4 - Выбор операции

- вводим второе значение (будем называть это данным у). В поле ввода данных появляется введенное число, это показано на рисунке 2.5;

Рисунок 2.5 - Введение второго данного

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

Рисунок 2.6 - Вывод результата

- для сохранения результата в буферной переменной калькулятора, который возможно в дальнейшем использовать в последующих расчетах, необходимо нажать «MS» для занесения в буферную переменную полученного значения, «MR» для вставки сохраненного значения в текстовое поле, «MC» для очистки буферной переменной.

Этот процесс представлен на рисунках 2.7 – 2.9
 

Рисунок 2.7 - Сохранение данных в буферной переменной

Рисунок 2.8 - Вывод сохраненного данного

Рисунок 2.9 - Очистка буферной переменной

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

3. 1 Описание назначения основных окон приложения, элементов управления

В программе разработаны: диалоговое окно входа в программу Form2, основное окно Form1 и окно калькулятора Form4 .

Диалоговое окно входа в программу представлено на рисунке 3.1

Рисунок 3.1 - Диалоговое окно входа в программу

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

Основное окно Form1 представлено на рисунке 3.2. Рассмотрим более детально каждый элемент интерфейса.

Рисунок 3.2 – Основное окно

На рисунке 3.3 представлена строка меню, на которой размещены следующие пункты меню: Файл – Открыть : Сохранить : Выйти; Редактировать – Undo: Redo; Калькулятор – Показать: Скрыть; Справка – О программе.

Рисунок 3.3 - Строка меню

На рисунке 3.4 представлена зона текстового редактора с экранной клавиатурой. При нажатия сочетания клавиш (последовательно) CTRL и SHIFT будет изменен язык ввода, при нажатии на клавишу Caps Lock  будет выбран либо нижний, либо верхний регистр введения данных в текстовое поле.

Рисунок 3.4 - Окно выбора источника видео информации и запуск потока

На рисунке 3.5 представлена строка состояния, на которой отображается текущий язык ввода.

Рисунок 3.5 - Строка состояния

На рисунке 3.6 представлено полупрозрачное окно калькулятора, на котором располагаются следующие элементы: текстовое поле для ввода данных с клавиатуры, зона управляющих элементов, которые реализовывают основную задачу программы (функциональность). Ввод данных происходит следующим образом: пользователь вводит первое число, нажимает на кнопке нужной операции, вводим второе число, нажимает кнопку «=». При нажатии на клавишу ВСТАВИТЬ ДАННОЕ, число из тестового поля калькулятора будет перемещено в текстовое поле главного окна.

Рисунок 3.6 - Окно калькулятора

На рисунке 3.7 представлено полупрозрачное окно «Справка», на котором располагается изображение с название программы и кратким описанием ее предназначения.

Рисунок 3.7 - Окно «Справка»

3.2 Описание функциональности ПО и способов взаимодействия пользователя с ним

Вход в программу осуществляется следующим образом:

1. Пользователь запускает EXE файл программы;

2. В диалогом окне входа в программу пользователю необходимо выбрать клавишу «ОК» для запуска основного модуля приложения, либо «CANCEL», чтобы завершить сеанс работы программы;

3. После нажатия клавиши «ОК» откроется корневое – основное окно приложения Form.

Запуск окна калькулятора выполняется следующим образом:

1. В строке меню необходимо выбрать «Калькулятор» - «Показать»;

2. На экране откроется окно калькулятора.

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

1.После расчетов необходимых расчетов в окне калькулятор нажимается клавиша «ВСТАВИТЬ ДАННОЕ». Окно калькулятора закрывается, данное вставляется в текстовый редактор.

3. 3 Описание принципов композиции и организации элементов управления и визуализации, а также описание выбранного стиля и цветовой гаммы.

Назначение данного приложение обуславливает принципы композиции и элементы управления, использованные для создания данного приложения, которое написанно на языке C#. Как следствие были использованы стандартные компоненты Windows-приложений, такие как многооконный графический интерфейс (MDI), TextBox, Button, Label, RichTextBox, PictureBox, Panel, Timer, StatusBar.

Рассмотрим применение указанных компонентов.

В диалоговом окне Form2 использовались элементы: Button для подтверждения или отмены входа в основной модуль программы , Region для создания эффекта прозрачности и ограничения окружения – полей окна, PictureBox – для организации заднего фона и мигающей надписи программы, Timer – для задания периодических миганий надписи.

В окне Form1 были использованы компоненты: Panel для структурного размещения всех элементов в корневом окне, Button – для организации экранной клавиатуры, RichTextBox – для создания текстового поля, StatusBar – для отображения метки текущего языка, MenuStrip – для организации горизонтальной ленты меню.

В окне Form4 были использованы: Panel для структурного размещения всех элементов на окне, TextBox – для создания текстового поля для ввода данных, Button – для создания кнопок, которые контролируют работу калькулятора, PictureBox – для создания заднего фона.

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

4 РАЗРАБОТКА АЛГОРИТМОВ И БЛОК-СХЕМ, ОПИСЫВАЮЩИХ ФУНКЦИОНАЛЬНОСТЬ ПО

Представим некоторые функции программы в виде блок-схемы.
На рисунке 4.1 представлена блок-схема работы диалогового окна входа в программу Form2.

Рисунок 4.1 – Блок-схема работы диалогового окна Form2

На рисунке 4.2 представлена блок-схема работы основного окна Form1.

Рисунок 4.2 – Блок-схема работы основного окна Form1 (начало)

Рисунок 4.2 – Блок-схема работы основного окна Form1

(продолжение)

Рисунок 4.2 – Блок-схема работы основного окна Form1 (конец)

5 РАЗРАБОТКА АЛГОРИТМОВ И БЛОК-СХЕМ, ОПИСЫВАЮЩИХ ПРОЦЕСС ВИЗУАЛИЗАЦИИ И МОДИФИКАЦИИ НЕСТАНДАРТНЫХ УПРАВЛЯЮЩИХ ЭЛЕМЕНТОВ