SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Downloaden Sie, um offline zu lesen
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
Categoria #1
Facilitar o aprendizado do sistema
Compatibilidade
Condução / Incentivo / Transparência (Explicitness)
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)
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)
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)
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)
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
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)
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)
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)
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)
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
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)
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)
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)
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)
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)
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)
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
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)
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)
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)
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) )
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
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)

Weitere ähnliche Inhalte

Was ist angesagt?

Avalição Heurística de aplicativos Desktop e Web
Avalição Heurística de aplicativos Desktop e WebAvalição Heurística de aplicativos Desktop e Web
Avalição Heurística de aplicativos Desktop e WebBruno Dadalt Zambiazi
 
Interface e Usabilidade: Como levar o usuário onde queremos!
Interface e Usabilidade: Como levar o usuário onde queremos!Interface e Usabilidade: Como levar o usuário onde queremos!
Interface e Usabilidade: Como levar o usuário onde queremos!Marcelo Prudente
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na WebMarcelo Vianna
 
Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.Dra. Camila Hamdan
 
Modulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampasModulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampasThais Campas
 
Desenvolvendo o produto
Desenvolvendo o produtoDesenvolvendo o produto
Desenvolvendo o produtoLaura Lopes
 
Mundo Oi - Analise Heurística
Mundo Oi - Analise HeurísticaMundo Oi - Analise Heurística
Mundo Oi - Analise HeurísticaSabine Araujo
 

Was ist angesagt? (10)

Avalição Heurística de aplicativos Desktop e Web
Avalição Heurística de aplicativos Desktop e WebAvalição Heurística de aplicativos Desktop e Web
Avalição Heurística de aplicativos Desktop e Web
 
Interface e Usabilidade: Como levar o usuário onde queremos!
Interface e Usabilidade: Como levar o usuário onde queremos!Interface e Usabilidade: Como levar o usuário onde queremos!
Interface e Usabilidade: Como levar o usuário onde queremos!
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.
 
Apresentação tarefa 2 ihm
Apresentação tarefa 2 ihmApresentação tarefa 2 ihm
Apresentação tarefa 2 ihm
 
Modulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampasModulo i arquiteturainformacaousabilidade_thaiscampas
Modulo i arquiteturainformacaousabilidade_thaiscampas
 
Desenvolvendo o produto
Desenvolvendo o produtoDesenvolvendo o produto
Desenvolvendo o produto
 
Mundo Oi - Analise Heurística
Mundo Oi - Analise HeurísticaMundo Oi - Analise Heurística
Mundo Oi - Analise Heurística
 

Andere mochten auch

List of Colleges
List of CollegesList of Colleges
List of CollegesHEMA GOPAL
 
Pesquisa de tendências de design e experiência do usuário para o mercado ed...
Pesquisa de tendências de design  e experiência do usuário para  o mercado ed...Pesquisa de tendências de design  e experiência do usuário para  o mercado ed...
Pesquisa de tendências de design e experiência do usuário para o mercado ed...Ludmyla Gaudeda
 
Zona Sul Atende - Análise Usabilidade
Zona Sul Atende - Análise UsabilidadeZona Sul Atende - Análise Usabilidade
Zona Sul Atende - Análise UsabilidadeAline Magno
 
Estudo E.Life: o que bebem os brasileiros?
Estudo E.Life: o que bebem os brasileiros?Estudo E.Life: o que bebem os brasileiros?
Estudo E.Life: o que bebem os brasileiros?E.LIFE
 
UX Design - Um estudo sobre a criação de interfaces centrada na experiência d...
UX Design - Um estudo sobre a criação de interfaces centrada na experiência d...UX Design - Um estudo sobre a criação de interfaces centrada na experiência d...
UX Design - Um estudo sobre a criação de interfaces centrada na experiência d...edsonespindola
 
Yenzah - Supercase
Yenzah - SupercaseYenzah - Supercase
Yenzah - SupercaseAline Magno
 
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...Otávio Souza
 
E-branding - Absolut Vodka
E-branding - Absolut VodkaE-branding - Absolut Vodka
E-branding - Absolut VodkaAline Magno
 
Redesign Pelas Cores - Sky Vodka
Redesign Pelas Cores - Sky VodkaRedesign Pelas Cores - Sky Vodka
Redesign Pelas Cores - Sky VodkaAlexandre Fontes
 
Storytelling Power
Storytelling PowerStorytelling Power
Storytelling PowerStorytellers
 
