Primeiras aulas do curso Teste de usabilidade parte 1: seu produto é fácil de usar?

Teste de usabilidade parte 1: seu produto é fácil de usar?

Testando várias frentes - Introdução

Olá pessoal, tudo bom? Eu sou Natan Souza, instrutor de UX e Front-end aqui na Alura. Nesse curso, você vai conferir comigo mais a respeito de teste de usabilidade.

Eu digo "mais" porque já vimos esse tema no curso de UX Produto. Portanto, é necessário ter feito esse curso antes de prosseguirmos.

Logo na primeira aula desse curso, veremos alguns assuntos muito interessantes, por exemplo:

Mas por que fazemos um teste de usabilidade?

De tempos em tempos, alguém do time se pergunta "o que está fazendo sentido no nosso produto? O que está difícil ou gerando confusão?". Normalmente, quando fazemos um teste de usabilidade, temos alguma hipótese ou queremos verificar o que está fácil ou difícil de usar no nosso produto/aplicativo.

A ideia deste curso é gravar um teste de usabilidade de um aplicativo real, justamente o aplicativo da Alura. Selecionamos algumas pessoas para fazerem o teste de usabilidade desse aplicativo, e um dos resultados finais foi uma gravação que fizemos com a Fernanda, que é designer e foi uma das pessoas que toparam fazer o teste de usabilidade conosco.

Ao longo do curso, questionaremos tomadas de decisões a respeito de usabilidade e facilidade de uso que o próprio time teve em momentos anteriores, e também questionaremos o próprio teste de usabilidade em si.

Resumindo: faremos um teste de usabilidade desde a etapa de recrutamento de pessoas, passando pela análise desses perfis e pela gravação do teste em si, para que você possa, futuramente, fazer seus próprios testes de usabilidade de maneira mais interessante e eficiente (incluindo um pequeno desafio ao final do curso).

Espero que você aproveite. Até o próximo vídeo!

Testando várias frentes - Teste dos cinco segundos

Antes de começarmos o treinamento de teste de usabilidade, recomendamos que você tenha completado pelo menos uma parte da carreira de UX Designer disponível na Alura.

Temos o curso "UX: o que é experiência do usuário", aborda temas introdutórios e servem para você aprender os jargões da área. Também temos o curso "UX Strategy: divergindo e afunilando ideias", focado na parte de estratégia, o curso "UX Usability: facilite a vida do seu usuário no mobile", focado em usabilidade, além de cursos de Microcopy, de UX Research, entre outros.

O mais importante é ter feito o curso "UX Produto: monitore, mensure e teste o seu projeto", especificamente a aula em que falamos somente sobre teste de usabilidade, ainda que sem aprofundar muito no tema.

Se você tiver tempo disponível, faça a carreira inteira!

Vamos recapitular o que é usabilidade?

Usabilidade não é uma interface estar bonita ou amigável, ainda que esses fatores impactem na experiência do usuário, mas sim a facilidade (ou a dificuldade) de uso de um produto.

Por exemplo, quando estamos falando com alguém no celular e recebemos outra chamada, aparecem vários ícones na tela e ficamos até um pouco perdidos, certo? Com isso em mente, você consegue imaginar como era difícil colocar uma chamada em espera utilizando um telefone fixo?

Se o nosso produto está fácil de usar, temos uma boa usabilidade. Se estiver difícil, não temos uma boa usabilidade.

Por exemplo, temos a home page da Alura:

home page da Alura com os dizeres "Toda semana uma novidade" ao centro da tela

A partir dessa página, o que as pessoas que nunca tiveram contato com a marca entendem sobre o que é a Alura?

A primeira mensagem que identificamos na tela é "Toda semana uma novidade para te ajudar no trabalho e na carreira". Fizemos alguns testes e percebemos que as pessoas acabavam acreditando que a Alura era um blog ou um site de notícias. Isso provavelmente acontecia pois as pessoas associavam "novidade" a termos como "notícias", "feed" e "timeline". Como melhoramos isso?

