Guía de estilo de la IU para complementos de Google Workspace

Los complementos de Google Workspace deben ser coherentes con el estilo y el diseño de la aplicación host que extienden. Deberían extender la IU de forma natural con controles y comportamientos conocidos. En los lineamientos que se presentan aquí, se describen formas de manejar el texto, las imágenes, los controles y el desarrollo de la marca que promueven una experiencia del usuario de alta calidad.

Si tu complemento abre páginas web independientes que son parte integral de su operación (como una página de configuración del complemento), asegúrate de que esas páginas web también sigan estos lineamientos de estilo.

Texto e imágenes

En esta sección, se explica cómo usar correctamente el texto y las imágenes en tu complemento.

Nombre del complemento

Debes establecer el nombre del complemento en el manifiesto del proyecto y cuando configures el complemento para su publicación. El nombre aparece en muchos lugares, como en la ficha de Google Workspace Marketplace y en los menús. Cuando elijas un nombre, ten en cuenta lo siguiente:

  • Usa mayúsculas de título.
  • Evita la puntuación, en especial los paréntesis, a menos que sea parte de tu marca.
  • Hazlo breve. Lo mejor es usar 15 caracteres o menos. Es posible que los nombres largos se truncen automáticamente en la ficha de Google Workspace Marketplace y en otros lugares.
  • No incluyas las palabras “Google”, “Gmail” ni otros nombres de productos de Google en el nombre del complemento.
  • No incluyas la palabra "complemento" en el nombre del complemento.
  • No incluyas información de la versión.

Estilo de escritura

No deberías tener que escribir mucho. La mayoría de las acciones deben quedar claras a través de la iconografía, el diseño y las etiquetas breves. Si consideras que una parte de tu complemento necesita una explicación más extensa de la que pueden proporcionar las etiquetas cortas, te recomendamos que crees una página web independiente para describir el complemento y que crees un vínculo a ella.

Cuando escribas texto de la IU, ten en cuenta lo siguiente:

  • Usa mayúsculas y minúsculas (especialmente para botones, etiquetas y acciones de tarjetas).
  • Usa un texto breve y simple, sin jerga ni acrónimos.

Acciones universales y de tarjetas

Si usas acciones universales o acciones de tarjetas en tu complemento, aparecerán como elementos de menú en las tarjetas que definas. Puedes elegir el texto que se usa en estos menús para estas acciones. Cuando elijas el texto que quieres usar, ten en cuenta lo siguiente:

  • Evita el texto del menú que simplemente repite el nombre del complemento.
  • Comienza cada elemento de menú con una palabra de acción, como "Ejecutar", "Configurar" o "Crear".
  • Describe la tarea, no el componente de la IU que muestra la acción.
  • Si tu acción inicia un flujo de trabajo y no hay un solo verbo que describa lo que hace, llámala "Iniciar".
  • Mantén la cantidad de elementos del menú pequeña para evitar que el usuario tenga que desplazarse por una lista grande. Si tienes más acciones para implementar, considera usar varias tarjetas con diferentes acciones en cada una.

Mensajes de error

Cuando algo sale mal, es importante usar un lenguaje sencillo. Explica el problema desde el punto de vista del usuario y sugiere cómo solucionarlo.

  • No permitas que el usuario vea ninguna excepción que genere tu código. En su lugar, usa instrucciones try...catch para interceptar excepciones y, luego, muestra un mensaje de error fácil de usar.
  • Antes de publicarlo, verifica que el complemento no muestre información de depuración en la IU.

Contenido de ayuda

Te recomendamos que diseñes tarjetas que muestren información de ayuda o que le expliquen al usuario el funcionamiento del complemento. Si compilas contenido de ayuda para tu complemento, recuerda lo siguiente:

  • Cuando sea posible, muestra las instrucciones en una lista con viñetas o numerada. Explica a los usuarios el resultado final, con referencias claras a los elementos de la IU nombrados.
  • Asegúrate de que tus instrucciones expliquen claramente los requisitos, como configurar una hoja de cálculo de una manera determinada.
  • No dudes en vincular contenido de ayuda externo, como páginas web de respaldo.

