Primeiras aulas do curso UX Usability: facilite a vida do seu usuário no mobile

UX Usability: facilite a vida do seu usuário no mobile

Ideias: da cabeça ao papel - Crazy eights

Olá! Eu sou o Natan Souza e sou front-end designer. Trabalho como instrutor tanto na Caelum como na Alura. Dou cursos presenciais de Front-End e de UX.

É possível que você já tenha me visto em outros cursos de UX e no de Sass.

O que veremos no curso de UX Usability? Usabilidade é a facilidade de uso. Às vezes, os conceitos de UX e Usabilidade são considerados idênticos, mas na verdade a usabilidade está dentro da Experiência de Usuário.

Não é imprescindível que você tenha feito os outros cursos de UX da Alura. Mas caso você tenha o interesse, poderá acessá-los nos links abaixo:

O objetivo do nosso curso é mostrar como começamos a desenhar telas, quando já tivermos realizado a etapa de pensá-las e elaborado os conceitos no papel. Mas precisamos começaremos fazendo rascunhos à mão.

funcionalidades

Escrevemos algumas funcionalidades que separamos pelos números 1,2 e 3. São versões de um produto mínimo que conseguimos lançar. Essa divisão das funcionalidades de cada versão tem a intenção de indicar que se elas estiverem presentes em um produto, ele pode ser lançado o mais breve possível.

O usuário ficará satisfeito, nós conseguiremos ter um retorno financeiro inicial e nós teremos capacidade técnica para realizá-lo. Isso é o que mercado chama de MVP, que significa produto mínimo viável.

O produto que criaremos irá resolver o problema de encontrar uma companhia para viajar. No fim do curso, queremos aproveitar todas essas funcionalidades.

prototipo navegavel

Observe que as telas não foram desenhadas de forma impecável. As linhas não estão retas... No entanto, não é necessário saber desenhar para realizar este curso. Não são necessárias várias horas de desenho para conseguir concluir o projeto. A ideia de rabiscar com lápis em um papel permitirá que qualquer um possa fazer isso - incluindo o seu cliente, chefe ou stakeholder do projeto.

Ainda temos diversas funcionalidades que gostaríamos de adicionar.

funcionalidades plus

Temos várias opções: criar ou achar grupos de viagem, encontrar lista de roteiros, ler reviews, um chat para conversa entre os usuários. Vamos começar.

varias telas

Observe que eu criei um monte de pequenas telas. Gastei um bom tempo, desenhando vários detalhes, inserindo ícones... Mas nesta fase de coletar ideias e colocá-las no papel, seria mais interessante elaborar um desenho rápido. Como o que fiz e segue abaixo:

rascunho rapido

Na segunda tela, queria criar uma funcionalidade de chat.

chat

Quanto tempo será que eu levei para criar estas telas? Eu levei exatamente cinco minutos. Perceba que não existe um fluxo de navegação entre as telas. Eu desenhei a lista de roteiros na primeira tela, depois o chat, e na terceira, criei a função para imputar os dados com voz.

Na quarta tela, vemos uma funcionalidade para encontrar lugares específicos que estejam perto do usuário, como restaurantes e hotéis.

mapa

Temos também uma tela de review, em que você pode indicar se gostou ou não de um lugar.

review

Eu desenhei uma tela exclusiva para restaurante, onde vemos que um restaurante foi avaliado como o terceiro melhor de 75 outros locais.

avaliação de restaurantes

O usuário tem uma tela para encontrar grupos de viagem para o mesmo destino que queremos ir.

grupos

Veja que criei sete telas. Será que este número é o ideal? Não seria melhor criar um número muito maior, 20 ou 50 telas? A resposta é não. Seria difícil você parar várias pessoas de um time por um período de duas horas para ficar desenhando tela. O ideal é que esta parte do processo seja realizada rapidamente pelo time, sendo que cada membro irá rascunhar algumas telas.

Vamos ver outro exemplo: telas do Uber. Em que momentos solicitamos um motorista do Uber?

Uber

Na primeira tela, vemos dois campos. No de cima você coloca onde você está e no de baixo, coloca aonde quer ir.

pedir uber

Na segunda tela, fazemos a estimativa de preço.

