Affordances: Desenhando interfaces intuitivas \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 11 Horas 44 Min 47 Seg Tempo restante da oferta: 11 44 47 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Affordances: Desenhando interfaces intuitivas [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) # Affordances: Desenhando interfaces intuitivas Neste post vamos abordar 4 tipos de affordances que são aplicados em interfaces digitais e o impacto que elas podem causar na usabilidade de uma aplicação. [ Redação Treinaweb ](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/affordances.jpg) A definição de ***Affordances*** foi originalmente proposta pelo psicólogo *James Gibson* em 1977 para denotar a qualidade de um objeto que permite ao indivíduo identificar suas funcionalidades através de seus atributos (forma, tamanho, peso, etc…) de forma intuitiva, sem explicação. Por exemplo, quando olhamos para uma maçaneta de um carro, sabemos a sua principal funcionalidade sem nem “pensar”, não importando qual o modelo do carro ou se estamos vendo àquele tipo de maçaneta pela primeira vez. ## Affordances em interfaces digitais Não demorou muito para o termo ser utilizado nas disciplinas de *IHC (Interação Humano-Computador)* e *Design de Interação*. Em interfaces digitais, quando desenhamos os elementos de uma aplicação, muitas vezes adicionamos sombra, relevo e outros efeitos visuais, geralmente se baseando nos objetos que são utilizados no mundo real. Para entendermos um pouco mais, vamos abordar 4 tipos de *affordances* que são aplicados em interfaces digitais e o impacto que elas podem causar na usabilidade de uma aplicação. [ ![UX/UI - Introdução](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ux-ui.svg) Curso UX/UI - Introdução Conhecer o curso ](https://www.treinaweb.com.br/curso/ux-ui-introducao) ### 1. Affordance explícito É quando tornamos um elemento óbvio e claro das suas funcionalidades, indicando exatamente o que precisa ser feito. Geralmente utilizado quando ainda não há um padrão definido de como podemos interagir com esse elemento. ![](https://d2m498l008ebpa.cloudfront.net/2016/11/exemplo_affordance_explicito.jpg) ### 2. Affordance padrão São baseadas nas experiências anteriores e que são conhecidas para maioria dos usuários. Um clássico exemplo é o link sublinhado com a cor azul. Padrões são úteis, pois somos capazes de reduzir a carga cognitiva dos usuários quando interagem com um determinado elemento. [ ![Acessibilidade - Introdução](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/acessibilidade-web.svg) Curso Acessibilidade - Introdução Conhecer o curso ](https://www.treinaweb.com.br/curso/acessibilidade-introducao) ### 3. Affordance escondida Neste tipo, o affordance não está disponível ou claro até que uma ação seja realizada pelo usuário. Por exemplo, um menu dropdown, onde você precisa passar o mouse ou clicar no menu para ver os itens de da lista. Frequentemente utilizado para diminuir a complexidade visual de um design, exibindo apenas as informações relevantes em um determinado contexto. ![](https://d2m498l008ebpa.cloudfront.net/2016/11/exemplo_affordance_escondida.gif) ### 4. Affordance metafórica Utilizamos objetos do mundo real como metáforas em interfaces digitais. Ícones e símbolos são grandes exemplos: carrinho de compra, envelope, telefone, vídeo, câmera, impressora, etc… Elas podem ajudar a comunicar ideias abstratas sem muitas instruções. Ao utilizá-las, certifique se a sua audiência irá entendê-la. ![](https://d2m498l008ebpa.cloudfront.net/2016/11/exemplo_affordance_metaforica-1.jpg) #### Concluindo Entender o conceito de *affordances* é um dos primeiros passos para desenhar interfaces intuitivas. No seu próximo projeto, após conhecer a sua audiência e entender suas limitações, tente combinar os quatro tipos de affordances descritos acima para criar uma boa experiência do seu produto/serviço aos seus usuários. ##### Referências [Affordances](https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/affordances) - Interaction Design Foundation [O Design do Dia a Dia](https://www.amazon.com/Design-Dia-Em-Portuguese-Brasil/dp/8532520839) - Donald A. Norman - [ #UX Design ](https://www.treinaweb.com.br/blog/tag/ux-design) - [ #User Experience ](https://www.treinaweb.com.br/blog/tag/user-experience) Autor ![Redação Treinaweb](//secure.gravatar.com/avatar/662942287935c97e547cfc12c04be6e5?d=mm) ## Redação Treinaweb [Todos os artigos](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/importancia-de-pensar-em-design-inclusivo-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Importância de pensar em Design Inclusivo ](https://www.treinaweb.com.br/blog/importancia-de-pensar-em-design-inclusivo) Conheça o que é design inclusivo, seus princípios e a importância de pensar em acessibilidade em seus produtos desde o início do projeto. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/11/PROFISSIONAL-USABILIDADE-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Como é o dia a dia de um profissional de Usabilidade? ](https://www.treinaweb.com.br/blog/como-e-o-dia-a-dia-de-um-profissional-de-usabilidade) O profissional de usabilidade possui habilidades que mesclam aspectos técnicos e estratégicos. Ele é o responsável por analisar, medir e melhorar o nível de satisfação do usuário ao utilizar um site ou aplicativo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/como-funciona-a-prototipacao-no-desenvolvimento-de-software-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 6 anos atrás ## [ Como funciona a prototipação no desenvolvimento de software? ](https://www.treinaweb.com.br/blog/como-funciona-a-prototipacao-no-desenvolvimento-de-software) A prototipação no desenvolvimento de software permite amadurecer ideias, identificar problemas e engajar pessoas no processo de criação de um sistema. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/ux-research-e-360-view-o-que-e-e-como-pode-ser-aplicado-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ UX Research e 360 View – O que é e como pode ser aplicado? ](https://www.treinaweb.com.br/blog/ux-research-e-360-view-o-que-e-e-como-pode-ser-aplicado) Entenda o que é e como aplicar o UX Research e 360 View, técnicas importantes na hora de pensar em uma melhor experiência do usuário. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/08/capa-acessibilidade-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 2 anos atrás ## [ UX Inclusivo: A importância da acessibilidade no design ](https://www.treinaweb.com.br/blog/ux-inclusivo-a-importancia-da-acessibilidade-no-design) Confira a importância de tornar suas aplicações móveis acessíveis para todos, garantindo inclusão social, maior alcance e conformidade legal. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/double-diamond-e-sua-utilizacao-nos-processos-de-ux-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Double Diamond e sua utilização nos processos de UX ](https://www.treinaweb.com.br/blog/double-diamond-e-sua-utilizacao-nos-processos-de-ux) Neste artigo abordaremos o que é o Double Diamond e suas etapas, que vão da imersão até ao protótipo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/08111124/WEB-DEVELOPER-WEB-DESIGNER-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ Web Designer x Web Developer: quais as diferenças? ](https://www.treinaweb.com.br/blog/web-designer-x-web-developer-quais-as-diferencas) Confira neste artigo as principais diferenças entre um Web Designer e um Web Developer. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/24001738/UX-UI-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 7 anos atrás ## [ UX e UI: O que é e quais as diferenças? ](https://www.treinaweb.com.br/blog/ux-e-ui-o-que-e-e-quais-as-diferencas) Confira neste artigo o que vem a ser a UX (User eXperience) e a UI (User Interface), suas diferenças e no que elas se complementam. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ux-400x280.jpg) [ Design ](https://www.treinaweb.com.br/blog/categoria/design) 10 anos atrás ## [ UX: A importância da experiência do usuário nos projetos ](https://www.treinaweb.com.br/blog/ux-a-importancia-da-experiencia-do-usuario-nos-projetos) Em um mercado competitivo, projetar uma boa experiência acaba sendo fundamental para o sucesso de um produto ou serviço. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/lean-ux-como-potencializar-o-foco-na-experiencia-do-usuario-parte-1-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Lean UX: como potencializar o foco na experiência do usuário - parte 1 ](https://www.treinaweb.com.br/blog/lean-ux-como-potencializar-o-foco-na-experiencia-do-usuario-parte-1) Uma ótima experiência do usuário é essencial para o sucesso de qualquer projeto. Conheça neste artigo o Lean UX e como potencializar seus resultados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/pessoas-ux-400x280.jpg) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 10 anos atrás ## [ Personas em UX ](https://www.treinaweb.com.br/blog/personas-em-ux) Personas são personagens fictícios criados para representar os diferentes tipos de usuários que podem usar um site, marca ou produto. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143654/TW-ENTREVISTAS-RAFAEL-CAFERATI-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 06: Rafael Caferati ](https://www.treinaweb.com.br/blog/tw-entrevista-06-rafael-caferati) Fizemos uma série de entrevistas com desenvolvedores chamada "TW Entrevista". O entrevistado de hoje é o Rafael Caferati, desenvolvedor especialista em UI/UX que já foi premiado pelo CSS Design Awards. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **11h 44min 47s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58