UX Case Study: Melhorando a usabilidade de um app de histórias infantis.

NightNight é um app de leitura de histórias infantis para tablets em que os usuários estavam tendo problema com a escolha de histórias. Meu desafio foi tornar fácil a descoberta das histórias que eles querem ler.

Como era

O app veio praticamente sem maneira de navegar entre as histórias apresentadas.

Sendo um protótipo, o app estava bem cru em questões de navegação, não havia como procurar temas, histórias específicas, autores, nada. Tudo o que o usuário poderia fazer é escolher uma história e torcer para que fosse boa.

O desafio então era melhorar a navegação no nosso app.

Feedback de usuários

Impressão dos usuários

Foi perguntado aos usuários como eles usavam o app e chegamos em alguns feedbacks interessantes:

“I read NightNight stories all the time to my 5 year old son. We love picking out a story together, but sometimes we spend more time picking the story than actually reading it!”

“I wish I had a better idea of how long the stories are before picking one. Sometimes I just want a short story to read to my daughter”

“One day my son is into dinosaurs, the next day he’s obsessed with airplanes. I would love if there was an easier way to find stories about whatever his latest craze is.”

“There have been a few occasions when my 3 year old daughter didn’t like the story we picked because it was hard for her to understand, and probably meant for a 7–8 year old’s vocabulary.”

“Some of my friends use NightNight with their kids — we usually share recommendations since our kids are about the same age.”

Nós tiramos as seguintes hipóteses para estas questões:

1. Os usuários querem escolher a história rápido
2. Os usuários querem saber a duração da história
3. Os usuários querem saber sobre o quê é a história antes de lê-la
4. Os usuários querem saber a idade recomendada da história
5. Os usuários querem ver recomendações de seus amigos.

Com base nisso foi feita uma pesquisa para definir qual a prioridade de cada informação.

Com isso nós percebemos que a listagem original estava totalmente errada, embora mostrar o autor fosse importante para quem criou, os pais não se importavam tanto com essa informação.

Os dados dessa pesquisa foram usados posteriormente como referência de importância de cada informação para ser listada.

Definição de soluções

How Might We

O próximo passo foi utilizar o processo “How Might We” para pensar em soluções para os problemas encontrados. Aqui eu tentei considerar as soluções em uma escala de possibilidade de implementação para determinar quais seriam utilizadas nessa iteração do app.

No final do processo essas foram as ideias escolhidas para serem levadas em frente.

Sketch

Com base nas ideias propostas foram feitos os sketches para a UI.

Uma grande inspiração da interface do NightNights foi a Netflix, a sua interface que incentiva a descoberta de novos títulos com sugestões e agrupamentos caiu como uma luva para o projeto.

A interface aproximada ainda traz o benefício de reduzir o estranhamento e tempo de aprendizado com a plataforma.

Porém essa abordagem sozinha não resolve o problema de busca de histórias que os usuários relataram. Histórias infantis não caem tão facilmente na mesma definição de categorias como comédia, ação, drama, etc.

Nós precisávamos de outra maneira de agrupar e o resultado foi o uso de tags. Uma mesma história pode ter a tag de dinossauros, aventura, princesas e piratas. Ao escolher cada uma delas o usuário pode afunilar a sua busca até encontrar o que ele deseja.

Mas novamente, eu estou sobre os ombros de gigantes.

O Pinterest já usa um sistema de tags em suas buscas e listagens que eu poderia usar para o meu protótipo.

Isso tudo me levou aos sketches das telas de navegação principais:

Sketch das páginas principais de navegação

Criação de wireframes

Feito os sketches eu criei os wireframes no Figma para validação de fluxo e layout. Esses wireframes foram transformados em um protótipo e enviados para o tablet para validar com usuários se a ideia funcionava ou não.

Este teste foi útil para saber se o destaque que eu estava dando para cada informação era o suficiente e se o fluxo fazia sentido para os usuários. Corrigido alguns posicionamentos e tamanho de fonte eu comecei a versão final da interface.

User Interface

A interface também foi criada no Figma, como eu já tinha criado a base antes para os wireframes, foi questão de identificar quais eram os elementos que iam se repetir criar símbolos deles para montar o restante das páginas.

Por essa não ser uma versão final ainda eu não me preocupei tanto com as imagens e cards dos livros. Fiz o essencial para que eu conseguisse fazer um novo protótipo que não passasse estranhamento para o tester.

Testes com usuários

Com esse novo protótipo em mãos fiz 6 testes seguindo o mesmo roteiro com usuários diferentes. Eu entreguei um cartão para cada com informações sobre o filho contendo:

1. Idade
2. Que tipo de história gostaria de ler
3. O que os amigos tem lido

Pedi para que escolhessem uma história baseada nessas informações, cronometrei secretamente o tempo até a escolha de uma história e em seguida passei um questionário para avaliar se houve melhoras em relação ao layout anterior.

1. O tema do livro está claro?
2. A idade apropriada está clara?
3. A duração está clara?
4. As recomendações de amigos estão fáceis de visualizar?
5. Como você avalia a navigabilidade do app?
   (Ótimo, Bom, Regular, Ruim, Péssimo)

Os resultados foram os seguintes:

Considerações finais e próximos passos

De forma geral o resultado foi positivo.

O novo layout conseguiu apresentar bem as informações que estavam faltando no começo do experimento mas ainda falta testes usando dados reais do programa para sanar algumas de navegabilidade como:

1. Este estilo de navegação acabaria trazendo o mesmo problema do Netflix de analysis paralysis?
2. As tags junto com categorias acaba ficando muito confuso? Será que os dois ao mesmo tempo fica redundante?
3. Este estilo de navegação ficou mais prático, mas não foi analisado o uso de pais escolhendo histórias junto com os filhos. Talvez falte um elemento lúdico para trazer mais a atenção das crianças.

Mas isso fica para um próximo sprint :)

Este foi o meu primeiro case study publicado no Medium, o cenário faz parte de um exercício do site bitesize UX, qualquer feedback é bem vindo.

Behance: https://www.behance.net/ViniciusSato
LinkedIn: https://www.linkedin.com/in/vinicius-satoj/
Email: vinicius.satoj@gmail.com

Foi usado o Figma para gerar os wireframes e versão final do protótipo.
Protótipo
Arquivos para edição