Kit de bloques: la contribución de Slack a la creación de una mejor interfaz de usuario de colaboración

Publicado: 2022-03-10
Resumen rápido ↬ Slack ha hecho mucho para unir equipos y socios en línea. También se ha hecho mucho para empoderar a los desarrolladores para que construyan sus propias aplicaciones personalizadas. Sin embargo, hasta hace poco tiempo, los desarrolladores estaban limitados por lo que podían hacer para personalizar el diseño de esas aplicaciones. Eso está cambiando hoy con Block Kit.

(Este es un artículo patrocinado). En los últimos años, ha habido un cambio importante en la forma en que funcionan las empresas. A medida que más empresas se vuelven independientes de la ubicación, las herramientas de colaboración se han convertido en la forma estándar en que los equipos se reúnen y realizan el trabajo.

Dicho esto, el hecho de que tengamos aplicaciones de colaboración que integren nuestras herramientas y procesos comerciales conectados no significa que la experiencia siempre conduzca a una eficiencia o productividad óptimas. ¿Por qué? Bueno, a veces una interfaz de usuario hostil se interpone en el camino.

Por eso, hoy voy a hablar sobre Block Kit, la contribución de Slack para crear una mejor interfaz de usuario de colaboración.

Para aquellos de ustedes que hayan creado una aplicación de Slack personalizada (para el directorio de aplicaciones o para fines internos), esta será su introducción a la nueva herramienta de diseño. Para aquellos de ustedes que no lo han hecho, está bien. Hay algunas lecciones valiosas que sacar de esto en términos de lo que hace un espacio de trabajo atractivo que mejorará la colaboración.

Desarrolladores, ¿saben en qué ha estado trabajando Slack?

Slack ha logrado grandes avances desde su lanzamiento en 2013. Lo que originalmente comenzó como una aplicación de mensajería ahora se ha convertido en una poderosa plataforma de colaboración.

Al momento de escribir esto: Slack tiene más de 10 millones de usuarios activos diariamente, y viven en todo el mundo (más de 150 países, para ser exactos).

Un ejemplo de un canal de Slack para hablantes de japonés
Este es un ejemplo de un canal de Slack para hablantes de japonés. (Fuente de la imagen: Slack) (Vista previa grande)

No solo las personas usan Slack: casi 585 000 equipos de tres personas o más colaboran dentro de la plataforma. 65 de las empresas Fortune 100 también están en Slack.

Un vistazo a la colaboración en tiempo real entre los usuarios de Slack
Un vistazo a la colaboración en tiempo real entre los usuarios de Slack (Fuente de la imagen: Slack) (Vista previa grande)

Todo esto es gracias a la API de Slack, que ha abierto la puerta para que los desarrolladores creen y publiquen aplicaciones disponibles públicamente que amplían la funcionalidad de los espacios de trabajo de Slack.

La página principal del directorio de aplicaciones de Slack
La página principal del directorio de aplicaciones de Slack. (Fuente de la imagen: Slack) (Vista previa grande)

De esta manera, los usuarios de Slack no tienen que alternar entre sus herramientas comerciales más utilizadas. Los procesos relacionados pueden tener lugar desde Slack.

A veces, sin embargo, lo que está disponible en el Directorio de aplicaciones de Slack simplemente no es suficiente para lo que su organización necesita internamente. Es posible que pueda cerrar algunas de las divisiones entre sus herramientas comerciales con lo que hay allí, pero también puede encontrar una razón para crear sus propias aplicaciones personalizadas de Slack.

Presentamos Block Kit de Slack

Aquí está la cuestión: si bien Slack ha logrado permitir que los desarrolladores creen sus propias aplicaciones para mejorar la colaboración dentro de la plataforma, ¿cómo se supone que los desarrolladores deben saber cómo crear una buena experiencia con ella?

Hasta hace poco, la API y el directorio de aplicaciones de Slack proporcionaban una flexibilidad y un control limitados. Como explicó Brian Elliott, el Gerente General de la Plataforma:

“Hoy en día, todas las aplicaciones se ven obligadas a utilizar un conjunto limitado de formas para mostrar información valiosa. Si ha mirado, visto y usado todas las diferentes aplicaciones en Slack, muchas de ellas terminan con el mismo diseño, independientemente de la funcionalidad que intenten implementar. Cuando en realidad lo que necesita es un conjunto de componentes que le permitan crear ricas pantallas interactivas que sean más fáciles de comprender, digerir y actuar para las personas”.

Entonces, Slack desarrolló Block Kit.

