{"id":26807,"date":"2018-06-14T17:33:40","date_gmt":"2018-06-14T20:33:40","guid":{"rendered":"https:\/\/devlooper.blog.br\/\/front-end\/5-melhores-praticas-de-ux-design-no-desenvolvimento-de-sites\/"},"modified":"2022-08-31T16:19:09","modified_gmt":"2022-08-31T19:19:09","slug":"5-melhores-praticas-de-ux-design-no-desenvolvimento-de-sites","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/5-melhores-praticas-de-ux-design-no-desenvolvimento-de-sites\/","title":{"rendered":"5 melhores pr\u00e1ticas de UX design no desenvolvimento de sites"},"content":{"rendered":"<p>Durante o desenvolvimento de sites, \u00e9 fundamental que haja um equil\u00edbrio entre a apresenta\u00e7\u00e3o do conte\u00fado e o bom funcionamento dos elementos interativos. Essa \u00e9 uma das propostas do UX Design, um campo dedicado a entregar a melhor experi\u00eancia para o usu\u00e1rio e determinante no sucesso de produtos digitais.<\/p>\n<p>Continue a leitura e confira cinco das melhores pr\u00e1ticas para voc\u00ea criar p\u00e1ginas web de destaque, com funcionamento simples e navega\u00e7\u00e3o agrad\u00e1vel.<\/p>\n<h2>1. Pense na responsividade<\/h2>\n<p>Com a populariza\u00e7\u00e3o dos dispositivos m\u00f3veis, os usu\u00e1rios est\u00e3o cada vez mais habituados a acessar a internet de seus smartphones e tablets. Por isso, eles j\u00e1 esperam que os sites estejam preparados para funcionar corretamente tamb\u00e9m em aparelhos de tela pequena.<\/p>\n<p>A maneira mais recomendada de os desenvolvedores garantirem isso \u00e9 por meio da responsividade \u2014 um conjunto de t\u00e9cnicas e configura\u00e7\u00f5es que permitem a um site se adaptar \u00e0s dimens\u00f5es da tela do dispositivo.<\/p>\n<p>Com ela, voc\u00ea evita que os usu\u00e1rios se afastem dos seus sites devido a experi\u00eancias ruins. Ampliar a vis\u00e3o da tela para poder enxergar uma fonte muito pequena ou rolar a p\u00e1gina indefinidamente at\u00e9 encontrar o que precisa s\u00e3o algumas raz\u00f5es para frustra\u00e7\u00e3o.<\/p>\n<p>Vale lembrar que o Google tamb\u00e9m d\u00e1 import\u00e2ncia para sites preparados para aparelhos m\u00f3veis. Nas buscas realizadas com esses gadgets, o mecanismo de busca considera essa compatibilidade como um dos fatores de posicionamento. Isso significa que as suas p\u00e1ginas dificilmente aparecer\u00e3o entre os primeiros lugares nessas pesquisas se tiverem uma experi\u00eancia ruim para quem utiliza um smartphone ou tablet.<\/p>\n<h2>2. Mantenha o design simples e funcional<\/h2>\n<p>Por mais que seja interessante criar um layout inovador para se destacar diante da concorr\u00eancia, \u00e9 importante ter cuidado para n\u00e3o exagerar. Existem certos padr\u00f5es que as pessoas j\u00e1 esperam encontrar assim que entram no site.<\/p>\n<p>Alguns exemplos s\u00e3o:<\/p>\n<ul>\n<li>informa\u00e7\u00f5es de contato no rodap\u00e9 da p\u00e1gina ou em uma p\u00e1gina com o t\u00edtulo \u201cContato\u201d ou similar;<\/li>\n<li>logo no canto superior esquerdo da p\u00e1gina;<\/li>\n<li>campo para pesquisa de termos dentro do site, no canto superior direito;<\/li>\n<li>links com uma cor distinta do texto convencional.<\/li>\n<\/ul>\n<p>Qualquer tentativa de fugir muito dessas e de outras conven\u00e7\u00f5es pode deixar seus sites mais complexos e dif\u00edceis de usar \u2014 algo que o cliente que lhe contratou\u00a0certamente n\u00e3o vai querer.<\/p>\n<p>Por esse motivo, uma medida bastante relevante \u00e9 procurar entender melhor quais s\u00e3o os objetivos do p\u00fablico dele com o site. Pergunte quais s\u00e3o as caracter\u00edsticas desses usu\u00e1rios, como o site poder\u00e1 ajud\u00e1-los e o que eles esperam encontrar por l\u00e1.<\/p>\n<p>Se o seu cliente n\u00e3o souber como responder a essas quest\u00f5es, sugira que ele fa\u00e7a pesquisas com esse prop\u00f3sito \u2014 o que nos leva \u00e0 pr\u00f3xima dica.<\/p>\n<h2>3. Estimule a realiza\u00e7\u00e3o de pesquisas sobre o usu\u00e1rio<\/h2>\n<p>Existem diversas formas de fazer pesquisas sobre as caracter\u00edsticas do p\u00fablico destinado a usar o site, mas elas podem ser extremamente caras \u2014 como \u00e9 o caso de pesquisas de mercado. Sendo assim, proponha ao seu cliente o uso de ferramentas online como os\u00a0<a href=\"https:\/\/www.google.com\/forms\/about\/\">Formul\u00e1rios do Google<\/a>\u00a0para fazer enquetes e ouvir a opini\u00e3o dos consumidores.<\/p>\n<p>Nesse tipo de pesquisa, \u00e9 recomend\u00e1vel fazer perguntas que sigam esta linha:<\/p>\n<ul>\n<li>Em uma escala de 0 a 10, qual \u00e9 a probabilidade de voc\u00ea indicar o produto ou servi\u00e7o a um amigo?<\/li>\n<li>Quais caracter\u00edsticas do produto ou servi\u00e7o s\u00e3o mais importantes para voc\u00ea?<\/li>\n<li>O que voc\u00ea sugere para deixar o produto ou servi\u00e7o ainda melhor?<\/li>\n<li>O que voc\u00ea mais gosta do atendimento quando entra em contato com a nossa empresa? E o que menos gosta?<\/li>\n<\/ul>\n<p>Depois que o seu cliente reunir e avaliar todos esses dados, o ideal \u00e9 que voc\u00eas extraiam juntos as informa\u00e7\u00f5es que possam ser mais pertinentes para o desenvolvimento do site. S\u00e3o as necessidades e anseios do p\u00fablico que ajudar\u00e3o a moldar as funcionalidades e a forma de uso das p\u00e1ginas web.<\/p>\n<h2>4. Tenha aten\u00e7\u00e3o \u00e0 clareza das informa\u00e7\u00f5es<\/h2>\n<p>Para que os visitantes de fato se mantenham engajados com os sites que voc\u00ea desenvolver, \u00e9 essencial que eles n\u00e3o se sintam confusos durante a navega\u00e7\u00e3o. Por isso, garanta que as informa\u00e7\u00f5es tenham uma linguagem clara e que permitam ao usu\u00e1rio entender quais tipos de tarefas ele poder\u00e1 fazer dentro do site.<\/p>\n<p>Vale lembrar que a clareza de informa\u00e7\u00f5es n\u00e3o se refere apenas ao conte\u00fado textual. A forma como os elementos se distribuem visualmente na tela tamb\u00e9m interfere no modo que os visitantes entendem um site.<\/p>\n<p>Sendo assim, avalie se a hierarquia entre os componentes est\u00e1 compreens\u00edvel \u2014 se \u00e9 poss\u00edvel distinguir qual elemento \u00e9 mais importante que o outro \u2014, se o tamanho da fonte \u00e9 confort\u00e1vel para a leitura, se a cor do texto tem um bom contraste com o fundo, se o menu est\u00e1 facilmente acess\u00edvel etc.<\/p>\n<h2>5. Cuide dos CTAs<\/h2>\n<p>Uma chamada para a\u00e7\u00e3o \u2014 ou call-to-action (CTA) \u2014 \u00e9 uma mensagem, bot\u00e3o, imagem ou outro elemento que induza o visitante a tomar determinadas decis\u00f5es dentro do site, al\u00e9m de servirem como facilitador para indicar ao usu\u00e1rio o que ele pode fazer.<\/p>\n<p>Para que eles de fato chamem a aten\u00e7\u00e3o do visitante, devem se destacar dentro da p\u00e1gina, mas sem perder a consist\u00eancia com o design em geral. Nessas chamadas, o mais indicado \u00e9 usar textos curtos, diretos e com verbos que motivem a pessoa a agir, como em \u201cLeia este ebook\u201d, \u201cConhe\u00e7a a solu\u00e7\u00e3o\u201d ou \u201cAssine a newsletter\u201d.<\/p>\n<p>Por isso, vale a pena testar formas, cores e textos distintos para saber o que funciona melhor para o p\u00fablico do site.<\/p>\n<p>Podemos perceber, portanto, que existem diversas maneiras de melhorar o UX Design dos seus sites e que incorporar essas pr\u00e1ticas ao processo de desenvolvimento ser\u00e1 vital para o seu sucesso. Assim, suas p\u00e1ginas web contar\u00e3o com uma qualidade muito superior, seu trabalho ser\u00e1 mais valorizado e voc\u00ea ter\u00e1 excelentes condi\u00e7\u00f5es de aumentar sua base de clientes.<\/p>\n<p>Gostou do nosso artigo? Tem outras dicas de UX Design que considera fundamentais para a constru\u00e7\u00e3o de sites de destaque? Ent\u00e3o, compartilhe nos coment\u00e1rios o que voc\u00ea acha que todo desenvolvedor web deveria levar em conta para otimizar a experi\u00eancia do usu\u00e1rio!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Durante o desenvolvimento de sites, \u00e9 fundamental que haja um equil\u00edbrio entre a apresenta\u00e7\u00e3o do conte\u00fado e o bom funcionamento dos elementos interativos. Essa \u00e9 uma das propostas do UX Design, um campo dedicado a entregar a melhor experi\u00eancia para o usu\u00e1rio e determinante no sucesso de produtos digitais. Continue a leitura e confira cinco [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-26807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/26807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=26807"}],"version-history":[{"count":1,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/26807\/revisions"}],"predecessor-version":[{"id":36447,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/26807\/revisions\/36447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=26807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=26807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=26807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}