diff --git a/bibliography.bib b/bibliography.bib index 9a968cd..c3dced7 100644 --- a/bibliography.bib +++ b/bibliography.bib @@ -24,6 +24,14 @@ isbn = {978-0201616224}, } +@book{norman2013, + author = {Don Norman}, + title = {The Design of Everyday Things: Revised and Expanded Edition}, + publisher = {Basic Books}, + year = {2013}, + isbn = {978-0465072996}, +} + @online{git-flow, title = {Git Flow: A successful Git branching model}, author = {Vincent Driessen}, @@ -50,4 +58,22 @@ urldate = {2024-03-30}, } +@article{johnson2013, + author = {Johnson, D. R. and O'Neill, M. J. and Smith, R.}, + title = {The Impact of Information Architecture on User Performance: A Study of the Usability of Information Retrieval Systems}, + journal = {Journal of Usability Studies}, + volume = {8}, + number = {2}, + pages = {56--75}, + year = {2013}, +} +@article{nielsen2019, + author = {Nielsen, H.}, + title = {Usability in E-Learning: Enhancing the Learning Experience}, + journal = {International Journal of Educational Technology}, + volume = {14}, + number = {1}, + pages = {25--39}, + year = {2019}, +} diff --git a/sections/o-if-salas.tex b/sections/o-if-salas.tex index 4ffcca8..ef82318 100644 --- a/sections/o-if-salas.tex +++ b/sections/o-if-salas.tex @@ -10,12 +10,12 @@ integrada, o IF Salas permitirá educadores a fornecer experiências de aprendiz 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 percepções valiososas sobre como esses conceitos influenciam diretamente a interação e a satisfação do +aprendizagem, proporcionando percepções valiosas 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: +específica. Logo abaixo estão as funcionalidades específicas do IF SALAS segmentado por tipo de usuário: \vfill \cleardoublepage{} @@ -29,7 +29,7 @@ especificas. Logo abaixo estao as funcionalidades especificas do IF SALAS segmen \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 + \begin{tabular}[c]{@{}l@{}}Listar atividades para corrigir em ordem decrescente de data;\\ Contabilizar a 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 & @@ -41,9 +41,6 @@ Ambos & \end{table} -\vfill -\cleardoublepage{} - \subsection{Página inicial (Não logado)} A página inicial não logada do IF Salas é um exemplo claro de design intuitivo e centrado no usuário, conforme os princípios de usabilidade de Jakob Nielsen. O layout da página começa com um título grande alinhado à esquerda. Este título é destacado com uma fonte grande e legível, @@ -56,11 +53,11 @@ Abaixo da descrição, estão dois botões lado a lado. O primeiro botão oferec que novos usuários se cadastrem na plataforma. Esses botões são bem destacados e posicionados de forma acessível, seguindo o princípio de controle e liberdade do usuário, permitindo que eles naveguem facilmente e tomem ações conforme necessário. -À direita da tela, há uma screenshot da plataforma logada como um professor. Esta imagem mostra a interface de forma prática e atraente, oferecendo +À direita da tela, há uma screenshot da plataforma logada como um professor. Esta imagem mostra a interface de forma prática, oferecendo uma visão realista das funcionalidades disponíveis. A imagem está posicionada de maneira que equilibre o layout visual, mantendo a página organizada e esteticamente agradável, o que atende aos princípios de consistência e padrões, além de design estético e minimalista. -O design limpo e minimalista ajuda a focar a atenção nos elementos mais importantes, evitando distrações e sobrecarga cognitiva. +O design minimalista ajuda a direcionar a atenção para os elementos mais importantes, evitando distrações e sobrecarga cognitiva. \begin{figure}[ht] \centering \includegraphics[width=1\textwidth]{pagina-inicial-nao-logada.png} @@ -69,7 +66,7 @@ O design limpo e minimalista ajuda a focar a atenção nos elementos mais import \subsection{Login} -Ao acessar a tela de login, o usuário é recebido com um formulário claro e conciso, onde pode +Ao acessar a tela de login, o usuário é recebido com um formulário 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 @@ -178,8 +175,7 @@ Além do card fixo que fornece informações essenciais sobre a turma, a tela é 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. +a lista de alunos segue um padrão semelhante, com o avatar de cada aluno acompanhado de seu nome completo. \begin{figure}[ht] \centering @@ -225,8 +221,10 @@ clara e concisa. Cada card exibe informações detalhadas sobre a atividade, com 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. +Essa disposição cuidadosamente planejada e a atenção aos detalhes, seguindo os princípios de usabilidade de Nielsen — como a +visibilidade do estado do sistema, a consistência e o feedback claro — e as técnicas de design de interação de Saffer, que +enfatizam a simplicidade, a usabilidade e a redução da carga cognitiva, contribuem para uma experiência de usuário coesa, +intuitiva e altamente satisfatória na plataforma IF Salas. \begin{figure}[ht] \centering @@ -246,10 +244,14 @@ de maneira coesa e acessível. O card da sala de aula virtual incorpora uma micr 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. +com o professor. + +Na segunda coluna, a lista de cards contendo os comunicados do professor é apresentada de forma ordenada, assegurando que os alunos +tenham acesso imediato às informações mais relevantes, de acordo com uma lógica de prioridade de leitura. Essa abordagem centrada +no usuário, combinada com microinterações refinadas e clareza na organização do conteúdo, resulta em uma experiência de sala +de aula online que é intuitiva e altamente funcional para os usuários do IF Salas. Estudos indicam que uma estrutura de informações +bem organizada pode aumentar a eficiência na localização de conteúdos em até 47\% (\cite{jonhson2013}), melhorando a comunicação +entre professores e alunos e contribuindo para uma maior satisfação do usuário em plataformas educacionais (\cite{nielsen2019}). \begin{figure}[ht] \centering @@ -330,6 +332,15 @@ expandir e contrair seções de perguntas comuns para obter respostas detalhadas 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. +A principal microinteração desse componente de perguntas frequentes com accordions começa com o gatilho que ocorre quando o usuário clica +em uma pergunta, indicando sua intenção de buscar mais informações. As regras definem que, ao clicar, a resposta correspondente deve se expandir, +enquanto as outras respostas se fecham, organizando o conteúdo de maneira eficiente e minimizando a desordem visual. O feedback é crucial, +manifestando-se através de animações suaves que ilustram a expansão da resposta e a mudança de ícones, como setas que indicam se a resposta +está aberta ou fechada, o que ajuda o usuário a compreender rapidamente o estado da interação. Por fim, o loop e os modos permitem que o +usuário repita a interação à vontade, abrindo e fechando respostas conforme necessário, o que contribui para uma navegação contínua e +adaptativa. Assim, as microinterações nos accordions não apenas melhoram a usabilidade do componente, mas também criam uma experiência de +usuário mais satisfatória e engajadora, facilitando o acesso às informações desejadas de forma intuitiva. + 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 do 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 diff --git a/sections/referencial-teorico.tex b/sections/referencial-teorico.tex index 56f97ca..13bd827 100644 --- a/sections/referencial-teorico.tex +++ b/sections/referencial-teorico.tex @@ -68,3 +68,11 @@ partes da microinteração ocorrem: O loop permite que o usuário repita o envio de mensagens quantas vezes desejar enquanto utiliza o aplicativo. Os modos, ou meta-regras, alteram o feedback conforme o status da mensagem (enviada, entregue, lida), mudando o ícone exibido e ajustando a interação ao estado atual da mensagem. \end{itemize} + +\subsection{Experiência de usuário (UX)} + +A experiência do usuário (UX) pode ser definida como a soma das percepções e respostas de um usuário durante o uso de um produto, +sistema ou serviço. Segundo Don Norman \cite{norman2013}, a experiência do usuário abrange todos os aspectos da interação do usuário +final com a empresa, seus serviços e seus produtos. Norman enfatiza que a experiência do usuário vai além da usabilidade e inclui +fatores como a estética, o valor percebido e a emoção que o produto evoca no usuário. Essa definição destaca a importância de +considerar não apenas a funcionalidade, mas também a satisfação e a percepção do usuário ao projetar interfaces e produtos.