UX Cap3 Protótipos e Design RevFinal
UX Cap3 Protótipos e Design RevFinal
UX Cap3 Protótipos e Design RevFinal
com
anacmarques2020@gmail.com
Protótipos e Design Página 2
LISTA DE FIGURAS
SUMÁRIO
3 PROTÓTIPOS E DESIGN
Antes de mais nada, vale a pena falarmos um pouco sobre design persuasivo,
ou seja, aquele design que tem a função de fazer seu usuário encontrar o que ele
precisa e gostar tanto de estar ali, que isso vai ser convertido em leads, visitas,
vendas, cadastros e todas aquelas coisas maravilhosas que você espera que
aconteça. O negócio é que para ser persuasivo ele precisa passar credibilidade 😊.
De olho na credibilidade
É óbvio, mas não é simples. Aqui entra todo o cuidado com a organização do
seu conteúdo, o título das categorias e as cores que você usa no site. Lembre-se de
que tem hora e medida certa para usar a criatividade, então não adianta inventar
coisas e prejudicar a sua usabilidade, como dar nomes exóticos para suas categorias
ou usar ícones totalmente desconhecidos para representar seus produtos. Seu
usuário precisa saber onde clicar.
Olha só: este é o site mobile do dr.consulta, rede de centros médicos de São
Paulo. Eles optam por um design mais clean e usam tons mais claros para comunicar
confiança para seu público.
E aqui temos o site mobile da Clínica da Vila, também de São Paulo, que opta
por colocar mais informação e mais cor no site, o que torna tudo um pouco mais
confuso.
Importante: não se esqueça de que tudo o que está no site deve ser
constantemente atualizado. Informação e imagens ultrapassadas com certeza só
vão causar dúvidas e descrença.
E tem este caso aqui, do site do Estadão, que abre logo um pop-up no mesmo
instante em que o usuário tenta acessar uma notícia do site.
Legal, você já fez a sua parte: um layout de qualidade, com todos os seus
produtos ou serviços bem explicados, com fotos e vídeos atuais e proprietários, e se
preocupou em deixar seu usuário à vontade no seu site ou app. O que não é tudo.
Isso é apenas você falando do seu próprio produto.
Os usuários querem cada vez mais saber quais são as opiniões dos outros
sobre seu produto ou sobre a empresa. Tudo bem, mas colocar casos de sucesso ou
depoimentos de outros usuários no site não vale? Vale sim, pode colocar. Mas não
significa que deixarão de procurar por mais coisas a seu respeito nas redes sociais,
sites de reclamação e outras mídias (jornais, revistas, etc.). Então, sempre que puder,
faça o link desses conteúdos no seu site e isso vai demonstrar que você é realmente
confiável.
Neste exemplo, temos o site do Dog Hero, que usa o depoimento de clientes
como forma de validar seu serviço e, na sequência, usa links de mídia externa para
também endossar o produto.
Até aqui, tudo certo com nossa credibilidade? Então vamos falar de protótipo!
3.2 Protótipo
3.2.1 Wireframe
3.2.2 Protótipo
Ele já é uma reprodução um pouco mais fiel da sua página, porque pode ser
navegável. É bastante usado para fazer teste de usabilidade e, então, já se torna
possível identificar melhorias no fluxo, nas informações ou qualquer outro detalhe na
arquitetura da informação.
3.2.3 Mockup
Ele tem uma visualização estática, mas já com o layout bem definido, muito
próximo de como será o projeto final. É com ele que se busca feedback para os
retoques finais de layout ou que se tenta vender algum projeto.
Com isso, você pode discutir sugestões com o time e testar todas elas com
seus usuários, coletando feedback e aprimorando tudo o que foi desenhado (teste de
usabilidade é assunto para um capítulo inteiro, mas já fica a dica). Isso vai evitar que
você use todo seu achismo para criar coisas que você pensa que vão ser super-legais,
mas que podem não funcionar para seus usuários. Você gasta tempo e dinheiro à toa.
😊.
Vamos por partes? Vamos! Mas se prepare, porque há bastante coisa para
pensar 😊.
Pensar onde deve estar todo o conteúdo que você separou é fundamental.
Entre desktop, mobile e app existe uma diferença bem grande, que vai desde o espaço
para as informações até o motivo e a forma como seus usuários usam seu produto
em cada dispositivo. Não arrisque fazer um layout desktop que depois vai se
“encaixar” no mobile ou no seu app. Já aviso que a chance de não dar certo é imensa.
Falaremos mais sobre isso depois.
seu usuário não entenda o que significa. Então, para que reinventar a roda, não é
mesmo?
3.3.4.1 Design
• Cores e contraste.
3.3.4.2 Usuários
• Idade.
• Habilidade cognitiva.
• Audição e visão.
Bem, depois de pensar nesses pontos todos, você pode de fato, iniciar seu
wireframe, protótipo e depois o layout da sua página. Agora, vale pensar bem sobre
as diferenças entre site mobile, desktop e aplicativo.
Como já falamos, quando você iniciar o design de uma página, precisa pensar
se ela será para um site mobile, desktop ou app. Você pode construir um design para
todos eles, mas se atentando à melhor usabilidade para cada um dos meios. Leve em
consideração, sempre, onde está a maior parte dos seus usuários para definir as
prioridades do que deve ser criado. Se 80% dos acessos são feitos pelo site mobile,
você não vai priorizar melhorias no site desktop?
O site responsivo é uma versão única de site que se adapta aos diferentes
tamanhos de tela, seja desktop, tablet ou celular. Conforme o dispositivo, os
elementos da tela são reposicionados para facilitar a leitura e aproveitamento do
espaço. Tem a vantagem de facilitar a manutenção e atualização do conteúdo, uma
vez que feito isso já está tudo adaptado para todos os dispositivos. Ele pode ser
vantajoso pelo fato de o Google gostar de sites responsivos (porque privilegiam a
experiência do usuário), deste modo, essas páginas se tornam mais amigáveis para
o ranqueamento no Google.
O site mobile é uma segunda versão do seu site, feito só para o acesso por
celular, ou seja, ele não vai funcionar bem em um desktop. A parte boa de fazer um
site mobile é que ele pode ser construído pensando apenas na experiência no celular,
o que vai deixar o site muito mais amigável e útil para seus usuários. A parte ruim dele
é que vai exigir mais da atualização e manutenção, por ser uma versão diferente do
desktop.
IMPORTANTE: Vale destacar que se você optar por um site mobile, ele pode ter
uma versão editada, ou seja, diferente da versão desktop que pode conter muito
mais detalhes, mas nunca uma versão limitada.
Por exemplo: há algum tempo, a versão mobile da Netflix não tinha todas as
opções de filmes que a versão desktop.
Esse tipo de experiência pode ser bem prejudicial para o usuário, concorda?
Apps estão na moda, não é? Todo mundo quer um aplicativo para chamar de
“seu”, mas nem sempre faz sentido ter um. Depende muito do seu produto e do seu
público, então analise bem antes de investir. Não é barato ter um app. Isso porque há
diferenças de comportamentos e design entre iOS, Android ou Windows Phone, então
é preciso personalizar cada um deles, e isso leva tempo e usa recursos do seu time.
Bom, todo mundo sabe que o acesso mobile só cresce e já representa a maior
parte dos acessos recebidos por vários sites. Nada melhor do que focarmos um pouco
mais nas dicas para design mobile.
Como já mencionado, o mundo está ficando cada vez mais mobile e aquela
premissa de que devemos pensar “mobile first” ou “mobile only” é real. Então, vamos
nos aprofundar nesse tema, combinado? Let’s go!
Você sabia que o dedo de uma pessoa tem, em média, 16-20 mm? Isso é
importante para considerar o tamanho dos locais de clique no seu site ou app.
Se a zona de clique ficar pequena demais ou perto demais uma da outra, seu
usuário pode ter problemas para cumprir sua missão e vai desistir muito mais rápido
do que desistiria no desktop. Ou pior, ele pode clicar errado e fazer uma opção ruim
sem querer. Já pensou se por causa da zona de clique ele aceita, sem querer, a
solicitação de amizade da ex-namorada no momento em que a atual namorada está
dando aquela geral nos amigos dele no Face? Vai dar problema!
E para não correr esse risco, o seu usuário vai usar o app assim:
Você não quer que seu usuário passe por isso, não é? Então, procure deixar
pelo menos 1 cm x 1 cm de área de clique.
A primeira é sobre como seu usuário consome o conteúdo quando acessa seu
produto mobile. O que ele vê primeiro? Quais seriam as áreas “premiums” do seu
layout?
Algumas pessoas seguram com uma mão só e usam só o dedão para clicar,
outras seguram com as duas mãos e usam o indicador, e ainda tem quem use as duas
mãos e os dois dedões para digitar ou navegar no site.
Como falamos, ser fácil de clicar não significa ser notável. Isso porque a forma
como as pessoas consomem o conteúdo na tela é um pouco diferente da zona de
clique. Nem sempre sua informação mais relevante vai ocupar a melhor zona de
clique, caso não seja o lugar onde as pessoas visualizarão aquela informação. Já os
botões mais importantes devem exigir menos precisão e estar nas áreas mais fáceis
de clicar. Mas cuidado! Há botões que precisam estar bem colocados porque um erro
pode ser fatal, como naquele exemplo dos botões de aceitar ou recusar um convite
de amizade do Facebook. 😊
Essa barra fica no topo da tela. É aquele lugar que dever ser bem fácil de
reconhecer e lembrar como usar. Nela geralmente fica o título do app e botões como
“voltar”, “buscar” ou ainda o símbolo do “carrinho” para um e-commerce. É bem
arriscado querer colocar outros tipos de funções que não sejam comuns a esse lugar,
porque as pessoas podem se confundir.
É aquela que fica no topo (para Android) ou na parte inferior da tela (para iOS).
Nela ficam os itens mais importantes para a navegação do usuário, então seus itens
devem ser muito bem escolhidos. Os ícones precisam ser comuns à maioria dos apps
ou pelo menos similares aos de seus concorrentes. Eles devem descrever
visualmente a função do botão. Com isso, seu usuário vai conseguir identificar mais
rapidamente o que significa cada um deles (menos adivinhação = menos carga
cognitiva = desempenho mais rápido do usuário).
Uma dica: sempre que possível, opte por usar ícone e legenda.
Ícones sozinhos dificilmente performam melhor que textos.
Dica: não use ícones apenas para decoração, porque eles devem ter a função de
comunicar algo. Além disso, se usar ícones para tudo, tudo ganha destaque.
Onde tudo se destaca, nada se destaca.
Já neste site da Best Buy a lista com ícones é usada de uma forma mais clara,
com layout e sugestão de comportamento mais comum.
Neste exemplo da CNN, podemos ver que o usuário foi interrompido para
receber a dica e para um comportamento que nem precisaria ser explicado se o layout
estivesse sugerindo esse gesto.
3.5.10 Links
3.5.11 Botões
Lembre-se: você precisa dar mais força para a ação que você quer conduzir o
usuário, caso ele tenha que fazer alguma opção em determinada tela.
É preciso evitar o uso de layout de botão para coisas que não são botão.
Já no layout do app do LinkedIn, fica muito claro qual é o botão de ação para
que o usuário possa adicionar mais informação ao seu perfil.
3.5.12 Swipe
Swipe é o mesmo que “deslizar”. É aquele movimento que usamos para ver
uma galeria de fotos no celular, por exemplo. Mas se você usar esse recurso no seu
site ou app, precisa deixar claro onde e como ele vai fazer isso.Bem, você pode optar
por usar aqueles pontos abaixo da imagem ou mostrar um pedaço de outra figura nas
laterais da imagem principal, deixando claro que tem mais coisas para ver. Usar
número como indicador não é muito comum, então pode não ser uma boa opção para
incentivar seu usuário a esse comportamento.
No exemplo do site mobile do Yahoo, eles optam por usar números que
indicam a quantidade de conteúdo que há no primeiro carrossel da home. Essa não é
uma forma muito clara de indicar que há mais conteúdo para ser visto deslizando para
o lado.
No site da Zappos são usados aqueles pontos abaixo da imagem, que deixam
claro que há mais fotos do look para serem vistas, deslizando para a esquerda.
3.5.13 Scroll
Dica: cuidado ao combinar scroll com swipe. A usabilidade pode ficar confusa
e o usuário vai se perder na hora de encontrar o que ele precisa.
A seguir, temos o site de notícias R7, que dá destaque para a primeira matéria
do site e ela se encaixa no primeiro scroll de uma tela de celular como o meu (sim,
tela pequena ☹). Usuários com esse tamanho de celular podem achar que não há
mais conteúdo para baixo. É interessante testar o layout em vários tamanhos de
celular para garantir que cubra pelo 80% dos devices usados pelos seus usuários, e
com isso evitar que eles não percebam algo importante do seu produto.
Chegou a hora de dizer para o seu usuário o que é mais importante e essa é
a melhor forma de lembrar e ajudá-lo a cumprir sua meta principal. Neste caso, é
preciso criar um contraste entre o que é informação primária e informação para
suporte. As informações mais importantes devem estar nitidamente em destaque, e o
contraste entre elas pode ser feito por meio de sombra, cor, tamanho, peso e estilo.
3.5.15 Performance
O retorno das ações tem que ser rápido e visual, mostrando para o usuário
que ele está no caminho certo. Se ele clica em algo, deve perceber visualmente que
isso aconteceu, mesmo antes de a tela carregar, o que evita mais cliques e mostra
que está tudo bem e que é preciso esperar um pouquinho.
Aqui temos dois exemplos bons de como isso pode funcionar. O primeiro é o
Bustle, que sugere a escolha de alguns tópicos de interesse para personalizar o
conteúdo; e o segundo é a Netflix, no momento de escolha do plano – conforme é feito
o clique, emitem o feedback visual de que o comando foi atendido.
A verdade é que é muito chato esperar. Então, é preciso fazer de tudo para
que seu usuário perceba cada vez menos o tempo de espera para uma ação. Veja
qual é a sensação de espera das pessoas conforme o tempo:
Dica: tenha em mente que quanto mais dados você carregar, menor velocidade
terá a sua página e pior vai ser para os usuários que têm
planos com limite de dados.
Não preciso nem dizer que o tempo dos usuários é muito precioso. Mais ainda
no acesso mobile. Então, a atenção para facilitar a vida deles tem que ser redobrada,
é preciso dar todas as opções para que o usuário faça tudo o que precisar da forma
mais fácil e rápida possível.
Deixe muito claro onde se deve fazer um cadastro e onde deve fazer login.
Sempre que possível, dê a opção de fazer isso usando uma rede social, pois assim
evitará o trabalho de digitar todo o cadastro no celular ou tentar recordar login e senha.
Se isso for interessante para seu produto, dê o mesmo peso para as duas opções.
3.5.21 Formulários
Dica: evite usar legenda dentro do campo que desaparece com o preenchimento.
Isso acaba forçando o usuário a ter que lembrar o que deve
ser digitado naquele campo.
3.5.22 Footer
O Webmotors mantém seu footer no site mobile e, como você pode ver, acaba
ocupando muito espaço neste scroll da tela e até “briga” com as opções de navegação
da barra inferior.
É comum encontrar o campo de busca no topo da tela. É bom que ele exista
para que as pessoas possam encontrar o que precisam, em qualquer parte do site ou
app. De qualquer forma, ao acessar o site, já é possível mostrar alguns itens, mas é
importante que eles tenham alguma relevância para seus usuários. Deixe sempre uma
opção ou sugestão de busca para eles e nunca direcione para uma página 404.
3.5.25 Mapas
3.5.26 Notificações
O conteúdo deve ser fácil e rápido de ler. Tenha bastante cuidado com
espaços (que precisam ser bem aproveitados, mas sem espremer demais as
informações) e as imagens não podem ser tão pequenas a ponto de não serem
identificadas, ainda mais sem um título. Quando usar imagens em uma lista, procure
colocar a foto à esquerda e o texto à direita, para facilitar o fluxo de leitura. Evite,
também, letras muito pequenas e use fontes diferentes apenas para títulos e o
contraste para coisas que deseja destacar.
Entenda seu usuário, estude seus dados, olhe para o que já funciona, faça
testes de usabilidade com seus usuários e busque evolução sempre. Seus resultados
vão aparecer com toda certeza! Boa sorte 😊!
Falamos sobre UX e UI, mas vale deixar aqui uma ideia para você pensar
sobre o tema e acompanhar o que vai acontecer daqui em diante.
Algumas teorias são polêmicas – que toda a interface existente hoje poderá
ser substituída por um chatbot (sim, aqueles robôs que podem conversar com a gente
por texto ou áudio, como a Siri do iOS, por exemplo). Algumas empresas já estão
usando esses chatbots em seu atendimento, para ajudar seus usuários com dúvidas
básicas sobre seus produtos, mas a questão é que, há quem diga, que a evolução
dos bots será rápida, e se a intenção do usuário é apenas resolver seu problema, não
precisará mais de interação com apps ou sites para isso. Por exemplo: quero me
deslocar da minha casa para outro bairro, e para fazer isso, preciso, pelo celular,
escolher entre Uber, Cabfy, 99 Táxis ou Easy Táxi. No aplicativo escolhido, coloco o
ponto de chegada, vejo o valor e faço a chamada. Para isso, passei por diversas telas
e momentos de decisão. Um chatbot poderia fazer isso por mim. Inclusive já
comparando preços e tempo para me ajudar a fazer a melhor escolha. É como ter
uma secretária! Hoje os chatbots ainda não dominaram o mercado, mas realmente
existem movimentações que demonstram essa evolução.
Alguns estudos recentes afirmam que 85% das pessoas usam com
frequência, em média, apenas quatro dos aplicativos que têm instalados. Então esse
desapego das pessoas com os apps faz com que fique comprometida aquela
premissa de que ter um app para tudo é superlegal. Por meio do chatbot não vamos
mais ter essa experiência com o site ou app.
Bom, se você se interessou por essa teoria, leia o livro “The best interface is
no interface”, de Golden Krishna, ou buscar mais artigos ou vídeos do autor na
internet.
REFERÊNCIAS
BEDFORD, Aurora. Visual design for mobile and tablet 1 e 2. San Francisco:
Usability wee. Nielsen Norman Group, 2015.
BUDIU, Raluca. Mobile websites and app: essential usability principles. San
Francisco: Usability week. Nielsen Norman Group, 2015.
LORANGER, Hoa. Top web UX design guidelines. San Francisco: Usability week.
Nielsen Norman Group, 2015.