Visão geral
A nomenclatura correta dos elementos de interface e comandos é essencial para que os usuários possam interagir facilmente com um software. A escolha dos nomes apropriados ajuda a tornar a interface mais clara e intuitiva, permitindo que os usuários rapidamente encontrem o que estão procurando e realizem as ações desejadas sem confusão.
Este artigo apresenta diretrizes e boas práticas para nomear elementos de interface e comandos de forma clara e consistente, de modo que os usuários possam entender facilmente as funcionalidades disponíveis e usar o software de maneira eficiente. Além disso, serão apresentados exemplos de nomes para diversos elementos de interface e comandos, para facilitar a compreensão e aplicação das diretrizes.
Controles de entrada
Esses elementos de interface de usuário (UI) interativos permitem que os usuários insiram os dados no sistema. Você pode usar uma ampla variedade de controles de entrada, como botões, campos de texto, alternadores, caixas de seleção e muito mais.
Esses elementos de interface de usuário (UI) interativos permitem que os usuários insiram os dados no sistema. Você pode usar uma ampla variedade de controles de entrada, como botões, campos de texto, alternadores, caixas de seleção e muito mais.
- Botões de ação: permite ações como salvar, continuar, excluir, etc.
- Botões de rádio/radio buttons: trata-se de elementos que permitem selecionar apenas uma opção por vez. Por exemplo, as opções de sim ou não dentro do contexto de uma pergunta.
- Button dropdown List: semelhante ao anterior, porém é acrescido de um botão que ao ser selecionado, apresenta as opções.
- Buttons/Botões: são os elementos mais comuns e talvez mais importantes dentro de uma interface. Eles podem estar presentes em call to action (chamadas para ação), menus, formulários, entre outros. A função, normalmente, é realizar alguma ação importante como enviar uma mensagem ou realizar uma compra.
- Caixa de diálogo: é um painel que é aberto quando determinadas seleções são feitas para mudar ou criar um registro. As caixas de diálogo contêm campos que permitem a entrada de texto digitado.
- Caixa de texto: é uma caixa que o usuário pode digitar.
- Date and time pickers (seletor de data/hora): são os selecionadores que permitem ao usuário selecionar datas e/ou horas dentro da interface. Também são muito comuns em sites de passagens áreas, por exemplo.
- Dropdown lists (listas suspensas): só é possível escolher uma opção, porém, permite muitas vezes inserir textos mais longos. É muito utilizado, por exemplo, quando você está selecionando a cidade destino de viagem em site de passagens áreas.
- Icons/icones: normalmente têm função informativa, auxiliando no entendimento da informação, ou de botão/link, sendo utilizado, por exemplo, dentro de um contexto de menu de navegação.
- Slide Bar: trata-se de um controle deslizante que permite aos usuários definir ou ajustar um valor. Quando o usuário altera o valor, ele não altera, necessariamente, o formato da interface ou outras informações na tela.
- Toggles (alternadores): são os botões de ativar ou desativar, parecido com a ação liga e desliga do interruptor elétrico.
Componentes de navegação
Elementos como controle deslizante, breadcrumbs, campo de pesquisa, paginação, tags e ícones ajudam as pessoas a navegar por um site ou produto.
Elementos como controle deslizante, breadcrumbs, campo de pesquisa, paginação, tags e ícones ajudam as pessoas a navegar por um site ou produto.
- Accordion (acordeão): trata-se de uma lista vertical empilhada de itens com a funcionalidade mostrar/ocultar, por exemplo, em FAQ de um site.
- Breadcrumb: breadcrumbs são os “caminhos de pão”, como no conto de João e Maria. Esse tipo de sistema permite que os usuários identifiquem sua localização atual dentro da interface, além de fornecer uma trilha clicável de páginas para continuar navegando.
- Checkbox /Caixa de seleção
: é uma pequena caixa que indica se uma opção está ativada ou desativada.
- Choose
: é comumente chamado de "Ícone de pesquisa" ou "Botão de pesquisa". A função desse botão é permitir que o usuário pesquise valores e critérios específicos dentro do sistema, como parceiros de negócios, artigos, transações etc.
- Componentes informativos: os elementos da UI que ajudam a compartilhar informações com os usuários incluem, mas não se limitam a: notificações, barras de progresso, dicas de ferramentas, caixas de mensagens e janelas pop-up.
- Containers: são elementos dentro da interface que abrigam um conjunto de itens de um mesmo assunto. São grupos de componentes, apresentados em uma região de tela definida.
- Drilldown ou Seta laranja
: também conhecida como "Link arrow", é uma expressão em inglês que significa "seta de link" ou "seta de ligação". Essa seta é um símbolo comum em interfaces de usuário, geralmente usado para indicar que um elemento de interface está vinculado ou conectado a outro. No contexto do SAP Business One, a "link arrow" pode se referir à seta amarela que aparece ao lado de alguns campos em formulários, indicando que o campo está conectado a um documento de origem ou a outro registro relacionado.
- Grids: são uma estrutura composta por colunas, lacunas e margens, que ajudam no ajuste de proporção dos elementos como, por exemplo, tabelas.
- Guia/aba: fornece a capacidade de alternar entre diferentes páginas web em uma única instância do browser. Está localizado na parte superior do navegador.
- Menu de navegação: é um controle (geralmente um painel ou janela) que contém uma lista de itens nos quais o usuário pode clicar para ir para páginas em um aplicativo/sistema.
- Menu suspenso: trata-se de um tópico com uma seta virada para baixo que, quando clicada, exibe uma lista de opções para escolha.
- Menus: são os itens de navegação mais comuns dentro de uma interface. Podem ser como navegação global ou específica dentro de uma seção da interface.
- Message Boxes (caixa de mensagem): são caixas de mensagens que surgem em formato de pequenas janelas, fornecendo informações aos usuários exigindo ou sugerindo que eles realizem uma determinada ação antes de avançar.
- Notifications: trata-se de uma mensagem de atualização que anuncia algo novo ou importante. Elas podem ser utilizadas para indicar uma tarefa como concluída ou para mensagens de erro ou aviso.
- Painel de ações: é a barra abaixo da barra de navegação. Nela é possível selecionar guias para alterar os registros mostrados na página. É possível editar e salvar os registros nesse painel.
- Painel de filtragem: em algumas páginas, você pode selecionar "Exibir filtros" para abrir esse painel. Ele permite refinar os resultados visíveis na página.
- Painel de navegação:
- Pop-up: é uma janela modal que solicita aos usuários interagirem com ela antes de retornarem ao sistema.
- Progress Bars (barra de progresso): são item que indicam o status quando o usuário está avançando por uma série de etapas dentro da interface ou que indicam o progresso de alguma ação do sistema.
- Quadro de Fatos: nele é possível visualizar informações e seguir as atividades de determinados registros neste painel.
- Search Field (campo de pesquisa): é o tradicional campo de pesquisa onde você insere o que deseja encontrar e a interface te retorna com uma página de resultados.
- Seção: é similar a uma guia. A palavra "seção" é frequentemente utilizada para descrever qualquer área de uma página que organiza uma categoria específica de informação.
- Tags: as tags permitem que os usuários encontrem conteúdo na mesma categoria, de um mesmo assunto. Muito utilizado por anos em blogs, por exemplo, é uma forma de acesso rápido. Em alguns casos é possível que os usuários criem as suas próprias marcações.
- Tool Tips: são caixas com dicas e informações relevantes para que o usuário realize ou entenda com mais clareza determinadas ações dentro da interface. Em determinados casos eles podem conter links ou botões para o acesso de outras páginas dentro do sistema.
Dispositivos
Veja a seguir algumas sugestões para usar ao se referir a ações dos dispositivos de entrada, como mouse e teclado.
Veja a seguir algumas sugestões para usar ao se referir a ações dos dispositivos de entrada, como mouse e teclado.
- Atalhos do teclado: refira-se aos atalhos como uma combinação de teclas, utilize como parâmetro o exemplo a seguir: “Para ativar os campos de usuário pressione a combinação de teclas Ctrl+Shift+U”.
- Caracteres especiais: quando necessário, refira-se aos caracteres especiais por seu nome e inclua o símbolo entre parênteses para maior clareza. Veja alguns exemplos: asterisco (*), arroba (@), hífen (-), vírgula (,).
- Tecla de seta: para qualquer tecla de seta única, use letras maiúsculas para referi-las: A Tecla de Seta para a Esquerda, Tecla de Seta para a Direita, a Tecla de Seta para Cima ou a Tecla de Seta para Baixo. Não use “teclas de direção”, “teclas direcionais” ou “teclas de movimento”.
- Teclado/teclado numérico: em geral, não faça distinção entre o teclado e o teclado numérico. Se um cliente puder selecionar duas chaves com a mesma aparência, especifique a chave correta.
- Teclas de navegação: utilize os nomes específicos, como: Page up, Page down, Home e End.
- Teclas modificadoras (Shift, Ctrl, Alt. Alt Gr, Função...): refira-se a essas teclas utilizando a primeira letra maiúscula, e soletre-as como aparecem no teclado.
- Teclas: quando necessário sugerir utilização de teclas específicas do teclado, prefira o verbo “pressionar” para da instrução.
Ações do mouse
Use a palavra “ponteiro” para se referir à seta do mouse.
Use a palavra “ponteiro” para se referir à seta do mouse.
- Clique: utilizado para descrever a seleção de um item com o mouse clicando com o mouse uma vez. Não use "clique em".
- Clique em: utilizado para se referir ao ato de clicar em uma área geral dentro de uma página, janela ou outro local da interface do usuário.
- Duplo click: utilizado para descrever a seleção de um item clicando com o mouse duas vezes em rápida sucessão. Não use "clique duplo em".
- Arrastar: use para descrever como segurar um botão enquanto move o mouse e, em seguida, solte o botão. Não use "clicar e arrastar" ou "arrastar e soltar". Não há problema em usar "soltar sozinho" se "arrastar" não for preciso o suficiente.
- Passe o mouse sobre: para descrever o movimento do ponteiro do mouse sobre uma área da interface do usuário sem selecioná-la. Utilize "passe o mouse sobre" ou "aponte para", conforme apropriado para seu público.
- Pressione e segure: para descrever o movimento do ponteiro do mouse sobre uma área da interface do usuário onde será necessário selecioná-la.
- Clique com o botão direito: use para descrever o clique em um item usando o botão secundário do mouse (o botão direito por padrão, mas o usuário pode personalizá-lo).
- Percorrer: substitua a palavra “rolagem” ou “role a barra” por "percorra", ou "percorrer".
Referências
Google developers. Developer documentation style guide. Disponível em: <https://developers.google.com/style>. Acesso em: 19 mai. 2023.
Microsoft. Microsoft Writing Style Guide. Disponível em: <https://learn.microsoft.com/en-us/style-guide/welcome/>. Acesso em: 19 de maio de 2023.