Avaliacao de nielsen do site balão da informatica

As 10 heurísticas de Nielsen Adotando a avaliação heurística de usabilidade, o presente estudo examinou o estudo de caso selecionados sob o prisma das heurísticas de Nielsen, desenvolvidas originalmente por esse autor, em colaboração com Molich e condensadas, posteriormente, por Nielsen, nas dez recomendações apresentadas abaixo: • Visibilidade do estado do sistema: o sistema deve manter os usuários informados do que está acontecendo a cada momento, através de feedback apropriado, em tempo razoável; • Correspondência entre o sistema e o mundo real: o sistema deve falar a linguagem do usuário, com palavras, frases e conceitos que sejam familiares para ele, em lugar de termos técnicos orientados ao próprio sistema. Devem ser seguidas convenções do mundo real, de maneira que a informação seja oferecida em uma ordem lógica e natural; • Liberdade e controle por parte do usuário: com alguma frequência, os usuários escolhem funções do sistema por engano, motivo pelo qual lhes deve ser oferecida uma “saída de emergência”, claramente sinalizada, para que possam sair do estado indesejado, sem a necessidade de diálogos extensos. Deve ser facilitada a opção de desfazer e refazer ações; • Consistência e padrões: devem ser seguidas convenções para que os usuários não tenham que se perguntar se determinadas palavras, situações ou ações significam, de fato, a mesma coisa; • Prevenção de erros: preferível a ter boas mensagens de erro é ter um design que evite a ocorrência de problemas. O sistema deve eliminar as condições que possam levar a falhas ou apresentar ao usuário opções de confirmação, antes dele executar determinadas ações; • Reconhecimento preferível à memorização: o sistema deve minimizar a quantidade de informação que o usuário precisará lembrar para usá-lo, fazendo com que objetos, ações e opções sejam visíveis. O usuário não deve precisar lembrarinformações de uma parte de um diálogo a outra. As instruções de uso do sistema devem ser visíveis ou facilmente recuperáveis, sempre que necessário; • Flexibilidade e eficiência de uso: os aceleradores, invisíveis para o usuário inexperiente, podem agilizar a interação para o usuário experiente, de forma que o sistema possa atender aos dois perfis de utilizadores. Os usuários devem ter a opção de personalizar ações frequentes; • Design estético e minimalista: os diálogos não devem conter informações irrelevantes ou muito raramente requisitadas. Cada unidade extra de informação, em um diálogo, concorre com as unidades de informação relevantes e diminui a sua visibilidade; • Ajuda aos usuários para reconhecer, diagnosticar e se recuperar dos erros: as mensagens de erro devem ser expressas em linguagem compreensível (sem códigos),indicando, com precisão, o problema e sugerindo uma solução de forma construtiva; • Suporte e documentação: é preferível que o sistema possa ser usado sem documentação, mas pode resultar necessário fornecer suporte e documentação ao usuário. Essas informações devem ser de extensão reduzida, fáceis de localizar e focadas na tarefa, apresentando uma lista das ações específicas que o usuário deverá executar.

•

Avaliação usando Heuristica de Nielsen Heuristica 1 - visibilidade do estado do sistema ◦ (grande) Para ações demoradas o sistema não exibe o estado do processamento, um exemplo disso foi ao realizar um pesquisa por um produto e resultado demorou a ser exibido e não teve nenhuma barra de processamento para usuário.

•

Heuristica 2 - Correspondência entre o sistema e o mundo real ◦ CORRIGIDO (pequeno) Na pagina do carrinho de compra quando listamos os produtos escolhidos, a imagem do produto não é exibida ◦ (grande) Na pagina do carrinho de compra o valor total da compra é apresentado como pagamento com boleto sofrendo um desconto ou em forma de parcelas, logo não apresenta o valor real da soma dos produtos de forma clara para o usuario

•

