The Expected (and Unexpected) Benefits of Building with Block Kit

El nuevo Block Kit de Slack ha resultado en una experiencia más eficiente tanto para los usuarios de la aplicación Guru como para el equipo de Guru. Ahora, es más fácil que nunca usar la aplicación Guru para Slack. Descubre cómo nuestro equipo en Guru aprovechó la oferta de Block Kit de Slack.
Tabla de contenidos

Esta entrada fue escrita para el blog de la plataforma Slack. Lee la entrada original aquí.

La integración de Slack de Guru comenzó en los primeros días de los bots, donde la experiencia era principalmente basada en texto, y ha crecido en funcionalidad a medida que Slack ha introducido más funciones — como mensajes interactivos y acciones de aplicaciones. Vimos de inmediato los beneficios de Block Kit, una oportunidad para construir experiencias profundas y ricas que nuestros usuarios han llegado a esperar, con patrones de UI/UX más familiares y contenido interactivo. Sin embargo, lo que no esperábamos era cómo Block Kit cambiaría la forma en que nuestros equipos de desarrollo y diseño colaboran.

slack-and-guru.png

Construyendo una mejor experiencia de incorporación

Aplicamos Block Kit por primera vez para renovar el menú de ayuda de nuestra aplicación. Anteriormente, cuando un usuario estaba comenzando, el menú de ayuda lo recibía con una pared de texto informativo. No solo era difícil escanear este texto, sino que requería que un usuario escribiera comandos para lograr algo. La incorporación de aplicaciones es crítica para nuestros usuarios, y utilizamos Block Kit para reinventar completamente la experiencia — de dos maneras clave:

  • A través del uso de divisores, estilizamos esa pared de texto informativo al agrupar contenido similar — haciéndolo más digerible y fácil de leer.
  • Los botones en línea y los menús desplegables permiten una experiencia de incorporación interactiva y orientada a la acción. Ahora los usuarios no necesitan escribir comandos clave; pueden simplemente seleccionar un botón y actuar rápidamente.
Guru%20help%20menu%20in%20Slack.png

El menú de ayuda fue solo un lugar donde Block Kit eleva la experiencia de la aplicación Guru. Los botones en línea en la interfaz del feed de actividades acercan la llamada a la acción a la información correspondiente. Los menús desplegables ahora ocultan acciones que se utilizan con menos frecuencia, y ayudan al usuario a concentrarse en la información prioritaria. Solo hemos arañado la superficie — aún hay infinitas formas en que Block Kit puede hacer que las aplicaciones sean más interactivas.

Hablar el mismo idioma

En Guru, construir experiencias consistentes en todas las interfaces (aplicación web, extensión de navegador y aplicación de Slack) puede ser un desafío. Mientras el diseño y el desarrollo trabajan incansablemente para garantizar experiencias sin problemas para nuestros usuarios, es un proceso colaborativo con mucha retroalimentación. Anteriormente, nuestro equipo de diseño (generalmente no acostumbrado a construir en Slack) comenzaba con un lienzo en blanco y, inevitablemente, se encontraba con limitaciones técnicas — especialmente a medida que sus diseños pasaban a desarrollo, requiriendo muchas iteraciones antes de llegar a un diseño final.

Sin importar lo ineficiente que sea, este proceso es uno que la mayoría de los desarrolladores conocen. Mientras esperábamos construir experiencias más ricas e interactivas utilizando Block Kit, no anticipamos cuánto transformaría el Block Kit Builder la asociación entre diseño y desarrollo. El Block Kit Builder es un sandbox de prototipado visual que permite seleccionar, apilar y personalizar cualquier bloque disponible.

Para Guru, el Block Kit Builder cierra la brecha entre diseño e ingeniería — permitiendo a nuestros diseñadores prototipar fácilmente su experiencia de usuario ideal, mientras que también produce el JSON exacto necesario para que el desarrollo implemente su visión. Nuestro equipo de diseño ya no necesita comenzar desde una pizarra en blanco, preguntándose: ¿Dónde puedo poner este botón? o ¿Qué texto uso? Ahora es tan fácil como crear el diseño, compartir la URL y luego iterar de ida y vuelta.

Slack%20Block%20Kit.png

El Block Kit Builder también sirve como una herramienta para que el desarrollo depure JSON problemático. Si un mensaje de aplicación no se está representando correctamente, simplemente pegamos el código en el constructor y podemos identificar instantáneamente el problema.

Eficiencia en su máxima expresión

La combinación de Block Kit y el Block Kit Builder ha resultado en una experiencia más eficiente tanto para los usuarios de la aplicación como para el equipo de Guru. Block Kit no solo nos proporciona un nuevo marco para construir UI únicas de aplicaciones, sino que también nos da flexibilidad y control sobre el orden y diseño de la información. Ahora es más fácil que nunca usar la aplicación Guru; además, el menú de ayuda actualizado permite a los usuarios comenzar rápidamente.