O que é design de interação
O que é design de interaçãoO que é design de interação
O que é design de interaçãoUFPE
 
Introdução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilIntrodução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilLariane Rossanese
 
Usabilidade de Telefones Celulares
Usabilidade de Telefones CelularesUsabilidade de Telefones Celulares
Usabilidade de Telefones CelularesRobson Santos
 
Design para o Comportamento
Design para o ComportamentoDesign para o Comportamento
Design para o ComportamentoCogIgnition
 
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)Rodrigo Freese Gonzatto
 
Testes remotos de usabilidade
Testes remotos de usabilidadeTestes remotos de usabilidade
Testes remotos de usabilidadeLuiz Agner
 
Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Gustavo Fischer
 
Ergonomia e experiência do usuário: O que eu ganho com isso?
Ergonomia e experiência do usuário: O que eu ganho com isso?Ergonomia e experiência do usuário: O que eu ganho com isso?
Ergonomia e experiência do usuário: O que eu ganho com isso?guest5da527
 

Andere mochten auch (20)

List of Colleges
List of CollegesList of Colleges
List of Colleges
 
Pesquisa de tendências de design e experiência do usuário para o mercado ed...
Pesquisa de tendências de design  e experiência do usuário para  o mercado ed...Pesquisa de tendências de design  e experiência do usuário para  o mercado ed...
Pesquisa de tendências de design e experiência do usuário para o mercado ed...
 
Zona Sul Atende - Análise Usabilidade
Zona Sul Atende - Análise UsabilidadeZona Sul Atende - Análise Usabilidade
Zona Sul Atende - Análise Usabilidade
 
Estudo E.Life: o que bebem os brasileiros?
Estudo E.Life: o que bebem os brasileiros?Estudo E.Life: o que bebem os brasileiros?
Estudo E.Life: o que bebem os brasileiros?
 
UX Design - Um estudo sobre a criação de interfaces centrada na experiência d...
UX Design - Um estudo sobre a criação de interfaces centrada na experiência d...UX Design - Um estudo sobre a criação de interfaces centrada na experiência d...
UX Design - Um estudo sobre a criação de interfaces centrada na experiência d...
 
Yenzah - Supercase
Yenzah - SupercaseYenzah - Supercase
Yenzah - Supercase
 
Apresentação instagram
Apresentação instagramApresentação instagram
Apresentação instagram
 
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
 
E-branding - Absolut Vodka
E-branding - Absolut VodkaE-branding - Absolut Vodka
E-branding - Absolut Vodka
 
Redesign Pelas Cores - Sky Vodka
Redesign Pelas Cores - Sky VodkaRedesign Pelas Cores - Sky Vodka
Redesign Pelas Cores - Sky Vodka
 
Storytelling Power
Storytelling PowerStorytelling Power
Storytelling Power
 
O que é design de interação
O que é design de interaçãoO que é design de interação
O que é design de interação
 
Introdução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilIntrodução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no Brasil
 
Usabilidade de Telefones Celulares
Usabilidade de Telefones CelularesUsabilidade de Telefones Celulares
Usabilidade de Telefones Celulares
 
Design para o Comportamento
Design para o ComportamentoDesign para o Comportamento
Design para o Comportamento
 
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
 
Testes remotos de usabilidade
Testes remotos de usabilidadeTestes remotos de usabilidade
Testes remotos de usabilidade
 
Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2
 
Ergonomia e experiência do usuário: O que eu ganho com isso?
Ergonomia e experiência do usuário: O que eu ganho com isso?Ergonomia e experiência do usuário: O que eu ganho com isso?
Ergonomia e experiência do usuário: O que eu ganho com isso?
 
Personas e Cenários
Personas e CenáriosPersonas e Cenários
Personas e Cenários
 

Ähnlich wie Ergonomia e usabilidade de interfaces digitais

ErgoDesign e Arquitetura da Informação - Parte A
ErgoDesign e Arquitetura da  Informação - Parte AErgoDesign e Arquitetura da  Informação - Parte A
ErgoDesign e Arquitetura da Informação - Parte AFabiano Damiati
 
Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Dra. Camila Hamdan
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfJulioCesar371362
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenRos Galabo, PhD
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshareguest5ccda
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGELuiz Agner
 
Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoWellington Marion
 
My Report - Usability Tests
My Report - Usability TestsMy Report - Usability Tests
My Report - Usability TestsMichel Alves
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...Rio Info
 
Infografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidadeInfografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidadeFran Maciel
 
Padrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobilePadrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobileVlamir Carneiro Jr
 
Arquivologia 2.0
Arquivologia 2.0Arquivologia 2.0
Arquivologia 2.0danimenezes
 
Aula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de InformaçãoAula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de Informaçãopedrinabrasil071
 

Ähnlich wie Ergonomia e usabilidade de interfaces digitais (20)

ErgoDesign e Arquitetura da Informação - Parte A
ErgoDesign e Arquitetura da  Informação - Parte AErgoDesign e Arquitetura da  Informação - Parte A
ErgoDesign e Arquitetura da Informação - Parte A
 
Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
 
Apresentando o GNOME
Apresentando o GNOMEApresentando o GNOME
Apresentando o GNOME
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGE
 
Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de Informação
 
My Report - Usability Tests
My Report - Usability TestsMy Report - Usability Tests
My Report - Usability Tests
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
User experience
User experienceUser experience
User experience
 
Design de Interação 2008
Design de Interação 2008Design de Interação 2008
Design de Interação 2008
 
Infografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidadeInfografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidade
 
Desenvolvimento em tempos de UX - Versão 4.0
Desenvolvimento em tempos de UX - Versão 4.0Desenvolvimento em tempos de UX - Versão 4.0
Desenvolvimento em tempos de UX - Versão 4.0
 
O que é user experience
O que é user experienceO que é user experience
O que é user experience
 
12. web2parte2
12. web2parte212. web2parte2
12. web2parte2
 
Padrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobilePadrões de Design para Interfaces Mobile
Padrões de Design para Interfaces Mobile
 
Arquivologia 2.0
Arquivologia 2.0Arquivologia 2.0
Arquivologia 2.0
 
Design de interação
Design de interaçãoDesign de interação
Design de interação
 
Aula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de InformaçãoAula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de Informação
 

Mehr von Fernanda Sarmento

CAPÍTULO 12 - Handbook of Usability Testing” de Rubin e Chsinell
CAPÍTULO 12 - Handbook of Usability Testing” de Rubin e ChsinellCAPÍTULO 12 - Handbook of Usability Testing” de Rubin e Chsinell
CAPÍTULO 12 - Handbook of Usability Testing” de Rubin e ChsinellFernanda Sarmento
 
Teste formal de usabilidade do app pinterest
Teste formal de usabilidade do app pinterestTeste formal de usabilidade do app pinterest
Teste formal de usabilidade do app pinterestFernanda Sarmento
 
Análise da Tarefa - Inquirição contextual
Análise da Tarefa - Inquirição contextualAnálise da Tarefa - Inquirição contextual
Análise da Tarefa - Inquirição contextualFernanda Sarmento
 
Pinterest - avaliação cooperativa - final
Pinterest -  avaliação cooperativa - finalPinterest -  avaliação cooperativa - final
Pinterest - avaliação cooperativa - finalFernanda Sarmento
 
Disciplina Análise da Tarefa
Disciplina Análise da TarefaDisciplina Análise da Tarefa
Disciplina Análise da TarefaFernanda Sarmento
 
Nike+ running fernanda_raquel_apresentacao_aula_2015_09_12
Nike+ running fernanda_raquel_apresentacao_aula_2015_09_12Nike+ running fernanda_raquel_apresentacao_aula_2015_09_12
Nike+ running fernanda_raquel_apresentacao_aula_2015_09_12Fernanda Sarmento
 
Web analytics – an hour a day
Web analytics – an hour a dayWeb analytics – an hour a day
Web analytics – an hour a dayFernanda Sarmento
 