Block Kit es un marco de interfaz de usuario que permite a los desarrolladores, diseñadores y creadores de front-end mostrar sus aplicaciones de mensajería a través de una interfaz de usuario rica, interactiva e intuitiva. Además, al proporcionar un conjunto de elementos o bloques de interfaz de usuario apilables, Block Kit ahora brinda a los desarrolladores más control y flexibilidad sobre los diseños y diseños de sus aplicaciones.

Nota : si desea ver Block Kit en acción, únase a la próxima sesión de Slack, "Construir con Block Kit", donde obtendrá una demostración en vivo del producto y verá lo fácil que es personalizar el diseño de su aplicación.

Block Kit viene con dos componentes clave:

1. Creador de juegos de bloques

Observe la similitud entre esta herramienta de creación y muchas de las otras herramientas que usamos para crear sitios web y aplicaciones para clientes:

Una demostración del generador de kits de bloques
Una demostración del constructor Block Kit (Fuente de la imagen: Block Kit) (Vista previa grande)

Los componentes del edificio están a la izquierda. Simplemente haga clic en el que desea incluir y observe cómo se agrega a la vista previa de su aplicación en el centro.

¿Quieres más personalización? Echa un vistazo al editor de texto a la derecha. Si bien Block Kit proporciona elementos prefabricados que siguen las mejores prácticas para diseñar aplicaciones de mensajería, tiene la capacidad de personalizarlos si lo prefiere.

2. Plantillas de kits de bloques

Si bien puede crear una interfaz de mensajería desde el Generador por su cuenta, también le sugiero que explore las Plantillas proporcionadas:

Algunas de las plantillas que Block Kit ofrece a los usuarios
Estas son solo algunas de las plantillas que Block Kit ofrece a los usuarios. (Fuente de la imagen: Block Kit) (Vista previa grande)

El equipo de Slack ya ha visto casos realmente útiles de aplicaciones de Slack en acción. No hace falta decir que saben qué tipo de cosas su organización podría querer aprovechar para mejorar la colaboración.

Es por eso que encontrará acciones comunes como las siguientes ya creadas para usted:

  • Revisar las solicitudes de aprobación;
  • Tomar medidas sobre nuevas notificaciones;
  • Ejecutar encuestas y monitorear los resultados;
  • Realización de una búsqueda.

Guru es una de esas herramientas que aprovecha Block Kit para mejorar su aplicación Slack:

Guru proporciona una función de búsqueda de base de datos dentro de Slack. Los resultados ahora se recuperan rápidamente y se muestran más claramente en la interfaz de Slack.

Las claves para construir una mejor interfaz de usuario de colaboración

Ahora que hemos visto lo que viene con Block Kit, necesitamos hablar sobre cómo lo ayudará a crear aplicaciones que conduzcan a una colaboración más productiva.

bloques

Hace poco hablé sobre el tema de Gutenberg y cómo los diseñadores pueden usarlo en su beneficio. Aunque el nuevo editor de WordPress claramente tiene sus fallas, no hay duda de por qué el equipo de WordPress hizo el cambio:

Los constructores de bloques son el futuro del diseño web.

Entiendo que los constructores de bloques tienden a ser la herramienta preferida para los diseñadores web y los usuarios de bricolaje. Los constructores permiten un diseño de interfaz visual y, a menudo, incluyen abundantes opciones de personalización.

Algunos de los bloques prefabricados incluidos en Block Kit
Algunos de los bloques prefabricados incluidos en Block Kit (Fuente de la imagen: Block Kit) (Vista previa grande)

Pero Block Kit hace mucho más que eso, lo que significa que tanto los diseñadores como los desarrolladores pueden crear aplicaciones personalizadas con facilidad.

Código

El diferenciador clave entre algo como un creador de sitios web y el creador de Block Kit es el aspecto de la codificación.

En la mayoría de los casos, los diseñadores usan creadores de páginas para no tener que preocuparse por el código. Pueden agregar algunas clases de CSS personalizadas o agregar HTML a su texto, pero eso es todo. Sin embargo, los desarrolladores no funcionan así.

Block Kit incluye un panel con JSON escrito previamente que los desarrolladores pueden copiar y pegar en su propia aplicación de Slack una vez que esté lista para funcionar. En lugar de dejar que los desarrolladores escriban su propio código, Slack proporciona un código que utiliza las mejores prácticas para la velocidad y el diseño.

Una muestra de JSON que obtiene cuando crea su rica experiencia de mensajería en el constructor
Una muestra de JSON que obtiene cuando crea su rica experiencia de mensajería en el constructor. (Fuente de la imagen: Block Kit) (Vista previa grande)

