Геворг Глечян Баланс качества и скорости Microsoft Visio как инструмент проектирования интерфейсов

О чем этот рассказ? Какие требования мы предъявляем к инструменту проектирования и как их удовлетворяет Visio? Чем хорош Visio, а в чем его проблемы? Когда стоит использовать Visio на практике и когда лучше отказаться от него? 2

3 Сейчас на рынке существует множество инструментов проектирования… и это только основные, а еще есть…

Pidoco GUI Design Studio Mockup Screens ProtoShare Wireframe Sketcher и еще множество других инструментов и еще множество других инструментов 4

Мы попробовали все основные инструменты проектирования, но как и любого инструмента, у них есть недостатки. 5

Если говорить о новых инструментах, то несмотря на их функциональность непонятны перспективы их развития. Большой риск вкладывать время и силы в инструмент, который может прекратить существование. 6

На их фоне Visio выглядит… 7

Так почему же мы используем Visio? Ответ прост. Visio это баланс скорости и качества, это инструмент, позволяющий решить поставленные задачи в краткие сроки. Не верите? Давайте разберёмся. 8

Требования к инструменту проектирования Что нужно проектировщикам от инструмента проектирования? Что нужно дизайнеру от готового прототипа? А разработчику? А менеджеру? 9

Функциональность инструмента Отсутствие лишних инструментов 10 Проектировщикам важны…

Скорость создания прототипа первой версии и прототипа в целом Легкость внесения изменений 11

Возможность быстро накидать несколько версий 12

Мобильный сайт Audi 13

Сайт Меркури Кэпитал Траст 14

Дизайнеры Нет прессинга по графическому оформлению Просто раскрась прототип и сделай иконочки! 15

Разработчики Понятность работы прототипа, комментарии 16

Интерактивность (для большей наглядности) 17

«Проектировщики придумали космос и оставили нас с ним разбираться» 18

Менеджеры Мощный помощник для общей документации (ТЗ) 19

Динамичность хода работ Высокая скорость работы, а следовательно и более высокая производительность и эффективность команды 20

Наш опыт показывает, что Visio удовлетворяет большинству из этих требований. Функциональность Легкость внесения изменений Подробное описание работы прототипа Отсутствие прессинга по графическому оформлению Высокая скорость и, как следствие, высокая производительность 21

Что кроме требований? Критерии выбора инструмента: Процесс, выбранный командой Задачи, которые поставлены перед проектировщиком Мода, тренды Нравится-не нравится 22

Ключевые возможности Visio Шаблоны я не хочу заниматься рутинной работой Стенсилы Макросы Интерактивность Отсутствие лишних инструментов 23

Шаблоны Ускорение работы при создании прототипа Уменьшение рутинной работы при изменениях в прототипе 24

25 Применение шаблонов

26 Шаблон и страница на его основе

Шаблоны Стенсилы я все еще не хочу заниматься рутинной работой Макросы Интерактивность Отсутствие лишних инструментов 27

Стенсилы Большая библиотека готовых стенсилов Возможность создавать собственные стенсилы 28

У элементов есть состояния Вы можете добавить состояния для элемента 29

Создание стенсилов Неудобный, но мощный инструмент Стенсилам можно задать сколь угодно сложное поведение Использование стенсилов позволяет сэкономить время 30

Мы сделали над собой усилие и изучили жалкие крохи документации, разобрали существующие элементы. Работы было ОЧЕНЬ много, но мы справились 31

Мы улучшили встроенные стенсилы … и сделали свои! 32

Шаблоны Стенсилы Макросы вся работа, которая может быть автоматизировано должна быть автоматизировано Интерактивность Отсутствие лишних инструментов 33

Макросы Мощное средство, автоматизирующее рутинные процессы Макросы позволяют сгладить часть недостатков Visio 34

Пример автоматизации макрос экспорта прототипа в PNG Пример сглаживания недостатков макрос выравнивания объектов Формула сборки названия файла: Название проекта + Версия прототипа + Номер страницы + Название страницы в Visio Пример названия: MKB-WF1-01-Адреса офиса (карта) 35

Шаблоны Стенсилы Макросы Интерактивность надо сделать так, чтобы разработчикам было понятно как все работает Отсутствие лишних инструментов 36

Можно сделать ссылки со страницы на страницу при клике по элементам Можно получить интерактивный прототип, экспортировав файл в PDF 37

Также, прототип можно экспортировать в html 38

Ничего лишнего В Visio нет лишних инструментов, нет множества окон, тысяч функций по работе с текстом, цветом, градиентами и т.д. 39

Проектировщик концентрируется непосредственно на вопросах проектирования не забивает себе голову графическим оформлением, пикселями и т.д. … потому что в любом случае это будет определять графический дизайнер 40

Стандартные функции в Visio есть все, что есть в других инструментах Масса наработок Нестандартные элементы Низкий порог вхождения Помимо всего прочего 41

42 группировка работа со слоями работа с текстом работа с объектами работа с таблицами редактор изображений редактор диаграмм

Стандартные функции Масса наработок я хочу использовать старые наработки Нестандартные элементы Низкий порог вхождения 43

Мы сделали более wireframes, содержащие решения, которые можно использовать в будущих проектах 44

Стандартные функции Масса наработок Нестандартные элементы я не хочу сидеть часами над рисованием сложных объектов Низкий порог вхождения 45

В Visio очень быстро можно сделать нестандартные элементы. Например, графики, виджеты, нестандартные контролы 46

Стандартные функции Масса наработок Нестандартные элементы Низкий порог вхождения я новичок и не хочу потратить месяц на то, чтобы сделать прототип простенького сайта 47

Visio очень простой* Visio легок для изучения, в нем очень просто делать первые шаги. *если есть хороший стенсил 48

Почему же Visio неидеален Стили текста и объектов мне надоело менять стиль для каждого объекта в отдельности Работа со слоями Горячие клавиши 49

Нет возможности создать стили для текста и объектов. Например, как в MS Word 50

Стили текста и объектов Работа со слоями я хочу иметь возможность скрыть часть шаблона на дочерней странице, если она мне не нужна Горячие клавиши 51

Нет вменяемой работы со слоями. Например, как в InDesign Для каждой страницы создается свой набор слоев Слои не наследуются из шаблона 52

Стили текста и объектов Работа со слоями Горячие клавиши мне неудобно управлять объектами с помощью панелей инструментов, это замедляет работу 53

Нет возможности задать горячие клавиши для действий кроме как макросами. Например, опять же, как в InDesign. 54

Количество горячих клавиш для макросов сильно ограничено Макросы создаются для каждого документа в отдельности 55

И что в итоге? А в итоге, несмотря на свои недостатки, Visio это баланс скорости и качества. 56

57

Использование Visio Нужно использовать Проектируется большое количество страниц Нужно делать нестандартные объекты Нужно часто и быстро экспериментировать Не нужно использовать 3 страницы в год Нужен хороший мощный интерактивный прототип Нужен точный до пикселя прототип 58

Пара бонусов от профессионалов Для увеличения скорости работы можно использовать клавиатуры с программируемыми клавишами. Например, клавиатура Ideazon Gameboard 59

или игровую мышь Razer Naga 60

Вы можете настроить каждую из клавиш на выполнение определенных действий Вам не нужно будет мучиться со сложными для использования сочетаниями клавиш 61

Спасибо за внимание Геворг Глечян escapedslippers