Os complementos do Google Workspace precisam ser consistentes com o estilo e o layout do aplicativo host que eles estendem. Eles precisam estender a interface naturalmente usando controles e comportamentos familiares. As diretrizes apresentadas aqui descrevem maneiras de lidar com texto, imagens, controles e branding que promovem uma experiência do usuário de alta qualidade.
Se o complemento abrir páginas da Web separadas que são parte integrante da operação do complemento (como uma página de configurações), verifique se essas páginas da Web também seguem essas diretrizes de estilo.
Texto e imagens
Esta seção ensina a usar texto e imagens corretamente no seu complemento.
Nome do complemento
Defina o nome do complemento no manifesto do projeto e ao configurar o complemento para publicação. O nome aparece em vários lugares, como na página do Google Workspace Marketplace e nos menus. Ao escolher um nome:
- Use letras maiúsculas no título.
- Evite usar pontuação, especialmente parênteses, a menos que faça parte da sua marca.
- Mantenha-o curto: 15 caracteres ou menos é o ideal. Nomes longos podem ser truncados automaticamente na página "Detalhes do app" do Google Workspace Marketplace e em outros lugares.
- Não inclua as palavras "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
Você não precisa 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 seu complemento precisa de uma explicação mais extensa do que os rótulos curtos podem oferecer, é recomendável criar uma página da Web separada que descreva o complemento e criar um link para ele.
Ao escrever texto da interface:
- Use letras maiúsculas e minúsculas (especialmente para botões, rótulos e ações de cartão).
- Prefira textos curtos e simples, sem jargões ou acrônimos.
Ações universais e do card
Se você usar ações universais ou ações de card no seu complemento, elas vão aparecer como itens de menu nos cards definidos. Você pode escolher o texto usado nesses menus para essas ações. Ao escolher o texto a ser usado:
- Evite textos de menu que simplesmente repetem o nome do complemento.
- Comece cada item de menu com uma palavra de ação, como "Executar", "Configurar" ou "Criar".
- Descreva a tarefa, não o componente de interface que a ação mostra.
- Se a ação iniciar um fluxo de trabalho e não houver um único verbo que descreva o que ela faz, chame-a de "Start".
- Mantenha o número de itens de menu pequeno para evitar que o usuário role uma lista grande. Se você tiver mais ações para implementar, use vários cards com ações diferentes em cada um.
Mensagens de erro
Quando algo dá errado, é importante usar 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 as exceções geradas pelo código. Em vez disso,
use instruções
try...catchpara interceptar exceções e mostrar uma mensagem de erro fácil de entender. - Antes de publicar, verifique se o complemento não mostra informações de depuração na interface.
Conteúdo Help
Você pode projetar cards que mostram informações de ajuda ou explicam o funcionamento do complemento ao 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 a elementos de interface nomeados.
- As instruções precisam explicar claramente todos os requisitos, como configurar uma planilha de determinada maneira.
- Você pode incluir links para conteúdo de ajuda externo, como páginas da Web de 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 são acessíveis por todos que podem usar seu complemento.
Controles
Esta seção fornece 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.
- Na maioria dos casos, as linhas de botões precisam ser limitadas a três botões ou menos.
DecoratedText
Os widgets DecoratedText permitem apresentar conteúdo de texto com ícones, botões ou chaves.
- Use letras maiúsculas apenas na primeira palavra.
- O texto de um widget DecoratedText é truncado se não couber no espaço disponível. Por isso, tente sempre manter o conteúdo do texto o mais curto possível.
Entradas de seleção
Você pode usar vários widgets de entrada de seleção no seu complemento: caixas de seleção suspensas, caixas de seleção e botões de opção.
- Use caixas de seleção quando as pessoas puderem selecionar várias opções ou nenhuma. Use botões de opção (ou um menu de seleção) quando apenas uma opção precisa ser selecionada. Use listas suspensas para fornecer uma lista curta de alternativas ao tentar economizar espaço na interface.
- Use letras maiúsculas apenas na primeira palavra do texto atribuído a cada opção.
- Evite usar mudanças de seleção para acionar ações importantes e difíceis de reverter, porque as pessoas costumam cometer erros ao fazer escolhas. Em vez disso, considere adicionar um botão que leia os valores de seleção atuais e acione a ação.
- Para menus suspensos, 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 pelo domingo ou segunda-feira).
- Restringir o número de opções em um determinado widget de entrada de seleção a um número razoável. Se houver muitas opções, os usuários podem ter dificuldade para 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 fazer o usuário digitar uma de um conjunto específico 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 conteúdo corretos.
- Use entradas de texto de várias linhas 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 de marca à interface do complemento.
No complemento
Se você quiser incluir a marca na interface do complemento, mantenha-a breve e leve. Isso ajuda as pessoas a se concentrar na funcionalidade do seu complemento.
- Todos os aspectos do seu complemento precisam seguir as diretrizes de marca.
- Não inclua as palavras "Google", "Gmail" ou outros nomes de produtos do Google.
- Não inclua ícones de produtos do Google, mesmo que eles sejam alterados.
- Não inclua a palavra "complemento" no texto de marca.
- O texto de marca não pode ter mais do que 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 página do Google Workspace Marketplace.
Todos os aspectos da página "Detalhes do app" e esses recursos precisam seguir as diretrizes de branding.