slides baseados no livro: design e avaliação de interfaces humano computador

Slides baseados no livro:

Design e Avaliação de Interfaces Humano Computador

Heloísa Vieira da Rocha

M.Cecília C. Baranauskas

PrincípiosPrincípiosO primeiro princípio do design de interfaces,

tanto para uma maçaneta quanto para um computador, é manter em mente o ser humano que quer usá-la. A tecnologia é subserviente àquele objetivo.

….menos ênfase em “interfaces” e mais em ferramentas apropriadas para a tarefa. Mais ênfase em design centrado no usuário. Menos em tecnologia; mais nas pessoas, e grupos, e interações sociais. E tarefas. (Norman, D)

AÇÃO

Objetivos de IHCObjetivos de IHCProduzir sistemas usáveis, seguros e

funcionaisDesenvolver ou melhorar a

segurança, utilidade, efetividade e USABILIDADE de sistemas computacionais

AÇÃO

Aceitabilidade de um SistemaAceitabilidade de um SistemaD

Fatores Organizacionaistreinamento, políticas, organização do trabalho, etc.

Fatores Ambientaisbarulho, aquecimento, ventilação,

luminosidade, etc.

Saúde e Segurançaestresse, dores de cabeça,

perturbações musculares, etc.

capacidades e processos cognitivos

O Usuáriomotivação, satisfação,

personalidade, experiência, etc.

Confortoposição física, layout do

equipamento, etc.

Interface do Usuáriodispositivos de entrada e saída, estrutura do diálogo, uso de cores, ícones, comandos, gráficos,

linguagem natural, 3-D, materiais de suporte ao usuário, multimídia, etc.

Tarefafácil, complexa, nova,

alocação de tarefas, repetitiva,monitoramento, habilidades, componentes, etc.

Restriçõescustos, orçamentos, equipe,

equipamento, estrutura do local de trabalho, etc.

Funcionalidade do Sistemahardware, software, aplicação

Produtividadeaumento da qualidade, diminuição de custos, diminuição de erros,

diminuição de trabalho, diminuição do tempo de produção,aumento da criatividade , oportunidades para idéias criativas em direção a novos produtos, etc.

AÇÃO

Disciplinas EnvolvidasDisciplinas EnvolvidasD

Princípios de DesignPrincípios de DesignVisibilidade e AffordancesBom modelo conceitualBons mapeamentosFeedback

AÇÃO

Princípios de DesignPrincípios de Design Partindo dos objetos que nos cercam:

Visibilidade e Affordances O usuário necessita ajuda. Apenas as coisas necessárias têm que estar

visíveis para indicar quais as partes podem ser operadas e como.

Ex: portas Visibilidade

indica o mapeamento entre ações pretendidas e as ações reais.

indica também distinções importantes diferenciar a vasilha do sal da do açúcar.

Visibilidade do efeito das operações A falta de visibilidade é que torna muitos dispositivos

controlados por computadores tão difíceis de serem operados.

AÇÃO

Visibilidade – Editores GráficosVisibilidade – Editores GráficosD

VisibilidadeVisibilidadeD

Princípios de DesignPrincípios de DesignVisibilidade e Affordances

Affordances o termo definido para se referir às

propriedades percebidas e propriedades reais de um objeto, que deveriam determinar como ele pode ser usado. Botões são para girar, teclas para pressionar,

tesouras para cortar, etc. Quando se tem a predominância da affordance

o usuário sabe o que fazer somente olhando, não sendo preciso figuras, rótulos ou instruções

AÇÃO

Princípios de DesignPrincípios de Design Bom modelo conceitual

◦ Um bom modelo conceitual permite prever o efeito de ações.

◦ Sem um bom modelo conceitual opera-se sob comando, cegamente Ex.: uma tesoura Contra-ex: relógio digital com dois e até quatro

botões no mostrador

AÇÃO

Princípios de DesignPrincípios de DesignBons mapeamentos◦termo técnico para denotar o relacionamento

entre duas entidades. ◦em interfaces, indica o relacionamento entre

os controles e seus movimentos e os resultados no mundo.

◦Mapeamentos naturais Aproveitam analogias físicas e padrões culturais

AÇÃO

Princípios de DesignPrincípios de DesignFeedback◦Retornar ao usuário informação sobre as

ações que foram feitas, quais os resultados obtidos, é um conceito conhecido da teoria da informação e controle ? Falar com uma pessoa sem ouvir sua voz!! Carros X Telefones

AÇÃO

Paradoxo da TecnologiaParadoxo da TecnologiaA tecnologia oferece potencial para

tornar nossa vida mais simples e agradável, e cada nova tecnologia traz mais benefícios. E ao mesmo tempo adiciona tamanha complexidade que faz aumentar nossa dificuldade e frustação.

AÇÃO

