ЛР_1

Интернет-программирование
Целеориентированный подход
Целеориентированный
подход
к
разработке
прототипа
программного
продукта – от проведения
исследований
пользовательской аудитории до построения
псевдореального
прототипа
посредством
персонажей
и сценариев.
2
Целеориентированный подход
Диапазон выбора решений
на каждом уровне ограничен
решениями,
принятыми
на
нижних уровнях.
В то же время, зависимости
направлены в обе стороны,
и решения, принимаемые на
верхних уровнях, иногда требуют
переоценки решений на нижних
уровнях.
3
1. Уровень стратегии
Набор возможностей, структура, информационный дизайн
полностью определяются стратегией.
Первый уровень включает сбор, анализ информации,
определение
масштабов
проекта,
изучение
целей
и потребностей пользовательской аудитории, определение
окончательных целей.
Стратегия определяет:
1) Что планируют получить от приложения разработчик?
2) Что планируют получить от приложения пользователи?
4
Примерное распределение
основных типов интернет-приложений
5
1.1. Цели пользовательской аудитории
Определение целей пользователей может оказаться
сложной задачей.
Всю совокупность пользовательских целей можно
разделить на обозримые группы, путем сегментации
пользовательской аудитории: по демографическим,
психографическим критериям, профессиональным ролям,
отношению к современным технологиям и т.п.
Иногда потребности разных групп пользователей не
просто различны, а прямо противоположны.
6
1.2. Целевые аудитории
Клиенты (потенциальные и действующие).
Посещают интернет-приложение для того, чтобы
– приобрести товар или услугу;
– получить информацию о компании;
– отправить запрос на коммерческое предложение;
– получить техническую консультацию («загрузить» руководство или
справочные материалы);
– отправить жалобу, претензию или отзыв;
– познакомиться с демоверсией продукта;
– зарегистрироваться на мероприятие;
– найти контактную информацию.
7
1.3. Целевые аудитории
Бизнес-партнеры. Цель – получение информации о партнерских
программах (скидках, сертификации).
Инвесторы – оценка уровня бизнеса компании, ознакомление со
списком
бизнес-партнеров
компании,
изучение
портофлио,
сертификатов, наград.
СМИ. Цель – пресс-релизы, фотографии.
Конкуренты посещают интернет-приложение для того, чтобы
изучить предложения, каталог продукции, перенять маркетинговые
приемы.
Соискатели работы – узнать о вакансиях и условиях работы.
Сотрудники компании – читают новости, общую информацию
о компании, участвуют в ведении корпоративного блока.
Органы власти – контроль деятельности компании.
Общественные
организации
–
получение
информации
о спонсорских, благотворительных и экологических программах,
8
поддерживаемых компанией.
1.4. Сегментация
пользовательской аудитории
Исследователи рынка обычно делят аудиторию на сегменты
(демографические профили) по:
– демографическим критериям;
– психографическим критериям;
– отношению пользователей к современным
технологиям и к самой Всемирной паутине;
– профессиональным ролям.
9
1.5. Персонажи
Лучший способ успешно удовлетворить потребности
пользовательской
аудитории
–
проектировать
для
конкретных
типов
людей
с
конкретными
целями
и потребностями.
Чтобы сделать пользователей более конкретными,
можно
превратить
их
в
персонажи
(модели
пользователей, профили).
Персонаж
–
вымышленный
представитель
пользователей со сходными ключевыми характеристиками,
созданный
на
основе
результатов
исследования
пользовательской аудитории.
10
1.6. Пример модели пользователя
11
1.7. Пример модели пользователя
12
1.8. Демонстрация
полезности персонажей
Иногда потребности разных групп пользователей не просто различны,
а прямо противоположны. Возможности, которые понравятся одним
пользователям, возможно будут противоречить потребностями других.
Очевидно,
одним
решением
невозможно
удовлетворить
потребности всех пользователей.
Возникает выбор: либо
сосредоточиться на одном сегменте аудитории и исключить другой, либо
предоставить пользователям два разных способа решения одной задачи.
13
1.9. Демонстрация
сценариев поведения
14
2. Уровень набора возможностей
На уровне набора возможностей выполняется
переход от абстрактного вопроса «Для чего мы
разрабатываем данное приложение?», к вопросу:
«Что мы планируем разработать?»
На данном уровне выделяют перечень функций
программного продукта (функциональные требования),
а также информационные пространства (требования
к контентной части).
15
2.1. Уровень набора возможностей
Разработку интернет-приложения, обслуживающего сложный
бизнес-процесс, можно представить в виде двух этапов:
Проектирование
Реализация
на первом этапе разрабатываются
системные модели бизнес-процесса,
в т. ч. динамические, задающие его
существенные состояния, переходы
между ними и действия, которые
предусмотрены для данных состояний;
на втором этапе разрабатывается
серверный сценарий, реализующий
действия, предусмотренные на первом
этапе
16
2.2. Уровень набора возможностей
Проектирование
функциональных
возможностей
интернет-приложений
базируется
на
методологии
структурного
анализа,
предполагающей
на
этапе
проектирования разработку комплекса системных моделей
функционирования, которые в дальнейшем служат основой
для реализации, тестирования, установки и эксплуатации
системы.
Функционирование
интернет-приложений
на
концептуальном
уровне
абстракции
может
быть
представлено в виде модели с конечным множеством
состояний, в которой заданы состояния функционирования,
возможные
переходы
состояний,
действия,
ассоциированные с состояниями.
17
Абстрактность
2.3. Этапы разработки
интернет-приложений
Неформальное
описание
aнализ требований
Платформо-независимая
модель (PIM)
инструмент трансформации
Кокретность
Платформо-зависимая
Модель (PSM)
Платформо-зависимая
Модель (PSM)
кодирование
Программный код
Программный код
Платформа программирования
Платформа программирования
18
2.4. Модель
клиент-серверного взаимодействия
CIM
(Computation
Independent
Model)
–
модель,
описывающая общие
требования к разрабатываемому
интернет-приложению.
PIM (Platform-Independent Model) – модель, описывающая
логику, основные задачи и принципы функционирования
интернет-приложения независимым от технологий реализации
образом.
PSM (Platform Specific Mode) – модель, описывающая логику,
основные задачи и принципы функционирования интернетприложения в зависимости от конкретной платформы.
19
2.5. Модель
клиент-серверного взаимодействия
20
2.6. Модель
клиент-серверного взаимодействия
21
2.7. Модель
клиент-серверного взаимодействия
sta Аноним-Свой
act Заголовок
sta Сброс
use Caption
sub Вход
jmp Транзит — targs = "Аноним"
behave = "saveOld"
sta Аноним
act Привет-Аноним
use Hello_Anonim
jmp СлужВход — targs = "Аутент"
inp inpLogin
behave ="findNew"
btn btnVhod — value = "Вход"
sta Аутент
jmp Транзит — targs = "Свой Аноним"
behave ="findNew"
use Autentification
use Unset
sub ОбластьПогружения
sub Инфо
sta Телефон
act О-Телефоне
use GetTel
jmp Дать-Email — targs = "Email"
sta Свой
btn Tel — value = "Дать Email"
act Привет-Своему
use Hello_User
sub Авторизация targs = "Инфо"
targSesSelector = "ROLE"
CSMFunc = "UserCSM"
jmp Выход — targs = "Сброс"
behave = "saveOld"
btn btnVyhod — value = "Выход"
sta Email
act О-Email
use GetEmail
jmp Дать-Телефон — targs = "Телефонl"
btn Email — value = "Дать Телефон"
22
2.8. Модель
клиент-серверного взаимодействия
23
2.9. Модель
клиент-серверного взаимодействия
24
2.10. Требования к контенту.
Способ представления информации
Преимущества цветового кодирования:
–
привлекательная
компоновка,
возможность
разделения разметки изображения на области;
– усиление логической организации интерфейса;
–
привлечение
внимания
пользователей
к определенным областям разметки
(облегчает поиск,
привлекает внимание к ситуациям, требующим срочного
реагирования);
– облегчение процесса обработки информации.
25
2.11. Требования к контенту.
Способ представления информации
Пиктограмма – независимая от языка пользователя
разновидность графики, которая
– легко ассоциируется с информацией, которую несет;
– однозначно трактуется;
– хорошо отличается от других символов;
– обладает эстетической привлекательностью;
– занимает небольшой объем пространства;
– приемлема для различных культур (не вызывают
негативных эмоций).
26
2.12. Требования к контенту.
Способ представления информации
Рациональное использование видео предполагает:
– время одной последовательности видео не превышает
40-45 секунд (при большей длительности снижается
концентрация внимания);
– видео необходимо сопроводить индикацией того,
какая часть времени его демонстрации уже прошла и какая
часть осталась;
– отображать в небольшом окне;
– наличие навигационных элементов для управления
видео.
27
3. Уровень структуры
На уровне структуры определяется информационная
архитектура, обеспечивающая экономичное и эффективное
перемещение пользователей.
28
3.1. Нисходящий подход
к разработке информационной архитектуры
Есть два подхода к разработке информационной архитектуры:
нисходящий («сверху вниз») и восходящий («снизу вверх»).
Нисходящий
подход
к
разработке
информационной
архитектуры заключается в построении информационной
архитектуры начиная с самых общих категорий будущего
контента и функциональных возможностей, необходимых для
достижения целей. Структура служит пустой оболочкой для
контента м функциональности.
29
3.1. Нисходящий подход
к разработке информационной архитектуры
30
3.2. Восходящий подход
к разработке информационной архитектуры
Восходящий подход к разработке информационной архитектуры
состоит в выделении категорий из подкатегорий. Начиная
с элементов, которые группируются в категории низшего уровня,
а эти категории — в более крупные, выстраивается структура,
отражающая цели и потребности пользователей.
31
3.2. Восходящий подход
к разработке информационной архитектуры
32
3.3. Структура интернет-приложения
checkout.php
shipping.php
payment.php
billing.php
rewiew.php
checkout.php
shipping.php
payment.php
billing.php
rewiew.php
33
3.4. Структура интернет-приложения
Index.php
Category_1.php
Category_2.php
Category_3.php
Category_3.php
Page_1.php
Page_2.php
Page_3.php
Page_1.php
34
3.5. Структура интернет-приложения
Основные принципы проектирования структуры интернетприложения:
– разделы и подразделы должны быть выделены исходя из
решаемых пользователями задач, а не организационной
структуры компании;
– количество разделов верхнего уровня должно быть
минимизировано (обычно не более 5-7 разделов);
– желательно давать разделам стандартные названия;
– структура должна хорошо масштабироваться;
– необходимо обеспечить однозначность отнесения каждого
конкретного материала только к одному из разделов;
– в структуре сайта должны отсутствовать материалы,
не относящиеся, к какому-либо разделу;
– следует соблюдать непротиворечивость и последователь35
ность выделения разделов и подразделов.
4. Уровень компоновки
Уровень компоновки определяет, какую форму примет
функциональность.
Если на уровне структуры рассматриваются масштабные
понятия информационной архитектуры, то на данном
уровне внимание концентрируется на отдельных
страницах и их составных элементах.
Компоновка приложения проектируется так, чтобы
организация
этих
элементов
была
максимально
эффективной, например, чтобы пользователь запомнил
логотип и
при необходимости легко идентифицировал
кнопочный элемент поиска, корзины т.п.
36
4.1. Уровень компоновки
Пользовательский
интерфейс
–
система
правил, принципов, средств, регламентирующая
и обеспечивающая взаимодействие программного
продукта с пользователем.
Разработка пользовательского интерфейса –
проектирование
программных
продуктов,
соответствующих
практическим,
физическим
и эмоциональным потребностям широкого круга
пользователей.
37
4.2. Основные принципы компоновки










