{"id":13082,"date":"2018-04-04T11:47:05","date_gmt":"2018-04-04T14:47:05","guid":{"rendered":"http:\/\/www.impacta.com.br\/blog\/?p=13082"},"modified":"2018-04-04T11:47:05","modified_gmt":"2018-04-04T14:47:05","slug":"guia-pratico-para-desbravar-o-universo-do-ux","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/guia-pratico-para-desbravar-o-universo-do-ux\/","title":{"rendered":"Guia pr\u00e1tico para desbravar o Universo do UX"},"content":{"rendered":"

Para ter um site ou sistema de qualidade, o fator cr\u00edtico \u00e9 a UX, ou seja, a experi\u00eancia do usu\u00e1rio<\/strong>. Existem diversos princ\u00edpios que ajudam a guiar o processo de UX design em um produto digital. O UX designer \u00e9 o profissional que deve se preocupar com cada um desses itens para garantir que o usu\u00e1rio tenha uma \u00f3tima experi\u00eancia e volte a utilizar o sistema.<\/span>
\nPor isso, se voc\u00ea gostaria de\u00a0se desenvolver profissionalmente<\/a>, mas ainda n\u00e3o sabe bem em que deveria investir, talvez voc\u00ea deva considerar a carreira de UX designer.<\/span>
\nNeste post vamos explicar tudo sobre essa \u00e1rea de extrema import\u00e2ncia do desenvolvimento e design<\/a> para voc\u00ea ficar por dentro do assunto. Boa leitura!<\/span><\/p>\n

Afinal, o que \u00e9 UX?<\/span><\/strong><\/h2>\n

Sempre que usamos qualquer tipo de produto, seja virtual ou n\u00e3o, estamos tendo algum tipo de experi\u00eancia. Voc\u00ea j\u00e1 deve ter acessado algum sistema ou p\u00e1gina web no qual teve dificuldade em localizar as informa\u00e7\u00f5es que precisava.<\/span>
\nVoc\u00ea deve ter navegado por diversos links at\u00e9 chegar onde queria. Talvez voc\u00ea tenha ficado confuso com todas aquelas op\u00e7\u00f5es juntas. Provavelmente, voc\u00ea teve, ent\u00e3o, uma experi\u00eancia ruim. O sistema n\u00e3o foi planejado pensando em como o usu\u00e1rio se sentiria ao utilizar a ferramenta.<\/span>
\n\u00c9 da\u00ed que surge o termo UX, que vem do ingl\u00eas \u201cUser Experience<\/strong>\u201d, que significa experi\u00eancia do usu\u00e1rio. \u00c9 importante lembrar que a UX sempre vai existir. Ela pode ser ruim ou boa, mas ela acontecer\u00e1.<\/span>
\nAssim, cada vez mais as empresas passam a dar import\u00e2ncia para a UX, contratando at\u00e9 mesmo profissionais especialistas para lidar somente com essa quest\u00e3o.<\/span><\/p>\n

Por que, de fato, \u00e9 importante?<\/span><\/strong><\/h2>\n

A UX \u00e9 t\u00e3o importante quanto a identidade visual de um sistema. Isso porque n\u00e3o importa o qu\u00e3o bonito \u00e9 o sistema se os usu\u00e1rios n\u00e3o souberem como interagir com ele.<\/span>
\nA UX \u00e9 a chave para sistemas complexos, uma vez que os usu\u00e1rios devem conseguir navegar facilmente pelo sistema sem precisarem aprender a faz\u00ea-lo. Negligenciar a UX pode resultar em um sistema relaxado que os usu\u00e1rios n\u00e3o querer\u00e3o voltar a usar.<\/span>
\nDentre os tipos de neg\u00f3cio que s\u00e3o afetados profundamente pela UX\u00a0est\u00e3o os e-commerces<\/a>. Existem milhares de e-commerces na web com pre\u00e7os muito semelhantes. O que pode diferenciar um site de outro?<\/strong><\/span>
\nUm dos fatores \u00e9 a boa visualiza\u00e7\u00e3o dos produtos, em que o usu\u00e1rio consegue facilmente calcular o frete de seu produto, verificar condi\u00e7\u00f5es de pagamento, garantia e informa\u00e7\u00f5es t\u00e9cnicas.<\/span>
\nContudo, um site que n\u00e3o disponibiliza essas informa\u00e7\u00f5es de uma forma f\u00e1cil de ser\u00a0localizada\u00a0poder\u00e1 facilmente perder um cliente. Se um cliente teve uma UX ruim, \u00e9 muito prov\u00e1vel que milhares de outros clientes tamb\u00e9m tenham os mesmos problemas e dificuldades.<\/span>
\nAl\u00e9m disso, a pr\u00e1tica\u00a0n\u00e3o engloba somente a parte visual de um sistema ou web site. A UX engloba<\/a> toda a experi\u00eancia de intera\u00e7\u00e3o com a empresa. <\/span>
\nPensando no exemplo do e-commerce dado acima, se o usu\u00e1rio tiver um atendimento ruim com o suporte da empresa\u00a0ou tiver problemas com o pagamento e n\u00e3o conseguir resolver, isso tamb\u00e9m afetar\u00e1 a UX com a empresa.<\/span><\/p>\n

Agora deu para perceber que uma UX ruim em um e-commerce afeta diretamente as vendas e, portanto, o faturamento do neg\u00f3cio?<\/span><\/p>\n

Quais s\u00e3o as ferramentas mais indicadas?<\/span><\/strong><\/h2>\n

Voc\u00ea j\u00e1 sabe o que \u00e9 UX, agora precisa entender quais ferramentas podem ajudar na elabora\u00e7\u00e3o de um produto digital.<\/span>
\nNeste t\u00f3pico falamos de ferramentas que s\u00e3o\u00a0tend\u00eancias de UX<\/a>\u00a0para prototipagem de sistemas, ferramentas para testes de usu\u00e1rio, ferramentas para organizar informa\u00e7\u00f5es e, por fim, ferramentas para an\u00e1lise de m\u00e9tricas<\/a>.<\/span><\/p>\n

Ferramentas para prototipagem<\/span><\/strong><\/h3>\n

Quando o designer de um sistema tem uma ideia de como deve ser esse sistema, ele precisa de alguma ferramenta com a qual consiga transmitir essa ideia. Ele precisa criar o wireframe do site para organizar a estrutura e relacionamento entre todas as p\u00e1ginas do sistema.<\/span>
\nO wireframe \u00e9 um desenho b\u00e1sico da interface que deve retratar a arquitetura, propostas de fun\u00e7\u00f5es, conte\u00fado e elementos gr\u00e1ficos.<\/span>
\nPara isso, ent\u00e3o, existem ferramentas com o objetivo de ajudar na prototipagem do sistema, como \u00e9 o caso do\u00a0UX Pin<\/a>, que possui muitas funcionalidades, incluindo a habilidade de criar prot\u00f3tipos clic\u00e1veis e responsivos no navegador.<\/span>
\nOutra ferramenta bastante utilizada para esse objetivo \u00e9 o\u00a0Wireframe.cc<\/a>, em que\u00a0s\u00f3 \u00e9 preciso abrir uma nova aba e rapidamente criar os wireframes.<\/span>
\nO\u00a0Sketch<\/a>\u00a0\u00e9, talvez, uma das ferramentas mais conhecidas, pois possui uma comunidade de usu\u00e1rios muito grande.<\/span>
\nA\u00a0ferramenta de UX\u00a0mais completa do mercado para a prototipagem \u00e9 o\u00a0Axure<\/a>, que pode ser comparada a um Photoshop <\/a>para designers de UX.<\/span>
\nPor fim, uma ferramenta relativamente nova\u00a0\u00e9 o Adobe Experience Design<\/a> (Adobe XD). Tem interface simples e intuitiva que permite que o profissional fa\u00e7a em alguns minutos transi\u00e7\u00f5es de telas, insira figuras e personalize diversas telas de um aplicativo.<\/span><\/p>\n

Ferramentas para testes de usu\u00e1rio e pesquisa<\/span><\/strong><\/h3>\n

Como \u00e9 poss\u00edvel lidar com sess\u00f5es remotas de testes de usu\u00e1rio? Com a interface pronta,\u00a0\u00e9 preciso saber como o usu\u00e1rio est\u00e1 lidando com a ferramenta. Para isso, existem alguns mecanismos que gravam a intera\u00e7\u00e3o do usu\u00e1rio com o produto.<\/span>
\nUma delas \u00e9 o\u00a0Lookback<\/a>, uma ferramenta simples de usar em que todos os v\u00eddeos s\u00e3o enviados para a nuvem. Tamb\u00e9m existe a\u00a0Wufoo<\/a>, no qual \u00e9 poss\u00edvel criar pesquisa de satisfa\u00e7\u00e3o e enviar para os usu\u00e1rios para, ent\u00e3o, poder facilmente analisar os resultados.<\/span>
\nPor fim, a ferramenta\u00a0User Testing<\/a>\u00a0permite que voc\u00ea, em menos de uma hora, consiga executar\u00a0testes de UX<\/a>\u00a0no seu site.<\/span><\/p>\n

Ferramentas para organizar informa\u00e7\u00f5es<\/span><\/strong><\/h3>\n

Um designer sempre se assusta com a quantidade de informa\u00e7\u00f5es que precisa trabalhar diariamente. Como ele pode lidar com isso? Como organizar, rotular e visualizar toda essa informa\u00e7\u00e3o de uma forma simples e de f\u00e1cil entendimento?<\/span>
\nUma ferramenta bastante \u00fatil para desenhar fluxogramas e diagramas com linhas que se conectam automaticamente \u00e9 o\u00a0Lucid Chart<\/a>. Uma das vantagens dela \u00e9 que a integra\u00e7\u00e3o com o Google Apps a torna mais colaborativa.<\/span>
\nMindMeister<\/a>\u00a0pode ser utilizada naquele momento em que voc\u00ea tem uma avalanche de ideias e n\u00e3o sabe como organiz\u00e1-la. Nessa ferramenta voc\u00ea pode criar mapas com palavras, imagens e links que se conectam entre si.<\/span><\/p>\n

Ferramentas para an\u00e1lise de m\u00e9tricas<\/span><\/strong><\/h3>\n

Como voc\u00ea pode analisar, de fato, as intera\u00e7\u00f5es do usu\u00e1rio com o seu sistema, para que voc\u00ea tome as decis\u00f5es corretas de design?<\/span>
\nPara isso existem ferramentas para an\u00e1lise de dados\u00a0que quantificam as intera\u00e7\u00f5es do usu\u00e1rio. Um exemplo \u00e9 o\u00a0Crazy Egg<\/a>, que organiza os dados em forma de heatmap, um mapa de calor com 3 dimens\u00f5es.<\/span><\/p>\n

Outra ferramenta interessante \u00e9 o\u00a0Good Data<\/a>, que \u00e9 baseado em nuvem e fornece relat\u00f3rios \u00fateis que combinam v\u00e1rias fontes de dados.<\/span><\/p>\n

Quais s\u00e3o os 5 princ\u00edpios b\u00e1sicos em UX?<\/span><\/strong><\/h2>\n

Al\u00e9m de saber usar as ferramentas que visam ajudar na elabora\u00e7\u00e3o da UX, tamb\u00e9m \u00e9 preciso entender o que o usu\u00e1rio precisa para ter uma boa experi\u00eancia. Neste t\u00f3pico citamos 5 princ\u00edpios b\u00e1sicos de UX: experi\u00eancia personalizada, simplicidade acima de tudo, padr\u00f5es familiares, design responsivo e o poder da satisfa\u00e7\u00e3o.<\/span><\/p>\n

1. Experi\u00eancia personalizada<\/span><\/strong><\/h3>\n

Personaliza\u00e7\u00e3o \u00e9 o assunto do momento no design de sistemas web e m\u00f3veis. Os usu\u00e1rios agora procuram por experi\u00eancias que foram feitas especificamente para suas necessidades.<\/span>
\nImagine um usu\u00e1rio visitando um e-commerce e querendo ver sugest\u00f5es de produtos que coincidem com seus interesses ou compras anteriores. Uma interface que \u201csabe\u201d o que o usu\u00e1rio quer por meio da intera\u00e7\u00e3o com um produto ou um servi\u00e7o\u00a0nunca \u00e9 algo que deixa de impressionar<\/span><\/p>\n

2. Simplicidade acima de tudo<\/span><\/strong><\/h3>\n

As melhores interfaces de usu\u00e1rio s\u00e3o aquelas que proporcionam simplicidade e ferramentas de f\u00e1cil entendimento. Quanto menor o esfor\u00e7o cognitivo exigido do usu\u00e1rio, melhor ser\u00e1 a UX.<\/span>
\nOs pontos-chave s\u00e3o clareza e consist\u00eancia. Voc\u00ea pode desenvolver seu sistema web ou m\u00f3vel para ter um apelo visual, e isso \u00e9 \u00f3timo. Por\u00e9m, as pessoas v\u00e3o apreciar a est\u00e9tica somente por um tempo limitado, uma vez que o objetivo principal dos usu\u00e1rios \u00e9 interagir com o programa e realizar a tarefa que precisam.<\/span>
\nSe voc\u00ea adicionar muitos elementos de design que servem somente para a decora\u00e7\u00e3o do sistema, estar\u00e1 apenas dificultando as intera\u00e7\u00f5es do usu\u00e1rio. Os produtos digitais devem ajudar as pessoas a resolverem problemas, portanto, aposte na simplicidade para que voc\u00ea possa focar nas funcionalidades.<\/span><\/p>\n

3. Padr\u00f5es familiares<\/span><\/strong><\/h3>\n

Fa\u00e7a a voc\u00ea mesmo a seguinte pergunta: \u201cos usu\u00e1rios conseguem entender como completar suas tarefas na primeira vez que interagem com o produto?\u201d.<\/span>
\nSempre que voc\u00ea come\u00e7a a usar um novo produto digital, voc\u00ea espera que as intera\u00e7\u00f5es sejam semelhantes \u00e0quelas j\u00e1 aprendidas anteriormente. Isso n\u00e3o vale somente para sites, vale para qualquer produto.<\/span>
\nQuando voc\u00ea adquire um celular de uma marca diferente, voc\u00ea espera que algumas funcionalidades sejam iguais \u00e0s do seu celular antigo, por exemplo, possuir um bot\u00e3o lateral para ligar e desligar, bot\u00e3o lateral de volume e c\u00e2mera traseira e frontal. Se o seu novo celular \u00e9 completamente diferente desse padr\u00e3o, voc\u00ea pode se sentir frustrado porque ter\u00e1 de reaprender a usar, afetando negativamente a UX.<\/span>
\nMantenha o padr\u00e3o, pois isso facilitar\u00e1 a vida do usu\u00e1rio. Se voc\u00ea precisa de um bot\u00e3o de \u201cgravar\u201d, por que n\u00e3o utilizar o \u00edcone de disquete que j\u00e1 \u00e9 t\u00e3o conhecido por todos? Se voc\u00ea usar o \u00edcone de disquete em um outro bot\u00e3o que tenha outra fun\u00e7\u00e3o que n\u00e3o seja gravar, com certeza receber\u00e1 muitos relat\u00f3rios de erros.<\/span><\/p>\n

4. Design responsivo<\/span><\/strong><\/h3>\n

Hoje em dia o computador n\u00e3o \u00e9 o \u00fanico meio de acessar sites e sistemas web. A popularidade dos dispositivos m\u00f3veis aumenta a cada dia. Se voc\u00ea \u00e9 um usu\u00e1rio frequente de smartphone, provavelmente j\u00e1 deve ter entrado em sites no qual as letras e bot\u00f5es eram muito pequenas, dificultando muito a leitura e a navega\u00e7\u00e3o.<\/span>
\nVoc\u00ea deve se lembrar, ent\u00e3o, de como se sentiu irritado por n\u00e3o conseguir realizar uma tarefa. \u00c9 por isso que um site com design responsivo<\/a> \u00e9 t\u00e3o importante. Adequar toda a interface do sistema para caber em uma pequena tela de celular, por\u00e9m ainda manter uma semelhan\u00e7a com a vers\u00e3o web, \u00e9 um desafio necess\u00e1rio para uma boa UX em dispositivos m\u00f3veis.<\/span>
\nAssim, nos sistemas mobile, o UX designer deve deixar as ferramentas mais utilizadas sempre mais acess\u00edveis e esconder aquelas com uso menos frequente.<\/span><\/p>\n

5. O poder da satisfa\u00e7\u00e3o<\/span><\/strong><\/h3>\n

Todo designer de UX gostaria de criar uma experi\u00eancia que proporciona prazer e satisfa\u00e7\u00e3o aos usu\u00e1rios para fazer com que voltem a interagir com a p\u00e1gina. Por\u00e9m, a satisfa\u00e7\u00e3o tamb\u00e9m \u00e9 algo dif\u00edcil de relacionar a elementos de design.<\/span>
\nPara atingir essa satisfa\u00e7\u00e3o, toda a experi\u00eancia de usu\u00e1rio precisa ser agrad\u00e1vel e isso n\u00e3o \u00e9 t\u00e3o simples quanto parece. Por isso, existem sistemas baseados em gamifica\u00e7\u00e3o<\/a>, com recompensas e princ\u00edpios de jogos digitais, pois tornam a experi\u00eancia mais engajante.<\/span>
\nIsso \u00e9 bastante comum at\u00e9 mesmo em sites de e-commerce, que oferecem \u201cpontos\u201d a cada compra realizada. Quando esses pontos se acumulam, o usu\u00e1rio tem a op\u00e7\u00e3o de trocar por algum produto. Isso \u00e9 um elemento de jogos que a UX utiliza com o intuito de buscar a satisfa\u00e7\u00e3o e interesse do usu\u00e1rio para que ele continue comprando.<\/span><\/p>\n

Quais as diferen\u00e7as entre UX e UI?<\/span><\/strong><\/h2>\n

Existe uma grande confus\u00e3o para quem est\u00e1 come\u00e7ando na \u00e1rea de design de UX, pois muitos acham que UX \u00e9 o mesmo que UI. Como j\u00e1 mencionamos anteriormente, UX significa User Experience, ou seja, experi\u00eancia do usu\u00e1rio. J\u00e1 UI \u00e9 uma abrevia\u00e7\u00e3o em ingl\u00eas para User Interface (interface do usu\u00e1rio). A UI est\u00e1 inserida dentro da UX, mas n\u00e3o possuem o mesmo significado.<\/span>
\nA UI<\/strong> \u00e9 somente a interface, o meio de o usu\u00e1rio interagir com algo, enquanto a UX engloba toda a experi\u00eancia daquele sistema, como o tempo que o usu\u00e1rio leva para encontrar alguma informa\u00e7\u00e3o, quantidade de intera\u00e7\u00f5es incorretas e at\u00e9 mesmo quantidade de vezes em que o suporte foi acionado.<\/span>
\n\u00c9 muito comum encontrar vagas de emprego que exigem conhecimentos tanto de experi\u00eancia do usu\u00e1rio quanto interface, contudo, essas exig\u00eancias s\u00e3o responsabilidades de mais de um profissional: o designer de UX e designer de UI.<\/span>
\n\u00c9 claro que \u00e9 muito importante que o profissional de UX conhe\u00e7a UI, pois como ele poder\u00e1 elaborar uma boa experi\u00eancia se n\u00e3o conhecer tamb\u00e9m os princ\u00edpios de interfaces agrad\u00e1veis?<\/span>
\nPortanto, quando se fala de UX design, isso n\u00e3o est\u00e1 limitado a somente projetar transi\u00e7\u00f5es de telas de aplicativos, pois o profissional respons\u00e1vel por isso \u00e9 o UI designer. O UX designer precisa saber monitorar as intera\u00e7\u00f5es dos usu\u00e1rios para tomar decis\u00f5es sobre as funcionalidades do sistema.<\/span><\/p>\n

UX na pr\u00e1tica: como come\u00e7ar?<\/span><\/strong><\/h2>\n

Os profissionais que trabalham com UX podem vir de diversas \u00e1reas como jornalismo, moda, design e at\u00e9 biblioteconomia, pois a principal caracter\u00edstica que esse profissional deve ter \u00e9 um bom senso de empatia e ser um \u00f3timo observador, uma vez que seu trabalho \u00e9 saber identificar os problemas e necessidades dos usu\u00e1rios nas atividades do dia a dia.<\/span>
\nApesar de qualquer pessoa poder trabalhar com UX, \u00e9 preciso estudar bastante, ler livros e fazer cursos relacionados, al\u00e9m de participar de eventos.<\/span><\/p>\n

Leia livros<\/span><\/strong><\/h3>\n

Agora que voc\u00ea j\u00e1 est\u00e1 mais familiarizado com o conceito de UX e j\u00e1 est\u00e1 mais conectado com esse mundo, \u00e9 hora de se aprofundar na teoria. Um bom livro para o iniciante \u00e9 o\u00a0Introdu\u00e7\u00e3o e Boas Pr\u00e1ticas em UX Design<\/a>. Nele, o leitor ter\u00e1 um guia inicial para come\u00e7ar a projetar a UX de seus produtos digitais.<\/span>
\nExistem ainda diversos livros para quem procura uma orienta\u00e7\u00e3o mais espec\u00edfica, como testes de usabilidade, mecanismos de busca, etc.<\/span>
\nO\u00a0Atomic Design<\/a>\u00a0detalha tudo aquilo que \u00e9 preciso para a manuten\u00e7\u00e3o do design de sistemas, permitindo que voc\u00ea produza UIs mais r\u00e1pidas e consistentes. Esse livro introduz uma metodologia para se pensar de forma diferente na sua interface.<\/span>
\nNa obra\u00a0Data-Driven Design: Improving User Experience with A\/B\u00a0Testing<\/a>\u00a0voc\u00ea aprender\u00e1 como melhorar suas decis\u00f5es de design por meio de testes A\/B e como voc\u00ea pode aplicar esse processo em tudo, desde pequenos layouts at\u00e9 conceitos de UX em larga escala.<\/span><\/p>\n

Participe de eventos<\/span><\/strong><\/h3>\n

N\u00e3o existem muitos eventos especificamente de UX design, mas costumam ser bem organizados. Contam com palestras<\/a>, workshops, grupos de discuss\u00e3o e salas de exposi\u00e7\u00e3o.<\/span>
\nAlguns eventos de UX para voc\u00ea ficar de olho s\u00e3o:<\/span><\/p>\n