Upload
lediep
View
212
Download
0
Embed Size (px)
Citation preview
1
VI.1 – Desenho de Páginas Web
VI – WWW
VI.1 – Desenho de Páginas Web
The Design of Sites, Cap. 1, 4 e 5,
D. Duyne, J. Landay, J. Hong
http://www.useit.com/alertbox/ , Jakob Nielsen
VI.1 – Desenho de Páginas Web 2
Qual o problema desta página ?
Conteúdo ocupa pequena %
VI.1 – Desenho de Páginas Web 3
Resumo da Aula Anterior
• Dispositivos de Entrada de Dados
– Texto
• Teclados, Escrita à mão, Fala
– Coordenadas
• Ratos e derivados
• Tabletes
• 3D
– Novos dispositivos
VI.1 – Desenho de Páginas Web 4
Sumário
• Importância de páginas bem desenhadas
• Dez erros mais comuns em desenho Web
– 1996
– 2005
– 2007
• Pirâmide Invertida
• Bons Elos
VI.1 – Desenho de Páginas Web 5
Bom desenho pode aumentar vendas
• Artigo NY Times, 8/30/99 (site da IBM) – “Most popular feature was … search … because
people couldn't figure out how to navigate the site“
– “The second most popular feature was the help button, because the search technology was so ineffective.”
• Depois do redesenho, – Uso do botão "help" diminuiu 84%
– Vendas aumentaram 400% http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html
VI.1 – Desenho de Páginas Web 6
Importância de Bom Desenho
• Diferença entre sucesso e fracasso
• Páginas – Com desenho Limpo, Fáceis de usar e Centradas no
utilizador
• Conseguem – Reduzir o número de erros do utilizador – Reduzir o tempo necessário para encontrar coisas – Aumentar satisfação geral do utilizador (diz a outros)
• Exemplo de Sucesso: – Funciona melhor que os outros motores de busca
2
VI.1 – Desenho de Páginas Web
VI.1 – Desenho de Páginas Web 7
Desenho Web vs Desktop GUI
• Diversidade de dispositivos (Web) – Difícil de antecipar o que irão usar
(TV Interactiva, PDAs, Tlms)
– Ser diferente é uma “feature”
• Utilizadores controlam a navegação – Por caminhos nunca dantes antecipados – Caem do céu via motores de pesquisa/Bookmarks
• Parte de uma experiência integral – Utilizadores movem-se entre diferentes locais
VI.1 – Desenho de Páginas Web 8
Dez erros de Web Design
• Lista de Nielsen (original 1996) – http://www.useit.com/alertbox/9605a.html – Não necessariamente consensual
• Nielsen - Autodesignado Web guru – Investigador em Hypertexto muito antes da
Web
• Excelente lista de difusão / local – http://www.useit.com/alertbox/
VI.1 – Desenho de Páginas Web 9
10. Tempos de carregamento longos
• Regra dos 10 segundos – Tempo que utilizadores levam a perder interesse
• Consistente com estudos tradicionais de factores humanos
• 15 segundos podem ser aceitáveis na Web – utilizadores habituados a esperar...
– Mas só páginas mais importantes
• Web está mais lenta – não mais rápida
VI.1 – Desenho de Páginas Web 10
• Contratem um “jardineiro” para a equipa – “root out the weeds and replant the flowers”
• Pessoas preferem criar conteúdo a mantê-lo
• Modo barato de melhorar conteúdo – Se ainda relevante -> elo para páginas novas – Senão removê-las
• Conteúdo desactualizado => perca de confiança (importante para e-commerce)
9. Informação desactualizada
VI.1 – Desenho de Páginas Web 11
8. Cores de elos não padronizadas
• Elos para
– Páginas não visitadas são azuis
– Páginas já visitadas usar púrpura/vermelho
• Não alterem estas cores
– uma das poucas ajudas universais à navegação
– consistência importante para aprendizagem
• não sublinhem outros objectos com azul / vermelho!
– Este é um padrão de Web Design VI.1 – Desenho de Páginas Web 12
7. Falta de apoio à navegação • Utilizadores não conhecem o vosso local
– Sempre difícil encontrar informação
– Comunicar sentido claro de estrutura e localização
• Comunicar estrutura do local – Disponibilizem um Mapa do Site
• Para utilizadores saberem onde estão e o que podem visitar
– Disponibilizem Bom mecanismo de busca • Porque mesmo a melhor navegação não basta
• Expectativas dos utilizadores – Logotipo no canto superior esquerdo ligado à home page
– Estrutura de outline indicando a localização actual
3
VI.1 – Desenho de Páginas Web
VI.1 – Desenho de Páginas Web 13
O que está errado nesta página ?
VI.1 – Desenho de Páginas Web 14
6. Páginas muito longas
• Muitos utilizadores não desenrolam página – parte não visível não é lida
• Conteúdo crítico e navegação – Devem estar no topo da página
• Páginas de informação podem ser maiores – Leitores interessados irão pesquisar o conteúdo – É uma boa ideia ser conciso
• Importância decrescente – Procurar não usar mais de 3 ecrãs – Informação no TOPO dominante
VI.1 – Desenho de Páginas Web 15
6. Páginas muito longas (cont)
• Não consensual: – Jared Spool – os utilizadores
habituaram-se a desenrolar páginas se (e só se?) a página der pistas de “haver conteúdo mais para baixo”
– Páginas longas versus páginas curtas
• Reduzir tempos de carregamento
VI.1 – Desenho de Páginas Web 16
5. Páginas Orfãs
• Todas as páginas devem indicar a que local pertencem – Utilizadores podem “cair do céu” e não da
home-page. – Acesso via Google, Altavista, Lycos, etc. – Ser acessível sem ser pela home page
• Todas as páginas deveriam ter – Elo para home page – Indicação do local a que pertencem e posição
na estrutura do local (tornar visível o estado do sistema)
VI.1 – Desenho de Páginas Web 17
Qual o problema com estas páginas?
VI.1 – Desenho de Páginas Web 18
4. URLs Complicadas • URLs devem ser legíveis por pessoas
– Nomes reflectirem natureza do espaço informação – Por vezes preciso escrever URL -> minimizar erros
• Usar letra minúscula, nomes curtos sem caracteres especiais
• Não devem expor endereços da máquina
• Utilizadores tentam descodificar URLs das páginas – Para inferir a estrutura do local
• Falta de apoio à navegação e sensação de localização
• URLs são difíceis de enviar por email – Word-wrapping, etc. – Ver shorturl.com
• faz caching de urls e devolve urls curtas
4
VI.1 – Desenho de Páginas Web
VI.1 – Desenho de Páginas Web 19
Qual o problema ?
VI.1 – Desenho de Páginas Web 20
3. Animações contínuas
• Não incluam animações intermináveis – Imagens em movimento estimulam a visão
periférica • Excluam animações, texto que desenrola, marquees
• Utilizadores desligam-nas – Logo, não incluam nada de importante nestas!
• Dêem paz e descanso aos utilizadores – para lerem o texto!
VI.1 – Desenho de Páginas Web 21
Qual o problema com esta página ?
VI.1 – Desenho de Páginas Web 22
Redesenhada em 2003
VI.1 – Desenho de Páginas Web 23
2. Uso gratuito de tecnologia • Não tentem atrair os utilizadores desta forma
– Pode ser que atraiam os “nerds” mas os utilizadores “normais” preocupam-se com conteúdo e serviço.
• Se o sistema/navegador estoira – Não vão voltar
• Ex. usem VRML se a vossa informação “é” 3D – Desenho de arquitectura ou planeamento de cirurgia – É apropriado se venderem programas de CAD/GIS,VR, etc.
• Ex. Introduções “Flash” – Nem sempre se traduzem em mais valia – Deve existir forma de contornar
• Browser pode não ter plug-in
VI.1 – Desenho de Páginas Web 24
Qual o problema com esta página ?
5
VI.1 – Desenho de Páginas Web
VI.1 – Desenho de Páginas Web 25
1. Frames • Confundem utilizadores
– Conflito c/ modelo mental da página web • Sequência de acções <> acto único
• Unidade de navegação <> unidade de visualização
• Perde-se previsibilidade das acções utilizador – Que informação aparece onde quando se clica ?
• Não é possível fazer bookmarks da página e regressar... – Corrigido no Explorer 5
• URLs deixam de funcionar (vão para pag 1 frameset)
• Não é possível partilhar com outros – Enviar elos por email não funciona...
VI.1 – Desenho de Páginas Web 26
Frames (cont.)
• Motores de busca têm problemas c/ frames – que parte dos framesets incluir nos índices ?
• Primeiros surveys demonstram – Preferência por locais sem frames – Inquéritos mais recentes confirmam ~70-90%
• Nota: desenhadores experientes podem usar frames de forma eficaz
• Amazon.com seria impossível com frames (design to be linked to)
VI.1 – Desenho de Páginas Web 27
Resumo (Lista original 1996)
1. Frames 2. Uso Gratuito de Tecnologia 3. Animações contínuas 4. URLs complicadas 5. Páginas órfãs 6. Páginas (demasiado) longas 7. Falta de apoio à navegação 8. Cores de elos não padronizadas 9. Informação Desactualizada 10. Páginas Lentas a carregar
VI.1 – Desenho de Páginas Web
Lista de 2005 (1/2)
1. Problemas de Legibilidade • Fontes fixas/pequenas e contraste
2. Links Não-standard • Cores, visitados não visitados
3. Flash • Utilização sem utilidade
4. Conteúdo não escrito para a Web • Deve ser curto, e directo ao assunto
5. Pesquisa Ineficiente • Melhorar os algoritmos de pesquisa
VI.1 – Desenho de Páginas Web
Lista de 2005 (2/2)
6. Incompatibilidade de Browsers • Optimizado para “IExplode”
7. Formulários difíceis de usar • Muito grandes, com perguntas desnecessárias
8. Falta de Informação e de Contactos sobre a Empresa • Diminui credibilidade (e-Commerce)
9. Layout Congelado com Largura de Página Fixa • Muito espaço em branco, problemas de impressão
10. Ampliação de Foto Inadequada • Produtos em e-Commerce
VI.1 – Desenho de Páginas Web 30
Lista de 2007
1. Pesquisa ineficiente 2. Ficheiros PDF para leitura Online 3. Cor de elos visitados não muda 4. Texto ilegível (muito texto) 5. Fontes com tamanho fixo (pequeno) 6. Títulos das páginas com pouca visibilidade para
os motores de busca 7. Elementos da página semelhantes a anúncios 8. Violação de convenções de desenho
(consistência) 9. Abertura de novas janelas do navegador 10. Não responder às perguntas do utilizador
6
VI.1 – Desenho de Páginas Web
VI.1 – Desenho de Páginas Web 31
Referências
• Nielsen’s top 10 list
– http://www.useit.com/alertbox/9605.html
• Web pages that suck
– http://www.webpagesthatsuck.com/
• Dicas para web-designers
– http://www.dsiegel.com/tips/
• User Interface Engineering
– http://www.uie.com
VI.1 – Desenho de Páginas Web 32
Não se esqueçam
URLs curtas mais fáceis de memorizar
VI.1 – Desenho de Páginas Web 33
Artefactos e Prática de Design
• Designers criam representações de locais em múltiplos níveis de detalhe
• Locais Web iterativamente refinados a todos os níveis
Mapas Storyboards Esquemas Simulacros
VI.1 – Desenho de Páginas Web 34
Mapas do local • Vista de alto nível do local sem grande detalhe • Relações entre páginas (navegação) • Rascunhos ou usando ferramentas (Powerpoint, Visio)
VI.1 – Desenho de Páginas Web 35
Storyboards • Sequências de Interacção, detalhe mínimo ao
nível da página • Identifica os links em cada página • Rascunhos em Papel e lápis
VI.1 – Desenho de Páginas Web 36
Esquemas
• Estrutura da página: navegação e informação • Primeiro rascunhos depois usando uma
ferramenta
7
VI.1 – Desenho de Páginas Web
VI.1 – Desenho de Páginas Web 37
Simulacros • Representação de alta-fidelidade da página final • Usando Photoshop (por ex.)
– Só Look, sem Feel
VI.1 – Desenho de Páginas Web 38
Escrita em Pirâmide Invertida
• Problema – Leitura no ecrã 25-30% mais lenta que no
papel – Surfers querem gratificação instantânea ou
saem – As páginas devem
• Descarregar depressa • Ser fáceis de navegar • Rápidas de consultar
• Solução – Começar pelas conclusões – Acrescentem detalhe para quem quiser +
informação
VI.1 – Desenho de Páginas Web 39
Diagrama da Solução
This is the short blurb describing the article
This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing w This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text
To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t know. I am in love with XXX To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t
know. This is some nonsensical text This is some the dog is barking nonsensical text This is some nonsensical text Does this work at all? I don’t know. What is love? What is the good life? What is, and is not? That which
is, is. The world is all that exists. Nothing unreal exists, metaphysics law #1. This is some the the the the nonsensical text This is some nonsensical text Does this work at all? I don’t know. This is Is there a god? Are we a quantum accident? Will we ever know? Are there questions that should never be asked? What is the nature of goodness? Why are we so mean to each other? How can we be so cruel to one another?
This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works
This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical What is good in life, he asks? That is a question we may never have an answer to. is some nonsensical text This is some nonsensical text This is some
Info Mais Importante
Info Menos Importante
.
.
.
Título Short Blurbs
(Sumário) Panorâmica
Informação de suporte Detalhes de Suporte
Frases Longas
VI.1 – Desenho de Páginas Web 40
Jornalistas Usam Pirâmide Invertida
www.publico.pt Sociedade 13-11-2001 - 13h57
Investigadores afastam cenário de atentado Caixa negra de Airbus suporta tese de acidente
O estudo das conversas registadas pela caixa negra do Airbus 300 que se despenhou ontem em Nova Iorque suporta a tese de que se tratou de um acidente.
Os investigadores asseguraram que não foram detectados sons estranhos que levem a equacionar a hipótese de um atentado como causa do sinistro, noticia o "El Mundo". Uma falha no motor terá provocado a explosão de uma das turbinas que, segundo os investigadores, estavam para ser revistas em breve. Segundo a BBC, os estudos preliminares das autoridades americanas já confirmavam que a queda do avião teria tido origem num problema mecânico, afastando o cenário de atentado. O avião devia ter descolado às 08h40 locais mais a sua saída atrasou-se até às 09h13. Todo o equipamento tinha sido revisto por raio-x antes do embarque. O contacto por rádio entre o Airbus e a torre de controlo do aeroporto perdeu-se quatro minutos depois da descolagem. A morte de 260 passageiros, na sua maioria dominicanos, está já confirmada, mas o número de vítimas ainda não é definitivo, visto que é quase certo que haja mortos no solo, na sequência da queda do aparelho sobre o bairro de Queens.
Título conciso resume artigo
Trecho curto apres. conclusões
Parágrafo de suporte
Detalhes apoiam e ampliam história
VI.1 – Desenho de Páginas Web 41
Estudo Usabilidade Web
• Estudo de usabilidade de 9 locais web (1998)
– C|Net, Disney, HP, Fidelity, etc.
• Por companhia especializada – User Interface Engineering, Jared M. Spool
– http://www.uie.com
• Dados – dezenas de horas de observações utilizadores
– Análise detalhada da composição do local
– Tarefa : encontrar informação específica por local
VI.1 – Desenho de Páginas Web 42
Resultados
• Nenhum local particularmente bom
• Os Maus
– Home pages ofereciam poucas pistas sobre
conteúdo
• Páginas “legíveis” eram pouco eficazes
– Pessoas não lêem, PROCURAM conteúdo
– Frases bem construídas disfarçam conteúdo
chave
8
VI.1 – Desenho de Páginas Web
VI.1 – Desenho de Páginas Web 43
Animações
• Aumentam click-through rates, mas – Irritam utilizadores
• desenrolam, tapam com as mãos...
• Deslocavam rato para não fixar animações!
• Animação dificulta leitura e busca de informação
• Úteis para comunicar informação? – Não conseguiram encontrar exemplos disto
• “Surfing” <> de recuperação informação – Talvez não seja possível desenhar local para
ambos
VI.1 – Desenho de Páginas Web 44
Elos
• Problemas com elos curtos – ... Disneyland ...
• Carregar em Disneyland irá mostrar um mapa, informação sobre bilhetes, etc?”
• Nomes longos definem expectativas – “How to Read the Pricing and Rating Listings”
– “Pricing (How to Read Pricing & Rating Listings)
• Elos embebidos em parágrafos são piores – Difícil encontrar informação
– Não é possível ficar “pela rama”, obrigam a ler.
VI.1 – Desenho de Páginas Web 45
Elos (cont.)
• Elos textuais utilizados antes de elos gráficos – Elos gráficos não dão pista visual (mudança de cor)
• Elos intra-página – Podem confundir se o utilizador já desenrolou
página e leu o material
– Usem páginas mais curtas para evitar
• Elos que “saltam de linha” confundem os utilizadores (ocupam duas linhas)
VI.1 – Desenho de Páginas Web 46
Elos - Resumo
• O sucesso de um elo depende de:
– Quão bem o utilizador consegue prever
para onde o link o leva
– Quão bem o utilizador consegue
diferenciar um link de outros próximos
• Evitar links muito curtos do tipo:
“Carregue aqui” ou “Aqui” (lei de Fitts)
VI.1 – Desenho de Páginas Web 47
Bons Elos
• Nomes de elos compridos e descritivos – Sabemos para onde vamos
VI.1 – Desenho de Páginas Web 48
Bons Elos
• Separam elos que mudam de linha!
9
VI.1 – Desenho de Páginas Web
VI.1 – Desenho de Páginas Web 49
Resumo
• Importância de páginas bem desenhadas
• Dez erros mais comuns em desenho Web
– Originais de 1996
– 2005 e 2007
• Pirâmide Invertida
• Estudo Usabilidade
– Bons Elos
VI.1 – Desenho de Páginas Web 50
Próxima aula
• Padrões de Desenho Web
– Padrões para construir Home Page
• 6 Regras para fazer uma boa Home Page
– Carrinho de Compras
• Personalização de Home Pages
• Acessibilidade