estimativa de preço

Depois que você concordou com o preço, você chama o Uber e ele começará a localizar motoristas próximos de você.

localizando carro

Então, começará a aparecer os dados do motorista, incluindo tempo de chegada até a sua localização inicial.

dados do motorista

Se você já usou o Uber, sabe que existem outras telas, como a parte de ajuda para o usuário, histórico e outras. Não precisamos pensar nisto agora. Por enquanto, focaremos nos momentos-chave do aplicativo.

grid de 8

Observe que no primeiro exemplo nós trabalhamos com uma grid de oito partes. O Google Ventures (GV), uma pequena empresa dentro do Google, é o responsável por definir o número 8 como o valor ideal. Para o GV, oito passos seriam o limite para o usuário realizar alguma tarefa.

Mas não quero que você pense em fluxo agora. Pense nos momentos-chave do aplicativo. Se você se sentir travado na criação, pode trabalhar em versões diferentes da mesma tela. Se nem isso você conseguir, pense em como será a interação do usuário - vale desenhar um boneco de palitinho usando a sua aplicação. Isso pode te ajudar a destravar.

Esta técnica para colocar a sua ideia em oito parte recebeu o nome de Crazy Eights, que traduzido para o português seria os "oito loucos".

crazy eights

O termo "louco" faz referência à ideia de que o processo elaboração deve ser feito na "doideira" e deve ser finalizado em cinco minutos, ou seja, você terá 40 segundos para gastar com cada tela. Você não terá tempo para pensar se a linha que você desenhou está reta ou apagar e refazer algo. Com isto, você estará perdendo tempo.

Antes de ir para a próximo vídeo, faça primeiro o exercício do Crazy eights. Você terá cinco minutos para pensar e colocar as ideias no papel. Lembre-se que você pode focar nos momentos-chave, sem se preocupar com o fluxo.

Ideias: da cabeça ao papel - Segundo crazy eights

Como eu precisava criar um exemplo de Crazy Eight para o curso, usei o tablet e fiz meus desenhos diretamente no Photoshop.

Photoshop

O que desenhamos no tablet Wacom, sai diretamente na tela.

tablet wacom

Fiz isso, para criar a apresentação do curso, mas você pode usar um papel e uma caneta para fazer os desenhos.

telas do app

No nosso exemplo, eu criei possíveis telas de momentos-chave para a aplicação. Agora, que você teve tempo para pensar e colocar no papel as ideias mais óbvias, terá que fazer novamente o mesmo exercício. Acredite, isso não é uma brincadeira!

A inovação, a criatividade, é como um pote de Nutella. É fácil pegar pegar uma colher quando o pote está cheio. No entanto, fica mais difícil quando tentamos raspar o pote para pegar o que sobrou no pote. Fica parecendo que a parte mais gostosa ficou no fundo...

A ideia é que você refaça o Crazy eights, mas dessa vez, podendo usar mais tempo se quiser, como 10 ou 15 minutos. E pode inclusive, pode começar a pensar no fluxo. Pode usar a história feita nos outros cursos, como no de UX Strategy. Caso você não tenha feito o curso, sem problemas. Use as funcionalidades de outro projeto. Aproveite para colocar no papel uma ideia que você teve há muito tempo, mas que não elaborou muito.

Eu aproveitei para desenhar telas mais detalhadas do que as primeiras.

telas mais detalhadas

Observe que eu comecei a pensar no fluxo que o usuário seguiria para encontrar os restaurantes mais próximos. Eu pensei desde o momento em que a pessoa adiciona a localização até a ação do review, em que estarão disponíveis as avaliações dos clientes.

Comece a estudar o conteúdo na prática!

Ideias: da cabeça ao papel - Interações e icones

Fez novamente o Crazy Eights? Se tiver alguma dúvida, você pode abrir um tópico no Fórum.

De acordo com o Crazy Eights feito por mim, como o usuário irá da primeira tela para a segunda?

primeira tela

Ele precisará clicar no ícone de menu "hambúrguer". Então, ele chegará a segunda tela.

segunda tela

