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

Спасибо!

Вопросы?

Татьяна Васильева

tvasileva@custis.ru

46/46