Методичность в проектировании: Как BPMN помогает улучшить UX-стратегии

Знакомо ли вам чувство, когда при взгляде на что-то, все внезапно встает на свои места? Так было со мной, когда я впервые увидел BPMN в действии. Я работал над сложным процессом регистрации для крупной системы, и в один прекрасный день наш бизнес-аналитик показал мне свои BPMN-диаграммы. В моей голове словно загорелась лампочка.

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

Этот момент навсегда изменил мой подход к UX-дизайну. BPMN-диаграммы помогли мне увидеть дальше непосредственного пользовательского интерфейса, показав, где пользователи могут столкнуться с проблемами из-за внутренних процессов (например, медленные вызовы API). Это понимание было бесценным. Я не только мог планировать лучшие пользовательские интерфейсы, но и начал замечать проблемы до того, как они станут проблемами в процессе разработки.

Этот инструмент нужен не только аналитикам. Как UX-дизайнеру, а теперь и продакт-менеджеру (особенно из тех, кто любит разбираться в том, как все работает), BPMN позволяет мне по-новому применять свои аналитические навыки. Он помогает мне улавливать детали на ранних этапах, лучше общаться как с бизнес-аналитиками, так и с разработчиками, и глубже продумывать техническую сторону пользовательского опыта.

Присоединяйтесь ко мне, чтобы узнать, как BPMN может улучшить вашу работу над UX-дизайном, помогая преодолеть разрыв между элегантностью фронтенда и эффективностью бэкенда. Мы изучим его преимущества, посмотрим, каков он в сравнении с традиционными UX-процессами, и разберем пошаговый пример его применения в ваших проектах. Готовы узнать, как BPMN может изменить ваш подход к проектированию? Тогда давайте начнем!

Зачем вообще связываться с BPMN?

Как UX-дизайнер, вы всегда находитесь в поиске инструментов, которые оттачивают ваши навыки и повышают качество ваших проектов, верно? BPMN (Business Process Model and Notation), возможно, далеко не первое, что приходит вам на ум в этом контексте. Да, эта нотация уходит своими корнями в мир моделирования бизнес-процессов, но поверьте мне, она может многое предложить и для UX-дизайна.

Составление схемы процесса с помощью BPMN — это не просто создание красивых диаграмм. Речь идет о ясности — о том, чтобы видеть не только задачи, но и то, как они связаны между собой и в чем заключается их важность. Такой взгляд с высоты птичьего полета может стать решающим фактором в выявлении и устранении недостатков, что приведет к принятию более разумных решений как в бизнес-стратегии, так и в проектировании пользовательского опыта.

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

Отмечаем схожесть

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

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

• Ходьба по кругу: Итерации — наше все. BPMN — это не одноразовая схема. Она развивается в зависимости от потребностей бизнеса и обратной связи. UX-дизайн пляшет под ту же дудку, постоянно подстраиваясь под отзывы пользователей и их поведение.

Принимаем различия

• Техничность vs. сантименты: BPMN концентрируется на технических аспектах бизнес-процессов. Речь идет обо всем, что касается операционных тонкостей — правил рабочего процесса, системных интеграций, и так далее. А UX-дизайн? Все сосредоточено на пользователе. Эмоции, впечатления и простота использования занимают первое место.

• Перегруженность деталями?: Иногда может показаться, что BPMN слишком много внимания уделяет мелочам. В ней прописаны все возможные сценарии процесса, что очень хорошо с точки зрения точности, но может быть слишком много, если для вас важно сохранить простоту. UX-дизайн склонен к некоторому увеличению масштаба, фокусируясь больше на пользовательской стороне вещей.

• Эндшпиль: Какова цель? В случае с BPMN речь идет о том, чтобы сделать бизнес-процессы как можно более эффективными. UX-дизайн играет другую мелодию, стремясь сделать пользователей довольными, вовлеченными и лояльными.

Как их заставить работать вместе

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

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

• Командный разбор: Владение BPMN позволяет общаться с бизнес-аналитиками и разработчиками на понятном им языке. Это значит, что сотрудничество будет более гладким, а проекты — выполнимыми.

• Заблаговременное обнаружение проблем: У вас есть BPMN? Вы можете точно определить, где пользователи могут столкнуться с препятствиями из-за неудобного бизнес-процесса. Выявление этих проблем на ранней стадии означает, что вы сможете скорректировать свои проекты еще до того, как начнется работа над их кодом.

• Карта пути пользователя: BPMN помогает не только в работе с обычными путями пользователей. Она проливает свет и на нетипичные сценарии, гарантируя, что ваши проекты охватывают все базы и не оставят без внимания ни одного пользователя.

