diff --git a/images/cadastro-implementacao.png b/images/cadastro-implementacao.png new file mode 100644 index 0000000..14c8d08 Binary files /dev/null and b/images/cadastro-implementacao.png differ diff --git a/images/detalhes-atividade-aluno.png b/images/detalhes-atividade-aluno.png new file mode 100644 index 0000000..d6f26b2 Binary files /dev/null and b/images/detalhes-atividade-aluno.png differ diff --git a/images/informacoes-aluno.png b/images/informacoes-aluno.png new file mode 100644 index 0000000..22c7bc6 Binary files /dev/null and b/images/informacoes-aluno.png differ diff --git a/images/login-implementacao.png b/images/login-implementacao.png new file mode 100644 index 0000000..b0fcf12 Binary files /dev/null and b/images/login-implementacao.png differ diff --git a/images/pagina-inicial-logado-aluno.png b/images/pagina-inicial-logado-aluno.png new file mode 100644 index 0000000..cdad396 Binary files /dev/null and b/images/pagina-inicial-logado-aluno.png differ diff --git a/images/pagina-inicial-logado-professor.png b/images/pagina-inicial-logado-professor.png new file mode 100644 index 0000000..f1cecb6 Binary files /dev/null and b/images/pagina-inicial-logado-professor.png differ diff --git a/images/sala-de-aula-atividades-aluno.png b/images/sala-de-aula-atividades-aluno.png new file mode 100644 index 0000000..fc50d4c Binary files /dev/null and b/images/sala-de-aula-atividades-aluno.png differ diff --git a/images/sala-de-aula-atividades-professor.png b/images/sala-de-aula-atividades-professor.png new file mode 100644 index 0000000..ae24751 Binary files /dev/null and b/images/sala-de-aula-atividades-professor.png differ diff --git a/images/sala-de-aula-comunicados-aluno.png b/images/sala-de-aula-comunicados-aluno.png new file mode 100644 index 0000000..816687a Binary files /dev/null and b/images/sala-de-aula-comunicados-aluno.png differ diff --git a/images/sala-de-aula-comunicados-professor.png b/images/sala-de-aula-comunicados-professor.png new file mode 100644 index 0000000..7a7cad7 Binary files /dev/null and b/images/sala-de-aula-comunicados-professor.png differ diff --git a/images/sala-de-aula-pessoas-aluno.png b/images/sala-de-aula-pessoas-aluno.png new file mode 100644 index 0000000..56efa69 Binary files /dev/null and b/images/sala-de-aula-pessoas-aluno.png differ diff --git a/images/sala-de-aula-pessoas-professor.png b/images/sala-de-aula-pessoas-professor.png new file mode 100644 index 0000000..6f631ee Binary files /dev/null and b/images/sala-de-aula-pessoas-professor.png differ diff --git a/main.tex b/main.tex index 340e5a7..22e3724 100644 --- a/main.tex +++ b/main.tex @@ -34,6 +34,8 @@ \input{sections/introducao.tex} \input{sections/referencial-teorico.tex} \input{sections/metodologia.tex} +\input{sections/o-if-salas.tex} + \printbibliography diff --git a/sections/o-if-salas.tex b/sections/o-if-salas.tex new file mode 100644 index 0000000..9380641 --- /dev/null +++ b/sections/o-if-salas.tex @@ -0,0 +1,284 @@ +\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. + +\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}