Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Custis analyst's guide to gui т. васильева

2,075 views

Published on

Презентация Татьяны Васильевой на конференции Analyst Days-3, 24 мая 2014, Москва
www.analystdays.com

Published in: Education
  • Be the first to comment

  • Be the first to like this

Custis analyst's guide to gui т. васильева

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

×