Несмотря на то, что BPMN и UX-дизайн являются представителями разных миров, у них есть общая задача: сделать так, чтобы процессы (бизнес или пользовательские) были плавными, как по маслу. Использование BPMN в вашем UX-инструментарии не только добавляет глубины вашим проектам, но и более тесно связывает их с бизнес-операциями, гарантируя, что созданное вами будет одновременно красивым и функциональным.

Знакомство с BPMN: краткое руководство по моделированию бизнес-процессов

Итак, что же такое BPMN? 

Вы когда-нибудь натыкались на аббревиатуру, которая могла бы заставить вас почесать затылок? Так вот, BPMN (Business Process Model and Notation), или нотация и модель бизнес-процессов, как только вы с ней ознакомитесь, станет совершенно понятной и незаменимой. Это как швейцарский нож для диаграмм бизнес-процессов. Она дает компаниям аккуратный, единообразный способ планировать свои рабочие процессы, облегчая понимание происходящего всем — от главного стейкхолдера в вашем бизнесе до IT-специалистов, бизнес-аналитиков и даже нас, UX-дизайнеров.

Разбор BPMN: что входит в этот набор инструментов? 

BPMN — это несколько удобных фигур и линий, которые отображают все тонкости бизнес-процессов:

События (Events): Эти маленькие кружочки служат сразу и началом, и концом. События инициируют действия или являются их результатами, отмечающая важные проишествия в процессе.

Действия (Activities): Эти прямоугольники со скругленными углами представляют из себя единицы работы, выполняемой в ходе исполнения бизнес-процесса. Они охватывают все задачи, которые необходимо решить, от таких простых, как «Проверка инвентаря», до более сложных подпроцессов, для которых могут понадобиться свои собственные мини-карты.

Развилки или Шлюзы (Gateways): Эти ромбы разделяют и объединяют пути, позволяя процессу разветвляться или сходиться в зависимости от происходящего. Они представляют собой точки принятия решений, направляющие поток задач.

Потоки управления (Sequence Flows): Стрелки, соединяющие точки, показывающие пошаговый путь от одной задачи к другой.

Потоки сообщений (Message Flows): Пунктирные линии, передающие сообщения между различными участниками или отделами, чтобы все были в курсе событий.

Соберем все вместе: Построение BPMN-диаграммы 

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

1. Начало и конец: Начните с событий, которые будут представлять начало и конец процесса.

2. Наметьте маршрут: Добавьте действия — это остановки на пути, в которых будет выполняться работа.

3. Точки принятия решений: Определите шлюзы там, где нужно принять решение, влияющее на маршрут, по которому пойдет процесс.

4. Соедини все: Используйте потоки управления, чтобы проложить путь от одного действия к другому наиболее простым и понятным образом.

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

Обзор лучших инструментов BPMN для UX-дизайна

Когда дело доходит до вплетения BPMN в рабочие процессы UX-дизайнера, выбранные вами инструменты могут либо улучшить, либо наоборот затруднить вашу работу. Это не просто какие-то произвольные редакторы для рисования, это ваши лучшие друзья в создании диаграмм, которые не только хорошо выглядят, но и органично вписываются в бизнес-потоки. Итак, давайте рассмотрим несколько лучших инструментов, которые удобны в использовании и обладают множеством функций, важных для UX-дизайнеров.

Лучшие инструменты для создания диаграмм BPMN

Lucidchart — вероятно, мой личный фаворит

Краткий обзор: Представьте себе облачный инструмент, позволяющий создавать различные диаграммы, включая и нашу BPMN. Lucidchart стал настоящим хитом в этой области благодаря своему удобному интерфейсу, с которым без труда разберется кто угодно.

Почему он подходит для UX-специалистов:

• Командная работа: У вас есть команда? Отлично, ведь Lucidchart позволяет всем вместе участвовать в редактировании в режиме реального времени — не нужно ждать своей очереди.

• Хорошо сочетается с другими инструментами: Подключается к Google Workspace, Microsoft Office, Slack и т. д. Делиться своими наработками — проще простого.

• Легко и просто: Благодаря возможности перетаскивания вам не понадобится руководство размером с «Войну и мир», чтобы начать составлять свои диаграммы.

Bizagi Modeler

Краткий обзор: Перед вами инструмент, который не только бесплатен, но и при этом обладает мощным потенциалом в области BPMN, что идеально подходит для тех случаев, когда вам нужно сделать что-нибудь сложное.

Почему он подходит для UX-специалистов:

• Лучше один раз увидеть: Функции моделирования позволяют проверить процессы до их запуска в эксплуатацию, что позволяет выявить неполадки на ранней стадии.

