Наверх

MS Visio, как инструмент проектировщика: ненаглядная наглядность.

Время чтения: 5 минут
28
MS Visio, как инструмент проектировщика: ненаглядная наглядность.

Материал приглашает подискутировать о программных продуктах, удобных для проектирования интерфейсов и бизнес-процессов и направлен на поиск решения, способного удовлетворить оба направления.

Внедрение и дальнейшее развитие любой ECM-системы практически всегда сопровождается проектированием и разработкой новых объектов системы: карточек электронных документов, справочников, типовых маршрутов, мастеров действий и т.п. Оставим в стороне вопросы разработки – здесь я уступаю пальму первенства многочисленным специалистам, присутствующем на нашем ресурсе – сегодня я хочу поговорить о проектировании.

Основной задачей для проектировщика является выдача разработчику требований к итоговому продукту, сформулированных на основании сбора и анализа некоторой информации. Не секрет, что процесс упорядочивания этой информации и адаптации её к функционалу системы а, зачастую, и к доводам здравого смысла, является достаточно сложной задачей, однако представим, что все препятствия успешно преодолены, трактат о новом объекте системы написан и предназначен к отправке в разработку. Именно на этом финальном этапе передачи разработчику результата трудов проектировщика я и хочу остановиться подробнее.

«Что толку в книжке, если в ней нет ни картинок, ни разговоров?», – сетовала небезызвестная Алиса и была как никогда права. Как обычно выглядит документ, выдаваемый разработчику? Сухие строчки текста с перечнем реквизитов карточки и источников данных? Описание последовательности блоков типового маршрута, параметров и исполнителей? Скучно и малоэффективно, потому что не наглядно. Приходилось ли вам перерисовывать за разработчиком карточки справочников? Мне когда-то приходилось и, полагаю, это не самая эффективная организация труда.

В этой теме я приглашаю всех желающих подискутировать об используемых Вами инструментах визуализации, как универсальных, так и узконаправленных. Я для себя остановилась на продукте MS Visio и вот почему:

  1. MS Visio входит в состав расширенного пакета MS Office и всё чаще встречается на рабочих местах офисных работников, а значит у меня не будет проблем с внутренним и внешним взаимодействием. Также это избавляет от дополнительных расходов на закупку другого ПО и обучение его использованию.
  2. Интерфейс MS Visio привычен любому уверенному пользователю MS Office, в элементарном функционале продукта можно интуитивно разобраться за достаточно короткий промежуток времени.
  3. MS Visio обладает всем необходимым функционалом, как для построения схем бизнес-процессов, так и для прототипирования интерфейсов (подробнее об этом чуть ниже).
  4. MS Visio позволяет быстро дублировать отрисованный контент целиком, либо частично, обеспечивает лёгкость внесения изменений, в том числе внешним заказчиком (помним о п.1), позволяет комментировать отдельные элементы контента.
  5. Средствами MS Visio можно добиться различных уровней визуализации: от чернового наброска до конечного продукта, используемого в проектной документации.
  6. MS Visio предоставляет множество форматов выгрузки контента, а также обеспечивает возможность вставки его в качестве редактируемого объекта непосредственно в проектную документацию.
  7. Шаблоны, стенсилы, макросы (в том числе собственные) – всё это позволяет ускорить процесс работы и сократить, либо автоматизировать рутинные операции.

MS Visio и бизнес-процессы.

MS Visio Premium 2010 позволяет создавать схемы бизнес-процессов в нотации BPMN версии 1.2 и автоматически анализировать их, чтобы убедиться в правильной структуре и соответствии заданной для документа бизнес-логике. Дополнительно к штатному функционалу существует техническое решение по интеграции DIRECTUM и MS Visio, которое позволяет выгружать спроектированные схемы BPMN из Visio в типовые маршруты DIRECTUM, что практически полностью исключает необходимость повторной отрисовки схемы типового маршрута разработчиком.

Демонстрацию решения можно увидеть на канале DIRECTUM на YouTube.

Также реализована возможность сохранения схем BPMN в файле формата XPDL. Дополнительно хочу отметить, что схемы бизнес-процессов можно успешно рисовать и в более распространённых версиях MS Visio – Standard и Professional: теряется только набор спецблоков и возможность выгрузки в типовые маршруты.

MS Visio и интерфейсы.

