Реализация ПО: проектирование интерфейса пользователя

Содержание

Слайд 2

Виды интерфейсов Пользовательский интерфейс (англ. user interface, UI) является своеобразным коммуникационным

Виды интерфейсов


Пользовательский интерфейс (англ. user interface, UI) является своеобразным коммуникационным

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

Интерфейс

Графический

Текстовый

Слайд 3

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

Графический интерфейс

Графические интерфейсы обладают рядом преимуществ:
Их относительно просто изучить и использовать.


Каждая программа выполняется в своем окне
Режим полноэкранного отображения окон дает возможность прямого доступа к любому месту экрана.
Слайд 4

Проектирование интерфейса На схеме изображен итерационный процесс проектирования пользовательского интерфейса. Наиболее

Проектирование интерфейса

На схеме изображен итерационный процесс проектирования пользовательского интерфейса. Наиболее

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

Изучение и анализ действий пользователя

Создание проекта прототипа интерфейса

Оценка проекта пользователями

Разработка прототипа

Создание динамического прототипа

Оценка проекта пользователями

Исполняемый прототип

Реализация интерфейса

Слайд 5

Проектирование пользовательского интерфейса Полный цикл разработки интерфейса включает следующие этапы: Исследование

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

Полный цикл разработки интерфейса включает следующие этапы:
Исследование
Пользовательские сценарии
Структура интерфейса
Прототипирование

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

Общая структура интерфейса Экранные формы – это строительные блоки интерфейса пользователя,

Общая структура интерфейса
Экранные формы – это строительные блоки интерфейса пользователя, являющие

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

Принципы проектирования интерфейсов

Принципы проектирования интерфейсов

Слайд 8

Принципы проектирования интерфейсов Принцип простоты и адекватности Основная проблема - компромисс

Принципы проектирования интерфейсов

Принцип простоты и адекватности
Основная проблема - компромисс между простотой

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

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

Слайд 9

Принципы проектирования интерфейсов Принцип выравнивания Ни один элемент пользовательского интерфейса не

Принципы проектирования интерфейсов

Принцип выравнивания
Ни один элемент пользовательского интерфейса не должен

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

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

Слайд 10

Принципы проектирования интерфейсов Принцип избыточности Для улучшения восприятия структуры системы иногда

Принципы проектирования интерфейсов

Принцип избыточности
Для улучшения восприятия структуры системы иногда бывает необходимо

параллельное представление наиболее важных компонентов или взаимосвязей.

Названия элементов
продублированы
графическими образами

Повтор панели навигации внизу экрана
более простом оформлении

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

Слайд 11

Принципы проектирования интерфейсов Принцип визуальной иерархии Элементы, являющиеся частями друг друга,

Принципы проектирования интерфейсов

Принцип визуальной иерархии
Элементы, являющиеся частями друг друга, представляются в

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

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

Слайд 12

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

Принципы проектирования интерфейсов

Американский ученый-психолог Джордж Миллер обнаружил
закономерность, суть которой состоит в

том, что
кратковременная человеческая память может запомнить
и повторить только 7 ± 2 элемента.
Соответственно группировать элементы системы желательно
с учетом этого правила – то есть не более семи в группе,
в крайнем случае – девяти. Такие небольшие группы объектов наиболее хорошо воспринимаются пользователями без использования каких-либо специальных приемов. При этом группировка, естественно, должна быть осмысленной.
Слайд 13

Принципы проектирования интерфейсов Принцип удобства использования Важным моментом при создании интерфейсов

Принципы проектирования интерфейсов

