5 formas como metáforas otimizam UX

joabe antonio de oliveira
maio 9, 2026

Compartilhe esta postagem

Receba nosso boletim

Existem muitas maneiras de experimentar o mundo que nos rodeia. Especialmente offline, podemos utilizar os nossos diferentes sentidos para recolher informações, interpretar o nosso ambiente e fazer julgamentos. Na Web, porém, nossos sentidos são mais limitados. Como designers, precisamos apresentar as informações com cuidado para garantir que nossos usuários pensem, sintam e façam a coisa certa. Uma ótima maneira de ajudar seus usuários a compreender o conteúdo abstrato, criar uma sensação de familiaridade, desencadear emoções, chamar a atenção e motivar a ação é metáforas.

“A maneira como pensamos, o que vivenciamos e o que fazemos todos os dias é uma questão de metáfora.” – Lakoff e Johnson

Em seu livro frequentemente citado, Metáforas pelas quais vivemosLakoff e Johnson demonstram o importante papel das metáforas na nossa linguagem e na nossa vida quotidiana. Nosso sistema conceitual é em grande parte metafórico, o que significa que usamos metáforas para raciocinar e compreender o mundo. Vejamos como você pode usar metáforas para aumentar a experiência do usuário em seu site. Abaixo estão cinco razões pelas quais as metáforas podem melhorar a experiência do usuário.

1. Metáforas podem colocar conceitos abstratos em termos concretos

As metáforas são uma ótima ferramenta para ajudar seus usuários a compreender conteúdo abstrato ou desconhecido. Ao vincular informações abstratas a um conceito concreto, fica mais fácil para as pessoas compreenderem as informações. Vamos começar com o uso mais básico e comum de metáforas na Web: os ícones. Esses pequenos símbolos ajudam os usuários a compreender um conceito rapidamente. Os ícones geralmente se referem a algo que conhecemos do mundo físico e que podemos de alguma forma relacionar com um conceito abstrato na Web. Por exemplo, no site Startups, é assim que o design funcionavocê pode ver como um ícone de lâmpada é usado para denotar a palavra “inovação”, um ícone de chave inglesa para se referir a tornar um produto útil (utilitário) e um ícone de pincel para representar a palavra “estética”: Fonte As metáforas podem ser usadas de forma criativa para explicar conceitos complexos ou incomuns. Por exemplo, dê uma olhada na página de erro 404 de Huw Wilkins em seu blog: Fonte Muitos usuários da Web não sabem o que é um erro 404, e páginas genéricas de erro 404 podem ser intimidantes para eles. Em vez de dar uma explicação técnica do motivo pelo qual a página solicitada não está disponível, o usuário obtém uma imagem humorística de um ninja correndo que roubou a página solicitada. Metáforas também podem ser usadas para explicar um processo. Mudança de dados mostra uma máquina imaginária que transforma diferentes ícones de redes sociais em estatísticas que podem ser exibidas na sua tela: Fonte Claro que a máquina não é real e o processo é bem mais abstrato do que o mostrado na imagem, mas fica bem claro que tipo de serviço eles oferecem.

2. Metáforas criam familiaridade

Adoramos reconhecer as coisas. Sempre que não conseguimos reconhecer algo, nosso cérebro faz o possível para entender o que estamos vendo. (É por isso que os princípios da Gestalt podem ser aplicados ao nosso trabalho de design.) Em seu artigo Brains Agree: O Caso das Diretrizes de Usabilidade de SitesTodd Follansbee explica que usamos padrões para ter uma ideia do que esperar. Reconhecer padrões mentais nos ajuda a aceitar e compreender o que não é familiar. A interface do usuário do Papelum aplicativo de desenho para iPad, usa uma metáfora de caderno de desenho para criar familiaridade: Fonte O aplicativo foi projetado para parecer e funcionar como um caderno de desenho. Você pode facilmente trazer esboços para o papel, escolher entre diferentes canetas e cores, folhear as páginas e mostrar suas criações aos amigos, compartilhando-as nas redes sociais. Ao aplicar recursos familiares a uma ferramenta digital, as interações tornam-se muito intuitivas e fáceis de aprender. Todo mundo sabe piadas toc-toccerto? As pessoas de Fábrica Toc Toc utilizar as associações positivas ligadas às palavras para a imagem da sua empresa. Fonte O nome não apenas nos promete que é uma empresa realista, mas também parece familiar. Mesmo alguém que nunca ouviu falar da agência antes provavelmente terá algumas lembranças divertidas e positivas decorrentes do nome da empresa.