Heuristica 3 - Liberdade e controle por parte do usuário ◦ (grande) - No sistema de ouvidoria, apesar de organizado a classificado as possíveis dúvidas dos usuários, o site apresenta as opções de duvidas muitos próximas e nao destaca os itens que estão selecionados(indicando que pode ser clicado), dessa forma o usuário pode clicar no link indesejado. ◦ CORRIGIDO(grande) Ele não tem o botão inicio ou home na barra de opçoes, para voltar a pagina inicial, caso o usuario queria voltar;

•

Heuristica 4 - Consistência e padrões ◦ (pequeno) Quando o usuario adiciona produtos no carrinho, e segue para a opcao “Minha conta” o site alega que :"Você não possui nenhum pedido até o momento!“, confundido o usuario. ◦ CORRIGIDO (grande) Na compra do produto, o usuario fica ‘perdido’ para finalizar a comprar, pois o site nao oferece de forma intuitiva os passos que devem fazer, as etapas faltante para concluir a compra.

◦ (grande) No atual momento, o cliente precisa adicionar o cep posteriormente escolher o tipo de frete para poder concluir a compra. Observando que ao logar com um usuario para compra já fornecemos um endereço de entrega e se os cep não forem iguais o usuario sera retornado para tela do carrinho.

◦ (grande) Na listagem de um produto, existem dois botoes, com as seguitnes opcoes: “Comprar”, “+Detalhes”, que independentemente o qual o usuario clica, desgina-se para a mesma pagina, dessa forma, se o usuario escolher o botao “Comprar”, terá que pressionar novamente em “Comprar” para adicionar ao carrinho de compra.

•

Heuristica 5 - Prevenção de erros ◦ (grande) No momento de cadastrar um novo usuário o sistema não indica quais campos são obrigatorios, somente quando clicamos em cadastrar que mensagens de erros são exibidas. ◦ (grande) Na tela de cadastrar não temos indicação de qual informação devemos colocar no campo, somente os placeholder que após comecarmos digitar some

◦ (grande) Quando clicamos no icone de entrar sem preencher nenhum dos campos de login, o sitema não exibe nenhuma mensagem, podem deveria exibir mensagem de obrigatoriedade para os campos.

◦ (grande) No momento da alteração dos dados cadastrais do usuário não indica quais campos são obrigatorios, somente quando clicamos em salvar dados que as mensagens de erros são exibidas

•

Heuristica 6 - Reconhecimento preferível à memorização ◦ CORRIGIDO (grande) após passar da tela de produtos na opcao carrinho de compra, apresenta-se quatro conjunto operacao(logar, cadastrar usuario, pagar no boleto, pagar no cartao) porem as opções de pagamento só estao disponiveis depois do login ou cadastro, neste caso o usuario deve memorizar que deve logar antes realizar a compra.

◦ CORRIGIDO (pequeno) Na pagina do carrinho de compra o botão remover não é intuitivo, o botao de remover é um X e não indica que é usado para remover o item da cesta.

•

Heuristica 7 - Flexibilidade e eficiência de uso ◦ CORRIGIDO (pequeno) No cadastro do cliente, a acessibilidade é reduzida, a selecao dos campos nao percorre com o atalho “tab”. ◦ CORRIGIDO (grande) Quando digitamos o campo cpf incorreto a pagina trava por alguns segundos, ou seja, nenhuma ação é possível ser realizado depois de digitar o campo cpf errado por alguns segundos.

•

Heuristica 8 – Design estético e minimalista ◦ (pequeno) Uso exagerado de recomendacoes de produtos.

◦ (pequeno) O site destaca mais as propagandas do que seus produtos, na listagem de produtos da pagina inicial, os produtos sao interrompidos com anuncios na horizontal e alem desses anuncios ainda tem anuncios verticais direita.

◦ (grande) Uso indiscriminado da cor vermelha, embora seja a cor padrao do site, isso prejudica quando deseja chamar atencao para algo importante, como o total a pagar na listagem de compra do carrinho, pois a cor vermelha distrai o usuario.

