Engenharia de Usabilidade — LATAM Airlines

01 Contexto e Usuário Alvo

O foco desta análise é a etapa de Adição de Bagagem e Resumo de Compra. Esta interface foi selecionada por apresentar altíssima densidade informacional, gerando fricção cognitiva e induzindo o utilizador a decisões financeiras acidentais.

👨‍💼

Roberto Alves

Viajante Ocasional • 55 anos

"Quero adicionar a minha mala sem medo de clicar na opção errada e pagar a dobrar."

Objetivos no Sistema

Comprar a passagem de forma direta.
Entender claramente o que está incluído.
Adicionar apenas 1 mala despachada.

Dores e Frustrações

Excesso de textos com regras (cm/kg).
Medo de taxas ocultas ou automáticas.
Perda de memória sobre o que já selecionou ao mudar de página.

02 Mapeamento de Problemas

P1 Alto (3/5)

Sobrecarga Cognitiva

Regras de dimensões de bagagem apresentadas em blocos de texto denso, exigindo leitura extensa em vez de leitura dinâmica.

H8 — Estética e Minimalismo

P2 Severo (4/5)

Risco de Cobrança Dupla

O switch "Adicionar em todos os voos" não previne o erro, ocultando a multiplicação imediata do custo na UI principal.

H5 — Prevenção de Erros

P3 Alto (3/5)

Falta de Visibilidade

O carrinho ("Detalhe de viagem") minimiza-se sozinho ao avançar nas abas, forçando o utilizador a memorizar as escolhas.

H6 — Reconhecimento vs Memória

P4 Médio (2/5)

Validação Genérica

Mensagens de erro no formulário não são instrutivas. Apontam o erro, mas não sugerem como recuperar (ex: falta de ponto no email).

H9 — Recuperação de Erros

03 Evidências da Interface Original

latamairlines.com/compra/viagem-personalizada

Evidência P1 e P2: Excesso de texto e Toggle confuso

O layout central agrupa informações demais num único card. O utilizador é forçado a ler parágrafos cinzentos para entender o serviço. O botão superior (Switch) possui um impacto financeiro direto que não se reflete imediatamente perto do botão de ação da mala.

latamairlines.com/compra/servicos-extras

Evidência P3: Carrinho lateral sem estado

Ao abrir a aba de "Embarque premium", o sistema colapsa as seleções da aba anterior no painel direito. O utilizador que acabou de adicionar R$ 685,66 em bagagens já não vê essa informação visível, exigindo esforço de memória de curto prazo.

latamairlines.com/compra/passageiros

Evidência P4: Feedback de Erro Pobre

Erro no e-mail (falta de um simples ponto antes de 'com') gera um feedback em vermelho dizendo apenas "Insira um email válido", não auxiliando na rápida correção por parte do utilizador.

04 Ciclo 2: Engenharia do Redesign Técnico

O segundo ciclo de avaliação transformou o diagnóstico clínico do Ciclo 1 em uma arquitetura de software focada na experiência do usuário. O redesign eliminou ruídos e distribuiu o processamento de dados do sistema de forma a **proteger a tomada de decisão do usuário**, otimizando o fluxo cognitivo com base nas Heurísticas de Nielsen.

1. Componentização em Cards Independentes e Bifásicos H8 • Estética e Minimalismo

Substituição do contêiner massivo e centralizado da interface original por um ecossistema de componentes isolados (*Cards* de produto). O botão de compra agora opera em modo bifásico assíncrono via JavaScript, transitando dinamicamente entre os estados ativos de "Adicionar" e "Remover".

Impacto ErgonômicoAplica a Lei de Hick ao isolar decisões. O usuário processa um produto por vez, eliminando a fadiga gerada por blocos repetitivos de texto corporativo.

Mecanismo de Controle (H3)Ao transformar a exclusão em uma ação direta de um clique ("Remover"), o sistema concede liberdade para reversão rápida de erros acidentais.

2. Painel Consolidado de Preço Persistente (Sticky) H6 • Reconhecimento em vez de Recordação

Implementação de um componente lateral asilado com posicionamento fixo baseado nas coordenadas do viewport (*CSS Sticky*). O painel intercepta as ações do usuário na área de produtos e recalcula o balanço financeiro em tempo real, renderizando os valores de forma transparente.

Visibilidade do Sistema (H1)Erradica o problema de colapso de dados do carrinho original. O estado econômico da transação é atualizado síncronamente a cada clique.

Economia de MemóriaO usuário não precisa memorizar ou rolar a tela para recordar o valor acumulado; a informação passa de latente para manifesta de forma contínua.

3. Validação Construtiva Reativa (Inline Validation) H5 • Prevenção de Erros

Substituição da validação passiva por um listener reativo no evento de input do teclado (`addEventListener('input')`). Utilizando expressões regulares analíticas (RegEx), o interpretador avalia a string em tempo real, oferecendo feedback construtivo instantâneo por meio de padrões cromáticos universais (vermelho para inconsistência e verde para conformidade).

Design PreventivoImpede o acionamento de exceções tardias em modais de erro pós-envio, guiando o modelo mental do passageiro antes que a falha se consolide.

Diretriz de Recuperação (H9)Substitui mensagens vagas de erro ("E-mail inválido") por instruções explícitas sobre o caractere ausente estrutural (como a falta do `@` ou do domínio).

4. Barreira de Segurança e Modal de Sucesso Climatizado H2 • Correspondência com o Mundo Real

Criação de um ponto de checagem estrutural que intercepta o fluxo de fechamento de compra. Caso os dados de contato estejam em conformidade, o sistema bloqueia a interação com o plano de fundo por meio de uma máscara de opacidade e renderiza um componente de confirmação estilizado no formato de um bilhete de embarque físico, contendo os dados nominais da persona.

Metáfora de InterfaceA transposição visual de um bilhete impresso aproveita o conhecimento prévio do passageiro sobre o ecossistema de viagens aéreas tradicionais.

Fechamento Lógico (H1)Fornece uma confirmação inequívoca e estruturada de que todas as customizações foram salvas com sucesso antes de direcionar o usuário para o gateway financeiro.