От Зефира в коробке к Structure Zephyr или как тест-менеджеру перекроить внут...
Custis analyst's guide to gui т. васильева
1. Analyst’s Guide to GUI:
Проектирование интерфейсов
как элемент системного анализа
Татьяна Васильева
Ведущий системный аналитик
группы компаний CUSTIS
Москва, 24 мая 2014 года
3. Применимость положений доклада
Заказная разработка
Ограничения на системы:
имеют GUI
содержат функционал без сложных алгоритмов
расчета (частичная применимость в случае
со сложными алгоритмами)
3/46
4. Глоссарий
Проектирование GUI – это визуализация
будущего пользовательского интерфейса
приложения в виде:
проволочной диаграммы (wireframe)
макета (mock-up)
прототипа (prototype)
4/46
8. Задачи и характеристики
Вид модели Трудоемкость
Близость
к реализации
Задачи
Проволочная
диаграмма
Низкая Низкая
Обсуждение
функциональности
Обсуждение
общих дизайнерских
решений
Обсуждение
общих решений
по юзабилити
Макет Средняя Средняя
+
Обсуждение дизайна
Презентация
Прототип Высокая Высокая
+
Тестирование юзабилити
http://designmodo.com/wireframing-prototyping-mockuping/
8/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
Пример: календарь банковских дней
18. Логическая модель (ERD)
День.Тип:
Рабочий день
Выходной день
Праздник
Специальный праздник
(перенос праздника на будний день)
Специальный рабочий день
(выходной, ставший рабочим вследствие переноса)
Календарь
Тип
Описание
Выходные по умолчанию
Правило переноса праздников
День
Дата
Тип
Комментарий
* *
18/46
19. Начинаем рисовать
Отталкиваемся от основных сущностей
Работать с обеими сущностями будем
на одном управляющих кнопокэкране
Более «общая» сущность Календарь –
выше, более «частная» – День – ниже
Используем стандартные решения новой
системы по расположению
19/46
20. Первое приближение
Появилась кнопка «Создать» по аналогии с другими
формами
Пропала кнопка «Изменить», относящаяся к дню
(будем вызывать карточку дня по всплывающему меню)
Места достаточно для отображения нескольких
месяцев/года
20/46
22. Отображение дней в календаре
Раскраска соответствует бизнес-смыслу:
в «черные» дни ведутся операции, выпускается
отчетность и т. д., в «красные» – нет
Тип Цветовая разметка
Рабочий день Черный
Выходной день Красный
Праздник Красный
Специальный праздник Красный
Специальный рабочий день Черный
22/46
23. Типы дня
Зачем столько типов, вызывающих путаницу?
Ответ: смешение признаков, необходимых
для реализации разных задач:
ведение дней
продление календаря
информационные функции
Решение: выделить отдельный атрибут
«Признак рабочего дня»
Все ли типы нужны для продления календаря?
Ответ: нет, при выделении «Признака рабочего дня»
«специальные дни» не нужны
23/46
24. Логическая модель. Вариант 2
Календарь
Тип
Описание
Выходные по умолчанию
День
Дата
Признак рабочего дня
Тип
Комментарий
* *
День.Признак рабочего дня:
Да
Нет
День.Тип:
Будний
Выходной
Праздник
День.Тип:
Рабочий день
Выходной день
Праздник
Специальный праздник
Специальный рабочий
день
1 января
Было: Стало:
24/46
27. Свойства календаря
При продлении/создании календаря
создаются 365/366 экземпляров дня
Удаляем атрибут «Выходные по умолчанию»:
пользователь проставляет вручную
Как удалить календарь на год? Можно
продлить еще раз на удаляемый год
Продление календаря с любого года
на любой
Правила переноса не используются
27/46
28. Логическая модель. Вариант 3
Удалены атрибуты календаря:
Выходные по умолчанию
Правило переноса праздников
Изменена множественность
Календарь
Тип
Описание
Выходные по умолчанию
Правило переноса праздников
День
Дата
Тип
Комментарий
* *
Было:
28/46
29. Итого
Изменен функционал:
создание календаря (новая функция)
продление календаря (с выбором года)
Изменена логическая модель:
атрибутный состав
множественность
29/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. В конце концов, рисуйте
на доске!
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
Основные положения, высказанные в докладе относятся к указанному кругу систем
Чтобы ответить на вопрос для чего аналитику проектирование 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.
Отрисовка дерева при наличии стандартного компонента очень неудобная:
Элементы добавляются без учета положения текущего элемента, приходится сдвигать их при этом по одному (один цикл выбора из меню – сдвиг на один уровень) – множество кликов мышки
Размер элементов не адаптируется под длину текста
Чтобы убрать иконки с самого нижнего уровня иерархии, надо разгруппировать элементы
Дерево – стандартный компонент. Отрисовка путем набора текста и спец. символов: пробел – сдвиг на уровень, [-]/[+] - иконки
Нет стандартного компонента для дерева: пришлось собирать в ручную из таблицы
Отрисовка дерева при помощи мыши, очень удобная. Но [+] можно сделать только на предпросмотре, сложив нижний уровень.
Есть жалобы на скудное количество стандартных элементов.