O documento aborda princípios de usabilidade e design centrado no usuário, exemplificando com interfaces de vários sites e aplicativos. Destaca a importância da adaptabilidade, clareza visual e feedback, visando facilitar a interação do usuário com o sistema. Exemplos práticos são apresentados para ilustrar como a usabilidade pode ser melhorada em diferentes contextos e para diferentes usuários.

1. PUC-RIO
Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação
INTERAÇÃO HUMANO-COMPUTADOR
e projeto centrado no usuário
05/09/2015
Alice Wanderley, Fernanda Sarmento, Raquel Winter e Renan Andrade

2. Categoria #1
Facilitar o aprendizado do sistema
Compatibilidade
Condução / Incentivo / Transparência (Explicitness)

3. COMPATIBILIDADE
Google Apresentações
Ao acessar a ferramenta pela primeira
vez, é possível identificar elementos de
outros softwares que possuem o
mesmo objetivo, o que torna a
ferramenta fácil de ser compreendida.
“Projetar um produto de tal maneira que
seu modo de uso compatível com as
experiências de usuários provenientes do
uso de outros produtos.” (JORDAN, 1998)

4. COMPATIBILIDADE
Site Pinterest
O Pinterest é uma rede social que permite a partilha de
fotos e vídeos em diferentes murais, de acordo com os
gostos de cada utilizador.
Porém, ao acessar a ferramenta pela primeira vez o
usuário fica perdido por não conhecer a opção “pin”.
O usuário leva um certo tempo para entender que o
nome pin + interest para uma parede virtual onde cada
pessoa pode pendurar aquilo que mais lhe interessa.
“O conhecimento necessário para uma tarefa deve estar
disponível no mundo exterior. O usuário deve ser capaz de
deduzir o comportamento de um sistema quando interage
com ele.” (NORMAN, 2002)

5. CONDUÇÃO / INCENTIVO / TRANSPARÊNCIA
(EXPLICITINESS)
Site NetShoes
O site conduz o usuário de maneira clara e bem
objetiva quando se trata de buscar algum produto
específico até o fechamento do pedido.
“O sistema deve utilizar a linguagem do usuário, com
palavras, frases e conceitos familiares a ele, ao invés de
usar termos orientados ao sistema.” (NIELSEN, 1998)

6. CONDUÇÃO / INCENTIVO /
TRANSPARÊNCIA (EXPLICITINESS)
Site RioCard
Ao tentar recuperar a senha o usuário se
perde. As informações importantes são
muito pequenas, sem destaque.
Ele também indica para o usuário preencher
um campo do outro lado, saindo da sua
posição atual. Além de mandar clicar em um
botão que não existe.
“Projetar um produto de tal maneira que seu
modo de uso compatível com as experiências
de usuários provenientes do uso de outros
produtos.” (JORDAN, 1998)

7. Categoria #2
Facilitar a procura, a percepção, o
reconhecimento e a compreensão das
informações no sistema
Agrupamento / Clareza Visual / Priorização
Legibilidade e Clareza Visual

8. AGRUPAMENTO / DISTINÇÃO PELO FORMATO
Google Now
Informações estão separadas de forma bastante
clara com a utilização de cards.
Diferenças de tamanhos de fontes evidenciam os
títulos das categorias.
Ícones auxiliam na rápida compreensão.
“Organização visual dos itens de informação, uns em
relação aos outros. O agrupamento considera a
localização e o formato para indicar as relações entre os
diversos itens apresentados, e se eles pertencem ou não
a uma mesma classe de itens.”
(BASTIEN & SCAPIN, 1993)

9. LEGIBILIDADE/CLAREZA VISUAL
Aplicativo Pocket
Permite a troca de cor de fundo, tipo e tamanho de
fonte e brilho da tela para oferecer maior conforto de
leitura aos usuários.
“Características concretas da apresentação das
informações que devem facilitar a leitura.”
(BASTIEN & SCAPIN, 1993)
“Projetar um produto de tal maneira que a informação
apresentada possa ser lida fácil e rapidamente sem que
ela leve à confusão.”
(JORDAN, 1998)

10. AGRUPAMENTO / DISTINÇÃO POR
FORMATO
Site Boa Dica
Informações apresentadas não podem
ser distinguidas rapidamente, pois não
há uma hierarquia bem definida dos
elementos.
A organização das informações na
página não é definida de acordo com as
principais tarefas a serem realizadas
pelos usuários.
“Organização visual dos itens de
informação, uns em relação aos outros.”
(BASTIEN & SCAPIN, 1993)

