No decorrer do dia nos tornamos “usuários” de uma porção de coisas. O alarme do celular que nos acorda de manhã, a cadeira, o carro, o controle remoto do ar condicionado, o Facebook, os talheres, o caixa eletrônico, o computador no trabalho, o copo de cerveja – objetos e produtos, digitais ou não, que são “usados” por pessoas e que são projetados para cumprir alguma função.
Experiência do usuário existe desde que o mundo é mundo. Ou melhor, desde que as pessoas começaram a “usar” objetos para realizar alguma tarefa.
“A maioria das pessoas acredita que User Experience é somente encontrar a melhor solução para os seus usuários – mas não é. UX se trata sobre definir o problema que precisa ser resolvido (o porquê), definir para quem esse problema precisa ser resolvido (o quem), e definir o caminho que deve ser percorrido para resolvê-lo (o como).” – Whitney Hess
Diagrama das disciplinas que compõem User Experience Dan Saffer - Designing for Interaction
Repare como o grande círculo de User Experience Design engloba uma série de outras disciplinas: de Arquitetura de Informação a Design Industrial, passando até por Sound Design. Sim, aquele sonzinho que toca quando você inicia seu PC ou Mac também faz parte da experiência do usuário.
UX designers trabalham para construir produtos que sejam fáceis de usar (a tal usabilidade), reduzindo a fricção e permitindo que os usuários completem a tarefa desejada em menos tempo, com menos ruído e obstáculos. Ao mesmo tempo, apoiam-se em princípios da psicologia para motivar o usuário e incentivá-lo a seguir adiante.
UX Design não é direção de arte. Também não é planejamento, não é gerência de projetos, não é desenvolvimento de software. UX faz o meio de campo entre todas essas disciplinas, garantindo que todas elas estejam caminhando juntas em direção a um mesmo objetivo.
O UX designer não é um profeta que sabe como as pessoas pensam; ele é um pesquisador que investiga o que levou uma determinada pessoa a agir de determinada forma e então propõe melhorias de design baseadas nesses insights.
O UX designer projeta software centrado no comportamento humano.
os principais requisitos para se tornar um profissional de UX são empatia, bom senso e organização.
Empatia, porque é preciso entender (e gostar de investigar) o que as pessoas precisam e querem ver quando estão usando produtos digitais. É preciso conversar com pessoas, é preciso saber fazer as perguntas certas e filtrar os resultados (é aqui que entra o bom senso). Mas se você nunca entrevistou usuários, não é preciso ter medo. Primeiro, porque é um processo que se aprende com a prática. Não existe certo ou errado; o que existem são formas diferentes de se chegar à mesma resposta.
Organização é outra característica bastante desejável. No dia a dia do trabalho de UX você acabará lidando com grandes quantidades de informação em forma bruta, antes de fazer o exercício de simplificá-la e torná-la digerível para os usuários. É preciso ser organizado para não deixar escapar nenhum detalhe, já que normalmente são os pequenos detalhes que fazem a maior diferença na experiência do usuário –para o bem ou para o mal.
https://www.youtube.com/watch?v=0me2NyqR7A4
Um usuário que se sente satisfeito com a experiência de navegação de um site ou com os mecanismos de botões antes de efetivar a compra de um produto ou serviço tem bem mais chances de converter. Facilitar e deixar essas duas jornadas mais intuitivas é um grande diferencial para ter mais conversões.
A fidelidade é alcançada quando ao sentir a necessidade da próxima compra, a primeira memória que vem à cabeça do cliente é a sua marca, e com isso ele realiza compras recorrentes. Portanto, deixe boas lembranças na mente do seu consumidor fazendo com que ele tenha ótimas experiências em todas as etapas do contato com a sua marca: escolha, decisão de compra, aquisição e usabilidade do seu produto ou serviço. Dessa forma, além de ter um cliente fiel à sua marca, você também terá um defensor, que a indicará aos amigos, familiares e conhecidos.
Analisar a experiência do usuário resulta em um melhor planejamento e reduz as chances de retrabalho, reduzindo custos e tempo dos funcionários envolvidos.
Uma boa experiência gera uma ótima sensação que vem acompanhada de um “Nossa, valeu muito a pena essa compra!”. É o momento em que você supera as expectativas que o cliente tinha ao adquirir o seu produto e aumenta o seu valor agregado, que vai além do seu custo monetário.
Para os usuários, interações bem desenhadas são fáceis de usar e dão a sensação de que o produto é mais eficiente. Elas também tornam o processo mais agradável, ajudando a aumentar o nível de engajamento dos usuários com a aplicação.
Para as empresas, interações bem desenhadas criam fidelidade entre os usuários e o produto. Também aumentam as taxas de conversão ao reduzirem a fricção no fluxo do usuário, permitindo que eles completem a tarefa com mais facilidade. Além disso, é claro, proporcionam experiências memoráveis e melhoram a percepção que os usuários têm das marcas. Não é à toa que designers costumam preferir produtos da Apple, uma empresa que ganhou popularidade nos últimos anos pelo nível de cuidado que tem com os pequenos detalhes das experiências que oferecem.
Um estudo realizado por Des Taynor mostrou o quanto os pequenos detalhes podem afetar a percepção que as pessoas têm das experiências pelas quais elas passam, não apenas no mundo digital. Nos restaurantes, por exemplo, a espessura dos guardanapos tem impacto direto no preço que os usuários estão dispostos a pagar pela refeição. Um detalhe que muitas vezes passa despercebido para aqueles que são responsáveis por “desenhar a experiência de comer em um restaurante”, mas que afeta o subconsciente dos consumidores e impacta diretamente na percepção que eles têm sobre o estabelecimento.
exemplo clássico é o caso do botão de 300 milhões de dólares da Amazon. Isso mesmo. Um simples ajuste em um botão fez com que as vendas da loja virtual aumentassem em 45%, gerando um faturamento adicional de US$ 300 milhões no primeiro ano depois de implementado.
Wireframe é um desenho básico da estrutura de determinada interface que demonstra de forma simplificada como o produto final deverá funcionar. Wireframes existem para evitar trabalho desnecessário. É quase como um rascunho do layout final. Como todo rascunho, é criado para que as pessoas consigam dar feedback sobre ele, para que ele então possa ser ajustado e ir para as outras áreas envolvidas no projeto.
Protótipos são versões interativas dos wireframes, onde é possível clicar ou interagir com algumas partes da tela para simular como será o seu funcionamento –mesmo que ainda a funcionalidade ainda não tenha sido implementada corretamente. É como se fosse um rascunho do trabalho que depois será realizado pelo desenvolvedor front-end.
A possibilidade de navegar pelo protótipo faz muita diferença na hora de “sentir” como o produto final funcionará. Ele simula o que acontece a cada Wireframes, protótipos e rabiscoframes clique, a cada interação – resultado esse, que só seria possível depois que o projeto já tivesse sido programado por um desenvolvedor front-end. Documentos mais enxutos Diferente dos wireframes estáticos, os protótipos permitem que você representa vários estados diferentes da interface em uma mesma página. Quando o UX designer cria um wireframe em PDF , cada novo elemento que surge na tela (mesmo que ele não represente uma página separada na estrutura do site) precisa ser documentado em uma página diferente do documento. Já os protótipos permitem que você veja os elementos em funcionamento no próprio contexto onde eles aparecem, fazendo com que o documento final seja bem mais enxuto do que os extensos PDF s com wireframes estáticos. Apresentação para clientes Designers e desenvolvedores estão acostumados a receber um wireframe em PDF e abstrair o fato de que aquele documento é apenas uma representação de como a interface irá funcionar. Com os anos de profissão, eles se acostumam a conseguir visualizar como aquele wireframe se materializa uma vez que o produto começar a ser construído na linguagem final – seja um site em HTML, um aplicativo para iOS ou um game. Mas muitos clientes não estão acostumados a lidar com wireframes no dia a dia. Protótipos contribuem para que os clientes entendam melhor a proposta e agilizam a aprovação do trabalho. Nas reuniões de apresentação de trabalho, basta o UX designer pilotar a navegação e interagir com o protótipo na frente do cliente para que ele entenda como a interface funciona.
No campo de Human-Computer Interaction e User Experience, usabilidade normalmente se refere à simplicidade e facilidade com que uma interface possa ser utilizada.
Pense na interface do controle remoto da sua TV. Uma série de botões agrupados em diversas áreas, cada um com uma função diferente. Apesar dos agrupamentos e do uso de formatos e cores para diferenciar os botões mais usados, ainda assim existe informação em excesso. Agora pense na mesa de dentro de uma sala de estar. Um controle para a TV, outro para o DVD Player, outro para o aparelho da TV a cabo. E pense que uma mesma pessoa precisa saber usar todos esses controles para realizar tarefas simples como gravar um programa ou comprar um filme no pay-per- view. Chegar a uma solução simples de usabilidade é um processo bastante complicado. São necessários vários e vários rounds de explorações de design, além de discussões sobre priorização das funções que são mais importantes,quais podem ser eliminadas, escondidas ou despriorizadas. A vantagem das interfaces digitais é a possibilidade de exibir e esconder botões à medida que o usuário avança no fluxo. Simplificar é um processo tão difícil e repetitivo que muita gente diz que “design nunca acaba”. Sempre há a possibilidade de otimizar mais alguma área, diminuir a carga cognitiva sobre o usuário ou alterar o visual dos elementos da interface para que eles pareçam mais simples de usar. Giles Colbourne trata justamente disso em seu livro Simple and Usable (http://www.simpleandusable.com) . O autor propõe 4 modelos para solucionar o excesso de informação e conseguir desenhar interfaces realmente simples.
Remova: livre-se de qualquer coisa que não seja essencial para a aplicação. Isso pode significar remover conteúdo, também, assim como a lin- guagem que você usa nos labels de navegação. Organize: distribua os elementos da interface de forma que eles se encaixem em grupos lógicos. Isso pode significar tanto se basear nos modelos mentais de quem usa, quanto agrupá-los em padrões de interface que sejam mais familiares. Esconda: deixe apenas os itens mais importantes ao alcance (fazendo com que eles sejam óbvios), e esconda os outros, deixando-os acessíveis apenas por navegação. Mova: coloque algumas das funcionalidades em outro dispositivo ou outro lugar, de forma que a interface não fique responsável por mostrar todas as interações possíveis de uma vez só.
Apresentar informações com simplicidade e no exato momento em que o usuário está procurando por ela já se tornou questão primordial na hora de diferenciar aplicativos e produtos de sucesso. A regra aqui é simplificar, reduzir e oferecer informações em doses digeríveis, para que as pessoas não se sintam pressionadas a tomarem decisões demasiadas em vários pontos diferentes da jornada.
Qual a ação principal que você quer que o seu usuário faça nesse momento? Quais são as ações secundárias? Dentre elas, quais você poderia remover sem prejudicar a tarefa que o usuário quer realizar naquele momento? Qual o mínimo de informação que o usuário precisa saber para realizar aquela tarefa? Qual a menor quantidade de texto possível (com menor número de caracteres) para explicar aquilo para ele? As imagens que você pretende colocar na interface estão contribuindo para que o usuário realize a tarefa com mais facilidade? Como essas imagens podem ser repensadas para, além do caráter decorativo, assumirem também um papel informativo e ajudá-lo no fluxo? Cuidado também com excesso de banners e outros boxes que tentam chamar a atenção do usuário para algo que não é necessariamente essencial para realizar a tarefa que ele deseja. Qual o mínimo de elementos de navegação que você precisa ter na tela naquele momento? O menu precisa ficar exposto o tempo todo? Daquela página, quais as outras páginas que o usuário pode querer acessar? Uma dica importante nesse ponto é olhar para as métricas e ver em quais links os usuários estão realmente clicando. Considere excluir ou esconder os links menos clicados para deixar a interface mais simples.
Hierarquia nada mais é do que usar diferentes estilos visuais para os elementos da tela de modo a priorizar o que é mais importante. Qual a primeira coisa que você quer que ele leia ou veja assim que entrar no seu site?
Algumas boas práticas para conseguir uma boa hierarquia nas páginas são:
Organize itens similares com visual similar. Evite inconsistências. Utilize o mesmo estilo visual para elementos que têm funções parecidas. Estilos visuais inconsistentes causam confusão para o usuário e deixam a interface poluída. Use cores para diferenciar as ações principais. Use o contraste a seu favor para atrair o olhar do usuário para a ação que você quer que ele faça. Categorize. Agrupe links por temas, em vez de simplesmente listá-los na tela. Use tamanhos de fonte diferentes para criar hierarquia na página, mas limite a quantidade de tamanhos de fonte para manter harmonia. Tenha um bom equilíbrio de textos e imagens. Lembre-se que, dependendo da tarefa que o usuário está realizando, imagens nem sempre são bem-vindas. Se ele está no meio de um processo de pagamento, ima- gens podem acabar tirando o foco da ação principal que você quer que ele faça.
Um erro comum de sites e aplicativos é criar ruas sem saída para os usuários. Tenha certeza de que, em toda e qualquer tela do seu produto, está claro para o usuário o que ele deve fazer a seguir.
Um exercício interessante para otimizar a usabilidade do seu produto é olhar para cada uma das telas com as seguintes perguntas em mente:
O usuário sabe onde está? A tela comunica com clareza em que página/site/passo do fluxo ele se encontra? O usuário sabe o que fazer a seguir? A ação principal está nítida o suficiente? O botão onde eu quero que o usuário clique está claro? O texto do botão dá ao usuário alguma dica do que vem a seguir? Se essa tela é uma tela de confirmação no final de um fluxo, eu estou aproveitando para sugerir que o usuário faça algo mais, aumentando o tempo de navegação e o nível de engajamento dele com o produto?
A regra essencial de qualquer produto interativo é que toda ação tem que ter uma reação. E uma interface que responde imediatamente aos comandos do usuário contribui bastante para uma boa experiência.
Mais interessante ainda do que comunicar erros com clareza quando eles acontecem é evitar que eles aconteçam em primeiro lugar. Erros normalmente são causados por erros dos usuários ao interagirem com o sistema. Mas se você parar pra pensar, o erro do usuário é culpa da interface que não o guiou corretamente na hora de realizar a tarefa.
Qual o mínimo de informação que você precisa coletar do usuário para que ele possa seguir adiante no fluxo? Mas será que todas as informações que estão sendo pedidas são extremamente necessárias? Alguma dessas informações pode ser coletada em um momento futuro? Está claro para o consumidor por que aquela informação está sendo solicitada?
Ainda no assunto “formulários”, uma boa prática de usabilidade é ter certeza de que você está apresentando o melhor tipo de campo para o usuário. Quando o usuário precisa selecionar uma data, por exemplo, é muito mais fácil e muito mais familiar para ele apresentar as opções em formato de calendário –em vez de mostrar somente um campo texto e torcer para que ele digite a data no formato DD/MM/AAAA que você precisa.
A arte de conseguir transmitir uma mensagem em pequenos fragmentos, num espaço limitado de texto, com concisão, clareza e personalidade. Pode ser o nome de um botão, uma mensagem de erro ou sucesso, uma linha de instrução exibida acima de um formulário, um tooltip de ajuda – qualquer texto de interface.
Aspecto funcional é o fato de existir uma ação simples na qual todos os estados são transmitidos com clareza ao usuário. Sem erro. Sem ruído ou ambiguidade. Aspecto emocional é um pouco mais abstrato, naturalmente. A ação escolhida pelo Facebook foi “Curtir”, por algum motivo. É o verbo que mais combina com a personalidade leviana da rede social.
Dan Saffer aborda o assunto “Microcopy” e dá algumas dicas úteis na hora de escrever esse tipo de texto: Evite nomes de ações muito vagos, como “Enviar”. O que acontece depois que o usuário “Envia” os dados do formulário? Será que o nome do botão não pode explicar isso para o usuário? O texto de instrução é absolutamente necessário? Você não precisa adicionar um “Por favor, faça login” acima de um formulário de login, por exemplo. Quando o texto é muito longo e precisa ser truncado na interface, tenha certeza de que o usuário consegue ler o texto completo facilmente. Teste seus textos com usuários reais. Mostre uma interação com micro- texto para eles e peça para eles dizerem em voz alta o que acham que acontecerá ao clicarem ou interagirem. Use linguagem humana, não de sistema. “Postado há 3 horas” é muito mais fácil de entender do que “postado em 04/03/2014 às 14h33” – um detalhe que acaba passando batido em muitos produtos por aí.
https://www.youtube.com/watch?v=WPc-VEqBPHI
Gerarem novas ideias de funcionalidades para os produtos, realizar pesquisas com usuários podem ser úteis para:
- Validar se a solução de design que você criou realmente funciona;
- Encontrar possíveis problemas de usabilidade na interface;
- Testar se a solução é realmente útil para as pessoas;
- Observar a reação das pessoas à medida que usam o produto;
- Descobrir outras necessidades dos usuários que você nem sabia que existiam;
- Validar se a pessoa realmente usaria aquele produto em sua rotina ou se ela preferiria usar outros métodos ou ferramentas para resolver o mesmo problema.
"Alguns times de desenvolvedores parecem procurar por formas mais baratas e rápidas de validarem seu design. Usabilidade é frequentemente percebida como sendo muito cara. Você acha que os testes de usabilidade devem ser barateados? Perguntando melhor: teste de usabilidade, hot or not? Um teste de usabilidade, em sua forma mais básica, custa basicamente nada. É um processo simples. Você senta do lado de alguém e o assiste experi- mentando seu design. Qualquer custo adicional vem da tentativa de adicionar rigor ao processo. Rigor não precisa ser caro, mas pode ser caro." - Entrevista com Jared Spool
os UX designers costumam realizar: pesquisas quantitativas, entrevistas em profundidade, focus groups, testes de usabilidade, testes A/B, eyetracking, shadowing, diário de uso continuado – entre outros.
Testes de usabilidade - Usuários potenciais da interface são incentivados a usá-la num ambiente monitorado, onde suas ações são gravadas e anotadas. Um profissional facilitador fica ao lado do usuário para guiá-lo pelo teste e incentivar que verbalize seus problemas e desconfortos.
As informações estão sendo apresentadas da forma mais simples possível, em pequenas doses? É possível reduzir textos ou ocultar alguns elementos naquele momento específico da experiência?
O usuário consegue se localizar dentro da estrutura do site naquele momento? Está claro para ele qual o estado do sistema? Ele sabe em que passo está dentro do fluxo e quantos passos faltam para ele concluir a tarefa?
Qual a ação mais comum que o usuário busca quando interage com seu site? É possível destacar essa ação em detrimento de outras? É possível criar atalhos para as ações mais comuns em determinada tela?
O tamanho dos elementos da interface são suficientes para que o usuário interaja com eles em todos os dispositivos em que o produto é acessado? Os textos são legíveis o suficiente? Há contraste e hierarquia nos tamanhos de fonte?
Você está usando informações colhidas dos usuários (qualitativamente ou quantitativamente) para fazer melhorias no produto? Quais novas funcionalidades eles esperam ver? Como aperfeiçoar os principais fluxos?
Qual a diferença entre UX e UI?
The Homer Simpson car is a great lesson in building products