{"id":4486,"date":"2021-10-24T17:32:02","date_gmt":"2021-10-24T14:32:02","guid":{"rendered":"https:\/\/snov.io\/glossary\/?p=4486"},"modified":"2025-04-17T11:58:31","modified_gmt":"2025-04-17T08:58:31","slug":"interface-do-usuario-ui","status":"publish","type":"post","link":"https:\/\/snov.io\/glossary\/br\/interface-do-usuario-ui\/","title":{"rendered":"Interface do Usu\u00e1rio (UI)"},"content":{"rendered":"\n<p>Nos \u00faltimos anos, o design da interface do usu\u00e1rio (UI Design) se tornou um dos campos mais inovadores e criativos. E conhecendo os princ\u00edpios b\u00e1sicos de uma interface de usu\u00e1rio eficaz e atraente, voc\u00ea pode us\u00e1-la como uma ferramenta poderosa para <a href=\"https:\/\/snov.io\/glossary\/br\/geracao-de-leads\/\"><strong>gera\u00e7\u00e3o<\/strong><\/a> e reten\u00e7\u00e3o de usu\u00e1rios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"o-que\"><strong>O que \u00e9 uma interface de usu\u00e1rio?<\/strong><\/h2>\n\n\n\n<p>A interface do usu\u00e1rio &#8211; <em>user interface<\/em> (UI) &#8211; \u00e9 o espa\u00e7o onde os usu\u00e1rios interagem com um site, programa, aplicativo, etc. Isso pode incluir telas de exibi\u00e7\u00e3o, um mouse, teclados e a apar\u00eancia de uma \u00e1rea de trabalho.<\/p>\n\n\n\n<p>O design da interface do usu\u00e1rio deve ser o mais amig\u00e1vel poss\u00edvel para pessoas com defici\u00eancia. O objetivo \u00e9 criar uma interface suave, intuitiva e visualmente agrad\u00e1vel. As pessoas podem nem mesmo perceber ativamente como uma boa UI \u00e9 f\u00e1cil de usar, mas sentir\u00e3o isso, o que as far\u00e1 voltar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"elementos\"><strong>Quais s\u00e3o os elementos da interface do usu\u00e1rio?<\/strong><\/h2>\n\n\n\n<p>Os elementos da IU ajudam as pessoas a navegar. Eles geralmente se enquadram em uma das quatro categorias:<\/p>\n\n\n\n<ul>\n<li><strong>Controles de entrada<\/strong>. Esses elementos de UI interativos permitem que os usu\u00e1rios insiram os dados no sistema. Voc\u00ea pode usar uma ampla variedade de controles de entrada, como bot\u00f5es, campos de texto, alternadores, caixas de sele\u00e7\u00e3o e muito mais.&nbsp;<\/li>\n\n\n\n<li><strong>Componentes de navega\u00e7\u00e3o<\/strong>. Elementos como controle deslizante, breadcrumbs, campo de pesquisa, pagina\u00e7\u00e3o, tags e \u00edcones ajudam as pessoas a navegar por um site ou produto.&nbsp;<\/li>\n\n\n\n<li><strong>Componentes informativos<\/strong>. Os elementos da UI que ajudam a compartilhar informa\u00e7\u00f5es com os usu\u00e1rios incluem, mas n\u00e3o se limitam a: notifica\u00e7\u00f5es, barras de progresso, dicas de ferramentas, caixas de mensagens e janelas pop-up.<\/li>\n\n\n\n<li><strong>Containers<\/strong>. Eles mant\u00eam os elementos da p\u00e1gina juntos.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"principios\"><strong>Quais s\u00e3o os princ\u00edpios de um bom UI Design?<\/strong><\/h2>\n\n\n\n<p>A UI Design \u00e9 uma parte da <a href=\"https:\/\/snov.io\/glossary\/br\/experiencia-do-usuario-ux\/\"><strong>experi\u00eancia do usu\u00e1rio (UX)<\/strong><\/a>, que tamb\u00e9m deve ser bem pensada e bem projetada, caso contr\u00e1rio, nenhum esfor\u00e7o para uma interface do usu\u00e1rio excelente ir\u00e1 consert\u00e1-la e vice-versa. Aqui est\u00e3o algumas diretrizes para UI design:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"conheca\"><strong>Conhe\u00e7a seus usu\u00e1rios<\/strong><\/h3>\n\n\n\n<p>Tudo se origina de conhecer seus dados demogr\u00e1ficos, <a href=\"https:\/\/snov.io\/blog\/br\/como-determinar-os-pontos-de-dor-do-seu-cliente\/\"><strong>dores do cliente<\/strong><\/a>, o que eles querem e o que os impede de atingir seus objetivos. Com essas informa\u00e7\u00f5es em m\u00e3os, voc\u00ea pode encontrar uma solu\u00e7\u00e3o que atenda \u00e0s necessidades dos seus usu\u00e1rios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"mantenha\"><strong>Mantenha as interfaces simples e organizadas<\/strong><\/h3>\n\n\n\n<p>Rotule todos os \u00edcones e explique como o usu\u00e1rio pode interagir com cada um dos objetos. Por exemplo, um pequeno \u00edcone de lupa com o r\u00f3tulo \u201c<em>passe o mouse para ampliar<\/em>\u201d levar\u00e1 o usu\u00e1rio a saber como visualizar o produto em um tamanho maior.<\/p>\n\n\n\n<p>A Amazon \u00e9 um bom exemplo de um design de interface do usu\u00e1rio eficaz, especialmente considerando que h\u00e1 muito para mostrar em cada p\u00e1gina. A p\u00e1gina inicial est\u00e1 bem identificada, as p\u00e1ginas de pesquisa t\u00eam todas as informa\u00e7\u00f5es pertinentes sob a imagem do produto e as p\u00e1ginas do produto s\u00e3o visualmente organizadas para que seus olhos sejam direcionados naturalmente para o que voc\u00ea deseja ver. A Amazon poderia facilmente ser uma bagun\u00e7a, mas um bom design de interface do usu\u00e1rio n\u00e3o permite.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/03\/amazon-ui-1024x451.png\" alt=\"User interface example\" class=\"wp-image-1650\" style=\"width:680px\" srcset=\"https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/03\/amazon-ui-1024x451.png 1024w, https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/03\/amazon-ui-300x132.png 300w, https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/03\/amazon-ui-768x338.png 768w, https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/03\/amazon-ui-1536x677.png 1536w, https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/03\/amazon-ui.png 1904w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">(<a href=\"https:\/\/www.amazon.com\/\"><strong><em>Fonte<\/em><\/strong><\/a>)<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"consistente\"><strong>Mantenha cada a\u00e7\u00e3o consistente<\/strong><\/h3>\n\n\n\n<p>Se a imagem de um produto \u00e9 ampliada ao passar o mouse sobre ele em uma p\u00e1gina, fa\u00e7a com que isso ocorra em todas as p\u00e1ginas do produto. Isso elimina todo o trabalho de adivinha\u00e7\u00e3o dos usu\u00e1rios. Voc\u00ea quer que eles deslizem pelo seu site ou programa, sem se confundirem com um design inconsistente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"proposital\"><strong>Seja proposital no layout da p\u00e1gina<\/strong><\/h3>\n\n\n\n<p>Estruture seu site ou programa com base na import\u00e2ncia. Considere as rela\u00e7\u00f5es espaciais entre os itens na p\u00e1gina e chame a aten\u00e7\u00e3o para as informa\u00e7\u00f5es mais importantes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"legibilidade\"><strong>Garanta a legibilidade<\/strong><\/h3>\n\n\n\n<p>Concentre-se no texto e no design de cores, ou seu site ou programa pode se tornar uma bagun\u00e7a confusa. A escolha da fonte, a espessura da fonte, as cores, o alinhamento, a hierarquia e muitos outros aspectos do design do texto podem enviar uma mensagem forte com apenas algumas palavras, se usadas corretamente. Ter um designer gr\u00e1fico para este aspecto da UI \u00e9 uma boa ideia.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"funcao-principal\"><strong>Tenha uma fun\u00e7\u00e3o principal por p\u00e1gina<\/strong><\/h3>\n\n\n\n<p>Uma p\u00e1gina pode se tornar muito confusa se houver muitas tarefas em execu\u00e7\u00e3o. Escolha uma tarefa por p\u00e1gina para focar e guiar os usu\u00e1rios, mostrando-lhes as a\u00e7\u00f5es preferidas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"consistencia\"><strong>Foco na consist\u00eancia da marca<\/strong><\/h3>\n\n\n\n<p>Sua marca tem cores associadas a ela? A Starbucks tem, a Target tem e a Snov.io tamb\u00e9m! Use essas cores de forma consistente em seu site, aplicativo ou programa. Use seu logotipo de forma consistente tamb\u00e9m.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/app.snov.io\/register?lang=en&amp;signup_source=glossary&amp;signup_page=snov.io%2Fglossary%2Fuser-interface-ui&amp;cta_type=banner\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"317\" src=\"https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/01\/drips-2-1024x317.png\" alt=\"email drip campaigns\" class=\"wp-image-1098\" style=\"width:680px\" srcset=\"https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/01\/drips-2-1024x317.png 1024w, https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/01\/drips-2-300x93.png 300w, https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/01\/drips-2-768x238.png 768w, https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/01\/drips-2-1536x476.png 1536w, https:\/\/snov.io\/glossary\/wp-content\/uploads\/2020\/01\/drips-2.png 2028w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"deficiencias\"><strong>Defici\u00eancias e interface do usu\u00e1rio&nbsp;<\/strong><\/h2>\n\n\n\n<p>Pessoas com defici\u00eancia visual, f\u00edsica, cognitiva e auditiva podem estar usando seu site ou programa. \u00c9 por isso que acomod\u00e1-los \u00e9 importante na experi\u00eancia do usu\u00e1rio, e seu UI design deve facilitar o uso para eles. Uma interface inacess\u00edvel \u00e9 uma maneira segura de perder clientes com defici\u00eancia.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"def-visual\"><strong>Defici\u00eancia visual<\/strong><\/h3>\n\n\n\n<p>Daltonismo, cegueira legal, miopia, catarata &#8211; a lista \u00e9 intermin\u00e1vel para defici\u00eancias visuais. No final das contas, duas coisas podem fazer uma grande diferen\u00e7a: Aumentar o tamanho e usar alto contraste.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"def-fisica\"><strong>Defici\u00eancia f\u00edsica<\/strong><\/h3>\n\n\n\n<p>Parkinson, esclerose m\u00faltipla e defici\u00eancia motora relacionada \u00e0 idade s\u00e3o apenas algumas das defici\u00eancias f\u00edsicas que podem dificultar o uso de um desktop, tablet e smartphone. Maneiras de ajudar esses usu\u00e1rios incluem criar bot\u00f5es grandes e f\u00e1ceis de clicar, implementar uma op\u00e7\u00e3o de controle de teclado para aqueles que n\u00e3o podem usar um mouse ou trackpad e permitir a voz e outras formas de tecnologia de controle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"comprometimento\"><strong>Comprometimento cognitivo&nbsp;<\/strong><\/h3>\n\n\n\n<p>A dislexia \u00e9 um comprometimento cognitivo comum, mas infelizmente n\u00e3o \u00e9 muito atendido. Existem fontes compat\u00edveis com a dislexia que voc\u00ea pode usar em seu site. Por exemplo, fontes populares como Arial, Century Gothic, Comic Sans, Verdana, Tahoma e Trebuchet s\u00e3o todas comumente aceitas como amig\u00e1veis \u200b\u200b\u00e0 dislexia.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"def-auditiva\"><strong>Defici\u00eancia auditiva&nbsp;<\/strong><\/h3>\n\n\n\n<p>Existem muitos motivos pelos quais uma pessoa pode ser surda, bem como v\u00e1rios n\u00edveis de surdez, mas tudo se resume a uma coisa &#8211; se voc\u00ea tiver v\u00eddeos em seu site, precisar\u00e1 usar legendas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Resumindo<\/strong><\/h2>\n\n\n\n<p>Uma interface do usu\u00e1rio eficaz se faz com um design atraente, claro e consistente que faz com que as pessoas queiram continuar a experiment\u00e1-la. O design orientado ao usu\u00e1rio leva a uma boa experi\u00eancia do usu\u00e1rio, resultando em mais <a href=\"https:\/\/snov.io\/glossary\/br\/conversao\/\"><strong>convers\u00f5es<\/strong><\/a> e maior <a href=\"https:\/\/snov.io\/glossary\/br\/receita\/\"><strong>receita<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A interface do usu\u00e1rio &#8211; user interface (UI) &#8211; \u00e9 o espa\u00e7o onde os usu\u00e1rios interagem com um site, programa, aplicativo, etc. Isso pode incluir telas de exibi\u00e7\u00e3o, um mouse, teclados e a apar\u00eancia de uma \u00e1rea de trabalho.<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[312],"tags":[267,167,265,269],"_links":{"self":[{"href":"https:\/\/snov.io\/glossary\/wp-json\/wp\/v2\/posts\/4486"}],"collection":[{"href":"https:\/\/snov.io\/glossary\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/snov.io\/glossary\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/snov.io\/glossary\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/snov.io\/glossary\/wp-json\/wp\/v2\/comments?post=4486"}],"version-history":[{"count":1,"href":"https:\/\/snov.io\/glossary\/wp-json\/wp\/v2\/posts\/4486\/revisions"}],"predecessor-version":[{"id":7960,"href":"https:\/\/snov.io\/glossary\/wp-json\/wp\/v2\/posts\/4486\/revisions\/7960"}],"wp:attachment":[{"href":"https:\/\/snov.io\/glossary\/wp-json\/wp\/v2\/media?parent=4486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/snov.io\/glossary\/wp-json\/wp\/v2\/categories?post=4486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/snov.io\/glossary\/wp-json\/wp\/v2\/tags?post=4486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}