{"id":9176,"date":"2020-01-29T10:00:19","date_gmt":"2020-01-29T13:00:19","guid":{"rendered":"https:\/\/www.blip.ai\/blog\/?p=9176"},"modified":"2023-07-16T09:59:47","modified_gmt":"2023-07-16T12:59:47","slug":"psicologia-do-design","status":"publish","type":"post","link":"https:\/\/www.blip.ai\/blog\/design\/psicologia-do-design\/","title":{"rendered":"Psicologia do design: 10 princ\u00edpios experimentais essenciais"},"content":{"rendered":"

Ao entender o funcionamento do c\u00e9rebro humano, os designers podem aprender a aproveitar a percep\u00e7\u00e3o humana para desencadear mudan\u00e7as comportamentais.<\/span><\/p>\n

Assim, podemos usar os princ\u00edpios b\u00e1sicos da psicologia para tomar decis\u00f5es mais informadas, garantindo que nossos designs n\u00e3o sejam apenas atraentes, mas tamb\u00e9m eficazes.<\/span><\/p>\n

Neste artigo, analisaremos os dez princ\u00edpios psicol\u00f3gicos mais importantes a ter em mente durante todas as etapas do processo de design.<\/span><\/p>\n

1. Efeito Von Restorff<\/span><\/h2>\n

Tamb\u00e9m conhecido como efeito de isolamento, o efeito von Restorff prev\u00ea que, quando visualizamos v\u00e1rios objetos, provavelmente lembraremos daquele que \u00e9 diferente.<\/span><\/p>\n

O oposto tamb\u00e9m \u00e9 verdadeiro: objetos que se destacam menos t\u00eam menos probabilidade de serem lembrados.<\/span><\/p>\n

E qual \u00e9 a conclus\u00e3o?<\/span><\/em><\/p>\n

Devemos tornar elementos fundamentais e informa\u00e7\u00f5es essenciais visualmente distintos, variando de tamanho, cor, posi\u00e7\u00e3o e forma.<\/span><\/p>\n

A p\u00e1gina de pre\u00e7os do <\/span>Dropbox Business<\/span><\/a> \u00e9 um excelente exemplo de como o efeito von Restorff pode ser usado para influenciar o comportamento do consumidor.<\/span><\/p>\n

Eles tornaram seu plano Advanced (o que eles querem que n\u00f3s compremos, por qualquer motivo) visualmente distinto dos planos Standard e Enterprise.<\/span><\/p>\n

\"-\"<\/p>\n

Sem esse<\/span> contraste visual<\/b>, o visitante seria confrontado com uma tela cheia de texto, sem nenhuma dire\u00e7\u00e3o clara sobre para onde olhar primeiro.<\/span><\/p>\n

Da forma como foi apresentado, \u00e9 mais prov\u00e1vel que o usu\u00e1rio olhe e se lembre do plano Advanced.<\/span><\/p>\n

2. Teoria da dupla codifica\u00e7\u00e3o<\/span><\/h2>\n

A teoria da dupla codifica\u00e7\u00e3o, criada por Allan Paivio em 1971, sugere que a apresenta\u00e7\u00e3o de informa\u00e7\u00f5es verbais e n\u00e3o verbais facilita a recorda\u00e7\u00e3o de informa\u00e7\u00f5es.<\/span><\/p>\n

A ideia por tr\u00e1s dessa teoria \u00e9 que as informa\u00e7\u00f5es verbais s\u00e3o processadas por um sistema cognitivo diferente das informa\u00e7\u00f5es n\u00e3o verbais, e a apresenta\u00e7\u00e3o de informa\u00e7\u00f5es nos dois sistemas ajuda a criar modelos mentais mais precisos.<\/span><\/p>\n

O que n\u00f3s, como designers, podemos aprender com essa teoria \u00e9 simples: complemente o texto com imagens relevantes quando a compreens\u00e3o e a memoriza\u00e7\u00e3o forem importantes.<\/span><\/p>\n

A palavra-chave aqui \u00e9 <\/span>relev\u00e2ncia<\/b>; elementos de design abstratos n\u00e3o surtir\u00e3o efeito.<\/span><\/p>\n

S\u00e3o apenas os elementos visuais, <\/span>gr\u00e1ficos<\/span><\/a> ou diagramas que afetar\u00e3o a compreens\u00e3o.<\/span><\/p>\n

Os <\/span>infogr\u00e1ficos<\/span><\/a> aplicam brilhantemente o princ\u00edpio da codifica\u00e7\u00e3o dupla; eles misturam e combinam texto com recursos visuais para maximizar a compreens\u00e3o.<\/span>\u00a0<\/span><\/p>\n

\"-\"<\/p>\n

3. Efeito de posi\u00e7\u00e3o serial<\/span><\/h2>\n

O efeito de posi\u00e7\u00e3o serial sugere que os itens no in\u00edcio e no final de uma lista s\u00e3o mais memor\u00e1veis que aqueles que ficam no meio.<\/span><\/p>\n

\u00c9 prov\u00e1vel que os itens posicionados no in\u00edcio sejam armazenados na mem\u00f3ria de longo prazo (efeito de primazia), enquanto os itens no final ficam \u201cfrescos\u201d na mem\u00f3ria de curto prazo (efeito de rec\u00eancia).<\/span><\/p>\n

Isso \u00e9 particularmente relevante ao criar <\/span>apresenta\u00e7\u00f5es<\/span><\/a>, <\/span>relat\u00f3rios<\/span><\/a> ou outros materiais de marketing destinados a apoiar o aprendizado.<\/span><\/p>\n

Essa \u00e9 a raz\u00e3o pela qual muitas vezes terminamos as apresenta\u00e7\u00f5es com um slide de resumo e porque as conclus\u00f5es s\u00e3o t\u00e3o cruciais para os artigos longos em blogs.<\/span><\/p>\n

Tamb\u00e9m \u00e9 importante para a psicologia do web design.<\/span><\/p>\n

Os elementos vitais de navega\u00e7\u00e3o devem ser colocados na extremidade esquerda ou direita da barra de navega\u00e7\u00e3o, onde \u00e9 mais prov\u00e1vel que sejam lembrados e encontrados com mais facilidade.<\/span><\/p>\n

\"-\"<\/p>\n

4. Efeito do lugar central<\/span><\/h2>\n

O efeito do lugar central afirma que, quando nos apresentam um conjunto de objetos semelhantes, tendemos a <\/span>preferir o que est\u00e1 no centro<\/b>.<\/span><\/p>\n

Acredita-se que os consumidores presumem que os varejistas colocam os produtos mais populares no centro das gamas de produtos, o que leva a esse efeito do lugar central.<\/span><\/p>\n

Independentemente da causa, \u00e9 algo que deve ser levado em considera\u00e7\u00e3o sempre que voc\u00ea estiver criando para promover a venda de um produto.<\/span><\/p>\n

As imagens que apresentam v\u00e1rios produtos, por exemplo, devem ser organizadas em torno de um \u00fanico produto central.<\/span><\/p>\n

\"-\"<\/p>\n

As plataformas de e-commerce tamb\u00e9m podem ser projetadas e selecionadas com o efeito de lugar central em mente.<\/span><\/p>\n

Voc\u00ea pode potencialmente aumentar as vendas de um item espec\u00edfico, colocando-o no centro de sua gama de produtos.<\/span><\/p>\n

5. Lei de Pragnanz<\/span><\/h2>\n

A lei de Pr\u00e4gnanz \u00e9 o princ\u00edpio fundamental da psicologia da Gestalt, uma escola de pensamento que tenta descrever as regras por tr\u00e1s da percep\u00e7\u00e3o visual humana.<\/span><\/p>\n

Essa lei sugere que entendamos o mundo encontrando padr\u00f5es em est\u00edmulos visuais, percebendo objetos como pertencentes a grupos organizados e encontrando simplicidade em formas complexas.<\/span><\/p>\n

Algumas leis da Gestalt seguem a lei de Pr\u00e4gnanz.<\/span><\/p>\n

Os princ\u00edpios de fechamento, figura-fundo, similaridade, proximidade e regi\u00e3o comum preveem, teoricamente, como os est\u00edmulos visuais s\u00e3o interpretados.<\/span><\/p>\n

Podemos usar essas leis para informar nossos projetos e nos ajudar a criar significado a partir de elementos visuais abstratos.<\/span><\/p>\n

Essas leis devem guiar nossas escolhas de design sempre que for necess\u00e1ria uma comunica\u00e7\u00e3o clara: em web design, <\/span>design de logos<\/span><\/a> e design gr\u00e1fico.<\/span><\/p>\n

Vamos dar uma olhada em cada lei e em como se aplicam \u00e0 psicologia do design.<\/span>\u00a0<\/span><\/p>\n

6. Princ\u00edpio do fechamento<\/span><\/h2>\n

O princ\u00edpio do fechamento afirma que tendemos a preencher lacunas entre os elementos para perceber objetos incompletos como sendo inteiros.<\/span><\/p>\n

Se n\u00e3o estiver familiarizado com esse princ\u00edpio, observe a imagem abaixo.<\/span><\/p>\n

\"-\"<\/p>\n

A imagem parece tr\u00eas personagens do Pac-Man ou um tri\u00e2ngulo branco sobreposto em tr\u00eas c\u00edrculos pretos completos?<\/span><\/p>\n

O princ\u00edpio do fechamento sugere que a \u00faltima op\u00e7\u00e3o \u00e9 mais prov\u00e1vel.<\/span><\/p>\n

Esse princ\u00edpio \u00e9 particularmente \u00fatil no design de logos, quando frequentemente queremos eliminar o m\u00e1ximo de tinta desnecess\u00e1ria poss\u00edvel.<\/span><\/p>\n

Podemos contar com quem visualiza para preencher as lacunas e entender at\u00e9 as logos mais minimalistas.<\/span><\/p>\n

A logo da NBC, por exemplo, conta com o fechamento para criar significado no espa\u00e7o negativo no centro do design.<\/span><\/p>\n

\"-\"<\/p>\n

Nosso c\u00e9rebro preenche as lacunas para “ver” o corpo de um pav\u00e3o cercado por penas.<\/span><\/p>\n

Da mesma forma, a logo do World Wildlife Fund deixa lacunas na cabe\u00e7a e no corpo do panda.<\/span><\/p>\n

\"-\"<\/p>\n

Aposto que voc\u00ea n\u00e3o tem dificuldade em reconhecer isso como um urso panda.<\/span><\/p>\n

Se voc\u00ea deseja aplicar o princ\u00edpio do fechamento em seus designs, lembre-se de que ele \u00e9 mais \u00fatil para objetos reconhec\u00edveis (como pandas e pav\u00f5es) e simples (como formas geom\u00e9tricas).<\/span><\/p>\n

Certifique-se de fornecer informa\u00e7\u00f5es suficientes para que o p\u00fablico interprete a imagem.<\/span><\/p>\n

Retire muito contexto e a mente ter\u00e1 dificuldade para suprir as lacunas.<\/span><\/p>\n

7. Princ\u00edpio da figura-fundo<\/span><\/h2>\n

O princ\u00edpio figura-fundo afirma que distinguimos objetos de seus fundos com base no tamanho do objeto e no contraste entre o objeto e esse plano de fundo.<\/span><\/p>\n

As rela\u00e7\u00f5es figura-fundo podem ser est\u00e1veis, quando houver um elemento claro em primeiro plano, ou inst\u00e1veis, quando os elementos em primeiro e em segundo plano forem revers\u00edveis ou amb\u00edguos.<\/span><\/p>\n

\"-\"<\/p>\n

Esse princ\u00edpio \u00e9 frequentemente aplicado em combina\u00e7\u00e3o com o princ\u00edpio do fechamento para criar ilus\u00f5es inteligentes que tecem objetos de “figura” com objetos de “fundo”.<\/span><\/p>\n

Este logo de <\/span>John Randall<\/span><\/a>, por exemplo, usa uma rela\u00e7\u00e3o inst\u00e1vel entre figura e fundo para representar os dois animais titulares do restaurante The Swan & Mallard.<\/span><\/p>\n

\"-\"<\/p>\n

O branco vivo do cisne contrasta com o fundo escuro, distinguindo o cisne como a “figura”.<\/span><\/p>\n

O pato emerge do “fundo”, criado no espa\u00e7o negativo do cisne com a ajuda da lei do fechamento.<\/span><\/p>\n

Um efeito est\u00e1vel de figura-fundo, no entanto, \u00e9 mais \u00fatil na psicologia do design da web, onde muitas vezes \u00e9 necess\u00e1rio criar um CTA claro que se destaque do fundo.<\/span><\/p>\n

O site de Neil Patel, por exemplo, estabelece claramente uma rela\u00e7\u00e3o est\u00e1vel entre figura-fundo que chama a aten\u00e7\u00e3o para Neil e seu CTA.<\/span><\/p>\n

O uso cuidadoso do contraste visual \u00e9 fundamental para qualquer campanha de marketing.<\/span><\/p>\n

\"-\"<\/p>\n

O tratamento gr\u00e1fico mais crucial para controlar as rela\u00e7\u00f5es figura-fundo \u00e9 a cor.<\/span><\/p>\n

Ao fazer escolhas crom\u00e1ticas ponderadas, podemos usar a sali\u00eancia e o contraste visual para criar rela\u00e7\u00f5es figura-fundo est\u00e1veis e inst\u00e1veis.<\/span><\/p>\n

8. Princ\u00edpio da proximidade<\/span>\u00a0<\/span><\/h2>\n

O princ\u00edpio da proximidade afirma que objetos pr\u00f3ximos s\u00e3o percebidos como interligados.<\/span><\/p>\n

Conforme mostrado no exemplo abaixo, os c\u00edrculos posicionados em proximidade parecem estar mais relacionados do que os c\u00edrculos mais afastados.<\/span><\/p>\n

\"-\"<\/p>\n

A proximidade \u00e9 o mais poderoso de todos os princ\u00edpios da Gestalt por exercer a maior influ\u00eancia sobre a maneira como agrupamos objetos visuais.<\/span><\/p>\n

Devemos aplicar o princ\u00edpio da proximidade sempre que desejarmos organizar informa\u00e7\u00f5es em nossos projetos, para indicar rela\u00e7\u00f5es entre elementos como texto, \u00edcones e imagens.<\/span><\/p>\n

\"-\"<\/p>\n

A proximidade n\u00e3o poderia ser mais simples de aplicar em seus projetos.<\/span><\/p>\n

Coloque juntos apenas os elementos relacionados e adicione amplo espa\u00e7o em branco entre os componentes separados.<\/span><\/p>\n

Al\u00e9m de organizar seus designs, voc\u00ea os tornar\u00e1 mais precisos e f\u00e1ceis de ler.<\/span><\/p>\n

9. Princ\u00edpio da similaridade\u00a0<\/span><\/h2>\n

O princ\u00edpio da similaridade anda de m\u00e3os dadas com a lei da proximidade.<\/span><\/p>\n

Ele afirma que objetos com propriedades visuais compartilhadas s\u00e3o percebidos como pertencentes um ao outro.<\/span><\/p>\n

Julgamos a similaridade com base em muitos atributos, incluindo forma, tamanho e orienta\u00e7\u00e3o:<\/span><\/p>\n

\"-\"<\/p>\n

Ao usar a similaridade em seus designs, lembre-se de que a cor \u00e9 de longe o atributo mais potente para o agrupamento, enquanto a forma e o tamanho s\u00e3o os mais fracos.<\/span><\/p>\n

Quaisquer efeitos de similaridade baseados na forma ou no tamanho ser\u00e3o substitu\u00eddos pelos efeitos de similaridade baseados na cor.<\/span><\/p>\n

\"-\"<\/p>\n

Muitos de n\u00f3s aplicamos o princ\u00edpio da similaridade intuitivamente, repetindo atributos gr\u00e1ficos como tamanho, fonte e cor em um design para criar a sensa\u00e7\u00e3o de coes\u00e3o.<\/span><\/p>\n

10. O princ\u00edpio da regi\u00e3o comum<\/span><\/h2>\n

O princ\u00edpio da regi\u00e3o comum afirma que objetos colocados na mesma \u00e1rea (geralmente cercados por uma caixa ou outra forma) s\u00e3o percebidos como agrupados.<\/span><\/p>\n

Esse efeito de fechamento \u00e9 poderoso o suficiente para superar os efeitos de similaridade e da proximidade, como exemplificado abaixo.<\/span><\/p>\n

\"-\"<\/p>\n

Esse princ\u00edpio \u00e9 particularmente \u00fatil no web design para reunir elementos que, de outra forma, s\u00e3o visualmente diferentes.<\/span><\/p>\n

Um exemplo simples \u00e9 o tema do cart\u00e3o que invadiu o mundo do design de interface do usu\u00e1rio ultimamente, como visto neste modelo de <\/span>Andrei Manolache<\/span><\/a>:<\/span><\/p>\n

\"-\"<\/p>\n

Considera\u00e7\u00f5es finais sobre a Psicologia do Design<\/span><\/h2>\n

Uma das melhores coisas que voc\u00ea pode fazer como designer \u00e9 estudar a psicologia e a percep\u00e7\u00e3o humana.<\/span><\/p>\n

Compreender a percep\u00e7\u00e3o e a interpreta\u00e7\u00e3o dos recursos visuais proporcionar\u00e1 a voc\u00ea mais controle sobre o impacto dos recursos visuais, ajudando-o a se comunicar de maneira mais eficaz em seus projetos.<\/span><\/p>\n

Esses princ\u00edpios, no entanto, n\u00e3o devem ser tomados como regras r\u00edgidas, nem como a palavra final.<\/span><\/p>\n

Em vez disso, eles devem ser usados como <\/span>ferramentas e orienta\u00e7\u00f5es<\/b> para ajud\u00e1-lo a criar recursos visuais mais claros, mais atraentes e que geram convers\u00f5es com a maior efici\u00eancia poss\u00edvel.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Ao entender o funcionamento do c\u00e9rebro humano, os designers podem aprender a aproveitar a percep\u00e7\u00e3o humana para desencadear mudan\u00e7as comportamentais. Assim, podemos usar os princ\u00edpios b\u00e1sicos da psicologia para tomar decis\u00f5es mais informadas, garantindo que nossos designs n\u00e3o sejam apenas atraentes, mas tamb\u00e9m eficazes. Neste artigo, analisaremos os dez princ\u00edpios psicol\u00f3gicos mais importantes a ter […]<\/p>\n","protected":false},"author":510,"featured_media":9177,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[127],"tags":[],"class_list":["post-9176","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"lang":"pt","translations":{"pt":9176},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/9176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/users\/510"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/comments?post=9176"}],"version-history":[{"count":0,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/9176\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media\/9177"}],"wp:attachment":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media?parent=9176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/categories?post=9176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/tags?post=9176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}