Block Kit: вклад Slack в создание лучшего пользовательского интерфейса для совместной работы

Опубликовано: 2022-03-10

Краткое резюме ↬ Slack много сделал для объединения команд и партнеров в Интернете. Также многое сделано для того, чтобы дать разработчикам возможность создавать для него свои собственные приложения. Однако до недавнего времени разработчики были ограничены тем, что они могли сделать для настройки дизайна этих приложений. Это меняется сегодня с Block Kit.

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

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

Вот почему сегодня я расскажу о Block Kit, вкладе Slack в создание лучшего пользовательского интерфейса для совместной работы.

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

Разработчики, знаете ли вы, над чем работает Slack?

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

На момент написания этой статьи: у Slack ежедневно более 10 миллионов активных пользователей — и они живут по всему миру (точнее, более чем в 150 странах).

Пример Slack-канала для японцев — Вот пример канала Slack для японцев. (Источник изображения: Slack) (Большой предварительный просмотр)

Slack используют не только отдельные люди — почти 585 000 команд из трех и более человек сотрудничают на платформе. 65 компаний из списка Fortune 100 также используют Slack.

Взгляд на совместную работу пользователей Slack в реальном времени — Взгляд на совместную работу пользователей Slack в режиме реального времени (Источник изображения: Slack) (Большой предварительный просмотр)

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

Первая страница Slack App Directory. (Источник изображения: Slack) (Большой предварительный просмотр)

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

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

Представляем комплект блоков от Slack

Вот в чем дело: хотя Slack удалось позволить разработчикам создавать свои собственные приложения для улучшения совместной работы на платформе, откуда разработчики должны знать, как создать с ним хороший опыт?

До недавнего времени API Slack и каталог приложений обеспечивали ограниченную гибкость и контроль. Как объяснил Брайан Эллиотт, генеральный менеджер платформы:

«Сегодня все приложения вынуждены использовать ограниченный набор способов отображения богатой информации. Если вы просматривали, видели и использовали все различные приложения в Slack, многие из них в конечном итоге имеют один и тот же макет независимо от того, какую функциональность они пытаются развернуть. Когда на самом деле вам нужен набор компонентов, которые позволяют создавать богатые интерактивные дисплеи, которые людям легче понять, усвоить и использовать».

Итак, Slack разработал Block Kit.

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

Примечание . Если вы хотите увидеть Block Kit в действии, присоединяйтесь к предстоящему сеансу Slack «Создание с помощью Block Kit», где вы получите живую демонстрацию продукта и увидите, как легко настроить дизайн вашего приложения.

В комплект Block Kit входят два ключевых компонента:

1. Конструктор комплектов блоков

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

Демонстрация конструктора Block Kit (Источник изображения: Block Kit) (Большой предварительный просмотр)

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

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

2. Шаблоны комплектов блоков

Хотя вы, безусловно, можете создать интерфейс обмена сообщениями из Builder самостоятельно, я бы посоветовал также изучить предоставленные шаблоны:

Некоторые из шаблонов, которые Block Kit предлагает пользователям — Это лишь некоторые из шаблонов, которые Block Kit предлагает пользователям. (Источник изображения: Block Kit) (Большой предварительный просмотр)

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

Вот почему вы найдете общие действия, такие как следующие, уже созданные для вас:

Рассмотрение запросов на утверждение;
Принятие мер по новым уведомлениям;
Проведение опросов и мониторинг результатов;
Проведение обыска.

Guru — один из таких инструментов, который использует Block Kit для улучшения своего приложения Slack:

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

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

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

Блоки

Недавно я говорил о Гутенберге и о том, как дизайнеры могут использовать его в своих интересах. Хотя у нового редактора WordPress явно есть свои недостатки, нет сомнений, почему команда WordPress внесла изменения:

Конструкторы блоков — это будущее веб-дизайна.
“

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