С использованием штатных стенсилов MS Visio за достаточно короткий промежуток времени можно воспроизвести практически любой интерфейс. А разработав собственный набор стенсилов – абсолютно любой. Отдельно хочется отметить наличие стенсилов с заданной логикой поведения – например кнопки, внешний вид которых изменяется в зависимости от установленного состояния «Включена», «Отключена», «Выделена курсором», «Выбрана» и т.д. При создании собственных стенсилов им так же можно задать логику поведения. Вдобавок множество стенсилов можно найти в свободном доступе в сети Interntet. Впрочем, лучше один раз увидеть, чем сто раз услышать, поэтому я хочу продемонстрировать скриншот карточки справочника «Номенклатура дел» системы электронного документооборота DIRECTUM:

и отрисовку этой карточки средствами MS Visio:

Как говорится - найдите 10 отличий.

Что это даёт? Во-первых, экономию времени проектировщика и разработчика при разработке различных карточек: сопроводите перечень реквизитов хотя бы примитивной картинкой – и разработчик будет Вам благодарен. Во-вторых, прототипы интерфейсов будущих объектов можно использовать в проектной документации и при взаимодействии с заказчиком – Вы намного легче найдёте общий язык и подстрахуетесь от дальнейших разочарованных возгласов: «А мы думали это будет выглядеть совсем по другому…»

А какие программные продукты для визуализации используете Вы?

Чтобы прочитать эту статью до конца,
или зарегистрируйтесь

Комментарии 28

Андрей Подкин 4 февраля 2013
С использованием штатных стенсилов MS Visio за достаточно короткий промежуток времени можно воспроизвести практически любой интерфейс.
Профессионалы в области проектирования UI (по крайней мере те, у которых я учился) как раз таки советуют максимально дистанцироваться от похожести проекта интерфейса на реальный GUI. Лучше использовать скетч-стиль.
Отредактировано 5 февраля 2013

А чем мотивируют, Андрей?

Впрочем в Visio примитив можно накидать ещё быстрее и проще.

Отредактировано 5 февраля 2013
Андрей Подкин 4 февраля 2013

В основном тем, чтобы ни у кого (ни у проектировщика, ни у заказчика) не складывалось иллюзии, что это почти готовый продукт. Все должны четко представлять себе, что это всего лишь прототип интерфейса.

Отредактировано 5 февраля 2013

Полагаю, что с этой точки зрения интерактивные прототипы интерфейсов вообще обречены на провал.

Отредактировано 5 февраля 2013
Михаил Романов 4 февраля 2013
Полагаю, что с этой точки зрения интерактивные прототипы интерфейсов вообще обречены на провал

Отнюдь. Если интерактивность сводится к переходу двумя состояниями (условно говоря, у вас есть изображение "со свернутым tree view" и "та же страница, но с развернутым", а переход между ними "по щелчку на кнопке Expand") то смотрится довольно удачно.

И да, я полностью подтверждаю то, что сказал Андрей. Скетч-наброски напоминают прикидки от руки, которые вы рисуете карандашом на бумаге. Потому на них заказчик смотрит только с точки зрения расположения элементов, но не их внешнего вида.

Ну и специализированные инструменты для таких скетчей все же удобнее инструментов общего назначения, таких как Visio. Например, на моем текущем проекте аналитики пользуются вот таким инструментом http://www.balsamiq.com/ - результат понятен как пользователем (заказчикам), так и нам разработчикам. А рисовать куда как удобнее чем в Visio (и дешевле чем Visio).

Отредактировано 5 февраля 2013
Андрей Подкин 4 февраля 2013
Если интерактивность сводится к переходу двумя состояниями (условно говоря, у вас есть изображение "со свернутым tree view" и "та же страница, но с развернутым", а переход между ними "по щелчку на кнопке Expand") то смотрится довольно удачно.
Именно так. На обучении мы как раз рисовали 100500 экранов на бумаге. Картинки меняли руками, когда пользователь тыкал "мышкой" в "кнопки". Было очень наглядно и удобно.
Отредактировано 5 февраля 2013

Михаил, удобство - штука вообще очень субъективная, правда? 

Я достаточно поверхностно знакома с Balsamiq, но, если не ошибаюсь, данный продукт удовлетворяет не всем пунктам, из перечисленных мной в материале. Сориентируйте меня поподробнее, пожалуйста.

