Sprint Session - Rubrica de Design#
A rubrica de design é composta por três partes: telas, avaliação heurística e avaliação de usabilidade.
A nota final de Design da Sprint Session será: 30% telas + 30% avaliação heurística + 40% avaliação de usabilidade.
A seguir estão descritos os critérios de avaliação para cada uma dessas partes.
Telas#
- Conceito I: A entrega não atende aos requisitos mínimos do projeto: o site não foi entregue ou não funciona ou está incompleto que impossibilita a avaliação.
- Conceito D: As telas cobrem poucas funcionalidades descritas no documento com os requisitos do cliente.
- Conceito C: as telas de frontend e admin cobrem 90% das funcionalidades descritas pelo documento com os requisitos do cliente
- O design é responsivo para difetentes dispositivos.
- O código HTML é um código válido (sem erros de sintaxe).
- A estilização é organizada em CSS, utilizando classes, IDs ou seletores apropriados para definir a aparência dos elementos HTML. Ou seja, o código CSS fica em um arquivo separado do código HTML e não há atributos style diretamente nas tags HTML.
- O alinhamento dos elementos da página é feito com técnicas apropriadas de layout, como Flexbox, Grid, margens e espaçamentos, mantendo a estrutura visual responsiva e consistente. Evitando o uso de posicionamento absoluto.
- Entregaram um fluxo de tela que cobre todo o fluxo de navegação do usuário.
- Conceito B: atingiu o conceito C, as telas cobrem todas as funcionalidades descritas no documento com os requisitos do cliente e as páginas funcionam sem 'quebrar' o design.
- O código HTML foi escrito de forma semântica.
- Utilizou display flex para alinhar o conteúdo principal da página.
- Utilizou unidades relativas para definir tamanhos de fontes, margens, paddings e etc.
- Conceito A: atingiu o conceito B e as telas seguem um padrão de design
- Conceito A+: atingiu o conceito A e as telas apresentam um design de excelência, com uma identidade visual consistente, uma hierarquia visual clara, uma paleta de cores harmoniosa, tipografia adequada e um layout bem estruturado. O design é intuitivo, agradável e proporciona uma experiência de usuário excepcional. Além disso, a usabilidade possui um fluxo de navegação fluida, com elementos interativos bem posicionados e feedbacks visuais claros para as ações do usuário.
Avaliação Heurística#
Escolhao o projeto de outra equipe para realizar a avaliação heurística. Abaixo estão listadas missões que devem ser divididas entre os membros do grupo para realizar uma busca no projeto a ser avaliado. Ou seja, cada membro do grupo deve escolher uma ou mais missões para realizar a avaliação heurística do projeto.
-
Façam um documento com o relato dos problemas encontrados para cada missão. O documento deve conter:
- Qual o grupo avaliado;
- Para cada missão, descreva quem realizou a missão, quais os problemas encontrados e quais as soluções sugeridas para cada problema encontrado.
- Adicione prints de tela para ilustrar os problemas encontrados.
-
Envie o documento no formato pdf via Blackboard e envie também uma cópia para o grupo avaliado.
| Carta de missão | O que o avaliador deve procurar | Heurística |
|---|---|---|
| Caçador de confusão | Momentos em que o usuário não entende o que deve fazer, onde está ou qual é o próximo passo | Correspondência entre o sistema e o mundo real; reconhecimento em vez de memorização; ajuda e documentação |
| Detetive de consistência | Elementos parecidos com comportamentos diferentes, ou elementos diferentes que parecem ter a mesma função | Consistência e padrões |
| Fiscal do clique | Botões, links e menus que parecem clicáveis, funcionam como esperado e levam ao destino correto | Controle e liberdade do usuário; consistência e padrões; prevenção de erros |
| Guardião do feedback | Situações em que o site deveria dar uma resposta após uma ação do usuário | Visibilidade do status do sistema |
| Mestre da primeira impressão | Se o usuário entende rapidamente qual é o objetivo do site e o que pode fazer ali | Correspondência entre sistema e mundo real; estética e design minimalista |
| Testador distraído | Se o site continua compreensível mesmo quando usado rapidamente ou sem muita atenção | Reconhecimento em vez de memorização; estética e design minimalista |
| Fiscal dos erros | Formulários, links quebrados, campos obrigatórios ou mensagens de erro ruins | Prevenção de erros; ajudar usuários a reconhecer, diagnosticar e se recuperar de erros |
| Arquiteto da navegação | Se é fácil mudar de página, voltar, encontrar menus e saber onde está | Controle e liberdade do usuário; reconhecimento em vez de memorização |
| Caçador de excesso | Informações, botões ou elementos visuais que poluem a página ou competem pela atenção | Estética e design minimalista |
| Tradutor do usuário | Termos técnicos, rótulos ou textos que poderiam ser mais claros para o público-alvo | Correspondência entre o sistema e o mundo real |
- Conceito I: Não entregaram o relatório de avaliação heurística.
- Conceito D: Entregaram um relatório, porém algumas missões não foram realizadas.
- Conceito C: escreveram um relatório com todas as missões realizadas e com uma descrição clara dos problemas encontrados. Além disso, os comentários são específicos, baseados em evidências e ajudam o outro grupo a entender o que pode ser melhorado.
- Conceito B: atingiu o conceito C e o relatório aponta pontos positivos e negativos para cada missão e aponta sugestões de melhorias viáveis e mantendo uma postura construtiva.
- Conceito A: atingiu o conceito B e o relatório contém prints de tela para ilustrar os problemas encontrados.
- Conceito A+: atingiu o conceito A e a avaliação demonstra profundidade e cobertura adequada: para cada missão, o grupo investigou o site com atenção, identificando múltiplos problemas quando eles existiam e registrando ausência de problemas apenas quando a funcionalidade analisada realmente não apresentava falhas relevantes relacionadas àquela missão.
Usabilidade#
O grupo deve realizar a avaliação de usabilidade do projeto. Para isso, algumas funcionalidades devem estar implementadas para que seja possível realizar a avaliação. O grupo deve convidar uma pessoa que não conhece o sistema (integrante de outro grupo) para realizar a avaliação de usabilidade. O grupo deve realizar as seguintes atividades:
- O grupo deve definir algumas tarefas para serem realizadas pelos usuários.
- Registre a taxa de sucesso de cada tarefa.
- Registre o tempo médio para realização de cada tarefa.
- Escolha um ou mais usuários para realizar as tarefas. Lembrando que o usuário não pode ser do grupo.
- Deve ser entregue um vídeo com a gravação de eye tracker na sala de usabilidade ou óculos de realidade virtual. (Suba o vídeo no YouTube e adicione o link no relatório).
- Este vídeo deve conter a gravação da tela do usuário e o mapa de calor do olhar do usuário. O vídeo deve mostrar o usuário realizando as tarefas definidas pelo grupo.
- Faça uma análise dos resultados obtidos para avaliar o uso dos princípios CRAP no projeto.
- Existe alguma área da interface que o usuário não olhou ou olhou pouco?
- Existe alguma área da interface que chamou mais a atenção do olhar do usuário do que deveria?
- Como os usuários percebem e interagem com os elementos visuais do sistema?
- A sequência de elementos observados pelo usuário está de acordo com o que o grupo esperava? Em caso negativo, é necessário fazer alguma modificação na interface?
- Colete também feedbacks dos usuários e descreva no relatório.
- Sugira melhorias para o projeto.
Caso o grupo escolha utilizar o computador da sala de usabilidade, o grupo deve realizar o deploy do projeto para que seja possível acessar o sistema no computador da sala de usabilidade ou o grupo poderá utilizar o Ngrok para acessar o sistema no computador da sala de usabilidade. - Para mais informações sobre o Ngrok, acesse o handout do Ngrok aqui. - Para realizar o deploy do projeto, o grupo pode utilizar o Render. Para isso, acesse o handout do Render aqui.
Caso escolha utilizar o óculos de realidade virtual não é necessário realizar o deploy do projeto, basta levar um notebook com o projeto rodando para a sala de usabilidade.
Para esta etapa, o grupo deverá agendar um horário para realizar a avaliação de usabilidade na sala de usabilidade.
- Conceito I: Não entregaram o relatório de avaliação de usabilidade ou não realizaram a avaliação de usabilidade.
- Conceito D: Entregaram um relatório, porém não contém todos os elementos obrigatórios.
- Conceito C: Atingiu D e o relatório contém todos os elementos obrigatórios e sem erros de português.
- As tarefas escolhidas são relevantes para o projeto.
- Conceito B: Atingiu o conceito C e o relatório está bem escrito, organizada e com imagens para facilitar a compreensão.
- Conceito A: Atingiu o conceito B a análise dos resultados obtidos é bem detalhada e com sugestões de melhorias para o projeto.
- O teste de usabilidade foi feito com mais de um usuário.
- Mais de uma tarefa foi avaliada.
- Usou a sala de usabilidade e apresenta imagens ou vídeos gravados com o eye tracker ou óculos de realidade virtual.
- Conceito A+: Atingiu o conceito A e apresenta uma entrega de excelência, sem ressalvas relevantes. A avaliação é completa, cuidadosa e bem fundamentada, com tarefas bem escolhidas, dados organizados, análise aprofundada dos resultados e uso consistente das evidências obtidas na gravação. O relatório não apenas descreve o que aconteceu durante o teste, mas interpreta os resultados de forma crítica, identificando padrões de comportamento dos usuários, comparando o uso esperado com o uso observado e explicando quais decisões de interface devem ser mantidas ou modificadas.