Mas será que é intuitivo para o usuário a necessidade de clicar no ícone hambúrguer para que surja o menu? Será que as pessoas conseguirão entender onde deve ser clicado na tela do mapa para irmos para os restaurantes?

fluxo das telas

No caso, é preciso clicar nos pontinhos pretos.

Às vezes, o usuário pode não achar uma tela tão intuitiva. Por isso, é necessário deixar claro como o usuário irá navegar nestas telas.

Pensando nisso, apresentaremos algumas técnicas que consistem em mostrar alguns pontinhos a forma como o seu usuário irá interagir com a sua tela.

Eu usarei o Photoshop para demonstrar a técnica, mas você poderá utilizar a caneta e o papel.

Preferencialmente, para criar as marcações, use uma cor diferente da que foi utilizada no desenho. Eu vou usar a cor azul. Na primeira tela, adicionaremos uma bolinha azul no ícone do menu, representando o touch.

touch

Este é o lugar que deverá ser clicado para o usuário chegar a segunda tela. Para irmos da segunda para terceira tela, teremos que clicar no link de "Restaurantes". Adicionaremos a marcação azul sobre ele.

touch restaurante

Lembrando que o objetivo não é indicar quais pontos são "clicáveis". Caso contrário, a primeira poderia ter ficado assim:

como não fazer

Nosso objetivo ao adicionar as bolinhas azuis será indicar qual será o fluxo ideal de usuário.

Então, a partir de "Restaurantes", nos iremos para a terceira tela.

manda ver

Após clicarmos em "manda ver", seguiremos para a tela de localização dos restaurantes. Marcaremos um dos restaurantes com a bolinha.

touch um dos restaurantes

Pensando num fluxo desenhado no papel, você poderia utilizar as etiquetas coloridas com formato de bolinha, que já usamos em outros cursos, para fazer Zen voting.

Com as marcações adicionadas, o fluxo das nossas telas ficaram assim:

fluxo das telas 2

Agora, o time sabe como o usuário irá interagir com as telas. Faça este processo com seu Crazy Eights.

Mas será que a única forma do usuário interagir com a tela é o touch? Não, ele também pode arrastar o menu com o dedo, uma ação que chamamos de swipe.

swipe

Poderíamos deixar claro que a única opção para abrir o menu é com o swipe. Para indicar que o usuário deve clicar na tela e arrastar o dedo para cima, podemos adicionar uma imagem como essa no nosso desenho:

swipe 2

Seria um movimento de scroll...

Com a setinha adicionado ao desenho, a tela ficará assim:

tela com setinha

Pense nas formas como o seu usuário irá interagir com o seu aplicativo. Outra forma por exemplo, é o movimento de pinça que fazemos quando usamos o Google Maps e queremos ampliar uma parte da imagem.

zoom out

Você pode fazer o desenho que quiser para representar o movimento de pinça, desde que ele seja compreensível para o seu time.

pinça

Quais outras formas que os usuários podem interagir com a tela? Por exemplo, se o fluxo da aplicação começasse pelo preenchimento do campo "Vai para onde?" do início, você poderia adicionar um ícone para representar o teclado. Atualmente, o usuário também pode inputar uma informação com a voz, então poderíamos utilizar uma representação para o microfone.

icone de teclado e microfone

Existe ainda outra forma de interação. Se o seu celular toca, ele emite um som. Você pode indicar isso com um ícone também.

icone caixa de som

Às vezes, o seu celular emite sinais luminosos com o led. Você também poderá representá-lo.

sinal de luz

Você pode trabalhar com outras ideias de ícones: para vibração e para notificação.

Basta você acordar com seu time a iconografia.

Na aula, criamos ícones para formas como o usuário interage com o celular e como o celular interage com o usuário (feedback).

tela com feedback

Nesta tela, por exemplo, representamos que quando clicarmos em "manda ver", o celular irá vibrar.

Vou deixar você com cinco minutos para adicionar esses ícones nas suas telas.

Mãos à obra!

Sobre o curso UX Usability: facilite a vida do seu usuário no mobile

O curso UX Usability: facilite a vida do seu usuário no mobile possui 166 minutos de vídeos, em um total de 50 atividades. Gostou? Conheça nossos outros cursos de UX 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 UX 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