Design de Interfaces – Discussão Inicial
Por quê estudar IHC?
Uma visão geral
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Programação da Aula
1. Resultado da pesquisa de perfil dos alunos
2. Reserva de 20 minutos para os que não vieram na aula passada
3. O Que é IHC
4. Atividade de pesquisa - Daltonismo
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Novas atividades, novas funções
A Internet comercial provocou o surgimento de novas
atividades e funções:
 Webdesigner
 Webdeveloper
 Webmaster
 Webwriter = redação de matérias e textos para
sites
 Websurfer = Manutenção de Páginas
 Auxiliar Web – É o que?
Fonte: Guia de Empregos: http://www.ijobs.com.br/ acesso 24/04/2010
http://www.widesoft.com.br/users/virtual/profis.htm
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Novas atividades, novas funções
Auxiliar Web – É o que?
Auxiliar Web
Somos uma Loja Virtual de Colchões. Procuramos auxiliar para
procedimentos da loja virtual.
Requisitos / Job requirements Obrigatório: Conhecimentos práticos de
Internet, boa redação, alguma experiência em atendimento ao público,
dinâmico, comunicatico, pacote Office. Dominar Internet.
Preferências: Saber editar fotos no Photoshop, Criar arte no Corel.
Algum conhecimento em Html, Corel ou Ilustrator.
Enviar currículo para: [email protected] com o assunto
“Currículo - Auxiliar Web”
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Webdesign – O sentido da Palavra
Mecanismos
de Interação
Representação
Visual
Webdeveloper
(Programador)
Webdesign
(O artista)
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Fases (épocas) do Web design
 Sites “Cartão de Visita”;
 Sites institucionais com informações sobre a
empresa e um certo número de páginas;
 Sites com o oferecimento de alguns serviços;
 Sites complexos compostos por diversas
tecnologias
 Sites participativos = Chamado Web2.0
 Emitam opinião sobre a Web 2.0...
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Fases (épocas) do Web design
 Sites participativos = Chamado Web2.0
Mashup é um website ou uma
aplicação web que usa conteúdo
de mais de uma fonte para criar
um novo serviço completo.
O termo mashup deriva da
prática do hip-hop de mixar
trechos de música e vem sendo
empregado por diversos sites na
internet, com o objetivo de
combinar informações de várias
fontes num único endereço
*

Fonte: PLANTÃO INFO / 09/2007 /
TI
Fonte: Revista INFO. Setembro de 2007
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Fases (épocas) do Web design
 Exemplo de Mashup
*
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Webdesign x Design Impresso
O que diferencia um do outro?
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Webdesign x Design Impresso
 Design Impresso – todos vêem a mesma coisa;
 Design Web - depende:
 Da Resolução de tela do usuário;
 Da capacidade da placa de vídeo do usuário;
 Do Navegador utilizado
 Netscape, Opera, Explorer, Mozilla
 Da versão do Navegador
 Do sistema operacional
 Da existência de plug-ins, etc.
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Webdesign x Design Impresso
 Do Navegador utilizado
 Internet Explorer e Fire Fox
Os controles somem e não
funciona o vídeo
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Webdesign x Design Impresso
 Da Resolução de tela do usuário;

Fonte: Revista INFO. / Clube do Hardware
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Webdesign x Design Impresso
 Da Resolução de tela do usuário;
Tamanho da Tela do monitor e resolução
Medida
Resolução
14”
800x600
15”
800x600
17”
1024x768
19”
1280x1024
21”
1600x1200
Influencia na decisão de projetos a serem apresentados na tela. Qual
resolução utilizar?
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Quem vê o seu projeto – em 2006
 A utilização de navegadores no Mundo
Atualização do gráfico 05/2007
 78% Internet Explorer
 15,4% usam o FireFox
 Qual a relação deste gráfico com
o desenvolvimento de projetos
para Web?
Fonte: Revista Info Exame. Edição de abril de 2006
Fonte: http://info.abril.com.br/aberto/infonews/052007/04052007-3.shl Acesso 03/10/2007
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Quem vê o seu projeto – em 2010
 A utilização de navegadores no Mundo
