Выступление Татьяны Васильевой, нашего ведущего системного аналитика направления «Финансовые институты», на Analyst Days (24 мая 2014 года, Москва).

1. Analyst’s Guide to GUI:
Проектирование интерфейсов
как элемент системного анализа
Татьяна Васильева
Ведущий системный аналитик
группы компаний CUSTIS
Москва, 24 мая 2014 года

2. 2/46

3. Применимость положений доклада
 Заказная разработка
 Ограничения на системы:
 имеют GUI
 содержат функционал без сложных алгоритмов
расчета (частичная применимость в случае
со сложными алгоритмами)
3/46

4. Глоссарий
Проектирование GUI – это визуализация
будущего пользовательского интерфейса
приложения в виде:
 проволочной диаграммы (wireframe)
 макета (mock-up)
 прототипа (prototype)
4/46

5. Проволочная диаграмма
5/46

6. Макет
6/46

7. Прототип
7/46

8. Задачи и характеристики
Вид модели Трудоемкость
Близость
к реализации
Задачи
Проволочная
диаграмма
Низкая Низкая
 Обсуждение
функциональности
 Обсуждение
общих дизайнерских
решений
 Обсуждение
общих решений
по юзабилити
Макет Средняя Средняя
+
 Обсуждение дизайна
 Презентация
Прототип Высокая Высокая
+
Тестирование юзабилити
http://designmodo.com/wireframing-prototyping-mockuping/
8/46

9. Wireframe в анализе: зачем?
9/46

10. Основная деятельность аналитика
Сбор
требований
Выставление
требований
Анализ,
рефлексия Консультирование
10/46

11. Wireframe
при взаимодействии с заказчиком
 Коммуникация в наиболее доступной форме:
 более точные требования к системе
 ощущение причастности к разработке у заказчика
 Снижение риска несоответствия ожиданий
конечному результату
Заказчик
в предвкушении
11/46

12. Wireframe для разработки
 Однозначность требований
 Быстрое восприятие
 Единый стиль приложения
 Сохранение контекста по функционалу
Arghhh!
My brain!
12/46

13. Wireframe для тестирования
 Четкие критерии соответствия требованиям
 Написание тест-кейсов «сразу»
А что если
повертеть вот тут?
13/46

14. Wireframe для системного анализа
UCs
ERD GUI
Информация
Детализация
и дополнение
функционала
Уточнения логической модели
Функции
14/46

15. Wireframe для системного анализа
 Критерий завершенности системного
анализа
 Шаблонное мышление как двигатель
анализа
Ну и кто тут
самый умный?
15/46

16. Проектирование GUI и анализ
 Задача: спроектировать интерфейсную
форму управления календарем банковских
дней, не теряя существующий функционал
(реинжиниринг)
 Функционал:
 просмотр календаря
 редактирование типа дня
 продление календаря на следующий год
16/46
Пример: календарь банковских дней

17. GUI существующей системы
17/46

18. Логическая модель (ERD)
День.Тип:
 Рабочий день
 Выходной день
 Праздник
 Специальный праздник
(перенос праздника на будний день)
 Специальный рабочий день
(выходной, ставший рабочим вследствие переноса)
Календарь
Тип
Описание
Выходные по умолчанию
Правило переноса праздников
День
Дата
Тип
Комментарий
* *
18/46

19. Начинаем рисовать
 Отталкиваемся от основных сущностей
 Работать с обеими сущностями будем
на одном управляющих кнопокэкране
 Более «общая» сущность Календарь –
выше, более «частная» – День – ниже
 Используем стандартные решения новой
системы по расположению
19/46

20. Первое приближение
 Появилась кнопка «Создать» по аналогии с другими
формами
 Пропала кнопка «Изменить», относящаяся к дню
(будем вызывать карточку дня по всплывающему меню)
 Места достаточно для отображения нескольких
месяцев/года
20/46

21. Второе приближение
 Появилась возможность выбора отображения
Год/Месяц
21/46

22. Отображение дней в календаре
 Раскраска соответствует бизнес-смыслу:
в «черные» дни ведутся операции, выпускается
отчетность и т. д., в «красные» – нет
Тип Цветовая разметка
Рабочий день Черный
Выходной день Красный
Праздник Красный
Специальный праздник Красный
Специальный рабочий день Черный
22/46