Em um teste de usabilidade, como queremos coletar a percepção inicial do usuário, não podemos deixar que ele analise a página por muito tempo. Para isso, mostramos a página principal do nosso projeto ou aplicativo por somente 5 segundos. Esse é o chamado teste dos 5 segundos ("five seconds test").

A partir dessas percepções, mudamos a home da Alura:

home page da Alura com os dizeres "Aprenda, crie e programe na Alura! para te ajudar no trabalho e na carreira" ao centro da tela

Perceba que, anteriormente, a página não passava a ideia de que a Alura consiste de cursos de tecnologia. Já com "Aprenda, crie e programe na Alura!", esse resultado muda bastante - e realmente mudou.

Com o novo texto, o usuário tem a percepção de que irá aprender a programar na Alura. Já a ideia de "criar" é relativa, já que ela pode estar relacionada com a criação no Photoshop, por exemplo, ou com a criação que é feita quando estamos programando. De qualquer forma, esse aprendizado serve para ajudar o usuário em seu trabalho e em sua carreira.

Logo, a página está começando a transmitir melhor a ideia do que é a Alura. Fizemos alguns testes e queríamos melhorar essa página um pouco mais, e chegamos a esse resultado:

home page da Alura com os dizeres "Cursos online de tecnologia para construção contínua da sua carreira" ao centro da tela

Com esse microtexto, queremos demonstrar que a Alura consiste de cursos online de tecnologia, seja de programação, layout, Photoshop, Sketch, soft skills, mobile ou qualquer outro assunto - tudo isso para a construção contínua da carreira do usuário.

Estamos focando bastante no microtexto, que é a chamada principal da página, mas o layout em si e as ilustrações também podem vender a ideia do projeto. Por exemplo, poderíamos ocultar esse microtexto e mostrar a página para uma pessoa que nunca teve contato com a marca. Nesse caso, talvez a pessoa acreditasse que a página está relacionada com arquitetura ou até mesmo viagens (já que, na nossa ilustração, temos o Empire State, uma ponte estaiada, etc.).

Mas por que isso é importante?

Quando fazemos um teste de usabilidade, nós queremos captar as percepções iniciais das pessoas, pois isso pode impactar na experiência do usuário do nosso aplicativo ou site. Não queremos que a pessoa entre na home da Alura e precise decifrar o que a página está querendo vender para ela.

Um ótimo site para fazer esses testes é o Five Second Test, uma ferramenta muito útil do Usability Hub.

Nesse site, você pode subir uma imagem (por exemplo, a homepage de um site ou a splash screen de um aplicativo) para que ela seja compartilhada entre as pessoas. Depois de 5 segundos observando a imagem, elas recebem algumas perguntas, como:

Essa percepção inicial é importante para analisarmos o impacto que ela tem sobre o usuário do nosso site ou aplicativo.

Agora imagine que queremos obter as percepções das pessoas a respeito de um ícone da App Store ou do Google Play. Perceba que quando temos ícones de checklist, por exemplo, eles seguem uma espécie de padrão, e quase sempre contêm um símbolo de visto (check ):

Várias imagens diferentes de ícones associados a "checklist" em um buscador

Será que é possível fazer testes com iconografia? Veremos isso no próximo vídeo. Até lá!

Testando várias frentes - Testando iconografia

Vamos falar de iconografia?

No aplicativo da Alura, para representar o nosso fórum de discussões, no qual alunos e instrutores podem tirar dúvidas e fazer comentários, nós usávamos esse ícone:

ícone com dois balões de diálogo sobrepostos

Porém, através de testes de usabilidade, identificamos que as pessoas simplesmente não estavam encontrando o fórum. Como melhoraremos este ponto?

Uma dica é fazer uma pesquisa no Google para verificar se o ícone que estamos usando está condizendo a ideia representada. Por exemplo, quando pesquisamos "forum icon" (ícone de fórum), temos os seguintes resultados:

