Como criar produtos digitais para crianças
Se engana quem pensa que para criar designs para crianças só precisamos seguir os mesmos princípios gerais do design. De fato, algumas das heurísticas de Nielsen se enquadram para pessoas de todas as idades e poderiam (e devem!) ser usadas em produtos para crianças também. Porém, não podemos considerar crianças apenas como pequenos adultos e precisamos levar em consideração aspectos físicos e cognitivos quando estamos projetando algo específico para elas.
Este artigo tem como objetivo trazer um case real de produto para crianças, apresentar brevemente uma base teórica sobre habilidades cognitivas e, por fim, dar algumas dicas práticas de como podemos melhorar nossos designs para atender aos usuários mais novos.
O caso da codeBuddy
A codeBuddy é uma das marcas do Edify que trabalha com franquias de escolas de programação para crianças. Recentemente, a marca também começou um novo negócio B2B com escolas da educação básica, implementando um programa de programação que abrange as turmas do 2º ano do Fundamental I até o 9º ano do Fundamental II.
Trabalhando como product designer no time da codeBuddy, participei de algumas entrevistas com professores e rodei um teste de usabilidade com os alunos. Ambas as pesquisas tinham objetivos diferentes, mas nos deram insights parecidos sobre a experiência dos alunos mais novos na plataforma. Os insights foram:
- Palavras avançadas ou vagas: algumas palavras usadas na plataforma se mostraram vagas ou complexas para os alunos. O botão de Resetar, por exemplo, alguns alunos não sabiam o que resetar significava, e mesmo os que sabiam não tinham certeza sobre a ação do botão.
- Dificuldade em arrastar objetos: professores afirmaram que os alunos mais novos possuem dificuldade em arrastar objetos para locais muito específicos como, por exemplo, arrastar os blocos de código durante a atividade.
- Dificuldade em usar o computador: os professores afirmaram que os alunos mais novos possuem dificuldade de usar o computador, não somente no sentido motor (exemplo: uso do mouse), mas também com relação ao conhecimento de informática. Algumas dificuldades apontadas foram: colocar o @, colocar letra maiúscula, trocar a aba no navegador e reconhecer links.
- Conteúdo inadequado para a idade: como o conteúdo da plataforma da codeBuddy é voltado para uma faixa etária muito ampla (de 7 a 15 anos) os alunos mais novos possuem dificuldade em entender conceitos mais abstratos. Além disso, em relação às turmas que tem aula de codeBuddy em inglês, o nível de inglês desse conteúdo parece muito avançado para as crianças mais novas.
- Dificuldade de leitura: por fim, os alunos mais novos estão no meio do processo de letramento. Portanto, eles possuem dificuldade de ler alguns textos mais complexos do conteúdo, o que também dificulta a compreensão dos conceitos de programação.
Mas afinal o que são habilidades cognitivas?
De acordo com Linda Gottfredson, “habilidade cognitiva é definida como uma capacidade mental geral que envolve raciocínio, resolução de problemas, planejamento, pensamento abstrato, compreensão de ideias complexas e aprendizagem por experiência.”. Em outras palavras, estamos falando sobre habilidades como:
- Percepção: reconhecer sons, formas, símbolos e imagens.
- Atenção: manter o foco em determinadas tarefas e objetivos.
- Memória: memorizar fluxos, significados e interações.
- Habilidades motoras: utilizar o mouse com precisão e realizar interações.
- Linguagem: ler, escrever e interpretar textos e símbolos.
- Processamento visual e espacial: compreender relação entre objetos e composição de layout.
- Funções executivas: planejar para realizar tarefas e alcançar objetivos.
Ou seja, as habilidades cognitivas são essenciais para que possamos interagir com os produtos digitais. Porém, as crianças não possuem todas essas habilidades totalmente desenvolvidas e esse desenvolvimento ocorre em um longo processo que ocorre do nascimento até aproximadamente os 12 anos de idade.
Jean Piaget foi um psicólogo especialista em desenvolvimento infantil geralmente citado como referência na área da educação. Além disso, suas teorias sobre a mente da criança também podem nos auxiliar na adaptação dos nossos produtos para que se adequem à fase que as crianças do nosso público-alvo se encontram.
Segundo Piaget, existem quatro estágios de desenvolvimento da criança, mas como geralmente não desenvolvemos produtos digitais para bebês, não trataremos sobre a fase deles neste artigo. As demais fases são:
- Pré-operatório: 2 a 7 anos. Nesta etapa as crianças são egocêntricas, confundem o real e a fantasia frequentemente, não possuem noção de conservação, podem pensar em termos de símbolos mas não conseguem assumir a perspectiva dos outros.
- Operacional concreto: 7 a 12 anos. A criança consegue pensar usando a lógica, mas somente com objetos concretos, tendo dificuldade com conceitos abstratos. Possuem uma compreensão espacial melhor, são capazes de criar classificações e ligações entre os objetos e estão no meio do processo de letramento.
- Operacional formal: a partir dos 12 anos. Nesta etapa as habilidades cognitivas estão praticamente desenvolvidas. O adolescente é capaz de construir hipóteses, pensar de forma abstrata e possui um melhor conhecimento social.
A partir da teoria de Piaget, conseguimos visualizar melhor a evolução das habilidades cognitivas da criança e como ela poderá interagir com nossos produtos em cada etapa do seu desenvolvimento.
Quando falamos sobre habilidades cognitivas das crianças, precisamos também falar sobre habilidades motoras que também se desenvolvem em um longo processo durante a infância. Existem basicamente três tipos de habilidades motoras:
- Grossa: movimentos que envolvem grandes grupos musculares, por exemplo: saltar, saltitar, correr.
- Fina: movimentos que envolvem pequenos músculos dos punhos e dedos, por exemplo: agarrar objetos, caligrafia, digitar.
- Coordenação: combinação de habilidades motoras grossas e finas e a coordenação de diferentes partes do corpo, por exemplo: dançar, jogar um jogo.
A tabela a seguir mostra o quanto está desenvolvido cada tipo de habilidade motora em cada etapa da infância, e quais os devices preferidos e os gestos dominados em cada idade. Vamos ver cada um deles:
3 a 5 anos
- Habilidade motora grossa: limitada.
- Habilidade motora fina: muito limitada.
- Coordenação motora: muito limitada.
- Devices preferidos: tablets e smartphones.
- Gestos dominados: tapping, dar scroll e arrastar.
6 a 8 anos
- Habilidade motora grossa: parcialmente desenvolvida.
- Habilidade motora fina: limitada.
- Coordenação motora: limitada.
- Devices preferidos: tablets, smartphones e trackpad do notebook.
- Gestos dominados: clicar com o mouse e trackpad, uso simples de teclas.
9 a 12 anos
- Habilidade motora grossa: bem desenvolvida.
- Habilidade motora fina: bem desenvolvida.
- Coordenação motora: parcialmente desenvolvida.
- Devices preferidos: tablets, smartphones, trackpad do notebook e mouse.
- Gestos dominados: arrastar, dar scroll com o mouse e trackpad, coordenação complexa entre teclas e mouse.
Design para crianças na prática — Dicas
Até agora nós vimos como as crianças podem ser diferentes dos adultos em termos cognitivos e motores, e o quanto os produtos não pensados nelas podem dificultar suas experiências. Mas como podemos colocar esse conhecimento em prática e desenvolver de fato soluções digitais adaptadas para os usuários mais novos?
Vamos ver algumas dicas e exemplos reais:
1. Objetivos, tarefas e ações precisam estar claros para a criança.
Como as crianças não conseguem pensar em termos abstratos e não conseguem assumir a perspectiva dos outros, precisamos deixar claro para elas, por meio da interface, quais são os objetivos e as tarefas que elas precisam realizar. Além disso, é preciso estar claro qual ação determinado componente irá realizar, já que o conhecimento delas em informática ainda é precário.
No exemplo abaixo, o game dá instruções visuais bem claras que indicam para a criança exatamente o que ela precisa fazer e como (arrastando as peças).
Já neste outro exemplo da nossa atividade Blockly, o botão resetar não dá nenhuma informação para o aluno do que exatamente irá acontecer se ele clicar em resetar. Identificamos com isso que precisamos melhorar o texto do botão e adicionar um modal de confirmação da ação.
2. Escolha modelos mentais que a criança já conhece.
Uma das dez heurísticas de Nielsen é “Correspondência entre o sistema e o mundo real”, e, quando se trata de crianças, este princípio se torna ainda mais relevante, já que as crianças possuem ainda pouco conhecimento de mundo e se apoiam muito no que sabem para realizar ações.
Nesta atividade de pintar, as crianças preferem usar a ferramenta da borracha ao invés dos botões de desfazer e refazer, localizados no topo na hora de corrigir o desenho. Mesmo parecendo menos prática, a borracha conversa mais com a realidade da criança do que um botão com uma seta, o que a leva a optar por esta ferramenta.
3. Faça componentes e interações levando em consideração a habilidade motora da criança.
Digitar pode ser difícil para as crianças por causa das habilidades motoras delas e porque elas ainda não estão completamente letradas. Pensando nisso e em acessibilidade, o YouTube Kids possui, na sua barra de busca, um botão que dá acesso ao microfone que auxilia a criança na sua pesquisa de forma prática e divertida.
Já neste segundo exemplo, o jogo não foi desenvolvido levando em consideração às habilidades motoras da criança. O objetivo é arrastar os repolhos para os círculos cinza, mas essa interação é muito complicada para as crianças pequenas, o que faz com que elas fiquem frustradas e deixem o jogo.
4. Faça interações flexíveis com mais de uma possibilidade para a criança.
Quando damos mais de uma opção de interação para a criança diminuímos as chances dela ficar frustrada e tornamos sua experiência mais tranquila e flexível. Neste exemplo abaixo, o jogo dá ao jogador três possibilidades para mover o caminhão: pressionando o botão com a seta, tocando na área direita da tela e arrastando o caminhão para a direita. Dessa forma, a criança pode escolher a interação que desejar.
5. Torne a navegabilidade mais fácil com sugestões de conteúdos.
As pessoas ficam frustradas quando a busca que elas realizam dão em nenhum resultado, ou quando elas não conseguem escolher o próximo conteúdo que vão consumir dentre tantas opções. Isso também é válido para as crianças! Por isso, devemos procurar dar sugestões de conteúdos para elas de forma a facilitar a navegação e diminuir a frustração.
No exemplo abaixo, ao terminar de ver um vídeo a criança pode clicar no botão de voltar e selecionar um novo vídeo, ou fazer a seleção direto pelo carrossel de sugestões logo abaixo. Com o uso de algoritmos, podemos tornar essas sugestões mais inteligentes, indicando conteúdos similares ao que a criança já consome.
Já neste exemplo, ao realizar uma busca no site ele não dá nenhum resultado e não sugere nenhum conteúdo que seja similar ao que foi pesquisado. Além de frustrar a criança, também torna a navegação dela mais complexa, já que ela precisará realizar uma nova busca ou navegar nos conteúdo para enfim encontrar o que deseja.
6. Torne o uso do computador mais fácil e simples
Como já vimos anteriormente, é difícil para crianças pequenas usarem o computador por causa de suas habilidades cognitivas e motoras e, também, porque hoje em dia, elas não estão usando muito o computador tão cedo, optando pelos smartphones. Por isso precisamos tornar a experiência delas no desktop o mais simples possível.
No YouTube Kids, a tela inicial é mais simplificada do que a tela original do YouTube. Temos somente um scroll vertical, menos quantidade de botões e textos e componentes como botões e barra de busca maiores.
Já neste outro exemplo, temos a página de login da codeBuddy, um de nossos produtos. Em nossas pesquisas, descobrimos que os alunos mais novos tinham dificuldade de logar na plataforma porque digitavam a senha errada várias vezes. Com isso percebemos que ter um botão de exibir senha pode ajudar nesse processo, facilitando o login.
O que podemos tirar de tudo isso
Neste artigo vimos cases reais de produtos para crianças, aprendemos as diferenças cognitivas que existem entre adultos e crianças e vimos algumas dicas práticas de como podemos adaptar os produtos para os usuários mais novos. Porém, ainda assim pode ser difícil para nós, adultos, conseguirmos criar produtos digitais que realmente cativem as crianças.
Para isso, precisamos constantemente realizar pesquisas quanti e qualitativas com crianças e analisar dados e comportamentos para que possamos começar a compreender suas necessidades e desejos. E, para finalizar, deixo a seguinte frase de Piaget:
Como podemos, com nossas mentes adultas, saber o que será interessante? Se você seguir a criança… pode descobrir algo novo.
Referências
LIU, Feifei. Design for Kids Based on Their Stage of Physical Development. Avaliable in: https://www.nngroup.com/articles/children-ux-physical-development/
LIU, Feifei. Designing for Kids: Cognitive Considerations. Avaliable in: https://www.nngroup.com/articles/kids-cognition/
PIAGET, Jean. A psicologia da criança. Coautoria de Barbel Inhelder. 17. ed. Rio de Janeiro, RJ: Bertrand Brasil, 2001. 137p.
What are cognitive abilities and skills, and can we boost them? Avaliable in: https://sharpbrains.com/what-are-cognitive-abilities/
