# 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. --- ## 1. 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. --- ## 2. 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. --- ## 3. 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. --- ## 4. 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. --- ## 5. 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. --- ## 6. 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. --- ## 7. 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. --- ## Diretrizes 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. --- ## Roteiro 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. ### Prompt de aplicação ```text 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] ``` ### Como 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. ### Exemplo preenchido ```text 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. ```