Fonte: o terceiro navegador mais utilizado
Escrito por Ricardo Fraga em 4 de maio de 2010 – 12:55
http://googlediscovery.com/2010/05/04/google-chrome-e-o-terceiro-navegador-mais-utilizado/
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Ferramentas para o Webdesign
 A linguagem HTML - Ainda é fundamental
 Linguagem de Marcação proveniente da SGML
 O básico para o webdesign
 Edição HTML
 Frontpage – agora é Microsoft® Expression Web ???
 Dreamweaver - Adobe
 Edição de Imagens
 Photoshop - Adobe
 FireWorks - Adobe
 Animação
 Flash - Adobe
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Formatos de Arquivos
São muitos os formatos de arquivos utilizados na Internet,
principalmente com surgimento de novas linguagens de
programação. Podemos destacar os seguintes:
 Imagens
 GIF – Graphics Interchange Format
 JPG – Joint Photographic Expert Group
 Páginas
 HTML, htm, asp, php, cfm
Curiosidade 1
Qual a diferença de .html para .htm?
Arquivo.html é igual a arquivo.Html?
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Continuação em 09/08/2010...
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Fizeram a pesquisa sobre Daltonismo?
 O que é Daltonismo?
 Quando e por quem esta deficiência foi descoberta?
 Quais os principais tipos?
 De que forma se adquire o Daltonismo?
 Quais as áreas que o Daltônico não deve trabalhar?
 Como saber se sou Daltônico? Quais os principais testes?
 Existe alguma forma de atenuar esta deficiência?
 Viajando...
 Sendo eu um Daltônico, posso requer inscrições para
portador de deficiência?
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Um dos Teste - Teste de cores de Ishihara
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Voltando à Web...
Tamanho das Imagens para Web
Para alguns a rede pode ter se tornado um pouco mais rápida
graças a Banda Larga, mas para a maioria, que ainda utiliza
modens comuns para se conectar, a rede continua lenta!
 Pensar no tamanho das imagens
 Melhor formato para cada tipo de imagem
 Melhor compressão
 Photoshop permite a otimização de imagens para Web
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Escolha de Fontes para o Webdesign
Se perguntarmos a um Webdesigner qual a fonte ideal para um
projeto, certamente receberemos como resposta “Fontes sem serifa”,
mas poucos saberão explicar o porque...
E
 Limitações dos equipamentos da época
geravam falta de legibilidade nas fontes
serifadas, o que fez das fontes sem serifa um
padrão de utilização.
Serifa
Devemos utilizar as fontes mais comuns de serem encontradas, como
Tahoma, Verdana e Arial. Isso ainda é verdade?
O que acontece se o usuário não tiver em seu computador a
fonte especificada no projeto?
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Escolha de Fontes para o Webdesign
http://www.canaldev.com.br/topico/771-font-face/
http://www.fontsquirrel.com/fontface/generator
http://www.rafaelcorreia.net/?pagina=noticia&id=2
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Sistema de Cores do Webdesign
O modelo de cores RGB é baseado no princípio de que diversos
efeitos cromáticos são obtidos pela projeção da luz branca através
dos filtros vermelho, verde e azul.
Red
Green
Blue
A cada uma das três cores é atribuído um valor de 0 a 255 que
combinados formam todas as outras cores.
A codificação Hexadecimal – vamos ver ainda neste curso...
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Metodologia para Webdesign
Além do conhecimento técnico necessário para o desenvolvimento de
projetos para web é necessário também uma metodologia de
desenvolvimento que direcione ao sucesso do projeto.
Prática: Em duplas:
 Aluno X – é o cliente e deseja desenvolver um site.
 Aluno Y – É o designer e fará o desenvolvimento do projeto.
 O aluno X deve dar o Briefing e Y escreverá os passos para
desenvolvimento do projeto. Neste momento qual a sua
metodologia, Designer?
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Metodologia para Webdesign
 Fase 1 - Visão geral
 Fase 2 – Planejamento
 Fase 3 - Definição de uma Identidade Visual
 Fase 4 - Coleta de material
 Fase 5 – Desenvolvimento
 Fase 6 - Testes
 Fase 7 – Correções
 Fase 8 – Publicação
 Fase 9 - Divulgação do Site
 Fase 10 - Manutenção
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Tipos de projetos para Web
 Portais Horizontais e Verticais;
 Comércio eletrônico;
 Sistemas Bancários;
 Sistemas Acadêmicos;
 Sistemas de Busca;
 Sistemas de localização;
