Engenharia de Software 2

Professora: Andressa Bezerra

Atividade
Tema: Design Web

Antonio Renato Moura de Oliveira

Seção 1: Informações Iniciais

Descrição
● Esta atividade consiste na resolução e entrega de 1 questão relacionada a aula de Design Web.
Prazo para entrega
● A atividade deverá ser entregue no prazo limite de até 23:59 do dia 05-05-2018
Método de Entrega
● As respostas deverão ser salvas em um arquivo do tipo .doc ou .pdf e enviadas por email para
o endereço: andressa.ferreira@ifce.edu.br . Lembre-se: É necessário colocar no corpo do email
seu nome e matrícula.
Pontuação associada
● A atividade vale até 0,5 ponto na N2
__________________________________________________________________________

Seção 2: Exercício

1) Analise os sistemas abaixo de acordo com as heurísticas de Nielsen. Após isso, aponte quais
sistemas satisfazem quais heurísticas, marcando com um X a linha-coluna correspondente a
associação. Ao finalizar, justifique cada uma das respostas dadas (inclusive aquelas onde optou
por não associar).

Facebook Whatsapp Web Americanas Edmodo QAcademico Gmail

Visibilidade de em qual X X X X X
estado estamos no sistema

Correspondência com o X X X X X
mundo real

Consistência e padrões X X X X X

Flexibilidade de uso X X

Prevenção de erros X X X X

Ajuda para recuperação de X X X X

erros

Documentação X X X X

Liberdade de controle X X X X

Estética e design X X X
X
minimalista
1. Facebook

1.1.Visibilidade de em qual estado estamos no sistema

É a responsabilidade do sistema informar em tempo real o que está acontecendo para o usuário.
No facebook temos como exemplo a barra de contatos, que mostra, em tempo real, quem está
disponível para conversa, e na barra superior, notificações, também em tempo real, de novas
conversas e notícias.

1.2.Correspondência com o mundo real

Toda comunicação do produto deve falar a linguagem do usuário e não ser orientada ao sistema,
ou seja, todos os termos/palavras deve estar de acordo com o público alvo. Isso também é
aplicado à ícones e imagens ilustrativas.

O facebook não foge à regra. Quem não conhece, nem usa no seu dia-a-dia os termos curtir,
compartilhar, comentar. Quando ouvimos estas palavras já associamos a certas funcionalidades
do face.
1.3.Consistência e padrões

Aqui devemos falar a mesma língua o tempo todo, e nunca identificar uma mesma ação com
ícones ou labels diferentes.
No face, como exemplo a funcionalidade comentar, sempre vai estar com esse ícone, e com
esse nome, ou algo bem similar, como um campo como “Escreva um comentário”... Todos
remetem a uma mesma funcionalidade.

1.4.Flexibilidade de uso

O sistema pode ser ágil para usuários avançados e ser fácil de utilizar pelos usuários leigos.
Isso é o que se espera de um sistema flexível e eficiente. O uso de atalhos de teclados,
preenchimento automático a partir de dados anteriores e máscaras de campos são exemplos de
itens que aprimoram a eficiência do sistema com flexibilidade.

Para usuários leigos, tem sempre os textos indicando o que fazer. Para usuários avançados, no
facebook tem vários atalhos, como os a seguir:

 Publicar - Pressione a tecla P para abrir a caixa de texto da atualização de status;

 Compartilhar - Apertar a tecla S, em seu teclado, com o post aberto;
 Curtir – Apertar L com o post aberto;
 Comentar – Apertar C com o post aberto;
 Pesquisar – Aperta a tecla “/” no teclado...
 E muito mais. Ver aqui: 20 atalhos.
1.5.Prevenção de erros

Ações drásticas como deletar arquivos, devem ser bem sinalizadas. Além disso, ter sempre uma
confirmação ou possibilidade de desfazer o que foi feito.

Exemplo de mensagem de confirmação ao tentar excluir uma postagem no facebook.

1.6.Ajuda para recuperação de erros

Prevenir um erro é algo de máxima importância, mas tão importante quanto, é ajudar o usuário
a identificar e resolver os problemas que acabam sendo inevitáveis. Mensagens de erro claras,
com textos simples e diretos, não intimidando o usuário e sim o conduzindo à possíveis
soluções.

Exemplo de um erro e possível solução que o facebook dá ao usuário.

1.7.Documentação

Uma interface intuitiva e clara evita a solicitação de ajuda em algumas situações. Mesmo assim
devemos manter ao alcance do usuário, itens de auxílio para determinadas ações.
O facebook tem uma central de ajuda onde o usuário pode tirar as possíveis dúvidas.

