Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного анализа

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

Transcript

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