Отредактировано 5 февраля 2013
Михаил Романов 4 февраля 2013
Михаил, удобство - штука вообще очень субъективная, правда?

Конечно. Но никто не мешает попробовать и составить собственное мнение.
 

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

А можно еще раз воспроизвести какие пункты относятся к проектированию UI?
 

Я вижу только: возможность копирования и наличие элементов в разных состояниях - все остальное, в моем понимании, к проектированию UI не относится.
Отредактировано 5 февраля 2013
Михаил Романов 4 февраля 2013
существует техническое решение по интеграции DIRECTUM и MS Visio, которое позволяет выгружать спроектированные схемы BPMN из Visio в типовые маршруты DIRECTUM

 А существует ли возможность: а) сделать реинжиниринг (т.е. перенести разработанный или доработанный маршрут обратно в BPMN схему) б) "слить" изменения, т.е. внести изменения в схему BPMN и сгенерировать только измененные части в виде маршрута?  

Отредактировано 5 февраля 2013
никто не мешает попробовать и составить собственное мнение.
Я знакомилась с продуктом, но, признаюсь, я ужасный ретроград и тяжело отказываюсь от привычного и удобного ПО. Только по вынужденной необходимости, либо тогда, когда претендент явно перевешивает в достоинствах. В Balsamiq не увидела ни того, ни другого.
Я вижу только: возможность копирования и наличие элементов в разных состояниях - все остальное, в моем понимании, к проектированию UI не относится.
Все перечисленные мной пункты относятся не проектированию UI или схем БП в частности, а к удобству использования продукта в целом.
 А существует ли возможность...
Увы - не подскажу. Возможности потрогать интеграцию руками не представилось пока, поэтому вся информация только из упомянутого в тексте видеоролика.
Отредактировано 5 февраля 2013
Михаил Романов 5 февраля 2013
В Balsamiq не увидела ни того, ни другого

Значит, возможно, не сейчас. :)

У меня же с Visio по части рисования прототипов никак не складывается. Может быть потому, что мне последнее время приходится работать с интерфейсами, которые не используют стандартные элементы управления. А потому нужен именно нейтральный вид (который бы не указывал явно на тип приложения, а только задавал бы функциональность форм).

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

Увы - не подскажу

Жаль. Было бы интересно как перечисленные задачи были решены (если были - сомневаюсь потому, что ни у одного вендора такого решения не видел. Все стараются в подобных случаях использовать единую нотацию, как для моделирования, так и для реализации).

Потому как если поддерживается только однонаправленная выгрузка (генерация маршрута/кода на основе BPMN-модели), это очень ограниченное решение. После такой единовременной выгрузки вы все изменения в модели отражаете в маршрут руками (и наоборот).

