\u201cUm toque de anima\u00e7\u00e3o aqui<\/span>! Um pouco de estampa de chita ali<\/span>!\u201d<\/p>\n\n\n\n Mas, como \u00e9 comum com coisas que brilham, \u00e9 f\u00e1cil exagerar \u2014 especialmente se a sua criatividade est\u00e1 reduzindo a funcionalidade do seu site.<\/p>\n\n\n\n Se voc\u00ea quer vender um produto ou compartilhar alguns posts de blog<\/a><\/span>, voc\u00ea n\u00e3o est\u00e1 realmente construindo o site para voc\u00ea. S\u00e3o os visitantes do seu site que precisam estar satisfeitos com o design e a interface do usu\u00e1rio. \u00c9 a\u00ed que a Experi\u00eancia do Usu\u00e1rio (UX) entra em jogo. Manter um forte foco em UX ao construir seu site deve resultar em maiores convers\u00f5es e taxas de rejei\u00e7\u00e3o mais baixas.<\/p>\n\n\n\n Neste artigo, vou dar-lhe um curso intensivo em UX e explicar o que faz um designer de UX. Depois, vamos passar por algumas dicas sobre como reconhecer um bom design de UX quando voc\u00ea o encontrar. Finalmente, vou mostrar-lhe como usar UX para criar um site melhor<\/a> para o seu p\u00fablico. Sinta-se \u00e0 vontade para avan\u00e7ar para a se\u00e7\u00e3o que for mais ben\u00e9fica para voc\u00ea!<\/p>\n\n\n\n Pronto para discutir estrat\u00e9gias de UX? Vamos come\u00e7ar!<\/p>\n\n\n\n Resumidamente, Experi\u00eancia do Usu\u00e1rio (UX) \u00e9 como a intera\u00e7\u00e3o com a tecnologia faz o usu\u00e1rio se sentir. UX se aplica a qualquer tecnologia, desde um aplicativo at\u00e9 um console de jogos.<\/p>\n\n\n\n Quando se trata de sites, o design de UX \u00e9 sobre otimizar a intera\u00e7\u00e3o entre o usu\u00e1rio humano e a p\u00e1gina. Um site constru\u00eddo com s\u00f3lidos princ\u00edpios de UX deve deixar o usu\u00e1rio com a sensa\u00e7\u00e3o de que realizou o que veio fazer sem frustra\u00e7\u00f5es.<\/p>\n\n\n\n Isso pode fazer voc\u00ea pensar em caprichar no design visual do site. Isso pode incluir anima\u00e7\u00f5es chamativas e carross\u00e9is de imagens gigantes<\/a>. Se voc\u00ea se lembra do MySpace, provavelmente ainda tem pesadelos com glitter animado e vers\u00f5es MIDI de m\u00fasicas do Blink-182 . . . credo<\/span>.<\/p>\n\n\n Mas o design de UX tem muito menos a ver com a apar\u00eancia do site do que com o uso que dele \u00e9 feito. Para ser eficaz, seu site deve ser uma experi\u00eancia completa \u2014 n\u00e3o apenas palavras e imagens em uma p\u00e1gina.<\/p>\n\n\n\n Os usu\u00e1rios esquecer\u00e3o dados, como quanto pagaram pelos produtos que encomendaram. No entanto, a experi\u00eancia de encomendar deve ser agrad\u00e1vel e sem esfor\u00e7o. Essa experi\u00eancia permanecer\u00e1 com eles, aumentando as chances de que eles comprem de voc\u00ea repetidas vezes.<\/p>\n\n\n\n Se o seu site oferecer uma UX ruim, voc\u00ea poder\u00e1 ver o resultado oposto. Usu\u00e1rios que ficam estressados ou irritados ao usar seu site provavelmente ir\u00e3o para um dos sites de seus concorrentes. Eles t\u00eam muitas op\u00e7\u00f5es e nenhum motivo para retornar a um site que \u00e9 dif\u00edcil de usar.<\/p>\n\n\n\n Se voc\u00ea ainda n\u00e3o est\u00e1 convencido de que a UX \u00e9 importante para o seu site, aqui est\u00e3o algumas estat\u00edsticas chave:<\/p>\n\n\n\n Tudo isso serve para ilustrar a import\u00e2ncia de um bom design de UX ao construir um site.<\/p>\n\n\n A UX \u00e9 t\u00e3o vital que existe uma profiss\u00e3o inteira dedicada a otimiz\u00e1-la. As tarefas di\u00e1rias de um designer de UX variar\u00e3o com base nos tipos de projetos que est\u00e3o sendo abordados. No entanto, o objetivo geralmente \u00e9 o mesmo. O trabalho do designer de UX \u00e9 otimizar a experi\u00eancia do usu\u00e1rio<\/span> ao interagir com a tecnologia digital, mantendo tamb\u00e9m em mente o bem-estar do neg\u00f3cio.<\/p>\n\n\n\n Para alcan\u00e7ar esse equil\u00edbrio, o designer de UX segue um processo que resulta em m\u00faltiplos <\/a><\/span>entreg\u00e1veis<\/a><\/span>.<\/p>\n\n\n\n Antes de come\u00e7ar qualquer projeto de fato, h\u00e1 muita pesquisa de UX a ser feita. Portanto, o designer pode primeiro criar uma ou mais personas do p\u00fablico<\/a><\/span>. Isso permite que o designer entenda as necessidades do usu\u00e1rio.<\/p>\n\n\n\n Em seguida, o designer de UX pode apresentar um poss\u00edvel diagrama de fluxo do usu\u00e1rio para ajudar a explorar poss\u00edveis formas de intera\u00e7\u00e3o do usu\u00e1rio com o site. Eles podem ent\u00e3o traduzir essas informa\u00e7\u00f5es em um prot\u00f3tipo. Os prot\u00f3tipos podem ser t\u00e3o b\u00e1sicos quanto um <\/a><\/span>wireframe<\/a><\/span>, um esbo\u00e7o preliminar de como uma p\u00e1gina final poderia parecer. O designer tamb\u00e9m pode criar um prot\u00f3tipo mais visualmente robusto ou at\u00e9 mesmo um que possa ser interagido.<\/p>\n\n\n As responsabilidades do designer de UX n\u00e3o terminam com o design final. Ap\u00f3s o lan\u00e7amento do site, eles podem conduzir testes de usabilidade ou analisar m\u00e9tricas de uso para identificar e corrigir problemas potenciais.<\/p>\n\n\n\n Em outras palavras, eles est\u00e3o envolvidos em todas as etapas da cria\u00e7\u00e3o e lan\u00e7amento de um site.<\/p>\n\n\n Se voc\u00ea est\u00e1 lidando com seu pr\u00f3prio design de UX, \u00e9 sua responsabilidade defender seu p\u00fablico enquanto garante que voc\u00ea ainda est\u00e1 obtendo o que deseja do seu site. Para fazer isso, o primeiro passo \u00e9 aprender a reconhecer um design de UX robusto.<\/p>\n\n\n\n Com isso em mente, vamos dar uma olhada em alguns exemplos de UX na pr\u00e1tica. Existem quatro elementos-chave aos quais voc\u00ea vai querer prestar muita aten\u00e7\u00e3o.<\/p>\n\n\n\n Um design de navega\u00e7\u00e3o ruim pode tornar qualquer site in\u00fatil. Mover-se pelo site deve ser suave e intuitivo. O menu de navega\u00e7\u00e3o tamb\u00e9m deve ser acess\u00edvel, independentemente do dispositivo que o visitante est\u00e1 usando.<\/p>\n\n\n\n Navega\u00e7\u00e3o Breadcrumb<\/a><\/span> \u00e9 uma maneira dos designers evitarem que os usu\u00e1rios se percam, especialmente se um site tem muitas p\u00e1ginas.<\/p>\n\n\n \u00c9 igualmente importante prestar aten\u00e7\u00e3o aos links. Designers de web que utilizam um UX forte garantem que voc\u00ea possa identificar os links quando os v\u00ea. Isso geralmente significa sublinh\u00e1-los e usar uma cor de texto diferente. Eles tamb\u00e9m usar\u00e3o texto \u00e2ncora significativo<\/a><\/span>, para que voc\u00ea saiba para onde o link est\u00e1 levando<\/a> antes de clicar nele.<\/p>\n\n\n Uma parte significativa de uma UX bem-sucedida \u00e9 entender como as pessoas interagem com diferentes partes de um site. Por exemplo, a maioria das pessoas n\u00e3o l\u00ea o conte\u00fado de uma p\u00e1gina web normalmente. Elas o escaneiam<\/a><\/span> e ent\u00e3o param para ler se encontrarem algo interessante.<\/p>\n\n\n\n O conte\u00fado \u00e9 verific\u00e1vel se um usu\u00e1rio pode rapidamente navegar por uma postagem de blog ou p\u00e1gina de vendas e sair com uma ideia clara do que est\u00e1 sendo comunicado.<\/p>\n\n\n Manter os par\u00e1grafos curtos \u00e9 uma maneira de criar conte\u00fado f\u00e1cil de escanear. Esses par\u00e1grafos devem ser frequentemente intercalados com t\u00edtulos, listas e imagens. Os designers tamb\u00e9m podem fazer uso de cita\u00e7\u00f5es destacadas, texto em negrito e elementos similares.<\/p>\n\n\n A anima\u00e7\u00e3o \u00e9 uma maneira eficaz de se destacar em um mar de websites e capturar a aten\u00e7\u00e3o do usu\u00e1rio<\/a><\/span>. Ela adiciona um elemento de divers\u00e3o e pode contribuir para criar uma experi\u00eancia memor\u00e1vel para o usu\u00e1rio.<\/p>\n\n\n\n Entretanto, existe uma maneira correta e uma maneira errada de implement\u00e1-lo.<\/p>\n\n\n\n Anima\u00e7\u00f5es sutis podem fornecer feedback<\/a><\/span> enquanto voc\u00ea espera a conclus\u00e3o de uma transa\u00e7\u00e3o. Uma anima\u00e7\u00e3o tamb\u00e9m pode se repetir infinitamente enquanto voc\u00ea tenta se concentrar na leitura de uma descri\u00e7\u00e3o de produto. Essas abordagens criam duas experi\u00eancias muito diferentes. O uso excessivo de anima\u00e7\u00e3o tamb\u00e9m pode afetar a UX em dispositivos m\u00f3veis.<\/p>\n\n\n\n Otimizando um site para usu\u00e1rios de dispositivos m\u00f3veis<\/a><\/span> \u00e9 essencial. Se voc\u00ea \u00e9 como a maioria das pessoas, voc\u00ea geralmente usa seu telefone<\/a><\/span> para acessar a internet. Se voc\u00ea encontrar um site que seja dif\u00edcil de usar em seu dispositivo, \u00e9 prov\u00e1vel que simplesmente o abandone.<\/p>\n\n\n\n Al\u00e9m de escolher um tema responsivo<\/a><\/span>, voc\u00ea pode tomar medidas adicionais para garantir que seu site funcione bem em todas as telas. Por exemplo, voc\u00ea pode executar seu site atrav\u00e9s do Teste de Compatibilidade com Dispositivos M\u00f3veis do Google<\/a><\/span>.<\/p>\n\n\n Esta ferramenta ir\u00e1 alert\u00e1-lo sobre problemas que est\u00e3o impedindo seu site de ser compat\u00edvel com dispositivos m\u00f3veis. Voc\u00ea pode descobrir que uma fonte espec\u00edfica \u00e9 dif\u00edcil de ler em uma tela pequena, por exemplo, ou que os bot\u00f5es s\u00e3o muito pequenos para serem tocados facilmente.<\/p>\n\n\n Agora que voc\u00ea sabe o que \u00e9 uma boa UX, como voc\u00ea aplica isso ao seu site?<\/p>\n\n\n\n Voc\u00ea provavelmente n\u00e3o far\u00e1 pesquisa de mercado intensiva ou prototipagem com wireframes de alta fidelidade. Ainda assim, colocar o seu chap\u00e9u de designer de UX pode ajud\u00e1-lo a criar um site que tanto voc\u00ea quanto seu p\u00fablico adorar\u00e3o.<\/p>\n\n\n\n Primeiramente, \u00e9 importante ter clareza sobre por que voc\u00ea possui um site e o que voc\u00ea deseja que ele fa\u00e7a. Por exemplo, voc\u00ea est\u00e1:<\/p>\n\n\n\n A seguir, conhe\u00e7a o seu usu\u00e1rio ideal ou cliente em potencial. <\/a>Criando uma persona de usu\u00e1rio<\/a><\/span> ir\u00e1 ajud\u00e1-lo a imaginar como seu p\u00fablico-alvo pode interagir com o seu site. Esta persona pode ser t\u00e3o simples quanto quem \u00e9 a pessoa, o que ela deseja e o que a impede de conseguir isso. Crucialmente, voc\u00ea deve identificar o que o usu\u00e1rio precisa para ter sucesso em seu site.<\/p>\n\n\n\n Lembre-se de que a acessibilidade \u00e9 uma parte integral da UX<\/span>. Voc\u00ea pode ter visitantes que usam tecnologia assistiva, ent\u00e3o considere priorizar a acessibilidade<\/a><\/span> ao construir seu site.<\/p>\n\n\n\n Voc\u00ea tamb\u00e9m pode verificar os sites dos seus concorrentes<\/a> para ver o que est\u00e1 funcionando para eles. O \u00edcone do carrinho de compras est\u00e1 sempre no canto superior direito? Talvez o seu tamb\u00e9m devesse estar. Voc\u00ea pode ser criativo sem reinventar a roda; os usu\u00e1rios n\u00e3o deveriam ter que descobrir como seu site funciona para alcan\u00e7ar seus objetivos.<\/p>\n\n\n Finalmente, a performance do site<\/a><\/span> \u00e9 importante para a UX. P\u00e1ginas lentas far\u00e3o com que os visitantes deixem o site<\/a><\/span> antes que ele tenha chance de carregar. Existem muitas maneiras de acelerar seu site, embora sua melhor op\u00e7\u00e3o seja come\u00e7ar com uma hospedagem de qualidade<\/a><\/span>.<\/p>\n\n\n\n\n Neste ponto, voc\u00ea provavelmente percebeu que o design de UX n\u00e3o \u00e9 algo que voc\u00ea otimiza de uma s\u00f3 vez. H\u00e1 muito mais neste campo do que podemos cobrir em um \u00fanico artigo.<\/p>\n\n\n Felizmente, existem muitos recursos de UX de qualidade aos quais voc\u00ea pode recorrer \u00e0 medida que continua a melhorar seu site<\/a>:<\/p>\n\n\n\n Se voc\u00ea combinar esses recursos com pesquisa e pr\u00e1tica, dever\u00e1 encontrar-se implementando boas pr\u00e1ticas de experi\u00eancia do usu\u00e1rio em pouco tempo.<\/p>\n\n\n\n Voc\u00ea n\u00e3o precisa ser um designer de UX profissional para construir um site que seu p\u00fablico adorar\u00e1 interagir. Basta ter um entendimento do que tornar\u00e1 a vida dos seus visitantes mais f\u00e1cil e a disposi\u00e7\u00e3o para criar um site que ofere\u00e7a essa experi\u00eancia.<\/p>\n\n\n\n UX descreve como \u00e9 a experi\u00eancia de intera\u00e7\u00e3o com seu site para os usu\u00e1rios. Otimizar a UX do seu site significa garantir que ele tenha uma navega\u00e7\u00e3o clara, criar conte\u00fado que seja f\u00e1cil de escanear, test\u00e1-lo para responsividade e mais. H\u00e1 muito a aprender, mas tamb\u00e9m existem muitos recursos \u00fateis e designers experientes que podem ajudar.<\/p>\n\n\n\n\n
<\/a>Uma Introdu\u00e7\u00e3o \u00e0 Experi\u00eancia do Usu\u00e1rio (UX) e Por Que \u00e9 Importante<\/span><\/h2>\n\n\n\n
![\"Um](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/6b708057-701f-400a-a361-338e99be9977_dh-what-is-ux-5.jpg\")
<\/figure><\/div>\n\n\n\n
<\/a>O Papel do Designer de UX<\/span><\/h2>\n\n\n\n
![\"Um](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/b8af0872-4f45-4c9e-875b-b33249d5346f_dh-what-is-ux-1.jpg\")
<\/a>Como Reconhecer um Bom Design de UX<\/span><\/h2>\n\n\n\n
1. Navega\u00e7\u00e3o<\/h3>\n\n\n\n
![\"Site](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/e9db2b0f-8fd6-4c8e-9a30-2ec3dd58b0a2_dh-what-is-ux-4.jpg\")
<\/figure><\/div>\n\n\n2. Conte\u00fado<\/h3>\n\n\n\n
![\"Conte\u00fado](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/ff4a85e0-503f-4fa1-a6df-f6562ea1c60e_dh-what-is-ux-3.jpg\")
<\/figure><\/div>\n\n\n3. Anima\u00e7\u00e3o<\/h3>\n\n\n\n
4. Capacidade de Resposta<\/h3>\n\n\n\n
![\"Resultados](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/3a63f433-6f6b-4615-8e3c-2a4ee5b2cc0f_dh-what-is-ux-2.jpg\")
<\/figure><\/div>\n\n\n<\/a>Como Utilizar UX para Projetar um Site para o Seu P\u00fablico<\/span><\/h2>\n\n\n\n
\n
![\"Resultados](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/97d495ea-4402-48c2-ba2d-08c28adf3cb1_dh-what-is-ux-7.jpg\")
<\/figure><\/div>\n\n\n![\"Ad](\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\"){kind=spacer}
<\/div>\n\n\n\n\n <\/a>Recursos de UX<\/span><\/h2>\n\n\n\n
![\"P\u00e1gina](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/30b88ca7-c692-4741-b779-c00397bbd7ed_dh-what-is-ux-6.jpg\")
<\/figure><\/div>\n\n\n\n
Crie uma \u00d3tima Experi\u00eancia do Usu\u00e1rio<\/span><\/h2>\n\n\n\n