¿Tienes curiosidad? Consulta la aplicación de Guru recién actualizada habilitada por Block Kit en el directorio de aplicaciones de Slack en slack.com/apps.

Esta entrada fue escrita para el blog de la plataforma Slack. Lee la entrada original aquí.

La integración de Slack de Guru comenzó en los primeros días de los bots, donde la experiencia era principalmente basada en texto, y ha crecido en funcionalidad a medida que Slack ha introducido más funciones — como mensajes interactivos y acciones de aplicaciones. Vimos de inmediato los beneficios de Block Kit, una oportunidad para construir experiencias profundas y ricas que nuestros usuarios han llegado a esperar, con patrones de UI/UX más familiares y contenido interactivo. Sin embargo, lo que no esperábamos era cómo Block Kit cambiaría la forma en que nuestros equipos de desarrollo y diseño colaboran.

slack-and-guru.png

Construyendo una mejor experiencia de incorporación

Aplicamos Block Kit por primera vez para renovar el menú de ayuda de nuestra aplicación. Anteriormente, cuando un usuario estaba comenzando, el menú de ayuda lo recibía con una pared de texto informativo. No solo era difícil escanear este texto, sino que requería que un usuario escribiera comandos para lograr algo. La incorporación de aplicaciones es crítica para nuestros usuarios, y utilizamos Block Kit para reinventar completamente la experiencia — de dos maneras clave:

  • A través del uso de divisores, estilizamos esa pared de texto informativo al agrupar contenido similar — haciéndolo más digerible y fácil de leer.
  • Los botones en línea y los menús desplegables permiten una experiencia de incorporación interactiva y orientada a la acción. Ahora los usuarios no necesitan escribir comandos clave; pueden simplemente seleccionar un botón y actuar rápidamente.
Guru%20help%20menu%20in%20Slack.png

El menú de ayuda fue solo un lugar donde Block Kit eleva la experiencia de la aplicación Guru. Los botones en línea en la interfaz del feed de actividades acercan la llamada a la acción a la información correspondiente. Los menús desplegables ahora ocultan acciones que se utilizan con menos frecuencia, y ayudan al usuario a concentrarse en la información prioritaria. Solo hemos arañado la superficie — aún hay infinitas formas en que Block Kit puede hacer que las aplicaciones sean más interactivas.

Hablar el mismo idioma

En Guru, construir experiencias consistentes en todas las interfaces (aplicación web, extensión de navegador y aplicación de Slack) puede ser un desafío. Mientras el diseño y el desarrollo trabajan incansablemente para garantizar experiencias sin problemas para nuestros usuarios, es un proceso colaborativo con mucha retroalimentación. Anteriormente, nuestro equipo de diseño (generalmente no acostumbrado a construir en Slack) comenzaba con un lienzo en blanco y, inevitablemente, se encontraba con limitaciones técnicas — especialmente a medida que sus diseños pasaban a desarrollo, requiriendo muchas iteraciones antes de llegar a un diseño final.

Sin importar lo ineficiente que sea, este proceso es uno que la mayoría de los desarrolladores conocen. Mientras esperábamos construir experiencias más ricas e interactivas utilizando Block Kit, no anticipamos cuánto transformaría el Block Kit Builder la asociación entre diseño y desarrollo. El Block Kit Builder es un sandbox de prototipado visual que permite seleccionar, apilar y personalizar cualquier bloque disponible.

Para Guru, el Block Kit Builder cierra la brecha entre diseño e ingeniería — permitiendo a nuestros diseñadores prototipar fácilmente su experiencia de usuario ideal, mientras que también produce el JSON exacto necesario para que el desarrollo implemente su visión. Nuestro equipo de diseño ya no necesita comenzar desde una pizarra en blanco, preguntándose: ¿Dónde puedo poner este botón? o ¿Qué texto uso? Ahora es tan fácil como crear el diseño, compartir la URL y luego iterar de ida y vuelta.

Slack%20Block%20Kit.png

El Block Kit Builder también sirve como una herramienta para que el desarrollo depure JSON problemático. Si un mensaje de aplicación no se está representando correctamente, simplemente pegamos el código en el constructor y podemos identificar instantáneamente el problema.

Eficiencia en su máxima expresión

La combinación de Block Kit y el Block Kit Builder ha resultado en una experiencia más eficiente tanto para los usuarios de la aplicación como para el equipo de Guru. Block Kit no solo nos proporciona un nuevo marco para construir UI únicas de aplicaciones, sino que también nos da flexibilidad y control sobre el orden y diseño de la información. Ahora es más fácil que nunca usar la aplicación Guru; además, el menú de ayuda actualizado permite a los usuarios comenzar rápidamente.

¿Tienes curiosidad? Consulta la aplicación de Guru recién actualizada habilitada por Block Kit en el directorio de aplicaciones de Slack en slack.com/apps.

Experimenta el poder de la plataforma Guru de primera mano: realiza nuestro recorrido interactivo por el producto
Realizar un recorrido