diversos exemplos de ícones para "fórum" encontrados no Google

Esse recurso é muito utilizado, não para roubar imagens, claro, mas para analisar o que as pessoas esperam de um ícone que representa, nesse caso, um fórum. Perceba que muitas imagens apresentam pessoas discutindo e balões de diálogo. Então o nosso ícone estava condizente com a proposta, já que ele apresenta dois balões, certo? Mas será que todas as pessoas conseguem identificar que são balões?

Com isso em mente, mudamos essa iconografia para uma nova, com esses dois balões um pouco menos arredondados. Inclusive, se não estivermos enganados, esse ícone foi feito seguindo o Material Design.

Porém, fizemos outros tipos de teste para verificarmos se realmente estávamos acertando nessa escolha. Para tanto, poderíamos fazer um teste de usabilidade, por exemplo passando uma tarefa "tente criar uma dúvida no fórum". Porém, queríamos testar isso de forma mais rápida, pegando as percepções da pessoa em apenas 10 segundos.

Como fizemos isso? Nós pedimos que elas falassem, quando vissem o único (e apenas ele), a primeira coisa que viesse na cabeça, como uma frase ou um sentimento que representassem esse ícone.

As respostas que obtemos foram palavras como "chat", "WhatsApp", "troca de mensagens", e "discussão". Logo, estávamos no caminho certo.

Outro teste que poderíamos fazer é mostrar esses dois ícones juntos para algumas pessoas (5 ou 10, por exemplo) e perguntar qual deles representa melhor a ideia de fórum.

Esse tipo de teste pode ser feito ao vivo ou mesmo por meio de uma chamada no Skype. Desse modo, não é necessário fazer um grande teste de usabilidade, que envolve captar pessoas para testar, fazer gravações, entre outros fatores que requerem tempo e dedicação.

Nosso segundo ícone resolveu o problema da usabilidade, mas um aplicativo pode ter outros problemas, certo? Por exemplo, quando mostramos para o nosso time de design, eles disseram que esse ícone está totalmente fora da identidade visual da Alura.

Como podemos perceber, o primeiro ícone que desenvolvemos é todo construído a partir de outlines (bordas), sem nenhum preenchimento, o que faz parte da identidade visual da plataforma. Para resolver esse problema, procuramos outra opções de ícone e continuamos fazendo esses tipos de testes, chegando a esse resultado:

O mesmo processo pode ser feito para qualquer tipo de ícone. Por exemplo, se queremos um ícone de "timer" (cronômetro), provavelmente precisaremos usar um ícone semelhante a um relógio para que as pessoas façam essa associação.

E onde podemos conseguir ícones?

Existem alguns sites onde podemos encontrar ícones para utilizarmos nos nossos projetos, ou mesmo para ter uma ideia do tipo de ícone que melhor representa a nossa ideia para as pessoas. Alguns exemplos são o IconFinder, o Flaticon e o The Noun Project.

No IconFinder, temos a opção de filtrar por ícones de uso gratuito ou pago, além de alguns tipos de licença (como "commercial use", com o qual precisamos atribuir créditos ao designer que criou o ícone, e "no link back", com o qual isso não é necessário).

O Google Imagens também é capaz de oferecer referências que ajudam a idealizar o nosso ícone.

Existem várias ferramentas que podem ser utilizadas para criar ícones, como Sketch, Xd, Illustrator, Photoshop e até mesmo o Paint.

Em resumo: quando queremos examinar a iconografia do nosso produto, podemos fazer testes unitários, que basicamente consistem em mostrar apenas o ícone para a pessoa, ou mostrar dois ou mais ícones para avaliarmos qual deles representa melhor a ideia que queremos transmitir. Isso obviamente irá impactar, no futuro, quando fizermos testes de usabilidade.

Sobre o curso Teste de usabilidade parte 1: seu produto é fácil de usar?

O curso Teste de usabilidade parte 1: seu produto é fácil de usar? possui 172 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI Design acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas