Interface Humano Máquina <ul><li>Curso de Computação </li></ul><ul><li>Universidade Federal do Ceará </li></ul><ul><li>Pro...
Slide
<ul><li>“ O  design  pode ser a diferença entre  prazer   e  frustração . </li></ul><ul><li>Os mesmos princípios usados no...
Sumário <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da  Interface </li></ul><ul><li>3. Sistema de Janelas </li></ul...
Objetivos <ul><ul><li>Ao final desta disciplina, os alunos deverão </li></ul></ul><ul><ul><ul><li>Entender os problemas e ...
1. Introdução Slide  <ul><li>interface : substantivo feminino </li></ul><ul><ul><li>dispositivo de ligação entre sistemas;...
1. Introdução Slide  <ul><li>usabilidade : substantivo feminino </li></ul><ul><ul><li>Facilidade de usar ferramenta ou obj...
1. Introdução Slide  <ul><ul><li>O que é Interface  Humano-Computador  (Human-Computer Interface)? </li></ul></ul><ul><ul>...
1. Introdução <ul><ul><li>IHC envolve </li></ul></ul><ul><ul><ul><li>Psicologia </li></ul></ul></ul><ul><ul><ul><li>Comput...
1. Introdução <ul><ul><li>Os humanos são bons em </li></ul></ul><ul><ul><ul><li>Reconhecimento (de imagens, de vozes etc) ...
1.1 A  Interface <ul><ul><li>Há  interfaces  em todo canto </li></ul></ul><ul><ul><ul><li>No carro </li></ul></ul></ul><ul...
1.1.1 Tipos de  Interface <ul><ul><li>Em  batch  (1940s) </li></ul></ul><ul><ul><ul><li>Cartões perfurados </li></ul></ul>...
1.1.1 Tipos de  Interface <ul><ul><li>Web (1990s) </li></ul></ul><ul><ul><ul><li>HTML </li></ul></ul></ul><ul><ul><ul><li>...
<ul><li>Xfdrake -  TUI do Mandriva Linux para configurar o monitor </li></ul>
1.1.2 A Boa  Interface <ul><ul><li>Uma boa  interface  deve lidar com </li></ul></ul><ul><ul><ul><li>Expectativas </li></u...
1.1.2 A Boa  Interface <ul><ul><ul><li>Padronização </li></ul></ul></ul><ul><ul><ul><ul><li>Todos os relógios andando no s...
1.2 Prototipagem <ul><ul><li>Motivação </li></ul></ul><ul><ul><ul><li>Mais barata, mais rápida </li></ul></ul></ul><ul><ul...
1.2 Prototipagem <ul><ul><li>Técnicas </li></ul></ul><ul><ul><ul><li>Programa funcional </li></ul></ul></ul><ul><ul><ul><u...
1.2 Prototipagem <ul><li>Horizontal </li></ul><ul><ul><ul><li>Todos os componentes </li></ul></ul></ul><ul><ul><ul><li>Fun...
1.2.1 Exercício <ul><ul><li>Usando qualquer técnica, projete uma  interface  para uma das aplicações abaixo. Use abas,  wi...
1.3 Histórico Slide  <ul><ul><ul><li>A History of the GUI  (Jeremy Reimer) </li></ul></ul></ul><ul><ul><ul><li>http://arst...
Slide  <ul><ul><ul><li>1968 – Douglas Engelbart – NLS </li></ul></ul></ul><ul><ul><ul><ul><li>oN-Line System </li></ul></u...
Slide  Teclado e  mouse  do NLS
Slide  Engelbart inventou o ponteiro do  mouse  ( bug )
Slide  Xerox Palo e GUI com Smalltalk, ícones e títulos de janelas por US$ 17,000+
Slide  1983 Apple Lisa: ícones de arquivos, arrastar-e-soltar por US$ 10.000! (Macintosh, 1984, US$ 2,495)
Slide  1983 Microsoft Interface Manager
Slide  1983 Microsoft Windows 1.01
Slide  1987 Microsoft Windows 2
Slide  1995 Microsoft Windows 95
Slide
Slide  1997 KDE 1 – Linux e BSD
Slide  Mac OS X e a GUI Aqua
Slide
1.4 Motivação Slide  <ul><li>Um bom  design  traz </li></ul><ul><ul><li>Satisfação dos clientes = $$$ </li></ul></ul><ul><...
1.5 Uso da  Interface Slide  <ul><li>A  interface  faz a mediação entre  </li></ul><ul><li>humanos </li></ul><ul><ul><li>J...
1.6 Humanos <ul><li>operador(a) </li></ul><ul><ul><li>Executa o sistema final </li></ul></ul><ul><li>projetista de sistema...
1.6 Humanos <ul><li>Usuário  Iniciante </li></ul><ul><ul><li>O que este produto faz? Como começo? </li></ul></ul><ul><li>U...
1.7 Regras Schneiderman <ul><li>1.  Consistência </li></ul><ul><ul><li>Cores, leiaute, maiúsculas, fontes, terminologia </...
<ul><li>3.  Feedback </li></ul><ul><ul><li>Resposta a cada ação dos usuários </li></ul></ul><ul><ul><li>Mau exemplo: digit...
<ul><li>5.  Tratamento de erro </li></ul><ul><ul><li>Mau exemplo: ?snt err </li></ul></ul><ul><ul><li>Bom exemplo: sair se...
<ul><li>7.  Controle </li></ul><ul><ul><li>Usuários como iniciadores das ações </li></ul></ul><ul><ul><li>Mau exemplo: mai...
<ul><li>Princípios Básicos </li></ul><ul><ul><li>Agrupamento </li></ul></ul><ul><ul><ul><li>aproxime itens relacionados </...
<ul><ul><li>Repetição </li></ul></ul><ul><ul><ul><li>De cor, forma, textura, espessura, tamanho &c </li></ul></ul></ul><ul...
Onde Estamos... <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da  Interface </li></ul><ul><li>3. Sistema de Janelas <...
2.1 Ciclo de Vida <ul><ul><li>Concepção </li></ul></ul><ul><ul><li>Definição dos requerimentos </li></ul></ul><ul><ul><li>...
2.2 Estado do Sistema <ul><li>Estado atual do sistema deve ser  clara e explicitamente indicado </li></ul><ul><ul><li>O si...
2.2 Estado do Sistema Slide  2.2 Estado do Sistema Slide
2.2.1 Erros <ul><li>Mostre os erros imediatamente </li></ul><ul><ul><ul><li>Mensagens inteligíveis </li></ul></ul></ul><ul...
2.2.1 Erros <ul><li>Projete para evitar erros </li></ul><ul><ul><ul><li>Simule possíveis erros </li></ul></ul></ul><ul><ul...
2.2.1.1 Evitando erros <ul><li>Funções de força </li></ul><ul><li>Interlock   (conecta dois eventos) </li></ul><ul><ul><ul...
2.2.2 Modo Corrente <ul><li>Modo: mesma entrada traz resultado diferente, dependendo do estado do sistema </li></ul><ul><u...
2.2.3 Tempo de Resposta Longo Slide  <ul><li>Muda a expectativa do(a) operador(a) </li></ul><ul><ul><ul><li>Busca </li></u...
2.2.4 Exemplos <ul><ul><li>This operation may take some time. Please wait. </li></ul></ul><ul><ul><li>Comando  scp  ( secu...
Onde Estamos... Slide  <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da  Interface </li></ul><ul><li>3. Sistema de Ja...
3 Sistema de Janelas Slide  <ul><li>Funções básicas </li></ul><ul><ul><li>Definir terminal abstrato </li></ul></ul><ul><ul...
3.1 Eventos <ul><li>Eventos de um sistema de janelas </li></ul><ul><ul><li>Do teclado </li></ul></ul><ul><ul><ul><li>Siste...
<ul><li>Exemplo: uso do  mouse </li></ul><ul><ul><li>O  mouse  é movimentado </li></ul></ul><ul><ul><ul><li>O  driver  do ...
3.2 Recursos <ul><li>Recursos gerenciados por um SJ </li></ul><ul><ul><li>Fontes </li></ul></ul><ul><ul><li>Mouse </li></u...
3.3 Fontes Slide  <ul><li>Classificação: </li></ul><ul><li>a) Tipo... </li></ul><ul><li>de texto </li></ul><ul><ul><li>Usa...
3.3 Fontes Slide  <ul><li>de apresentação </li></ul><ul><ul><li>Títulos, cabeçalhos, anúncios, logomarcas etc </li></ul></...
3.3 Fontes Slide  <ul><li>para escrita  (cursivas,  script ) </li></ul><ul><ul><li>Modelam caligrafia </li></ul></ul><ul><...
3.3 Fontes Slide  <ul><li>b) Espaçamento </li></ul><ul><li>Monoespaçadas </li></ul><ul><ul><li>Mesmo largura para todos os...
3.3.1 Courier Slide  <ul><li>Para máquina de escrever </li></ul><ul><li>Projetada em 1952 por Howard Kessler da IBM </li><...
3.3.1 Courier Slide  <ul><ul><li><TITLE>Primeiro Trabalho - 2001.1 </TITLE> </li></ul></ul><ul><ul><li><BODY  TEXT=#6B238E...
3.3.2 Times Slide  <ul><li>Projetada em 1931 por Stanley Morrison  para o jornal Times de Londres </li></ul><ul><li>Planej...
3.3.2 Times Slide  <ul><li>Para blocos de textos largos, prefira: </li></ul><ul><ul><li>Century Old Style  (1906) </li></u...
3.3.3 Helvetica Slide  <ul><li>Projetada em 1957 por Max Miedinger para a </li></ul><ul><li>Fundação suíça de Tipos Haas c...
3.3.3 Helvetica Slide  <ul><li>Fontes sem serifa: </li></ul><ul><ul><li>Avant Garde (1970)  tem círculos e triângulos perf...
3.3.3 Helvetica Slide  <ul><li>Tabela de Preços   </li></ul><ul><li>(por Kg) </li></ul><ul><li>Mamão  0,25 Banana  0,40 </...
3.3.4  Script Slide  <ul><li>Imitam caligrafia humana </li></ul><ul><li>Exigem mais espaço por letra </li></ul><ul><li>Let...
3.3.4  Script Slide  <ul><li>Fontes cursivas: </li></ul><ul><ul><li>Este texto está escrito em ARIOSO </li></ul></ul><ul><...
3.3.4  Script Slide  <ul><ul><li>CONVITE </li></ul></ul><ul><ul><li>A Faculdade Integrada de Tianguá tem a Honra </li></ul...
3.3.5 Símbolo Slide  <ul><li>Fontes compostas de: </li></ul><ul><ul><li>Símbolos da Matemática </li></ul></ul><ul><ul><li>...
3.3.5 Símbolo Slide  <ul><li>Fontes de símbolos: </li></ul><ul><ul><li>Symbol </li></ul></ul><ul><ul><li>Dingbats </li></u...
3.3.5 Símbolo Slide  Symbol:  Starbats: ➎➏➐➑➒➓➀➁➂➃➇➈➉☎   »❑ Starmath: ⊆⊇⊄⊅⊈⊉∈∉∃...
3.3.6 Bom Uso de Fontes Slide  <ul><ul><li>Fonte serifada? </li></ul></ul><ul><ul><ul><li>não serifada  em título de janel...
3.3.6 Bom Uso de Fontes Slide  <ul><ul><li>Fontes sublinhadas podem confundir-se com  links </li></ul></ul><ul><ul><li>Não...
3.3.6 Bom Uso de Fontes <ul><ul><li>Letra em  vídeo reverso   chama a atenção </li></ul></ul><ul><ul><li>NÃO USE LETRAS MA...
3.3.6 Bom Uso de Fontes <ul><li>Opte por fontes conhecidas </li></ul><ul><ul><ul><li>Times </li></ul></ul></ul><ul><ul><ul...
3.4 A Janela  <ul><li>Janela </li></ul><ul><ul><li>Porção da tela que serve como terminal abstrato de um processo </li></u...
3.4.1 Componentes  Slide  Cabeçalho Menu Título da aplicação Rodapé Estado do sistema e progresso Vidraça Barra de rolagem...
Slide  3.4.2 Decorações do KDE2 <ul><li>ModStep </li></ul><ul><li>KStep </li></ul><ul><li>Risc OS </li></ul><ul><li>Window...
3.5 Múltiplas Janelas <ul><li>Posicionamento </li></ul><ul><ul><li>Em geral, há superposição </li></ul></ul><ul><ul><li>Im...
3.5 Múltiplas Janelas <ul><li>Troca de dados entre janelas </li></ul><ul><ul><li>Utiliza protocolo </li></ul></ul><ul><ul>...
3.5 Múltiplas Janelas <ul><li>Foco (escolha da janela ativa) </li></ul><ul><ul><li>Tipos   </li></ul></ul><ul><ul><ul><li>...
Onde Estamos... <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da  Interface </li></ul><ul><li>3. Sistema de Janelas <...
Slide  <ul><li>Visicalc </li></ul>
4.1 Características <ul><li>Uma boa GUI deve ser... </li></ul><ul><ul><li>Previsível </li></ul></ul><ul><ul><ul><li>Compor...
4.1 Características <ul><li>Fácil de ler </li></ul><ul><ul><ul><li>Evite jargões, fontes estranhas </li></ul></ul></ul><ul...
4.1 Características <ul><ul><li>Independente do dispositivo </li></ul></ul><ul><ul><ul><li>Tipo e resolução do monitor </l...
4.1 Características <ul><li>Uma boa GUI deve ainda ter... </li></ul><ul><ul><li>Multi-formato </li></ul></ul><ul><ul><ul><...
4.1 Características Slide  Qual o problema aqui?
4.2 Exemplos Slide  E qual o problema aqui?
4.3 Entrada de Dados <ul><ul><li>Pelo  mouse </li></ul></ul><ul><ul><ul><li>Propósitos: apontar, selecionar e entrar dados...
4.3 Entrada de Dados <ul><ul><li>Outros dispositivos </li></ul></ul><ul><ul><ul><li>Touchscreens </li></ul></ul></ul><ul><...
4.3 Entrada de Dados <ul><ul><ul><li>Joysticks </li></ul></ul></ul><ul><ul><ul><ul><li>Movimento e aceleração </li></ul></...
4.3 Entrada de Dados <ul><ul><li>Por que nunca desconsiderar o teclado... </li></ul></ul><ul><ul><ul><li>Nem todos têm  mo...
4.3.1 Teclados <ul><ul><li>Qwerty  ou  Sholes  (1870s) </li></ul></ul><ul><ul><ul><li>Detalhes </li></ul></ul></ul><ul><ul...
4.3.1 Teclados <ul><ul><li>Dvorak  (1932) </li></ul></ul><ul><ul><ul><li>Detalhes </li></ul></ul></ul><ul><ul><ul><ul><li>...
<ul><ul><li>Chord </li></ul></ul><ul><ul><ul><li>Detalhes </li></ul></ul></ul><ul><ul><ul><ul><li>Várias teclas pressionad...
4.3.2 BatChord Slide  http://www.nanopac.com/keyboard.htm
4.3.3 Mouseburger Slide  http://www.unipac-usa.com/info.html
4.3.4 Teclado DVORAK Slide
4.3.4 Teclado DVORAK Slide  http://www.mwbrooks.com/dvorak/layout.html
4.4 Cores <ul><ul><li>Use poucas cores </li></ul></ul><ul><ul><ul><li>Ainda há monitores que usam 16 cores </li></ul></ul>...
4.4.1  Web-safe Colors <ul><ul><li>256 ou 16 milhões de cores? </li></ul></ul><ul><ul><ul><li>Muitos monitores ainda usam ...
4.4.2 Bom Uso <ul><ul><li>Para mostrar andamento (progresso) </li></ul></ul><ul><ul><ul><li>Não use espectro de cores </li...
4.4.3 Aspectos Psicológicos <ul><ul><li>As cores provocam reações diferentes </li></ul></ul><ul><ul><ul><li>Cores quentes ...
4.4.4 Daltonismo <ul><ul><li>Tipos </li></ul></ul><ul><ul><ul><li>Tricromasia  – enxerga 3 cores mas trocadas </li></ul></...
4.4.4.1 Teste de Daltonismo Slide
Slide  4.4.4.2 Como Protanópicos vêem
Slide  4.4.4.2 Como Protanópicos vêem
4.4.4.3  Design Slide  <ul><ul><li>Dicas </li></ul></ul><ul><ul><ul><li>Não dependa somente das cores </li></ul></ul></ul>...
Slide
Slide
4.5 Elementos <ul><li>São partes de uma GUI </li></ul><ul><ul><li>Menus </li></ul></ul><ul><ul><li>Caixas de Diálogo </li>...
4.5.1 Menus <ul><li>Tipos </li></ul><ul><ul><li>Menus da barra de menus  ( Drop-down ) </li></ul></ul><ul><ul><ul><li>Divi...
4.5.1 Menus <ul><li>Tipos </li></ul><ul><ul><li>Menus  Pop-up </li></ul></ul><ul><ul><ul><li>Menus flutuantes não permanen...
4.5.1.1 Exemplo Slide  Barra de Menus Indicador de caixa de diálogo Divisão Atalho Opção desativada Menu em  cascata Opção...
4.5.1.2 Menu Destacável Slide  Pop-up Menu Destaque Menu Destacado
Slide  4.5.2 Caixas de Diálogo <ul><ul><li>Janelas de tamanho fixo com  controles </li></ul></ul><ul><ul><li>Modalidade </...
Slide  4.5.2 Caixas de Diálogo <ul><ul><li>Modalidade </li></ul></ul><ul><ul><ul><li>Modal de Sistema </li></ul></ul></ul>...
4.5.2 Caixas de Diálogo Slide
4.5.2 Caixas de Diálogo <ul><ul><li>Mobilidade </li></ul></ul><ul><ul><ul><li>Fixa </li></ul></ul></ul><ul><ul><ul><ul><li...
4.6 Botões <ul><ul><li>Uso de botões </li></ul></ul><ul><ul><ul><li>Agrupados </li></ul></ul></ul><ul><ul><ul><li>Arranjad...
4.6 Botões <ul><ul><li>Tipos de botões </li></ul></ul><ul><ul><ul><li>de Comando - caixa retangular com título </li></ul><...
4.6 Botões <ul><ul><li>Tipos de botões </li></ul></ul><ul><ul><ul><li>De Opção - seleção de valor(es) </li></ul></ul></ul>...
4.6 Botões Slide
4.6.1 Exemplos Slide
4.7 Cuidados Especiais Slide  <ul><ul><li>Operadores com pequena deficiência visual  </li></ul></ul><ul><ul><ul><li>Não é ...
4.7 Cuidados Especiais <ul><ul><li>Operadores com deficiência visual  </li></ul></ul><ul><ul><ul><li>Use imagens com moder...
Onde Estamos... Slide  <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da  Interface </li></ul><ul><li>3. Sistema de Ja...
5. Testes de Usabilidade Slide  <ul><ul><li>Experimentos que buscam avaliar: </li></ul></ul><ul><ul><ul><li>o uso de uma  ...
5. Testes de Usabilidade Slide  <ul><ul><li>Defina a informação desejada e como obtê-la </li></ul></ul><ul><ul><li>Projete...
5.1 Exercício Slide  <ul><ul><li>Você irá usar vários programas para realizar a mesma tarefa </li></ul></ul><ul><ul><li>To...
5.1 Exercício Slide  <ul><ul><li>Você vai precisar de </li></ul></ul><ul><ul><ul><li>Caneta </li></ul></ul></ul><ul><ul><u...
5.1 Exercício Slide  <ul><ul><li>Monte os dados obtidos no experimento numa tabela </li></ul></ul><ul><ul><li>Responda: ❏ ...
5.2 Questionário Slide  <ul><ul><li>Adaptado de Maitland, G.  &quot; The Art of Color and Design &quot; </li></ul></ul><ul...
5.3.1 Questão 1 Slide
5.3.2 Questão 2 Slide
5.3.3 Questão 3 Slide
5.3.4 Questão 4 Slide
5.3.5 Questão 5 Slide
5.3.6 Questão 6 Slide
5.3.7 Questão 7 Slide
5.3.8 Questão 8 Slide
5.3.9 Questão 9 Slide
5.3.10 Questão 10 Slide
5.4 Observação Slide
Onde Estamos... Slide  <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da  Interface </li></ul><ul><li>3. Sistema de Ja...
6. Exemplos de Mau  Design <ul><li>Fontes: </li></ul><ul><ul><ul><li>www.angelfire.com/super/badwebs/ </li></ul></ul></ul>...
6.1 HTML Validator v3.05  Slide
6.2 HTML Validator v4 Slide
6.3 HTML Validator - Solução Slide
6.4 MS Outlook Slide
6.4 FTP Control 3.3.3 Slide
6.5 Yes ou No? Slide
6.6 Usuários Estúpidos? Slide
6.7 Adobe GoLive Slide
6.8 Mozilla Slide
6.9 Lyceum Slide  <ul><li>Que ícone serve para quê? </li></ul>
Onde Estamos... Slide  <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da  Interface </li></ul><ul><li>3. Sistema de Ja...
7. Conclusão Slide  <ul><ul><li>Palavras-chave </li></ul></ul><ul><ul><li>Feedback </li></ul></ul><ul><ul><li>Visibilidade...
7. Conclusão Slide  <ul><ul><li>Palavras-chave </li></ul></ul><ul><ul><li>Poder das restrições </li></ul></ul><ul><ul><li>...
7. Conclusão Slide  <ul><ul><li>Design  = </li></ul></ul><ul><ul><ul><li>Custo </li></ul></ul></ul><ul><ul><ul><li>+  Harm...
Referências <ul><li>Interface Hall of Fame  ( http://www.umlchina.com/GUI/HallFame.htm ) </li></ul><ul><ul><li>Interface H...
Referências <ul><ul><li>Vincent Flander's  Web Pages that Suck Aprenda bom  design  a partir do péssimo  design  ( http://...
Referências <ul><ul><li>A History of the GUI  (por Jeremy Reimer) ( http://arstechnica.com/articles/paedia/gui.ars ) </li>...
Referências <ul><ul><li>Shneiderman, Ben:  Designing the User Interface : Strategies for Effective Human-Computer Interact...
Referências <ul><ul><li>Dumas, J., & Redish, J.  A Practical Guide to Usability Testing . Intellect Books, 1999. </li></ul...
Referências <ul><ul><li>Maitland, G.  The Art of Color and Design , McGraw-Hill, 1951 </li></ul></ul>Slide
Slide  Grato pela audiência. Clique AQUI para terminar
Upcoming SlideShare
Loading in...5
×

Ihm07

4,033

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Adorei essa apresentação!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
4,033
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
77
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Ihm07

  1. 1. Interface Humano Máquina <ul><li>Curso de Computação </li></ul><ul><li>Universidade Federal do Ceará </li></ul><ul><li>Prof. Riverson Rios, Ph.D. </li></ul><ul><li>[email_address] </li></ul>agosto 2007
  2. 2. Slide
  3. 3. <ul><li>“ O design pode ser a diferença entre prazer e frustração . </li></ul><ul><li>Os mesmos princípios usados no projeto de pequenas coisas também são aplicáveis a sistemas complexos. </li></ul><ul><li>Muitos acidentes são atribuídos a falha humana , mas em quase todos os casos o erro foi o resultado direto de um mau design ... ” </li></ul><ul><li>(Donald Norman “ The Design of Everyday Things ”) </li></ul>Slide
  4. 4. Sumário <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da Interface </li></ul><ul><li>3. Sistema de Janelas </li></ul><ul><li>4. Interface Gráfica com o(a) Usuário(a) </li></ul><ul><li>5. Testes de Usabilidade </li></ul><ul><li>6. Exemplos de Mau Design </li></ul><ul><li>7. Conclusão </li></ul><ul><li>Referências </li></ul>Slide
  5. 5. Objetivos <ul><ul><li>Ao final desta disciplina, os alunos deverão </li></ul></ul><ul><ul><ul><li>Entender os problemas e os desafios da Interface com o Usuário (IU) </li></ul></ul></ul><ul><ul><ul><li>Projetar uma boa IU </li></ul></ul></ul><ul><ul><ul><li>Saber analisar uma IU </li></ul></ul></ul><ul><ul><ul><li>Reconhecer uma má IU </li></ul></ul></ul><ul><ul><ul><li>Reconhecer uma IU bem projetada </li></ul></ul></ul><ul><ul><ul><li>Conhecer os diferentes objetos interativos </li></ul></ul></ul><ul><ul><ul><li>Projetar IUs para deficientes visuais e auditivos </li></ul></ul></ul>Slide
  6. 6. 1. Introdução Slide <ul><li>interface : substantivo feminino </li></ul><ul><ul><li>dispositivo de ligação entre sistemas; </li></ul></ul><ul><ul><li>elemento de ligação de dois ou mais componentes de um sistema; </li></ul></ul><ul><ul><li>INFORMÁTICA : modalidade gráfica de apresentação dos dados e das funções de um programa; </li></ul></ul><ul><ul><li>(Fonte: www.portoeditora.pt/dol) </li></ul></ul>
  7. 7. 1. Introdução Slide <ul><li>usabilidade : substantivo feminino </li></ul><ul><ul><li>Facilidade de usar ferramenta ou objeto a fim de realizar tarefa específica e importante (Fonte: http://pt.wikipedia.org/wiki/Usabilidade ) </li></ul></ul><ul><ul><li>Dumas e Redish (1999): </li></ul></ul><ul><ul><ul><li>Foco no(a) usuário(a) </li></ul></ul></ul><ul><ul><ul><li>ele(a) quer ser produtivo </li></ul></ul></ul><ul><ul><ul><li>está sempre ocupado </li></ul></ul></ul><ul><ul><ul><li>quer realizar certa tarefa </li></ul></ul></ul><ul><ul><ul><li>É ele(a) quem decide se um produto é fácil de usar </li></ul></ul></ul>
  8. 8. 1. Introdução Slide <ul><ul><li>O que é Interface Humano-Computador (Human-Computer Interface)? </li></ul></ul><ul><ul><ul><li>Interação dos usuários com o software </li></ul></ul></ul><ul><ul><ul><li>Ambiente físico dos usuários de Computação </li></ul></ul></ul><ul><ul><li>Tópicos : </li></ul></ul><ul><ul><ul><li>Desenvolvimento de software </li></ul></ul></ul><ul><ul><ul><li>Usabilidade </li></ul></ul></ul><ul><ul><ul><li>Bom design </li></ul></ul></ul><ul><ul><ul><li>Acessibilidade </li></ul></ul></ul><ul><ul><ul><li>Estilos de interação </li></ul></ul></ul>
  9. 9. 1. Introdução <ul><ul><li>IHC envolve </li></ul></ul><ul><ul><ul><li>Psicologia </li></ul></ul></ul><ul><ul><ul><li>Computação </li></ul></ul></ul><ul><ul><ul><li>Ergonomia </li></ul></ul></ul><ul><ul><ul><li>Multimídia (gráficos, sons, vídeo etc) </li></ul></ul></ul><ul><ul><ul><li>Outras disciplinas </li></ul></ul></ul><ul><ul><li>Nosso foco: </li></ul></ul><ul><ul><ul><li>Projeto de interfaces (gráficas) </li></ul></ul></ul>Slide
  10. 10. 1. Introdução <ul><ul><li>Os humanos são bons em </li></ul></ul><ul><ul><ul><li>Reconhecimento (de imagens, de vozes etc) </li></ul></ul></ul><ul><ul><ul><li>Memória associativa </li></ul></ul></ul><ul><ul><ul><li>Explicações </li></ul></ul></ul><ul><ul><li>E são ruins em </li></ul></ul><ul><ul><ul><li>Memória de curto prazo </li></ul></ul></ul><ul><ul><ul><li>Tarefas complexas </li></ul></ul></ul><ul><ul><ul><li>Perfeição </li></ul></ul></ul><ul><ul><li>Os humanos cometem erro </li></ul></ul><ul><ul><ul><li>Portanto, viva sem eles ou... </li></ul></ul></ul><ul><ul><ul><li>Projete, visando operadores imperfeitos </li></ul></ul></ul>Slide
  11. 11. 1.1 A Interface <ul><ul><li>Há interfaces em todo canto </li></ul></ul><ul><ul><ul><li>No carro </li></ul></ul></ul><ul><ul><ul><li>Na porta </li></ul></ul></ul><ul><ul><ul><li>No telefone </li></ul></ul></ul><ul><ul><ul><li>Na televisão </li></ul></ul></ul><ul><ul><ul><li>No ventilador </li></ul></ul></ul><ul><ul><ul><li>No vídeo-cassete </li></ul></ul></ul><ul><ul><ul><li>Na torneira da pia </li></ul></ul></ul><ul><ul><ul><li>Nos caixas eletrônicos </li></ul></ul></ul><ul><ul><ul><li>Numa fivela de cabelo! </li></ul></ul></ul><ul><ul><li>As más interfaces também! </li></ul></ul>Slide
  12. 12. 1.1.1 Tipos de Interface <ul><ul><li>Em batch (1940s) </li></ul></ul><ul><ul><ul><li>Cartões perfurados </li></ul></ul></ul><ul><ul><ul><li>Job Control Language (JCL) </li></ul></ul></ul><ul><ul><ul><li>Shell scripts </li></ul></ul></ul><ul><ul><li>Em texto (1950s) </li></ul></ul><ul><ul><ul><li>Command Line Interface (CLI) – bash, dos </li></ul></ul></ul><ul><ul><ul><li>Usada por sysadmins: rápida e produtiva </li></ul></ul></ul><ul><ul><ul><li>Text User Interface (TUI) – dBase, WordStar </li></ul></ul></ul><ul><ul><li>Gráfica (1980s) </li></ul></ul><ul><ul><ul><li>Graphical User Interface (GUI) </li></ul></ul></ul><ul><ul><ul><li>janelas, mouse , ícones, papel de parede </li></ul></ul></ul>Slide
  13. 13. 1.1.1 Tipos de Interface <ul><ul><li>Web (1990s) </li></ul></ul><ul><ul><ul><li>HTML </li></ul></ul></ul><ul><ul><ul><li>Caixas, botões, links </li></ul></ul></ul><ul><ul><ul><li>Resolução </li></ul></ul></ul><ul><ul><li>Touch screens </li></ul></ul><ul><ul><ul><li>caixas automáticos, PDAs </li></ul></ul></ul><ul><ul><li>Telefone </li></ul></ul><ul><ul><ul><li>serviços pelo 0800 </li></ul></ul></ul><ul><ul><ul><li>agenda, fotos &c de celulares </li></ul></ul></ul><ul><ul><li>Botões </li></ul></ul><ul><ul><ul><li>rádios de pilha </li></ul></ul></ul><ul><ul><ul><li>tocadores MP3, rodinha do iPod </li></ul></ul></ul>Slide
  14. 14. <ul><li>Xfdrake - TUI do Mandriva Linux para configurar o monitor </li></ul>
  15. 15. 1.1.2 A Boa Interface <ul><ul><li>Uma boa interface deve lidar com </li></ul></ul><ul><ul><ul><li>Expectativas </li></ul></ul></ul><ul><ul><ul><ul><li>eg, usar botões, caixas de diálogo de modo esperado </li></ul></ul></ul></ul><ul><ul><ul><li>Modelo conceitual </li></ul></ul></ul><ul><ul><ul><ul><li>Fácil adaptação </li></ul></ul></ul></ul><ul><ul><ul><li>Mapeamentos </li></ul></ul></ul><ul><ul><ul><ul><li>Analogias físicas e padrões culturais </li></ul></ul></ul></ul><ul><ul><ul><li>Feedback imediato </li></ul></ul></ul><ul><ul><ul><ul><li>Toda ação deve ter um efeito (eg, apertar botão) </li></ul></ul></ul></ul><ul><ul><ul><li>Comunicação </li></ul></ul></ul><ul><ul><ul><ul><li>Ajude-os a lembrar (use dicas, barras de tarefa) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Nunca exija memorização entre telas </li></ul></ul></ul></ul>Slide
  16. 16. 1.1.2 A Boa Interface <ul><ul><ul><li>Padronização </li></ul></ul></ul><ul><ul><ul><ul><li>Todos os relógios andando no sentido horário </li></ul></ul></ul></ul><ul><ul><ul><li>Tratamento de erro </li></ul></ul></ul><ul><ul><ul><ul><li>Simplifique as tarefas </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Evite o aparecimento de erros </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Coisas diferentes devem parecer diferentes </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Confirmação imediata e consistente pode ser inútil </li></ul></ul></ul></ul><ul><ul><ul><li>Restrições </li></ul></ul></ul><ul><ul><ul><ul><li>Diminua o espaço de busca, usando restrições culturais, físicas, semânticas, lógicas </li></ul></ul></ul></ul><ul><ul><ul><li>Visibilidade de controles </li></ul></ul></ul><ul><ul><ul><ul><li>Todas as funções visíveis e facilmente encontradas </li></ul></ul></ul></ul>Slide
  17. 17. 1.2 Prototipagem <ul><ul><li>Motivação </li></ul></ul><ul><ul><ul><li>Mais barata, mais rápida </li></ul></ul></ul><ul><ul><ul><li>Permite descobrir problemas mais cedo </li></ul></ul></ul><ul><ul><ul><li>Partes podem ser usadas no produto final (imagens etc) </li></ul></ul></ul><ul><ul><li>Benefícios para IU </li></ul></ul><ul><ul><ul><li>Melhor visualização </li></ul></ul></ul><ul><ul><ul><li>Algo pros designers avaliarem </li></ul></ul></ul><ul><ul><ul><li>Algo pros operadores discutirem </li></ul></ul></ul>Slide
  18. 18. 1.2 Prototipagem <ul><ul><li>Técnicas </li></ul></ul><ul><ul><ul><li>Programa funcional </li></ul></ul></ul><ul><ul><ul><ul><li>Rascunho do código fonte não testado </li></ul></ul></ul></ul><ul><ul><ul><li>Programa funcional limitado </li></ul></ul></ul><ul><ul><ul><ul><li>Executa apenas uma função (eg, um botão) </li></ul></ul></ul></ul><ul><ul><ul><li>Interface não funcional </li></ul></ul></ul><ul><ul><ul><ul><li>Objetos interativos presentes, mas não fazem nada </li></ul></ul></ul></ul><ul><ul><ul><li>Desenho (eg, usando o Inkscape, o OpenDraw) </li></ul></ul></ul><ul><ul><ul><ul><li>Eficiente quando o software empregado é bom </li></ul></ul></ul></ul><ul><ul><ul><li>Papel (desenhos e gráficos feitos a mão) </li></ul></ul></ul><ul><ul><ul><ul><li>Barato e dinâmico </li></ul></ul></ul></ul>Slide
  19. 19. 1.2 Prototipagem <ul><li>Horizontal </li></ul><ul><ul><ul><li>Todos os componentes </li></ul></ul></ul><ul><ul><ul><li>Funcionalidade reduzida </li></ul></ul></ul><ul><ul><li>Vertical </li></ul></ul><ul><ul><ul><li>Alguns componentes </li></ul></ul></ul><ul><ul><ul><li>Toda a funcionalidade </li></ul></ul></ul>Slide
  20. 20. 1.2.1 Exercício <ul><ul><li>Usando qualquer técnica, projete uma interface para uma das aplicações abaixo. Use abas, widgets , botões &c </li></ul></ul><ul><ul><ul><li>Busca de arquivos por nome, conteúdo, data, dono, pasta &c </li></ul></ul></ul><ul><ul><ul><li>Becape e restauração pasta, arquivo, data, gzip, verificação &c </li></ul></ul></ul><ul><ul><ul><li>Criação de ícones visões, cores, formas geométricas &c </li></ul></ul></ul><ul><ul><ul><li>Solicitação de pedido nome, data, email, assunto, pedido, prazo &c </li></ul></ul></ul>Slide
  21. 21. 1.3 Histórico Slide <ul><ul><ul><li>A History of the GUI (Jeremy Reimer) </li></ul></ul></ul><ul><ul><ul><li>http://arstechnica.com/articles/paedia/gui.ars </li></ul></ul></ul><ul><ul><ul><li>1930s – Vannevar Bush - Memex </li></ul></ul></ul><ul><ul><ul><ul><li>Mesa com dois monitores touch screen , um teclado e um scanner </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Acesso a todo o conhecimento humano </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Nunca implemantada </li></ul></ul></ul></ul>
  22. 22. Slide <ul><ul><ul><li>1968 – Douglas Engelbart – NLS </li></ul></ul></ul><ul><ul><ul><ul><li>oN-Line System </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Telcado, mouse , rede, janelas, email, hipertexto e vídeo conferência </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Xerox decide investir na GUI </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Xerox Alto, primeiro computador com GUI </li></ul></ul></ul></ul>
  23. 23. Slide Teclado e mouse do NLS
  24. 24. Slide Engelbart inventou o ponteiro do mouse ( bug )
  25. 25. Slide Xerox Palo e GUI com Smalltalk, ícones e títulos de janelas por US$ 17,000+
  26. 26. Slide 1983 Apple Lisa: ícones de arquivos, arrastar-e-soltar por US$ 10.000! (Macintosh, 1984, US$ 2,495)
  27. 27. Slide 1983 Microsoft Interface Manager
  28. 28. Slide 1983 Microsoft Windows 1.01
  29. 29. Slide 1987 Microsoft Windows 2
  30. 30. Slide 1995 Microsoft Windows 95
  31. 31. Slide
  32. 32. Slide 1997 KDE 1 – Linux e BSD
  33. 33. Slide Mac OS X e a GUI Aqua
  34. 34. Slide
  35. 35. 1.4 Motivação Slide <ul><li>Um bom design traz </li></ul><ul><ul><li>Satisfação dos clientes = $$$ </li></ul></ul><ul><ul><li>Qualidade => Boa reputação </li></ul></ul><ul><ul><li>Confiabilidade (menos erros dos usuários) </li></ul></ul><ul><ul><li>Fidelidade => novos usuários </li></ul></ul><ul><ul><li>Foco no trabalho (não na interface ) </li></ul></ul><ul><ul><ul><li>Eficiência </li></ul></ul></ul><ul><ul><ul><li>flexibilidade </li></ul></ul></ul><ul><ul><ul><li>funcionalidade </li></ul></ul></ul>
  36. 36. 1.5 Uso da Interface Slide <ul><li>A interface faz a mediação entre </li></ul><ul><li>humanos </li></ul><ul><ul><li>Julgam se a interface é útil e apropriada </li></ul></ul><ul><li>e software + hardware </li></ul><ul><ul><li>Ferramentas disponíveis </li></ul></ul><ul><li>Como bem utilizar as ferramentas de modo a satisfazer os humanos? </li></ul>
  37. 37. 1.6 Humanos <ul><li>operador(a) </li></ul><ul><ul><li>Executa o sistema final </li></ul></ul><ul><li>projetista de sistema </li></ul><ul><ul><li>Define a arquitetura do sistema </li></ul></ul><ul><li>projetista de interface </li></ul><ul><ul><li>Considera necessidades especiais dos operadores, propósito da interface , custos e benefícios a fim de projetar uma interface atraente e funcional </li></ul></ul>Slide
  38. 38. 1.6 Humanos <ul><li>Usuário Iniciante </li></ul><ul><ul><li>O que este produto faz? Como começo? </li></ul></ul><ul><li>Usuário Intermediário </li></ul><ul><ul><li>Qual comando faz esta tarefa? </li></ul></ul><ul><ul><li>Quais as vantagens da nova versão? </li></ul></ul><ul><ul><li>Como fiz isso antes? </li></ul></ul><ul><li>Usuário Avançado </li></ul><ul><ul><li>Onde estão os atalhos? </li></ul></ul><ul><ul><li>Posso automatizar esta tarefa? </li></ul></ul><ul><ul><li>Posso personalizar a interface ? </li></ul></ul>Slide
  39. 39. 1.7 Regras Schneiderman <ul><li>1. Consistência </li></ul><ul><ul><li>Cores, leiaute, maiúsculas, fontes, terminologia </li></ul></ul><ul><ul><li>Mau exemplo: links visitados e não visitados </li></ul></ul><ul><ul><li>Bom exemplo: OK sempre antes de CANCELAR </li></ul></ul><ul><li>2. Atalhos </li></ul><ul><ul><li>Abreviações, teclas especiais, macros </li></ul></ul><ul><ul><li>Mau exemplo: mudar estilo no MS Word </li></ul></ul><ul><ul><li>Bom exemplo: ALT <-- e ALT--> no Firefox </li></ul></ul>Slide
  40. 40. <ul><li>3. Feedback </li></ul><ul><ul><li>Resposta a cada ação dos usuários </li></ul></ul><ul><ul><li>Mau exemplo: digitação enquanto salva </li></ul></ul><ul><ul><li>Bom exemplo: cor corrente </li></ul></ul><ul><li>4. Fechamento </li></ul><ul><ul><li>Informação de final de grupo de ações </li></ul></ul><ul><ul><li>Mau exemplo: nenhum feedback </li></ul></ul><ul><ul><li>Bom exemplo: “ Sua inscrição foi feita com sucesso ” </li></ul></ul>Slide 1.7 Regras Schneiderman
  41. 41. <ul><li>5. Tratamento de erro </li></ul><ul><ul><li>Mau exemplo: ?snt err </li></ul></ul><ul><ul><li>Bom exemplo: sair sem salvar, seleção por menu </li></ul></ul><ul><li>6. Reversibilidade </li></ul><ul><ul><li>Reduz ansiedade pois erros podem ser desfeitos </li></ul></ul><ul><ul><li>Mau exemplo: um undo só do Photoshop 4 </li></ul></ul><ul><ul><li>Bom exemplo: botão de voltar </li></ul></ul>Slide 1.7 Regras Schneiderman
  42. 42. <ul><li>7. Controle </li></ul><ul><ul><li>Usuários como iniciadores das ações </li></ul></ul><ul><ul><li>Mau exemplo: maiúsculas automáticas </li></ul></ul><ul><ul><li>Bom exemplo: correção ortográfica </li></ul></ul><ul><li>8. Memória </li></ul><ul><ul><li>Usuários têm memória curta </li></ul></ul><ul><ul><li>Mau exemplo: ausência de help on-line </li></ul></ul><ul><ul><li>Bom exemplo: ícones sugestivos, bread crumbs , navegabilidade em 3 cliques </li></ul></ul>Slide 1.7 Regras Schneiderman
  43. 43. <ul><li>Princípios Básicos </li></ul><ul><ul><li>Agrupamento </li></ul></ul><ul><ul><ul><li>aproxime itens relacionados </li></ul></ul></ul><ul><ul><ul><li>Organiza informações e reduz desordem </li></ul></ul></ul><ul><ul><li>Alinhamento </li></ul></ul><ul><ul><ul><li>Ligação visual entre elementos </li></ul></ul></ul><ul><ul><ul><li>Dá aparência limpa, sofisticada e suave </li></ul></ul></ul>Slide 1.8 Bom Design
  44. 44. <ul><ul><li>Repetição </li></ul></ul><ul><ul><ul><li>De cor, forma, textura, espessura, tamanho &c </li></ul></ul></ul><ul><ul><ul><li>Fortalece unidade </li></ul></ul></ul><ul><ul><li>Contraste </li></ul></ul><ul><ul><ul><li>Diferencie elementos se não forem os mesmos (cor, fonte, tipo, tamanho, espaço &c) </li></ul></ul></ul><ul><ul><ul><li>Mais importante atração visual </li></ul></ul></ul>Slide 1.8 Bom Design
  45. 45. Onde Estamos... <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da Interface </li></ul><ul><li>3. Sistema de Janelas </li></ul><ul><li>4. Interface Gráfica com o(a) Usuário(a) </li></ul><ul><li>5. Testes de Usabilidade </li></ul><ul><li>6. Exemplos de Mau Design </li></ul><ul><li>7. Conclusão </li></ul><ul><li>Referências </li></ul>Slide
  46. 46. 2.1 Ciclo de Vida <ul><ul><li>Concepção </li></ul></ul><ul><ul><li>Definição dos requerimentos </li></ul></ul><ul><ul><li>Especificação </li></ul></ul><ul><ul><li>Implementação </li></ul></ul><ul><ul><li>Teste </li></ul></ul><ul><ul><li>Instalação </li></ul></ul><ul><ul><li>Manutenção </li></ul></ul>Slide
  47. 47. 2.2 Estado do Sistema <ul><li>Estado atual do sistema deve ser clara e explicitamente indicado </li></ul><ul><ul><li>O sistema deve dar feedback após receber entrada </li></ul></ul><ul><ul><li>Ex.: </li></ul></ul><ul><ul><ul><li>Modo atual </li></ul></ul></ul><ul><ul><ul><li>Operação ilegal </li></ul></ul></ul><ul><ul><ul><li>Indicadores de erro </li></ul></ul></ul><ul><ul><ul><li>Valores de variáveis </li></ul></ul></ul><ul><ul><ul><li>Indicar tempo de resposta longo </li></ul></ul></ul><ul><ul><ul><li>Mostrar cursores e apontadores (do mouse ) </li></ul></ul></ul>
  48. 48. 2.2 Estado do Sistema Slide 2.2 Estado do Sistema Slide
  49. 49. 2.2.1 Erros <ul><li>Mostre os erros imediatamente </li></ul><ul><ul><ul><li>Mensagens inteligíveis </li></ul></ul></ul><ul><ul><ul><li>Sem abreviações </li></ul></ul></ul><ul><ul><ul><li>Sem insultos </li></ul></ul></ul><ul><ul><ul><li>Sem pânico </li></ul></ul></ul><ul><ul><li>Indique as ações semanticamente inválidas </li></ul></ul><ul><ul><ul><li>Não faça nada </li></ul></ul></ul><ul><ul><ul><ul><li>Escureça ou mude a cor do objeto de interação (ícone, linha do menu etc) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Iniba reação pelo mouse </li></ul></ul></ul></ul>Slide
  50. 50. 2.2.1 Erros <ul><li>Projete para evitar erros </li></ul><ul><ul><ul><li>Simule possíveis erros </li></ul></ul></ul><ul><ul><ul><li>Teste, teste e teste </li></ul></ul></ul><ul><ul><ul><li>Remova o que está inacessível no momento </li></ul></ul></ul><ul><ul><li>Torne os erros facilmente detectáveis </li></ul></ul><ul><ul><ul><li>Facilite sua correção </li></ul></ul></ul><ul><ul><li>Não puna quem errar! </li></ul></ul>Slide
  51. 51. 2.2.1.1 Evitando erros <ul><li>Funções de força </li></ul><ul><li>Interlock (conecta dois eventos) </li></ul><ul><ul><ul><li>Força ordem nas operações </li></ul></ul></ul><ul><ul><ul><li>eg, microondas, lava-roupas, validação de formulário com JavaScript </li></ul></ul></ul><ul><ul><li>Lockin (prende pelo lado de dentro) </li></ul></ul><ul><ul><ul><li>Previne fim prematuro </li></ul></ul></ul><ul><ul><ul><li>eg, sair sem salvar </li></ul></ul></ul><ul><ul><li>Lockout (prende pelo lado de fora) </li></ul></ul><ul><ul><ul><li>Previne ocorrência de evento </li></ul></ul></ul><ul><ul><ul><li>eg, formatar o disco </li></ul></ul></ul>Slide
  52. 52. 2.2.2 Modo Corrente <ul><li>Modo: mesma entrada traz resultado diferente, dependendo do estado do sistema </li></ul><ul><ul><li>Ex.: </li></ul></ul><ul><ul><ul><li>Forma do cursor </li></ul></ul></ul><ul><ul><ul><ul><li>Círculo: pronto para desenhar círculos </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Balde: pronto para pintar região </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Barra horizontal ou letra T: pronto para texto </li></ul></ul></ul></ul><ul><ul><ul><li>Editores de texto </li></ul></ul></ul><ul><ul><ul><ul><li>Modo de inserção </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Modo de edição </li></ul></ul></ul></ul>Slide
  53. 53. 2.2.3 Tempo de Resposta Longo Slide <ul><li>Muda a expectativa do(a) operador(a) </li></ul><ul><ul><ul><li>Busca </li></ul></ul></ul><ul><ul><ul><li>Cálculos complexos </li></ul></ul></ul><ul><ul><ul><li>Compilação demorada </li></ul></ul></ul><ul><ul><ul><li>Transferência de arquivo </li></ul></ul></ul><ul><ul><li>Indique por </li></ul></ul><ul><ul><ul><li>Forma do cursor </li></ul></ul></ul><ul><ul><ul><ul><li>relógio </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Ampulheta </li></ul></ul></ul></ul><ul><ul><ul><li>processo em andamento </li></ul></ul></ul><ul><ul><ul><ul><li>porcentagem </li></ul></ul></ul></ul><ul><ul><ul><ul><li>barra de progressão </li></ul></ul></ul></ul>
  54. 54. 2.2.4 Exemplos <ul><ul><li>This operation may take some time. Please wait. </li></ul></ul><ul><ul><li>Comando scp ( secure copy ): </li></ul></ul><ul><ul><li>xampu> scp marc@ufc.br:a.zip meuarq.zip </li></ul></ul><ul><li>a.zip 72% |************ | 91KB 00:18 ETA </li></ul>Slide
  55. 55. Onde Estamos... Slide <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da Interface </li></ul><ul><li>3. Sistema de Janelas </li></ul><ul><li>4. Interface Gráfica com o(a) Usuário(a) </li></ul><ul><li>5. Testes de Usabilidade </li></ul><ul><li>6. Exemplos de Mau Design </li></ul><ul><li>Referências na web </li></ul><ul><li>Referências Bibliográficas </li></ul>
  56. 56. 3 Sistema de Janelas Slide <ul><li>Funções básicas </li></ul><ul><ul><li>Definir terminal abstrato </li></ul></ul><ul><ul><ul><li>Um para cada processo </li></ul></ul></ul><ul><ul><ul><li>Fornece independência do dispositivo </li></ul></ul></ul><ul><ul><ul><li>Facilidade de programação e portabilidade </li></ul></ul></ul><ul><ul><ul><li>Compartilhamento de recursos </li></ul></ul></ul><ul><ul><ul><li>Comunicação por eventos </li></ul></ul></ul><ul><ul><li>Definir um modelo de imagem </li></ul></ul><ul><ul><ul><li>Trata E/S gráfica do terminal abstrato </li></ul></ul></ul><ul><ul><li>Gerenciar recursos </li></ul></ul><ul><ul><ul><li>Teclado, mouse etc. </li></ul></ul></ul>
  57. 57. 3.1 Eventos <ul><li>Eventos de um sistema de janelas </li></ul><ul><ul><li>Do teclado </li></ul></ul><ul><ul><ul><li>Sistema interpreta a tecla pressionada </li></ul></ul></ul><ul><ul><li>De localização </li></ul></ul><ul><ul><ul><li>Posicionamento do mouse (eg, nas bordas da janela) </li></ul></ul></ul><ul><ul><li>De escolha </li></ul></ul><ul><ul><ul><li>Clicar ou desclicar um botão do mouse </li></ul></ul></ul><ul><ul><li>De valor </li></ul></ul><ul><ul><ul><li>Valores gerados por potenciômetros (eg, joystick ) </li></ul></ul></ul><ul><ul><li>De temporização </li></ul></ul><ul><ul><ul><li>Intervalo entre dois cliques (para quê?) </li></ul></ul></ul>Slide
  58. 58. <ul><li>Exemplo: uso do mouse </li></ul><ul><ul><li>O mouse é movimentado </li></ul></ul><ul><ul><ul><li>O driver do mouse informa novas localizações </li></ul></ul></ul><ul><ul><ul><li>O SJ muda o cursor (seta) na tela </li></ul></ul></ul><ul><ul><li>Um botão é pressionado ( down ) </li></ul></ul><ul><ul><ul><li>A interrupção é tratada pelo driver do mouse </li></ul></ul></ul><ul><ul><ul><li>Este envia evento pro SJ </li></ul></ul></ul><ul><ul><ul><li>SJ -> janela cliente o evento e a pos. relativa </li></ul></ul></ul><ul><ul><li>O botão é solto ( up ) </li></ul></ul><ul><ul><ul><li>O driver do mouse informa ao SJ </li></ul></ul></ul><ul><ul><ul><li>SJ-> janela cliente o evento e a pos. relativa </li></ul></ul></ul><ul><ul><li>Logo </li></ul></ul><ul><ul><ul><li>SJ dá o feedback , mas não interpreta os eventos </li></ul></ul></ul>3.1 Eventos
  59. 59. 3.2 Recursos <ul><li>Recursos gerenciados por um SJ </li></ul><ul><ul><li>Fontes </li></ul></ul><ul><ul><li>Mouse </li></ul></ul><ul><ul><li>Teclado </li></ul></ul><ul><ul><li>Mapa de cores </li></ul></ul><ul><ul><li>Tela de alta resolução </li></ul></ul>Slide
  60. 60. 3.3 Fontes Slide <ul><li>Classificação: </li></ul><ul><li>a) Tipo... </li></ul><ul><li>de texto </li></ul><ul><ul><li>Usadas no corpo do texto </li></ul></ul><ul><ul><li>Legíveis mesmo em tamanhos de ponto pequenos </li></ul></ul><ul><ul><li>Serifadas (ajudam o olho a acompanhar o texto) </li></ul></ul><ul><ul><li>Leitura mais fácil </li></ul></ul><ul><ul><li>Tamanho entre 9 e 12 pontos </li></ul></ul><ul><ul><li>7 ou 8 pontos: cartões comerciais e classificados </li></ul></ul><ul><ul><li>Menor que 6 pontos: ilegível </li></ul></ul>
  61. 61. 3.3 Fontes Slide <ul><li>de apresentação </li></ul><ul><ul><li>Títulos, cabeçalhos, anúncios, logomarcas etc </li></ul></ul><ul><ul><li>Sem serifa </li></ul></ul><ul><ul><li>Tamanhos maiores que 12 pontos </li></ul></ul><ul><li>decorativas </li></ul><ul><ul><li>Pouco usadas </li></ul></ul><ul><ul><li>Enfeitadas </li></ul></ul><ul><ul><li>Chamam atenção </li></ul></ul>
  62. 62. 3.3 Fontes Slide <ul><li>para escrita (cursivas, script ) </li></ul><ul><ul><li>Modelam caligrafia </li></ul></ul><ul><li>especiais </li></ul><ul><ul><li>Símbolos matemáticos </li></ul></ul><ul><ul><li>Letras gregas </li></ul></ul><ul><ul><li>Ícones </li></ul></ul><ul><ul><li>Símbolos especiais (arroba, copyright etc.) </li></ul></ul>
  63. 63. 3.3 Fontes Slide <ul><li>b) Espaçamento </li></ul><ul><li>Monoespaçadas </li></ul><ul><ul><li>Mesmo largura para todos os caracteres </li></ul></ul><ul><ul><li>Não são afetadas por kerning </li></ul></ul><ul><ul><li>Courier </li></ul></ul><ul><li>Proporcionalmente espaçadas </li></ul><ul><ul><li>Diferentes larguras a cada caracter </li></ul></ul><ul><ul><li>« i » ocupa menos espaço que « m » </li></ul></ul><ul><ul><li>Sem kerning , espaço das letras não é invadido </li></ul></ul><ul><ul><li>Times Helvetica </li></ul></ul>
  64. 64. 3.3.1 Courier Slide <ul><li>Para máquina de escrever </li></ul><ul><li>Projetada em 1952 por Howard Kessler da IBM </li></ul><ul><li>Elipses abertas </li></ul><ul><li>Grande altura-x </li></ul><ul><li>Resiste a acúmulo de tinta e restos de borracha </li></ul><ul><li>Uso : </li></ul><ul><ul><li>mensagens familiares </li></ul></ul><ul><ul><li>imagens de tela de computador </li></ul></ul><ul><ul><li>alinhamento de material tabular </li></ul></ul>
  65. 65. 3.3.1 Courier Slide <ul><ul><li><TITLE>Primeiro Trabalho - 2001.1 </TITLE> </li></ul></ul><ul><ul><li><BODY TEXT=#6B238E BGCOLOR=#c0d0c1> </li></ul></ul><ul><ul><li><IMG SRC=&quot;../roman_i.gif&quot;>A ser entregue no dia </li></ul></ul><ul><ul><li>20 de mar&ccedil;o </li></ul></ul><ul><ul><li><H2><B> CK123 A - Primeiro Trabalho - 2001.1 </li></ul></ul><ul><ul><li></H2></B> </li></ul></ul><ul><ul><li><IMG SRC=&quot;../bow.gif&quot;><BR> </li></ul></ul><ul><ul><li><UL><UL><UL><UL><UL><Font Color=RED> </li></ul></ul><ul><ul><li><H3><B> Instalando APACHE </B></H3> </li></ul></ul><ul><ul><li></UL></UL></UL></UL></UL></font> </li></ul></ul><ul><ul><li><P> </li></ul></ul><ul><ul><li>1. Instale o servidor Apache </li></ul></ul>
  66. 66. 3.3.2 Times Slide <ul><li>Projetada em 1931 por Stanley Morrison para o jornal Times de Londres </li></ul><ul><li>Planejada cientificamente para economizar espaço </li></ul><ul><li>Acrescida de estilos não romanos (itálico) </li></ul><ul><li>Daí o nome Times Roman </li></ul><ul><li>Formas e espaçamento de texto estreitos </li></ul><ul><li>Ideal para colunas estreitas (60 caracteres) </li></ul><ul><li>Uso : </li></ul><ul><ul><li>Blocos de textos </li></ul></ul><ul><ul><li>Livros </li></ul></ul><ul><ul><li>Denota tradição e elegância </li></ul></ul>
  67. 67. 3.3.2 Times Slide <ul><li>Para blocos de textos largos, prefira: </li></ul><ul><ul><li>Century Old Style (1906) </li></ul></ul><ul><ul><li>Cheltenham (1975) </li></ul></ul><ul><li>Outras fontes serifadas </li></ul><ul><ul><li>Bodoni </li></ul></ul><ul><ul><li>Bookman </li></ul></ul><ul><ul><li>Charter </li></ul></ul><ul><ul><li>Korinna </li></ul></ul><ul><ul><li>Souvenir </li></ul></ul><ul><ul><li>Palatino </li></ul></ul><ul><ul><li>Timmons </li></ul></ul>
  68. 68. 3.3.3 Helvetica Slide <ul><li>Projetada em 1957 por Max Miedinger para a </li></ul><ul><li>Fundação suíça de Tipos Haas com o nome de </li></ul><ul><li>Haas New Grotesque </li></ul><ul><li>Fonte sem serifa mais conhecida </li></ul><ul><li>Limpa, moderna, ordenada e séria </li></ul><ul><li>Uso : </li></ul><ul><ul><li>Cabeçalhos </li></ul></ul><ul><ul><li>Legendas </li></ul></ul><ul><ul><li>formulários </li></ul></ul><ul><ul><li>listas de preço </li></ul></ul><ul><ul><li>Catálogos </li></ul></ul><ul><ul><li>Relatórios clínicos </li></ul></ul>
  69. 69. 3.3.3 Helvetica Slide <ul><li>Fontes sem serifa: </li></ul><ul><ul><li>Avant Garde (1970) tem círculos e triângulos perfeitos </li></ul></ul><ul><ul><li>Comic Sans </li></ul></ul><ul><ul><li>Lucida </li></ul></ul><ul><ul><li>Verdana </li></ul></ul>
  70. 70. 3.3.3 Helvetica Slide <ul><li>Tabela de Preços </li></ul><ul><li>(por Kg) </li></ul><ul><li>Mamão 0,25 Banana 0,40 </li></ul><ul><li>Pera 2,40 Limão 0,80 </li></ul><ul><li>Laranja 0,85 Kiwi 2,75 </li></ul><ul><li>Coco 0,77 Graviola 1,60 </li></ul><ul><li>Dicas: </li></ul><ul><ul><li>Misture maiúsculas com minúsculas </li></ul></ul><ul><ul><li>Use pesos e tamanhos diferentes </li></ul></ul>
  71. 71. 3.3.4 Script Slide <ul><li>Imitam caligrafia humana </li></ul><ul><li>Exigem mais espaço por letra </li></ul><ul><li>Letras não totalmente conectadas </li></ul><ul><li>Uso : </li></ul><ul><ul><li>Convites </li></ul></ul><ul><ul><li>Catálogos </li></ul></ul><ul><ul><li>Certificados </li></ul></ul><ul><ul><li>Programas de Eventos </li></ul></ul>
  72. 72. 3.3.4 Script Slide <ul><li>Fontes cursivas: </li></ul><ul><ul><li>Este texto está escrito em ARIOSO </li></ul></ul><ul><ul><li>Este texto está escrito em CHANCERY </li></ul></ul><ul><ul><li>E este está escrito em Lucida Handwriting </li></ul></ul>
  73. 73. 3.3.4 Script Slide <ul><ul><li>CONVITE </li></ul></ul><ul><ul><li>A Faculdade Integrada de Tianguá tem a Honra </li></ul></ul><ul><ul><li>de convidar V.Sa. a participar de Cerimônia </li></ul></ul><ul><ul><li>Comemorativa de 100 anos de colação da </li></ul></ul><ul><ul><li>primeira turma de bacharelandos em </li></ul></ul><ul><ul><li>Ciência da Informação. </li></ul></ul>
  74. 74. 3.3.5 Símbolo Slide <ul><li>Fontes compostas de: </li></ul><ul><ul><li>Símbolos da Matemática </li></ul></ul><ul><ul><li>Símbolos da Física </li></ul></ul><ul><ul><li>Letras gregas </li></ul></ul><ul><ul><li>Sinais de pontuação especiais (setas, quadrados) </li></ul></ul><ul><ul><li>Dingbats (flores, corações, estralas etc) </li></ul></ul><ul><ul><li>Notas musicais (claves, pausas etc) </li></ul></ul><ul><li>Mais usados: </li></ul><ul><ul><li>Bullets </li></ul></ul><ul><ul><li>Quadrados </li></ul></ul>
  75. 75. 3.3.5 Símbolo Slide <ul><li>Fontes de símbolos: </li></ul><ul><ul><li>Symbol </li></ul></ul><ul><ul><li>Dingbats </li></ul></ul><ul><ul><li>Carta </li></ul></ul><ul><ul><li>Sonata </li></ul></ul><ul><ul><li>Musical Symbols </li></ul></ul>
  76. 76. 3.3.5 Símbolo Slide Symbol:  Starbats: ➎➏➐➑➒➓➀➁➂➃➇➈➉☎  »❑ Starmath: ⊆⊇⊄⊅⊈⊉∈∉∃∍ℵℑℜ℘∡∢∣∥⊥⋯ ⋮⋰⋱≠≡ ∞
  77. 77. 3.3.6 Bom Uso de Fontes Slide <ul><ul><li>Fonte serifada? </li></ul></ul><ul><ul><ul><li>não serifada em título de janelas, caixas de diálogo, formulários </li></ul></ul></ul><ul><ul><ul><li>serifada em texto corrido, caixas de mensagem </li></ul></ul></ul><ul><ul><li>Use mais de uma família de fontes </li></ul></ul><ul><ul><ul><li>Varie estilo </li></ul></ul></ul><ul><ul><ul><li>Tamanho </li></ul></ul></ul><ul><ul><ul><li>Peso </li></ul></ul></ul>
  78. 78. 3.3.6 Bom Uso de Fontes Slide <ul><ul><li>Fontes sublinhadas podem confundir-se com links </li></ul></ul><ul><ul><li>Não use mais que 3 fontes por tela </li></ul></ul><ul><ul><ul><li>Mais que isso torna o texto confuso </li></ul></ul></ul><ul><ul><li>Não use mais que 3 ou 4 tamanhos de fonte </li></ul></ul><ul><ul><ul><li>Fonte grande para cabeçalhos </li></ul></ul></ul><ul><ul><ul><li>Médias para subtítulos e normais para texto </li></ul></ul></ul>
  79. 79. 3.3.6 Bom Uso de Fontes <ul><ul><li>Letra em vídeo reverso chama a atenção </li></ul></ul><ul><ul><li>NÃO USE LETRAS MAIÚSCULAS </li></ul></ul><ul><ul><ul><li>Cansam a leitura </li></ul></ul></ul><ul><ul><ul><li>Use apenas para chamar a ATENÇÃO </li></ul></ul></ul><ul><ul><li>Não use blinking (pisca-pisca) </li></ul></ul><ul><ul><ul><li>NUNCA! </li></ul></ul></ul><ul><ul><ul><li>Se se quer ler, não se consegue porque pisca </li></ul></ul></ul><ul><ul><ul><li>Se não se quer ler, distrai e incomada </li></ul></ul></ul>Slide
  80. 80. 3.3.6 Bom Uso de Fontes <ul><li>Opte por fontes conhecidas </li></ul><ul><ul><ul><li>Times </li></ul></ul></ul><ul><ul><ul><li>Arial </li></ul></ul></ul><ul><ul><ul><li>Helvetica </li></ul></ul></ul><ul><ul><ul><li>Verdana (encontradas na maioria dos computadores) </li></ul></ul></ul><ul><ul><li>Distribua bem o espaço entre os caracteres ( kerning ) e entre as linhas AV AV </li></ul></ul>Slide
  81. 81. 3.4 A Janela <ul><li>Janela </li></ul><ul><ul><li>Porção da tela que serve como terminal abstrato de um processo </li></ul></ul><ul><ul><li>Por ser abstrata, pode ser maior que a tela física </li></ul></ul><ul><ul><li>Representada por um ícone </li></ul></ul><ul><ul><li>Tem formato, em geral, retangular </li></ul></ul><ul><ul><li>Pode ter decorações </li></ul></ul><ul><ul><ul><li>Barra de títulos </li></ul></ul></ul><ul><ul><ul><li>Caixas de redimensionamento </li></ul></ul></ul><ul><ul><ul><li>Botões de maxi(mini)mização, de fechamento </li></ul></ul></ul><ul><ul><ul><li>De stick , de ajuda, restauração, shade %c </li></ul></ul></ul>
  82. 82. 3.4.1 Componentes Slide Cabeçalho Menu Título da aplicação Rodapé Estado do sistema e progresso Vidraça Barra de rolagem Botão do SJ
  83. 83. Slide 3.4.2 Decorações do KDE2 <ul><li>ModStep </li></ul><ul><li>KStep </li></ul><ul><li>Risc OS </li></ul><ul><li>Windows 2000 </li></ul><ul><li>KDE 1 </li></ul>
  84. 84. 3.5 Múltiplas Janelas <ul><li>Posicionamento </li></ul><ul><ul><li>Em geral, há superposição </li></ul></ul><ul><ul><li>Implementação : lista de janelas ativas </li></ul></ul><ul><ul><ul><li>Cada janela tem tamanho e localização </li></ul></ul></ul><ul><ul><ul><li>As janelas mostradas na tela na ordem inversa </li></ul></ul></ul><ul><ul><ul><li>Janela no início é a ativa </li></ul></ul></ul><ul><ul><ul><li>Operações: criar, destruir, mover pro início, fim </li></ul></ul></ul><ul><ul><li>Tipos </li></ul></ul><ul><ul><ul><li>Automático: mesmo local da última ativação </li></ul></ul></ul><ul><ul><ul><li>Manual: o(a) operador(a) escolhe (eg, twm) </li></ul></ul></ul><ul><ul><ul><li>Inteligente: o sistema escolhe o melhor lugar </li></ul></ul></ul>Slide
  85. 85. 3.5 Múltiplas Janelas <ul><li>Troca de dados entre janelas </li></ul><ul><ul><li>Utiliza protocolo </li></ul></ul><ul><ul><ul><li>Mecanismos para conversão de dados </li></ul></ul></ul><ul><ul><ul><li>E transferência de dados </li></ul></ul></ul><ul><ul><li>Exemplo : X Window </li></ul></ul><ul><ul><ul><li>Proprietário : seleciona texto ou imagem </li></ul></ul></ul><ul><ul><ul><li>Seleção : copiado para um buffer nomeado </li></ul></ul></ul><ul><ul><ul><li>Solicitante : dá o nome da seleção e o tipo de dados esperado ( XconvertSelection ) </li></ul></ul></ul><ul><li>Como funciona o drag and drop ? </li></ul>Slide
  86. 86. 3.5 Múltiplas Janelas <ul><li>Foco (escolha da janela ativa) </li></ul><ul><ul><li>Tipos </li></ul></ul><ul><ul><ul><li>Por clique do mouse (click to focus ) </li></ul></ul></ul><ul><ul><ul><li>Pela sua posição ( mouse focus ) </li></ul></ul></ul><ul><ul><li>Problema : ativação da janela não pretendida </li></ul></ul><ul><ul><ul><li>Por uso incorreto do foco </li></ul></ul></ul><ul><ul><ul><li>Ajuda: SJ indica qual a janela ativa </li></ul></ul></ul><ul><ul><ul><ul><li>Barras de títulos diferentes </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Cursores diferentes (eg, retângulo hachurado) </li></ul></ul></ul></ul>Slide
  87. 87. Onde Estamos... <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da Interface </li></ul><ul><li>3. Sistema de Janelas </li></ul><ul><li>4. Interface Gráfica com o(a) Usuário(a) </li></ul><ul><li>5. Testes de Usabilidade </li></ul><ul><li>6. Exemplos de Mau Design </li></ul><ul><li>7. Conclusão </li></ul><ul><li>Referências </li></ul>Slide
  88. 88. Slide <ul><li>Visicalc </li></ul>
  89. 89. 4.1 Características <ul><li>Uma boa GUI deve ser... </li></ul><ul><ul><li>Previsível </li></ul></ul><ul><ul><ul><li>Comportamento esperado é seguido </li></ul></ul></ul><ul><ul><ul><li>Intuitiva (comporta-se como outras aplicações) </li></ul></ul></ul><ul><ul><li>Atraente </li></ul></ul><ul><ul><ul><li>Bem desenhada, agradável aos olhos </li></ul></ul></ul>Slide
  90. 90. 4.1 Características <ul><li>Fácil de ler </li></ul><ul><ul><ul><li>Evite jargões, fontes estranhas </li></ul></ul></ul><ul><ul><ul><li>Não experimente formas diferentes de usar objetos interativos (eg, OK e CANCELAR) </li></ul></ul></ul>Slide
  91. 91. 4.1 Características <ul><ul><li>Independente do dispositivo </li></ul></ul><ul><ul><ul><li>Tipo e resolução do monitor </li></ul></ul></ul><ul><ul><ul><li>Bom em 640x480, 800x600, LCD monocromático? </li></ul></ul></ul><ul><ul><li>Personalizável </li></ul></ul><ul><ul><ul><li>Flexibilidade para cores, menus, estruturas &c. </li></ul></ul></ul><ul><ul><ul><li>Design padrão ( default ) deve ser agradável </li></ul></ul></ul><ul><ul><li>Consistente </li></ul></ul><ul><ul><ul><li>Uniformidade de design e ações em todas as janelas, diálogos e apresentações </li></ul></ul></ul><ul><ul><li>Invisível </li></ul></ul><ul><ul><ul><li>Função: fazer com que o trabalho seja feito </li></ul></ul></ul>Slide
  92. 92. 4.1 Características <ul><li>Uma boa GUI deve ainda ter... </li></ul><ul><ul><li>Multi-formato </li></ul></ul><ul><ul><ul><li>Vários tipos de arquivo aceitáveis </li></ul></ul></ul><ul><ul><li>Orientação a objetos </li></ul></ul><ul><ul><ul><li>Fornecer drag & drop </li></ul></ul></ul><ul><ul><ul><li>Ambiente gráfico baseado em objetos e não, texto </li></ul></ul></ul><ul><ul><ul><li>Maioria dos comandos executados com o mouse </li></ul></ul></ul><ul><ul><li>Perdão </li></ul></ul><ul><ul><ul><li>Meios para desfazer ações não desejadas </li></ul></ul></ul><ul><ul><ul><li>Retorno de caixas de diálogos e menus </li></ul></ul></ul><ul><ul><ul><li>Opções claramente expostas </li></ul></ul></ul>
  93. 93. 4.1 Características Slide Qual o problema aqui?
  94. 94. 4.2 Exemplos Slide E qual o problema aqui?
  95. 95. 4.3 Entrada de Dados <ul><ul><li>Pelo mouse </li></ul></ul><ul><ul><ul><li>Propósitos: apontar, selecionar e entrar dados </li></ul></ul></ul><ul><ul><ul><li>Bom para seleção de itens </li></ul></ul></ul><ul><ul><ul><li>Mas não pra seleção de múltiplos itens </li></ul></ul></ul><ul><ul><li>Pelo teclado </li></ul></ul><ul><ul><ul><li>Familiar e rápido </li></ul></ul></ul><ul><ul><ul><li>Maior variedade de entradas ( shift , CTRL &c) </li></ul></ul></ul><ul><ul><ul><li>Bom pra seleção em larga escala (^Home + shift -^End) </li></ul></ul></ul><ul><ul><ul><li>Mas, muitos preferem o mouse </li></ul></ul></ul><ul><ul><ul><li>Ruim para apontar </li></ul></ul></ul><ul><ul><ul><li>Ruim como ferramenta de desenho </li></ul></ul></ul>Slide
  96. 96. 4.3 Entrada de Dados <ul><ul><li>Outros dispositivos </li></ul></ul><ul><ul><ul><li>Touchscreens </li></ul></ul></ul><ul><ul><ul><ul><li>Tela com teclado sensível ao toque </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Pressão, impacto ou interrupção de grade de luz infravermelho </li></ul></ul></ul></ul><ul><ul><ul><li>Trackballs </li></ul></ul></ul><ul><ul><ul><ul><li>Bola fixa sobre superfície do mouse </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Não requer espaço pro mouse correr </li></ul></ul></ul></ul><ul><ul><ul><li>Lightpen </li></ul></ul></ul><ul><ul><ul><ul><li>Aponta diretamente para a tela </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Mais preciso que as touchscreens </li></ul></ul></ul></ul>Slide
  97. 97. 4.3 Entrada de Dados <ul><ul><ul><li>Joysticks </li></ul></ul></ul><ul><ul><ul><ul><li>Movimento e aceleração </li></ul></ul></ul></ul><ul><ul><ul><li>Micropoint </li></ul></ul></ul><ul><ul><ul><ul><li>Dedos apontam diretamente para uma almofada </li></ul></ul></ul></ul><ul><ul><ul><li>Gyromouse </li></ul></ul></ul><ul><ul><ul><ul><li>Capta movimentos da mão </li></ul></ul></ul></ul><ul><ul><ul><li>Olhos </li></ul></ul></ul><ul><ul><ul><ul><li>Pisque duas vezes para clicar </li></ul></ul></ul></ul><ul><ul><ul><li>Luva 3D </li></ul></ul></ul><ul><ul><ul><ul><li>Realidade virtual </li></ul></ul></ul></ul>Slide
  98. 98. 4.3 Entrada de Dados <ul><ul><li>Por que nunca desconsiderar o teclado... </li></ul></ul><ul><ul><ul><li>Nem todos têm mouse </li></ul></ul></ul><ul><ul><ul><li>Às vezes o mouse deixa de funcionar </li></ul></ul></ul><ul><ul><ul><li>Digitadores rápidos preferem o teclado </li></ul></ul></ul><ul><ul><li>Por isso... </li></ul></ul><ul><ul><ul><li>Forneça sempre tecla de atalho </li></ul></ul></ul><ul><ul><ul><ul><li>^S para salvar, ESC para sair, ENTER para enviar </li></ul></ul></ul></ul><ul><ul><ul><li>Teclas mnemônicas </li></ul></ul></ul><ul><ul><ul><ul><li>ALT-A em A rquivo </li></ul></ul></ul></ul><ul><ul><ul><ul><li>ALT-E em E ditar </li></ul></ul></ul></ul><ul><ul><ul><ul><li>ALT-H em H elp </li></ul></ul></ul></ul>Slide
  99. 99. 4.3.1 Teclados <ul><ul><li>Qwerty ou Sholes (1870s) </li></ul></ul><ul><ul><ul><li>Detalhes </li></ul></ul></ul><ul><ul><ul><ul><li>Leiaute para evitar colisão </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Datilografia: 1877 por Frank McGurrin </li></ul></ul></ul></ul><ul><ul><ul><li>Vantagens </li></ul></ul></ul><ul><ul><ul><ul><li>Não alfabético </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Conhecimento externo </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Usado em todo o mundo Com pequenas modificações </li></ul></ul></ul></ul><ul><ul><ul><li>Desvantagens </li></ul></ul></ul><ul><ul><ul><ul><li>Anti-natural </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Não cientificamente projetado </li></ul></ul></ul></ul>Slide
  100. 100. 4.3.1 Teclados <ul><ul><li>Dvorak (1932) </li></ul></ul><ul><ul><ul><li>Detalhes </li></ul></ul></ul><ul><ul><ul><ul><li>Leiaute para a freqüência das letras em inglês </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Vogais e consoantes mais usadas na 2a fileira </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Digitação mais rápida (150 ppm vs 200+ ppm) </li></ul></ul></ul></ul><ul><ul><ul><li>Vantagens </li></ul></ul></ul><ul><ul><ul><ul><li>Menos erros </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Menos passeios dos dedos </li></ul></ul></ul></ul><ul><ul><ul><li>Desvantagens </li></ul></ul></ul><ul><ul><ul><ul><li>Todo mundo usa o Qwerty </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Custo de treinamento (uma semana?) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Custo de substituição </li></ul></ul></ul></ul>Slide
  101. 101. <ul><ul><li>Chord </li></ul></ul><ul><ul><ul><li>Detalhes </li></ul></ul></ul><ul><ul><ul><ul><li>Várias teclas pressionadas ao mesmo tempo </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Diferentes combinações geram diferentes letras </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Muito poucas teclas (estenografia) </li></ul></ul></ul></ul><ul><ul><ul><li>Vantagens </li></ul></ul></ul><ul><ul><ul><ul><li>Pequeno tamanho </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Uso de uma só mão </li></ul></ul></ul></ul><ul><ul><ul><li>Desvantagens </li></ul></ul></ul><ul><ul><ul><ul><li>Todo mundo usa o Qwerty </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Custo de treinamento </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Nenhum conhecimento externo </li></ul></ul></ul></ul>4.3.1 Teclados Slide
  102. 102. 4.3.2 BatChord Slide http://www.nanopac.com/keyboard.htm
  103. 103. 4.3.3 Mouseburger Slide http://www.unipac-usa.com/info.html
  104. 104. 4.3.4 Teclado DVORAK Slide
  105. 105. 4.3.4 Teclado DVORAK Slide http://www.mwbrooks.com/dvorak/layout.html
  106. 106. 4.4 Cores <ul><ul><li>Use poucas cores </li></ul></ul><ul><ul><ul><li>Ainda há monitores que usam 16 cores </li></ul></ul></ul><ul><ul><ul><li>Muitas cores geram poluição visual </li></ul></ul></ul><ul><ul><ul><li>Prefira as cores primárias </li></ul></ul></ul><ul><ul><li>Limite-se às 16 cores basicas </li></ul></ul><ul><ul><ul><li>Não são pontilhadas ( dithered ) </li></ul></ul></ul><ul><ul><ul><li>(a não ser em monitores com menos de dezesseis cores) </li></ul></ul></ul>Slide
  107. 107. 4.4.1 Web-safe Colors <ul><ul><li>256 ou 16 milhões de cores? </li></ul></ul><ul><ul><ul><li>Muitos monitores ainda usam 256 cores </li></ul></ul></ul><ul><ul><li>Escolhem-se 216 das 256 cores </li></ul></ul><ul><ul><ul><li>0%, 20%, 40%, 60%, 80% e 100% </li></ul></ul></ul><ul><ul><ul><li>Hexa: 00, 33, 66, 99, CC, FF </li></ul></ul></ul><ul><ul><ul><li>RGB: 6 x 6 x 6 = 216 </li></ul></ul></ul><ul><ul><ul><li>Exemplo: #330000, #CCCCCC, #FF00CC </li></ul></ul></ul><ul><ul><li>Restantes 40 cores </li></ul></ul><ul><ul><ul><li>Reservadas ao sistema operacional </li></ul></ul></ul>Slide
  108. 108. 4.4.2 Bom Uso <ul><ul><li>Para mostrar andamento (progresso) </li></ul></ul><ul><ul><ul><li>Não use espectro de cores </li></ul></ul></ul><ul><ul><ul><li>Prefira dégradé de cores primárias contrastantes </li></ul></ul></ul><ul><ul><li>As cores devem ser personalizáveis </li></ul></ul><ul><ul><li>Cores de primeiro e segundo planos </li></ul></ul><ul><ul><ul><li>Não podem ser ambas claras ou escuras </li></ul></ul></ul><ul><ul><ul><li>Use cores complementares (eg, amarelo + azul = branco) </li></ul></ul></ul>Slide Texto amarelo sobre fundo azul
  109. 109. 4.4.3 Aspectos Psicológicos <ul><ul><li>As cores provocam reações diferentes </li></ul></ul><ul><ul><ul><li>Cores quentes (vermelho, amarelo e laranja) agitação, diversão e euforia </li></ul></ul></ul><ul><ul><ul><li>Cores frias (azul e verde) ambiente calmo </li></ul></ul></ul><ul><ul><ul><li>Fundo branco Sensação de organização e agilidade </li></ul></ul></ul><ul><ul><ul><li>Cores &quot;femininas&quot; (rosa, vermelho, amarelo feminilidade </li></ul></ul></ul><ul><ul><ul><li>Fundo claro (branco ou cinza) e letras pretas tradição </li></ul></ul></ul>Slide
  110. 110. 4.4.4 Daltonismo <ul><ul><li>Tipos </li></ul></ul><ul><ul><ul><li>Tricromasia – enxerga 3 cores mas trocadas </li></ul></ul></ul><ul><ul><ul><ul><li>Protanomalia – pouco o vermelho (1/100) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Deuteronomalia – pouco o verde (5/100) </li></ul></ul></ul></ul><ul><ul><ul><li>Dicromasia – enxerga duas cores </li></ul></ul></ul><ul><ul><ul><ul><li>Protanopia – nada de vermelho (1/100) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Deuteronopia – vermelho, âmbar e verde (1/100) </li></ul></ul></ul></ul><ul><ul><ul><li>Monocromasia – enxerga claro/escuro (raro) </li></ul></ul></ul><ul><ul><li>Ocorrência </li></ul></ul><ul><ul><ul><li>Um em cada doze homens </li></ul></ul></ul><ul><ul><ul><li>Uma em cada duzentas mulheres </li></ul></ul></ul>Slide
  111. 111. 4.4.4.1 Teste de Daltonismo Slide
  112. 112. Slide 4.4.4.2 Como Protanópicos vêem
  113. 113. Slide 4.4.4.2 Como Protanópicos vêem
  114. 114. 4.4.4.3 Design Slide <ul><ul><li>Dicas </li></ul></ul><ul><ul><ul><li>Não dependa somente das cores </li></ul></ul></ul><ul><ul><ul><ul><li>Especialmente verde e vermelho </li></ul></ul></ul></ul><ul><ul><ul><li>Prefira “ clique no botão da direita ” a “ clique no botão vermelho ” </li></ul></ul></ul><ul><ul><ul><li>Deixe grande contraste entre as cores </li></ul></ul></ul><ul><ul><ul><li>Teste a interface em simuladores W3C </li></ul></ul></ul><ul><ul><ul><ul><li>www.newmanservices.com/colorblind </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Vischeck simula ( www.vischeck.com ) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Daltonize corrige ( www.vischeck.com ) </li></ul></ul></ul></ul><ul><ul><li>Veja também http://www.linuxacessivel.org/ </li></ul></ul>
  115. 115. Slide
  116. 116. Slide
  117. 117. 4.5 Elementos <ul><li>São partes de uma GUI </li></ul><ul><ul><li>Menus </li></ul></ul><ul><ul><li>Caixas de Diálogo </li></ul></ul><ul><ul><li>Caixas de Mensagens </li></ul></ul><ul><ul><li>Controles </li></ul></ul><ul><ul><li>Botões </li></ul></ul><ul><ul><li>Barras de Ferramenta </li></ul></ul>Slide
  118. 118. 4.5.1 Menus <ul><li>Tipos </li></ul><ul><ul><li>Menus da barra de menus ( Drop-down ) </li></ul></ul><ul><ul><ul><li>Divida-os em seções com barras horizontais </li></ul></ul></ul><ul><ul><ul><li>Mude a cor das opções correntemente desativadas </li></ul></ul></ul><ul><ul><ul><li>Use “. . .” para indicar caixa de diálogo </li></ul></ul></ul><ul><ul><ul><li>Mostre atalhos do teclado </li></ul></ul></ul><ul><ul><li>Menus em cascata (hierárquico) </li></ul></ul><ul><ul><ul><li>Ramificação de entrada do menu </li></ul></ul></ul><ul><ul><ul><li>Problemas : </li></ul></ul></ul><ul><ul><ul><ul><li>Dificuldade de acesso pelo mouse </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Ocultamento de itens </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Complexidade vs profundidade </li></ul></ul></ul></ul>Slide
  119. 119. 4.5.1 Menus <ul><li>Tipos </li></ul><ul><ul><li>Menus Pop-up </li></ul></ul><ul><ul><ul><li>Menus flutuantes não permanentes </li></ul></ul></ul><ul><ul><ul><li>Aparecem na vidraça com o clique do mouse </li></ul></ul></ul><ul><ul><li>Menus Destacáveis </li></ul></ul><ul><ul><ul><li>Menus que podem ser fixados na tela </li></ul></ul></ul><ul><ul><ul><li>Ponto médio entre o menu e a caixa de diálogo </li></ul></ul></ul>Slide
  120. 120. 4.5.1.1 Exemplo Slide Barra de Menus Indicador de caixa de diálogo Divisão Atalho Opção desativada Menu em cascata Opção selecionada Ícones
  121. 121. 4.5.1.2 Menu Destacável Slide Pop-up Menu Destaque Menu Destacado
  122. 122. Slide 4.5.2 Caixas de Diálogo <ul><ul><li>Janelas de tamanho fixo com controles </li></ul></ul><ul><ul><li>Modalidade </li></ul></ul><ul><ul><ul><li>Não Modal </li></ul></ul></ul><ul><ul><ul><ul><li>Permite uso do aplicativo após ser exibida, eg FIND do MS Word </li></ul></ul></ul></ul><ul><ul><ul><li>Modal de Aplicativo </li></ul></ul></ul><ul><ul><ul><ul><li>Proíbe uso do aplicativo enquanto exibida, eg &quot;MÊS INVÁLIDO&quot; </li></ul></ul></ul></ul>Slide
  123. 123. Slide 4.5.2 Caixas de Diálogo <ul><ul><li>Modalidade </li></ul></ul><ul><ul><ul><li>Modal de Sistema </li></ul></ul></ul><ul><ul><ul><ul><li>Paralisa todo o sistema, eg tela azul da morte: &quot;ESTE APLICATIVO EXECUTOU UMA OPERAÇÃO ILEGAL...&quot; </li></ul></ul></ul></ul><ul><ul><ul><li>Semi-modal de Aplicativo </li></ul></ul></ul><ul><ul><ul><ul><li>Permite uso limitado do aplicativo enquanto exibida, eg seleção de células em planilha eletrõnica </li></ul></ul></ul></ul>Slide
  124. 124. 4.5.2 Caixas de Diálogo Slide
  125. 125. 4.5.2 Caixas de Diálogo <ul><ul><li>Mobilidade </li></ul></ul><ul><ul><ul><li>Fixa </li></ul></ul></ul><ul><ul><ul><ul><li>Posição fixa na tela </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Pior caso: modal de sistema fixa </li></ul></ul></ul></ul><ul><ul><ul><li>Móvel </li></ul></ul></ul><ul><ul><ul><ul><li>Posição livre na tela </li></ul></ul></ul></ul><ul><ul><li>Desdobrabilidade </li></ul></ul><ul><ul><ul><li>Desdobrável </li></ul></ul></ul><ul><ul><ul><ul><li>Protege operador de detalhes irrelevantes eg FIND do OpenOffice (&quot;Outras Opções...&quot;) </li></ul></ul></ul></ul><ul><ul><ul><li>Não desdobrável </li></ul></ul></ul><ul><ul><ul><ul><li>Todas as informações são apresentadas </li></ul></ul></ul></ul>Slide
  126. 126. 4.6 Botões <ul><ul><li>Uso de botões </li></ul></ul><ul><ul><ul><li>Agrupados </li></ul></ul></ul><ul><ul><ul><li>Arranjados horizontal ou verticalmente </li></ul></ul></ul><ul><ul><ul><li>Grandes o suficiente para conter seu texto </li></ul></ul></ul><ul><ul><ul><li>Botão mais utilizado deve ser colocado... </li></ul></ul></ul><ul><ul><ul><ul><li>Mais à esquerda se disposto horizontalmente </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Mais acima se disposto verticalmente </li></ul></ul></ul></ul><ul><ul><ul><li>Botão Help fica na extremidade oposta </li></ul></ul></ul><ul><ul><ul><li>Evite usar mais de quatro botões </li></ul></ul></ul>Slide
  127. 127. 4.6 Botões <ul><ul><li>Tipos de botões </li></ul></ul><ul><ul><ul><li>de Comando - caixa retangular com título </li></ul></ul></ul><ul><ul><ul><ul><li>de ação - iniciam uma ação </li></ul></ul></ul></ul><ul><ul><ul><ul><li>de saltar - fecham caixa atual e abrem outra </li></ul></ul></ul></ul><ul><ul><ul><ul><li>de saltar e retornar - abre nova caixa sem fechar atual </li></ul></ul></ul></ul><ul><ul><ul><ul><li>de desdobrar - expandem a caixa atual </li></ul></ul></ul></ul><ul><ul><ul><ul><li>de dobrar - contraem a caixa atual </li></ul></ul></ul></ul>Slide
  128. 128. 4.6 Botões <ul><ul><li>Tipos de botões </li></ul></ul><ul><ul><ul><li>De Opção - seleção de valor(es) </li></ul></ul></ul><ul><ul><ul><ul><li>de rádio - um só é selecionado (tradicionais e com conjunto de valores) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>De verificação - mais de um pode ser selecionado </li></ul></ul></ul></ul><ul><ul><ul><ul><li>de lista - onde um só item pode ser selecionado </li></ul></ul></ul></ul><ul><ul><ul><ul><li>de texto - controles de edição de informação </li></ul></ul></ul></ul><ul><ul><ul><ul><li>deslizantes - ajuste de valores em dimensões contínuas </li></ul></ul></ul></ul><ul><ul><ul><ul><li>de aumentar/diminuir - caixas de texto especializadas </li></ul></ul></ul></ul>Slide
  129. 129. 4.6 Botões Slide
  130. 130. 4.6.1 Exemplos Slide
  131. 131. 4.7 Cuidados Especiais Slide <ul><ul><li>Operadores com pequena deficiência visual </li></ul></ul><ul><ul><ul><li>Não é nessário usar fontes grandes demais </li></ul></ul></ul><ul><ul><ul><li>Não insista em usar fontes pequenas demais </li></ul></ul></ul><ul><ul><ul><li>Deixe-os setar preferências no próprio programa </li></ul></ul></ul>
  132. 132. 4.7 Cuidados Especiais <ul><ul><li>Operadores com deficiência visual </li></ul></ul><ul><ul><ul><li>Use imagens com moderação </li></ul></ul></ul><ul><ul><ul><li>Prcocure sempre usar alternativas <IMG SRC=&quot;ufc.gif&quot; ALT=&quot;Logo UFC&quot;> </li></ul></ul></ul><ul><ul><ul><li>Facilite o trabalho de screen readers </li></ul></ul></ul><ul><ul><ul><li>Use tags apropriadas (HTML) </li></ul></ul></ul><ul><ul><ul><ul><li><Acronym> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><Abbrev> </li></ul></ul></ul></ul><ul><ul><ul><li>Utilize feedback sonoro </li></ul></ul></ul><ul><ul><li>Operadores com deficiência auditiva </li></ul></ul><ul><ul><ul><li>Não confie somente em feedback sonoro </li></ul></ul></ul>Slide
  133. 133. Onde Estamos... Slide <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da Interface </li></ul><ul><li>3. Sistema de Janelas </li></ul><ul><li>4. Interface Gráfica com o(a) Usuário(a) </li></ul><ul><li>5. Testes de Usabilidade </li></ul><ul><li>6. Exemplos de Mau Design </li></ul><ul><li>7. Conclusão </li></ul><ul><li>Referências </li></ul>
  134. 134. 5. Testes de Usabilidade Slide <ul><ul><li>Experimentos que buscam avaliar: </li></ul></ul><ul><ul><ul><li>o uso de uma interface </li></ul></ul></ul><ul><ul><ul><li>a satisfação do(a) usuário(a) </li></ul></ul></ul><ul><ul><li>Erros encontrados mais cedo ⇨ menor custo e menor tempo de conserto </li></ul></ul><ul><ul><li>Tipos </li></ul></ul><ul><ul><ul><li>Formativo – feedback direto de beta testers de um produto em desenvolvimento </li></ul></ul></ul><ul><ul><ul><li>Somativo – testa grau de eficiência e satisfação de um produto quase pronto </li></ul></ul></ul><ul><ul><ul><li>Pós-produção – questionários aplicados ou uso de help desk de produtos já prontos </li></ul></ul></ul>
  135. 135. 5. Testes de Usabilidade Slide <ul><ul><li>Defina a informação desejada e como obtê-la </li></ul></ul><ul><ul><li>Projete o teste </li></ul></ul><ul><ul><li>Selecione grupo piloto de aplicação </li></ul></ul><ul><ul><li>Selecione grupo maior representativo da diversidade de usuários </li></ul></ul><ul><ul><li>Gere relatório e faça mudanças de acordo </li></ul></ul>Erros Encontrados 100 % Número de Usuários
  136. 136. 5.1 Exercício Slide <ul><ul><li>Você irá usar vários programas para realizar a mesma tarefa </li></ul></ul><ul><ul><li>Todos eles são capazes de executá-la </li></ul></ul><ul><ul><li>A diferença está, portanto, na interface </li></ul></ul><ul><ul><li>Com o auxílio de um questionário , anote a dificuldade/facilidade ao usar cada programa </li></ul></ul><ul><ul><li>Uma vez terminado o experimento, analise as diferentes interfaces </li></ul></ul><ul><ul><li>Qual a melhor? </li></ul></ul>
  137. 137. 5.1 Exercício Slide <ul><ul><li>Você vai precisar de </li></ul></ul><ul><ul><ul><li>Caneta </li></ul></ul></ul><ul><ul><ul><li>Papel </li></ul></ul></ul><ul><ul><ul><li>Relógio </li></ul></ul></ul><ul><ul><li>Marque o tempo de cada tarefa </li></ul></ul><ul><ul><li>Não converse com ninguém durante o teste </li></ul></ul><ul><ul><li>É proibido pedir ajuda (senão do próprio programa) </li></ul></ul><ul><ul><li>Lembre-se: </li></ul></ul><ul><ul><li>não é você que está sendo testado(a), </li></ul></ul><ul><ul><li>mas a interface </li></ul></ul>
  138. 138. 5.1 Exercício Slide <ul><ul><li>Monte os dados obtidos no experimento numa tabela </li></ul></ul><ul><ul><li>Responda: ❏ Quantas vezes usou o botão de UNDO? ❏ Qual o tempo gasto em cada tarefa? ❏ Qual desses programas achou mais fácil? ❏ Mais rápido? ❏ Mais intuitivo? ❏ Tem a melhor interface ? ❏ Contribuiu para cometer mais erros? ❏ Levou mais tempo para ser aprendido? ❏ Teria mais retenção com o tempo? </li></ul></ul>
  139. 139. 5.2 Questionário Slide <ul><ul><li>Adaptado de Maitland, G. &quot; The Art of Color and Design &quot; </li></ul></ul><ul><ul><li>Vão ser mostradas 10 perguntas, em geral com duas respostas diferentes </li></ul></ul><ul><ul><li>Escolha a resposta que, na sua opinião, tem melhor gosto </li></ul></ul>
  140. 140. 5.3.1 Questão 1 Slide
  141. 141. 5.3.2 Questão 2 Slide
  142. 142. 5.3.3 Questão 3 Slide
  143. 143. 5.3.4 Questão 4 Slide
  144. 144. 5.3.5 Questão 5 Slide
  145. 145. 5.3.6 Questão 6 Slide
  146. 146. 5.3.7 Questão 7 Slide
  147. 147. 5.3.8 Questão 8 Slide
  148. 148. 5.3.9 Questão 9 Slide
  149. 149. 5.3.10 Questão 10 Slide
  150. 150. 5.4 Observação Slide
  151. 151. Onde Estamos... Slide <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da Interface </li></ul><ul><li>3. Sistema de Janelas </li></ul><ul><li>4. Interface Gráfica com o(a) Usuário(a) </li></ul><ul><li>5. Testes de Usabilidade </li></ul><ul><li>6. Exemplos de Mau Design </li></ul><ul><li>7. Conclusão </li></ul><ul><li>Referências </li></ul>
  152. 152. 6. Exemplos de Mau Design <ul><li>Fontes: </li></ul><ul><ul><ul><li>www.angelfire.com/super/badwebs/ </li></ul></ul></ul><ul><ul><ul><li>http://umlchina.com/GUI/Termino.htm </li></ul></ul></ul><ul><ul><ul><li>http://pixelcentric.net/x-shame/ </li></ul></ul></ul>Slide
  153. 153. 6.1 HTML Validator v3.05 Slide
  154. 154. 6.2 HTML Validator v4 Slide
  155. 155. 6.3 HTML Validator - Solução Slide
  156. 156. 6.4 MS Outlook Slide
  157. 157. 6.4 FTP Control 3.3.3 Slide
  158. 158. 6.5 Yes ou No? Slide
  159. 159. 6.6 Usuários Estúpidos? Slide
  160. 160. 6.7 Adobe GoLive Slide
  161. 161. 6.8 Mozilla Slide
  162. 162. 6.9 Lyceum Slide <ul><li>Que ícone serve para quê? </li></ul>
  163. 163. Onde Estamos... Slide <ul><li>1. Introdução </li></ul><ul><li>2. Projeto da Interface </li></ul><ul><li>3. Sistema de Janelas </li></ul><ul><li>4. Interface Gráfica com o(a) Usuário(a) </li></ul><ul><li>5. Testes de Usabilidade </li></ul><ul><li>6. Exemplos de Mau Design </li></ul><ul><li>7. Conclusão </li></ul><ul><li>Referências </li></ul>
  164. 164. 7. Conclusão Slide <ul><ul><li>Palavras-chave </li></ul></ul><ul><ul><li>Feedback </li></ul></ul><ul><ul><li>Visibilidade </li></ul></ul><ul><ul><li>Usabilidade </li></ul></ul><ul><ul><li>Estado do Sistema </li></ul></ul><ul><ul><li>Prevenção de erros </li></ul></ul><ul><ul><li>Conhecimento interno e externo </li></ul></ul>
  165. 165. 7. Conclusão Slide <ul><ul><li>Palavras-chave </li></ul></ul><ul><ul><li>Poder das restrições </li></ul></ul><ul><ul><li>Mapeamento natural </li></ul></ul><ul><ul><li>Facilidade de saber </li></ul></ul><ul><ul><ul><li>O que fazer </li></ul></ul></ul><ul><ul><ul><li>Como fazer </li></ul></ul></ul><ul><ul><ul><li>O que acontece </li></ul></ul></ul>
  166. 166. 7. Conclusão Slide <ul><ul><li>Design = </li></ul></ul><ul><ul><ul><li>Custo </li></ul></ul></ul><ul><ul><ul><li>+ Harmonia </li></ul></ul></ul><ul><ul><ul><li>+ Confiança </li></ul></ul></ul><ul><ul><ul><li>+ Segurança </li></ul></ul></ul><ul><ul><ul><li>+ Beleza estética </li></ul></ul></ul><ul><ul><ul><li>+ Funcionalidade </li></ul></ul></ul><ul><ul><li>Bom Design = Design + Uso + Prazer </li></ul></ul>
  167. 167. Referências <ul><li>Interface Hall of Fame ( http://www.umlchina.com/GUI/HallFame.htm ) </li></ul><ul><ul><li>Interface Hall of Shame ( http://www.umlchina.com/GUI/Termino.htm ), ( http://omor.com/hci/shame/ ) </li></ul></ul><ul><ul><li>User Interface Design News ( http://www.uidesign.net ) </li></ul></ul><ul><ul><li>Teclado DVORAK ( http://www.mwbrooks.com/dvorak/ ) </li></ul></ul><ul><ul><li>Bobby - Acessibilidade de sites ( http://www.cast.org/bobby/ ) </li></ul></ul>Slide
  168. 168. Referências <ul><ul><li>Vincent Flander's Web Pages that Suck Aprenda bom design a partir do péssimo design ( http://www.webpagesthatsuck.com/ ) </li></ul></ul><ul><ul><li>Special Interest Group da STC sobre Usabilidade Artigos, links , livros, recursos sobre IHC ( http://www.stcsig.org/usability/ ) </li></ul></ul><ul><ul><li>Página do Yahoo sobre IHC ( http://dir.yahoo.com/Science/Computer_Science/Human_Computer_Interaction__HCI_/ ) </li></ul></ul><ul><ul><li>Página sobre usabilidade ( http://www.oslo.sintef.no/avd/32/3270/brosjyrer/engelsk/ ) </li></ul></ul>Slide
  169. 169. Referências <ul><ul><li>A History of the GUI (por Jeremy Reimer) ( http://arstechnica.com/articles/paedia/gui.ars ) </li></ul></ul><ul><ul><li>Dicas de Acessibilidade em Linux ( http://www.linuxacessivel.org/ ) </li></ul></ul><ul><ul><li>MouseSite - Aprenda a história da IHC ( http://sloan.stanford.edu/MouseSite/ ) </li></ul></ul>Slide
  170. 170. Referências <ul><ul><li>Shneiderman, Ben: Designing the User Interface : Strategies for Effective Human-Computer Interaction, 4 rd Ed., Addison-Wesley, 2004 </li></ul></ul><ul><ul><li>Butow, R: User Interface Design for Mere Mortals , Addison-Wesley, 2007 </li></ul></ul><ul><ul><li>Norman, D. The Design of Everyday Things . Doubleday, 2002 </li></ul></ul><ul><ul><li>Bass,L. & Coutaz,J. Developing Software for the User Interface . Addison-Wesley, 1992 </li></ul></ul><ul><ul><li>Williams, R. Design para quem não é Designer : Noções Básicas de Planejamento Visual , 6a ed., Callis, 1995 </li></ul></ul>Slide
  171. 171. Referências <ul><ul><li>Dumas, J., & Redish, J. A Practical Guide to Usability Testing . Intellect Books, 1999. </li></ul></ul><ul><ul><li>Preece, J. Human-Computer Interaction . Addison-Wesley, 1994 </li></ul></ul><ul><li>Minasi, M. Segredos de Projeto de Interface Gráfica com o Usuário . IBPI Press, 1994 </li></ul><ul><ul><li>Brenda, L. The Art of Human-Computer Interface Design , Addison-Wesley, 1990 </li></ul></ul><ul><ul><li>Carroll, J. Human-Computer Interaction in the new Millennium , Addison-Wesley, 2001 </li></ul></ul><ul><ul><li>Burns, D. Técnicas de Editoração Eletrônica , Campus, 1990 </li></ul></ul>Slide
  172. 172. Referências <ul><ul><li>Maitland, G. The Art of Color and Design , McGraw-Hill, 1951 </li></ul></ul>Slide
  173. 173. Slide Grato pela audiência. Clique AQUI para terminar
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×