Final review before submission #1

Merged
leomurca merged 8 commits from final_review into main 2024-11-04 19:07:00 +00:00
3 changed files with 62 additions and 17 deletions
Showing only changes of commit 7ec9cf3ea4 - Show all commits

View file

@ -24,6 +24,14 @@
isbn = {978-0201616224}, 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, @online{git-flow,
title = {Git Flow: A successful Git branching model}, title = {Git Flow: A successful Git branching model},
author = {Vincent Driessen}, author = {Vincent Driessen},
@ -50,4 +58,22 @@
urldate = {2024-03-30}, 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},
}

View file

@ -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 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 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 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. 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 É 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 \vfill
\cleardoublepage{} \cleardoublepage{}
@ -29,7 +29,7 @@ especificas. Logo abaixo estao as funcionalidades especificas do IF SALAS segmen
\textbf{Tipo de usuário} & \textbf{Tipo de usuário} &
\multicolumn{1}{c|}{\textbf{Funcionalidades}} \\ \hline \multicolumn{1}{c|}{\textbf{Funcionalidades}} \\ \hline
Professor & 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 & 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 \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 & Ambos &
@ -41,9 +41,6 @@ Ambos &
\end{table} \end{table}
\vfill
\cleardoublepage{}
\subsection{Página inicial (Não logado)} \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 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, 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 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. 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 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. 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] \begin{figure}[ht]
\centering \centering
\includegraphics[width=1\textwidth]{pagina-inicial-nao-logada.png} \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} \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 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 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 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 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 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, 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 a lista de alunos segue um padrão semelhante, com o avatar de cada aluno acompanhado de seu nome completo.
facilita a identificação dos colegas de classe e promove uma atmosfera de colaboração e engajamento entre os alunos.
\begin{figure}[ht] \begin{figure}[ht]
\centering \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 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 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. 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, Essa disposição cuidadosamente planejada e a atenção aos detalhes, seguindo os princípios de usabilidade de Nielsen — como a
contribuem para uma experiência de usuário coesa, intuitiva e altamente satisfatória na plataforma IF Salas. 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] \begin{figure}[ht]
\centering \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 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 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 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 com o professor.
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 Na segunda coluna, a lista de cards contendo os comunicados do professor é apresentada de forma ordenada, assegurando que os alunos
de sala de aula online que é intuitiva, eficaz e altamente funcional para os usuários do IF Salas. 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] \begin{figure}[ht]
\centering \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 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. 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 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, ú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 com ícones ou imagens representativas para melhorar a identificação e a compreensão. Os cards contêm informações relevantes, como detalhes

View file

@ -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. 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} \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.