Produto, UX, UI e acessibilidade: modelo mental e decisões

O problema e por que importa

Produto define qual problema merece solução; UX organiza a experiência; UI materializa interação; acessibilidade garante que capacidades diferentes não excluam pessoas. Começar pela tela tende a congelar uma hipótese antes de compreender a jornada.

Para a conclusão de uma OS em campo, a pergunta é: qual resultado o eletricista precisa alcançar sob sol, ruído, luvas, conexão ruim ou leitor de tela, e qual evidência confirma que o fluxo reduziu erro?

Vocabulário antes das siglas

• problema: necessidade, obstáculo ou resultado indesejado observado num contexto real.
• hipótese: afirmação testável sobre causa, solução ou resultado esperado.
• persona: modelo de um grupo de usuários baseado em evidências, usado para orientar decisões sem substituir pesquisa.
• jornada: sequência de objetivos, ações, estados e pontos de contato vividos por uma pessoa.
• affordance: pista percebida de como um elemento pode ser usado.
• feedback: resposta perceptível do sistema que comunica estado, resultado ou próximo passo.
• design system: conjunto governado de princípios, tokens, componentes e padrões reutilizáveis.
• WCAG: Web Content Accessibility Guidelines; recomendações testáveis de acessibilidade para conteúdo web.
• tecnologia assistiva: software ou equipamento que ajuda uma pessoa a perceber, operar ou compreender uma interface.

Persona sem pesquisa vira estereótipo. WCAG oferece critérios, mas conformidade técnica não substitui teste com pessoas. Design system reduz inconsistência quando possui governança, não apenas catálogo visual.

Modelo mental

uma interface é uma conversa: o sistema mostra possibilidades, a pessoa age e recebe confirmação perceptível. A analogia ajuda a localizar responsabilidades; ela deixa de valer quando esconde concorrência, falhas parciais ou atores maliciosos. Software distribuído não tem uma única percepção de tempo nem sucesso: uma resposta pode se perder depois de um efeito ter ocorrido.

Fronteira e responsabilidade

A descoberta registra contexto, comportamento e resultado desejado antes de escolher solução. O desenho transforma isso em fluxo, conteúdo e interação. A implementação preserva semântica, estados e responsividade; avaliação combina teste automatizado, inspeção e pessoas reais.

Critérios de aceite incluem teclado, nome acessível, foco, contraste, zoom, toque, mensagens de erro e movimento reduzido. Acessibilidade entra na definição de pronto e no design system, não como correção no fim.

Decisão orientada por risco

Pergunta de projeto	Decisão inicial	Evidência exigida
Qual problema resolver?	Evidência da jornada antes da feature	Métrica representa resultado, não clique
Como validar cedo?	Protótipo da hipótese mais arriscada	Teste revela comportamento observável
Que padrão reutilizar?	Componente acessível do design system	Variações permanecem semânticas
Quando lançar?	Após critérios funcionais e inclusivos	Pessoas e ferramentas verificam o fluxo

A alternativa mais complexa só é promovida quando essa evidência mostra que a solução atual não atende ao risco. A decisão registra também custo operacional, forma de reversão e responsável.

Caso real: manutenção conectada ao ERP

O eletricista conclui a OS 742. O sistema valida identidade, unidade, estado atual e evidências; persiste a mudança; registra auditoria; publica a integração; informa “sincronização pendente” se o ERP não responder. A decisão deste livro aparece ao transformar uma necessidade humana em uma experiência compreensível, inclusiva e mensurável. O sucesso não é apenas HTTP 200: banco, usuário, fila, ERP e telemetria precisam convergir para um estado conhecido.

Falha orientadora

um técnico com luvas, sob sol forte e conexão instável não consegue concluir a ordem de serviço. Trate a falha como cenário de projeto, não exceção improvável. O controle principal é pesquisa com usuários, fluxo por teclado, contraste, estados de erro e testes com tecnologias assistivas. Seu teste deve falhar antes do controle e passar depois dele.

Segurança, privacidade e custo

• Colete apenas dados de pesquisa necessários e obtenha consentimento e proteção adequados.
• Não use padrões manipulativos para obter consentimento, pagamento ou permanência.
• Mensagens de erro devem orientar sem expor existência de contas ou detalhes internos.
• Métricas de produto não justificam rastreamento oculto nem armazenamento indefinido.

O manual de Cybersecurity aprofunda threat modeling, identidade, proteção de dados, supply chain e resposta a incidentes; os controles acima são a aplicação específica nesta disciplina.

