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

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

Веб-интерфейсы удобны тем, что дают возможность вести совместную работу сотрудникам, не находящимся в одном офисе (например, веб-интерфейсы часто используются для заполнения различных баз данных или публикации материалов в интернет — СМИ).

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

Интерфейс пользователя — элементы и компоненты программы, которые способны оказывать влияние на взаимодействие пользователя с программным обеспечением. В том числе:

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

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

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

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

Чем проще выполнена верхняя часть страницы, тем легче запомнить название сайта и саму фирму.

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

• 2. Пользователь должен без труда находить интересующий его отчет и иметь возможность редактировать его, причем интерфейс должен быть интуитивно понятен
• 3. Отчеты должны быть распределены по группам. Необходимо обеспечить возможность поиска отчетов по части названия и описания. Для каждого отчета обычно предусмотрены: краткое и полное описание
• 4. При просмотре отчетов, у пользователя должна быть возможность сортировать список по дате или по названию.
• 5. Для наглядности необходимо предусмотреть специальные разделы, содержащие отчеты, сгруппированные по признакам. Допустим:
  • — «Новые» (отчеты недавно загруженные администратором);
  • — «Периодические» (отчеты которые необходимо заполнять периодически);
  • — «Незаполненные» (выборка из существующих отчетов, незаполненных пользователем.
• 6. Расчёт сумм, для числовой информации должен происходить на сервере и отображатся пользователю.
• 7. В АИС могут быть и информационные разделы:
  • — с данными о организациях (сфера деятельности, адрес, контактные телефоны и т. д.);
  • — с информацией по заполнению отчетности;
  • — с информацией по сроками сдачи отчетности;
  • — новости организаций;
  • — статьи (системы управления новостями и статьями предоставляют возможность использовать автоматическую информационную систему ещё и как информационный портал);
• 8. Рассылка новостей. Пользователь имеет возможность подписаться (и отписаться) на новости сайта АИС. После подписки пользователю периодически высылается информация о новых отчетах
• 9. Раздел «Вопросы и ответы» (FAQ), где пользователь может задать свой вопрос, а администратор сайта — ответить на него. Это способствует повышению качества обслуживания и лучшему развитию проекта.
• 10. Обратной, невидимой пользователю, стороной сайта АИС «Удаленный сбор и обработка данных» является система управления. Вход в систему администрирования осуществляется только после ввод администратором логина и пароля (логин и пароль администратор может менять). Администратор имеет возможность полностью управлять содержимым сайта:
  • — добавлять или удалять отчеты, описания;
  • — редактировать разделы сайта (новости, статьи, вопросы и ответы, отчеты и пр.);
  • — редактировать специальные разделы сайта (новые, периодические);
  • — редактировать контактную информацию Администратора автоматической информационной системы;
  • — составлять и рассылать письма с новостями сайта подписчикам;
  • — просматривать историю отчетов и статистику пользователей;
• 11. Загрузка форм отчетов должна осуществляться из файла Microsoft Excel. Файл, в котором описаны все поля, а также информация о пользователях, создается на локальном компьютере (ограничений к количеству полей, категорий). Затем файл загружается в базу данных автоматической информационной системы. После загрузки отчета данная форма автоматически появляется на сайте. Таким образом, можно оперативно изменять данные.
• 12. Аккуратная работа с цветом. Правильно примененный цвет может, например, передавать тонкие различия между однородными элементами. Неправильно примененный цвет может мешать работать с программой.

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

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

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

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

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

В АИС «Удаленный сбор и обработкаа данных» должен быть реализован удобный и быстрый поиск необходимого пользователю отчета, так как не все имеют неограниченный доступ в интернет, и многие оплачивают его по часам. Да и утомительный просмотр каталогов мало кому по душе. [11].

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

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

Цветовая гамма будет ориентированна на светлые серо-синие тона, удачно гармонирующие с черным цветом текста.

Весь интерфейс оболочки АИС единообразен и представляет собой Web-страницу с расположенными на ней элементами управления, формами и данными. Вся работа с АИС «Удаленный сбор и обработка данных» производится в окне браузера.

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

Рисунок 2.3 Главная форма.

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

Рисунок 2.4 Форма загрузки данных из Excel файла.

Рисунок 2.5 Импортированные из Excel данные Авторизация на сайте происходит при помощи Jscript с введением данных в появляющийся диалог, показанный на рисунке 2.6.

Рисунок 2.6 Диалог авторизации.