Uma visão Geral sobre Webdesign e Interfaces
Uma conversa sobre Internet e Design para Web
Avaliação de Interfaces
Josemeire Machado Dias 2012
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Novas visão
atividades,
novassobre
funçõesWebdesign e Interfaces
Uma
Geral
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
 Tem mais???
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
Geralda
sobre
Webdesign
– O sentido
PalavraWebdesign e Interfaces
Mecanismos
de Interação
Representação
Visual
Universidade do Estado da Bahia – UNEB /
Webdeveloper
(Programador)
Webdesign
(O “artista”)
Profª Josemeire Machado Dias :: 2012
Uma(épocas)
visãodo
Geral
sobre Webdesign e Interfaces
Fases
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...
 E a Web 3.0...
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma(épocas)
visãodo
Geral
sobre Webdesign e Interfaces
Fases
Web design
Web 3.0
 “A Web 3.0 propõe-se a ser, num período de cinco a dez anos,
a terceira geração da Internet. A primeira, Web 1.0, foi a
implantação e popularização da rede em si; a Web 2.0 é a que
o mundo vive hoje, centrada nos mecanismos de busca como
Google e nos sites de colaboração do internauta, como
Wikipedia, YouTube e os sites de relacionamento social, como
o Facebook e Orkut. A Web 3.0 pretende ser a organização e o
uso de maneira mais inteligente de todo o conhecimento já
disponível na Internet”.
Exemplo:
 http://www.cortex-intelligence.com/engine/
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma(épocas)
visãodoGeral
sobre Webdesign e Interfaces
Fases
Web design
 Sites participativos = Chamado Web2.0
Fonte da Imagem: http://citec.crpconsultores.com.br/
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma(épocas)
visãodoGeral
sobre Webdesign e Interfaces
Fases
Web design
 Sites participativos = Chamado Web2.0
Vídeo com a opinião de Tas...
Marcelo Tas | O que é Web 2.0
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma
visãodoGeral
sobre Webdesign e Interfaces
Fases
(épocas)
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
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma (épocas)
visão Geral
sobre
Webdesign e Interfaces
Fases
do Web
design
 Exemplo de Mashup
*
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma (épocas)
visão Geral
sobre
Webdesign e Interfaces
Fases
do Web
design
Vídeo extraído do Olhar Digital | Sobre Mashup
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
Webdesign x Design Impresso
O que diferencia um do outro?
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
Geral
sobre Webdesign e Interfaces
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
 Chrome, Opera, Explorer, Mozilla
 Da versão do Navegador
 Do sistema operacional
 Da existência de plug-ins, etc.
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visãox Geral
Webdesign e Interfaces
Webdesign
Designsobre
Impresso
 Do Navegador utilizado
 Internet Explorer e Fire Fox
Os controles somem e não
funciona o vídeo
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
Geral sobre
Webdesign e Interfaces
Webdesign
x Design
Impresso
 Da Resolução de tela do usuário;

Fonte: Revista INFO 2010.
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visãox Geral
Webdesign e Interfaces
Webdesign
Designsobre
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
aqui em pp
Uma vê
visão
Geral
sobre Webdesign e Parei
Interfaces
Quem
o seu
projeto
 A utilização de navegadores no Mundo
2006
2007
Atualização do gráfico 05/2007

78% Internet Explorer

15,4% usam o FireFox
2010
Fonte: Revista Info Exame. Edição de abril de 2006
Fonte:http://info.abril.com.br/aberto/infonews/052007/04052
007-3.shl Acesso 03/10/2007
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma vê
visão
Geral
sobre Webdesign e Interfaces
Quem
o seu
projeto
 Ainda tem os Daltônicos...
