Elemento de UI

A menor peça de uma interface, como um botão, um campo ou um ícone, cada um com forma e comportamento próprios.

Hard

O que é

Elemento de UI é cada parte individual que monta a interface: um botão, um campo de texto, um ícone, um menu, um slider. Cada um carrega uma função e um jeito de se comportar quando a pessoa interage com ele.

No trabalho de produto, o elemento é a unidade base de tudo. Quando vários elementos se juntam, formam um componente, porque uma barra de busca, por exemplo, nasce de um campo somado a um ícone de lupa. E quando o elemento segue uma convenção que a pessoa já conhece, ela entende sem pensar: a lixeira apaga, o play toca. Já quando ele foge dessa convenção, gera dúvida e abala a confiança.

Em um design system, cada elemento ganha regra de tamanho, cor, espaçamento e estado. É justamente isso que mantém o produto coerente de uma tela para outra.

Em uma frase

Esse elemento de UI já existe no system, então não precisa redesenhar o campo do zero.

A pergunta que ele responde

Qual a menor unidade que eu de fato desenho e documento numa interface?

Quando usar

Vale usar ao montar qualquer tela e, principalmente, ao documentar o que vai entrar no design system.

Como não usar

O cuidado é não tratar cada elemento como uma decisão solta, tela por tela. Sem uma regra compartilhada, a interface acaba virando uma colcha de retalhos, com pequenas diferenças que ninguém escolheu de propósito.

Na prática

Imagine que o time precisa de um seletor de data. Em vez de desenhar tudo do zero, vale primeiro listar os elementos que ele exige, como o campo, o calendário e os botões de mês. Cada um desses já tem estado e regra definidos no system, então o trabalho fica mais rápido e mais coerente.

Não confunda com

Vale separar elemento de componente. O elemento é a peça mínima, indivisível, enquanto o componente é a combinação de vários elementos trabalhando juntos. Ou seja, a diferença está na escala: um é o tijolo, o outro é a parede montada com vários tijolos.

D

Em inglês

UI Design Element

Pronúncia

iú-ai

Também chamado de

elemento de interface, UI element, componente de UI

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigos sobre UI design patterns