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

1,744 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,744
On SlideShare
0
From Embeds
0
Number of Embeds
1,146
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Основные положения, высказанные в докладе относятся к указанному кругу систем
  • Чтобы ответить на вопрос для чего аналитику проектирование GUI, вспомним, чем вообще занимается аналитик. На диаграмме только основная деятельность, потенциально связанная с проектирование GUI (например, для взаимодействия с Архитектором вряд ли понадобится модель GUI).
  • Позволяет говорить с конечным Пользователем о системе в наиболее доступной для него форме Отсюда:
    более точные требования к системе
    ощущение причастности к разработке у Заказчика
    Позволяет снизить риск несоответствия ожиданий Заказчика конечному результату
  • Наиболее однозначный способ выставления функциональных требований к системе (проволочные диаграммы с краткими пояснениями или user story)
    Позволяет выработать единый стиль всех интерфейсных форм Приложения (полезно если разработка ведется удаленно разными разработчиками)
    Позволяет не терять контекст по функционалу при «водопаде»
  • Четкие критерии соответствия требованиям (user story по моделям GUI)
    Позволяет начать написание тестовых сценариев на этапе анализа или ранних этапах разработки
  • Уточнения лог. модели:
    Связи между сущностями
    Атрибуты и сущности: отношение атрибута к той или иной сущности, выделение той или иной сущности
    Атрибутный состав.
    Работая над моделью GUI, аналитик задает себе вопросы, кот. могут привести к изменению требований.
  • Критерий завершенности – в части функционала без интеграций и сложных алгоритмов расчета.

    Создание wireframe как критерий завершенности системного анализа:
    чтобы спроектировать рабочий интерфейс, покрывающий все цели пользователя в рамках системы, необходим качественный системный анализ
    Шаблонное мышление как двигатель анализа
    GUI, как правило, проектируется с оглядкой на существующие примеры. Заимствование из данных примеров может привести к обнаружению пробелов в анализе


    >в процессе проектирования интерфейса происходит аналитика уже построенных процессов, инфраструктуры, некомпетентного персонала, негативных отзывов, и с помощью интерфейсных решений влияние этих факторов на достижение целей пытаются сгладить Вот иллюстрация этому подходу. 1. Сделали машину. Ага, нужны педали (почему? Ну все вроде ставят, значит нужны). Педали сделали но не приделали к тормозам. Негативные отзывы пользователей. Ну что ж, значит их к тормозам нужно все же приделать! 2. Сделали машину. Чтобы добраться из точку А в точку Б ей нужно ускоряться и тормозить. Как управлять ускорением? Ну… можно педалью. Как управлять тормозом? Другой педалью, чтобы запрограммировать исключение или/или. 
  • Использование аналитических наработок одной системы при разработке другой.
    Необходимо синтезировать существующий функционал с общими соглашениями, принятыми в новой системе.

    Рассказать о бизнес-смысле: то, что 1 января рабочий день по календарю банковских дней не значит, что бухгалтера приходят в этот день на работу.
  • Зачем нужно отделение праздника от рабочего дня
  • Будние и выходные не переносятся, праздники переносятся вместе с признаком рабочего дня (можно сократить до Праздник/Не праздник).
    Атрибуты независимы.

    Таким образом, исходя из представлений об отображении дня и его цветовой разметки, мы сделали вывод о смешении признаков и выдели два отдельных атрибута.
  • Перенесли в меню ряд действий, чтобы не было необходимости открывать карточку редактирования дня (юзабилити).
    При выборе Пометить как праздник по умолчанию становится нерабочим
  • При продлении/создании Календаря создаются 365/366 экземпляров Дня
  • хранение 365 экземпляров – с т.з. простоты реализации в БД
  • Конечно, для простых интерфейсов рисовать модели не обязательно, можно описать словами.
    Для сложных интерфейсов риск того, что что-то поняли и реализовали неправильно – велик.
    Вносить изменения в «готовую» систему не хочется ни разработчику, ни заказчику. В результате проблемы выстрелят на внедрении и в эксплуатации.

    Ответ:
    При грамотно выбранном средстве затраты на проектирование не сопоставимы с внесением изменений в реальной системе
    Подробное описание UC может быть заменено моделью GUI с краткими пояснениями или моделью GUI с user story
    Обсуждение с Заказчиком на «готовой» системе – демотиватор.
  • Разработчик часто пытается перенести на GUI внутреннюю реализацию систему: гибкость логической модели, кот. он заложил и т.п. Или исходит из предпосылок того, что будет удобней сделать на GUI для последующей обработки. В результате получается слишком сложный интерфейс, кот. невозможно пользоваться.
    Ответ:
    Не всякий разработчик хочет свободы
    Свобода внутренней реализации остается за разработчиком
    Аналитик смотрит на GUI с точки зрения пользователя, разработчик – с точки зрения внутренней реализации
  • Ответ:
    Проволочная диаграмма – это суть «требования», указание к действию, а не абсолютный эталон и не реализация
    Если проект интерфейса рабочий, разработчик ему последует.


    Если разработчик может предложить свой интерфейс, кот. будет покрывать цели пользователя аналогично диаграмме/макету, это не проблема. Значит диаграмма/макет правильно донес до разработчика требования.
    В моей практике разработчики охотно работали по проволочным диаграммам.
  • Ответ:
    Если есть UX-специалист, и он подключается в проект на ранних этапах
    Модель GUI от аналитика – функциональные требования, входные данные для работы UX-специалиста
  • Ответ:
    Да, как и другие артефакты анализа. При правильно выбранном инструменте – затраты сопоставимы с поддержкой «текстовых» артефактов
  • Проволочная диаграмма – это инструмент. Как его применить, зависит от команды. В рамках различных подходов к процессу разработки инструмент можно кастомизировать и использовать на по-новому.


    Ответ:
    К вопросу о том, есть ли место спецификации требований в SCRUM
    Можно рисовать проволочную диаграмму на доске по результатам «мозгового штурма»
  • Интуиция – это экстраполяция (неосознанная) нашего предыдущего опыта на текущую ситуацию.
    1 пункт – это все к шаблонному мышлению. Человеку кажется удобным то, к чему он привык. Не надо пытаться в корне менять все.
    Каким бы удобным интерфейс ни был, если он непривычен, пользователь будет недоволен, как минимум на стадии внедрения.
    Примеры:
    Ребрендинг lenta.ru
    Частые требования от пользователей DOS-систем – работа без мышки.

    Последние 2 пункта – это так называемый принцип tolerance for errors
  • Пелди Гилиццоне из Adobe – основатель микрокомпании Balsamiq Studio.
  • Отрисовка дерева при наличии стандартного компонента очень неудобная:
    Элементы добавляются без учета положения текущего элемента, приходится сдвигать их при этом по одному (один цикл выбора из меню – сдвиг на один уровень) – множество кликов мышки
    Размер элементов не адаптируется под длину текста
    Чтобы убрать иконки с самого нижнего уровня иерархии, надо разгруппировать элементы
  • Дерево – стандартный компонент. Отрисовка путем набора текста и спец. символов: пробел – сдвиг на уровень, [-]/[+] - иконки
  • Нет стандартного компонента для дерева: пришлось собирать в ручную из таблицы
  • Отрисовка дерева при помощи мыши, очень удобная. Но [+] можно сделать только на предпросмотре, сложив нижний уровень.
    Есть жалобы на скудное количество стандартных элементов.
  • 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

    ×