11. PRIORIZAÇÃO DE
FUNCIONALIDADES E
INFORMAÇÕES
Aplicativo Spotify
Informações agrupadas de modo que o
usuário é capaz de acessar as
funcionalidades mais importantes do
sistema de forma rápida e em poucos
passos.
Pode-se dizer que a tela se encontra
“divida” em 5 áreas distintas das quais
4 ficam fixas independentemente da
ação do usuário, o que facilita o
reconhecimento das funcionalidades.
“Projetar um produto de modo que as
funcionalidades e as informações mais
importantes estejam facilmente acessíveis
ao usuário.”
(JORDAN, 1998)

12. Categoria #3
Facilitar o controle da interação
com o sistema
Significado dos Códigos e Denominações
Ajuda e Documentação
Feedback
Controle do usuário
Prevenção e Recuperação de Erros

13. FEEDBACK
Na maioria das vezes que é feita uma compra
pela internet, imediatamente é enviado por e-
mail uma confirmação, acompanhada de
informações detalhadas sobre o
produto/serviço adquirido.
Também há feedback quando é feito um
pagamento com determinados cartões e o
usuário logo recebe um sms confirmando o
pagamento.
Outra forma de feedback parecida é quando o
usuário se cadastra em um determinado site e
o mesmo lhe envia um e-mail agradecendo e
registrando sua nova conta.
“Projetar um produto de tal modo que as ações
realizadas pelo usuário sejam reconhecidas e que
uma indicação significativa seja dada sobre os
resultados das ações.”
(JORDAN, 1998)

14. PREVENÇÃO E RECUPERAÇÃO DE ERROS
O DreamWeaver é um programa da Adobe que
permite o acompanhamento em tempo real de
como o projeto está ficando, no momento em
que são colocados os códigos.
Além dele sinalizar os erros mais comuns (por
exemplo espaçamento indevido), ele e outros
programas da Adobe ficam com um asterisco na
parte superior até que o documento seja salvo.
“É preferível projetar um produto que evite que o
usuário cometa erros, do que apresentar boas
mensagens de erro.”
(NIELSEN, 1994)

15. PREVENÇÃO E RECUPERAÇÃO DE ERROS
Pequenas sinalizações em tags, são exemplos de
prevenção de erros. Mostram de forma simples os
erros mais comuns a serem evitados.
“Projetar um produto de tal modo que os possíveis
erros por parte do usuário sejam minimizados, e se os
erros ocorrem, que seja possível recuperá-los rápido e
facilmente.”
(JORDAN, 1998)

16. CONTROLE DO USUÁRIO
Ferro
O Ferro de passar roupas causou inúmeros
acidentes domésticos por causa da alta temperatura
que não apresentava limites nem sinalização de
alerta.
Hoje a maioria (mas não todos) possui um limite de
temperatura.
"O usuário aplica algumas vezes sem querer funções
erradas. Ele deve dispor de funções que lhe permitam
sair rapidamente do estado em que se encontra sem
ser obrigado a passar por uma interação complexa. Se
trata então de propor funções que permitam desfazer
ou refazer uma ação.”
(NIELSEN, 1994)

17. CONTROLE DO USUÁRIO
Impressora
Trava folhas
Imprime folha de teste
Não era possível interromper a impressão
(hoje na maioria é)
Quando a folha está sendo puxada, o cancelamento
e retirada desta, é quase sempre complicado
“Projetar um produto de maneira a maximizar o
controle do usuário sobre suas próprias ações, sobre o
produto, e sobre o estado no qual se encontra o
produto.”
(JORDAN, 1998)

18. CONTROLE DO USUÁRIO
Corretores ortográficos.
Estes estão sendo cada vez mais motivo de
discussões e polêmica, pois em muitos casos
alteram o sentido da frase que o usuário deseja
transmitir.
Acontece em e-mail, midias sociais e documentos
(Office, Adobe etc)
“Os usuários experientes apreciam saber que dominam
a situação e que tem a possibilidade de controlar o
funcionamento do sistema. Projetar o sistema de modo
que os usuários sejam os iniciadores das ações ao
invés de respondentes.”
(SHNEIDERMAN, 1998)

19. Categoria #4
Considerar o contexto de uso
do sistema e o tipo de usuário
Adaptabilidade / Flexibilidade
Permitir que usuários frequentes usem atalhos
Flexibilidade e eficiência de uso

