Diariamente, durante uma missão, tenho que interagir com diferentes partes interessadas em um projeto. Dependendo da posição e do apetite pela disciplina de design UX-UI, cada um tem um conhecimento diferente dos termos utilizados.
Ao longo das missões, compilei, portanto, um grande número de conceitos e é um vocabulário que gostaria de ter quando comecei e que, portanto, consolidei gradualmente para ajudar futuros alunos ou novos no digital.
Por isso preparei para você uma série de artigos onde cada conceito será explicado para que você possa consultá-lo. Encerramos, portanto, esta série com os últimos 20 conceitos. Se você quiser consultar ambas as partes - upstream, aqui estão os links: parte 1, parte 2 et parte 3.
#1_Layouts
carrossel
O carrossel permite navegar por conteúdos como imagens, mapas, etc. usando navegação horizontal. Muitas vezes os encontramos na página inicial de um site para apresentar as novidades.
Acordeões
Os acordeões permitem aos usuários expandir e recolher seções de conteúdo. Eles são muito úteis para organizar o conteúdo e mostrar ao usuário uma hierarquia claramente definida.
Paginação
Freqüentemente, na parte inferior de uma página, a paginação organiza o conteúdo em páginas. Portanto, encontramos o número de cada página. Às vezes, alguns ficam ocultos, dependendo do número. Uma boa prática é manter sempre o primeiro e o último. Outra boa prática, para simplificar o uso, é exibir os botões “anterior” e “próximo”.
item
Um item é um elemento de uma lista. Este é um elemento importante porque muitas vezes é o que repetiremos várias vezes adaptando os dados apresentados.
Lista
É composto por um conjunto de elementos que se sucedem em ordem alfabética, numérica ou mesmo aleatória.
Vários componentes podem ser aninhados lá, como texto, imagens, status, botão, etc.
Lista de grade
As listas de grade exibem uma coleção de imagens em uma grade organizada. Ao contrário da lista, os elementos são organizados vertical e horizontalmente, e não mais em uma única coluna vertical como a lista.
Cartão
O mapa é um componente que permite agrupar dentro do mesmo grupo.
Por exemplo, um título, conteúdo e uma imagem para materializar um artigo de mídia. Ou uma imagem, um título e um botão de compra em um site de comércio eletrônico.
#2 _Formulários
Pedido de Informação
Os formulários permitem recuperar informações preenchidas pelo usuário. Ele irá inserir, completar ou adicionar elementos ao sistema e depois enviá-los.
Campo (entrada em inglês)
O campo permite que o usuário insira informações. Essas informações podem assumir diversas formas, conforme pode ser descrito nos conceitos a seguir.
Campos de texto
Os campos de texto permitem que os usuários insiram e editem texto. Pode ser uma única linha ou várias linhas.
Maldito
O controle deslizante permite que os usuários percorram uma série de valores. É materializado principalmente por uma barra interativa. Por exemplo, para ajustar o volume ou mover-se dentro de uma faixa de áudio/vídeo.
Lista suspensa (dropdown ou “select” em inglês)
A lista suspensa permite que você escolha entre duas e um número ilimitado de opções.
Caixa de seleção
A caixa de seleção permite que os usuários selecionem uma ou mais opções de uma lista. É um componente que permite ao usuário indicar escolhas em uma lista de propostas. Graficamente, uma caixa marcada geralmente é materializada de forma diferente (graças a um ícone ou a uma cor), enquanto uma caixa desmarcada é deixada vazia. Uma caixa também pode ficar esmaecida quando a escolha não for possível.
Botao de radio
O botão de opção permite ao usuário selecionar uma única opção de um conjunto. Graficamente, um botão de opção é representado por um círculo. Tal como acontece com a caixa de seleção, a seleção do usuário é materializada de forma diferente (por meio de um ícone ou de uma cor).
Interruptor
A alternância é usada para opções binárias. Eles permitem ativar ou desativar o estado de um único elemento.
É como um interruptor, o botão de alternância só pode assumir duas posições (por exemplo: botão liga/desliga).
espaço reservado
Um espaço reservado é um atributo usado para exibir texto por padrão em determinados campos de formulário. Isso dará ao usuário dicas para preencher um campo. Por exemplo, para fornecer o formato esperado de uma data, endereço ou número de telefone.
#3 _ Ações
Bouton
Um botão permite que os usuários façam ações e escolhas com um único toque ou clique.
O botão é um dos componentes mais importantes de uma interface porque direciona o usuário pelos principais caminhos: comprar um produto, fazer uma assinatura ou se cadastrar, por exemplo.
Penhor
Um link é uma forma de passar de uma página para outra. Ao clicar em um link, o usuário terá acesso direto às informações procuradas.
Do lado do design, é importante identificá-los claramente. Freqüentemente, eles são representados por sublinhados e cores.
FAB (botão de ação flutuante)
O botão de ação flutuante é um botão um pouco diferente dos botões que estamos acostumados a ver nas plataformas. Sua particularidade é que ele flutuará na interface, acima do conteúdo. Os botões de ação flutuantes são colocados principalmente no canto inferior direito da tela de seus aplicativos favoritos. Eles são usados em interfaces para agrupar as principais ações dos usuários.
Barra de pesquisa
A barra de pesquisa é um campo de entrada especial porque permite pesquisar ou filtrar elementos. A pesquisa pode ser entre sites ou em uma funcionalidade específica.
Conclusão
Encerramos, portanto, nossa série do pequeno glossário UX-UI com essas noções. Não há dúvida de que relançaremos uma nova série para orientá-lo sobre novos conceitos (provavelmente inexistentes até o momento!). Obrigado por nos seguir e não hesite em nos contatar se algum conceito ainda estiver causando problemas!
Para visualizar as três primeiras partes, aqui estão os links: parte 1, parte 2 et parte 3.
Se você quiser aprofundar seus conhecimentos e praticar o design de uma interface web, o centro de treinamento UX-Republic oferece o treinamento “UI Design, os fundamentos”. Aqui está o link para saber mais.
Alexa CUELLAR, designer de UX @UX-Republic
