design e usabilidade em ihc -...

37
EPOCA 2009 Jair C Leite ERBASE 2010 - Design e usabilidade em IHC Design e usabilidade em IHC Jair C Leite Departamento de Informática e Matemática Aplicada Universidade Federal do Rio Grande do Norte [email protected]

Upload: lyduong

Post on 17-Nov-2018

217 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Design e usabilidade em IHC

Jair C LeiteDepartamento de Informática e Matemática Aplicada

Universidade Federal do Rio Grande do [email protected]

Page 2: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Roteiro

• Introdução ao design de IHC– Interatividade: história e evolução– A disciplina de IHC

• Teoria de IHC– Engenharia Semiótica

• Processo de design de IHC– A atividade de design– Modelos e protótipo– Análise de usuários e cenários

• Design da comunicação de IHC– Arquitetura da interface e layout– Design da interação (diálogo)– Visualização da informação

• Avaliação de IHC– O que, quando, como, onde e com quem avaliar– Métodos e técnicas de avaliação

Page 3: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Interatividade com computadores:

história e evolução

Page 4: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Evolução das interfaces de usuário

• 50s – Interfaces são painel de controles do hardware – usuário são engenheiros

• 60-70s – Interfaces são programas em linguagenscomo COBOL, FORTRAN

• 70-80s – Primeiros aplicativos e linguagens de comandos

• 80s – Interfaces gráficas com aplicativos• 90s – Interfaces multimídia e interfaces Web• 00s - Interface tornam-se ubíquas – estão em todo

lugar e em dispositivos móveis.

Page 5: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Interfaces como painel de controle

Page 6: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Cartões perfurados

• As instruçõesfornecidas em cartõesperfurados (Holleritt)

• Cada programa (JOB) era entregue no CPD para ser processado.

• Resultados do programa em relatóriosimpressos.

Page 7: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Popularização dos computadores

• Com os micro-processadores, os usuáriospoderiam ter computadoresem casa para programar e se divertir

• Computadores ligados emtelevisores

• Linguagem BASIC empermitia construção de programas simples e faziatarefas do S.O.

• Interpretador em ROM• Programa armazenados em

fitas K7

Apple I

TK2000

Page 8: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Interagindo em BASIC

• A forma primária de interação éprogramando emBASIC.

• Pode-se construirprogramas com entradae saída através de teclado e tela, respectivamente– “INPUT var”– “PRINT var”

Fontes:

Page 9: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

As interfaces gráficas

• Placas gráficas de alta resoluçãoe monocromáticas– Bit-mapped display

• Conceitos e Princípios– Metáfora de “desktop”

• Objetos representados porícones, armazenados em pastas e visualizados em janelas

– Manipulação direta• Objetos tem propriedades e

podem sofre ações

– Estilo WIMP • Windows, Icons, Menus, Pointer

– WYSIWYG - “What You See Is What You Get”

– Comandos gerais• Move, copy, delete

Apple Macintosh, 1984

Xerox Star, 1981

Page 10: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Primeiras interfaces gráficas

Macintosh, 1984

Xerox Star, 1981

Page 11: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Diversidade: Desktops, Laptops,

Palmtops…

Page 12: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Toque na tela

• Interação com toque na tela– Selecionar– Arrastar– Teclado virtual

• Estilos– Hierarquia de menus– Manipulação direta

• Botão hardware único para voltar à tela inicial (home)

Page 13: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Hands-On Computing

Page 14: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Roomware

Page 15: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Realidade aumentada

• Combinação de imagens captadas por câmeras e sintetizadas por computação

Page 16: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Ipad: foco na interatividade

“iPad creates and defines an entirely new category of devices that will connect users with their apps and content in a much more intimate, intuitive and fun way than ever before.” (Steve Jobs, Jan 2010)

“iPad creates and defines an entirely new category of devices that will connect users with their apps and content in a much more intimate, intuitive and fun way than ever before.” (Steve Jobs, Jan 2010)

“The precise Multi-Touch interface makes surfing the web on iPad an entirely new experience, dramatically more interactive and intimate than on a computer”

“The precise Multi-Touch interface makes surfing the web on iPad an entirely new experience, dramatically more interactive and intimate than on a computer”

Page 17: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Desafios

• As pessoas dependem cada vez mais de serviços computacionais– Sistemas bancários

• Uso incorreto pode levar a prejuízos financeiros

– Sistemas corporativos• Uso intensivo e obrigatório

– Sistemas governamentais• O que deveria ser um direito não pode ser uma

dificuldade

Profissionais de computação não tem formaçãoadequada para lidar com os fatores humanos dos sistemas computacionais

Page 18: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Interagindo com um sistema bancário

• O sistema bancário oferece vários serviços para os clientes

• Ao utilizar com um caixa, estamos interagindo com um sistema computacional

• Questões– As pessoas sabem como

utilizar?– As pessoas conseguem

fazer o que querem?– As pessoas estão

satisfeitas?

• O design de IHC é a atividade de melhorar a qualidade na utilizaçãodos sistemascomputacionais.

Page 19: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

IHC e a diversidade de usuários

• O design de IHC deveconsiderar que um sistema deve estaradequado aos seususuários

• Sistemas podem ser utilizados por umagrande diversidades de usuários.

Page 20: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Interagindo com um sistema

corporativo• SIGAA: Sistemas de controle acadêmico da UFRN• Apoio a diversas atividades acadêmicas

– Matricula on-line– Registro de falta e notas– Programa do curso– Foruns e enquetes– Distribuição de material do curso

• Professores, alunos e funcionários são obrigados a usar no dia-a-dia