◦ (pequeno) O tamanho da fonte da pagina é pequena gera dificuldade para o usuario na visualizacao das informações dos produtos.

◦ CORRIGIDO (grande) Na pagina do carrinho de compra o valor total da compra esta numa fonte pequena dificultando para o usuario ver o valor.

•

Heuristica 9 - Ajuda aos usuários para reconhecer, diagnosticar e se recuperar dos erros ◦ (catastrofico) As fotos não carregam quando eu tenho que abrir o site em dispositivos moveis

•

Heuristica 10 - Suporte e documentação ◦ (pequeno) Ná pagina de atendimento, o site apresenta varias informacoes sobre pedidos, garantia, entregas e compras, elas foram classificadas e agrupadas corretamente. Porem, a fonte das informações é muito pequena.

Resultados da Avaliação usando a Heuristica de Nielsen Violação

Severidade

Solução Proposta

Para ações demoradas o sistema não exibe o estado do grande processamento, um exemplo disso foi ao realizar um pesquisa por um produto e resultado demorou a ser exibido e não teve nenhuma barra de processamento para usuário.

Adicionar uma barra de processamento enquanto a ação esta em processamento

Na pagina do carrinho de compra quando listamos os pequeno produtos escolhidos, a imagem do produto não é exibida

Adicionar uma miniatura da imagem do produto ao lado do nome produto

Na pagina do carrinho de compra o valor total da grande compra é apresentado como pagamento com boleto sofrendo um desconto ou em forma de parcelas, logo não apresenta o valor real da soma dos produtos de forma clara para o usuario

Adicionar o valor total da compra, incluindo o valor do frete, antes do valor total na forma boleto

No sistema de ouvidoria, apesar de organizado e grande classificado as possíveis dúvidas dos usuários, o site apresenta as opções de duvidas muitos próximas e nao destaca os itens que estão selecionados(indicando que pode ser clicado), dessa forma o usuário pode clicar no link indesejado.

Quando um item das duvidas estiver sendo selecionado este deve ser resaltado dos demais, por exemplo, adicionando uma marcação em vermelho igual o feito no menu

Ele não tem o botão inicio ou home na barra de opçoes, grande para voltar a pagina inicial, caso o usuario queria voltar;

No canto superior esquerdo onde se localiza o nome do site, ao ser clicado deve-se voltar para pagina inicial

Quando o usuario adiciona produtos no carrinho, e pequeno segue para a opcao “Minha conta” o site alega que :"Você não possui nenhum pedido até o momento!“, confundido o usuario.

A paginal inicial da tela minha conta deve apresentar as informações basicas do usuario ou estar vazia.

Na compra do produto, o usuario fica ‘perdido’ para grande finalizar a comprar, pois o site nao oferece de forma intuitiva os passos que devem fazer, as etapas faltante para concluir a compra.

Adicionar indicações de quais etapas foram concluidas e quais etapas faltam para finalizar a compra

No atual momento, o cliente precisa adicionar o cep grande posteriormente escolher o tipo de frete para poder concluir a compra. Observando que ao logar com um usuario para compra já fornecemos um endereço de entrega e se os cep não forem iguais o usuario sera retornado para tela do carrinho.

Quando o usuario já estiver logado o site deve fornecer as opções de cep já cadastradas pelo usuario, porem deve ser possível preencher com um cep diferente

Na listagem de um produto, existem dois botoes, com as grande seguitnes opcoes: “Comprar”, “+Detalhes”, que independentemente o qual o usuario clica, desgina-se para a mesma pagina, dessa forma, se o usuario escolher o botao “Comprar”, terá que pressionar novamente em “Comprar” para adicionar ao carrinho de compra.

Quando o usuario clicar na opção o produto deve ser adicionado ao carrinho de compra e o usuario redirecionado para a pagina de compra.

No momento de cadastrar um novo usuário o sistema grande não indica quais campos são obrigatorios, somente quando clicamos em cadastrar que mensagens de erros são exibidas.