3. Metáforas podem desencadear emoções

Você pode usar metáforas para desencadear emoções. As emoções não apenas tornam o seu design atraente para as pessoas, mas também mais eficaz, prazeroso e memorável. Como mencionado antes, os ícones nos ajudam a compreender conceitos abstratos. Porém, se exagerado e desenhado com personalidade, como no site da Ponte dos Olhoseles também podem desencadear emoções: Fonte Embora associemos o ícone abstrato de uma xícara de café a um determinado significado ou função, uma imagem detalhada nos faz pensar em um café quente e gostoso ao mesmo tempo. O aplicativo Roambi trabalha com uma metáfora para desencadear emoções como parte de sua estratégia de marketing: Fonte É claro que uma empresa não tem pulso e também não é fisicamente possível medir o pulso na mão. No entanto, a ideia de fazê-lo de qualquer maneira é muito atraente. Como observação lateral, ótimas referências para design emocional são Dom Normando e Aaron Walterque se concentram no valor adicional que podemos agregar a um site quando consideramos as emoções humanas.

4. Metáforas podem chamar a atenção dos usuários

Inúmeras técnicas podem tornar certos elementos de um web design mais distintos do que outros, e o uso de metáforas está entre eles. As metáforas podem ser usadas para chamar a atenção para um site em geral ou para elementos muito específicos de uma página web. Coisas que reconhecemos chamam a nossa atenção, tal como quando reconhecemos rostos familiares numa grande multidão de pessoas desconhecidas. Por exemplo, associamos crachás a eventos e reuniões sociais, como conferências e workshops. Um crachá significa que você é um membro registrado, um participante pagante ou tem direito a coisas às quais pessoas sem crachá não têm direito. Portanto, uma metáfora de crachá foi usada no seguinte conceito de formulário web de login por Meng To para tornar um formulário da web simples mais atraente: Fonte Florescer Decidimos usar uma ilustração de uma árvore para explicar o que eles fazem, junto com o slogan “Nós plantamos sites que florescem nos climas mais adversos”. Eles mostram uma grande árvore florescente no meio de um deserto para denotar o poder de seus serviços. A ilustração e a metáfora são atraentes e memoráveis. Fonte

5. Metáforas podem motivar os usuários a agir

Outro aspecto interessante das metáforas é que elas podem influenciar as ações das pessoas. Ao traduzir as interações que conhecemos do mundo real para a Web, também podemos transferir nosso conhecimento para a tela. Dessa forma, as metáforas podem ser muito envolventes e acionáveis porque sabemos intuitivamente o que fazer. O Site da Cascade Brewery Co. oferece uma metáfora muito envolvente para seu menu de navegação: Fonte Os usuários podem criar seu próprio conteúdo adicionando diferentes proporções de categorias de conteúdo. É bastante criativo como este menu de navegação chama sua atenção e faz você conferir o conteúdo só para ver o que acontece se você alterar as proporções da cerveja. Outra ótima maneira de fazer com que os usuários se registrem para acesso beta é este relógio de contagem regressiva no Minute Race: Não há indicação do que acontecerá se o tempo acabar, mas mesmo assim senti uma forte necessidade de me registrar o mais rápido possível. Além disso, fazer com que pareça uma competição aumenta minha motivação para me inscrever imediatamente.