O estilo básico é claro, vibrante e moderno
As interfaces para crianças, bem como para adultos, devem ser claras. Na plataforma educacional, nada deve desviar a atenção da ocupação principal - o aprendizado. Portanto, a base do estilo Uchi.ru é o design plano com o nível mínimo necessário de detalhes de objetos e formas geométricas limpas.
A mesma ilustração há cinco anos e agora. Os contornos são mais claros e as cores mais ricas.
O design plano surgiu nos anos 80 e voltou a ser popular nos anos 2010. Quarenta anos atrás, o design plano era restringido por restrições técnicas: na época, era impossível exibir sombras e gradientes. Hoje, o apartamento parece moderno, mas não chama a atenção para si mesmo. O usuário se concentra não nos gráficos, mas no que eles enquadram - o processo educacional.
Tentamos tornar a aparência do Uchi.ru leve, suculenta e relevante. Usamos sombras saturadas de luz, mantemos o equilíbrio de cor e fundo branco, monitoramos o contraste. Tudo isso ajuda as crianças a distinguir claramente os limites dos elementos da interface e separá-los intuitivamente.
Contraste bom e ruim
Elemento de entretenimento: universo de personagens
É importante falar com seu filho na língua dele. Uma pesquisa do Nielsen Norman Group mostrou que as crianças acessam a Internet principalmente para se divertir. Levamos isso em consideração e criamos uma concha para o núcleo educacional - um mundo no qual as crianças têm interesse em estudar. A base do mundo do Uchi.ru é o universo dos dinossauros.
O desenho de um aluno da escola
Mascote Uchi.ru de Tyumen - o dinossauro Grisha - surgiu em 2015 e imediatamente se apaixonou pelas crianças. Aos poucos, ele adquiriu parentes e amigos - o universo dos dinossauros continua a crescer. Personagens não apenas decoram interfaces e tarefas - eles ajudam a estabelecer contato com as crianças. As histórias que acontecem com Grisha envolvem os alunos e facilitam o processo de aprendizagem, e somos inspirados a novas ideias.
As crianças percebem o dinossauro como uma autoridade e seu herói. Ajuda-nos muito falar a mesma língua com os nossos utilizadores. Recebemos várias centenas de cartas de crianças todos os anos. Os caras desenham Grisha, contam a ele sobre seu sucesso acadêmico, inventam novas histórias.
Etapas do desenvolvimento da imagem de Grisha
Mas os alunos do ensino fundamental e médio não estão mais tão interessados no universo dos dinossauros: parece infantil demais para eles. Em vez disso, os alunos da 5ª à 11ª séries são acompanhados na plataforma por personagens adolescentes e super-heróis que parecem grandes e legais.
Personagens de super-heróis do ensino médio
O tamanho importa: fontes, botões, tamanho do texto
As crianças percebem as interfaces de maneira diferente dos adultos. Isso é especialmente verdadeiro para o texto.
- Crianças de 3 a 5 anos ainda não conseguem ler uma única palavra e tratam as palavras como imagens.
- Crianças de 6 a 8 anos leem devagar. E quanto mais jovens eles são, mais provável é que façam isso silabicamente. Para alunos do ensino fundamental, é importante que o texto na tela seja grande para que as palavras sejam mais fáceis de ler.
- Crianças de 9 a 12 anos leem mais rápido, mas ainda mal. Uma criança pode dominar a habilidade de escanear texto apenas por volta dos 13-14 anos.
Desenvolvemos várias regras que ajudam a levar em consideração as peculiaridades do estilo de leitura das crianças:
- Certificamo-nos de que o texto das nossas interfaces é grande, pelo menos 16px de altura.
- Não deve haver muito texto. É melhor se houver apenas uma palavra.
- Bons botões são grandes e contrastantes. Eles devem ter pelo menos 30 px de altura e a área clicável deve ser muito maior do que o botão em si.
Um exemplo de conta pessoal de um aluno - Reconhecendo o poder do hábito: faça botões com o formato esperado, coloque-os em lugares previsíveis.
. (2017)
, , . , , , . . . , .
, , . , .
. , , . , .
. — . - next step button . , , — .
, , . — , -. .
, . , .
: , , , , , , .
As crianças usam o mouse e o teclado de maneira diferente
Enquanto para um adulto a tarefa de digitar uma palavra é uma questão de segundos, para uma criança pode demorar um minuto ou mais. Quanto mais jovem a criança, pior se desenvolvem as habilidades motoras finas de suas mãos e mais doloroso é para ela mover o cursor pela tela, clicar em pequenos botões e links.
Procuramos levar tudo isso em consideração na primeira tela - ao entrar no site.
- A senha é visível durante a introdução e até que a criança clique em "Enter". As crianças demoram a digitar, portanto, se a senha estiver escondida atrás de asteriscos, elas podem esquecer quais caracteres já inseriram e quais precisam ser adicionados.
- — . , , , , . , — . .
- . . , . .
- . . , .
.
Atenção é ouro: sem obstáculos no caminho do usuário
Os botões parecem botões
As crianças, ao contrário dos adultos, aprendem mais sobre sites e aplicativos. Crianças com menos de dez anos têm maior probabilidade de tentar uma ação fora do padrão. Por exemplo, clicar em objetos que parecem botões ou ícones, clicar neles repetidamente, esperando que a enésima vez leve a um novo resultado. Os adultos têm maior probabilidade de generalizar as experiências de uma ou duas tentativas. Portanto, em interfaces infantis é tão importante fazer botões na forma de botões, e o resto dos elementos - para ser o mais diferente possível dos botões.
Esperar é torturante
Os adultos não gostam de longos períodos de carregamento. As crianças não a amam ainda mais! Se depois de clicar na tela nada acontecer por um segundo inteiro, a criança ficará irritada e continuará clicando. Mesmo 800ms, durante os quais a animação dura, parecem muito longos para as crianças.
Quanto menos telas entre o conteúdo, melhor
O principal objetivo simplificado da interface da plataforma educacional é mergulhar a criança na resolução de problemas. Entre as cartas, a criança vê notificações de sucesso ou fracasso, entra na interface de sua conta pessoal, onde pode ir para outras disciplinas ou dar continuidade à solução.
Com o tempo, houve mais mecânica competitiva na plataforma, junto com o aumento no número de alertas. É assim que o caminho da criança entre os cartões poderia ser, se continuássemos a comunicar todas as informações sem exceção:
um caminho tão longo inevitavelmente causaria uma rotatividade de usuários, então, entre as tarefas, mostramos apenas uma tela com um único botão "Decidir a seguir":
Sobre opcional - honestamente
Dê às crianças a opção de realizar ou não atividades adicionais, mas opcionais.
Detalhes - sob o corte
Detalhes e detalhes não devem desviar a atenção da ação principal, portanto, eles não pertencem à tela principal.
Crianças não lêem
Nos primeiros segundos, os adultos verão esta tela como esta:
Um aluno da segunda série assim:
Este recurso deve ser levado em consideração e usado para seus próprios fins. Então, uma tela com muito texto pequeno vai forçar a criança a chamar um adulto para a tela.
Letras pequenas e um exemplo complexo desviam a atenção das crianças, mas atraem seus pais para a tela.
Vamos resumir
Em muitos aspectos, as interfaces para crianças são semelhantes às interfaces para adultos. Ao mesmo tempo, existem recursos que são fáceis de levar em consideração. Por tentativa e erro, identificamos princípios para nós mesmos:
- Mantenha o equilíbrio da cor e do fundo branco, monitore o contraste.
- Mergulhe o aluno em um mundo de fantasia - desta forma o material é mais fácil de aprender.
- Etiquetas grandes são mais fáceis de ler.
- .
- — , .
- . — .
- .
- .
- , .
- .
- . .
- . .