Принцип удобства использования
Важным моментом при создании интерфейсов является «usability»
(usability

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

Принципы проектирования интерфейсов Принцип перевернутой пирамиды Вынести самую важную информацию и

Принципы проектирования интерфейсов

Принцип перевернутой пирамиды
Вынести самую важную информацию и элементы управления

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

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

Слайд 15

Взаимодействие с пользователем Разработчиками интерфейсов предусмотрены 5 основных стилей взаимодействия пользователя

Взаимодействие с пользователем
Разработчиками интерфейсов предусмотрены 5 основных стилей взаимодействия

пользователя с системой:
1. Непосредственное манипулирование.
2. Выбор из меню.
3. Заполнение форм.
4. Командный язык.
5. Естественный язык.
Слайд 16

Стили взаимодействия Преимущества и недостатки стилей взаимодействия

Стили взаимодействия

Преимущества и недостатки стилей взаимодействия

Слайд 17

Стили взаимодействия Преимущества и недостатки стилей взаимодействия

Стили взаимодействия

Преимущества и недостатки стилей взаимодействия

Слайд 18

Разделение интерфейсов Модель с разделенными интерфейсом командного языка и графическим интерфейсом

Разделение интерфейсов

Модель с разделенными интерфейсом командного языка и графическим интерфейсом лежит

в основе некоторых операционных систем, в частности Linux.

Операционная система

Управление
интерфейсом

Графический
интерфейс
пользователя

Интерпретатор
Командного
языка

Интерфейс
Командного
языка

Слайд 19

Представление информации С помощью визуальных средств информацию можно представлять графически, например

Представление информации

С помощью визуальных средств информацию можно представлять графически, например

в виде графиков и диаграмм

Представление данных

ПО для представления данных

Дисплей

Слайд 20

Представление информации Что нужно пользователю: точные значения данных или соотношения между

Представление информации

Что нужно пользователю: точные значения данных или соотношения между

значениями?
Насколько быстро будут происходить изменения значений данных? Нужно ли немедленно показывать пользователю изменение значений?
Должен ли пользователь предпринимать какие-либо действия в ответ на изменение данных?
Нужно ли пользователю взаимодействовать с отображаемой информацией посредством интерфейса с прямым манипулированием?
Информация должна отображаться в текстовом (описательно) или числовом формате? Важны ли относительные значения элементов данных?

Принимая решение по представлению данных, разработчик должен учитывать ряд факторов:

Слайд 21

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

Альтернативы

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

Слайд 22

Использование в интерфейсах цвета Используйте ограниченное количество цветов Используйте разные цвета

Использование в интерфейсах цвета

Используйте ограниченное количество цветов
Используйте разные цвета для показа

изменений в состоянии системы
Для помощи пользователю используйте цветовое кодирование
Используйте цветовое кодирование продуманно и последовательно
Осторожно используйте дополняющие цвета
Слайд 23

Пример неправильного использования цветов

Пример неправильного использования цветов

Слайд 24

Средства поддержки пользователя Одним из основных аспектов проектирования пользователя является справочная

Средства поддержки пользователя
Одним из основных аспектов проектирования пользователя является справочная система.

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

Средства поддержки пользователя Факторы проектирования текстовых сообщений

Средства поддержки пользователя

Факторы проектирования текстовых сообщений

Слайд 26

Средства поддержки пользователя Факторы проектирования текстовых сообщений

Средства поддержки пользователя

Факторы проектирования текстовых сообщений

Слайд 27

Сообщения об ошибках Первое впечатлесообщениях ошибках, они должны:ние пользователя о системе

Сообщения об ошибках

Первое впечатлесообщениях ошибках, они должны:ние пользователя о системе

основано на
Быть последовательными и конструктивными
Быть вежливыми, краткими, не содержать оскорблений.
Не содержать звуковых сигналов, которые могут сбить с толку посетителей.
Желательно:
Связать сообщение с контекстно-зависимой справкой.
Включить в сообщение варианты исправления ошибки.
Слайд 28

Сообщение об ошибках Это сообщение скорректировано плохо: Оно обвиняет пользователя в

Сообщение об ошибках

Это сообщение скорректировано плохо:
Оно обвиняет пользователя в совершении ошибки.
Не

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

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

Слайд 29

Справочная система В связи с тем, что система справочная система имеет

Справочная система

В связи с тем, что система справочная система имеет иерархическую

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

Пример справочной системы

Пример справочной системы

Слайд 31

Справочная система Тексты справочной системы должны быть: Написаны совместно с создателями

Справочная система

Тексты справочной системы должны быть:
Написаны совместно с создателями приложения.
Продуманы так,

чтобы его можно было прочитать в окне малого размера(только необходимая информация).
Адаптированы к неопытному пользователю.
Слайд 32

Документация пользователя Документация пользователя должна содержать 5 документов: Функциональное описание, в

Документация пользователя

Документация пользователя должна содержать 5 документов:
Функциональное описание, в котором

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

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

Документация пользователя


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

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

Оценивание интерфейса Это часть общего процесса тестирования и аттестации систем ПО,

Оценивание интерфейса

Это часть общего процесса тестирования и аттестации систем ПО, в

котором оценивается удобство использования и степень соответствия интерфейса требованиям пользователя.
Показатели удобства использования.
Слайд 35

Оценивание интерфейса Существуют простые и не дорогостоящие методики оценивания, позволяющие выявить

Оценивание интерфейса

Существуют простые и не дорогостоящие методики оценивания, позволяющие выявить

отдельные дефекты в интерфейсах.
Анкеты, в которых пользователи оценивают интерфейс.
Эти сведения дают возможность разработчикам зафиксировать, пользователи с каким уровнем знаний имеют проблемы с интерфейсом.
Наблюдения за работой пользователей.
Позволяют отслеживать, какие используются сервисы, совершаемые ошибки, как пользователи взаимодействуют с системой.
Видеонаблюдения типичного использования системы.
Может оказаться полезным для обнаружения проблем, но для уточнения используются другие методы оценивания.
Добавление в систему программного кода, который собирал бы информацию о наиболее часто используемых системных сервисах и наиболее распространенных ошибках.
Способствует изменению интерфейса так, чтобы доступ к наиболее часто использующимся операциям был минимален.
Слайд 36

Функциональное моделирование систем с использованием методологии DFD

Функциональное моделирование систем с использованием методологии DFD

Слайд 37

DFD – Data Flow Diagrams – диаграммы потоков данных Модель системы

DFD – Data Flow Diagrams – диаграммы потоков данных
Модель системы определяется

как иерархия диаграмм потоков данных, описывающих асинхронный процесс преобразования информации от ее входа в систему до выдачи пользователю.
Главная цель такого представления – продемонстрировать, как каждый процесс преобразует свои входные данные в выходные, а также выявить отношения между этими процессами.
Слайд 38

Основные компоненты диаграмм потоков данных Основными компонентами диаграмм потоков данных являются:

Основные компоненты диаграмм потоков данных

Основными компонентами диаграмм потоков данных являются:
внешние сущности
системы

и подсистемы
процессы
накопители данных
потоки данных.
Слайд 39

Нотации, используемые в DFD-моделировании Примечание. В зависимости от используемой нотации графическое представление элементов диаграмм будет различным

Нотации, используемые в DFD-моделировании

Примечание. В зависимости от используемой нотации графическое представление

элементов диаграмм будет различным
Слайд 40

Внешняя сущность Представляет собой материальный объект или физическое лицо, являющееся источником

Внешняя сущность

Представляет собой материальный объект или физическое лицо, являющееся источником или

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

Система и подсистема При построении модели сложной системы она может быть

Система и подсистема

При построении модели сложной системы она может быть представлена

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

Процесс Представляет собой преобразование входных потоков в выходные в соответствии с

Процесс

Представляет собой преобразование входных потоков в выходные в соответствии с определенным

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

Процесс !!!!! Процесс отличается от системы/подсистемы по полю наименования!!!!

Процесс

!!!!! Процесс отличается от системы/подсистемы по полю наименования!!!!

Слайд 44

Накопитель данных Это абстрактное устройство для хранения информации, которую можно в

Накопитель данных

Это абстрактное устройство для хранения информации, которую можно в любой

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

Примеры: ящик в картотеке, таблицы в ОЗУ, файл на электронном носителе
Примечание: В нотациях Гейна-Сарсона и Йордона-ДеМарко графическое представление данного элемента аналогичное.

Слайд 45

Поток данных Определяет информацию, передаваемую через некоторые соединения от источника к

Поток данных

Определяет информацию, передаваемую через некоторые соединения от источника к приемнику.

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

Нумерация объектов

Нумерация объектов

Слайд 47

Уровни DFD-модели Уровень системы

Уровни DFD-модели

Уровень системы

Слайд 48

Построение иерархии DFD 1. Построение диаграмм уровня системы и подсистемы

Построение иерархии DFD

1. Построение диаграмм уровня системы и подсистемы

Слайд 49

Построение иерархии DFD 2. Построение диаграмм уровня процесса

Построение иерархии DFD

2. Построение диаграмм уровня процесса

Слайд 50

Пример DFD-модели постройки дачного домика 1. Контекстная диаграмма уровня системы

Пример DFD-модели постройки дачного домика

1. Контекстная диаграмма уровня системы

Слайд 51

Пример DFD-модели постройки дачного домика 2. Диаграмма уровня подсистемы

Пример DFD-модели постройки дачного домика

2. Диаграмма уровня подсистемы