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