Esto permite a los desarrolladores centrarse en realizar personalizaciones en lugar de tener que crear sus aplicaciones desde cero.

Consistencia

Cuando los usuarios de Slack ingresan a la plataforma, saben qué esperar. Cada interfaz es la misma de un espacio de trabajo a otro.

Sin embargo, cuando una API permite a los desarrolladores crear aplicaciones para integrarse con esos espacios, existe el riesgo de introducir elementos que simplemente no encajan bien. Cuando eso sucede, la imprevisibilidad de la interfaz puede crear confusión y vacilación para el usuario final. Las opciones de diseño que no se ajustan bien también pueden dañar la experiencia.

Block Kit permite a los desarrolladores crear aplicaciones con componentes de interfaz de usuario apilables que han sido probados y probados. Al personalizar una experiencia dentro de una plataforma ya establecida, puede ser difícil saber hasta dónde puede llegar, o incluso si funcionará. Slack ha eliminado esas preguntas de la ecuación.

Espaciado

Así es como se ve el intercambio tradicional de Slack:

Un ejemplo de usuarios de Slack que se envían mensajes entre sí
Un ejemplo de usuarios de Slack que se envían mensajes entre sí (fuente de la imagen: Slack) (vista previa grande)

Tiende a ser un intercambio de ida y vuelta de una sola columna. Y esto funciona perfectamente bien para los canales de Slack donde la colaboración es simple. Mensaje de los empleados sobre el estado de una tarea. Un cliente carga un activo faltante. El CEO comparte un enlace a un comunicado de prensa que menciona a la empresa. Pero no todos los espacios de trabajo son tan simples.

Block Kit lo ayuda a maximizar y mejorar el espacio que ocupan las funciones de su aplicación. Por ejemplo, Block Kit permite a empresas como Optimizely mostrar información pertinente en formatos de dos columnas para una mejor legibilidad.

Optimizely usa Block Kit para crear formatos de dos columnas
Optimizely utiliza Block Kit para crear formatos de dos columnas. (Fuente de la imagen: Optimizely) (Vista previa grande)

De hecho, esta es una mejor manera de compartir detalles pertinentes en la aplicación Slack de su equipo.

Interacciones enriquecidas

Otra forma de elevar su aplicación es convertir la integración en una rica en interacciones.

Los bloques se han desarrollado especialmente para mejorar los elementos más utilizados en la colaboración de Slack. Por ejemplo:

  • Use el bloque Seccional para una mejor organización.
  • Usa el bloque de texto para personalizar cómo se muestran los mensajes.
  • Use bloques de imagen del tamaño adecuado para que pueda dejar de preocuparse por si se mostrarán correctamente o no.
  • Use bloques de contexto para mostrar líneas de autor o contexto adicional sobre los mensajes (como autor, comentarios, cambios, etc.)
  • Use bloques divisorios para mejorar el aspecto de la aplicación.
  • Use bloques de acción como selección de menú, selección de botones y fechas de calendario para incorporar mejores funciones a su aplicación y hacer que se muestren de manera más intuitiva.
  • Use bloques de 2 secciones para diseños más limpios.

Doodle tiene un hermoso ejemplo de lo que se puede hacer con interacciones ricas usando Block Kit:

Como puede ver, los usuarios pueden trabajar juntos para programar reuniones con la misma eficacia que si estuvieran usando un calendario de terceros. La única diferencia es que ahora pueden hacer todo eso dentro de su espacio de trabajo de Slack.

Terminando

La colaboración es una parte esencial del éxito de cualquier organización, y no importa si se trata de un equipo de 3 o de 300. Pero hay una gran diferencia entre trabajar juntos y colaborar productivamente .

Gracias a la API de Slack, los desarrolladores han creado formas increíbles de integrar procesos y herramientas relacionados en la plataforma. Y gracias a Block Kit, esas contribuciones externas no interrumpirán la experiencia si el diseño de los elementos se queda corto.

Con capacidades intuitivas de construcción de bloques, opciones de codificación amigables para los desarrolladores y más, Block Kit ayudará a los desarrolladores a brindar experiencias más ricas y una mejor colaboración a la plataforma Slack.

Una última cosa a mencionar:

La conferencia Frontiers de Slack se acerca pronto. Será en San Francisco el 24 y 25 de abril. Si planea asistir, tenga en cuenta que la pista de desarrolladores incluirá un día completo de capacitación en Block Kit , incluidos talleres, demostraciones de nuevas funciones, tutoriales, así como uno- tutoría uno a uno. Si estás pensando en Block Kit, esta es una oportunidad que no querrás dejar pasar.