Organizando o conteúdo: Índice da Aula
Luigi Bonafé é um professor de História que criou sua plataforma de educação para dar aulas especificamente para aspirantes a diplomatas, para o Concurso de Admissão à Carreira de Diplomata (CACD), o concurso público de ingresso à carreira.
Problema:
Com diversas demandas, uma das primeiras que resolvemos era a organização da aulas. Diferentemente de muitos dos meus clientes que possuem aulas mais curtas, conseguindo quebrá-las, as aulas de História para aspirantes a diplomatas eram longas, com diversos recursos agregados, vídeos, e referências. Por isso, nossa tarefa era organizar melhor o conteúdo para o estudante, a fim de que ele não perdesse nenhuma conteúdo.
Solução:
Fizemos diversas iterações de soluções via design, e a escolhida foi uma tabela de índice flutuante que organizaria automaticamente os conteúdos, além de uma melhoria no design das aulas.
Tecnologia usada:
- Foi tudo programado direto
Primeira etapa: propostas de soluções.
![](https://polystud.io/wp-content/uploads/2024/03/WhatsApp-Image-2024-02-27-at-15.25.39-1024x564.jpeg)
![](https://polystud.io/wp-content/uploads/2024/03/WhatsApp-Image-2024-02-27-at-15.25.39-1024x564.jpeg)
![](https://polystud.io/wp-content/uploads/2024/03/WhatsApp-Image-2024-02-27-at-15.21.57-1024x564.jpeg)
![](https://polystud.io/wp-content/uploads/2024/03/WhatsApp-Image-2024-02-27-at-15.21.57-1024x564.jpeg)
![](https://polystud.io/wp-content/uploads/2024/03/WhatsApp-Image-2024-02-27-at-15.27.20-1024x564.jpeg)
![](https://polystud.io/wp-content/uploads/2024/03/WhatsApp-Image-2024-02-27-at-15.27.20-1024x564.jpeg)
O desafio foi encarado com uma série de propostas de soluções, todas elas com seus prós e contras que foram apresentados ao cliente. Cada uma das propostas resolvia o problema, mas também o cliente contribuiu com sua visão sobre o branding da empresa e conhecimento sobre como o seu público reagiria. A solução final escolhida foi uma tabela de índice flutuante.
A vantagem da solução escolhida.
![](https://polystud.io/wp-content/uploads/2024/03/GravacaoTelaLuigi-ezgif.com-video-to-gif-converter.gif)
![](https://polystud.io/wp-content/uploads/2024/03/GravacaoTelaLuigi-ezgif.com-video-to-gif-converter.gif)
Uma das vantagens desta proposta escolhida é que ela não exigiria nenhum esforço em relação ao contéudo, uma vez que desenvolvemos um código javascript que identifica os sub-títulos da aula (h2, h3, h4…) e os adiciona automaticamente a uma janela que seria posicionada à esquerda das aulas.
A solução de Acordeão teria uma vantagem que um aluno poderia colapsar algum conteúdo e não perceber, assim perdendo ele de vista se ele não estivesse atento. Poderíamos prevenir isso ao deixar óbvio que era um botão; mas, sendo uma solução pouco usual para educação, resolvemos não adotar.
Já a solução de abas, enquanto uma bem elegante, exigiria trabalho manual do administrador em classificar todos os conteúdos dos cursos.
Aqui está a versão mobile da solução.
![](https://polystud.io/wp-content/uploads/2024/03/Design-site-projetos-1024x512.png)
![](https://polystud.io/wp-content/uploads/2024/03/Design-site-projetos-1024x512.png)
Como desenvolvemos a solução.
Criamos um código javascript que identifica os headings e os adiciona a uma janela, organizando hierarquicamente de acordo com o nível dos títulos (cabeçalhos h3 dentro de cabeçalhos h2). Por padrão, a janela fica flutuante à esquerda do conteúdo, acompanhando a rolagem. Para mobile, contudo, o índice fica fixo ao topo, para economizar espaço.
Além disso, modificamos algumas coisas do design: o painel de aulas lateral foi colapsado por padrão para dar mais respiro; colocamos um fundo cinza para não cansar tanto a leitura, uma vez que existe muito texto; separamos melhor as seções das aulas para que ficasse mais claro pro aluno quando um conteúdo termina e outro começa; removemos elementos dispensáveis da navegação para que o aluno pudesse focar.
Segue o antes e depois:
![](https://polystud.io/wp-content/uploads/2024/03/Capture-decran-2024-03-05-a-16.34.49-1024x551.png)
![](https://polystud.io/wp-content/uploads/2024/03/Capture-decran-2024-03-05-a-16.34.49-1024x551.png)
![](https://polystud.io/wp-content/uploads/2024/03/Capture-decran-2024-03-05-a-16.04.28-1024x532.png)
![](https://polystud.io/wp-content/uploads/2024/03/Capture-decran-2024-03-05-a-16.04.28-1024x532.png)
Vamos conversar?
11 93618-5955