Принципы проектирования графического пользовательского интерфейса.
Клиенты ГПИ:
Программируемый клиент
Браузерный клиент
Главный принцип при проектировании графического интерфейса – это ориентация его на пользователя.
Типичный поток управления (польователь<->экранная форма<->БД)
Согласованность
Соответствие стандартам поставщика ГПИ
соответствие стандартам в области именования, программирования и другим, разработанным в организации стандартам, связанным с графическим пользовательским интерфейсам (если приложение разрабатывается под ОС Windows, то следует при разработке учитывать принципы работы в ГПИ Windows.)
Индивидуализация интерфейса – это простая настройка под персональные потребности , в то время как настройка - административная задача приспособления ПО к требованиям различных групп пользователей
Хорошо спроектированный интерфейс должен позволять пользователям экспериментировать и совершать ошибки, проявляя «терпимость» , (многоуровневую систему отмены операций)
Принцип обратная связь. Знать, что происходит, когда управление передается программе. Рекомендуется встраивать подсказки, например песочные часы, линию прогресса процесса.
Эстетичность влияет на зрительное восприятие системы. Удобство касается легкости, простоты, эффективности, надежности и продуктивности в использовании интерфейса. При разработке ГПИ следует учитывать фиксацию и движение человеческого глаза, использование цветов, чувство уравновешенности и симметрии, выравнивание и отступ между элементами, чувство пропорции, группирование связанных элементов и т.д.
Шаги разработки черновика ГПИ
Узнайте своего пользователя, Поймите назначение системы (С-требования)
Примените принципы хорошего экранного дизайна (С,D требования)
Подберите подходящий тип окон Разработайте системное меню (С,D требования)
Выберите соответствующие аппаратные устройства управления (С-требования)
Выберите соответствующие экранные устройства управления (С-требования)
Организуйте и создайте раскраску окон (С,D требования)
Выберите подходящие цвета (D требования)
Создайте осмысленные «значки» (С,D требования)
Предоставьте эффективные сообщения, обратную связь и руководство пользователя (D требования).
Узнайте своего пользователя
уровень знаний и опыт пользователя: компьютерная грамотность, системный опыт, опыт работы с подобными программами, образование, уровень чтения, машинопись
Физические характеристики: возраст, пол, развитость рук, физические недостатки.
Характеристики заданий и работы пользователей: способ использования ПО, частота, текучесть кадров, важность задания, повторяемость задания, предварительное обучение, категория работы.
Психологические характеристики: отношение к работе, мотивация, стиль процесса познания.
Примените принципы хорошего экранного дизайна
Единообразие экранов приложения, логичность каждого (соглашения, процедура, местоположение)
предположите откуда пользователь будет начинать свою работу (верхний левый угол?)
Навигация должна быть простой: выравненные похожие элементы, сгруппированные похожие элементы, границы вокруг похожих элементов.
Применить иерархию для подчеркивания порядка важности
принцип приятной визуализации эффектов (баланс, симметрия, регулярность, предсказуемость, простота, единообразие, пропорциональность.
предоставьте подписи (кнопкам)
Подберите подходящий тип окон
Окно свойств, Диалоговое окно, Окно сообщения, Окно с палитрой, Всплывающее окно.
Разработайте системное меню
1) Сделать главное меню. 2) показать все уместные альтернативы (только их) 3) Привести структуру меню в соответствие со структурой задачи приложения. 4) Минимизировать число уровней меню. Количество элементов главного меню должно быть от 5 до 9.
Выберите соответствующие аппаратные устройства управления
Экранные элементы управления – символы, появляющиеся на мониторе с помощью которых пользователь передает программе вводимые данные и свои намерения (значки, кнопки, текстовые окна, списки, …).
Организуйте и создайте раскраску окон
Правила компоновки многочисленных окон аналогичны правилам для дизайна одиночных окон + организация окон: соприкасающиеся или каскадные
Выберите подходящие цвета
Сначала рекомендуется попробовать черно-белую раскраску. Потом добавлять по одному цвету, убеждаясь в том, что это помогает пользователю. Рекомендуется соблюдать симметрию цветов (симметричный набор стандартной цветовой палитры, например синий – желтый – зеленый).
ГПИ для локального приложения
проектировании окон
проектировании элементов ввода и редактирования информации в окна
Главное окно
Разделение: вертикально или горизонтальное
Интерфейс: связанные списки с отступами, Элементы управления (+, -)
Вторичное окно
Диалоговые, Папка с вкладками, Выпадающий список, Окно сообщений.
Пункты меню объединяются в выпадающие списки, открывающиеся каскадом или всплывающие.
Пункты меню реагируют на события, генерируемые пользователем, запуская определенные процессы.
Для наиболее часто используемых пунктов меню разработчики создают панели кнопок – панель инструментов, представляющих собой пиктограммы, дублирующие функциональные свойства основных пунктов меню
Кнопки и другие средства управления
Средства управления предназначены для перехватывания, анализа и реализации событий, генерируемых пользователями - Командные кнопки, Другие средства управления.
Web-интерфейс
Пользовательские события программируются с помощью пунктов меню, командных кнопок и активных ссылок – гиперссылок
Строки меню и панели инструментов используются для реализации перехода с одной страницы на другую, а также для выполнения общих задач, таких как копирование, печать
Технология реализации Web-приложения
Виды Web-сайтов
Доска объявлений, Издательский сайт (электронные версии журналов)
Портал (публикует собственное информационное содержание и действует как шлюз доступа к web-сервисам и ресурсам – магазинам, серверам эл. почты)
Сайт некоммерческой организации (новости, контактные данные, загружаемые файлы)
Блог (содержит частную информацию)
Виртуальная галерея
Электронные магазины
Сайт сопровождения продукции (распространяет информацию, документацию, дает советы)
Сайты сетей интра и экстранет (позволяют сотрудникам получать доступ к ПО, эл. почте и другим ресурсам посредством локальной сети организации).
Web-приложение – это web-система, позволяющая пользователям реализовать бизнес-логику с помощью web- браузера или - это коллекция web- страниц взаимодействующая с посетителями, друг с другом и разнообразными ресурсами web- сервера, включая БД
Web-приложение выполняется целиком во фрейме браузера, в который входят строка заголовка, строка меню, панель кнопок и строка адреса.
Область содержания приложения состоит из собственных фреймов, включая фреймы навигации, командные кнопки и формы
Форма выводит на экран информацию, предназначенную для пользователя, а также дает ему возможность вводить данные и посылать собранную информацию серверу для дальнейшей обработки и вывода результатов на страницу
Рекомендации по разработке полей формы
Выберите: тип поля (произвольный текст, значение по умолчанию), правильный размер поля, формат представления величин
Предусмотрите возможность управления курсором как с помощью клавиатуры, так и с помощью мыши
Если возможно предусмотрите функции вырезания, копирования, вставки.
Присвойте полям соответствующие метки и выровняйте их справа или слева от полей
Разделяйте длинные формы на более короткие или убедитесь, что они не содержат ложных кнопок, т.е. визуальных элементов между полями, которые можно принять за конец формы.
Группируйте формы визуально понятным способом
По возможности используйте выпадающие списки, но заменяйте их открытыми списками с полосами прокрутки, если их количество велико
По возможности используйте флажки и радиокнопки
Приложение должно ограничить следующие функции
Кнопки для перехода вперед и назад, если этот переход не контролируется приложением
Кнопки и пункты меню, закрывающие окно просмотра и приводящие к неконтролируемому выходу из приложения
Редактирование, загрузку и печать приложений, имеющих доступ к информации, доступной для ограниченного круга пользователей
Проектирование навигации
Навигация происходит либо в результате действий пользователя, либо выполнения программы
Для локальных приложений осуществляется с помощью пунктов меню, панелей инструментов, командных кнопок и нажатий клавиш
В web- приложениях существуют аналогичные возможности, хотя визуальное представление может изменяться
Деловые приложения, связанные с транзакциями
порождают поток действий, связанных с последовательностью страниц.
Они дают пользователю возможность исследовать web- страницы на начальных стадиях процесса, когда он ищет услуги или товары, а позднее позволяют внести оплату и интерактивном режиме. Ввод данных осуществляется на небольшом количестве довольно длинных страниц и сопровождается средствами навигации для быстрого ввода без перехода между страницами.
Приложения, связанные с извлечением данных из БД
предоставляют возможности поиска в соответствии с разными критериями, последовательного просмотра единиц хранения и т.п.
Меню и ссылки - Элементы web- страницы:
Верхнее меню (для навигации по вэб сайту),
Левое меню (для навигации по страницам, находящимся вне пределов web- сайта),
Правое меню (выводит на экран страницы, находящиеся в пределах web- сайта).
Навигационные цепочки и панели – сообщают о местоположении текущей страницы в последовательности страниц
Навигационная панель – используются в приложениях, связанных с выполнением транзакций, показывая этапы процедур и не допуская возвращения на предыдущие стадии, пока не будет отменено выполнение операции
Кнопки
Если кнопки образуют группу или содержат примерно одинаковое количество текста, их размеры должны быть одинаковыми
Кнопки должны быть сгруппированы в отдельной области страницы, отдельно от полей для ввода данных
Если страница больше экранного окна, то кнопки внизу страницы должны повторяться наверху
Кнопки в окнах с вкладками должны разделяться на кнопки, относящиеся к отдельной вкладке, и кнопки, относящиеся ко всему окну
Кнопки должны программироваться так, чтобы не реагировать на многократные нажатия нетерпеливых пользователей
Имена кнопок должны точно отображать действия, которые они выполняют.
Моделирование навигации ГПИ
Модель навигации должна состоять из диаграмм, визуализирующих контейнеры и компоненты экранов и показывающих каким образом пользователь может переходить из одного окна в другое
Моделирование с помощью раскадровки работы пользователя (UX storyboards)
Добавление нового действующего лица в прецедент использования
Добавление характеристик удобства в прецедент использования
Идентификация элементов UX
Моделирование потоков в прецеденте использования с помощью элементов UX.
Моделирование навигации по экранам в прецеденте использования
Раскадровка UX
описывает аспекты моделирования, характерные для проектирования ГПИ, и связана с элементами:
Экраны презентации
Экранные события, на которые должна реагировать система
Данные, которые система должна выводить на экран
Данные, которые пользователь должен вводить в поля формы для последующей обработки.
Декомпозиция экрана на более мелкие области, которые должны управляться по отдельности.
Переход между экранами.
Профиль UX
Предусматривает стереотипы классов: screen, input form, compartment
4. Функциональные элементы UX: Пункт выпадающего меню, Пункт всплывающего меню, Кнопка панели инструментов, Командная кнопка, Двойной щелчок, Опция списка, Клавиша, Функциональная клавиша, «Быстрая» клавиша, Кнопка прокрутки, Кнопка закрытия окна
Стереотипы классов UML
screen. Абстракция экрана определяет окно, выводимое на экран
input form. Стереотип, представляющий собой контейнер формы, с помощью которого пользователь может взаимодействовать с системой, вводя данные или выполняя определенные действия
compartment. Стереотип, представляющий любую область экрана, которую можно использовать в многооконном режиме
Дескрипторы
Editable (редактируемое) – указывает может ли пользователь редактировать поле.
Visible (видимое) – указывает, может ли поле выводиться на экран или оно должно быть скрыто от пользователя.
Selectable (выбираемое) – указывает , можно ли выбрать поле (в зависимости от поле может быть скрытое или подсвечиваться)
Модель
Функциональная кооперация UX
Структурная кооперация
Структурная модель кооперации UX представляет собой навигационную диаграмму для прецедента использования, построенную на базе раскадровки UX. С этой точки зрения структурная модель UX демонстрирует направленные отношения между классами, чтобы показать возможные переходы между экранами, формами для ввода данных и разделами экрана