Guia de Referência: UX, Usabilidade e Design de Interação para Mobile e Web (Caelum)

Este guia organiza práticas de experiência do usuário para que a IA não trate interface apenas como estética. O fluxo parte de pesquisa e objetivos, passa por requisitos e protótipos e chega a heurísticas, mobile, design visual e testes de usabilidade.

subdirectory_arrow_right1. Experiência do Usuário e Design Centrado no Usuário

• UX: Considere percepções, respostas e contexto de uso, não apenas a aparência da tela.
• UCD: Decisões de design devem ser fundamentadas em usuários, objetivos, tarefas e contexto.
• Holística: Arquitetura de informação, navegação, conteúdo, interação e visual devem funcionar como uma unidade.

subdirectory_arrow_right2. Pesquisa, Personas e Requisitos

• Pesquisa: Use entrevistas, observação, card sorting e outras técnicas conforme a pergunta que precisa ser respondida.
• Personas: Sintetize padrões reais de comportamento e objetivos; não invente personas decorativas.
• Cenários e tarefas: Modele o caminho do usuário, decisões e dificuldades antes de definir telas.
• User stories: Conecte necessidade do usuário, objetivo e valor; evite histórias que descrevem apenas implementação.
• Priorização: Priorize features pelo impacto nos objetivos, risco, custo e aprendizagem.

subdirectory_arrow_right3. Design de Interação e Heurísticas

• Visibilidade do status: O sistema informa o que está acontecendo e o resultado das ações.
• Mundo real: Termos, ordem e modelos mentais devem corresponder ao contexto do usuário.
• Controle e liberdade: Ofereça caminhos de retorno, cancelamento e correção.
• Consistência: Padrões visuais e comportamentais reduzem esforço cognitivo.
• Prevenção de erros: Projete para evitar erros e oferecer recuperação compreensível.
• Reconhecimento: Prefira tornar opções visíveis a exigir memorização.
• Eficiência: Atenda iniciantes sem impedir atalhos para usuários experientes.
• Minimalismo: Remova informação e controles que competem sem necessidade.
• Recuperação: Mensagens de erro devem explicar problema e próximo passo.
• Ajuda: Documentação deve ser fácil de encontrar, contextual e orientada à tarefa.

subdirectory_arrow_right4. Prototipação e Validação

• Pergunta primeiro: Escolha fidelidade do protótipo conforme o que precisa ser aprendido.
• Visual e funcional: Alta fidelidade visual testa percepção; alta fidelidade funcional testa fluxos e interações-chave.
• Conteúdo plausível: Use dados e textos próximos da realidade para não invalidar o teste.
• Teste cedo: Prototipar antes de implementar reduz custo de corrigir direção errada.

subdirectory_arrow_right5. Mobile e Usabilidade

• Lei de Fitts: Alvos importantes devem ter tamanho e distância adequados, inclusive área clicável ampliada.
• Lei de Hick: Evite excesso de opções simultâneas; organize escolhas e hierarquia.
• Thumb zones: Posicione ações frequentes considerando alcance do polegar e uso com uma mão.
• Microinterações: Use feedback pequeno e imediato para comunicar estado, progresso e resultado.
• Tipografia: Priorize legibilidade, hierarquia, escala e contraste em diferentes telas.

fact_check6. Design Visual e Testes

• CRAP: Use contraste, repetição, alinhamento e proximidade para criar hierarquia e consistência.
• Cores: Use cor com função semântica e contraste adequado; não dependa apenas de cor para transmitir estado.
• Testes de usabilidade: Defina tarefas, participantes, métricas e observações antes da sessão; registre problemas e evidências.

school7. Como Usar com IA

Anexe este arquivo ao criar ou revisar interfaces. Peça à IA o fluxo de tarefas antes da tela, justificativa das decisões de interação, estados de erro/vazio/carregamento, versão mobile e checklist das heurísticas.

subdirectory_arrow_rightDiretrizes de Execução para IA

Ao criar, revisar ou reestruturar uma aplicação, garanta:

1. Comece pelo usuário e pela tarefa, não por componentes visuais.
2. Desenhe estados completos: normal, vazio, carregando, sucesso, erro e permissão.
3. Prototipe cedo quando houver incerteza de fluxo ou interação.
4. Aplique heurísticas como checklist, sem tratá-las como substituto de teste com usuários.
5. Considere mobile desde o início, com alvos adequados e hierarquia clara.

schoolRoteiro de Uso Operacional com IA

1. Contextualize o projeto: informe domínio, stack, arquitetura atual, restrições e objetivo da mudança.
2. Selecione o recorte: diga qual princípio/capítulo deste guia deve orientar a tarefa; não aplique tudo ao mesmo tempo.
3. Peça diagnóstico antes do código: a IA deve identificar sintomas, riscos, dependências e alternativas.
4. Defina critérios de aceite: comportamento, testes, acessibilidade, performance, segurança ou operação conforme o tema.
5. Implemente incrementalmente: mudanças pequenas, reversíveis e verificadas.
6. Faça revisão final: peça à IA que confronte a solução com este guia e liste desvios deliberados.

smart_toyPrompt de aplicação

Use este guia como referência técnica para a tarefa abaixo.
Não copie regras mecanicamente. Primeiro diagnostique o problema e selecione apenas os princípios aplicáveis.
Mostre: (1) diagnóstico, (2) decisão, (3) implementação proposta, (4) testes/verificações, (5) trade-offs e (6) checklist final.

Contexto: [DESCREVA o sistema, stack, estado atual e cenário da mudança]
Objetivo: [DESCREVA o resultado esperado e o comportamento que deve existir]
Restrições: [DESCREVA limites de escopo, compatibilidade, segurança, prazo e o que não pode mudar]

schoolComo preencher os campos

• Contexto: descreva o tipo de sistema, stack/versões, arquitetura atual, onde a mudança acontece e o comportamento relevante já existente.
• Objetivo: descreva o resultado observável que deve existir ao final, não apenas a tecnologia que você quer usar.
• Restrições: informe o que não pode mudar, compatibilidade, prazo, segurança, acessibilidade, performance, legado, dependências e limites de escopo.

lightbulbExemplo preenchido

Contexto: Sistema interno usado em desktop e celular; usuários demoram para localizar ações e recebem pouco feedback após salvar registros.
Objetivo: Reorganizar o fluxo da tela de cadastro, melhorar feedback, hierarquia visual e uso em telas pequenas.
Restrições: Preservar campos obrigatórios e regras do negócio; acessibilidade por teclado; não esconder ações essenciais; validar em 360px e desktop.