Trabalho em Equipe = muitas áreas envolvidas
 O desenvolvimento de projetos web
que ofereça serviços é quase impossível
ser realizado de forma individual
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Preocupações
 Desenvolvimento de Projetos que possuam
usabilidade além de funcionalidade
 Frase conhecida:
Designer e Programador não são
usuários!
 Necessidade de Critérios de Avaliação dos projetos
desenvolvidos para uma maior aceitação
no mercado.
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Webdesign voltado para o usuário
Processo de Avaliação
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
O ser humano
Hardware
Software
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
OBJETIVOS DA AVALIAÇÃO
 Conhecer o que os usuários desejam
 Avaliar a Funcionalidade do projeto
 O sistema permite ao usuário executar a tarefa desejada?
 Avaliar a Usabilidade
 É fácil aprender a usar o sistema?
 Identificar os problemas enfrentados pelo usuário
 Situações inesperadas ou que
confundem os usuários
 Se nos voltarmos para o desenvolvimento de produtos, os itens
acima são válidos?
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
 Os itens são válidos? Vejam algumas tecnologias
“novas”...
Projeta um teclado virtual em uma superfície plana através de
tecnologia laser. Captura em tempo real a digitação pela intersecção
dos dedos com os raios.
http://www.youtube.com/watch?v=MBIi-suIR-Q&feature=related
Teclado virtual – tecnologia laser R$580,00
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Empresa coreana Cellulon
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
...tecnologias “novas”...
Papel Eletrônico
O Jornal belga De Tijd entregou 200
unidades do e-readers para seus
assinantes testarem
Fonte: Revista Veja
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
A super Interessante testou o Kindle da Amazon (Price:$359.00 ):
http://super.abril.com.br/videos/conteudo_videos_277046.shtml
http://www.youtube.com/watch?v=XdpWnmawiBI&feature=related
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
IPAD
JORNAL DA
GLOBO: Apple
lança o iPad
(27/01/10)
http://www.youtube.com/watc
h?v=TCbPXdIvHlw&NR=1
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
...tecnologias “novas”...
Projetor 3D "real"
O novo equipamento, cria imagens 3D reais, utilizando raios laser que
são focalizados por meio de uma lente até pontos específicos no espaço.
Empresa: http://www.io2technology.com/videos acesso em 30/09/2007 [Vídeo]
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Em Português:
http://uninuni.com/projetor-3d/
Em inglês:
http://gl.ict.usc.edu/Research/3DD
isplay/
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
...tecnologias “novas”...
Interfaces e Tecnologia
“O sistema ideal esconde tanto a tecnologia que o usuário nem nota
sua presença.”
“As pessoas deveriam aprender a tarefa, não a tecnologia.”
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
...tecnologias “novas”...
Modelo Mental
Representação dinâmica sobre qualquer sistema ou objeto, que evolui
naturalmente na mente de um sujeito
“É o modelo que as pessoas tem de si próprias, dos outros, do
ambiente, e das coisas com as quais interagem. Pessoas formam
modelos mentais por meio da experiência, treinamento e instrução”
(Norman)
Atividade:
Crie um modelo mental para um site do Curso de Design da UNIFACS
E por falar nisso ... Design tem site?
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Fatores que determinam
o tipo de avaliação *
(*)
Designing the user Interface. Página 124. Ben Shneiderman
Design e Avaliação de Interfaces Humano-Computador . Página 164.
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
FATORES DETERMINANTES DO TIPO DE AVALIAÇÃO (*)
• Estágio do Projeto - Início, meio ou fim
• Quão inovador é o projeto
• Qual o número esperado de usuários
• Quão crítica é a interface
• Custo do produto e Orçamento disponível para a avaliação
• Tempo disponível
• Experiência dos Designers e da equipe de avaliação
(*)
Designing the user Interface. Página 124. Ben Shneiderman
Design e Avaliação de Interfaces Humano-Computador . Página 164.
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
AVALIAÇÃO DE USABILIDADE
Conjunto de técnicas baseados em se ter avaliadores
inspecionando ou examinando aspectos de uma interface de
usuário relacionados a usabilidade
 Facilidade de Aprendizagem
 Eficiência
 Facilidade de relembrar
 Erros (Eles são catastróficos?)
 Satisfação subjetiva
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
USABILIDADE – DEFINIÇÃO FORMAL
A capacidade que um sistema interativo oferece a seu usuário,
em um determinado contexto de operação, para a realização
de tarefas, de maneira eficaz, eficiente e agradável. (ISO
9241)
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
EXEMPLO DE TÉCNICA DE AVALIAÇÃO
Avaliação Heurística
Fácil / Rápida / Barata
Como funciona?
Um conjunto de avaliadores examina o sistema
julgando as suas características face a um
conjunto de princípios de usabilidade
(heurísticas)
Exemplo:
Heurísticas de Nielsen (1993)
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
AVALIAÇÃO DE USABILIDADE
As heurísticas de Nielsen – As mais conhecidas
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Visibilidade do sistema – Feedback
Compatibilidade do sistema com o mundo Real
Controle do usuário e liberdade (undo e redo)
Consistência e padrões
Prevenção de erros
Reconhecimento ao invés de relembrança
Flexibilidade e eficiência de uso
Estética e design minimalista
Ajudar os usuários a reconhecer diagnosticar e corrigir erros
Help e documentação
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
Visibilidade do sistema – Feedback
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
2. Compatibilidade do sistema com o mundo Real
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
3. Controle do usuário e liberdade (undo e redo)
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
4. Consistência e padrões
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
5. Prevenção de erros
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
5. Prevenção de erros e também falta de consistência
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
5. Prevenção de erros
http://gazetaweb.globo.com/Canais/Empregos/Frame.php?f=InclusaoCandidato.php
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
6. Reconhecimento ao invés de relembrança
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
7. Flexibilidade e eficiência de uso
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
8. Estética e design minimalista
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
9. Ajudar os usuários a reconhecer diagnosticar e corrigir erros
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
As heurísticas de Nielsen
10. Help e documentação
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Qual o Resultado da avaliação Heurística?
• Uma lista de problemas referentes aos princípios violados
 O grau de severidade de cada problema encontrado