• Desenvolvido pela equipe da UFRN– Ex-alunos, estagiários

Page 21: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Preciso consultar informações

sobre a disciplina de Sistemas Distribuídos...

Page 22: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Vou procurar nos menus...Turmas?

Consulta Turmas?Consulta Cursos?

Page 23: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Eu precisofornecer todos

estes dados parafazer a busca?Eu não sei o

código, o tipo …Por que o check-

box?

Page 24: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Nossa! E agora?O que devo fazer?

Page 25: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

A disciplina de IHC

Page 26: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Interação Humano-Computador

• “Disciplina ou campo de estudo interessada no design, implementação e avaliação de sistemas computacionais interativos para uso humano.”

• e “estudo dos fenômenos associados ao uso humano de sistemas computacionais interativos.”

• (ACM SIGCHI, 1992)

Page 27: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Interface de Usuário

• Conjunto de artefatos de software e hardware para a interação usuário-sistema.

• Parte do sistema com a qual o usuário entra em contato físico, perceptivo e cognitivo [Moran 83]

• Mensagem do designer para o usuário [de Souza 93]

Page 28: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Níveis em Sistemas Computacionais

Nível do computador

Nível do usuário Nível social e organizacional

Interação Humano-Computador

Usuário

Sistema Computacional

Contexto social e organizacional

Page 29: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Focus de interesse em IHC

Instrumentaçãoteórica e prática parao processo deDesign e Desenvolvimentoda aplicação

Instrumentaçãoteórica e prática parao processo deDesign e Desenvolvimentoda aplicação

Modelos do processo de Interaçãosistema-usuário

Modelos do processo de Interaçãosistema-usuário

Estudo das capacidades e limitações

físicas e cognitivas dos usuários

Estudo das capacidades e limitações

físicas e cognitivas dos usuários

Design e desenvolvimentodo hardware e software que implementam a funcionalidade

e o modelo de interação.

Design e desenvolvimentodo hardware e software que implementam a funcionalidade

e o modelo de interação.

Usuário

Sistema Computacional

Análise do domínio e de aspectos sociaise organizacionais queinfluenciam e motivama utilização do sistema

Análise do domínio e de aspectos sociaise organizacionais queinfluenciam e motivama utilização do sistema

Designer

Page 30: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Conhecimento e Habilidades dos

Especialistas em IHCTeorias,Métodos,

Técnicas eFerramentas

deDesign de IHC

Disciplinas associadas à IHC

InteligênciaArtificial

Lingüística

Sociologia

Antropologia

Design

Engenharia

Ergonomia e Fatores

Humanos

PsicologiaSocial e

OrganizacionalPsicologiaCognitiva

Ciência da computação

Semiótica

Filosofia

Page 31: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Ergonomia e Fatores Humanos

• Disciplina interessada no design de produtos e processos de trabalho em conformidade com as necessidades e o bem estar dos seres humanos.

• Ergonomia – termo utilizado na Europa e Brasil

• Fatores Humanos – termo utilizado nos EUA

• Ergonomia cognitiva tem objetivos semelhantes àIHC

Page 32: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Design de IHC

• Design = desenho, projeto ou concepção • Atividade de conceber (ou desenhar),

prototipar, construir e avaliar:– A interface de usuário do sistema– A interação usuário-sistema– A experiência do usuário

• Apoiada pelas disciplinas que contribuem para IHC.

• Realizada por uma equipe de especialistas em diversas disciplinas de IHC

Page 33: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Contexto social e organizacional

Pesquisa em IHC

IHC

Conhecimento sobre IHC: Princípios, diretrizes, padrões, normas, modelos e teorias.

Conhecimento sobre IHC: Princípios, diretrizes, padrões, normas, modelos e teorias.

Pesquisador

Designer

Page 34: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Usabilidade – Normas ISO 9126

• Norma ISO 9126– Inteligibilidade:

• É fácil entender os conceitos utilizados?

– Apreensibilidade: • É fácil aprender a usar?

– Operacionabilidade: • É fácil operar e controlar a operação?

Page 35: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Normas ISO 9241-11

• Definição de usabilidade:– Qualidade de um produto de poder ser utilizado por usuários específicos

para atingir determinadas metas com eficiência, eficácia e satisfação num contexto de uso específico.

• Eficácia– Precisão e completeza com que os usuários atingem os seus

objetivos • Obter uma informação correta, entrar dados corretamente

• Eficiência– Recursos fornecidos para se atingir uma meta com precisão e

completeza• Encontrar rapidamente uma informação correta sem ter que fornecer

muita informação

• Satisfação• Conforto e aceitabilidade do produto

• Contexto de Uso• Usuários, tarefas, equipamentos e ambiente físico e social

Page 36: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Problemas com usabilidade

• Alto custo com treinamento• Baixa produtividade

• Alto índice de erros cometidos• Dificuldades de entendimento

• Desmotivação para explorar• Insatisfação• Custo do sistema não gera os benefícios

esperados

Page 37: Design e usabilidade em IHC - dimap.ufrn.brdimap.ufrn.br/~jair/ERBASE2010/ERBASE2010-introducao.pdf · – Interatividade: história e evolução – A disciplina de IHC • Teoria

EPOCA 2009 Jair C LeiteERBASE 2010 - Design e usabilidade em IHC

Resumo

• IHC é a disciplina voltada para:– O entendimento dos fenômenos de interação– A melhoria da usabilidade– A melhoria da prática de design e

desenvolvimento

• IHC utiliza conhecimento de diversasdisciplinas

• IHC visa oferecer:– Teorias e métodos de investigação (ciência)– Métodos e técnicas de design, desenvolvimento e

avaliação (prática)