Teste de cores de Ishihara
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
aqui em PV
Uma visão para
Geral
sobre Webdesign e Parei
Interfaces
Ferramentas
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
Geral sobre Webdesign e Interfaces
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
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
sobre
e Interfaces
Tamanho
das Geral
Imagens
paraWebdesign
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
Geralpara
sobre
Webdesign e Interfaces
Escolha
de Fontes
o Webdesign
Como deve ser a escolha de fontes para a internet?
O que sabemos sobre isso?
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
Geralpara
sobre
Webdesign e Interfaces
Escolha
de Fontes
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=http://www.w3.org/1999/xhtml>
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>Teste
de Meire para Informática 2012</title>
<style type="text/css“>
@font-face {
font-family: Curlz___;
font-style: normal;
font-weight: normal;
src: url("Curlz___.TTF");
}
body {
font: 15pt Curlz___;
}
</style>
</head>
<body>Josemeire Machado Dias na aula de Informática da UNEB
</body>
</html>
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
Geral
Webdesign e Interfaces
Sistema
de Cores
dosobre
Webdesign
Green
Red
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
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão para
Geral
sobre Webdesign e Interfaces
Metodologia
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.
 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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma de
visão
Geral
sobre
Tipos
projetos
para
WebWebdesign e Interfaces
 Portais Horizontais e Verticais;
 Comércio eletrônico;
 Sistemas Bancários;
 Sistemas Acadêmicos;
 Sistemas de Busca;
 Sistemas de localização;
Trabalho em Equipe
 O desenvolvimento de projetos web
que ofereça serviços é quase impossível
ser realizado de forma individual
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
Webdesign voltado para o usuário
Processo de Avaliação
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
O ser humano
Hardware
Software
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visãoDA
Geral
sobre Webdesign e Interfaces
OBJETIVOS
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
 Isso tb é válido para produtos?
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma
visão Geral
sobre Webdesign e Interfaces
...tecnologias
“novas”...
Modelo Mental
Representação dinâmica sobre qualquer sistema
ou objeto, que evolui naturalmente na mente de
um sujeito.
Assim eu entendo melhor:
“É 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)
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
Geral sobre
Webdesign
e Interfaces
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visãoDE
Geral
sobre Webdesign e Interfaces
AVALIAÇÃO
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral
sobre Webdesign
e Interfaces
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
Geral de
sobre
Webdesign e Interfaces
Exemplo
de técnica
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão
Geral sobre Webdesign e Interfaces
Avaliação
de Usabilidade
As heurísticas de Nielsen – As mais conhecidas
1.
2.
3.
4.
5.
6.
7.
8.
9.
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
10. Help e documentação
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
Visibilidade do sistema – Feedback
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
2. Compatibilidade do sistema
com o mundo Real
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
2. Compatibilidade do sistema com o mundo Real
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
3. Controle do usuário e liberdade (undo e redo)
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
4. Consistência e padrões
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
5. Prevenção de erros
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
5. Prevenção de erros e também falta de consistência
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
5. Prevenção de erros
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
5. Prevenção de erros
http://gazetaweb.globo.com/Canais/Empregos/Frame.php?f=InclusaoCandidato.php
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
6. Reconhecimento ao invés de relembrança
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
7. Flexibilidade e eficiência de uso
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
7. Flexibilidade e eficiência de uso
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
8. Estética e design minimalista
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
9. Ajudar os usuários a reconhecer diagnosticar e corrigir erros
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
9. Ajudar os usuários a reconhecer diagnosticar e corrigir erros
Se vc nem tem mais o e-mail com o
qual vc se inscreveu – Já era...
Não existe nem a opção de enviar a
senha para seu e-mail.
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
As heurísticas de Nielsen
10. Help e documentação
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Qual
o Resultado
avaliação
Heurística?
Uma
visão da
Geral
sobre
Webdesign
e Interfaces
• 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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
Atividade com pontuação
 Avaliação do site da Uneb, utilizando as heurísticas de Nielsen
 Vou colocar o material no site.
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
Referências
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 do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012
Uma visão Geral sobre Webdesign e Interfaces
Referências
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
Sobre a pesquisa de Navegadores:
http://www.easyseo.com.br/navegadores/a-guerra-dos-navegadores-googlechrome-mozilla-firefox-e-microsoft-internet-explorer
Sobre Mashup
http://www.youtube.com/watch?v=osdiMWFGEBs&feature=related
Vídeo do Marcelo Tas
http://www.youtube.com/watch?v=jxRTdFyjQ8o
Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012