• Обширная библиотека: Множество готовых элементов значительно упрощают процесс и сокращают время проектирования.

• Документируйте как босс: Благодаря мощным возможностям документирования отслеживать свою работу становится гораздо проще.

Microsoft Visio

Краткий обзор: Ветеран в области создания диаграмм, член семьи Microsoft, известный своей мощной поддержкой BPMN.

Почему он подходит для UX-специалистов:

• Ориентирован на детали: Предлагает множество вариантов построения диаграмм, позволяющих вникнуть в суть любого процесса.

• Магия Microsoft: Прекрасно работает с другими продуктами Microsoft, что делает его незаменимым для тех, кто уже работает в этой экосистеме.

• Индивидуальный подход: Множество шаблонов, которые можно подстроить под себя.

Camunda Modeler — еще один мой любимый инструмент для создания чисто BA BPMN-моделей

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

Почему он подходит для UX-специалистов:

• BPMN и не только: Вдобавок ко всему функционалу BPMN, содержит еще и DMN для моделей принятия решений.

• Отрада для технарей: Благодаря своей бесшовной интеграции идеально подходит для команд, пишущих код на Java или использующих REST API.

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

На что стоит обращать внимание при выборе BPMN-инструментов

Выбор правильного инструмента основывается не только на привлекательности его функционала. Вот что действительно важно:

• Удобство в использовании: Вам нужно что‑то, с чем будет легко работать, а не «пульт управления космическим кораблем».

• Удобство совместной работы: Ведь две (а тем более десять) головы лучше, чем одна, особенно если они могут слаженно работать вместе.

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

• Возможность кастомизации: Иногда вам нужно что‑то особенное в вашей диаграмме, поэтому возможность кастомизировать ее в соответствии с вашими потребностями может стать решающим фактором.

• Совместное использование и экспорт: Что толку от вашей работы, если у вас не возможностью легко поделиться ею? Ищите инструменты, которые позволяют вам экспортировать и делиться своими проектами без лишних хлопот.

Практическое руководство: Составление схемы оформления заказа в интернет-магазине с помощью BPMN

В этой части мы рассмотрим создание BPMN-диаграммы для оформления заказа в интернет-магазине. Пристегните ремни — к концу туториала вы будете рисовать эти диаграммы как профессионал и оптимизировать процесс оформления покупок как никогда раньше. Мы будем использовать Lucidchart.

Сценарий: Улучшение процесса оформления заказа в интернет-магазине

Цель: Давайте составим схему всего процесса — от посещения сайта до покупки и оформления заказа. Речь идет не только о том, что делает покупатель, но и о том, как система сопровождает каждый его шаг.

Создайте аккаунт Lucidchart

• Перейдите на сайт и зарегистрируйтесь: Откройте браузер и перейдите на сайт Lucidchart: https://lucid.co/. Создайте учетную запись и выберите один из нескольких планов оплаты. Если вы еще не уверены в покупке, можно выбрать бесплатный план.

• Настройте свой опыт: Вас могут попросить ответить на несколько вопросов о том, как вы планируете использовать Lucidchart. Это поможет платформе адаптировать ваш опыт к вашим потребностям.

• Начните использовать Lucidchart: После выполнения всех этих шагов вы попадете на дашборд Lucidchart. Здесь вы можете начать создавать новые диаграммы, получить доступ к шаблонам или импортировать документы.

• Ознакомьтесь с туториалами: Если вы новичок в Lucidchart, вам будет полезно ознакомиться с их обучающими ресурсами. Их можно найти в разделе “Help” или (иногда) прямо на дашборде.

Магия BPMN шаг за шагом

Шаг 1: Начало работы

• Откройте больше фигур: Сначала вам нужно включить BPMN на левой панели Shapes. Для этого нужно выбрать синюю кнопку «More shapes», а затем в модальном окне выбрать опцию BPMN 2.0.

• Что происходит: Прежде всего, давайте отметим, с чего все должно начинаться.

• Магия BPMN: Выберем и перетащим круг (это наше стартовое событие), чтобы показать, где покупатель входит в свой аккаунт на сайте нашего интернет-магазина.

Шаг 2: Что входит в список покупок?

• Что происходит: Здесь покупатель приступает к действию. Он будет искать, выбирать и добавлять товары в корзину.

• Элементы BPMN: Используйте эти закругленные прямоугольники, чтобы изобразить каждую из этих задач — поиск товаров, выбор подходящего и добавление его в корзину.

Шаг 3: За кулисами

• Что происходит: Пора разобраться, что делает система, пока наш покупатель совершает покупки.

• Задачи: Это обработка результатов поиска, обновление корзины и подсчет итоговой суммы с учетом всех налогов и стоимости доставки.