Erros frequentes e diagnóstico

1. Tecnologia antes do problema: registre hipótese e atributo de qualidade que justificam a escolha.
2. Caminho feliz apenas: injete timeout, duplicata, concorrência, permissão negada e dado inválido.
3. Métrica de vaidade: acompanhe taxa de conclusão da tarefa, erros por etapa, tempo e barreiras por perfil e ligue o sinal a uma decisão.
4. Automação sem condição de parada: limite tentativas e torne o estado pendente visível.
5. Documentação sem prova: execute exemplos e conecte diagramas a arquivos, owners e testes.

Critérios de aceite

• Fronteira, dono, entradas, saídas e dependências estão diagramados.
• Caminho feliz e falha parcial possuem testes reproduzíveis.
• O controle “pesquisa com usuários, fluxo por teclado, contraste, estados de erro e testes com tecnologias assistivas” tem evidência observável.
• Segurança, privacidade, acessibilidade, custo e operação foram avaliados.
• A métrica “taxa de conclusão da tarefa, erros por etapa, tempo e barreiras por perfil” possui unidade, janela e responsável.
• Runbook informa diagnóstico, mitigação, recuperação e escalonamento.

Prática e recuperação ativa

1. Desenhe a jornada da OS 742 e marque onde esta camada começa e termina.
2. Explique a diferença entre ocultar uma ação e negar sua autorização no servidor.
3. Injete a falha “um técnico com luvas, sob sol forte e conexão instável não consegue concluir a ordem de serviço” e capture evidência antes/depois do controle.
4. Transfira o raciocínio para um pedido de e-commerce: o que permanece e o que muda?

Entregável verificável: mapa da jornada, hipótese mensurável, protótipo responsivo, teste de acessibilidade e síntese das evidências que mudaram a decisão. A entrega só é aceita quando outra pessoa consegue repetir a verificação.

Fontes primárias e oficiais

Revisão editorial: 2 de agosto de 2026. Confirme versões antes de implementar configuração volátil.

• https://www.w3.org/WAI/standards-guidelines/wcag/
• https://developer.mozilla.org/docs/Web/Accessibility

Da compreensão à execução

O modelo anterior explica o que precisa permanecer verdadeiro. Agora o caderno transforma essa compreensão em um experimento. Antes de executar, escreva sua previsão; depois compare o observado com o esperado e registre a primeira fronteira onde o estado divergiu.

Objetivo, hipótese e ambiente

Objetivo: demonstrar transformar uma necessidade humana em uma experiência compreensível, inclusiva e mensurável em uma fatia da jornada de manutenção. Hipótese: o controle “pesquisa com usuários, fluxo por teclado, contraste, estados de erro e testes com tecnologias assistivas” reduz a falha escolhida sem violar o contrato das camadas vizinhas.

Pré-requisitos: Git, terminal, TypeScript ou a tecnologia indicada no exemplo, ambiente local isolado e dados sintéticos. Duração orientativa: 90–180 minutos; depende de prática, não de leitura. Não use credenciais reais nem produção.

sequenceDiagram
  actor E as Eletricista
  participant W as Aplicativo
  participant A as API de manutenção
  participant D as Estado canônico
  participant R as ERP
  E->>W: conclui OS 742
  W->>A: intenção + identidade + idempotency-key
  A->>D: valida e persiste
  A-->>W: estado confirmado ou pendente
  A->>R: integração controlada
  R-->>A: confirmação, rejeição ou timeout

Passo 1 — registre o contrato antes do código

Escreva pré-condição, pós-condição, erros esperados, timeout e política de repetição. Separe “aceito para processamento” de “confirmado pelo ERP”. Defina o que a pessoa verá durante incerteza. O contrato deve caber em uma tabela e ser revisado por negócio, desenvolvimento, segurança e operação.

Situação	Resultado público	Estado interno	Próxima ação
Entrada válida	confirmado ou 202 pendente	registrado	processar/observar
Sem permissão	negação estável	nenhuma mutação	auditar
Duplicata	mesmo resultado lógico	um efeito	responder idempotente
Dependência lenta	timeout controlado	pendente conhecido	retry com limite
Dado incompatível	erro de contrato	quarentena	corrigir/reprocessar

Passo 2 — implemente a menor fatia vertical

O trecho é didático e precisa ser adaptado ao runtime indicado. Ele ilustra a decisão central, não constitui aplicação completa.

<button type="submit" aria-describedby="save-help">Salvar ordem</button>
<p id="save-help">Confirma e sincroniza quando houver rede.</p>