Отредактировано 5 февраля 2013
У вас же, как я понимаю, такой проблемы нет - вам нужен небольшой набор стандартных контролов и все. Вам подойдет почти любой инструмент.
Не совсем так. Когда передо мной ставится задача, я стараюсь решить её существующим инструментом или набором инструментов. Да, возможно я пытаюсь вкручивать шурупы пилочкой для ногтей, но пока вроде получается неплохо =) 
Стандартный набор стенсилов MS Visio меня действительно устраивает практически полностью, а в случае недостачи - я просто рисую себе нужный =) 
После Ваших комментариев мне, если честно, стало жаль, что не приходилось сталкиваться с настолько сложными и, я уверена, интересными задачами, при реализации которых мне не хватило бы существующего функционала. Можете прислать мне какой-нибудь пример "интерфейса, не использующего стандартные элементы управления"? Я бы попыталась разгрызть этот орешек =)
Жаль. Было бы интересно как перечисленные задачи были решены
Согласна, самой интересно поковыряться в решении, но пока всё недосуг... =(
Отредактировано 5 февраля 2013
Михаил Романов 5 февраля 2013
Можете прислать мне какой-нибудь пример "интерфейса, не использующего стандартные элементы управления"?
Увы, все под NDA. :(
Но если в двух словах: изменяется не столько поведение контролов (хотя и это есть - и тогда приходится рисовать сам контрол в разных стадиях), сколько их внешний вид. Например, "выпадающий список" есть и работает так же, как обычный десктопный, но внешний вид его (цвета, форма, иконки, ...) на десктопный не похожа ни разу.
Поэтому стиль "наброска от руки" - очень выигрывает, он нейтрален к стилю.
Отредактировано 5 февраля 2013
Увы, все под NDA. :(

Жаль... но всё равно спасибо за интересную беседу, Ваши комментарии всегда оставляют меня неравнодушной =)

Отредактировано 5 февраля 2013
Михаил Романов 5 февраля 2013
но всё равно спасибо за интересную беседу
Взаимно. Ваши статьи могут вызывать любую реакцию, но только не равнодушие. :)
Отредактировано 5 февраля 2013
Михаил Романов 5 февраля 2013

Кстати, если продолжать использовать Visio, но захотеть попробовать "карандашный стиль", вполне можно найти уже готовые stencils.

Буквально с ходу находятся, например, такие:

Кроме того, пока я перебирал разные варианты, нашел статью, автор которой предлагает "замаскировать" обычные stencil-ы Visio под "карандаш" (путем задания своего ситиля линии): http://visualsignals.typepad.co.uk/vislog/2008/03/creating-random.html

Так что, если будет желание, пробуйте, может такой подход придется более по вкусу.

Отредактировано 5 февраля 2013

Спасибо, Михаил, это будет интересно, погляжу на досуге.

Покамест я рисую "примитивы" примерно так, если говорить о том же справочнике "Номенклатура дел":

Отредактировано 5 февраля 2013
Михаил Романов 5 февраля 2013
Покамест я рисую "примитивы" примерно так, если говорить о том же справочнике "Номенклатура дел":
Ну нечто подобное и получается.

Вот чисто субъективно - мне такая картинка нравится. Но как махровой канцелярской крысе мне непререкаемо кажется, что подобному стилю оформления не место в официальной проектной документации.

Михаил Романов 5 февраля 2013
Но как махровой канцелярской крысе мне непререкаемо кажется, что подобному стилю оформления не место в официальной проектной документации
Да ладно, это вы на себя наговариваете. У вас просто пока нет привычки. Я тоже не сразу (но довольно быстро) свыкся с таким стилем.
Еще (раз уж мы пошли в эту сторону) могу заметить, что русскоязычная проектная документация, та с которой мне доводилось работать, просто изобилуест всевозможными канцляризмами, и многоуровневыми оборотами (например, "предоставляет возможность выбора соответсвующей одиночной записи из справочника "Пользователи"" - и это еще более-менее приличный вариант), тогда как наши западные коллеги стараются писать максимально простым и понятным языком. Иногда даже специально упрощают фразы, избегают сложных предложений, и т.д.
Мы тоже к этому идем, но как-то медленно.
Впрочем, это уже вопрос для другой статьи...

Да, абсолютно согласна - наш канцелярит ужасен и неповоротлив, но, увы, всё ещё используем почти повсеместно. Мне, пока, не приходилось сталкиваться с заказчиками "вольных нравов" - скорее наоборот.

Что касается лично меня - я, наверное, не смогу сейчас определиться с явными симпатиями к одному из вариантов. С одной стороны действительно лучше упрощать всё, что можно упростить, и не плодить сущности без надобности. С другой... ну я уже говорила, что я ретроград? =)

А так - очень интересная тема для последующих дискуссий ;-)

Максим Смирнов 10 февраля 2013

Зарисовки пользовательских интерфейсов - дело хорошее. И не так уж важно в каком виде они будут сделаны. При разработке архитектуры решения, как правило, требуется логическая модель приложения. И многие рисуют её в виде ER-модели или диаграммы классов. Разговаривать с пользователями при помощи таких картинок практически невозможно. А вот скриншоты пользовательских форм и списков решают эту задачу.

Максим, а можно поподробнее? С примерами?

Станислав Ким 12 февраля 2013

Здравствуйте, коллеги.

Немного запоздало, но подключусь к дискуссии. Во-первых, хочу поблагодарить вас, Валентина, за тематику поста. Наконец хоть кто-то из ECM-специалистов поднял и начал обсуждать эту строго затабуированную в нашей среде тему.

Пару лет назад я проводил опрос среди коллег по цеху, какими кто пользуется инструментами не то чтобы прототипирования, а хотя бы просто отрисовки и согласования пользовательских интерфейсов. Наиболее распространенным вариантом стал карандаш и бумага. Один из респондентов сказал, что ни дай бог, обсуждать с клиентом возможность кастомизации интерфейса - это же сплошной гемор с хардкодом. Даже внедренцы продвинутых зарубежных решений типа Документума с давно разработанными инструментами кастомизации предпочитали не ковыряться в коде, максимум — в стандартном интерфейсе спрятать пару кнопок.

