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

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/

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-

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/

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/)

• 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

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/

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

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

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
consentimento 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

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/

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)

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/

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/ )

É 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/

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.

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

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

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/

• 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

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/

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.

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

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

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)

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

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.

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

Mais conteúdo relacionado

Mais procurados

Destaque

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

Mais de Lisandra Maioli

Último

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