Этот пост был написан для блога платформы Slack. Читать оригинальную запись здесь.

Интеграция Guru с Slack началась на самых ранних этапах появления ботов, когда взаимодействие было в основном текстовым, и расширилась в функциональности по мере добавления Slack новых возможностей — таких как интерактивные сообщения и действия приложений. Мы сразу же увидели преимущества Block Kit, возможность создавать глубокие и насыщенные взаимодействия, которых ожидают наши пользователи, с более знакомыми шаблонами UI/UX и интерактивным контентом. Однако то, что мы не ожидали, так это то, как Block Kit изменит способ, которым наши команды разработки и дизайна сотрудничают.

Создание лучшего опыта onboarding

Мы первый раз применили Block Kit для обновления справочного меню нашего приложения. Ранее, когда пользователь только начинал, справочное меню встречало его стеной информационного текста. Этот текст не только было трудно прочитать, но и требовалось, чтобы пользователь вводил команды для выполнения чего-либо. Процесс onboarding приложения критичен для наших пользователей, и мы использовали Block Kit, чтобы полностью переосмыслить этот опыт — по двум ключевым направлениям:

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

Справочное меню — это всего лишь одно из мест, где Block Kit поднимает опыт работы с приложением Guru. Инлайн-кнопки в интерфейсе ленты активности приближают призыв к действию к соответствующей информации. Меню с избытком теперь скрывают действия, которые используются реже, и помогают пользователю сосредоточиться на важной информации. Мы только начали — все еще существуют бесконечные способы, которыми Block Kit может сделать приложения более интерактивными.

Говоря на одном языке

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

Хотя это было неэффективно, этот процесс знаком большинству разработчиков. Хотя мы ожидали создать более насыщенные и интерактивные взаимодействия с помощью Block Kit, мы не могли предсказать, насколько сильно конструкция Block Kit изменит партнерство между дизайном и разработкой. Конструктор Block Kit — это визуальная песочница для прототипирования, которая позволяет вам выбирать, укладывать и настраивать любые доступные блоки.

Для Guru конструктор Block Kit соединяет пробел между дизайном и инженерией — позволяя нашим дизайнерам легко прототипировать их идеальный пользовательский опыт, одновременно создавая точный JSON, необходимый для реализации их видения. Наша дизайнерская команда больше не нуждается в том, чтобы начинать с чистого листа, задаваясь вопросом: Где мне поставить эту кнопку? или Какой текст мне использовать? Теперь все так же просто, как создание макета, совместное использование URL, а затем итерация в два конца.

Конструктор Block Kit также служит инструментом для разработки для отладки проблемного JSON. Если сообщение приложения рендерится неправильно, мы просто вставляем код в конструктор и можем мгновенно определить проблему.

Эффективность в своем лучшем проявлении

Сочетание Block Kit и конструктора Block Kit привело к более эффективному опыту как для пользователей приложения, так и для команды Guru. Block Kit не только предоставляет нам новую структуру для создания уникального интерфейса приложения, но также дает нам гибкость и контроль над порядком и компоновкой информации. Теперь использовать приложение Guru легче, чем когда-либо; кроме того, обновленное справочное меню помогает пользователям быстро начать работу.

Любопытно? Посмотрите на свежепереосмысленное приложение Guru с поддержкой Block Kit в каталоге приложений Slack по адресу slack.com/apps.