Шаг 4: Время принимать решения

• Что происходит: Покупатели сталкиваются с точками принятия решений. Например, когда в наличии есть интересующий их товар или готовы ли они к оформлению заказа.

• Элемент BPMN: Ромб (шлюз) обозначает эти развилки, направляя покупателя в зависимости от его выбора.

Шаг 5: Завершение

• Что происходит: Мы приближаемся к финалу — вводим информацию о доставке, выбираем способ оплаты и подтверждаем покупку.

• Задачи системы: Пока наш покупатель завершает работу, система тоже не бездействует — проверяет платежи, отправляет подтверждение заказа и уведомляет склад о том, что посылка уже в пути.

Шаг 6: Торжественный финал

• Что происходит: Хорошо все, что хорошо кончается, верно? Нам нужен четкий конец нашего путешествия.

• Элемент BPMN: Кружок с толстой обводкой (финальное событие) сигнализирует о том, что наш покупатель получил подтверждение заказа и данные о доставке.

Ну вот и все! В этом простом потоке, в котором с помощью BPMN описывается процесс оформления покупки, мы получаем вид с высоты птичьего полета как на путь пользователя, так и на реакцию системы. С точки зрения UX-дизайна вы также заметите, что каждая задача пользователя — это отдельный пользовательский экран. Благодаря событиям системных задач вы также заметите потенциальные задержки, отсутствующие экраны или индикаторы загрузки, которые мы должны представить пользователю. Это поможет нам заранее разработать дизайн этих таких сценариев, а также проинформировать бизнес-аналитика или продакт-менеджера о потенциальном поводе для фрустрации у пользователей, который команда могла упустить или не продумать.

Вот хороший туториал по BPMN от Lucidchart, в котором показано, как использовать фигуры и интерфейс. А также более подробные объяснения по каждой из фигур и стрелок.

Почему BPMN кардинально меняет дизайн пользовательского интерфейса

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

Основные выводы:

• Вместо тысячи слов: BPMN — это как Google Maps для бизнес-процессов. Она помогает нам, UX-специалистам, заглянуть за глянцевый пользовательский интерфейс и проникнуть в суть операций, благодаря которым все работает.

• Лучше вместе: Вы когда-нибудь бывали в ситуации, когда в ответ на обоснование своей разработки вы получали лишь пустые взгляды? С BPMN мы все говорим на одном языке, поэтому нам гораздо проще найти общий язык с бизнес-аналитиками и разработчиками.

• Чиним до того, как сломается: Знание всех тонкостей бизнес-процессов позволяет нам выявлять потенциальные проблемы до того, как они превратятся в настоящую головную боль. Мы работаем на упреждение, а не на реакцию, что идет на пользу всем участникам процесса.

Заключение

Напоследок порекомендую несколько ресурсов для обучения BPMN — от книг до программных инструментов.

Книги

• “BPMN Method and Style” Брюса Сильвера (Bruce Silver). Эта книга является основным пособием для изучения BPMN. Она предлагает подробное объяснение стандартов и лучших практик BPMN. Включает примеры и пошаговую методику, которая учит читателей разрабатывать правильные и понятные модели.

• “Real-Life BPMN” Якоба Фройнда (Jakob Freund) и Бернда Рюкера (Bernd Rücker). Книга сосредоточена на практических аспектах BPMN в реальных приложениях. Особенно полезна для тех, кто применяет BPMN в корпоративной среде. Включает советы по работе со сложными сценариями и использованию BPMN для различных бизнес-кейсов.

Веб-сайты и онлайн-ресурсы

• Туториалы по BPMN от Camunda: Бесплатные туториалы, охватывающие как базовые, так и продвинутые темы. Отлично подходят для практических занятий.

• Краткое руководство по BPMN от Trisotech: Краткое руководство по символам BPMN и их использованию, идеально подходящее для быстрого поиска.

Программные средства с поддержкой обучения

• Bizagi Modeler: Помимо инструмента для создания BPMN-диаграмм, Bizagi предлагает туториалы и обучающий портал, чтобы помочь пользователям освоить концепции BPMN в процессе моделирования.

• Lucidchart: Предлагает интерактивное построение диаграмм с поддержкой BPMN и образовательные ресурсы, которые помогают пользователям понять, как эффективно использовать BPMN в рамках этого инструмента.

• Signavio: Предоставляет комплексный набор для моделирования процессов с ресурсами и акцентом на интеграцию BPMN в управлении бизнес-процессами.

Освоить описание процессов в нотации BPMN через углубленную практику можно на соответсвующем онлайн-курсе в Otus. На странице курса вы сможете ознакомиться с программой обучения, а также посмотреть записи открытых уроков.