Listas (UI)

Uma coleção estruturada de itens que organiza conteúdo e ajuda a pessoa a escanear e navegar.

Hard

O que é

Lista de interface apresenta itens relacionados em ordem estruturada, muitas vezes com um ícone, uma imagem ou uma ação ao lado. Ela aparece em menu, diretório de contato, catálogo e gerenciador de tarefa, e é um dos jeitos mais comuns de mostrar conteúdo.

Ela funciona porque a percepção humana escaneia bem estrutura linear. A lista reduz o esforço ao apresentar a informação num formato previsível, o que faz a pessoa achar rápido o que procura. O app de e-mail é um bom exemplo: remetente, assunto e horário ficam em linha, fáceis de varrer com o olho.

O cuidado maior está na hierarquia visual. Espaçamento, alinhamento e tipografia consistentes são o que separa o principal do secundário, com título em peso forte e detalhe em peso leve. Sem essa hierarquia clara, a lista vira uma mancha difícil de ler. E a acessibilidade pede tamanho legível, espaço pra toque e marcação semântica pro leitor de tela.

Em uma frase

Como a pessoa só vai escanear e escolher, isso aqui pede lista, não tabela.

A pergunta que ele responde

Uso lista ou tabela pra mostrar esses itens de um jeito fácil de escanear?

Quando usar

Ajuda pra apresentar itens relacionados que a pessoa precisa escanear, escolher ou ordenar, principalmente quando a leitura rápida de cima a baixo é o que importa.

Como não usar

O cuidado é não empilhar tudo no mesmo peso visual, sem hierarquia. Quando título e detalhe têm a mesma força, a lista fica poluída e a pessoa perde a referência do que é mais importante.

Na prática

Pense num app de música em que cada linha da lista traz a capa, o botão de play e a duração. Com isso, a pessoa escolhe a faixa só de bater o olho, sem precisar abrir cada uma pra saber o que é.

Não confunda com

Vale separar lista de tabela. A lista empilha itens pra a pessoa escanear de cima a baixo. A tabela cruza linhas e colunas pra comparar dado entre si. Uma serve pra varrer e escolher, a outra pra confrontar valores, e escolher errado entre elas dificulta a leitura.

D

Em inglês

UI lists

Pronúncia

n/a

Também chamado de

lista de interface, lista de itens

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre listas e tabelas