1.8.Liberdade de controle
Nunca devemos impor algo ao usuário. Também nunca devemos tomar a decisão por ele. O
ideal é sugerir e não induzir. No facebook, o usuário é livre para fazer o que quiser, desde que
não interfira nas regras instituída pela empresa, como compartilhar nudez, por exemplo.

1.9.Estética e design minimalista

O ideal é deixe o seu layout e o conteúdo o mais simples e direto possível. Ao meu ver o
facebook atende este requisito, pois tem o layout bem definido, sempre separado por blocos,
que ajudam o usuário a se achar facilmente na tela.

2. Whatsapp Web

2.1.Visibilidade de em qual estado estamos no sistema

É a responsabilidade do sistema informar em tempo real o que está acontecendo para o usuário.
No watsapp web temos como exemplo das conversas, que notificam em tempo real, além de
permitir que os usuários conversem, desde que conectados também no celular.

2.2.Correspondência com o mundo real

No whatsapp, os termos são bastante familiarizados pelos usuários. Por exemplo: digite uma
mensagem, anexar arquivos, buscar...

2.3.Consistência e padrões

Aqui, é bem simples fazer um comentário ou procurar algo... a exemplo do procurar, tem o
ícone da lupa, que remete a ideia de procura, o clipe a anexar...

2.4.Flexibilidade de uso

O sistema, como é mais simples, não há necessidade de atalhos, pelo menos eu não achei
necessidade, e nem encontrei mensão se existe. Porém o sistema dá uma ajuda pros leigos...
Então, como só tem uma opção de chamar uma funcionalidade, então não existe flexibilidade
de uso.
2.5.Prevenção de erros

Sempre que vou apagar algo, dá a seguinte mensagem, isso previne que o usuário apague algo
sem querer...

2.6.Ajuda para recuperação de erros

Prevenir um erro é algo de máxima importância, mas tão importante quanto, é ajudar o usuário
a identificar e resolver os problemas que acabam sendo inevitáveis. Mensagens de erro claras,
com textos simples e diretos, não intimidando o usuário e sim o conduzindo à possíveis
soluções.

Exemplo de um erro e possível solução que o whatsapp dá ao usuário.

2.7.Documentação
O Whatsapp também conta com uma central de ajuda ao usuários que tiverem dúvidas sobre as
funcionalidades do mesmo.

2.8.Liberdade de controle

O usuário pode escrever mensagem, responder mensagem, apagar mensagem, para ele ou para
todos, pode anexar arquivo, enfim, pode fazer todas as funcionalidades possíveis.

2.9.Estética e design minimalista

O design é bem básico, o que ajuda o usuário a mexer no sistema, já que tem apenas duas
colunas, a de conversas com usuários e grupos e a da conversa selecionada.

3. Americanas.com

3.1.Visibilidade de em qual estado estamos no sistema

Como é um sistema de E-Commerce, Americanas.com tem o intuito diferente das duas

primeiras, mas tem alguns exemplos onde o estado do sistema fica evidente. Por exemplo,
quando estamos colocando um produto no carrinho, o carrinho é atualizado atualmente, e fica
sempre a quantidade atualizada de itens no carrinho.

3.2.Correspondência com o mundo real

Comprar, adicionar ao carrinho, o que você quer agora?, departamentos, são termos que
conhecemos no nosso dia a dia.

3.3.Consistência e padrões

Botão de comprar, sempre vermelho, com o nome comprar, às vezes com o ícone. Exemplo de
padrão.
3.4.Flexibilidade de uso

Não vi menção de atalhos para usuários avançados. Mas para todos os botões do site ajudam o
usuário a saber a qual funcionalidade está relacionado, por exemplo, o botão comprar vai
adicionar ao carrinho. Mas, como não vi outra opção de acesso a essa funcionalidade, não
considero que se tenha flexibilidade de uso.

3.5.Prevenção de erros

Em um teste superficial, consegui entrar, sair, colocar um item no carrinho, retirar o item do
carrinho, fazer um pedido, e só apareceu a confirmação quando tentei cancelar o pedido. Não
sei o que eles consideram como erro...

3.6.Ajuda para recuperação de erros

O mesmo vale pra cá...

3.7.Documentação
 Em todas as páginas do site americanas.com podemos observar a seguinte seção, onde o usuário
pode encontrar facilmente as informações sobre o site.

3.8.Liberdade de controle

O usuário pode entrar, sair, procurar um produto, comprar, fazer pedido, pagar. Ou seja,
consegue fazer tudo o que deseja.

3.9.Estética e design minimalista

Design típico de sites e-commerces, com bastante informação, promoções, e tal, não chegando
a ser minimalista.

