Guia de estilo da IU para complementos do Google Workspace

Google Workspace Os complementos precisam ser consistentes com o estilo e o layout do aplicativo host que estendem. Eles precisam estender a IU naturalmente usando controles e comportamentos conhecidos. As diretrizes apresentadas aqui descrevem maneiras de processar textos, imagens, controles e branding que promovem uma experiência de usuário de alta qualidade.

Se o complemento abrir páginas da Web separadas que fazem parte da operação do complemento, como uma página de configurações do complemento, verifique se essas páginas da Web também seguem essas diretrizes de estilo.

Use o Google Workspace Kit de design de complementos

Para criar rapidamente uma experiência do usuário perfeita, os designers podem usar o Google Workspace kit de design de IU de complementos disponível no Figma. Você pode criar uma conta sem custo financeiro do Figma ou solicitar uma licença ao administrador da sua organização.

Navegue pelos componentes da interface baseada em cartões e use modelos integrados para criar e visualizar seus complementos.

Instalar o kit de design

Texto e imagens

Esta seção explica como usar corretamente texto e imagens em seu complemento.

Nome do complemento

É preciso definir o nome do complemento no manifesto do projeto e ao configurar seu complemento para publicação. O nome aparece em vários lugares, como na lista do Google Workspace Marketplace e em menus. Ao escolher um nome:

  • Use letras maiúsculas em títulos.
  • Evite pontuação, especialmente parênteses, a menos que isso faça parte da sua marca.
  • Use caracteres curtos em até 15 caracteres. Nomes longos podem ser truncados automaticamente na Google Workspacelistagem do Marketplace e em outros lugares.
  • Não inclua as palavras "quo";Google", "Gmail" ou outros nomes de produtos do Google no nome do complemento.
  • Não inclua a palavra "Complemento" no nome do complemento.
  • Não inclua informações de versão.

Estilo de escrita

Não é necessário escrever muito. A maioria das ações precisa ser clara por meio de iconografia, layout e rótulos curtos. Se você achar que uma parte do complemento precisa de uma explicação mais abrangente do que as etiquetas curtas podem oferecer, a prática recomendada é criar uma página da Web separada, com a descrição do complemento e um link para ele.

Ao gravar texto da IU:

  • Use letra maiúscula apenas nas opções de botões, rótulos e ações com o cartão.
  • Prefira texto curto e simples sem jargões ou acrônimos.

Ações universais e de cards

Se você usar ações universais ou ações de card no complemento, elas aparecerão como itens de menu nos cards definidos. É possível escolher o texto que é usado nesses menus para essas ações. Ao escolher o texto a ser usado:

  • Evite textos de menu que simplesmente repitam o nome do complemento.
  • Inicie cada item do menu com uma palavra de ação, como "quot;Run", "Configure" ou "Create"
  • Descreva a tarefa, e não o componente da IU exibido pela ação.
  • Se a ação iniciar um fluxo de trabalho e não houver um verbo único que descreva o que ela faz, chame-o "quot;Start"".
  • Mantenha o número de itens de menu pequenos para evitar forçar o usuário a rolar por uma lista grande. Se você tiver mais ações a implementar, use vários cartões com ações diferentes em cada um.

Mensagens de erro

Quando algo dá errado, é importante usar uma linguagem simples. Explique o problema do ponto de vista do usuário e sugira como corrigi-lo.

  • Não permita que o usuário veja exceções geradas pelo seu código. Em vez disso, use instruções try...catch para interceptar exceções e exiba uma mensagem de erro fácil de usar.
  • Antes da publicação, verifique se o complemento não exibe informações de depuração na IU.

Conteúdo Help

Você pode criar cards que mostrem informações de ajuda ou explique a operação do complemento para o usuário. Se você criar conteúdo de ajuda para seu complemento, lembre-se de:

  • Quando possível, mostre as instruções em uma lista com marcadores ou numerada. Mostre aos usuários o resultado final, com referências claras aos elementos de IU nomeados.
  • Verifique se as instruções explicam claramente todos os requisitos, como configurar uma planilha de determinada maneira.
  • Fique à vontade para incluir links de conteúdos de ajuda externos, como páginas da Web com suporte.

Imagens

As imagens usadas no complemento são um dos tipos de ícone integrados ou uma imagem hospedada publicamente especificada por um URL. Ao usar imagens hospedadas, verifique se elas podem ser acessadas por todos que podem usar seu complemento.

Controles

Nesta seção, fornecemos diretrizes de experiência do usuário para widgets interativos.

Botões

Use botões para controlar as principais ações da interface do usuário em vez de outros widgets.

  • A maioria dos rótulos de botões de texto precisa começar com um verbo.
  • As linhas de botão devem ser limitadas a três ou menos botões na maioria dos casos.

Texto decorado

Os widgets DecoratedText permitem apresentar conteúdo de texto com ícones, botões ou interruptores.

  • Use letra maiúscula apenas no conteúdo de texto.
  • O texto de um widget DecoratedText será truncado se não caber no espaço disponível. Por isso, tente manter o conteúdo de texto o mais curto possível.

Entradas de seleção

Você pode usar uma variedade de widgets de entrada de seleção nos complementos: caixas de seleção suspensas, caixas de seleção e botões de opção.

  • Use as caixas de seleção quando as pessoas puderem selecionar várias opções ou nenhuma opção. Use botões de opção (ou um menu de seleção) quando exatamente uma opção precisar ser selecionada. Use os menus suspensos ao fornecer uma pequena lista de alternativas ao tentar economizar espaço na IU.
  • Use letra maiúscula apenas no texto atribuído a cada opção.
  • Evite usar alterações de seleção para desencadear ações grandes e difíceis de reverter, porque as pessoas costumam cometer erros ao fazer seleções. Em vez disso, considere adicionar um botão que leia os valores de seleção atuais e, em seguida, acione a ação.
  • Para listas suspensas, classifique as opções em ordem alfabética ou por um esquema lógico que todos os usuários possam entender (como apresentar os dias da semana em ordem, começando no domingo ou na segunda-feira).
  • Restrinja o número de opções em um determinado widget de entrada de seleção para um número razoável. Se houver muitas opções, os usuários poderão achar difícil usar o widget. Nesses casos, considere dividir a opção em diferentes categorias e vários widgets.

Entradas de texto

As entradas de texto oferecem um local para os usuários inserirem dados de string.

  • Não use uma entrada de texto para tornar o usuário um dos tipos específicos de entradas possíveis. Use um menu suspenso.
  • Use dicas e sugestões para ajudar o usuário a inserir texto com o formato e o conteúdo corretos.
  • Use entradas de texto multilinhas se o texto a ser inserido tiver mais de algumas palavras.

Branding

Esta seção fornece diretrizes de experiência do usuário para adicionar elementos da marca à interface do complemento.

No seu complemento

Se você quiser incluir branding na IU dos complementos, seja breve. Isso ajuda as pessoas a se concentrarem na funcionalidade do complemento.

  • Todos os aspectos do complemento precisam seguir as diretrizes da promoção de marca.
  • Não inclua a palavra "Google", "Gmail" ou outros nomes de produtos do Google.
  • Não inclua ícones de produto do Google, mesmo que eles sejam alterados.
  • Não inclua a palavra "Complemento" no texto de branding.
  • O texto da marca deve ter no máximo algumas palavras.

No Google Workspace Marketplace

Ao configurar o complemento para publicação, você fornece vários recursos gráficos e de texto para criar a Google Workspace listagem do Marketplace.

Todos os aspectos da página e esses recursos precisam seguir as diretrizes da promoção de marca.