• A avaliação não objetiva prover meios de correção
dos problemas
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Atividade para a aula da semana que vem...
 Avaliação do site da Unifacs, utilizando as heurísticas de Nielsen
 O material estará disponível no site.
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
Referências Bibliográficas
NIELSEN, Jakob,; TAHIR, Marie. Homepage: 50 Websites Desconstruídos.
Rio de Janeiro: Campus, 2002.
NIELSEN, Jakob,. Projetando Websites. Rio de Janeiro: Campus, 2000
ROCHA, Helena Vieira da; BARANAUSKAS, Maria Cecília Calani. Design e
Avaliação de Interfaces humano-computador. Campinas, SP: Instituto
de Computação - IC; Núcleo de Informática Aplicada à Educação.
Universidade Estadual de Campinas, 2003.
DIAS, Cláudia. Usabilidade na WEB: Criando Portais mais Acessíveis. Rio
de Janeiro: Alta Books, 2003.
3D PROJETOR: http://gl.ict.usc.edu/Research/3DDisplay/ acesso
2/05/2010
IPAD: http://www.apple.com/br/ipad/
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007
Design de Interfaces – Discussão Inicial
VIDEOS
Sony unveils prototype 360° 3D display
http://www.youtube.com/watch?v=lAS55_RngoQ&feature=related
IPAD
JORNAL DA GLOBO: Apple lança o iPad (27/01/10)
http://www.youtube.com/watch?v=TCbPXdIvHlw&NR=1
http://www.youtube.com/watch?v=HXernkpBEJo
Universidade Salvador
do EstadoUNIFACS
da Bahia/ –Profª
UNEBJosemeire
/ Profª Josemeire
Machado Machado
Dias :: 2010
Dias::::www.meiredias.com
2007