Elemento de interface (UI)

Qualquer peça identificável da interface, do ícone solto ao formulário inteiro, com aparência, comportamento e estados próprios.

Hard

O que é

Elemento de interface é qualquer componente distinto que monta a tela: botão, campo, checkbox, menu, ícone, modal, tooltip, card, banner. Juntos, eles formam a superfície interativa por onde a pessoa acessa o produto.

O termo é amplo de propósito, porque cobre tanto a peça atômica, como um toggle, quanto a composta, como um formulário com vários campos. O que une as duas é que cada uma é uma parte definida, com propriedades visuais, comportamento e estados próprios.

Na prática, o elemento une design visual e design de interação. A aparência diz o que ele faz em cada estado, enquanto o comportamento diz como ele responde à entrada. Por isso, desenhar todos os estados, como padrão, hover, foco, ativo, desabilitado, erro e carregando, é parte central do trabalho.

Em uma frase

Esse elemento de interface ainda está só no estado padrão, falta desenhar hover, erro e carregando.

A pergunta que ele responde

Quais estados eu preciso desenhar de cada peça da interface pra não deixar buraco?

Quando usar

Vale usar ao desenhar ou documentar peças de interface no design system, cobrindo todos os estados.

Como não usar

O cuidado é não desenhar só o estado padrão e esquecer hover, erro e carregando. No uso real, a pessoa vai encontrar todos eles, então deixá-los de fora gera buracos na experiência.

Na prática

Imagine que, ao especificar um campo de e-mail, a designer desenha também o estado de erro, com borda vermelha e mensagem, e o de sucesso, e não só o estado vazio. Assim, o campo já chega ao desenvolvimento pronto para tudo o que pode acontecer no uso.

Não confunda com

Vale separar elemento de componente composto. O elemento é a peça identificável e mínima, enquanto vários elementos agrupados formam estruturas maiores, como uma barra de navegação. Ou seja, o elemento é a unidade, o composto é o conjunto montado a partir dela.

D

Em inglês

User Interface (UI) Element

Pronúncia

iú-ai

Também chamado de

elemento de UI, UI element, componente de interface

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigos sobre UI design patterns