Inspeção Heurística (Nielsen I)

Julio Cesar
Nov 1 · 5 min read

Endereço para o mockup mobile inspecionado: https://marvelapp.com/ci17e64/screen/62099264

1 — Visibilidade de qual estado estamos no sistema

Mostra o status do sistema, diz o que acontece naquele momento.

Ex.: o cursor do Word, o tipo da fonte e tamanho, o tipo de alinhamento entre outros.

Sobre o mockup mobile Aulificando

No modelo, notamos bem esse status com a indicação no fundo das três primeiras telas, mas há vários itens a serem corrigidos para a aplicação em desenvolvimento.

Sugestões para o mockup mobile Aulificando

Tela #3 — Corrigir o erro no qual essa tela indica no fundo que está na tela #2.

Tela #4 — Até eu fiquei em dúvida sobre essa tela (kkkkkkk) que deve ser a de login (SignIn). Deve-se informar que o usuário está fazendo login no sistema.

Telas #12 e #13 — deve-se mostrar ao usuário que essas telas são referentes à adição de escolas na aplicação.

Telas #14, #15 e #16 — deve-se mostrar ao usuário que essas telas são referentes à adição de metodologias por parte do professor.

2 — Correspondência entre seu sistema e o mundo real

Usar metáforas familiares e linguagem.

Ex.: ícones de negrito, itálico, sublinhado, cor da fonte entre outros. Botões da cor verde para confirmar e sinal de ‘+’ para adição de elementos.

Sobre o mockup mobile Aulificando

Não podemos analisar plenamente essa heurística por se tratar de um mockup, mas nota-se alguma consistência na utilização dos botões/ícones utilizados.

Sugestões para o mockup mobile Aulificando

Tela #1 e tela #2 — Falta uma identificação (logomarca e nome) para o usuário se identificar com a aplicação que está utilizando. Isso ajuda o usuário a internalizar esses elementos e relembrar da aplicação quando for buscá-la em seu smartphone.

Tela #3 — O botão “pular” deve ser retirado dessa tela. Deve ser inserido o botão “SignIn” para o usuário cadastrado entrar na aplicação.

Tela #11 — nessa tela há uma inconsistência onde há um ícone de busca e a tela indica “Adicionar uma escola” Deve-se corrigir esse problema.

3 — Liberdade de controle fácil para o usuário

provê bons padrões e desfazê-los — facilitar a vida do usuário ao máximo

Ex.: disponibilidade de templates do Word.

Sobre o mockup mobile Aulificando

Não podemos analisar plenamente essa heurística por se tratar de um mockup.

4 — Consistência e padrões do estilo

Usar a mesma interface e linguagem ao longo da aplicação — não inventar! Usar as mesmas linguagens que o usuário está habituado.

Ex.: ícone de disquete para salvar arquivos, ícone de impressora para impressões. Sempre utilizar os mesmos estilos e padrões de cores e formas em todo o projeto, assim como vemos no Word.

Sobre o mockup mobile Aulificando

Não podemos analisar plenamente essa heurística por se tratar de um mockup, mas nota-se certa harmonização nos padrões utilizados, com algumas exceções.

Sugestões para o mockup mobile Aulificando

Tela #7, #8, #9 e #10 — os ícones abaixo da tela não seguem o padrão de cores implementado na aplicação. Nota-se a quebra de harmonia com os ícones em cores diferentes.

Tela #8 — a cor utilizada na fonte “raciocínio lógico”, “folhas” e “matemática” está em desarmonia com o contexto de cores da aplicação.

5 — Prevenção de erros

Ajuda os usuários a evitar cometer erros — notificar o usuário explicando o que pode estar errado e, se possível dar sugestões de como fazer corretamente.

Ex.: Corretor ortográfico do Word indica sublinhando com cor verde ou vermelha uma palavra com provável erro e mostra palavras que poderiam substituí-la, caso esta esteja de fato errada.

Sobre o mockup mobile Aulificando

Não podemos analisar plenamente essa heurística por se tratar de um mockup.

6 — Reconhecimento ao invés da memorização

Torna as informações fáceis de serem descobertas. O usuário não deve ter trabalho para encontrar certas informações a respeito da ferramenta.

Ex.: no explorador de arquivos do Windows, há o caminho completo para se chegar àquela pasta. Note que o usuário não precisa memorizar aquele caminho.

Sobre o mockup mobile Aulificando

Há várias inconsistências nessas heurísticas. A única ressalva está nas três primeiras telas, onde há uma indicação no fundo da tela.

Sugestões para o mockup mobile Aulificando

Tela #6 até a tela #16 falta pelo menos um botão que indique a volta à pagina “home” ou volta à página anterior. Não há um indicativo de local da aplicação o usuário está naquele momento. Como não há essa indicação, devem-se inserir esses dois botões “home” e “back”.

7 — Flexibilidade e eficiência de uso

Faz as tarefas mais avançadas mais fluidas e eficientes. Tanto os mais experientes quanto os novos naquela aplicação podem fazer uso de tais funcionalidades.

Ex.: é possível copiar textos selecionando-os e clicando com o botão direito do mouse ou utilizando o comando “ctrl+c”, para os mais experientes.

Sobre o mockup mobile Aulificando

Não podemos analisar plenamente essa heurística por se tratar de um mockup.

8 — Estética e design minimalistas

Provê apenas informações necessárias e de uma forma elegante.

Ex.: interface do Google, com o fundo branco, uma caixa de texto e dois botões apenas.

Sobre o mockup mobile Aulificando

Apesar de se tratar de um mockup, podemos notar um grau estético bem simples, com informações, cores que não tiram a atenção do usuário da real ideia da aplicação.

9 — Recuperação de erros

A aplicação deve ajudar o usuário a diagnosticar, reconhecer e se recuperar de erros, dando a eles maneiras de proceder em caso nesses casos.

Ex.: ao criar uma conta no Google, existem várias caixas onde podemos preencher com nossos dados. Ao deixar alguma caixa em branco, a aplicação imediatamente avisa que não se pode deixar aquela informação em branco.

Sobre o mockup mobile Aulificando

Não podemos analisar plenamente essa heurística por se tratar de um mockup.

10 — Ajuda e documentação do sistema

Use dicas proativas no local para ajudar os usuários. Deve-se tentar deixar essa ajuda de forma mais natural possível, numa linguagem e formato mais próximo do usuário.

Ex.: No site da Amazon, no campo de pagamentos, há uma opção de inserir dados bancários. Nesse local da página há algumas orientações bem simples que podem ajudar o usuário que estiver meio “perdido” naquela operação.

Sugestões para o mockup mobile Aulificando

Em todo o mockup não há indicação de ajuda ao usuário. Devem-se inserir essas informações relevantes na aplicação.

aulificando

Compartilhando metodologias.

    Written by

    Compartilhando metodologias.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade