311 lines
21 KiB
TeX
311 lines
21 KiB
TeX
\section{O IF Salas}
|
|
|
|
A proposta do IF Salas é ser uma plataforma inovadora de gerenciamento de aprendizagem projetada para atender às necessidades
|
|
específicas dos institutos federais, oferecendo suporte tanto para a modalidade de ensino híbrido quanto para a educação a
|
|
distância (EAD). Como um sistema de código aberto, o IF Salas ofereceria flexibilidade, personalização e segurança, permitindo que
|
|
instituições educacionais adaptem a plataforma de acordo com suas próprias necessidades e requisitos. Com uma variedade
|
|
de recursos robustos, incluindo ferramentas de colaboração, avaliação, acompanhamento do progresso do aluno e comunicação
|
|
integrada, o IF Salas permitirá educadores a fornecer experiências de aprendizagem envolventes e eficazes.
|
|
|
|
Na presente seção, serão examinados os casos de uso desenvolvidos para o IF Salas, analisando como os princípios
|
|
de Usabilidade \cite{nielsen93} e Microinterações \cite{saffer2013} se manifestam em cada contexto específico. Este estudo visa
|
|
destacar a importância da experiência do usuário (UX) na concepção e implementação eficaz de sistemas de gerenciamento de
|
|
aprendizagem, proporcionando insights valiosos sobre como esses conceitos influenciam diretamente a interação e a satisfação do
|
|
usuário dentro da plataforma IF Salas.
|
|
|
|
|
|
É importante ressaltar que há 2 tipos de usuários no IF SALAS: professor e aluno. E cada tipo de usuário tem funcionalidades
|
|
especificas. Logo abaixo estao as funcionalidades especificas do IF SALAS segmentado por tipo de usuário:
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
% Please add the following required packages to your document preamble:
|
|
% \usepackage{graphicx}
|
|
\begin{table}[]
|
|
\resizebox{\textwidth}{!}{%
|
|
\begin{tabular}{|c|l|}
|
|
\hline
|
|
\textbf{Tipo de usuário} &
|
|
\multicolumn{1}{c|}{\textbf{Funcionalidades}} \\ \hline
|
|
Professor &
|
|
\begin{tabular}[c]{@{}l@{}}Listar atividades para corrigir em ordem decrescente de data;\\ Contabilizar atividades quantidade de atividades corrigidas e pendentes;\\ Iniciar videoconferência ao clique de um botão;\\ Customizar o provedor da videoconferência;\\ Listar próximas atividades a serem entregues pelos alunos;\\ Disponibilizar e editar horários de atendimento das disciplinas;\\ Postar comunicados para a turma;\\ Disponiblizar atividades para os alunos;\\ Lançar notas das atividades;\end{tabular} \\ \hline
|
|
Aluno &
|
|
\begin{tabular}[c]{@{}l@{}}Listar turmas que está inscrito;\\ Listar próximas atividades a serem entregues da mais recente para mais distante;\\ Visualizar lista de comunicados dos professores;\\ Listar próximas atividades a serem entregues;\\ Visualizar horários de atendimento das disciplinas;\\ Visualizar detalhes de uma atividade, anexar arquivos a entrega e entregar a atividade.\end{tabular} \\ \hline
|
|
Ambos &
|
|
\begin{tabular}[c]{@{}l@{}}Listar informações úteis;\\ Acessar Calendário Acadêmico;\\ Acessar e editar informações do perfil;\\ Listar atividades disponibilizadas segmentadas por Provas e Trabalhos;\\ Listar pessoas que participam de cada turma;\end{tabular} \\ \hline
|
|
\end{tabular}%
|
|
}
|
|
\caption{Funcionalidades por tipo de usuário}
|
|
\label{tab:funcionalidades}
|
|
\end{table}
|
|
|
|
\subsection{Página inicial (Não logado)}
|
|
TODO
|
|
|
|
\subsection{Login}
|
|
|
|
Ao acessar a tela de login, o usuário é recebido com um formulário claro e conciso, onde pode
|
|
inserir suas credenciais com facilidade. Um foco automático também é aplicado ao campo de e-mail quando
|
|
a tela é acessada, facilitando uma entrada mais rápida das credenciais. Feedbacks instantâneos são fornecidos
|
|
durante o processo de submissão de dados, alertando os usuários sobre qualquer erro cometido, enquanto a opção
|
|
de recuperação de senha está facilmente acessível para aqueles que precisam de assistência adicional.
|
|
O layout responsivo também garante uma experiência consistente em diferentes dispositivos.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{login-implementacao}
|
|
\caption{Login}
|
|
\end{figure}
|
|
|
|
\subsection{Cadastro}
|
|
|
|
Ao acessar a tela de cadastro, o usuário é guiado por um formulário claro e bem estruturado, que solicita
|
|
informações essenciais de maneira organizada e compreensível. Durante o preenchimento, feedback instantâneo
|
|
é fornecido para orientar os usuários, destacando campos obrigatórios e alertando sobre possíveis erros de
|
|
entrada de dados. Além disso, opções de validação de senha e confirmação de e-mail são implementadas
|
|
para garantir a precisão e segurança das informações fornecidas.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{cadastro-implementacao}
|
|
\caption{Cadastro}
|
|
\end{figure}
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
\subsection{Página inicial logado (visão do professor)}
|
|
À esquerda, temos um menu vertical que é apresentado de forma clara, destacando as opções essenciais: "Página Inicial",
|
|
"Informações" e "Calendário Acadêmico". Microinterações discretas, como realces ao passar o mouse sobre cada
|
|
item do menu, fornecem feedback instantâneo, indicando sua interatividade e facilitando a navegação do usuário.
|
|
No centro da tela, as turmas são exibidas com clareza e organização, cada uma identificada por uma cor única,
|
|
título e ano correspondente. Essa abordagem segue os princípios de Nielsen para uma identificação rápida e
|
|
eficiente de conteúdo. À direita, uma lista de cards de atividades é apresentada em ordem cronológica, da mais
|
|
próxima à data de entrega até a mais distante. Esses cards exibem detalhes essenciais, como título da atividade,
|
|
nome da turma, data de entrega e contagem de atividades corrigidas e pendentes, com cores correspondentes para
|
|
uma rápida associação visual. No topo da tela, uma toolbar personalizada recebe calorosamente o usuário logado
|
|
com uma mensagem de boas-vindas personalizada. Além disso, oferece acesso rápido às notificações não lidas e
|
|
ao perfil do usuário. O ícone de avatar, estrategicamente posicionado, permite que o usuário acesse seu perfil
|
|
ou faça logout através de um menu dropdown, seguindo as melhores práticas de usabilidade. Essas microinterações
|
|
e elementos de design harmoniosamente integrados garantem uma experiência de usuário coesa e intuitiva
|
|
na plataforma IF Salas.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{pagina-inicial-logado-professor}
|
|
\caption{Página inicial logado (visão do professor)}
|
|
\end{figure}
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
\subsection{Sala de aula - Comunicados (visão do professor)}
|
|
|
|
O card fixo no topo foi projetado para garantir clareza e acessibilidade: a cor identificadora da turma no topo
|
|
proporciona uma rápida associação visual, seguida pelo nome da turma em destaque, oferecendo uma identificação
|
|
instantânea. Abaixo do avatar do professor, seu nome é apresentado ao lado, promovendo uma conexão pessoal e
|
|
uma experiência mais humana. As quatro abas navegáveis - "Comunicados", "Atividades", "Pessoas" e "Notas" - são
|
|
facilmente acessíveis e destacadas visualmente para facilitar a navegação entre as seções da sala de aula.
|
|
Na primeira coluna à esquerda, os cards são apresentados de forma clara e organizada, com microinterações sutis
|
|
que realçam a interatividade. Por exemplo, ao clicar no botão "Iniciar aula" no card da sala de aula virtual,
|
|
uma nova aba é aberta no Jitsi, proporcionando uma experiência de usuário contínua. Além disso, a capacidade de
|
|
editar o link da sala iniciada através do ícone de três pontos oferece flexibilidade ao professor. Os cards de
|
|
próximas atividades e horários de atendimento são igualmente interativos, permitindo a edição para garantir precisão
|
|
e relevância. Na segunda coluna, a caixa de texto para escrever comunicados é projetada para incentivar a comunicação
|
|
eficaz, enquanto os comunicados publicados são exibidos em cards individuais, facilitando a leitura e acompanhamento.
|
|
Essas microinterações cuidadosamente integradas, aliadas aos princípios de usabilidade de Nielsen, resultam em uma
|
|
tela de sala de aula online que é intuitiva, funcional e centrada no usuário, promovendo uma experiência de aprendizado
|
|
aprimorada para todos os envolvidos no IF Salas.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{sala-de-aula-comunicados-professor}
|
|
\caption{Sala de aula - Comunicados (visão do professor)}
|
|
\end{figure}
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
\subsection{Sala de aula - Atividades (visão do professor)}
|
|
Além do card fixo que fornece informações essenciais sobre a turma, um botão "Criar atividade", estrategicamente
|
|
posicionado à direita da tela, convida o professor a iniciar o processo de criação de uma nova atividade de forma
|
|
direta e imediata, destacando a funcionalidade de forma proeminente. Abaixo deste botão, a tela é cuidadosamente
|
|
dividida em duas seções: "Provas" e "Trabalhos". Na seção "Provas", uma lista clara e organizada apresenta as provas
|
|
em aberto, exibindo de forma distintiva o título, a data de entrega e a pontuação correspondente de cada prova. Da mesma
|
|
forma, na seção "Trabalhos", as informações são apresentadas de maneira coerente, permitindo uma rápida identificação do
|
|
título, data de entrega e pontuação dos trabalhos disponíveis. Em casos de atividades atribuídas a mais de uma disciplina,
|
|
a apresentação de duas pontuações distintas, separadas por vírgula, promove uma compreensão clara das informações, garantindo
|
|
transparência e facilitando a tomada de decisões pelos usuários. Essa abordagem centrada no usuário, aliada às microinterações
|
|
delicadas, como realces ao passar o mouse sobre os elementos interativos e transições suaves entre as seções, promove uma
|
|
experiência de navegação coesa e intuitiva, elevando a usabilidade e a satisfação do usuário na plataforma.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{sala-de-aula-atividades-professor}
|
|
\caption{Sala de aula - Atividades (visão do professor)}
|
|
\end{figure}
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
\subsection{Sala de aula - Pessoas (visão do professor)}
|
|
Além do card fixo que fornece informações essenciais sobre a turma, a tela é organizada em duas seções distintas: "Docentes"
|
|
e "Discentes". Na primeira seção, a lista de professores é apresentada de forma clara e organizada, onde cada item exibe o
|
|
avatar do professor e seu nome completo ao lado. Essa apresentação permite aos usuários identificar facilmente os professores
|
|
responsáveis pela turma, promovendo uma comunicação eficaz e uma conexão mais pessoal entre docentes e alunos. Na segunda seção,
|
|
a lista de alunos segue um padrão semelhante, com o avatar de cada aluno acompanhado de seu nome completo. Essa organização
|
|
facilita a identificação dos colegas de classe e promove uma atmosfera de colaboração e engajamento entre os alunos.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{sala-de-aula-pessoas-professor}
|
|
\caption{Sala de aula - Pessoas (visão do professor)}
|
|
\end{figure}
|
|
|
|
\subsection{Sala de aula - Notas (visão do professor)}
|
|
|
|
TODO: Mussum Ipsum, cacilds vidis litro abertis. Casamentiss faiz malandris se pirulitá. In elementis mé pra quem é amistosis
|
|
quis leo. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Manduma pindureta quium dia nois paga.
|
|
Mussum Ipsum, cacilds vidis litro abertis. Casamentiss faiz malandris se pirulitá. In elementis mé pra quem é amistosis quis
|
|
leo. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Manduma pindureta quium dia nois paga.
|
|
A quis leo. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Manduma pindureta quium dia nois paga.
|
|
Mussum Ipsum, cacilds vidis litro abertis. Casamentiss faiz malandris se pirulitá. In elementis mé pra quem é amistosis quis
|
|
leo. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Manduma pindureta quium dia nois paga.
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
\subsection{Página inicial logado (visão do aluno)}
|
|
|
|
À esquerda da interface, um menu vertical é estrategicamente posicionado, apresentando de forma clara e organizada as opções
|
|
principais, como "Página Inicial", "Informações" e "Calendário Acadêmico". Essa disposição favorece uma navegação fluida e
|
|
direta, garantindo que os usuários possam acessar facilmente as diferentes áreas da plataforma. No centro da tela, as turmas,
|
|
fundamentais para a organização acadêmica, são apresentadas de forma visualmente atraente e funcional. Cada turma é distintamente
|
|
identificada por uma cor única, seguida do título, iniciais e os respectivos professores responsáveis. Essa representação visual
|
|
permite uma rápida identificação das turmas e dos docentes associados a elas, promovendo uma comunicação eficaz e uma melhor
|
|
organização acadêmica. À direita da tela, a lista de cards de atividades, atribuídas ao aluno logado, é apresentada de maneira
|
|
clara e concisa. Cada card exibe informações detalhadas sobre a atividade, como título, nome da turma, data de entrega, valor da
|
|
atividade e a cor identificadora da turma. As microinterações são delicadamente integradas, proporcionando realces ao passar o
|
|
mouse sobre os elementos interativos e transições suaves entre as seções da tela. Se uma atividade estiver associada a mais de
|
|
uma disciplina, as cores correspondentes são mostradas, e cada nota é apresentada de forma clara e segmentada por vírgulas.
|
|
Essa disposição cuidadosamente planejada e a atenção aos detalhes, seguindo os princípios de Nielsen e as técnicas de Saffer,
|
|
contribuem para uma experiência de usuário coesa, intuitiva e altamente satisfatória na plataforma IF Salas.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{pagina-inicial-logado-aluno}
|
|
\caption{Página inicial logado (visão do aluno)}
|
|
\end{figure}
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
\subsection{Sala de aula - Comunicados (visão do aluno)}
|
|
O design do card principal é meticulosamente elaborado, começando com a cor distintiva da turma no topo, seguida pelo título
|
|
proeminente da turma. Abaixo do avatar do professor, seu nome é apresentado ao lado, facilitando uma conexão visual imediata
|
|
entre aluno e professor. Três abas navegáveis - "Comunicados", "Atividades" e "Pessoas" - são claramente dispostas, permitindo
|
|
uma navegação intuitiva e rápida pelos diferentes aspectos da sala de aula. Na primeira coluna à esquerda, os cards são organizados
|
|
de maneira coesa e acessível. O card da sala de aula virtual incorpora uma microinteração eficaz, oferecendo um botão "Entrar"
|
|
que permite aos alunos participarem instantaneamente de uma sala de aula no Jitsi em uma nova aba, promovendo uma experiência de
|
|
entrada direta e imediata. O card de próximas atividades apresenta as tarefas pendentes de forma clara e organizada, enquanto o
|
|
card de horários de atendimento oferece uma visão rápida e fácil dos horários disponíveis para os alunos, facilitando a comunicação
|
|
com o professor. Na segunda coluna, a lista de cards contendo os comunicados do professor é apresentada de forma ordenada, garantindo
|
|
que os alunos estejam sempre atualizados com as informações mais relevantes, seguindo uma lógica de prioridade de leitura. Essa
|
|
abordagem centrada no usuário, aliada às microinterações refinadas e à clareza na organização do conteúdo, resulta em uma experiência
|
|
de sala de aula online que é intuitiva, eficaz e altamente funcional para os usuários do IF Salas.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{sala-de-aula-comunicados-aluno}
|
|
\caption{Sala de aula - Comunicados (visão do aluno)}
|
|
\end{figure}
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
\subsection{Sala de aula - Atividades (visão do aluno)}
|
|
|
|
Além do card fixo mencionado anteriormente, a tela é habilmente dividida em duas seções distintas: "Provas" e "Trabalhos",
|
|
dispostas de forma clara e organizada uma abaixo da outra. Na primeira seção, uma lista de provas disponíveis para entrega
|
|
é apresentada com detalhes cruciais, incluindo título da prova, data de entrega e pontuação atribuída. Da mesma forma, na
|
|
segunda seção, uma lista de trabalhos em aberto é exibida, fornecendo informações claras sobre título, data de entrega e
|
|
pontuação associada a cada trabalho. No caso de provas ou trabalhos atribuídos a mais de uma disciplina, conhecidos como
|
|
trabalhos interdisciplinares, duas pontuações distintas são exibidas, separadas por vírgula, garantindo uma compreensão
|
|
precisa e transparente das tarefas pelos alunos. Essa abordagem cuidadosa, aliada às microinterações sutis, como realces
|
|
ao passar o mouse sobre as atividades e feedbacks visuais, promove uma navegação fluída e uma compreensão rápida das tarefas
|
|
pendentes, facilitando assim o engajamento e o progresso acadêmico na plataforma IF Salas.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{sala-de-aula-atividades-aluno}
|
|
\caption{Sala de aula - Atividades (visão do aluno)}
|
|
\end{figure}
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
\subsection{Sala de aula - Pessoas (visão do aluno)}
|
|
|
|
Além do card fixo que fornece informações essenciais sobre a turma, a tela é organizada em duas seções distintas: "Docentes"
|
|
e "Discentes". Na primeira seção, a lista de professores é apresentada de forma clara e organizada, onde cada item exibe o
|
|
avatar do professor e seu nome completo ao lado. Essa apresentação permite aos usuários identificar facilmente os professores
|
|
responsáveis pela turma, promovendo uma comunicação eficaz e uma conexão mais pessoal entre docentes e alunos. Na segunda seção,
|
|
a lista de alunos segue um padrão semelhante, com o avatar de cada aluno acompanhado de seu nome completo. Essa organização
|
|
facilita a identificação dos colegas de classe e promove uma atmosfera de colaboração e engajamento entre os alunos.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{sala-de-aula-pessoas-aluno}
|
|
\caption{Sala de aula - Pessoas (visão do aluno)}
|
|
\end{figure}
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
\subsection{Detalhes da atividade (visão do aluno)}
|
|
|
|
No topo da tela, o título da atividade é enfatizado, enquanto a cor e o nome da sala de aula são exibidos lado a lado, fornecendo
|
|
uma identificação visual imediata. Logo abaixo, a pontuação da atividade e a data de entrega são apresentadas de forma clara e
|
|
legível incluindo informações detalhadas como o dia da semana, dia do mês e horário limite para entrega, garantindo uma compreensão
|
|
precisa dos requisitos da tarefa. Uma linha visualmente distinta marca a separação entre esses detalhes e a descrição da atividade
|
|
em texto rico, que fornece informações detalhadas sobre a tarefa em questão, promovendo uma compreensão completa do seu propósito e
|
|
objetivos. Outra linha claramente definida indica a transição para uma área interativa, onde os usuários podem facilmente arrastar e
|
|
soltar arquivos para anexar à atividade, uma interação que é intuitiva e fluida. Além disso, os usuários têm a opção de clicar na
|
|
área para selecionar e anexar arquivos, proporcionando flexibilidade e comodidade durante o processo. Após anexar um arquivo, seu
|
|
nome e tamanho em bytes são exibidos de forma organizada para referência do usuário, permitindo uma verificação rápida e fácil.
|
|
Finalmente, um botão de ação claramente identificado permite que os usuários entreguem a atividade de forma direta e sem complicações,
|
|
encerrando o processo de interação de maneira eficiente.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{detalhes-atividade-aluno}
|
|
\caption{Detalhes da atividade (visão do aluno)}
|
|
\end{figure}
|
|
|
|
\vfill
|
|
\cleardoublepage{}
|
|
|
|
\subsection{Informações (visão do aluno)}
|
|
|
|
A tela de Informações do IF Salas é cuidadosamente projetada para fornecer aos usuários acesso rápido e organizado a uma variedade de recursos
|
|
úteis e informações essenciais. A principal característica desta tela são os accordions de perguntas frequentes, que permitem aos usuários
|
|
expandir e contrair seções de perguntas comuns para obter respostas detalhadas de forma eficiente. Cada pergunta é apresentada de forma clara
|
|
e concisa, e ao clicar, os usuários podem visualizar as respostas correspondentes, facilitando a obtenção de informações relevantes de maneira
|
|
rápida e direta.
|
|
|
|
Além dos accordions de perguntas frequentes, a tela de Informações também apresenta uma série de cards, cada um fornecendo detalhes e links
|
|
úteis para diferentes setores e recursos da universidade IFMG. Cada card é projetado para destacar visualmente o setor ou recurso em questão,
|
|
com ícones ou imagens representativas para melhorar a identificação e a compreensão. Os cards contêm informações relevantes, como detalhes
|
|
de contato, horários de funcionamento e links para páginas específicas ou recursos online.
|
|
|
|
Essa abordagem de design facilita aos usuários encontrar rapidamente informações importantes sobre diversos aspectos da universidade, desde
|
|
serviços administrativos até recursos acadêmicos e de suporte. Combinando accordions intuitivos de perguntas frequentes com cards informativos
|
|
e visualmente atraentes, a tela de Informações do IF Salas oferece uma experiência de usuário completa e eficaz para os membros da
|
|
comunidade acadêmica.
|
|
|
|
\begin{figure}[ht]
|
|
\centering
|
|
\includegraphics[width=.7\textwidth]{informacoes-aluno}
|
|
\caption{Informações (visão do aluno)}
|
|
\end{figure}
|