Paradoxo da TecnologiaParadoxo da TecnologiaSempre que o número de funções excede

o número de controles, o design torna-se arbitrário e não natural, e complicado.

A mesma tecnologia que simplifica a vida provendo um maior número de funcionalidades em um objeto, também a complica tornando-a muito mais difícil aprender, e usar

AÇÃO

Ciclo de Vida da TecnologiaCiclo de Vida da Tecnologia InovadoresEntusiastasPragmáticosConservadoresCéticos

usuários

AÇÃO

USABILIDADE USABILIDADE DE SISTEMAS COMPUTACIONAISDE SISTEMAS COMPUTACIONAIS

S Nielsen explicita seus princípios de design a partir de alguns slogans, que ele define como slogans de usabilidade. A seguir apresentamos alguns deles:

AÇÃO

SlogansSlogans de Usabilidade de Usabilidade

• Sua melhor tentativa não é suficientemente boa

• O usuário sempre está certo• O usuário nem sempre está certo• Usuários não são designers• Designers não são usuários• Menos é mais (less is more)• Help doesn´t

AÇÃO

Sua melhor tentativa não é boa o suficiente

É impossível fazer o design de uma interface ótima simplesmente baseado emnossas melhores idéias.

AÇÃO

Usuário está sempre certo A atitude do designer quando verifica que o

usuário tem problemas de interação com um determinado aspecto da interface, não deve ser a de julgar que o usuário é ignorante ou então, que ele não tentou o suficiente ou ainda, deixar passar que um dia o usuário aprende.

AÇÃO

Usuário não está sempre certo Também não se deve ir ao extremo de

construir uma interface somente a partir do que os usuários gostariam. Usuários freqüentemente não sabem o que é bom para eles.

AÇÃO

Usuário não está sempre certo Também não se deve ir ao extremo de

construir uma interface somente a partir do que os usuários gostariam. Usuários freqüentemente não sabem o que é bom para eles.

AÇÃO

Usuários não são designers Uma solução simples para atender a diversidade de

usuários seria a de prover interfaces flexíveis que pudessem ser amplamente customizadas e aí cada usuário teria exatamente a interface que melhor lhe satisfizesse (análogo aos bancos de carros modernos mencionados anteriormente). Estudos demonstram que usuários novatos não customizam suas interfaces, mesmo quando essas facilidades estão disponíveis (Jorgensen e Sauer, 1990).

AÇÃO

Designers não são usuários Designers são humanos e certamente usam

computadores, mas são diferentes de usuários em diversos aspectos básicos: a experiência computacional e o conhecimento dos fundamentos conceituais do design do sistema.

AÇÃO

Menos é mais (less is more) Uma das frequentes soluções de design

que têm sido adotadas é colocar no sistema todas as opções e características imagináveis, pois se tudo está disponível então todos ficarão satisfeitos.

AÇÃO

Help não ajuda (help doesn´t) Muitas vezes, senão na maioria delas,

vemos usuários perdidos tentando encontrar informação na enorme quantidade de material de help que acompanha um sistema, e quando a encontra não consegue entendê-la.

AÇÃO

Definição de UsabilidadeDefinição de UsabilidadeAtributos de usabilidade◦facilidade de aprendizagem (learnability)◦eficiência◦facilidade de rememorar (memorability)◦erros : poucos e não catastróficos◦satisfação subjetiva

Como medir usabilidade ?

AÇÃO

Definição de UsabilidadeDefinição de Usabilidade

Facilidade de aprendizagem (learnability)

O sistema precisa ser fácil de aprender de forma que o usuário possa rapidamente começar a interagir. Segundo Nielsen, é o mais importante atributo de usabilidade, por ser a primeira experiência que qualquer usuário tem com um sistema.

AÇÃO

Eficiência O sistema precisa ser eficiente no uso, de

forma que uma vez aprendido o usuário tenha um elevado nível de produtividade. Portanto, eficiência refere-se a usuários experientes, após um certo tempo de uso.

AÇÃO

Facilidade de relembrar (memorability) O sistema precisa ser facilmente

relembrado, de forma que o usuário ao voltar a usá-lo depois de um certo tempo não tenha novamente que aprendê-lo.

AÇÃO

Erros Neste contexto, erro é definido como uma

ação que não leva ao resultado esperado, um "engano" portanto. O sistema precisa ter uma pequena taxa de erros, ou seja, o usuário não pode cometer muitos erros durante o seu uso e, em errando, deve ser fácil a recuperaração, sem perda de trabalho.

AÇÃO

Satisfação subjetiva Os usuários devem gostar do sistema, ou

seja, deve ser agrádável de forma que o usuário fique satisfeito ao usá-lo.

AÇÃO

Definição de UsabilidadeDefinição de UsabilidadeAtributos de usabilidade◦facilidade de aprendizagem (learnability)◦eficiência◦facilidade de rememorar (memorability)◦erros : poucos e não catastróficos◦satisfação subjetiva