23. Типы дня
 Зачем столько типов, вызывающих путаницу?
Ответ: смешение признаков, необходимых
для реализации разных задач:
 ведение дней
 продление календаря
 информационные функции
Решение: выделить отдельный атрибут
«Признак рабочего дня»
 Все ли типы нужны для продления календаря?
Ответ: нет, при выделении «Признака рабочего дня»
«специальные дни» не нужны
23/46

24. Логическая модель. Вариант 2
Календарь
Тип
Описание
Выходные по умолчанию
День
Дата
Признак рабочего дня
Тип
Комментарий
* *
 День.Признак рабочего дня:
 Да
 Нет
 День.Тип:
 Будний
 Выходной
 Праздник
 День.Тип:
 Рабочий день
 Выходной день
 Праздник
 Специальный праздник
 Специальный рабочий
день
1 января
Было: Стало:
24/46

25. Форма управления календарем
25/46

26. Карточки дня,
создания/продления календаря
26/46

27. Свойства календаря
 При продлении/создании календаря
создаются 365/366 экземпляров дня
 Удаляем атрибут «Выходные по умолчанию»:
пользователь проставляет вручную
 Как удалить календарь на год? Можно
продлить еще раз на удаляемый год
 Продление календаря с любого года
на любой
 Правила переноса не используются
27/46

28. Логическая модель. Вариант 3
 Удалены атрибуты календаря:
 Выходные по умолчанию
 Правило переноса праздников
 Изменена множественность
Календарь
Тип
Описание
Выходные по умолчанию
Правило переноса праздников
День
Дата
Тип
Комментарий
* *
Было:
28/46

29. Итого
 Изменен функционал:
 создание календаря (новая функция)
 продление календаря (с выбором года)
 Изменена логическая модель:
 атрибутный состав
 множественность
29/46

30. Что говорят скептики?
30/46

31. Антитезис 1
31/46
Сплошная трата времени.
В команде достаточно use cases,
а GUI c заказчиком можно
обсуждать на готовой системе.
Да надо просто правильно выбрать
средство и построить процесс.
И никогда не обсуждайте требования
на готовой системе!

32. Антитезис 2
32/46
Внешний вид интерфейса –
это элемент реализации. Проектируя
GUI, аналитик ограничивает свободу
разработчика.
GUI – это граница. The End of the
Universe для разработчика.
Не заставляйте разработчика
смотреть на Вселенную снаружи –
это вредно для здоровья.

33. Антитезис 3
33/46
Разработчик все равно сделает
по-своему.
Разработчик сам себе не враг.
Ему и кроме GUI есть чем заняться.
К тому же, мы даем ему стартовое
ускорение, а не точные координаты
орбиты.

34. Антитезис 4
34/46
Проектирование GUI – это дело
UX-специалиста, а не аналитика.
Если у вас в проекте есть UX-
специалист. И даже если он есть,
почему бы не пообщаться с ним
при помощи wireframe’ов.

35. Антитезис 5
35/46
Проволочные диаграммы
и макеты надо поддерживать.
Если вы поддерживаете другие
артефакты анализа. При правильно
выбранном инструменте затраты
сопоставимы с поддержкой
«текстовых» артефактов.

36. Антитезис 6
36/46
Проволочные диаграммы –
слишком «тяжелый» артефакт
для SCRUM.
Без паники! Аналитические
артефакты вполне можно сочетать
со SCRUM. В конце концов, рисуйте
на доске!

37. А как? Советы
37/46

38. Принципы проектирования GUI
 Интуитивная понятность,
единообразие, ожидаемость
 Функциональная полнота,
простота достижения цели пользователя
независимо от его роли
 Неперегруженность
 Возможность отменить действие
 «Защита от дурака»
38/46

39. Средства проектирования 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. Пример. Настройки системы
Интерфейс: форма управления системными
настройками
Интерфейсные решения:
 настройки представлены в виде дерева
 в правой области отображаются значения
и атрибуты настроек
40/46

41. MS Office Visio Professional 2003
41/46

42. Balsamiq Mockups
42/46

43. Pencil
43/46

44. Axure RP Pro 7.0
44/46

45. Результаты сравнения
Средство
Затраченное
время
Оценка
удобства
Стоимость
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. Спасибо!
Вопросы?
Татьяна Васильева
tvasileva@custis.ru
46/46