\n Voc\u00ea pode criar o design mais impressionante do mundo e n\u00e3o ter\u00e1 sucesso se n\u00e3o satisfizer a usabilidade.\n<\/p>\n
\n Tudo, desde um palito de dente at\u00e9 um avi\u00e3o comercial, requer usabilidade para funcionar e vender, ou ent\u00e3o seu design est\u00e1 condenado. Da mesma forma, no mundo da web, um termo chamado UX \u00e9 usado quando um site \u00e9 usado e avaliado.\n<\/p>\n
\n UX \u00e9 a abrevia\u00e7\u00e3o de experi\u00eancia do usu\u00e1rio que um usu\u00e1rio da web adquire ao navegar em um site e interagir com seus elementos e recursos. Se a experi\u00eancia for inst\u00e1vel e mal procurada, ent\u00e3o o site n\u00e3o \u00e9 nada, pois ningu\u00e9m se importar\u00e1 com o lixo flutuante na Internet. O UX pode decidir sozinho se um site pode ser usado ou vendido, portanto, fazer valer a pena \u00e9 imperativo para o designer. Neste artigo, compartilharemos 10 regras fundamentais sobre usabilidade que todo web designer deve conhecer antes de levar o site aos est\u00e1gios finais de conclus\u00e3o.\n<\/p>\n
\n Existe uma linha t\u00eanue entre UX e UI. Mesmo que voc\u00ea esteja ciente da diferen\u00e7a, voc\u00ea pode ouvi-la do cliente em um ponto ou outro, mas quando chegar a hora, voc\u00ea deve ser capaz de explicar a diferen\u00e7a nos melhores termos poss\u00edveis. A interface do usu\u00e1rio \u00e9 definida como o sistema real, enquanto a experi\u00eancia do usu\u00e1rio \u00e9 definida como o resultado emocional ap\u00f3s a intera\u00e7\u00e3o com o sistema.\n<\/p>\n
\n O Microsoft Windows \u00e9 a interface do usu\u00e1rio, enquanto a satisfa\u00e7\u00e3o emocional ap\u00f3s us\u00e1-lo \u00e9 o UX. Confundir os dois termos pode n\u00e3o apenas prejudicar seu pr\u00f3prio trabalho, mas tamb\u00e9m sobrecarreg\u00e1-lo com algo que n\u00e3o \u00e9 totalmente seu trabalho.\n<\/p>\n
\n Um bom designer n\u00e3o apenas saber\u00e1 a diferen\u00e7a como tamb\u00e9m ser\u00e1 capaz de explic\u00e1-la ao cliente ao propor um pitch de apresenta\u00e7\u00e3o de seu trabalho.\n<\/p>\n
\n Web design \u00e9 mais do que aparenta. Tudo, desde os detalhes visuais, o produto que voc\u00ea usa e os lugares que voc\u00ea visita, tem UX escrito nele. Dirigir um carro ruim \u00e9 uma experi\u00eancia ruim, enquanto abrir uma caixa pronta com facilidade \u00e9 uma experi\u00eancia boa. O marketing UX offline pode parecer um vestido diferente, mas originalmente \u00e9 feito do mesmo tecido. Embora n\u00e3o seja totalmente a mesma coisa e n\u00e3o possa ser justificada por alguns exemplos, a experi\u00eancia de UX em plataformas materiais e imateriais produz os mesmos horm\u00f4nios em seu c\u00e9rebro. Por exemplo, algu\u00e9m descobriu que os humanos priorizam as informa\u00e7\u00f5es da esquerda para a direita e os elementos \u00e0 esquerda ocupam menos espa\u00e7o vertical e carregam o mesmo peso visual.\n<\/p>\n
\n Durante o ano 2000, a tend\u00eancia come\u00e7ou a mudar e os web designers come\u00e7aram a colocar barras de navega\u00e7\u00e3o no painel esquerdo da p\u00e1gina da web. Isso permitiu que os usu\u00e1rios verificassem o conte\u00fado de forma mais r\u00e1pida e melhor, ao mesmo tempo em que dava maior exposi\u00e7\u00e3o ao conte\u00fado do site. Como web designer, ter seus p\u00e9s em ambos os meios permitir\u00e1 que voc\u00ea treine sua mente e expanda seu conhecimento para avaliar e produzir projetos de uma perspectiva mais viva.\n<\/p>\n
\n Arte e Ci\u00eancia andam de m\u00e3os dadas quando se trata de UX. Ter uma compreens\u00e3o refinada sobre seu v\u00ednculo \u00e9 fundamental, especialmente durante o processo de design. Cientificamente, existe um cen\u00e1rio de solu\u00e7\u00e3o de problemas em que o designer deve tra\u00e7ar um roteiro e enfrentar os problemas com uma solu\u00e7\u00e3o te\u00f3rica. Por exemplo, um site est\u00e1 ficando drasticamente baixo em suas vendas. O designer ir\u00e1 sugerir a atualiza\u00e7\u00e3o do site, test\u00e1-lo e solucion\u00e1-lo, o que se transformar\u00e1 em uma solu\u00e7\u00e3o. \u00c9 aqui que entra a arte.\n<\/p>\n
\n Todos os aspectos e elementos ser\u00e3o sugeridos na solu\u00e7\u00e3o, como cores, fontes, layout, texto e conte\u00fado visual para tornar esse site atraente tanto est\u00e9tica quanto funcionalmente. Ele ser\u00e1 submetido a mais testes at\u00e9 conseguir invocar a resposta emocional desejada do usu\u00e1rio. Essa canaliza\u00e7\u00e3o do comportamento externo por meio de uma implementa\u00e7\u00e3o cient\u00edfica \u00e9 o que torna Arte e Ci\u00eancia um casal estranho, mas potente.\n<\/p>\n
\n N\u00e3o \u00e9 nenhum segredo que os designers lidam com clientes que querem que as coisas funcionem de acordo com seus livros. Isso cria um labirinto que n\u00e3o leva a lugar nenhum, pois muitas coisas que o cliente desconhece e que s\u00f3 o designer sabe. Da mesma forma, os designers \u00e0s vezes est\u00e3o empenhados em fazer as coisas do seu jeito, enquanto outros m\u00e9todos tamb\u00e9m est\u00e3o na mesa e podem funcionar melhor.\n<\/p>\n
\n Manter uma abordagem \u00fanica como tal nunca \u00e9 saud\u00e1vel ao projetar um web design rico em UX. Um bom UX s\u00f3 \u00e9 alcan\u00e7\u00e1vel a partir de uma abordagem orientada por objetivos que se concentra na melhor solu\u00e7\u00e3o dispon\u00edvel. Por exemplo, um cliente deseja mudar o link de depoimentos de clientes para a parte superior da p\u00e1gina para obter mais exposi\u00e7\u00e3o e atrair mais tr\u00e1fego. No entanto, o problema n\u00e3o est\u00e1 no posicionamento do link, mas no pr\u00f3prio link de localiza\u00e7\u00e3o, pois n\u00e3o consegue atrair tr\u00e1fego. Portanto, voc\u00ea tamb\u00e9m pode corrigir o link tornando-o mais vis\u00edvel exatamente onde est\u00e1, em vez de mov\u00ea-lo para um novo local. Ambas as solu\u00e7\u00f5es podem ser usadas para resolver o problema e voc\u00ea deve manter a op\u00e7\u00e3o aberta. Isso \u00e9 chamado de design orientado a objetivos.\n<\/p>\n
\n A identidade da marca est\u00e1 entre os principais objetivos por tr\u00e1s da constru\u00e7\u00e3o de um \u00f3timo UX. Se a UX deixar sua marca na satisfa\u00e7\u00e3o dos usu\u00e1rios, ela refletir\u00e1 muito na marca que tornou essa experi\u00eancia poss\u00edvel. \u00c9 importante que voc\u00ea n\u00e3o se distraia ao criar um visual que atenda \u00e0s prefer\u00eancias do cliente. Um bom design que deve exibir a combina\u00e7\u00e3o certa de funcionalidade e recursos que n\u00e3o apenas tornam a experi\u00eancia do usu\u00e1rio agrad\u00e1vel, mas tamb\u00e9m detalham o investimento que uma marca fez para torn\u00e1-la bem-sucedida. Isso decidir\u00e1 se o usu\u00e1rio visitar\u00e1 o site novamente.\n<\/p>\n
\n Para garantir que voc\u00ea tenha a perspectiva do cliente incorporada ao design, informe-o sobre cada movimento e fa\u00e7a as altera\u00e7\u00f5es necess\u00e1rias que possam ser acomodadas no design. Tamb\u00e9m \u00e9 importante que voc\u00ea considere o quadro geral ao adicionar as prefer\u00eancias do cliente para que a experi\u00eancia do usu\u00e1rio permane\u00e7a inalterada no processo.\n<\/p>\n
\n Nunca se torne uma v\u00edtima de sua pr\u00f3pria imagina\u00e7\u00e3o. Como voc\u00ea tem um pouco de liberdade criativa ao criar um site, \u00e9 crucial que voc\u00ea n\u00e3o abuse dela. Nesse caso espec\u00edfico, voc\u00ea tem as diretrizes do cliente e suas prefer\u00eancias profundamente arraigadas, mas esqueceu completamente a perspectiva do usu\u00e1rio. Sendo um designer \u00e9 importante que voc\u00ea nunca deixe sua imagina\u00e7\u00e3o desviar voc\u00ea de alcan\u00e7ar o que o cliente e o usu\u00e1rio desejam. Um design orientado ao usu\u00e1rio tem a melhor chance de produzir uma UX vencedora do que qualquer outra abordagem.\n<\/p>\n
\n Para ter certeza de que voc\u00ea est\u00e1 no caminho certo, pesquise sobre os usu\u00e1rios do seu nicho de design e aprenda sobre suas necessidades e desejos em seu design espec\u00edfico. Antes de estar pronto para inici\u00e1-lo, use o teste A\/B para verificar se seu design atende aos requisitos. Lembre-se, as necessidades do usu\u00e1rio s\u00e3o mais importantes do que sua entrada pessoal porque, no final, eles estar\u00e3o usando.\n<\/p>\n
\n Gatilhos comportamentais s\u00e3o baseados na psicologia humana que estimula a resposta emocional do usu\u00e1rio. Bons designers s\u00e3o capazes de avaliar qualitativamente a mentalidade do usu\u00e1rio e derivar uma conex\u00e3o emocional com o conte\u00fado. Essas conex\u00f5es emocionais s\u00e3o essenciais na produ\u00e7\u00e3o de um UX animado em um web design. Veja as notifica\u00e7\u00f5es, por exemplo. Voc\u00ea pode ter experimentado o irritante recurso de notifica\u00e7\u00e3o pop-up que o envia para fora do site batendo a porta ao sair. Mesmo que seja em parte para o benef\u00edcio do cliente, ao mesmo tempo em que garante convers\u00f5es para o varejista, mostr\u00e1-lo logo ap\u00f3s o cliente acessar o site \u00e9 uma p\u00e9ssima ideia.\n<\/p>\n
\n Imagine-se chegando ao seu escrit\u00f3rio e sendo ordenado a fazer suas tarefas sem respirar ou tomar uma x\u00edcara de caf\u00e9 quente. O tempo \u00e9 um fator crucial aqui. Se voc\u00ea conhece a psique humana, nunca come\u00e7ar\u00e1 com um pop-up que cubra mais da metade da tela. Em vez disso, voc\u00ea pode esperar que o visitante d\u00ea uma olhada no conte\u00fado e ent\u00e3o comece com seu argumento de venda. Desta forma, a mesma notifica\u00e7\u00e3o ser\u00e1 recebida de bra\u00e7os abertos, porque agora o usu\u00e1rio pode realmente poupar seu tempo para se envolver. A UX depende fortemente da psique do consumidor, e \u00e9 por isso que voc\u00ea deve integrar uma dose saud\u00e1vel de gatilhos comportamentais, enquanto toma cuidado onde precisa estar.\n<\/p>\n
\n A rolagem funciona como m\u00e1gica, se voc\u00ea me perguntar. Ele faz com que o usu\u00e1rio busque informa\u00e7\u00f5es mais aprofundadas no site, ampliando suas chances de convers\u00e3o. \u00c9 provavelmente por isso que a maioria dos designers coloca seus CTAs na parte inferior da p\u00e1gina, onde a rolagem chega ao fim.\n<\/p>\n
\n At\u00e9 mesmo a abordagem “amor \u00e0 primeira vista” pode promover a rolagem, em que o design mostra CTAs na parte superior da p\u00e1gina. Voc\u00ea pode otimizar essas p\u00e1ginas introduzindo dicas de rolagem. As dicas de rolagem podem variar de suspiros de seta a elementos gr\u00e1ficos cativantes. Por exemplo, As setas podem ser usadas para apontar dire\u00e7\u00f5es para o pr\u00f3ximo conte\u00fado, enquanto os elementos gr\u00e1ficos podem levar o usu\u00e1rio diretamente para o pr\u00f3ximo slide assim que interagirem com ele.\n<\/p>\n
\n Quando voc\u00ea coloca seu conte\u00fado ao vivo na Internet, deve esperar que ele seja recebido por pessoas de todos os tipos de origens. Nem todo mundo compartilha de suas opini\u00f5es da maneira que voc\u00ea pretende prop\u00f4-las. Por isso seu conte\u00fado deve ser absorv\u00edvel para que o usu\u00e1rio n\u00e3o precise de esfor\u00e7o extra para entender o que voc\u00ea est\u00e1 oferecendo. Se o conte\u00fado for diger\u00edvel, o usu\u00e1rio converter\u00e1 mais rapidamente.\n<\/p>\n
\n D\u00ea-lhes uma mordida de cada vez. Mostrar tudo o que voc\u00ea pode oferecer de uma s\u00f3 vez n\u00e3o apenas desorienta o usu\u00e1rio, mas tamb\u00e9m reflete o desespero da sua metade. Para garantir que seu design seja respir\u00e1vel e f\u00e1cil de assimilar, use bastante espa\u00e7o em branco ao redor de seus elementos para que sejam f\u00e1ceis de distinguir. Crie tamb\u00e9m conte\u00fados compreens\u00edveis para todos os p\u00fablicos com exemplos e suas pr\u00f3prias narrativas. Mostre-se como amigo deles, n\u00e3o como empres\u00e1rio.\n<\/p>\n
\n Os elementos da p\u00e1gina s\u00e3o parte integrante de um design da web. Eles desempenham fun\u00e7\u00f5es essenciais para os usu\u00e1rios e mant\u00eam uma harmonia emocional no UX. No entanto, adicionar elementos de p\u00e1gina desnecess\u00e1rios pode ser perigoso para o seu site e tamb\u00e9m para o usu\u00e1rio.\n<\/p>\n
\n Elementos de p\u00e1gina, como um CTA com v\u00e1rios comandos em vez de um, uma imagem que distrai o suficiente para desviar o olhar do assunto ou trecho de texto no meio da p\u00e1gina que engana o cliente. Adicionar esses elementos afeta inutilmente a credibilidade do design da web, ao mesmo tempo em que diminui a velocidade de carregamento. Imagens HD, por exemplo, podem ser f\u00e1bricas de atraso para suas p\u00e1ginas da web. Eles exigem muita largura de banda e tiram o tempo de carregamento ideal para um site amig\u00e1vel \u00e0 convers\u00e3o. Um site de carregamento lento \u00e9 a \u00faltima coisa que voc\u00ea deseja em seu site UX.\n<\/p>\n
\n Como web designer, voc\u00ea deve incluir todos os elementos, aspectos e abordagens na equa\u00e7\u00e3o. Seu objetivo \u00e9 produzir um design que n\u00e3o apenas conquiste os clientes, mas tamb\u00e9m forne\u00e7a um UX satisfat\u00f3rio. Por meio dessas 10 regras fundamentais, voc\u00ea cria o web design ideal que atende \u00e0 usabilidade de todos os \u00e2ngulos poss\u00edveis.\n<\/p>\n<\/p>\n