You are on page 1of 58

Interface Homem­Máquina Usabilidade na Web Aula 01

 Prof. Luiz Henrique S. Félix henriqueznx@gmail.com

Interface Homem­Máquina,  Usabilidade na Web
OBJETIVOS Apresentar os principais conceitos que envolvem Interface com o  usuário,  possibilitando  ao  aluno  sua  aplicação  no  processo  de  desenvolvimento de sistemas COMPETÊNCIAS
• Conhecer as técnicas e mecanismos de interação usuário­computador • Aprender a avaliar interfaces • Saber aplicar testes de usabilidade • Dissertar sobre a importância dos fatores ergonômicos na utilização  dos sistemas.

HABILIDADES
• Avaliar interfaces com o usuário • Aplicar e Interpretar testes de usabilidade

Programa
1. Noções de Usabilidade 2. Aspectos Sociais da Usabilidade 

Programa
1. Noções de Usabilidade
­ Normas ­ Interação Humano­Computador ­ Dispositivos de Interação ­ Desenho de Interfaces ­ Usabilidade na Web ­ Teste / Avaliações

Programa

2. Aspectos Sociais da Usabilidade
­ Acesso Universal à Informação

PARA QUE SERVE?   POR QUE ESTUDAR A  INTERAÇÃO HOMEM­MÁQUINA? POR QUE USAR? COMO USAR? .

INTERAÇÃO HOMEM­COMPUTADOR Psicologia  Cognitiva Ciência da  Computação Inteligência  Artificial Psicologia  Organizacional e Social Ergonomia e  Fatores Humanos Engenharia IHC  Design Antropologia Filosofia Sociologia Lingüística .

INTERAÇÃO HOMEM­COMPUTADOR .

 seguros e funcionais • Desenvolver ou melhorar a segurança.OBJETIVOS DA IHC • Produzir sistemas usáveis. utilidade.  efetividade e USABILIDADE de sistemas computacionais .

SISTEMA HOMEM­MÁQUINA As relações de reciprocidade entre a  máquina e o ser humano que a opera .

SISTEMA HOMEM­MÁQUINA­AMBIENTE Iluminação / Ventilação / Temperatura e Qualidade do Ar / Ruídos /  Umidade / Limpeza / Chuva / Vento / Outros Ambiente Geral Máquina Dispositivo  de informação Saída Dispositivo  de controle Mecanismos  Internos Informações Homem Receptores  Sensoriais Sexo Biotipo Idade Instrução Treinamento Experiência Motivação Realização Outros cíclo Sistema  Nervoso Central Mecanismos de  Ação Muscular Ações Dispositivos operacionais e de controle / Dispositivos informacionais /  Arranjo físico­espacial / Equipamentos / Acessórios / Outros Ambiente Mediato .

 Descreve   profundamente as características e sub­características  mencionadas na norma ISO/IEC 9126. A ISO 14598 orienta  que o seu uso deve ser feito em conjunto com a norma ISO 9126.  já que esta define as métricas de qualidade de software. ISO 9241  ­  Na avaliação de usabilidade de sistemas interativos. . ISO 14598 ­ A norma ISO 14598 define um processo de avaliação da                      qualidade do software . Primeira norma a  definir o termo usabilidade. ISO 12119 ­ Trata da avaliação de pacotes de software.NORMAS DE USABILIDADE ISO 9126 ­   Norma sobre qualidade de software. o padrão internacional mais comum é a norma ISO 9241.

NORMA ISO­9241 ESTRUTURA DE USABILIDADE .

 ou seja. é o ponto de partida para  a estruturação da informação em qualquer negócio  Arquitetura  +  Informação  .  de  modo  a  otimizar  a  organização dos conteúdos e facilitar o acesso a todos os  possíveis usuários A  Arquitetura  da  Informação  é  a  referência  cruzada  entre  os processos e os dados.  através  da  criação  de  mapas  prévios  à  sua  construção.ARQUITETURA DA INFORMAÇÃO A  Arquitetura  da  Informação  visa  à  construção  de  sistemas  de  informação.