Manual - Extra para apresentação de "Comunicação Catalisadora" (Dissertação d...
Manual - Extra para apresentação de "Comunicação Catalisadora" (Dissertação d...Manual - Extra para apresentação de "Comunicação Catalisadora" (Dissertação d...
Manual - Extra para apresentação de "Comunicação Catalisadora" (Dissertação d...Fernanda Sarmento
 
Apresentação de 20/03 - Comunicação Catalisadora - Dissertação de Mestrado
Apresentação de 20/03 - Comunicação Catalisadora - Dissertação de MestradoApresentação de 20/03 - Comunicação Catalisadora - Dissertação de Mestrado
Apresentação de 20/03 - Comunicação Catalisadora - Dissertação de MestradoFernanda Sarmento
 
Comunicação catalisadora: uma reflexão conceitual para as organizações (Disse...
Comunicação catalisadora: uma reflexão conceitual para as organizações (Disse...Comunicação catalisadora: uma reflexão conceitual para as organizações (Disse...
Comunicação catalisadora: uma reflexão conceitual para as organizações (Disse...Fernanda Sarmento
 
O processo da_estratégia_intro_cap1
O processo da_estratégia_intro_cap1O processo da_estratégia_intro_cap1
O processo da_estratégia_intro_cap1Fernanda Sarmento
 

Mehr von Fernanda Sarmento (20)

CAPÍTULO 12 - Handbook of Usability Testing” de Rubin e Chsinell
CAPÍTULO 12 - Handbook of Usability Testing” de Rubin e ChsinellCAPÍTULO 12 - Handbook of Usability Testing” de Rubin e Chsinell
CAPÍTULO 12 - Handbook of Usability Testing” de Rubin e Chsinell
 
Teste formal de usabilidade do app pinterest
Teste formal de usabilidade do app pinterestTeste formal de usabilidade do app pinterest
Teste formal de usabilidade do app pinterest
 
Análise da Tarefa - Inquirição contextual
Análise da Tarefa - Inquirição contextualAnálise da Tarefa - Inquirição contextual
Análise da Tarefa - Inquirição contextual
 
Pinterest - avaliação cooperativa - final
Pinterest -  avaliação cooperativa - finalPinterest -  avaliação cooperativa - final
Pinterest - avaliação cooperativa - final
 
Design de Interação
Design de InteraçãoDesign de Interação
Design de Interação
 
GRUPO DE FOCO
GRUPO DE FOCOGRUPO DE FOCO
GRUPO DE FOCO
 
Avaliação Heurística
Avaliação HeurísticaAvaliação Heurística
Avaliação Heurística
 
Displina Design de telas
Displina Design de telasDisplina Design de telas
Displina Design de telas
 
Disciplina Análise da Tarefa
Disciplina Análise da TarefaDisciplina Análise da Tarefa
Disciplina Análise da Tarefa
 
Ergodesign - Perspectivas
Ergodesign - PerspectivasErgodesign - Perspectivas
Ergodesign - Perspectivas
 
Apresentação Slideshare
Apresentação SlideshareApresentação Slideshare
Apresentação Slideshare
 
Apresentação Google maps
Apresentação Google mapsApresentação Google maps
Apresentação Google maps
 
Nike+ running fernanda_raquel_apresentacao_aula_2015_09_12
Nike+ running fernanda_raquel_apresentacao_aula_2015_09_12Nike+ running fernanda_raquel_apresentacao_aula_2015_09_12
Nike+ running fernanda_raquel_apresentacao_aula_2015_09_12
 
Apresentação Análises
Apresentação AnálisesApresentação Análises
Apresentação Análises
 
Web analytics – an hour a day
Web analytics – an hour a dayWeb analytics – an hour a day
Web analytics – an hour a day
 
Manual - Extra para apresentação de "Comunicação Catalisadora" (Dissertação d...
Manual - Extra para apresentação de "Comunicação Catalisadora" (Dissertação d...Manual - Extra para apresentação de "Comunicação Catalisadora" (Dissertação d...
Manual - Extra para apresentação de "Comunicação Catalisadora" (Dissertação d...
 
Apresentação de 20/03 - Comunicação Catalisadora - Dissertação de Mestrado
Apresentação de 20/03 - Comunicação Catalisadora - Dissertação de MestradoApresentação de 20/03 - Comunicação Catalisadora - Dissertação de Mestrado
Apresentação de 20/03 - Comunicação Catalisadora - Dissertação de Mestrado
 
Comunicação catalisadora: uma reflexão conceitual para as organizações (Disse...
Comunicação catalisadora: uma reflexão conceitual para as organizações (Disse...Comunicação catalisadora: uma reflexão conceitual para as organizações (Disse...
Comunicação catalisadora: uma reflexão conceitual para as organizações (Disse...
 
O processo da_estratégia_intro_cap1
O processo da_estratégia_intro_cap1O processo da_estratégia_intro_cap1
O processo da_estratégia_intro_cap1
 
Apres final sala_interativa
Apres final sala_interativaApres final sala_interativa
Apres final sala_interativa
 

Ergonomia e usabilidade de interfaces digitais

  • 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)