Imágenes

Las imágenes que se usan en tu complemento son uno de los tipos de íconos integrados o una imagen alojada públicamente especificada por una URL. Cuando uses imágenes alojadas, asegúrate de que todas las personas que puedan usar tu complemento puedan acceder a ellas.

Controles

En esta sección, se proporcionan lineamientos de experiencia del usuario para los widgets interactivos.

Botones

Usa botones para controlar las acciones principales de la interfaz de usuario en lugar de otros widgets.

  • La mayoría de las etiquetas de botones de texto deben comenzar con un verbo.
  • En la mayoría de los casos, las filas de botones deben limitarse a tres o menos botones.

DecoratedText

Los widgets DecoratedText te permiten presentar contenido de texto con íconos, botones o interruptores.

  • Usa mayúscula inicial para el contenido de texto.
  • El texto de un widget DecoratedText se trunca si no cabe en el espacio disponible. Por este motivo, intenta mantener el contenido de texto lo más breve posible.

Entradas de selección

Puedes usar una variedad de widgets de entrada de selección en tu complemento: cuadros de selección desplegables, casillas de verificación y botones de selección.

  • Usa casillas de verificación cuando las personas puedan seleccionar varias opciones o ninguna. Usa botones de selección (o un menú de selección) cuando se deba seleccionar exactamente una opción. Usa menús desplegables cuando proporciones una lista breve de alternativas mientras intentas ahorrar espacio en la IU.
  • Usa mayúscula inicial para el texto asignado a cada opción.
  • Evita usar cambios de selección para activar acciones importantes y difíciles de revertir, porque las personas suelen cometer errores cuando realizan selecciones. En su lugar, considera agregar un botón que lea los valores de selección actuales y, luego, active la acción.
  • En el caso de los menús desplegables, ordena las opciones alfabéticamente o según un esquema lógico que todos los usuarios puedan comprender (como presentar los días de la semana en orden, a partir del domingo o el lunes).
  • Restringe la cantidad de opciones en un widget de entrada de selección determinado a una cantidad razonable. Si hay demasiadas opciones, es posible que los usuarios tengan dificultades para usar el widget. En esos casos, considera dividir la opción en diferentes categorías y varios widgets.

Entradas de texto

Las entradas de texto proporcionan un lugar para que los usuarios ingresen datos de cadenas.

  • No uses una entrada de texto para que el usuario escriba una de un conjunto específico de entradas posibles. En su lugar, usa un menú desplegable.
  • Usa sugerencias y ayudas para ayudar al usuario a ingresar texto con el formato y el contenido correctos.
  • Usa entradas de texto de varias líneas si el texto que se ingresará es de más de unas pocas palabras.

Desarrollo de la marca

En esta sección, se proporcionan lineamientos de experiencia del usuario para agregar elementos de desarrollo de la marca a la interfaz de tu complemento.

En tu complemento

Si quieres incluir el desarrollo de la marca en la IU de tu complemento, hazlo de forma breve y ligera. Esto ayuda a las personas a enfocarse en la funcionalidad de tu complemento.

  • Todos los aspectos del complemento deben cumplir con los lineamientos de desarrollo de la marca.
  • No incluyas las palabras “Google”, “Gmail” ni otros nombres de productos de Google.
  • No incluyas íconos de productos de Google, incluso si están alterados.
  • No incluyas la palabra “complemento” en el texto de desarrollo de la marca.
  • El texto de desarrollo de la marca no debe tener más de unas pocas palabras.

En Google Workspace Marketplace

Cuando configuras tu complemento para su publicación, proporcionas una serie de recursos gráficos y de texto para compilar la ficha de Google Workspace Marketplace.

Todos los aspectos de la ficha de Play Store y estos recursos deben seguir los lineamientos de desarrollo de la marca.