4. Edmodo

4.1.Visibilidade de em qual estado estamos no sistema

Temos a barra de notificação, que notifica em tempo real alguma atividade nova.

4.2.Correspondência com o mundo real

Linguajar bastante simples, para publico alvo estudantes.

4.3.Consistência e padrões

Icones e labels padrões em todo o site.

4.4.Flexibilidade de uso

Não tem outra forma de usar, a não ser o convencional, clicando na opção desejada.

4.5.Prevenção de erros

Tem mensagens de confirmação para prevenir erros, como por exemplo excluir sem querer
uma publicação.

4.6.Ajuda para recuperação de erros

Não vi essa opção no site.

4.7.Documentação

Suporte em inglês, não ideal para um usuário brasileiro.

4.8.Liberdade de controle

Consigo realizar todas as funcionalidades disponíveis para o meu nível de acesso, mas não
consigo recuperar uma postagem, caso eu a apague, mesmo querendo.
 4.9.Estética e design minimalista

Layout limpo e bem prático para ser usado, de fácil entendimento.

5. Qacademico

5.1.Visibilidade de em qual estado estamos no sistema

Um exemplo de como o qacademico não dá visibilidade é esse:

O que esperamos é que, ao clicar na mensagem, a mesma se abra pra gente, mas acontece que
ela abre abaixo, e não dá foco. Um usuário ao entrar aqui, não vai saber que tem que descer a
tela para poder ler a mensagem...

5.2.Correspondência com o mundo real

Encerrar sessão ao invés de sair. Pode confundir alguns usuários...

5.3.Consistência e padrões

Exemplo do que não fazer em um site. O mesmo ícone está para calendário e boletim, e outro
pata 6 funcionalidades diferentes.
 5.4.Flexibilidade de uso

Não consegui encontrar lugar que indique que podemos ter mais de uma possibilidade de fazer
a mesma coisa, não tem atalhos, mas todas as opções tem uma descrição do que se pode fazer.

5.5.Prevenção de erros

Nenhuma mensagem de confirmação encontrada. Por exemplo, apaguei um e-mail aleatório, e

não perguntou se eu realmente queria fazer isso.

5.6.Ajuda para recuperação de erros

Mesmo caso, se eu apaguei sem querer, não consigo recuperar.

5.7.Documentação

Inexistente.

5.8.Liberdade de controle

De vez em quando somos obrigado a preencher um questionário, para que assim possamos ter
acesso ao sistema, isso é contra a liberdade de controle.

5.9.Estética e design minimalista

Não considero o melhor design, chega a ser confuso no início. Usamos porque somos obrigados
e só quando precisa.

6. Gmail

6.1.Visibilidade de em qual estado estamos no sistema

Exemplo de visibilidade, em tempo real, das mensagens novas, quantidade de mensagem não
lidas, e contatos online para conversar.

6.2.Correspondência com o mundo real

Tem os termos comuns a sites de webmail, como escrever e-mail, responder, compartilhar, etc.
São termos que o usuário está acostumado a utilizar.

6.3.Consistência e padrões

Ícones e textos comuns de sites de webmail. Por exemplo, ícone de estrela favorita, clipe
adiciona arquivos, etc.

6.4.Flexibilidade de uso

Tem várias opções de atalho para usuários avançados, como podemos ver no link:
https://support.google.com/mail/answer/6594?co=GENIE.Platform%3DDesktop&hl=pt-BR
Também existe descrições nos campos de pesquisa, no campo de resposta de email, e mais, o
que facilita para os usuários leigos utilizarem o sistema.

6.5.Prevenção de erros

Bom, aqui quando excluímos um e-mail, ele exclui normalmente, mas diz que podemos
recuperar, se quisermos. Mas não pergunta se desejamos realmente realizar essa ação, o que
não previne o erro de excluirmos, involuntariamente, um e-mail.

6.6.Ajuda para recuperação de erros

A foto acima é um exemplo de como podemos recuperar de um erro no site, por exemplo, se
apagarmos sem querer um e-mail, podemos recuperar o mesmo.
6.7.Documentação

Aqui também encontramos a Central de Ajuda, para sanar as dúvidas dos usuários. Estes ainda
conseguem utilizar o fórum, na qual os mesmos usuários se ajudam.

6.8.Liberdade de controle

O usuário é livre para realizar todas as ações possíveis.

6.9.Estética e design minimalista

Estética comum a sites webmail, minimalista, dividida em blocos, uma das categorias e outra
das mensagens, com poucas cores, cores diferenciadas para as mensagens lidas, o que facilita
a utilização pelo usuário.