20. ADAPTABILIDADE / FLEXIBILIDADE
No Uno Vivace, assim como em outros carros, existe a
possibilidade de adaptar o volante de acordo com a
altura do motorista, ou seja, permite que esse sistema
reaja de acordo com as necessidades/preferências do
usuário, garantindo a personalização da interface.
“A adaptabilidade de um sistema diz respeito a sua
capacidade de reagir de acordo com o contexto, e de
acordo com as necessidades e preferências dos usuários”’
“Refere-se aos meios disponíveis ao usuário para
personalizar sua interface de maneira a considerar suas
estratégias de trabalho e/ou seus hábitos e as exigências de
suas tarefas.
(BASTIEN & SCAPIN, 1993)

21. ADAPTABILIDADE / FLEXIBILIDADE
Configuração de preferências de anúncios no Google
É possível editar o seu perfil do Google como target de anúncios
através do link: https://www.google.
com/settings/u/0/ads/authenticated
Embora não seja possível desabilitar anúncios (até por que a
maior parte dos anúncios ocorre em sites parceiros), é possível
determinar quais informações você deseja que os anunciantes
saibam e de quais clusters de marketing deseja participar.
“A adaptabilidade de um sistema diz respeito a sua capacidade de
reagir de acordo com o contexto, e de acordo com as necessidades e
preferências dos usuários”’
“Refere-se aos meios disponíveis ao usuário para personalizar sua
interface de maneira a considerar suas estratégias de trabalho e/ou
seus hábitos e as exigências de suas tarefas.
(BASTIEN & SCAPIN,1993)

22. ADAPTABILIDADE / FLEXIBILIDADE
Facebook x Instagram - #1 - Agilidade para deixar de
seguir alguém
Enquanto o Facebook permite que o usuário faça isso
diretamente no post, o Instagram só dá oferece a opção
de denúncia. Para deixar de seguir é necessário ir até o
perfil e deixar de seguir.
“A adaptabilidade de um sistema diz respeito a sua
capacidade de reagir de acordo com o contexto, e de
acordo com as necessidades e preferências dos usuários”’
“Refere-se aos meios disponíveis ao usuário para
personalizar sua interface de maneira a considerar suas
estratégias de trabalho e/ou seus hábitos e as exigências de
suas tarefas.
(BASTIEN & SCAPIN,1993)

23. ADAPTABILIDADE / FLEXIBILIDADE
Facebook x Instagram - #2 - Agilidade em reportar publicidade
inconveniente
Enquanto o Facebook permite que o usuário faça isso
diretamente no post, o Instagram não oferece nenhuma opção
senão a de instalar, comentar ou curtir.
“A adaptabilidade de um sistema diz respeito a sua capacidade de
reagir de acordo com o contexto, e de acordo com as necessidades
e preferências dos usuários”’
“Refere-se aos meios disponíveis ao usuário para personalizar sua
interface de maneira a considerar suas estratégias de trabalho e/ou
seus hábitos e as exigências de suas tarefas.
(BASTIEN & SCAPIN,1993) )

24. PERMITIR QUE USUÁRIOS FREQUENTES USEM ATALHOS
No AutoCad diversos comandos podem ser acessados através da
digitação do nome do mesmo ou até mesmo através da digitação
de parte dele. Isso é extremamente desejável pois, como pontuado
pelo princípio, usuários experientes buscam por tempos de
resposta curtos do sistema.
p.ex.:1) Modify (no Menu) > Rotate
ou
2) Digitar “Rotate”
ou
3) Digitar “Ro” (é possível configurar atalhos para rotinas
específicas, ou seja, automatizar uma série de comandos)
“Os usuários experientes buscam por tempos de resposta curtos do
sistema. Por outro lado, mesmo se os usuários iniciantes passam mais
tempo a explorar o conteúdo da tela, eles tem portanto a possibilidade
de responder a seus ritmos. Como conseqüência, é preferível ter
sistemas que funcionam o mais rápido possível”.
(SHNEIDERMAN, 1998)
1
2
3

25. FLEXIBILIDADE E EFICIÊNCIA DE USO
O aplicativo da Gol permite que você realize check in
cadastrando-se ou não. Assim, usuários habituados e que
optam por se cadastrar usufruem de algumas facilidades,
mas usuários iniciantes podem seguir realizando a tarefa
desejada. Neste caso, o sistema se adapta tão bem ao
usuário experiente quanto ao usuário iniciante, conforme
previsto pelo princípio.
“Os aceleradores ou os atalhos – invisíveis aos usuários
inexperientes – podem facilitar o uso de indivíduos
experientes. O sistema deve assim poder se adaptar tão bem
ao usuário experiente quanto ao usuário iniciante. Permitir
também ao usuário personalizar ou padronizar as ações que
ele executa com mais freqüência.
(NIELSEN, 1994)