Некоторые из готовых блоков, включенных в набор блоков (Источник изображения: набор блоков) (большой предварительный просмотр)

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

Код

Ключевым отличием чего-то вроде конструктора веб-сайтов от конструктора Block Kit является аспект кодирования.

В большинстве случаев дизайнеры используют компоновщики страниц, поэтому им не нужно возиться с кодом. Они могут добавить некоторые пользовательские классы CSS или добавить HTML к своему тексту, но обычно это все. Хотя разработчики так не работают.

Block Kit включает в себя панель с предварительно написанным JSON, которую разработчики могут скопировать и вставить в свое собственное приложение Slack, когда оно будет готово к работе. Вместо того, чтобы предоставлять разработчикам возможность писать свой собственный код, Slack предоставляет код, в котором используются лучшие практики по скорости и дизайну.

Образец JSON, который вы получаете, когда создаете расширенный интерфейс обмена сообщениями в конструкторе. (Источник изображения: Block Kit) (Большой предварительный просмотр)

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

Последовательность

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

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

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

Расстояние

Вот как выглядит традиционная биржа Slack:

Пример обмена сообщениями пользователями Slack друг с другом — Пример обмена сообщениями между пользователями Slack (Источник изображения: Slack) (Большой предварительный просмотр)

Это, как правило, одноколоночный обмен взад-вперед. И это отлично работает для каналов Slack, где совместная работа проста. Сообщение сотрудников о статусе задачи. Клиент загружает недостающий ресурс. Генеральный директор делится ссылкой на пресс-релиз, в котором упоминается компания. Но не все рабочие пространства так просты.

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

Optimizely использует Block Kit для создания форматов с двумя столбцами. (Источник изображения: Optimizely) (Большой предварительный просмотр)

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

Богатые взаимодействия

Еще один способ улучшить ваше приложение — превратить интеграцию в интеграцию, богатую взаимодействиями.

Блоки были специально разработаны для улучшения наиболее часто используемых элементов совместной работы Slack. Например:

Используйте блок Sectional для лучшей организации.
Используйте блок « Текст », чтобы настроить отображение сообщений.
Используйте блоки изображений правильного размера, чтобы не беспокоиться о том, будут ли они отображаться правильно.
Используйте блоки контекста , чтобы показать авторство или дополнительный контекст сообщений (например, автора, комментарии, изменения и т. д.).
Используйте разделительные блоки, чтобы улучшить внешний вид приложения.
Используйте блоки действий , такие как выбор меню, выбор кнопок и даты календаря, чтобы улучшить функции вашего приложения и сделать их отображение более интуитивно понятным.
Используйте двухсекционные блоки для более четкого макета.

У Doodle есть прекрасный пример того, что можно сделать с помощью расширенных взаимодействий с помощью Block Kit:

Как видите, пользователи могут совместно планировать встречи так же эффективно, как если бы они использовали сторонний календарь. Единственное отличие состоит в том, что теперь они могут делать все это в своем рабочем пространстве Slack.

Подведение итогов

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

Благодаря API Slack разработчики создали несколько замечательных способов интеграции связанных процессов и инструментов в платформу. И благодаря Block Kit эти внешние дополнения не будут мешать работе, если дизайн элементов не соответствует требованиям.

Благодаря интуитивно понятным возможностям построения блоков, удобным для разработчиков вариантам кодирования и многому другому, Block Kit поможет разработчикам расширить возможности и улучшить совместную работу на платформе Slack.

И последнее, о чем стоит упомянуть:

Скоро состоится конференция Slack’s Frontiers. Он пройдет в Сан-Франциско 24 и 25 апреля. Если вы планируете его посетить, обратите внимание, что направление «Разработчики» будет включать в себя однодневное обучение работе с Block Kit , в том числе семинары, демонстрации новых функций, учебные пособия, а также одно- наставничество на одном уровне. Если вы думаете о Block Kit, это возможность, которую вы не захотите упустить.