.png)
.png)
como o Design de Experiência e Interface pode apoiar professores
Por: Larrisa Salustino - Producter Designer no AprendiZAP
Pollyana Azevedo - Producter Designer no AprendiZAP
Quando pensamos em educação, é certo dizer que acreditamos na educação como um direito humano básico. É com educação que podemos moldar indivíduos, comunidades e, por consequência, o futuro. Com a tecnologia, entendemos que o impacto na educação é notável: mais pessoas possuem acesso a equipamentos e ferramentas digitais, e na sala de aula não é diferente. Porém, não podemos deixar de pontuar que apesar de mais facilidade no acesso, ainda há pessoas com pouco ou nenhum conhecimento sobre tecnologia. Essa realidade se agrava ainda mais quando falamos sobre educação e tecnologia para educação pública: em pesquisa feita por nosso time com professores que usam o AprendiZAP, identificamos que 43,7% dos professores não possuem internet, ou um acesso estável, em sala de aula.
Como, então, podemos trazer tecnologia para um público que não é nativo digital, levando em consideração o contexto social, econômico e estrutural desses profissionais do setor público?
Falar sobre inteligência artificial (IA) já, por si só, abre espaço para debates aprofundados sobre o impacto de sua utilização. Desde certa apreensão das pessoas em usar, como também um medo de que essa tecnologia seja para uma substituição desses educadores.
Assim, a discussão sobre IA demanda uma sensibilidade sobre o assunto com nosso público.
Diante disso, o time AprendiZAP teve, e ainda tem, o desafio de tornar possível o uso dessa tecnologia para facilitar a vida de professores. A partir de um processo de pesquisa, descobrimos que uma das maiores dores de nossos professores é a falta de tempo. Junta-se isso a uma rotina de sobrecarga e também a falta de recursos que apoiem esses educadores no seu cotidiano. Com isso, decidimos juntar o nosso conhecimento em tecnologia, a inteligência artificial e as inteligências individuais e coletivas de uma equipe pedagógica coordenada por nosso time para elaborar 8 mil atividades de metodologias ativas que só foram viáveis com o uso de IA.
Falamos mais sobre isso nos artigos:
Desafios de design
Desenhar uma solução amigável a usuários não acostumados com tecnologia configura um enorme desafio. Desafio esse que faz parte do sonho de fazer com que o AprendiZAP seja a plataforma mais prática e fácil de apoio pedagógico aos professores.
Assim, a partir de uma amostra de 12 tipos diferentes de metodologias ativas elaboradas e adaptadas para 80 aulas selecionadas de Português do Ensino Fundamental 2 do AprendiZAP, conseguimos validar a hipótese de que professores querem inovar em sala de aula e promover o protagonismo de seus estudantes. Para essa constatação, incluímos os conteúdos das metodologias em PDF às páginas de aulas que originalmente podiam ter no máximo dois tipos de atividades: exercício de múltipla escolha e/ou proposta de atividade aberta.
Em seguida, após analisarmos que de fato essas novas propostas de atividades estavam sendo utilizadas por professores, seguimos para o projeto maior: trazer metodologias ativas para mais aulas dos anos finais do ensino fundamental. Isso só foi possível graças à tecnologia de IA generativa, pela qual nosso time estruturou formas de elaborar as metodologias de acordo com critérios estipulados após o primeiro experimento e conseguiu gerar 8.568 materiais educacionais. Estes materiais, após a etapa de revisão por professores especializados, seguiram para a equipe de design.
A proposta de design levou em consideração duas principais questões: como padronizar e estilizar o conteúdo de forma que seja fácil de ler e compreender sua aplicabilidade; e como agregar tantos conteúdos inovadores em uma página de aula possibilitando uma boa experiência de uso.
Design e implementação
Entregável
Com a missão de agregar aos conteúdos das aulas um maior foco em metodologias ativas, o norte do projeto de design se baseou em pensar em um fluxo de navegação prático, simples, intuitivo e como mostrar mais atividades destacando e distinguindo cada seção, possibilitando o download dos conteúdos gerados.Baseada na persona do AprendiZAP, a etapa de aplicação de recursos de design inclusivo e acessibilidade foi pensada a fim de, cada vez mais, aproximar e refinar aspectos de facilidade e eficiência do uso do produto digital. Afinal, segundo Don Norman, pessoa pioneira nos estudos de experiência do usuário, um dos pilares para alcançar uma experiência de usuário satisfatória é realizar uma investigação profunda sobre quem estamos nos comunicando. No caso do presente projeto de design, o objetivo foi proporcionar experiências agradáveis para pessoas professoras que, em sua maioria, não circulam com naturalidade pelo território das hipermídias digitais.
Grid e layout
A opção por um grid fixo com um número par de colunas, tanto na versão mobile quanto na versão desktop, possibilitou que, à medida que o layout fosse alterado - conforme os objetivos mínimo (320x569px) e máximo (2560x1080px) para as dimensões da interface, os componentes com as mesmas funções pudessem ser mantidos e/ou ajustados. Dessa forma, visando preservar as qualidades ergonômicas, funcionais e de experiência da interface. Isso significa que a flexibilidade de poder ajustar o layout para alterações em larga escala implica em uma decisão de design sustentável.
Como qualquer implementação incremental de um produto digital, precisamos levar em consideração as premissas do entregável do produto digital. Neste sentido, se mantiveram a identidade visual da aplicação nas respectivas cores, formas, tipografia e componentes.
Para o layout foi estabelecido um formato simples e intuitivo, utilizando o espaço como recurso favorável para que o olho pudesse percorrer e reconhecer as informações agrupadas por seções, separadas por títulos e variação de cores. Como ganhos e ajustes foram realizadas a reorganização de layout para: 1. acomodar novos componentes de interface e 2. direcionar ao conteúdo das aulas, em formato pdf e material de apoio, em vídeo (imagem 1 e 2, respectivamente).
[1] [2]
Fonte: AprendiZAP - Imagens 1 e 2: antiga página de aulas do AprendiZAP com 2 atividades e nova página de aulas com 8 atividades, respectivamente
Composição visual
No que diz respeito à composição visual, é preciso destacar que há duas principais mudanças:
atividades: contraste leve, dentro do mesmo espectro de cor (#E31586);
geração de conteúdo com inteligência artificial: maior saturação (#6F1CA8).
A seção de geração de conteúdo com inteligência artificial (imagem 3) é novidade e possui função de caráter generativo para as pessoas usuárias. Isto é, de acordo com o tema e BNCC é possível criar diferentes conteúdos e atividades que apoiem a pessoa usuária na construção e/ou complemento do planejamento da aula. Neste sentido, esta seção tem a função de explicar, de forma sucinta e simples, a ação que precisa ser realizada pelas pessoas usuárias para se obter o conteúdo esperado.
[3]
Fonte: AprendiZAP. Seção de inteligência artificial.
Formas
O olho humano é naturalmente atraído por curvas. Como o layout foi composto em um grid ortogonal, a inclusão de elementos retangulares com cantos arredondados propiciou certo arredondamento das formas, destacando os componentes, que se tornaram mais fáceis de encontrar e ler. Como ganho, quando há este tipo de pregnância - que segundo a Gestalt se configura pela estabilidade da percepção visual humana - há uma redução da carga cognitiva para a pessoa usuária. Este desenho foi aplicado em todos os componentes retangulares da interface (imagem 4).
[4]
Fonte: AprendiZAP. Botões e cards: elementos de ação com rótulos claros e descritivos. Cores: 1. principal - roxo (#6F1CA8), evidenciando call to actions (CTA's), atraindo a atenção e demarcando a hierarquia de informações. 2. secundária: rosa (#E31586) apoio, comprimento de cor mais vibrante.
Ícones
Para os ícones, buscou-se relacionar a semântica da palavra acompanhante da linguagem verbal focada na função desempenhada por cada um. Sabemos que, embora aspectos culturais, sociais e pessoais das pessoas usuárias da interface e do produto digital influenciam diretamente na construção e implementação destes elementos, buscar uma linguagem padronizada e consistente foi muito importante para a escolha e alocação de cada ilustração. Utilizando como referência o Material Design 3, criado pelo Google, trouxemos brevidade e consistência necessários. As principais características de construção são o preenchimento com cores sólidas, itens com redução drástica de detalhes, formas planas e literais que foram escolhidas para compor a comunicação visual.
Texto
É utilizada uma única família de fonte, a Montserrat sem serifa (imagem 5). Este estilo é amplamente recomendado para mídias digitais pois funciona bem em textos menores. Também é facilmente distinguido por pessoas que possuem dificuldade de visão pela forma simples e legibilidade mesmo em cenário com menor densidade de pixels, além de dialogar com a atmosfera de tecnologia, modernidade e sutileza que o produto deseja transmitir. A utilização modulada em diversos pesos, agrega ao contraste e ênfase do que se deseja priorizar enquanto informação para a interface.
Para o content design, a experiência de leitura e teor dos textos foi realizada pela equipe de design e revisada pelo time de conteúdo, bem como ajustes e incrementos realizados a partir das pesquisas e entrevistas realizadas com os stakeholders envolvidos no projeto.
[5]
Fonte: Pinterest
Interações
Em relação às interações, há uma alteração na mudança de estado na tela como resposta a uma ação da pessoa usuária com a finalidade de reduzir a complexidade para telas mobile e desktop. O feedback visual comportamental para dimensões maiores de interface é representada pela abertura de um balão de diálogo com linha contínua, fazendo uma analogia à representação visual da fala no universo do design gráfico (imagem 6).
Para evidenciar funções, as áreas de toque foram ampliadas para cartões. Assim, foram utilizados dois estilos para cada seção: delineado, para a área de atividades; e preenchido, para a seção de inteligência artificial. Os texto colocados nos cartões indicaram claramente a hierarquia da informação e serviram como pontos de entrada para níveis mais profundos de navegação.
[6.] [6.1]
Fonte: AprendiZAP.
Considerações finais
O AprendiZAP é uma ferramenta poderosa que tem o potencial de transformar a educação. No presente momento, estamos em um estado de percepção e análise de dados com o uso das pessoas usuárias. Nosso objetivo é coletar constantemente feedbacks sobre a usabilidade e a eficácia da interface. Essa etapa é crucial para entendermos a experiência do usuário a partir de diferentes perspectivas e, assim, aprimorarmos nosso produto digital.
Durante esse processo de construção, alguns insights emergiram e gostaríamos de compartilhá-los:
Insight #1: alinhamento constante de informações é fundamental. Todos os membros da equipe devem ter uma compreensão clara e consistente dos objetivos e estratégias do projeto.
Insight #2: a colaboração é a chave para um bom design. Acreditamos que a troca de ideias e a cooperação entre os membros da equipe são fundamentais para a inovação e a resolução de problemas.
Insight #3: o design não é um processo linear, mas um ciclo contínuo de aprendizado, teste e refinamento.
Insight #4: o AprendiZAP atua não somente enquanto uma caixa de ferramentas para professores, mas também tem a capacidade de democratizar a geração de conteúdos utilizando inteligência artificial. Além disso, enquanto design de experiência e interface há um grande potencial de explorar recursos extras que incorporem a interação com os demais sentidos do ser humano.
Enquanto time, estamos comprometidos em melhorar continuamente nosso produto com base no feedback dos usuários e em nossos insights de design. Acreditamos que, ao fazer isso, podemos ajudar os professores a enriquecer suas aulas e, por fim, melhorar a experiência de aprendizado para os alunos.