MESH

Um sistema precisa de uma tarefa real

MESH é um sistema UI independente que explora estados consistentes, hierarquia e padrões de ação em mobile e desktop. Usei o WAYFIND, um espaço de revisão e handoff de produto, para testar os componentes num contexto de produto realista.

O meu papel incluiu design de produto e UI, componentes reutilizáveis, layouts responsivos e especificações de acessibilidade. A questão era perceber se uma única linguagem de interação conseguia sustentar uma tarefa em diferentes momentos e tamanhos de ecrã.

Um produto. Quatro contextos

Projetos, revisão de issues, handoff e atividade mostram como os mesmos componentes e padrões de estado funcionam em conjunto. A hierarquia mantém-se reconhecível enquanto a tarefa e a densidade mudam.

Cor e tipografia mantêm-se contidas

Os neutros sustentam o produto. As cores materiais ficam reservadas a estados ativos, revisão, limiar e progresso. A identidade nasce das proporções, separações e posicionamento dos estados.

Instrument Sans é usada em display, headings e informação numérica de maior escala. Geist suporta texto UI, leitura e rótulos.

Manter a barra de ações no mesmo lugar

Default, foco, carregamento e estados destrutivos partilham a mesma geometria. O feedback muda através de rótulos, cor e uma linha de foco; a próxima ação não se desloca quando o estado muda.

Seis estados. Uma estrutura estável

A action dock mantém a mesma geometria em default, hover, foco, carregamento, destrutivo e desativado. As mudanças de estado comunicam progresso ou consequência sem deslocar o layout.

Em contexto, a dock liga-se ao limite da tarefa: as alterações permanecem locais até o utilizador publicar. A relação entre ação secundária e principal mantém-se previsível.

O mesmo produto noutra escala

Navegação, métricas de projeto, trabalho recente e atividade vivem numa superfície contínua. A vista desktop mantém o contexto amplo sem alterar a linguagem do sistema.

WAYFIND é um produto de exemplo criado para demonstrar o MESH, não um produto existente nem uma implementação medida com clientes.

A mesma tarefa. Outra escala

A tarefa de revisão mantém a hierarquia de informação, o tratamento de estados e a action dock do desktop para mobile. A navegação condensa à medida que o espaço diminui; contexto da revisão e ações principais mantêm a prioridade.

Auditar / resolver / handoff

Audit, revisão de issues e handoff usam a mesma linguagem de estados, hierarquia de ações e regras responsivas. Ficheiros, verificações e atividade permanecem parte do mesmo sistema em vez de se tornarem uma camada separada de handoff.

O handoff inclui tokens e variáveis, componentes reutilizáveis, especificações de contraste de pelo menos 5,64:1, orientação de ordem por teclado, foco visível e alvos de 44 px. São especificações de design, não resultados de uma auditoria de acessibilidade em código.

MESH é uma exploração independente de sistema. Não é reivindicada adoção real do produto nem resultado de testes com utilizadores.

• ≥ 5.64:1, Especificação de contraste
• 44 px, Especificação de tamanho de alvo
• 1, Linguagem de interação partilhada