{"id":16266,"date":"2019-09-11T18:53:11","date_gmt":"2019-09-11T21:53:11","guid":{"rendered":"http:\/\/aledesigner.com.br\/?p=16266"},"modified":"2026-04-18T19:18:37","modified_gmt":"2026-04-18T22:18:37","slug":"como-a-psicologia-pode-melhorar-o-design-das-interfaces","status":"publish","type":"post","link":"https:\/\/agtdev3.com.br\/ale\/como-a-psicologia-pode-melhorar-o-design-das-interfaces\/","title":{"rendered":"Como a psicologia pode melhorar o design das interfaces"},"content":{"rendered":"<p>Fazemos uso de muitos aplicativos para dispositivos m\u00f3veis, como gerenciadores de tarefas, produtividade e de planejamentos que oferecem diversos recursos. Podemos n\u00e3o perceber, mas as leis da psicologia desempenham um papel importante na nossa experi\u00eancia com um aplicativo. Elas servem como guia, juntamente com conceitos de design visual, pra gerar um produto funcional e que satisfa\u00e7a as expectativas do usu\u00e1rio.<\/p>\n<p>Conforme documentado em <a href=\"https:\/\/lawsofux.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Laws of UX<\/a> por <a href=\"https:\/\/jonyablonski.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jon Yablonski<\/a>, existem 15 regras que devem ser utilizadas para o desenvolvimento de interfaces, e neste artigo, mostrarei como algumas dessas leis podem ser aplicadas para interfaces em dispositivos m\u00f3veis.<\/p>\n<p>&nbsp;<\/p>\n<h3>Lei de Fitts<\/h3>\n<p>\u201cO tempo para interagir com um alvo \u00e9 relacionado a dist\u00e2ncia e tamanho dele\u201d. Para os elementos serem facilmente selecion\u00e1veis, eles devem ser posicionados perto dos usu\u00e1rios. Esta lei aplica-se especialmente aos bot\u00f5es, onde o objetivo \u00e9 facilitar a localiza\u00e7\u00e3o e sele\u00e7\u00e3o.<\/p>\n<p>Um aplicativo que segue essa lei corretamente \u00e9 o Gmail. Pode-se perceber que o bot\u00e3o para escrever um novo e-mail fica posicionado na parte de baixo da tela, ao alcance dos polegares. A cor do bot\u00e3o tamb\u00e9m cria um bom contraste com os outros elementos, atraindo a aten\u00e7\u00e3o do usu\u00e1rio para ele.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16271 alignnone\" src=\"http:\/\/aledesigner.com.br\/wp-content\/uploads\/2019\/02\/interface-do-gmail.jpg\" alt=\"\" width=\"274\" height=\"488\" \/><\/p>\n<p style=\"text-align: left;\">Interface do Gmail<\/p>\n<p>&nbsp;<\/p>\n<h3>Lei de Hick<\/h3>\n<p>\u201cO tempo que usu\u00e1rio leva para tomar uma decis\u00e3o aumenta com o n\u00famero e a complexidade das escolhas mostradas para ele\u201d. Mais op\u00e7\u00f5es resultam em mais tempo para pensar sobre essas escolhas e tomar uma decis\u00e3o, por isso \u00e9 recomendado simplificar as op\u00e7\u00f5es para o usu\u00e1rio dividindo tarefas complexas em etapas menores.<\/p>\n<p>Pelo fato de celulares terem telas menores, essa lei pode ser aplicada para aplicativos de e-commerce e viagens, onde s\u00e3o necess\u00e1rios uma s\u00e9rie de passos para concluir uma compra. Nesse caso, \u00e9 preciso ter um indicador na interface para que o usu\u00e1rio saiba em qual etapa do processo ele se encontra.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16270 alignnone\" src=\"http:\/\/aledesigner.com.br\/wp-content\/uploads\/2019\/02\/interface-do-aplicativo-decolar.jpg\" alt=\"\" width=\"304\" height=\"460\" \/><\/p>\n<p style=\"text-align: left;\">Interface do aplicativo Decolar.com<\/p>\n<p>&nbsp;<\/p>\n<h3>Lei de Jakob<\/h3>\n<p>\u201cOs usu\u00e1rios que tem experi\u00eancia em outras interfaces, desejam que a sua funcione de uma maneira parecida com a que eles j\u00e1 conhecem\u201d. Isso significa que eles preferem aplicativos semelhantes aos que utilizam e j\u00e1 est\u00e3o familiarizados. Por isso, podemos simplificar o processo de aprendizado fornecendo padr\u00f5es de design familiares. Um padr\u00e3o que muitos aplicativos utilizam \u00e9 o menu hamburger para itens de navega\u00e7\u00e3o, que \u00e9 comumente posicionado ao lado esquerdo da tela.<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16275 size-full\" src=\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2019\/02\/interfaces-dos-aplicativos-da-submarino-e-uber-e1776550408981.jpg\" alt=\"\" width=\"330\" height=\"557\" srcset=\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2019\/02\/interfaces-dos-aplicativos-da-submarino-e-uber-e1776550408981.jpg 330w, https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2019\/02\/interfaces-dos-aplicativos-da-submarino-e-uber-e1776550408981-178x300.jpg 178w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/p>\n<p>Interface do aplicativo da Uber<\/p>\n<p>&nbsp;<\/p>\n<h3>Lei de Pr\u00e4gnanz<\/h3>\n<p>\u201cOs usu\u00e1rios percebem formas complexas da maneira mais simples poss\u00edvel, porque \u00e9 a interpreta\u00e7\u00e3o que requer menos esfor\u00e7o mental\u201d. Interfaces que possuem elementos visuais mais simples, tamb\u00e9m s\u00e3o mais f\u00e1ceis de serem utilizadas e cumprem com seu prop\u00f3sito.<\/p>\n<p>Essa lei tamb\u00e9m \u00e9 conhecida como Lei da Simplicidade e \u00e9 bastante aplicada para aplicativos m\u00f3veis, pois seguindo esses padr\u00f5es \u00e9 poss\u00edvel construir uma interface agrad\u00e1vel e com uma boa usabilidade. O aplicativo da Nubank sabe muito bem como utilizar a simplicidade a seu favor, focando em intera\u00e7\u00f5es que surpreendem os usu\u00e1rios.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16269 alignnone\" src=\"http:\/\/aledesigner.com.br\/wp-content\/uploads\/2019\/02\/interface-do-aplicativo-da-nubank.jpg\" alt=\"\" width=\"300\" height=\"584\" \/><\/p>\n<p style=\"text-align: left;\">Interface do aplicativo da Nubank<\/p>\n<p>&nbsp;<\/p>\n<h3>Lei da Proximidade<\/h3>\n<p>\u201cObjetos pr\u00f3ximos tendem a se unir e, na experi\u00eancia do usu\u00e1rio, s\u00e3o entendidos como membros do mesmo grupo\u201d. Essa lei enfatiza que se voc\u00ea est\u00e1 lidando com um grupo de dados, todos os dados que entendemos que correspondem ao mesmo grupo devem estar juntos, e para os dados diferentes, deve haver uma separa\u00e7\u00e3o entre eles. Em aplicativos como o Google Play, onde temos uma quantidade maior de dados relacionados, eles s\u00e3o agrupados lado a lado como uma mesma categoria.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16272 alignnone\" src=\"http:\/\/aledesigner.com.br\/wp-content\/uploads\/2019\/02\/interface-do-google-play.jpg\" alt=\"\" width=\"316\" height=\"526\" \/><\/p>\n<p style=\"text-align: left;\">Interface do Google Play<\/p>\n<p>&nbsp;<\/p>\n<h3>Lei da Similaridade<\/h3>\n<p>\u201cOs elementos que parecem semelhantes s\u00e3o percebidos como uma unidade\u201d. Ent\u00e3o, elementos que possuem, por exemplo, a mesma cor, formato ou outras caracter\u00edsticas comuns s\u00e3o vistos como partes do mesmo conjunto. Essa lei pode ser muito \u00fatil para agrupar elementos que pertencem a uma categoria e garantir a conformidade entre os elementos de todo o aplicativo. Em uma das atualiza\u00e7\u00f5es do Instagram, foi adicionada uma lista de categorias para as postagens, dando liberdade para que o usu\u00e1rio escolha o conte\u00fado que ele deseja ver.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-18854\" src=\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2019\/09\/lei-da-similaridade-instagram-300x182.jpg\" alt=\"\" width=\"300\" height=\"182\" srcset=\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2019\/09\/lei-da-similaridade-instagram-300x182.jpg 300w, https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2019\/09\/lei-da-similaridade-instagram-768x467.jpg 768w, https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2019\/09\/lei-da-similaridade-instagram.jpg 800w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: left;\">Interface do Instagram<\/p>\n<p>&nbsp;<\/p>\n<h3>Efeito Von Restorff<\/h3>\n<p>\u201cQuando v\u00e1rios objetos similares est\u00e3o presentes, o que se diferencia \u00e9 mais prov\u00e1vel de ser lembrado\u201d. Esse efeito tamb\u00e9m \u00e9 conhecido como o Efeito de Isola\u00e7\u00e3o e \u00e9 aplicado em interfaces quando precisamos destacar alguma funcionalidade, e tamb\u00e9m para mostrar uma nova mensagem ou notifica\u00e7\u00e3o para o usu\u00e1rio. Um fator que auxilia a aplica\u00e7\u00e3o dessa lei \u00e9 a mudan\u00e7a de cor ou estilo em algum local da interface. Nas notifica\u00e7\u00f5es dos aplicativos, geralmente \u00e9 utilizada a cor vermelha em cima do \u00edcone para atrair a aten\u00e7\u00e3o do usu\u00e1rio para algo novo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16274 alignnone\" src=\"http:\/\/aledesigner.com.br\/wp-content\/uploads\/2019\/02\/interface-do-zen-ui.jpg\" alt=\"\" width=\"300\" height=\"461\" \/><\/p>\n<p style=\"text-align: left;\">Interface do ZenUI<\/p>\n<p>&nbsp;<\/p>\n<h3>Posi\u00e7\u00e3o Serial<\/h3>\n<p>\u201cEntre os elementos de uma s\u00e9rie, os usu\u00e1rios sempre se lembrar\u00e3o melhor do primeiro e do \u00faltimo.\u201d Essa \u00e9 a raz\u00e3o pela qual vemos que na barra de navega\u00e7\u00e3o dos aplicativos, as a\u00e7\u00f5es mais importantes s\u00e3o colocadas \u00e0 esquerda ou \u00e0 direita, introduzindo elementos como in\u00edcio ou perfil levando em considera\u00e7\u00e3o a posi\u00e7\u00e3o serial.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16276 alignnone\" src=\"http:\/\/aledesigner.com.br\/wp-content\/uploads\/2019\/02\/interfaces-dos-aplicativos-do-linkedin-e-instagram.jpg\" alt=\"\" width=\"740\" height=\"522\" \/><\/p>\n<p style=\"text-align: left;\">Interfaces dos aplicativos do Linkedin e Instagram<\/p>\n<p>&nbsp;<\/p>\n<h3>Lei de Miller<\/h3>\n<p>\u201cUma pessoa em m\u00e9dia s\u00f3 pode manter 7 (com margem de 2 para mais ou menos) itens em sua mem\u00f3ria de trabalho\u201d. Para facilitar a lembran\u00e7a dos elementos, pode-se organiza-los em grupos com uma quantidade menor de itens, como \u00e9 o caso das listas de s\u00e9ries do aplicativo da Netflix, onde temos uma quantidade de itens reduzida e f\u00e1cil de ser lembrada.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16268 alignnone\" src=\"http:\/\/aledesigner.com.br\/wp-content\/uploads\/2019\/02\/interface-do-aplicativo-da-netflix.jpg\" alt=\"\" width=\"245\" height=\"434\" \/><\/p>\n<p style=\"text-align: left;\">Interface do aplicativo da Netflix<\/p>\n<p>&nbsp;<\/p>\n<h3>Conclus\u00e3o<\/h3>\n<p>Entender como o usu\u00e1rio pensa e se comporta \u00e9 primordial, pois possibilita o desenvolvimento de um produto que ofere\u00e7a uma boa experi\u00eancia de uso, atraindo o usu\u00e1rio a utiliz\u00e1-lo mais vezes. Com a competitividade atual de aplicativos no mercado, muitas vezes uma experi\u00eancia de uso melhor \u00e9 um fator crucial para a escolha e fideliza\u00e7\u00e3o do usu\u00e1rio. Tendo um desenvolvimento com base nessas leis, pode-se garantir que o aplicativo gere valor para o usu\u00e1rio e atinja suas expectativas.<\/p>\n<p>&nbsp;<\/p>\n<p>&#8230;<\/p>\n<p>Fonte (adaptado):<br \/>\n<a href=\"https:\/\/medium.com\/ui-lab-school\/as-leis-da-psicologia-voltadas-para-ui-ux-design-em-aplicativos-m%C3%B3veis-30f06e1de2d3\" target=\"_blank\" rel=\"noopener noreferrer\">UI Lab<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fazemos uso de muitos aplicativos para dispositivos m\u00f3veis, como gerenciadores de tarefas, produtividade e de planejamentos que oferecem diversos recursos&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":16278,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[58],"tags":[10,5,31,42,18,19],"class_list":["post-16266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-criacao","tag-design-grafico","tag-home-page","tag-psicologia","tag-user-experience","tag-user-interface"],"acf":[],"_links":{"self":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts\/16266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/comments?post=16266"}],"version-history":[{"count":10,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts\/16266\/revisions"}],"predecessor-version":[{"id":18855,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts\/16266\/revisions\/18855"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/media\/16278"}],"wp:attachment":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/media?parent=16266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/categories?post=16266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/tags?post=16266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}