ARQUITETURA DA INFORMAÇÃO .

 Pedagogia) .  autodisciplina. Artes) • Computação (Informática.  Engenharias) • Humanas (Sociologia. reflexão e crítica. saber ouvir e  intuição Conhecimentos básicos nas áreas  de:  • Comunicação (Jornalismo.ARQUITETURA DA INFORMAÇÃO O ARQUITETO DA INFORMAÇÃO Especialista na estruturação de  conteúdos para  web sites  • Capacidade de análise e síntese  para normalização das estruturas  • Criatividade.

DESIGN DA INFORMAÇÃO .

DESIGN DO PRODUTO .

DESIGN DO PRODUTO .

DESIGN DO PRODUTO Abertura de caixa de CD .

Como Ajustar Cadeiras?? .

.1 ­ Situação: Ajustar a altura da cadeira O usuário tenta abaixar ou levantar a  cadeira enquanto está sentado.  mexendo na alavanca. Problema: o usuário puxa e empurra  a alavanca porém a cadeira não se  move.

. deve­se puxar com força o assento.Procedimento Correto Para se abaixar a cadeira. deve­se levantar a alavanca e a cadeira ao mesmo tempo e depois empurrá­la. Para levantar a cadeira. segurando com o pé as rodas da cadeira.

DESIGN DO PRODUTO Sofá x Fogão .

com/index.htm .DESIGN DO PRODUTO http://connect­a­desk.

DESIGN DO PRODUTO .

DESIGN DO PRODUTO MacBook Air  (Apple) .

DESIGN DO PRODUTO Prato para Festas  Sofá que não ocupa espaço .

Exercício Pesquisar modelos de “Design Criativo de  Produtos” para apresentar em Sala de Aula .

USO DE CORES .

USO DE CORES .

.USO DE CORES                     10%  da população adulta masculina possui algum tipo de problema  na percepção de cores                      10%  da população adulta masculina possui algum tipo de problema  na percepção de cores.

USO DE CORES                     10%  da população adulta masculina possui algum tipo de problema  na percepção de cores.                     10%  da população adulta masculina possui algum tipo de problema  na percepção de cores. .

Os com total cegueira a cores não lêem qualquer  número. . Os com deficiência vermelho­verde lêem como 3 e 70.USO DE CORES TESTE DE ISHIHARA ­ DALTONISMO Os com visão normal lêem como 8 e 29.

 sobre  retina O vermelho  é focalizado  aqui. na  frente da  retina O verde é  focalizado  aqui. atrás  da retina .PERCEPÇÃO DE COR E PROFUNDIDADE O azul é  focalizado  aqui.

 Verde e Azul  Vermelho. Verde. Amarelo. Amarelo. Verde e Azul  Vermelho. Laranja. Verde e Azul ou  Vermelho. Amarelo e Azul  Vermelho. Azul e  Roxo  2 3 4 5 6 .PERCEPÇÃO DE COR E PROFUNDIDADE Número  de Cores Ordem  de Apresentação Vermelho e Azul ou Amarelo e Azul  Vermelho. Amarelo. Laranja.

PERCEPÇÃO DE COR E PROFUNDIDADE .

PERCEPÇÃO DE COR E PROFUNDIDADE .

PERCEPÇÃO DE COR E PROFUNDIDADE .

.. é de cultura..SIGNIFICADO CULTURAIS DAS CORES Cor não é questão de gosto.

USO DE IMAGENS .

6K JPG – Médio 23.1K JPG – Máximo 44.4K Ampliação 25% <­ Baixo ­­­  Máximo ­> .5K JPG – Alto 27.IMAGENS:  FORMATOS X TAMANHOS JPG – Baixo 21.

 INDICES . SÍMBOLOS.ÍCONES.

USABILIDADE NA WEB .

COMPONENTES  DA INTERFACE  WEB Barras de Navegação Barras de Rolagem Calendários on­line de eventos  Ferramenta de Busca (interna) Formulários Ícones Links para a principal Menus Sinalização de Itens Tag line ou “Linha de marcação” Título da Página .

 Indique claramente a  ação que será realizada  Forneça  feedback  que  diga  ao  usuário  onde  ele  se  encontra no site   Forneça links persistentes para a página principal e para  outras categorias do site. em cada página Inclua link direto para o contexto inicial da página  .DICAS PARA NAVEGABILIDADE Utilize label que claramente indique as funções do link ­   Evite labels como  GO  ou  clique aqui.

TESTE A NAVEGAÇÃO DO SITE Os  usuários  sabem  como  encontrar  a  informação  que  eles  necessitam? Seu  projeto  de  navegação  inclui  todas  as  informações  relacionadas numa seqüência que faz sentido para o usuário? Os usuários sabem onde eles estão na estrutura do Site? Os  usuários  sabem  como  retornar  para  o  ponto  onde  eles  visitaram anteriormente?  Há  links  desnecessários  que  tornam  complexo    o  projeto  da  navegação?  .

.

http://www.html .br/mycitysites/sao_paulo/index.com.mycity.

.

TIPOS  DE  PÁGINAS • Abertura • Páginas Home • Páginas Índice • Paginas de Conteúdo • Formulários • Ajuda • Mapa do Site • Download • Feedback • Busca • Voz e Vídeo • Interatividade • Imagens • Estatísticas e Contadores .

DESIGN PARA CATEGORIAS DE  WEB SITES •DESIGN •Arte ­ Som ­ Imagem  •BANCOS •VEÍCULOS •ESPORTE •GOVERNO •EDITORAS •TURISMO .

NOVOS SERVIÇOS WEB  WEB FEEDS BROADCAST PODCAST. VODCAST          WEBCAST. WEBMINAR WEB BLOGS FOTOLOGS VLOGS CHAT – FÓRUM –  VIDEOCONFERÊNCIA .

 de forma eficiente e confortável.  independentemente de experiência.    2­ Flexibilidade no uso ­ O design atende a uma ampla gama de indivíduos.  4­ Captação da informação ­ O design comunica eficazmente ao usuário as  informações necessárias. manipulação e uso. 7­ Dimensão e espaço para uso e interação  ­ O design oferece espaços e  dimensões apropriados para interação.  6­ Mínimo esforço físico ­ O design pode ser utilizado com um mínimo de  esforço.  preferências e habilidades. conhecimento do idioma ou  da capacidade de concentração do usuário. postura ou mobilidade do usuário.DESENHO UNIVERSAL 1­ Equiparação nas possibilidades de uso ­ O design é útil e  comercializável às pessoas com habilidades diferenciadas. independentemente de sua capacidade sensorial ou de  condições ambientais. nível de formação.  independentemente de tamanho.  3­ Uso Simples e intuitivo ­ O uso do design é de fácil compreensão.  5­ Tolerância ao erro ­ O design minimiza o risco e as conseqüências adversas  de ações involuntárias ou imprevistas. . alcance.

  bem  como  criar  e  contribuir com conteúdos para a Web.  navegar  e  interagir  de  uma  maneira  efetiva  com  a  Web.acessobrasil.br/ .org.ACESSIBILIDADE NA WEB http://www.  entender.  http://www.org/WAI/ Web  projetada  de  modo  a  que  pessoas  portadoras  de  necessidades  especiais  possam  perceber.w3.

 Rogers & Sharp Editora: Artmed ­ Bookman Edição: 2005 Interação Humano Computador –  IHC ­ Modelagem e Gerência de  Interfaces com o usuário Alvim Antônio de Oliveira Netto Editora: Visual Book Edição: 2001 Design e Avaliação de Interfaces  Humano­Computador Heloisa Vieira da Rocha. Maria  Cecília c. BaranausKas Editora: Nied – Unicamp Edição: 2003 Interação Homem Máquina Afonso Inácio Orth Editora: Aio Edição: 2005   . Norman Editora: Edição: 2006 Não me faça pensar Steve Krug Editora: Alta books Edição: 2006 Design de Interação Preece.SUGESTÕES DE BIBLIOGRAFIA O design do dia a dia Donald a.

SUGESTÕES DE BIBLIOGRAFIA Ergonomia do Objeto ­ sistema técnico de  leitura ergonômica Autor: João Gomes Filho  Homepage: Usabilidade  Autor: Jakob Nielsen ­ Marie Tahir  Editora: Campus  Usabilidade na Web: criando  portais mais acessíveis  Autor: Cláudia Dias .

SUGESTÕES DE BIBLIOGRAFIA .