Como medir usabilidade ?

AÇÃO

Medidas de Satisfação SubjetivaMedidas de Satisfação SubjetivaQuestionárioPor favor indique o grau com o qual você concorda ou não

com as seguintes afirmações sobre o sistema: É muito fácil aprender como se usa esse sistema Usar este sistema foi uma experiência muito frustante Eu sinto que esse sistema irá me permitir conseguir uma alta

produtividade Eu me preocupo que muitas das coisas que faço com esse sistema

podem estar erradas Este sistema pode fazer todas as coisas que eu poderia precisar É muito agradável trabalhar com esse sistema

AÇÃO

Medidas de Satisfação SubjetivaMedidas de Satisfação SubjetivaEscala semântica Diferencial

Por favor marque as posições que melhor refletem suas impressões sobre o sistema

◦Agradável ------- Irritante◦Completo ------- Incompleto◦Cooperativo ------- Não Cooperativo◦Simples ------- Complicado◦Rápido de Usar ------- Lento para usar◦Seguro ------- Inseguro

AÇÃO

Usabilidade de ÍconesUsabilidade de ÍconesD

Categorias de UsuáriosCategorias de Usuários e Diferenças Individuais e Diferenças Individuais

AÇÃO

WEBWEBem janeiro de 2000 - 10 milhões de sites ◦1,6 bilhão de páginas◦72 milhões de servidores◦275 milhões de usuários navegando◦a cada 24hs

3,3 milhões de novas páginas 123 000 novos usuários

dezembro de 2000 - 25 milhões de sitesprevisão para fim de 2002 - 100 milhões

de sites

AÇÃO

WEBWEB

em 1998 cerca de 3 bilhões de dólares deixaram de ser ganhos na WEB norte- americana por causa de designs mal feitos com a enorme oferta de alternativas usuários tem uma notável impaciência e insistência em gratificação imediata

AÇÃO

WEBWEB

usabilidade assume uma importância ímpar na economia da Internet:◦no design de produtos e de software

tradicionais, usuários pagam antes e experimentam a usabilidade depois

◦na WEB experimentam a usabilidade antes e pagam depois

AÇÃO

Usabilidade na WEB- Ex.: IBMUsabilidade na WEB- Ex.: IBMD

O caso IBMO caso IBM

recurso mais popular em seu site função de busca

as pessoas não conseguiam descobrir como navegar segundo recurso mais popular

◦ botão de ajuda. solução

amplo processo de redesign, envolvendo centenas de pessoas e milhões de dólares.

Resultado na primeira semana depois do redesign em fevereiro de 1999 o uso do botão de ajuda caiu 84% as vendas aumentaram 400%.

AÇÃO

Usabilidade na WEBUsabilidade na WEBClareza na arquitetura da informação◦essencial que o usuário consiga discernir o

que é prioritário e o que é secundário no site. Um bom arranjo da informação

◦usuários sempre terão dificuldades em encontrar o que procuram devem ser ajudados

prover um senso de como a informação está estruturada e localizada. uma das alternativas adotadas em alguns sites, é prover

um mapa do site

AÇÃO

Usabilidade na WEBUsabilidade na WEBFacilidade de navegação◦Uma máxima é que o usuário deveria

conseguir acessar a informação desejada no máximo em três cliques

Simplicidade◦Quem navega quer encontrar o mais

rapidamente possível o objetivo da busca. a pirotecnia deve ser evitada, dando ao usuário paz

e tranquilidade para que possa analisar a informação

AÇÃO

SimplicidadeSimplicidade

Onde estou ? O que este site faz ?

AÇÃO

SimplicidadeSimplicidadeD

Usabilidade na WEBUsabilidade na WEBA relevância do conteúdo◦Sempre que questionados sobre sites,

usuários se referem a qualidade e relevância do conteúdo

◦Um bom texto para essa mídia o mais conciso e objetivo possível não promocional ou publicitário leitores online imprimem textos

necessitam páginas bem curtas informação secundária deixada para páginas de suporte

AÇÃO

Usabilidade na WEBUsabilidade na WEBManter a consistência◦Quando as coisas acontecem sempre do

mesmo jeito, os usuários não precisam se preocupar a respeito do que irá acontecer

◦um Website deve ser gerenciado como um projeto único de interface com o usuário

AÇÃO

Usabilidade na WEBUsabilidade na WEBTempo suportável◦tempo de carga das páginas deve ser curto◦10 segundos é o máximo de tempo antes que as

pessoas percam o interesse na Web os usuários já têm uma baixa

expectativa limite pode aumentar para 15 segundos

Foco nos usuários◦ 'sair do caminho' para que o usuário possa fazer o que quer da

maneira mais rápida possível.

AÇÃO

