Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Analyst’s Guide to GUI: Проектирование интерфей...

CUSTIS
May 24, 2014

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

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

CUSTIS

May 24, 2014
Tweet

More Decks by CUSTIS

Other Decks in Research

Transcript

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

    Татьяна Васильева Ведущий системный аналитик группы компаний CUSTIS Москва, 24 мая 2014 года
  2. Применимость положений доклада  Заказная разработка  Ограничения на системы:

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

    в виде:  проволочной диаграммы (wireframe)  макета (mock-up)  прототипа (prototype) 4/46
  4. Задачи и характеристики Вид модели Трудоемкость Близость к реализации Задачи

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

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

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

    тест-кейсов «сразу» А что если повертеть вот тут? 13/46
  8. Wireframe для системного анализа UCs ERD GUI Информация Детализация и

    дополнение функционала Уточнения логической модели Функции 14/46
  9. Wireframe для системного анализа  Критерий завершенности системного анализа 

    Шаблонное мышление как двигатель анализа Ну и кто тут самый умный? 15/46
  10. Проектирование GUI и анализ  Задача: спроектировать интерфейсную форму управления

    календарем банковских дней, не теряя существующий функционал (реинжиниринг)  Функционал:  просмотр календаря  редактирование типа дня  продление календаря на следующий год 16/46 Пример: календарь банковских дней
  11. Логическая модель (ERD) День.Тип:  Рабочий день  Выходной день

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

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

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

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

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

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

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

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

    продление календаря (с выбором года)  Изменена логическая модель:  атрибутный состав  множественность 29/46
  20. Антитезис 1 31/46 Сплошная трата времени. В команде достаточно use

    cases, а GUI c заказчиком можно обсуждать на готовой системе. Да надо просто правильно выбрать средство и построить процесс. И никогда не обсуждайте требования на готовой системе!
  21. Антитезис 2 32/46 Внешний вид интерфейса – это элемент реализации.

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

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

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

    вы поддерживаете другие артефакты анализа. При правильно выбранном инструменте затраты сопоставимы с поддержкой «текстовых» артефактов.
  25. Антитезис 6 36/46 Проволочные диаграммы – слишком «тяжелый» артефакт для

    SCRUM. Без паники! Аналитические артефакты вполне можно сочетать со SCRUM. В конце концов, рисуйте на доске!
  26. Принципы проектирования GUI  Интуитивная понятность, единообразие, ожидаемость  Функциональная

    полнота, простота достижения цели пользователя независимо от его роли  Неперегруженность  Возможность отменить действие  «Защита от дурака» 38/46
  27. Средства проектирования GUI Средство Описание Тип проектирования Office Visio Pro

    2013 Редактор диаграмм и блок-схем от Microsoft. Широко используется во многих компаниях Макет Balsamiq Mockups Одно из самых распространенных в мире средств для построения проволочных диаграмм Проволочная диаграмма Pencil Project Open Source на базе браузера Mozilla от вьетнамской компании Evolus Co. Проволочная диаграмма Axure RP Pro 7.0 Средство прототипирования сайтов и web-приложений от американской компании Axure Прототип 39/46
  28. Пример. Настройки системы Интерфейс: форма управления системными настройками Интерфейсные решения:

     настройки представлены в виде дерева  в правой области отображаются значения и атрибуты настроек 40/46
  29. Результаты сравнения Средство Затраченное время Оценка удобства Стоимость 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