Filtros de coluna como os do Excel no Meridian

Visão geral do projeto

Projeto

Estudo de caso de UX

Função

Senior UX Designer

Duração

1 mês

Status

Trabalho real, com detalhes sensíveis e identificáveis removidos

Contexto

Projeto real, anonimizado (Meridian é um nome fictício no lugar da plataforma real; funções, páginas e campos foram renomeados)

Contexto e desafio

Meridian é uma plataforma fictícia que ajuda equipes de compras, planejamento e fornecedores a gerenciar pedidos e prazos de ciclos de produção recorrentes. Suas tabelas têm milhares de itens. Filtrar é como as pessoas encontram suas linhas. Quando o filtro engana, a saída mais fácil é exportar tudo para o Excel, o que vai contra a ideia de ter uma única fonte de verdade.

Os usuários pediram um conjunto de mudanças nos filtros, com base nos problemas que viviam encontrando:

• 01

  Listas de opções que mostrem só os valores presentes nos dados.

• 02

  Filtrar uma coluna deve reduzir as opções das outras colunas.

• 03

  Uma forma de excluir um valor.

• 04

  Datas listadas como valores para selecionar, em vez de um calendário.

Eles pediram isso porque já usam o Excel em parte do trabalho no Meridian. O filtro do Excel é o que conhecem, então é esse o comportamento que esperam de um filtro de coluna no produto.

Usei esses pedidos como ponto de partida: organizei tudo em cinco solicitações concretas e defini como cada uma seria validada.

Definindo as solicitações

O primeiro passo foi transformar o feedback dos usuários em solicitações que pudessem ser desenhadas, apresentadas e verificadas uma a uma. Cada uma mantém as palavras originais do usuário, para que toda mudança possa ser rastreada até o que alguém pediu.

1. Solicitação #1

   A busca no filtro de ID deve encontrar apenas IDs, não nomes de itens nem fornecedores

   Equivalente no ExcelA busca de uma coluna procura só naquela coluna

2. Solicitação #2

   Agrupar vários valores de uma coluna em um único resumo de filtro

   Equivalente no ExcelIndicador de filtro no cabeçalho

3. Solicitação #3

   Permitir exclusão: Diferente de, Não contém

   Equivalente no ExcelÉ diferente de / Não contém

4. Solicitação #4

   Mostrar key dates como checklist, não como seletor de data

   Equivalente no ExcelChecklist da coluna de data

5. Solicitação #5

   Depois de filtrar uma coluna, mostrar só as opções relacionadas nas outras

   Equivalente no ExcelAs listas refletem as linhas visíveis

Estrutura do filtro

Todo filtro segue a mesma anatomia, da abertura do funil até a limpeza do resultado.

Ponto de entrada: um ícone de funil em cada cabeçalho filtrável.

Os tipos de filtro acompanham os dados: seleção múltipla com busca para textos e IDs, intervalo para números, binário para sim/não e checklist para datas. Colunas que aceitam valores vazios ganham as opções Mostrar e Ocultar vazios. Filtros numéricos mantêm as células vazias em Diferente de, assim como os filtros de texto. Todo popover tem Cancelar e Aplicar. Aplicar sem nada selecionado remove o filtro daquela coluna, então dá para limpar um filtro no mesmo lugar em que ele foi criado.

Os critérios permitem filtrar por uma regra em vez de marcar valores na lista. Os números correspondem aos marcadores da imagem abaixo.

1. 1
   Seletor de operação

   Igual a, Diferente de, Contém ou Não contém, ao lado de um campo de busca.

2. 2
   Adicionar linhas (+)

   Linhas de Igual a e Contém se combinam com OU. Linhas de Diferente de e Não contém se combinam com E, então excluir dois valores remove os dois.

3. 3
   Lista desabilitada

   Enquanto existem critérios, a lista de checkboxes fica desabilitada para que os dois métodos não se sobrescrevam.

As key dates aparecem como um checklist com busca, do mesmo jeito que o Excel lista os valores de uma coluna de data.

1. 1
   Checklist do Meridian

   Busca, Todos, Limpar e a contagem de selecionados. Todos e Limpar agem só nos valores que a busca está mostrando, então uma busca nunca descarta seleções que o usuário não está vendo.

2. 2
   Datas como valores

   Cada data aparece como um valor para marcar, do jeito que o Excel lista uma coluna de data.

Barra de resumo: a contagem de registros fica à esquerda. Com filtros aplicados, ela mostra “3 de 34 registros”, para o usuário ver o quanto os filtros reduziram os dados. O cabeçalho filtrado fica destacado, e “Limpar tudo” zera tudo.

1. 1
   Uma pill por coluna

   Uma pill para cada coluna filtrada, com sua própria contagem, como ‘ID · 4’.

2. 2
   Valores no hover

   Passar o mouse sobre uma pill lista cada valor com seu próprio botão de remover.

Validando com os usuários

Como UX designer, conduzi uma revisão com os usuários cobrindo as cinco solicitações.

Cada solicitação foi verificada contra um resultado que os usuários conseguiam ver na tela:

• Digitar parte de um ID encontra só IDs e, por exemplo, aplicar seis IDs selecionados carrega exatamente esses seis.

• Vários valores escolhidos na mesma coluna viram uma única pill com contagem, e o hover lista cada valor.

• Linhas de Diferente de e Não contém deixam de fora os valores indicados.

• Uma key date é filtrada a partir de um checklist e aparece como pill com contagem.

• Depois de filtrar uma coluna, as listas de opções das outras mostram só valores relacionados.

• A contagem de registros mostra quantas linhas restam do total.

• Remover qualquer valor de uma pill atualiza a tabela.

Visualizando a solução

O artefato de design é um protótipo interativo, a página Items Track, que mostra as cinco solicitações funcionando. Todo cabeçalho de coluna tem um funil: busque e marque valores, empilhe critérios, escolha Sim ou Não, mostre ou oculte células vazias e veja as opções das outras colunas diminuírem conforme os filtros são aplicados.

Feito com Claude.ai, mas revisado e refinado por mim.