Mantenha a mudança pequena: interface, regra, persistência, teste e sinal operacional no mesmo ticket. Evite construir “toda a infraestrutura” antes de uma jornada observável.

Passo 3 — prove o caminho feliz e o negativo

1. Execute uma OS válida e capture resposta, estado persistido e correlation ID.
2. Repita a mesma intenção; o efeito lógico deve continuar único.
3. Remova a permissão; nenhum estado deve mudar.
4. Force timeout do ERP; a UI deve mostrar estado honesto e a fila não pode crescer sem limite.
5. Corrompa um campo do contrato; rejeite-o com erro útil, sem stack trace nem segredo.

O teste negativo é parte do produto. Sem ele, o controle pode existir apenas no diagrama.

Passo 4 — instrumente a decisão

Registre duração, resultado, dependência, versão do contrato e correlação. Não use nome, e-mail, token, payload completo nem user_id como dimensão ilimitada de métrica. Para este livro, acompanhe taxa de conclusão da tarefa, erros por etapa, tempo e barreiras por perfil. Defina SLI, janela, limiar e ação humana associada.

Exemplo de evento estruturado conceitual:

{
  "event": "work_order.transition",
  "order_id": "742",
  "result": "pending_erp",
  "contract_version": "v1",
  "correlation_id": "demo-01",
  "duration_ms": 184
}

Passo 5 — injete falha e recupere

Falha-alvo: um técnico com luvas, sob sol forte e conexão instável não consegue concluir a ordem de serviço.

• Detectar: qual sinal diferencia falha real de tráfego normal?
• Conter: como impedir propagação, repetição ilimitada ou perda de dados?
• Mitigar: qual recurso pode ser desativado ou degradado com segurança?
• Recuperar: como reprocessar sem duplicar efeito?
• Aprender: qual teste, alerta, ADR ou limite impedirá recorrência?

Use timeout curto no laboratório e retry limitado com atraso e jitter. Um retry não é recuperação quando a operação não é idempotente. Registre itens que exigem intervenção humana em fila consultável; não esconda exceções em log.

Segurança e abuso

Faça uma mini análise: ativo, ator, fronteira, ameaça, impacto, controle e teste. Teste acesso horizontal entre unidades, elevação de perfil, payload grande, repetição rápida, dado fora de ordem e indisponibilidade. O controle esperado é pesquisa com usuários, fluxo por teclado, contraste, estados de erro e testes com tecnologias assistivas. Valide no servidor e preserve evidência sem expor segredos.

Troubleshooting

Sintoma	Hipótese	Verificação	Correção segura
Estado diverge do ERP	efeito parcial	correlação + outbox/inbox	reconciliar idempotentemente
Latência cresce	fila ou dependência saturada	p95/p99, lag, pool	backpressure e capacidade
Só um tenant falha	escopo, dado ou quota	dimensão de tenant controlada	corrigir política/dado
Retry aumenta erro	operação não idempotente	contar efeitos por chave	deduplicar e limitar
Dashboard “verde”	SLI não representa jornada	teste sintético E2E	medir resultado do usuário

Critérios de aceite verificáveis

• Caminho feliz, entrada inválida, negação, duplicata e timeout foram executados.
• O segundo envio com a mesma chave não produz segundo efeito.
• Nenhum segredo ou dado pessoal aparece em saída, log ou fixture.
• A falha é detectada por sinal antes da reclamação do usuário.
• Existe estado explícito para pendência e procedimento de reconciliação.
• O resultado inclui teste, captura de telemetria, ADR e atualização do runbook.

Evidência, limpeza e solução comentada

Guarde: comandos, versões, saída dos testes, screenshot do fluxo, consulta de estado e gráfico do sinal. Remova ambiente e dados sintéticos; revogue qualquer credencial de laboratório. A solução adequada não é uma ferramenta específica: é a menor composição que satisfaz o contrato e demonstra recuperação.

Exercícios de transferência

1. Troque ERP por gateway de pagamento. Quais garantias ficam mais rígidas?
2. Troque OS por leitura de sensor offline. Onde ordenar e deduplicar?
3. Reduza o RTO pela metade. Qual custo e complexidade aparecem?
4. Explique em voz alta por que uma interface é uma conversa: o sistema mostra possibilidades, a pessoa age e recebe confirmação perceptível é útil e onde a analogia quebra.

Fontes

Consulte as fontes oficiais do capítulo conceitual e registre versão/data no relatório do laboratório. Para observabilidade, use OpenTelemetry; para segurança, use o manual canônico.