У нас в компании ситуация другая. Практически все наши клиенты требуют кастомизации как минимум веб-шкурок своих приложений и экранов при этом может быть - сотни. Понятно, что графическим редактором можно убиться это все делать. Вся история развития данного вопроса в нашей компании прописана на корпоративном блоге в Хабре:

Как мы выбирали инструмент прототипирования. Часть I http://habrahabr.ru/company/alee/blog/116440/

История создания инструмента прототипирования. Часть II http://habrahabr.ru/company/alee/blog/117400/

Интерактивное прототипирование с GUI Machine http://habrahabr.ru/company/alee/blog/123745/

Практика прототипирования в софтверной компании http://habrahabr.ru/company/alee/blog/146781/

Практика использования интерактивного прототипа на этапе коммерческого предложения http://habrahabr.ru/company/alee/blog/141633/

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

Станислав, какое продуктивное подключение! Спасибо, что не остались в стороне и поделились своими "этапами большого пути"! Наливаю вечерний чай и сажусь читать Ваш корпоративный блог =)

Михаил Романов 4 августа 2016

Возвращаясь к давней теме, хочу показать еще один интересный (с моей точки зрения) инструмент для создания скетчей.

Это Storyboarding in PowerPoint.

В 2-х словах работа с ним выглядит так:

  • Устанавливаете Visual Studio (любой версии начиная с 2015 Community) или просто пакет интеграции с Office (но я такой вариант не проверял - у меня итак установлена студия).
  • Открываете PowerPoint, создаете новую пустую презентацию
  • Переходите на закладку Storyboarding, открываете из неё панель Storyboard Shapes

  • Формируете из готовых shapes нужное представление. Если готовых элементов не хватает, можно создать их самому (средствами PowerPoint) или скачать дополнительные, из галереи Microsoft.

Таким образом получается, что каждый слайд - это отдельный экран. Вот так примерно выглядит отдельный слайд:

В чем, как мне видится, плюсы именно этого решения:

  • Простой и знакомый большинству инструментарий (мой сын-второкласник уже делает там практически интерактивные фильмы - научился в лагере за неделю)
  • Использование знакомых инструментов из PowerPoint, таких как анимация (можно приблизительно показать как будет выглядеть, например, появление какого-то хитрого элемента) и гиперссылки между слайдами (например, при щелчке на кнопку будет переходить на соответствующий экран).
  • Готовые механизмы для создания неизменяемых шаблонов-заготовок (на основе Layout в PowerPoint) - т.е. вы нарисовали некую заготовку дизайна, сделали из неё Layout и используете его многократно. Самое главное - всё что вы поменяете на layout автоматически поменяется на всех созданных на его основе слайдах! (Одно плохо - на layout не будет интерактивных элементов, типа кнопок со ссылками на другие слайды).
  • Если вы используете TFS для управления проектами (и OneDrive или SharePoint для хранения файлов по проекту), то можно сразу связывать требования (или User Story) в TFS и Storyboards. Но это я бы не сказал, что особо значимое дополнение.

Если интересно можете пройти по ссылке https://1drv.ms/p/s!Ai1PnoMOAVFJid5H_NmXXh-vpfcacw и либо скачать готовую презентацию, либо нажать "Start Slide Show" и посмотреть все слайды или даже понажимать кнопки (правда работает только "Выход", "Список РКК", "Cancel" на экране выхода, "Закрыть" на списке РКК, а еще срабатывает щечек по выпадающему списку поля "Дата начала", а потом щелчек по каледарю).

Слушайте, а мне нравится! Понятно, надо поковыряться, но навскидку - клёвая штука! Спасибо за информацию, Михаил!

Михаил Романов 5 августа 2016
Валентина Писанова 04 августа 2016 15:53
Слушайте, а мне нравится! Понятно, надо поковыряться, но навскидку - клёвая штука! Спасибо за информацию, Михаил!

Попробуйте. Если вдруг возникнут сложности, пишите - попробуем вместе разобраться.

Чтобы прокомментировать, или зарегистрируйтесь