Usabilidade na WEB - resumoUsabilidade na WEB - resumoClareza na arquitetura da informaçãoFacilidade de navegaçãoSimplicidadeA relevância do conteúdoManter a consistênciaTempo suportávelFoco nos usuários

AÇÃO

Amazon (1995) Amazon (1995) D

Amazon (2000)Amazon (2000)D

UOL 1995UOL 1995

A Folha Web, site da Folha de S. Paulo, no

ar em 1995, trazia reportagens

selecionadas do jornal impresso e a charge

do dia

AÇÃO

UOL FuturoUOL Futuro

Barra de navegação principal

verticalizada à

esquerda

Barra superior de ajuste do

navegador

Nomes das estações no

miolo da página

Um dos estudos para a homepage do futuroUniverso Online, ainda com o nome de trabalhopara preservar o sigilo

AÇÃO

UOL – 28.04.1996UOL – 28.04.1996D

UOL - agosto de 1996UOL - agosto de 1996D

UOL ( junção com Abril)UOL ( junção com Abril)

Em dezembro de 1996, a home page ficoumais quente: foi aberto espaço para imagens

AÇÃO

UOL – 04.1999UOL – 04.1999

No aniversário de 3 anos do UOL, em abril de 1999, a

home page do UOL mudou para espelhar o crescimento

do site. Os assinantes votaram e ajudaram a escolher a nova

cara do UOL

AÇÃO

UOL - 1999UOL - 1999

Em outubro de 1999, entra no ar a nova home com a cor escolhida pelo público.

AÇÃO

UOL 2002UOL 2002D

USP 2002USP 2002D

UNICAMP - 2002UNICAMP - 2002D

INTERFACES INTERNACIONAISINTERFACES INTERNACIONAIS

Exportar software é vital para qualquer indústria produtora de software. Interfaces internacionais são aquelas projetadas para serem usadas em mais de um país. Fato mais que definitivo é que não basta um produto traduzido em muitas outras línguas.

AÇÃO

Fazer o design de uma interface internacional pode ou não envolver tradução de linguagem, mas certamente deve envolver conhecimento sobre as necessidades e cultura de outros países.

AÇÃO

Usuários desejam um produto que seja adequado às suas características culturais e práticas de trabalho e, algumas vezes, isso não implica necessariamente em uma tradução. Equipes de design de software têm então pela frente o desafio de garantir a usabilidade de seus produtos para todo o mercado global.

AÇÃO

Do ponto de vista dos usuários, temos que bem mais da metade de usuários de software usam atualmente interfaces cujo design foi feito em um país estrangeiro. Usabilidade para esse grande número de usuários irá depender da maior consciência da necessidade de se ter design direcionado à internacionalização (Nielsen, 1993).

AÇÃO

Internacionalização e Localização

AÇÃO

Podemos classificar os símbolos gráficos em três categorias distintas (Rogers, 1989):

Símbolos de semelhança ou íconesretratam o objeto que representam. Por

exemplo, a figura de uma impressora para indicar a função imprimir, a de uma tesoura para a cortar, etc.

AÇÃO

Símbolos de referênciaretratam algum objeto que por referência

ou analogia pode representar o conceito que o símbolo está querendo representar.

AÇÃO

Símbolos arbitráriosformas arbitrárias que somente tem

significado por convenção. Por exemplo, todos os sinais de trânsito (que têm sido fonte de inspiração para muitos designers dada a sua característica de padrão internacional).

AÇÃO

Símbolos arbitráriosformas arbitrárias que somente tem

significado por convenção. Por exemplo, todos os sinais de trânsito (que têm sido fonte de inspiração para muitos designers dada a sua característica de padrão internacional).

AÇÃO

slides baseados no livro: design e avaliação de interfaces humano computador

Documents

interfaces homem-computador: uma primeira introdu cão relat

interface humano- computador (ihc) · design e avaliação...

ihc – interfaces homem computador

estudo da evolução das interfaces homem-computador

paradigmas da comunicaÇÃo humano-computador e o design de...

leitura complementar 05 - homem computador e interfaces

interfaz cerebro-computador multimodal para procesos de...

interfaces cérebro-computador - utilização do emotiv epoc...

avaliaÇÃo ergonÔmica de interfaces da scielo – … ·...

interação humano computador - as interfaces

slides baseados no livro: design de interaÇÃo além da...

fernanda clara carvalho pinto - bibliotecadigital.ipb.pt...

apostila engenharia de software 1 - … · primeiros anos,...

presentación computación básica (interacción humano...

centro federal de educaÇÃo tecnolÓgica do...

a interação humano-computador · 03/07/2017 1 interfaces...

interação homem-computador - interfaces naturais

tópicos em sistemas distribuídos -...

slides baseados no livro: design e avaliação de interfaces...

interfaces conversacionais interação humano-computador...