O sistema deve indicar quais campos são obrigatorios, por exemplo, campos em vermelho são obrigatorios ou mensagens abaixo do campo indicando a obrigatorioedade.

Na tela de cadastrar não temos indicação de qual grande informação devemos colocar no campo, somente os placeholder que após comecarmos digitar some

Deve haver o nome da informação que deve ser colocado no campo alem do placeholder

Quando clicamos no icone de entrar sem preencher grande nenhum dos campos de login, o sitema não exibe nenhuma mensagem, podem deveria exibir mensagem de obrigatoriedade para os campos.

O sistema deve exibir a mensagem que os campos de e-mail e senha devem ser preenchidos para logar, informando ao usuario qual ação deve ser feita.

No momento da alteração dos dados cadastrais do grande usuário não indica quais campos são obrigatorios, somente quando clicamos em salvar dados que as mensagens de erros são exibidas

O sistema deve indicar quais campos são obrigatorios, por exemplo, campos em vermelho são obrigatorios ou mensagens abaixo do campo indicando a obrigatorioedade.

Após passar da tela de produtos na opcao carrinho de grande compra, apresenta-se quatro conjunto operacao(logar, cadastrar usuario, pagar no boleto, pagar no cartao) porem as opções de pagamento só estao disponiveis depois do login ou cadastro, neste caso o usuario deve memorizar que deve logar antes realizar a compra.

Exibir ao usuario somente ação que ele deve executar naquele momento, neste caso sendo as opções login ou cadastro de novo usuario.

Na pagina do carrinho de compra o botão remover não é pequeno intuitivo, o botao de remover é um X e não indica que é usado para remover o item da cesta.

Alterar o icone de remover para algo mais intuitivo para o usuario, por exemplo, usar um lixeira.

No cadastro do cliente, a acessibilidade é reduzida, a pequeno selecao dos campos nao percorre com o atalho “tab”.

Adicionar o atalha tab no momento do cadastro para agilizar o cadastro.

Quando digitamos o campo cpf incorreto a pagina trava grande por alguns segundos, ou seja, nenhuma ação é possível ser realizado depois de digitar o campo cpf errado por alguns segundos.

Ação de digitar o cpf não deve travar a tela, somente exibir uma mensagem informando o erro ao usuario.

Uso exagerado de recomendacoes de produtos.

pequeno

Deve-se diminuir o numero de produtos de recomendando para não deixar o site com poluição visual.

O site destaca mais as propagandas do que seus pequeno produtos, na listagem de produtos da pagina inicial, os produtos sao interrompidos com anuncios na horizontal e alem desses anuncios ainda tem anuncios verticais direita.

Deve-se diminuir o numero de propagandas para não deixar o site com poluição visual.

Uso indiscriminado da cor vermelha, embora seja a cor grande padrao do site, isso prejudica quando deseja chamar atencao para algo importante, como o total a pagar na listagem de compra do carrinho, pois a cor vermelha distrai o usuario.

Deve-se mudar o tom da cor vermelha.

O tamanho da fonte da pagina é pequena gera pequeno

Adicionar a opção para personalização do

dificuldade para o usuario na visualizacao das informações dos produtos.

tamanho da fonte, para que o usuario possa aumentar o tamanho da fonte de acordo com as necessidade dele.

Na pagina do carrinho de compra o valor total da grande compra esta numa fonte pequena dificultando para o usuario ver o valor.

Oferecer um destaque maior para o valor da compra.

As fotos não carregam quando tentamos abrir o site em catastrófico A imagens dos produtos devem sempre dispositivos móveis estar disponiveis. Ná pagina de atendimento, o site apresenta varias pequeno informacoes sobre pedidos, garantia, entregas e compras, elas foram classificadas e agrupadas corretamente. Porem, a fonte das informações é muito pequena.

Adicionar a opção para personalização do tamanho da fonte, para que o usuario possa aumentar o tamanho da fonte de acordo com as necessidade dele.