Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного анализа Татьяна Васильева Ведущий системный аналитик группы компаний CUSTIS Москва, 24 мая 2014 года
Nov 14, 2014
Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного анализа
Татьяна Васильева
Ведущий системный аналитик
группы компаний CUSTIS
Москва, 24 мая 2014 года
2/46
Применимость положений доклада
Заказная разработка
Ограничения на системы:
имеют GUI
содержат функционал без сложных алгоритмов расчета (частичная применимость в случае со сложными алгоритмами)
3/46
Глоссарий
Проектирование GUI – это визуализация будущего пользовательского интерфейса приложения в виде:
проволочной диаграммы (wireframe)
макета (mock-up)
прототипа (prototype)
4/46
Проволочная диаграмма
5/46
Макет
6/46
Прототип
7/46
Задачи и характеристики
Вид модели Трудоемкость Близость к реализации Задачи
Проволочная диаграмма
Низкая Низкая
Обсуждение функциональности
Обсуждение общих дизайнерских решений
Обсуждение общих решений по юзабилити
Макет Средняя Средняя+ Обсуждение дизайна Презентация
Прототип Высокая Высокая+Тестирование юзабилити
http://designmodo.com/wireframing-prototyping-mockuping/8/46
Wireframe в анализе: зачем?
9/46
Основная деятельность аналитика
Сбор требований
Выставление требований
Анализ, рефлексия Консультирование
10/46
Wireframe при взаимодействии с заказчиком
Коммуникация в наиболее доступной форме:
более точные требования к системе
ощущение причастности к разработке у заказчика
Снижение риска несоответствия ожиданий конечному результату
Заказчик в предвкушении
11/46
Wireframe для разработки
Однозначность требований
Быстрое восприятие
Единый стиль приложения
Сохранение контекста по функционалу
Arghhh! My brain!
12/46
Wireframe для тестирования
Четкие критерии соответствия требованиям
Написание тест-кейсов «сразу»
А что если повертеть вот тут?
13/46
Wireframe для системного анализа
UCs
ERD GUIИнформация
Детализация и дополнениефункционала
Уточнения логической модели
Функции
14/46
Wireframe для системного анализа
Критерий завершенности системного анализа
Шаблонное мышление как двигатель анализа
Ну и кто тут самый умный?
15/46
Проектирование GUI и анализ
Задача: спроектировать интерфейсную форму управления календарем банковских дней, не теряя существующий функционал (реинжиниринг)
Функционал: просмотр календаря
редактирование типа дня
продление календаря на следующий год
16/46
Пример: календарь банковских дней
GUI существующей системы
17/46
Логическая модель (ERD)
День.Тип:
Рабочий день Выходной день Праздник Специальный праздник
(перенос праздника на будний день) Специальный рабочий день
(выходной, ставший рабочим вследствие переноса)
Календарь
ТипОписаниеВыходные по умолчаниюПравило переноса праздников
День
ДатаТипКомментарий
* *
18/46
Начинаем рисовать
Отталкиваемся от основных сущностей
Работать с обеими сущностями будем на одном управляющих кнопокэкране
Более «общая» сущность Календарь – выше, более «частная» – День – ниже
Используем стандартные решения новой системы по расположению
19/46
Первое приближение
Появилась кнопка «Создать» по аналогии с другими формами
Пропала кнопка «Изменить», относящаяся к дню (будем вызывать карточку дня по всплывающему меню)
Места достаточно для отображения нескольких месяцев/года
20/46
Второе приближение
Появилась возможность выбора отображения Год/Месяц
21/46
Отображение дней в календаре
Раскраска соответствует бизнес-смыслу: в «черные» дни ведутся операции, выпускается отчетность и т. д., в «красные» – нет
Тип Цветовая разметка
Рабочий день Черный
Выходной день Красный
Праздник Красный
Специальный праздник Красный
Специальный рабочий день Черный
22/46
Типы дня
Зачем столько типов, вызывающих путаницу?Ответ: смешение признаков, необходимых для реализации разных задач:
ведение дней
продление календаря
информационные функции
Решение: выделить отдельный атрибут «Признак рабочего дня»
Все ли типы нужны для продления календаря?Ответ: нет, при выделении «Признака рабочего дня» «специальные дни» не нужны
23/46
Логическая модель. Вариант 2
Календарь
ТипОписаниеВыходные по умолчанию
День
ДатаПризнак рабочего дняТипКомментарий
* *
День.Признак рабочего дня:
Да
Нет
День.Тип:
Будний
Выходной
Праздник
День.Тип:
Рабочий день
Выходной день
Праздник
Специальный праздник
Специальный рабочий день
1 января
Было: Стало:
24/46
Форма управления календарем
25/46
Карточки дня, создания/продления календаря
26/46
Свойства календаря
При продлении/создании календаря создаются 365/366 экземпляров дня
Удаляем атрибут «Выходные по умолчанию»: пользователь проставляет вручную
Как удалить календарь на год? Можно продлить еще раз на удаляемый год
Продление календаря с любого года на любой
Правила переноса не используются
27/46
Логическая модель. Вариант 3
Удалены атрибуты календаря: Выходные по умолчанию
Правило переноса праздников
Изменена множественность
Календарь
ТипОписаниеВыходные по умолчаниюПравило переноса праздников
День
ДатаТипКомментарий
* *Было:
28/46
Итого
Изменен функционал: создание календаря (новая функция)
продление календаря (с выбором года)
Изменена логическая модель: атрибутный состав
множественность
29/46
Что говорят скептики?
30/46
Антитезис 1
31/46
Сплошная трата времени. В команде достаточно use cases, а GUI c заказчиком можно обсуждать на готовой системе.
Да надо просто правильно выбрать средство и построить процесс. И никогда не обсуждайте требования на готовой системе!
Антитезис 2
32/46
Внешний вид интерфейса – это элемент реализации. Проектируя GUI, аналитик ограничивает свободу разработчика.
GUI – это граница. The End of the Universe для разработчика. Не заставляйте разработчика смотреть на Вселенную снаружи – это вредно для здоровья.
Антитезис 3
33/46
Разработчик все равно сделает по-своему.
Разработчик сам себе не враг. Ему и кроме GUI есть чем заняться. К тому же, мы даем ему стартовое ускорение, а не точные координаты орбиты.
Антитезис 4
34/46
Проектирование GUI – это дело UX-специалиста, а не аналитика.
Если у вас в проекте есть UX-специалист. И даже если он есть, почему бы не пообщаться с ним при помощи wireframe’ов.
Антитезис 5
35/46
Проволочные диаграммы и макеты надо поддерживать.
Если вы поддерживаете другие артефакты анализа. При правильно выбранном инструменте затраты сопоставимы с поддержкой «текстовых» артефактов.
Антитезис 6
36/46
Проволочные диаграммы – слишком «тяжелый» артефакт для SCRUM.
Без паники! Аналитические артефакты вполне можно сочетать со SCRUM. В конце концов, рисуйте на доске!
А как? Советы
37/46
Принципы проектирования GUI
Интуитивная понятность, единообразие, ожидаемость
Функциональная полнота, простота достижения цели пользователя независимо от его роли
Неперегруженность
Возможность отменить действие
«Защита от дурака»
38/46
Средства проектирования GUI
Средство Описание Тип проектирования
Office Visio Pro 2013 Редактор диаграмм и блок-схем от Microsoft. Широко используется во многих компаниях
Макет
Balsamiq Mockups Одно из самых распространенных в мире средств для построения проволочных диаграмм
Проволочная диаграмма
Pencil Project Open Source на базе браузера Mozilla от вьетнамской компании Evolus Co.
Проволочная диаграмма
Axure RP Pro 7.0 Средство прототипирования сайтов и web-приложений от американской компании Axure
Прототип
39/46
Пример. Настройки системы
Интерфейс: форма управления системными настройками
Интерфейсные решения:
настройки представлены в виде дерева
в правой области отображаются значения и атрибуты настроек
40/46
MS Office Visio Professional 2003
41/46
Balsamiq Mockups
42/46
Pencil
43/46
Axure RP Pro 7.0
44/46
Результаты сравнения
СредствоЗатраченное
времяОценка
удобстваСтоимость
Office Visio Pro 2013 50 минут 3 $589.99 ($299.99)*
Balsamiq Mockups 20 минут 5 $79
Pencil Project > 1 ч 2 бесплатно
Axure RP Pro 7.0 30 минут 5 $589 ($289)
* в скобках указана стоимость пакета Standard
45/46
Спасибо!
Вопросы?
Татьяна Васильева
46/46