--- title: "Design de interação (IxD): o que é, exemplos e como aplicar" date: 2026-06-15T12:08:02Z modified: 2026-10-15T00:01:24Z permalink: "https://camaraux.com.br/design-de-interacao/" type: post status: publish excerpt: Aprenda design de interação (IxD), suas cinco dimensões e como projetar estados, mensagens, erros e fluxos com exemplos práticos. wpid: 8958 categories: - Fundamentos de UX rank_math_title: "Design de interação (IxD): o que é e como funciona" rank_math_description: Design de interação (IxD) é a disciplina que define como usuários executam ações em produtos digitais. Entenda as 5 dimensões e como aplicar. rank_math_focus_keyword: design de interação featured_image: /wp-content/uploads/2026/06/O-que-e-design-de-interacao-IxD.webp featured_image_alt: Pessoa observando fonte em estrutura futurista com cascatas e bacia de água, em cenário paisagístico author: Lucas Camara timestamp: 2026-10-15T00:01:24Z tags: - Fundamentos de UX --- **Design de interação (IxD)** projeta o que uma pessoa pode fazer em um produto, como ele responde e como ela compreende o resultado. É o desenho do comportamento de interfaces, dispositivos e serviços: campos, botões, gestos, feedback, estados, transições e maneiras de corrigir erros. Se alguém toca em “Enviar solicitação” e não sabe se o pedido foi registrado, a aparência da interface não resolve a dúvida. É preciso planejar **ação, processamento, confirmação e recuperação**. Neste guia, você conhecerá as cinco dimensões do IxD e um exemplo completo de interação aplicável ao trabalho em produtos digitais. ## O que é design de interação e qual sua origem? Design de interação — em inglês _interaction design_ — estuda e projeta as relações entre pessoas e produtos interativos. Conforme a [Interaction Design Foundation](https://ixdf.org/literature/article/what-is-interaction-design), a disciplina considera objetivos, necessidades, limitações e contextos de uso, não apenas a aparência de um sistema. O campo se desenvolveu a partir de IHC, fatores humanos e design industrial. Bill Moggridge ajudou a disseminar a disciplina com o livro _Designing Interactions_ (2007), mas não inventou isoladamente tudo o que hoje chamamos de IxD. É mais útil compreender como diferentes práticas passaram a projetar a relação entre ação e resposta em produtos digitais e físicos. O modelo das dimensões é associado a **Gillian Crampton Smith**, que propôs quatro dimensões, e a **Kevin Silver**, que adicionou uma quinta. A [IxDF detalha essa evolução](https://ixdf.org/literature/topics/interaction-design). As dimensões são perspectivas de análise, não cinco fases obrigatórias. ## As 5 dimensões do design de interação O modelo das cinco dimensões descreve os elementos com os quais um designer de interação trabalha para criar a comunicação entre interface e usuário. Gillian Crampton Smith definiu as quatro primeiras; Kevin Silver acrescentou a quinta. Entender essas dimensões ajuda a sair de uma visão superficial do design de interação como “animar botões” e enxergar o trabalho real por trás de uma interface que funciona. ### 1D: palavras As palavras são a camada de texto com a qual o usuário interage diretamente: rótulos de botão, mensagens de erro, textos de menu, instruções de formulário e microcópia em geral. Uma palavra errada no lugar errado cria fricção imediata. “Enviar” e “Confirmar pedido” comunicam coisas diferentes, mesmo que o comportamento por trás dos dois seja idêntico. O critério aqui é precisão sem excesso: informar o suficiente para que o usuário saiba o que fazer, sem sobrecarregar com texto desnecessário. ### 2D: representações visuais São os elementos gráficos com os quais o usuário interage: ícones, imagens, tipografia, hierarquia visual, cor. Eles complementam as palavras e ajudam a comunicar hierarquia, estado e ação. Um ícone de lixeira comunica “excluir” sem precisar de texto. Um campo com borda vermelha comunica erro antes da mensagem aparecer. A dimensão visual não é sobre estética isolada. É sobre como os elementos gráficos sustentam ou prejudicam a compreensão da interação. ### 3D: objetos físicos e espaço Diz respeito aos dispositivos e contextos físicos pelos quais o usuário acessa o produto: smartphone com toque, notebook com mouse e teclado, smartwatch, dispositivo de voz, quiosque touchscreen. O espaço físico também entra aqui: alguém no transporte público com uma mão ocupada tem restrições de interação completamente diferentes de alguém sentado em frente a um monitor. Ignorar essa dimensão é projetar para um usuário imaginário, não para pessoas reais. ### 4D: tempo O tempo cobre tudo o que muda durante a interação: animações, sons, feedback de progresso, transições entre estados. Quanto tempo dura uma animação de carregamento? Quando um usuário deve receber um retorno sobre o que acabou de fazer? O tempo cria ritmo e expectativa. Quando mal calibrado, gera ansiedade ou lentidão percebida mesmo que o sistema seja rápido. ### 5D: comportamento A quinta dimensão, acrescentada por Kevin Silver, é a síntese das outras quatro. Comportamento é como o produto reage às ações do usuário: o que acontece quando alguém clica, o que o sistema faz quando um erro ocorre, como ele responde a entradas inesperadas. É a dimensão que transforma os quatro elementos anteriores em uma interação real, com consequências e resultados. ## Design de interação vs UX Design: qual a diferença? Essa é a confusão mais comum na área, e faz sentido existir: os dois campos se sobrepõem em vários pontos. A distinção prática está no escopo. **UX Design** cobre toda a experiência do usuário com um produto ou serviço, incluindo pesquisa, arquitetura de informação, estratégia de conteúdo, usabilidade, aspectos emocionais e de marca. É uma visão ampla da jornada completa do usuário, do primeiro contato ao uso contínuo. **Design de interação** é uma das disciplinas dentro do UX. Ele foca especificamente na camada de interação: o que o usuário pode fazer, como o sistema responde e como esse ciclo de ação e resposta se encadeia. Um UX Designer precisa dominar IxD, mas o IxD não cobre tudo que o UX Design envolve. Uma analogia funcional: se UX Design é o projeto completo de uma casa, design de interação é o projeto de tudo que tem comportamento quando alguém usa a casa, as portas, torneiras, fechaduras, janelas. Não é o projeto estético, mas o projeto funcional de cada ponto de uso. Para entender melhor onde as disciplinas se cruzam e onde divergem, o artigo sobre [diferença entre UX e UI Design](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/diferenca-ux-e-ui-design.md) ajuda a mapear o ecossistema completo. ## Princípios de design de interação: ação, feedback e controle Não existe uma lista universal de princípios de IxD que possa ser atribuída integralmente a Don Norman. Conceitos como pistas de ação, feedback, mapeamento e restrições dialogam com as [heurísticas de Jakob Nielsen](https://www.nngroup.com/articles/ten-usability-heuristics/), sobretudo visibilidade do estado do sistema, prevenção de erros, consistência e controle do usuário. - **Pistas de ação:** rótulos, localização e aparência precisam indicar o que pode ser acionado. Veja [affordance em UX](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/affordance-ux.md). - **Feedback:** informe quando um comando foi recebido, está em processamento, foi concluído ou falhou. Aprofunde em [feedback em UX](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/feedback-ux.md). - **Prevenção:** reduza erros previsíveis e use confirmação proporcional às consequências da ação. - **Recuperação:** preserve dados quando possível e ofereça caminhos para corrigir, cancelar ou tentar novamente. - **Consistência:** ações e respostas equivalentes devem seguir padrões compreensíveis no produto. - **Acessibilidade:** permita interação por teclado, toque e tecnologias assistivas, sem depender apenas de cor ou animação. Uma interação bem projetada não precisa de movimento sofisticado. Precisa permitir que a pessoa forme uma expectativa, aja com confiança, receba uma resposta clara e saiba o que fazer em seguida. ## Exemplo prático: IxD em uma solicitação de atendimento **Exemplo hipotético, não um case real da CamaraUX:** uma pessoa precisa abrir um chamado para resolver um problema em uma plataforma B2B. Ela preenche nome, assunto e descrição e seleciona “Enviar solicitação”. O caminho ideal é simples; o desafio real são erros, espera, perda de conexão e resultados que não foram confirmados. | Estado | Como o sistema deve responder | Risco se faltar | | --- | --- | --- | | Inicial | Mostrar campos, restrições e ação principal. | A pessoa não identificar o que preencher. | | Dados inválidos | Explicar o campo e a correção necessária. | Erro genérico e abandono. | | Enviando | Indicar processamento e prevenir envios duplicados. | Vários registros e incerteza. | | Concluído | Confirmar registro e próximo passo. | Não saber se o pedido chegou. | | Falha recuperável | Explicar a falha e preservar os dados, quando possível. | Recomeçar o formulário sem necessidade. | | Estado incerto | Consultar o registro antes de tentar novamente. | Duplicação de uma operação já executada. | Esse modelo exige participação de engenharia: servidor, rede e interface precisam concordar sobre estados e repetição de requisições. Para efeitos financeiros ou outras ações críticas, regras de idempotência e confirmação não são detalhes opcionais de uma animação; elas mudam a segurança da tarefa. ### Como documentar critérios de aceite | Critério | Forma de verificar | | --- | --- | | A confirmação aparece somente após sucesso real. | Teste de resposta do backend. | | A interface impede duplicidade indevida. | Simulação de dois acionamentos e rede lenta. | | Erros de preenchimento orientam a correção. | Teste com dados inválidos. | | Os dados permanecem disponíveis após falha recuperável. | Teste de interrupção e retomada. | | O formulário funciona com teclado e tecnologias assistivas. | Avaliação de foco, rótulos e mensagens. | ### Acessibilidade: mensagens e alvos fazem parte do IxD O [WCAG 2.2, critério 2.5.8 (AA)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum), prevê alvos de pelo menos **24 × 24 pixels CSS** ou espaçamento adequado, com exceções específicas. Esse é um mínimo, não um tamanho ideal universal. O [critério 4.1.3 (AA)](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) exige que mensagens de status sejam identificáveis programaticamente, de forma que tecnologias assistivas as anunciem sem precisar receber foco. Uma mensagem de sucesso não deve depender apenas de cor verde. Dependendo de sua função, um mecanismo de status pode comunicá-la a quem usa leitor de tela sem interromper a navegação. A escolha de atributos e papéis deve ser testada no contexto da interface, em vez de adicionar alertas indiscriminadamente. ## Como aplicar design de interação em seis etapas Use o roteiro para transformar uma intenção em uma especificação verificável. Ele complementa [user flow](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/user-flow.md), [prototipagem](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/prototipagem-ux.md) e [testes de usabilidade](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/implementando-testes-de-usabilidade-guia-completo.md); não substitui esses métodos. Como documentar e validar design de interação em seis etapas ### Defina a tarefa Identifique o objetivo, o contexto e os riscos para o usuário. ### Mapeie o fluxo Descreva ações, decisões, erros e caminhos alternativos. ### Especifique estados Registre carregamento, validação, sucesso, falhas e saída. ### Projete recuperação Preserve dados, evite duplicidade e ofereça formas claras de corrigir. ### Valide acessibilidade Teste foco, teclado, mensagens de status, alvos e diferentes dispositivos. ### Teste e ajuste Observe tarefas e refine o comportamento com evidências. ### Quais entregáveis e métricas ajudam na validação? O resultado pode incluir fluxos, estados, mensagens, regras, protótipo, critérios de aceite e registro de decisões. Observe tarefas, erros, recuperação e compreensão do feedback. Uma taxa de conclusão sem registro das dúvidas ocorridas não explica por que a interação funciona ou falha. | O que observar | Evidência útil | Limitação | | --- | --- | --- | | Descoberta da ação | Observação de tarefa. | Encontrar não significa compreender as consequências. | | Conclusão | Sucesso e erros por tarefa. | Tempo menor não significa sempre melhor experiência. | | Feedback | Interpretação e próxima ação escolhida. | Opinião declarada pode divergir do uso. | | Recuperação | Retomada após erro simulado. | Protótipo não reproduz automaticamente falhas reais. | ## IxD, microinterações e affordance: o que diferencia cada tema? As [microinterações](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/microinteracoes-ux-detalhes-experiencia-usuario.md) são momentos específicos, como confirmar uma escolha ou mudar um estado. São partes do IxD, mas não equivalem ao fluxo completo de uma tarefa. [Affordance](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/affordance-ux.md) ajuda a explicar como a pessoa reconhece possibilidades de ação; IxD também especifica o que ocorre depois. ### Design de interação em produtos com inteligência artificial Em IA, é essencial diferenciar **uma sugestão gerada** de **uma ação executada**. “Rascunho preparado” não equivale a “mensagem enviada”. Conforme o risco, a interface deve permitir conferir, confirmar e corrigir a decisão antes de produzir efeitos. Saiba mais em [UX para agentes de IA](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/ux-para-agentes-de-ia.md). ### Erros comuns - Desenhar apenas o caminho ideal, ignorando carregamento e recuperação. - Usar animação como substituta de feedback claro. - Informar sucesso ou erro apenas pela cor. - Entregar telas isoladas sem regras para transições de estado. - Não validar a interação com usuários e diferentes entradas. - Perder os dados da tarefa quando ocorre uma falha recuperável. ## Perguntas frequentes sobre design de interação ### O que significa IxD? IxD significa Interaction Design, ou design de interação. A disciplina projeta ações e respostas em produtos, sistemas e serviços interativos. ### Quais são as cinco dimensões do design de interação? Palavras, representações visuais, objetos físicos e espaço, tempo e comportamento. Gillian Crampton Smith propôs quatro dimensões, e Kevin Silver acrescentou a quinta. ### Design de interação e UX são a mesma coisa? Não. IxD prioriza o comportamento durante o uso; UX Design considera a experiência mais ampla, incluindo pesquisa, serviço e jornada. ### IxD precisa de animações? Não. O desenho de regras, estados, feedback e recuperação também é design de interação. Animação só ajuda quando esclarece o comportamento. ### Como avaliar uma interação? Observe tarefas, erros, retomadas e compreensão das mensagens. Teste diferentes dispositivos, teclado e tecnologias assistivas. ### Como IxD se aplica à inteligência artificial? Diferencie sugestões de ações executadas, comunique estados e ofereça confirmação e correção conforme as consequências da operação. ## Conclusão: IxD é projetar o comportamento, não apenas a tela Design de interação torna previsível o diálogo entre pessoas e produtos. O valor está no que a pessoa consegue fazer, em como o sistema reage e na possibilidade de compreender e corrigir problemas. As cinco dimensões ajudam a analisar essa experiência, enquanto o mapeamento de estados, a acessibilidade e os testes tornam as decisões aplicáveis. Para produtos com fluxos confusos, erros recorrentes ou falta de feedback, comece por uma tarefa crítica e documente estados e exceções antes de redesenhar toda a interface. A [consultoria de UX](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/page/consultoria-de-ux.md) pode apoiar esse diagnóstico e a priorização de melhorias. ## Fontes e referências - [Interaction Design Foundation — What Is Interaction Design?](https://ixdf.org/literature/article/what-is-interaction-design) Conceito, escopo e cinco dimensões. - [Interaction Design Foundation — Interaction Design (IxD)](https://ixdf.org/literature/topics/interaction-design) Origem das dimensões e contexto de uso. - [Nielsen Norman Group — 10 Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/) Feedback, prevenção de erros e controle. - [W3C — WCAG 2.2, critério 2.5.8](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum) Tamanho dos alvos. - [W3C — WCAG 2.2, critério 4.1.3](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) Mensagens de status acessíveis. ## Topics **Categorias:** [Fundamentos de UX](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/category/fundamentos-de-ux.md)