UX - Experiência do Usuário com foco em Alta Performance

237 visualizações

Publicada em

Capítulo do livro "Marketing de Alta Performance", editado pela ComSchool.

"Proporcionar uma experiência agradável e fácil para o cliente final é fundamental no negócio de qualquer empresa, seja ela física ou virtual. (...) E é aí que entra UX (User Experience ou, simplesmente, Experiência do Usuário): ao entender o usuário e seu modelo mental, o profissional de UX tem o papel de desenhar as melhores experiências para o cliente de seu negócio, facilitando sua vida e desburocratizando tarefas simples como encontrar um produto na sua loja virtual ou mesmo seguir ao checkout para finalizar a compra."

Confira dicas práticas e de ferramentas para aplicar UX com foco em Alta Performance.

Publicada em: Negócios
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

UX - Experiência do Usuário com foco em Alta Performance

  1. 1. Capítulo 14 Experiência do Usuário com foco em Alta Performance Lisandra Maioli Talvez você já tenha ouvido falar da história do famoso botão de 300 milhões de dólares: um ajuste proposto pelo especialista de UX Jared Spool a uma loja virtual (que ele não revela qual é, mas alguns apostam no formulário da Macy’s) conseguiu aumentar em mais de 45% o fatura- mento dela. Mágica? Milagre? Nada disso! O que Jared Spool fez – e conta no site da UIE1 – foi simplesmente entender o usuário e facilitar a sua experiência no processo de compra. E, para isso, foi necessário apenas fazer o tal ajuste em um único botão de um formulário. O formulário do site, conforme Jared Spool conta em seu blog, não poderia ser mais simples: dois campos (“e-mail” e “senha”), dois bo- tões (“registrar-se” e “logar-se”) e um link (“esqueci a senha”). Os desig- ners da empresa que contratou Jared Spool não conseguiam entender a razão de justamente aquela página representar uma enorme porta de saída e “abandono de carrinho” do site, tendo cerca de 75% dos usuários não completando a compra. Em testes de usabilidade, a equipe de Spool descobriu que o problema não estava no layout do formulário nem no próprio formulário em si, mas sim no que o cadastro representava para os consumidores: 1 “The $300 Million Button”, por Jared M. Spool (14 de janeiro de 2009): https://articles.uie.com/ three_hund_million_button/
  2. 2. Marketing Digital de Alta Performance250 • Além de não se lembrarem se já haviam se registrado no site, frustrando-se ao fazer várias tentativas de login, novos clien- tes resistiam à necessidade de se registrar, imaginando que iriam ser bombardeados por e-mail marketing indesejados ou, pior, ter a sua privacidade invadida. • Enquanto isso, entre os clientes já registrados no site, muitos tiveram dificuldade em lembrar o login e a senha e, em lugar de clicarem no link solicitando o lembrete da senha, registra- vam-se novamente, o que poderia explicar a média de 45% de usuários com mais de um cadastro no site. “O formulário, que tinha como objetivo facilitar o processo de compra, (...) ao invés, estava impedindo as vendas – muitas vendas!”, co- mentou Spool no post da UIE. A solução, então, sugerida pelo especia- lista foi trocar o botão “Registrar-se” por “Continuar”. Adicionaram ain- da a mensagem: “Você não precisa criar uma conta para fazer compras em nosso site. Simplesmente clique em ‘Continuar’ para avançar para o checkout. Para fazer suas compras futuras ainda mais rápido, você pode criar uma conta durante o checkout”. E foi assim, entendendo o usuário, que a loja aumentou o número de vendas em 45%, lucrando U$300 milhões a mais naquele ano! O que é UX? Proporcionar uma experiência agradável e fácil para o cliente final é fundamental no negócio de qualquer empresa, seja ela física-
  3. 3. Experiência do Usuário e Usabilidade 251 seja virtual. Você deve se lembrar de alguma situação em que desis- tiu de comprar algo ou finalizar um negócio pela complexidade e dor de cabeça que estavam gerando. Uma fila muito grande, dificuldade em achar o produto, muita burocracia. Tudo isso atrapalha e frustra o cliente, aumentando as chances de perdê-lo naquela transação ou, pior, para sempre. Empreendedores sabem melhor do que ninguém que é muito mais caro recuperar um cliente perdido do que conquis- tar um novo, certo? E é aí que entra UX (User Experience ou, simplesmente, Experiên- cia do Usuário): ao entender o usuário e seu modelo mental, o profis- sional de UX tem o papel de desenhar as melhores experiências para o cliente de seu negócio, facilitando sua vida e desburocratizando tarefas simples como encontrar um produto na sua loja virtual ou mesmo seguir o checkout para finalizar a compra. UX para conversão Não basta apenas facilitar o caminho para o seu usuário se não houver conversão, certo? O seu site ou aplicativo foi construído para atin- gir um objetivo, seja o de divulgar um conteúdo, vender produtos ou servi- ços, criar/aumentar base de cadastrados, receber pedidos de orçamento, gerar leads etc. Você espera que o usuário conclua uma tarefa ou ação no seu site, e essa conversão é o que vai determinar o sucesso ou não do seu site. O profissional de A especialista em UX Jennifer Winter, em um post do blog da empresa User Testing,2 faz uma analogia interessante em relação a isto: não adianta, diz ela, conseguir levar o cavalo até a água se o mesmo não bebê-la. “A conversão não é sobre como fazer alguém fazer algo, mas sim sobre oferecer um ambiente em que esse ‘fazer algo’ seja irresistível”, resume a especialista. E como construir esse ambiente irresistível para que o cavalo beba a água? 2 “How Good UX Leads To Conversions”, por Jennifer Winter (1º. de maio de 2015): https://www. usertesting.com/blog/2015/05/01/good-ux-leads-to-conversions/
  4. 4. Marketing Digital de Alta Performance252 Peter Morville,3 conhecido nome da área de UX, desenvolveu uma colmeia que apresenta os principais elementos para se desenvolver um ambiente irresistível: Pensar nesse diagrama de Morville, lembra Jennifer, nos fará refletir sobre pergun- tas básicas que vão influenciar o desenvolvi- mento do nosso produto: • O quão fácil é para o cavalo encontrar a água? • Será que ele precisa, ou mesmo quer a água? • Ele pode fisicamente chegar até a água? Entenda o seu usuário Para conseguir responder a essas perguntas, de novo, é impor- tante entender os seus usuários. E quando dizemos “entender seus usuá- rios”, não estamos falando apenas de levantar dados sociodemográficos sobre seus clientes. Precisamos ir mais a fundo e entender seus desejos, necessidades, frustrações, expectativas, comportamentos etc. Pensando na analogia do cavalo, proposto por Jennifer Winter, o objetivo dessas entrevistas (que chamamos User Interview) seria des- cobrir o que o seu usuário pensa não somente durante a experiência até o vale de água (navegação), mas o que ele pensa em relação à água (seu produto, conteúdo ou serviço) por si só: • Estou com sede? • Será que a água é potável? 3 Peter Morville é Presidente da Semantic Studios (semanticstudios.com), empresa de arquitetura de informação e consultoria em encontrabilidade. Fonte: Semantics Studio ( http://semanticstudios. com/user_experience_ design/)
  5. 5. Experiência do Usuário e Usabilidade 253 • Estou seguro? • Tenho amigos que tentaram beber desta água? O que eles pensam? • A água está convenientemente localizada? Existe outro vale mais perto ou mais fácil para eu acessar? A área de UX oferece uma série de técnicas, ferramentas e meto- dologias que vão ajudar na missão de entender melhor seu usuário. Use ferramentas de Analytics Se você já tem um site, é importante os dados já gerados com fer- ramentas de Analytics. O Google Analytics (www.google.com/analytics), por exemplo, pode ajudar a entender o comportamento dos usuários no site: links mais clicados, páginas mais acessadas, tempo de permanência no site, pontos de conversão e de saída/abandono.4 Todos esses dados vão ajudar o UX Designer a tomar decisões importantes no re-design do site (ainda que seja apenas a alteração em um único botão). Tela do Google Analytics. Fonte: Google Analytics Academy5 4 Vale ler sobre como definir metas para o seu site usando o Google Analytics: https://support. google.com/analytics/answer/1012040?hl=pt-BR 5 https://analyticsacademy.withgoogle.com/course/1/unit/6/lesson/1
  6. 6. Marketing Digital de Alta Performance254 Outra ferramenta muito bacana e que tem sido cada vez mais usa- da por UX Designers é o Hotjar (www.hotjar.com). Com essa ferramenta, você pode visualizar vídeos das ações (cliques, rolagem da página) dos seus usuários, conferir heatmaps (mapas de calor), mais a possibilidade de se criar pesquisas, enquetes etc., além de também poder analisar fu- nis de conversão. Fonte: Hotjar Product Tour6 O Mixpanel é outra ferramenta interessante que monitora even- tos no seu site ou aplicativo, ou seja, ações dos usuários que não geram visualização de página. Outro ponto bacana do Mixpanel é a possibilida- de de análise de dados em tempo real. Fonte: Mixpanel Blog7 6 https://www.hotjar. com/tour 7 http://blog.mixpanel. com/2015/11/17/ introducing-predict-see- who-will-convert-before- they-do/
  7. 7. Experiência do Usuário e Usabilidade 255 O Formisimo8 é uma ferramenta especializada em monitorar abandono de formulários de checkout. Além de analisar o que os usuá- rios estão fazendo no checkout on-line, formulários de inscrição e de consulta, também mede a taxa de abandono de um site. Fonte: Formisimo Outra ferramenta parecida como Formisimo é o Lucky Orange (www.luckyorange.com) que também grava a navegação de usuários em vídeo. Fonte: LuckOrange site 8 http://www.formisimo.com
  8. 8. Marketing Digital de Alta Performance256 Essas são apenas algumas ferramentas que podem ser usadas na coleta de dados e de informações sobre o comportamento do seu usuá- rio. É oportuno lembrar que existem inúmeras ótimas ferramentas de Analytics no mercado como SessionCam (www.sessioncam.com), Cra- zyEgg (www.crazyegg.com), KISSmetrics (www.kissmetrics.com) entre outras.9 Vale discutir com o profissional de Analytics do seu time. O im- portante aqui para o processo de UX é coletar informações relevantes para a tomada de decisão no design do seu produto ou serviço digital. Pesquise e entreviste seus usuários Além de usar ferramentas de Analytics no seu site, é importante ouvir diretamente do seu usuário ou usuário em potencial.10 Aqui a ideia é entender o comportamento do seu usuário de forma mais contextuali- zada. Com as ferramentas de Analytics, você já conseguiu entender como é a navegação do usuário no seu site ou aplicativo, agora, vamos enten- der os porquês. Fazer uma pesquisa on-line (Survey), pode ser o ponto de parti- da. Existem inúmeras ferramentas no mercado como Google Form (goo- gle.com/forms/about), Survey Monkey (surveymonkey.com), Typeform (www.typeform.com/), Polldaddy (polldaddy.com). É importante que as questões da pesquisa sejam rápidas, objetivas e fácil de entender. Além das pesquisas, é interessante realizarmos User Interview. O objetivo aqui é ter a chance de conversar individualmente com usuários do seu site ou potenciais usuários que representem seu público. Para re- crutar os participantes (fase crucial desse processo de User Interview), é importante entender bem quem é o seu público-alvo, onde mora, quan- tos anos tem, onde trabalha, estuda etc. Além dos porquês de seu comportamento durante a navegação, é uma ótima oportunidade para entender melhor o contexto de utilização do seu site: onde o usuário está quando acessa seu site ou aplicativo? Em que momentos do dia ou da semana ele acessa? Quais são suas motivações? etc. 9 Algumas ferramentas para análise de formulário aqui: https://www.conversioner.com/blog/6- practical-tools-improve-web-forms 10 Vale ler esse post sobre metodologias para se entender o usuário: http://www.taqtile.com.br/ taqtile/day/7/year/ueww2q28sdglbkyjnhywkfhzr6skg8
  9. 9. Experiência do Usuário e Usabilidade 257 As entrevistas podem acontecer on-line ou pessoalmente em um laboratório, em um local escolhido pelo usuário (ou onde eles podem ser encontrados) ou mesmo em seu escritório, embora alguns especialistas acreditem que pelo fato de estarem na sua empresa, possam ser tenden- ciosos. Eu diria que o resultado dessa entrevista independedo local, mas do foco do trabalho e da experiência e do entrevistador. Existem ainda outras metodologias de entrevistas (que, inclusive, podem ser combinadas com testes de usabilidade) como a Etnografia, quando o pesquisador acompanha o diaadia do usuário; o Contextual Enquiry, quando o pesquisador vai até um local onde pode estar seu pú- blico-alvo como praia, shopping, livraria, restaurante (tenho o cuidado de pedir autorização no caso de ambiente comercial); ou Diary Study, quando o usuário se compromete a desenvolver um diário que contem- ple a utilização do site ou do aplicativo. Investigação Contex- tual (Contextual inquiry): quando o entrevistador vai até o local onde os seus usu- ários estão no mundo físico. É importante lembrar degravartodasasentrevistas, além de fazer anotações du­ rante a conversa, com o consen­timento por escrito do entrevistado. Vale também presentear o entrevistado com algum brinde, valor em dinheiro, voucher ou giftcard. O valor varia muito com o público entrevistado. User Interview (Entrevista com Usuário) em laboratório Foto de Tielly Ogura
  10. 10. Marketing Digital de Alta Performance258 No caso de entrevistas on-line, existem algumas boas ferramen- tas que podem ajudar nessa tarefa como o Silverback, Morea etc. além da possibilidade de usar ferramentas de videochat como Skype, Google Hangout ou mesmo o Messenger, do Facebook. Só não se esqueça de gra- var esses vídeos chats! Ao final da entrevista, lembre-se de confirmar com o usuário sua disponibilidade para fornecer informações adicionais ou mesmo partici- par de uma segunda rodada, desta vez testando o redesenho. Faça testes de Usabilidade O Teste de Usabilidade pode ser combinado com o User Inter- view. Assim, você pode aproveitar melhor seu tempo com o mesmo usuá- rio. Tente apenas não alongar demais o tempo com o usuário, o ideal seria levar entre 45 e 60 minutos. É importante ter o roteiro do teste preparado, previamente. Ain- da que ele não seja seguido à risca, é importante saber qual é o objetivo do teste e quais perguntas queremos responder. Peça para o usuário con- tar suas primeiras impressões ao entrar no site ou no aplicativo, no caso de ele ainda não conhecer seu serviço ou produto. Caso seja um já usuá- rio do seu site ou aplicativo, peça para mostrar onde costuma navegar. Outro ponto importante é lembrar ao usuário, no início do teste, que a participação dele tem como objetivo melhorarmos a navegação do produto ou serviço testado, ou seja, o que está sendo testado é o site ou o aplicativo e não o usuário. Deixe-o à vontade para falar (não interrompa suas falas) e incentive-o a “pensar em voz alta”, permitindo algum tempo de silêncio para que ele possa pensar, enquanto você analisa a sua nave- gação. Para o teste de usabilidade, o especialista (e papa da Usabilidade) Jakob Nielsen,11 sugere cinco usuários como número ideal para se obter resultados válidos. A tendência, de acordo com ele, é que os resultados comecem a se repetir a partir do sexto usuário. 11 https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
  11. 11. Experiência do Usuário e Usabilidade 259 Fonte: Nielsen Norman Group O teste pode acontecer presencialmente, em um la- boratório, na sua empresa, ou em algum lugar indicado pelo usuário (casa ou escritório), ou utilizando plataformas on-line, como já foi falado. Esses seriam testes moderados, quando há a participação do entrevistador durante o teste. Há também a possibilidade de se fazer testes não-moderados com ferramentas on-line, como o UserTesting.com ou o UserZoom.co.uk, UsabiltyHub.com, Loop11.com, WhatUsersDo.com, entre tantos outros.12 Neste caso, o UX Resear- cher poderá usar o mesmo roteiro de teste, definindo tarefas que de- vem ser realizadas (e que esta- rão sendo testadas) pelo usuá- rio on-line. O usuário é incentivado a falar/explicar suas ações durante a navegação, que é toda gravada. Existem ainda outras metodologias de testes que você pode usar combinadas com User Interview como: o CardSorting (atividades com cartões para testar a or- ganização de áreas ou do conteúdo do seu site) ou o Tree Testing (para testar a árvore de navegação do site). 12 Lista bacana de ferramentas para Teste de Usabilidade: http://remoteresear.ch/tools/ Fonte: Loop11.com Fonte: Noble Desktop (https:// www.nobledesktop.com/classes/ prototyping)
  12. 12. Marketing Digital de Alta Performance260 Desenvolva Personas Além de lúdica, criar Personas é uma técnica que parece simples, mas muito poderosa. É uma ferramenta amplamente usada por profis- sionais de Marketing, Design, Produtos etc. A ideia aqui é criar um per- fil detalhado de um usuário que represente grupos do seu público-alvo. Para isso, é importante ter o maior número de informações possíveis so- bre seus usuários, coletados com as ferramentas de Analytics, nas entre- vistas, pesquisas, testes de usabilidade, além de informações do seu SAC, do time de venda, da área de Marketing etc. Para construir as Personas,13 é interessante fazer uma atividade coletiva, reunindo profissionais de diferentes áreas do seu time. É incrí- vel como cada área pode ver aspectos específicos e distintos da outra. Reunir esses profissionais, nessa atividade, vai ajudar a todos a olhar também o seu público-alvo por outro ponto de vista. Fonte: Fakecrow.com Não se preocupe se você for uma “eu-quipe”, o importante é fa- zer o esforço de olhar seu público-alvo por diferentes perspectivas. Ou seja, você pode desenvolver a Persona em uma atividade individual, o importante é só ter certeza que você está usando informações variadas e 13 Vídeo bacana sobre Personas: http://uxmastery.com/create-ux-personas/
  13. 13. Experiência do Usuário e Usabilidade 261 de diferentes fontes (ferramentas de Analytics, nas entrevistas, testes de usabilidade, Surveys etc. etc. etc.). O formato e as informações que vão compor a Persona depende- rão muito do seu produto ou serviço. Mas é importante que seja o mais personalizado possível: dê um nome para a sua Persona, adicione uma foto, defina idade (não faixa de idade), local onde vive, o que estuda, se trabalha, que contenha informações sobre quais são os seus desafios diá- rios (e que, provavelmente, seu serviço ou produto vai solucionar) e mo- tivações, que soluções busca, qual seu nível de acesso a devices, o quanto costuma ficar on-line etc. Fonte: Ux-Lady (http://www.ux-lady. com/diy-user- personas/ )
  14. 14. Marketing Digital de Alta Performance262 É importante que a persona represente seu público-alvo de for- ma realística (é preciso acreditar que se trata de uma pessoa real), que reflita os padrões levantados nas suas pesquisas e análises anteriores, baseadas em dados e informações coletadas. Quando estivermos dese- nhando o site ou o aplicativo, criando soluções com o design é essa Per- sona (ou Personas) que vamos ter em mente. Prefiro desenhar os meus próprios templates de Personas,14 mas existem algumas ferramentas on-line para ajudá-lo nessa tarefa, como o Xtension.com, MakeMyPersona.com (do Hubspot), Userforge.com etc. Fonte: Userforge. com/ Fonte: Extension.com 14 Um Pinterest board com alguns templates: https://www.pinterest.com/kooj/personas/
  15. 15. Experiência do Usuário e Usabilidade 263 Proporcione uma experiência incrível Você já sabe bastante a respeito do seu usuário e todas estas in- formações irão ajudá-lo a tomar decisões de design que contribuirão para o sucesso do seu site com foco em conversão e melhor experiência. Nessa fase, é importante considerar alguns pontos: Construa sites responsivos e acessíveis O uso de dispositivos móveis para acesso à internet cresce verti- ginosamente no Brasil e no mundo. Mais e mais pessoas têm se sentido confortáveis em consumir conteúdo e fazer transações pelos seus smar- tphones e tablets. Sem contar a penetração dos chamados “wearables” (como relógios conectados à internet e outros dispositivos). Nesse novo contexto, planejar seu website para ser responsivo é mandatório. Segundo o relatório Tendências Internet de Mary Meeker, 45% das operações realizadas na Groupon vieram de dispositivos móveis a partir do início de 2013 (contra menos de 15% dois anos antes). Na Etsy, 50% do tráfego de usuários veio de dispositivos móveis a partir do início de 2014.
  16. 16. Marketing Digital de Alta Performance264 Criação de Sites Responsivos (ou seja, que se adaptam confor- me o device utilizado), Desenvolvimento de Sites para Smartphones, M-Commerce e Inteligência Mobile Marketing para Criação de Sites Res- ponsivos. Pensar na otimização do seu site para dispositivo móvel pode ser uma grande oportunidade. Mas é importante lembrar que as pessoas usam o celular ou o tablet de formas diferentes do desktop/laptop. Leve em consideração também o contexto da utilização do device: é um exe- cutivo em seu escritório? Um médico com iPad em uma clínica? Um ado- lescente com seu celular no ponto de ônibus? Um estudo realizado pelo Google (2012)15 descobriu que as pes- soas usam smartphones nos seguintes contextos: • “A caminho” (de casa, do trabalho etc.) e/ou em casa • Para comunicar e se conectar • Em curtos períodos • Quando precisam de informações de forma rápida e imedia- tamente Tablets são igualmente utilizados para o entretenimento e nave- gação. Desktops, no entanto, são usados para tarefas mais sérias ou de investigação intensiva. De acordo com o estudo, os smartphones são o ponto de partida mais comum para as seguintes atividades on-line: • Busca de informações específicas • Navegação • Compras • Rede social 15 http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
  17. 17. Experiência do Usuário e Usabilidade 265 Ao desenhar um site, considere também os usuários que contam somente com o celular para acessar a web,que não têm escolha a não ser usar seu telefone para todos os tipos de tarefas. Fonte: Wimimedia(https://commons.wikimedia.org/ wiki/File:Responsive.png) Fonte: Wekipedia(https:// en.wikipedia.org/ wiki/Responsive_ web_design) Para ajudar a analisar se o seu site é responsivo ou não, o Goo- gle lançou a ferramenta Google Resizer (design.google.com/resizer). Existem outras ferramentas que também ajudam nessa tarefa como o DesignModo.com (designmodo.com/responsive-test), o Semalt (semalt. design) e o SmartScreenresolution (whatismyscreenresolution.net/mul- ti-screen-test), só para citar alguns. Outro ponto importante é pensar na Acessibilidade para o seu site:16 considere que entre o seu público, você poderá ter usuários com 16 Cartilha sobre Acessibilidade: http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha- w3cbr-acessibilidade-web-fasciculo-I.html
  18. 18. Marketing Digital de Alta Performance266 baixa visão ou audição, daltonismo etc. Pensar em acessibilidade já dei- xou de ser “luxo” há muito tempo. Existem alguns especialistas em Acessibilidade,17 além de sites e informações on-line18 e ferramentas (como o Toomino,19 que adicio- nam suporte de voz à navegação do site: o Web Acessibility Checker,20 o Wave21 ) poderão ajudá-lo nessa missão. O importante é não ignorar a questão da Acessibilidade no seu projeto de Design. Melhore o tempo de carregamento O tempo em que o usuário tinha paciência em aguardar o carre- gamento de uma página on-line (os que são da época da conexão discada, sabem o que estou dizendo eheheh) se foi. Segundos extras no carrega- mento da página podem frustrar seu usuário, aumentando as chances de abandono. Um estudo feito pela Universidade de Massachusetts mostrou que os serviços de streaming de vídeos (como YouTube e Netflix) podem ganhar ou perder usuários em questão de segundos. “Descobrimos que as pessoas são pacientes em até dois segundos”, afirmou à NPR News o professor de ciências da Universidade Ramesh Sitaraman.22 O diretor de UX da R/GA NY, Fabrício Teixeira, listou no Blog de AI alguns dados interessantes sobre carregamento: • Usuários esperam as páginas carregarem por dois segundos. Depois do terceiro segundo, até 40% dos usuários abando- nam o site.23 • 85% dos usuários de dispositivos móveis esperam que o car- regamento seja tão ou mais rápido do que sites no desktop.24 17 http://acessodigital.net/art_horacio_como_testar_acessibilidade_parte_1.html 18 http://www.acessibilidadelegal.com/ 19 http://www.toonimo.com/solutions/for-accessibility/ 20 http://achecker.ca/checker/index.php 21 http://wave.webaim.org/ 22 http://connecticut.cbslocal.com/2013/01/10/study-streaming-video-viewers-lose-patience- after-2-seconds/ 23 http://www.mcrinc.com/Documents/Newsletters/201110_why_web_performance_matters.pdf 24 http://designingforperformance.com/performance-is-ux/
  19. 19. Experiência do Usuário e Usabilidade 267 • A Amazon notou que cada 100 milissegundos de espera re- presenta um declínio de 1% nas vendas.25 • A Akamai relatou que 75% dos compradores on-line que ex- perimentam um problema, como um congelamento local, link quebrado, tempo longo para carregar, ou com um processo de pagamento complicado, não comprarão a partir desse site.26 • O Google perdeu 20% de lucratividade e tráfego de usuários por causa de um aumento de meio segundo no tempo de car- regamento de suas páginas de resultados.27 • A Gomez estudou o comportamento comprador on-line e descobriu que 88% dos consumidores on-line são menos propensos a retornar a um site depois de uma experiência ruim. O mesmo estudo descobriu que “em momentos de pico de tráfego, mais de 75% dos consumidores on-line partiram para o site de um concorrente em vez de esperar”.28 Um especialista em front-end pode ajudá-lo nessa tarefa. Mas como bem lembrou Teixeira em seu post “Designers podem contribuir para a otimização da performance de uma página,”29 e que estão no livro “Design For Performance”30 (O’Reilly), por Lara Callender Hogan. Quan- tidade de tipos e de tamanhos de fontes; quantidade, tamanho e peso de imagem; reutilização de elementos e outras decisões de design impac- tam no carregamento de páginas. Essas decisões podem (e devem) ser compartilhadas com o desenvolvedor. Se você já tem um site e tem a missão de otimizá-lo, pode usar o Pingdom (http://tools.pingdom.com/fpt/) para conferir o tempo de car- regamento de cada página/elemento. 25 https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28. ppt?attredirects=0 26 Idem 28 (http://designingforperformance.com/performance-is-ux/) 27 http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html 28 Idem 28 (http://designingforperformance.com/performance-is-ux/) 29http://arquiteturadeinformacao.com/user-experience/a-importancia-da-performance-das- paginas-na-experiencia-do-usuario/ 30 http://shop.oreilly.com/product/0636920033578.do
  20. 20. Marketing Digital de Alta Performance268 Outro site bacana que pode ajudar nessa tarefa é o “PageSpeed Insights”, ferramenta gratuita disponibilizada pelo Google: https://deve- lopers.google.com/speed/pagespeed/insights/?hl=pt-BR Além de verificar o tempo de carregamento da página, o PageSpeed também dá dicas de como melhorar as páginas. Outro ponto interessante: é possível verificar a otimização do site para dispositivos móveis.31 Screenshot da tela de PageSpeed Ajude o seu usuário a economizar tempo Como vimos, em um mundo mais e mais acelerado, o usuário, com menos tempo, tem cada vez menos paciência ao navegar no seu site ou aplicativo.32 Não há mais tempo a perder pensando o que deve ser feito no seu site, por isso você tem ouvido tanto se falar de designs que sejam “simples e intuitivos” (dá-lhe, Steve Jobs!)Sugiro fortemente a leitura do livro “Não me faça pensar”, de Steve Krug, que apresenta a importância de se facilitar ao máximo a experiência do usuário. Além do tempo de carregamento, por exemplo, é importante fa- cilitar os caminhos de navegação para o usuário completar as tarefas necessárias (como finalizar uma compra, por exemplo). É importante que a Arquitetura de Informação do site seja bem redonda (ferramentas como “Card Sorting” e “Tree Testing” podem ajudar nessa tarefa): tenha umapriorização e hierarquização adequadas, conte com uma navegação Global clara e opções do usuário voltar para pontos onde iniciou na na- vegação, como os “Breadcrumbs” (ou “migalhas de pão”) que mostram o caminho seguido pelo usuário. 31 https://www.thinkwithgoogle.com/intl/pt-br/articles/speed-matters-optimizing-mobile.html 32 http://designingforperformance.com/performance-is-ux/
  21. 21. Experiência do Usuário e Usabilidade 269 Uma maneira de ajudar o seu usuário a economizar tempo é au- tomatizar campos de formulários, por exemplo, o campo do CEP deve vir antes do preenchimento do endereço. Assim, quando preencher o campo do CEP, os outros (cidade e Estado) serão preenchidos automaticamente pelo sistema. Outra sugestão é que o cursor vá ao campo seguinte, assim que o anterior for preenchido. A função “autocomplete” também pode ajudar o usuário a economizar tempo no preenchimento de campos de formulário e de Buscas. As informações também podem ser salvas para facilitar a vida do usuário quando ele voltar ao seu site. Vale também garantir um acesso fácil ao contato de suporte ou chat de atendimento. O usuário se sente mais confortável sabendo que poderá pedir ajuda em caso de necessidade. Siga tendências em design Além de funcional e fácil de navegar, seu site também precisa ser agradável aos olhos. Aqui, já entramos mais na função do Web Designer, que vai cuidar da Arte do site. Mas UX pode e deve influenciar nessas decisões sempre tomadas em conjunto. Tenha certeza, por exemplo, de escolher uma palheta de cores adequada que comunique sua mensagem e esteja alinhada à sua marca. É importante também ficar atento ao estilo da Arte e estrutura do site (flat? Em cards? Padrão vertical com scroll? Com hero video? Slides framework?): independentemente de ter um público mais moderno ou mais tradicional, você não quer que seu site tenha uma “cara datada”, feito em “mil novecentos e guaraná com rolha”, como dizem por aí. Fique atento aos textos e conteúdo Mais papel do webwriter do que do UX Designer, produzir um bom conteúdo faz toda a diferença na experiência do usuário no seu site ou aplicativo. Imagens com qualidade, textos bem escritos e (revisados), transmitem credibilidade, e engajam e estimulam o seu usuário a com- pletar a tarefa no seu site e retornar.
  22. 22. Marketing Digital de Alta Performance270 Além de um texto bem escrito, com um tom e voz adequados (um redator ou um jornalista poderá ajudar nessa tarefa), é importante tam- bém observar como ele está organizado na página e ao longo da navega- ção do site. O formato do textoe o modo como ele está organizadoajudam o usuário ao longo da navegação, como se “pegasse em sua mão” para levá-lo pelo caminho mais adequado. Outro ponto importantíssimo é quanto ao “call-to-action”.33 Além de cores e posições, tamanhos e cores adequadas, é importante também ficar atento ao texto: é sabido que se usa verbos nesses links e botões, daí, vale uma definição de padronização: serão usados verbos no Intran- sitivo (“Assinar Newsletter”) ou no Imperativo (“Assine nossa Newsle- tter”). Vale lembrar também que, com o aumento de acesso e a maior familiaridade dos usuários com produtos e serviços on-line, está em de- suso termos como “Clique Aqui”, com a ajuda do Designer (que criará a Arte de seu site ou aplicativo), o botão ou link deveria falar por si só que é um elemento clicável. Vale também lembrar a importância dos textos de feedback, aque- les quando o usuário completa alguma ação bem-sucedida ou quando acontece algum erro, por exemplo, ao faltar um campo a ser preenchido. É fundamental que esses textos sejam diretos, objetivos e que expliquem de forma simples. Escolha a Tipografia adequada Como já foi dito, a escolha da fonte pode impactar na performan- ce do site. Além disso, essa definição pode também ser determinante na comunicação do site, uma vez que, assim como cores, fontes diferentes comunicam mensagens diferentes. A escolha correta das fontes também é determinante para a legi- bilidade do seu site, assim como o número de caracteres por linha (su- gere-se entre 44 e 75, sendo 66 considerado ideal) e do tamanho das entrelinhas e como o texto está organizado nas páginas (em blocos, justi- ficado, alinhado à esquerda etc.). O tamanho da fonte também vai ajudar a determinar hierarquização. 33 Uma análise de diferentes links e botões de CTA feita pela Hubspot: http://blog.hubspot.com/ marketing/great-call-to-action-examples#sm.0000qby632ilydk2ru7206f5donsq
  23. 23. Experiência do Usuário e Usabilidade 271 Uma dica34 importante é não usar mais do que dois tipos de fon- tes. Geralmente,utiliza-se um para o corpo do texto e outro para os bo- tões. O tamanho da fonte vai ajudar a determinar hierarquização, além de diferenciar o corpo do texto de títulos. Assim como a formatação, como bold ou itálico, pode ser usada para definir intertítulos e legendas de fotos. O importante é que haja um padrão na formatação e consistên- cia no tamanho. Lembre-se: tanto o conteúdo (texto, fotos, elementos) e as fontes precisam adequar-se também aos dispositivos móveis. Defina uma iconografia consistente A iconogrografia do seu site também é ponto-chave para a boa comunicação do seu conteúdo e do seu site com o seu usuário. Deve fa- cilitar a navegação e promover a rápida intepretação do conteúdo e das ações possíveis (especialmente de CTAs). É importante que a iconografia do seu site seja consistente e padronizada para facilitar o aprendizado de seus significados. 34 Mais dicas aqui: https://medium.com/product-design-ux-ui/26-digital-typography-rules-for- beginners-a04c6a5aaff3#.rcopl2hmc E aqui: https://www.usertesting.com/blog/2014/08/06/ choosing-the-right-font-a-guide-to-typography-and-user-experience/ Print Screen do site thenounproject.com
  24. 24. Lembrando que, como já foi dito, não queremos que o seu usuário perca tempo no site, especialmente tentando interpretar os ícones. Um site que pode ajudar nessa tarefa é o The Noun Project (the- nounproject.com), onde é possível encontrar milhares de ícones criados por designers do mundo todo. Não relaxe! Não pense que o trabalho de UX parou aqui! Estamos vivendo uma era de mudanças constantes e em velocidade ímpar: os contextos mudam, os devices mudam, seus usuários mudam, suas necessidades e dificuldades mudam… É importante manter um ciclo frequente de testes, além de analisar constantemente os dados coletados pelas ferramentas de Analytics. É necessário também testar o desenho do site ou do aplicativo antes de lançá-lo, usando as mesmas técnicas e metodologias descritas quando foi falado de Entrevistas e Testes de Usabilidade. Faça testes A/B E se há dúvidas entre duas soluções de design, a sugestão é rea- lizar testes A/B. A ideia aqui é testar essas duas soluções diferentes com Fonte: The Next Web (http://thenextweb.com/dd/2015/01/04/practical-tips-web- mobile-usability-tests/#gref)
  25. 25. Experiência do Usuário e Usabilidade 273 os usuários reais do site. Assim, as duas opções são publicadas: um gru- po de usuários verá a opção A e o outro grupo de usuários verá a opção B. Após um período com as duas opções no ar, verifica-se a que desem- penhou melhor e que será utilizada a partir de então. Ou seja, testes A/B são uma das formas mais eficientes de validação de hipóteses, principal- mente quando se trata de otimizar conversões. A ferramenta Optimizely.com poderá ajudar nessa tarefa e deve ser usada tanto para sites como para aplicativo móvel. Fonte: printscreen de tela do site optimizely.com Já o Visual Website Optimizer (vwo.com) permite testes A/B com diferentes URLs e com mais de uma variável. Conta com ferramenta para análise de Langing Page, heatmaps, e relatórios segmentados para cada tipo e tópico da pesquisa. Além da possibilidade de direcionar a pesquisa para usuários específicos. Fonte: blogo do
  26. 26. Marketing Digital de Alta Performance274 Atualize-se sempre! Em um mundo que não para de mudar, além de se manter atuali- zado sobre o seu usuário – que pode alterar o seu comportamento cons- tantemente de acordo com o contexto ou surgimento de novas platafor- mas e até de concorrentes – é preciso estar atualizado sobre UX, novas técnicas e ferramentas. Para ajudá-lo nessa tarefa, vou manter uma lista de blogs e de livros que podem ser interessantes nessa Missão UX: uxpressocafe.com/ LeituraUX.

×