Естественность (интуитивность);
Непротиворечивость;
Неизбыточность ввода;
Непосредственный доступ к системе помощи;
Гибкость;
Управляемость;
Избыточность;
Ориентация;
Обратная связь;
Реверсивность.
38
4.3. Основные принципы компоновки
39
4.4. Основные компоненты
пользовательского интерфейса
Основные компоненты, формирующие интерфейс:
интерактивные элементы (кнопки, активные
изображения, раскрывающиеся списки);
 элементы
эстетического
оформления
(фоновые и изображения, звуковое сопровождение,
анимационные эффекты, графика);
 пассивные
элементы
(текст,
таблицы,
разделители, фреймы);
 системы навигации.

40
4.5. Системы навигации:
глобальные, локальные и контекстные
Глобальная навигация обеспечивает доступ к значительной части
приложения. Обычно реализуется в виде панели навигации,
располагаемой в верхней части страницы.
Локальная навигация предоставляет пользователям доступ к
«ближайшим» элементам архитектуры.
Контекстная навигация встроена непосредственно в содержимое
страницы (и поэтому иногда называется микронавигацией).
Сервисная навигация предоставляет доступ к элементам, которые
не нужны пользователю повседневно, но которые принято
предоставлять ради его удобства.
Точки контакта это маркетинговое понятие, обознаающее все
множество ситуаций, в которых клиент может взаимодействовать с
компанией: – электронная почта; – телефония (стационарная,
сотовая или Skype); – системы обмена мгновеннымисообщениями
41
(ICQ, Google Talks и др.); – форум; – социальные сети.
4.6. Системы навигации:
глобальные, локальные и контекстные
42
4.7. Системы навигации
43
4.8. Системы навигации
44
4.9. Системы навигации
45
5. Прототип приложения
Прототипы
приложения
–
пространство,
в котором объединяется информационный дизайн,
дизайн интерфейса и дизайна навигации в единую
конструкцию.
Прототип – это схематическое представление всех
компонентов страницы и их взаимного расположения.
Прототип
приложения
объединяет
все
компоновочные решения в единую систему, которая
будет являться справочником на этапе разработки
визуального дизайна и при реализации приложения.
Прототипы
могут
иметь
различный
уровень
детализации (бумажная версия, презентационная
версия, псевореальная версия, реальная версия).
46
5.1. Пример прототипа
программного продукта
47
5.2. Пример прототипа
программного продукта
48
Задание на лабораторную работу
Разработать бумажную версию прототипа
интернет-приложения используя целеориентированный подход.
Уровень стратегии.
1. Определить, что планируют получить от приложения разработчики?
2. Выбрать тип интернет-приложения.
3. Определить целевую аудиторию. Изучить цели и потребности
пользовательской аудитории.
4. Построить модель (профиль) пользователя для каждой группы
пользовательской аудитории.
Уровень набора возможностей
1.
Выделить
перечень
функций
программного
продукта
(функциональные требования),
а также описать требования к
контентной части.
49
Задание на лабораторную работу
Разработать бумажную версию прототипа
интернет-приложения используя целеориентированный подход.
Уровень структуры
1.
Построить
модель
информационной
архитектуры,
обеспечивающую эффективное перемещение пользователей.
Уровень компоновки
1.
Разработать
систему
правил,
принципов,
средств,
обеспечивающих
взаимодействие
программного
продукта
с
пользователем.
Выполнить компоновку основных элементов
(интерактивных, эстетического оформления, пассивных, систем
навигации) приложения.
2. Разработать прототип интернет-приложения.
50