Final review before submission #1
3 changed files with 62 additions and 17 deletions
|
@ -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},
|
||||||
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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.
|
||||||
|
|
Loading…
Reference in a new issue