vi.1 – desenho de páginas web · – aumentar satisfação geral do utilizador (diz a outros)...

1

VI.1 – Desenho de Páginas Web

VI – WWW


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 %


Resumo da Aula Anterior

• Dispositivos de Entrada de Dados

– Texto

• Teclados, Escrita à mão, Fala

– Coordenadas

• Ratos e derivados

• Tabletes

• 3D

– Novos dispositivos


Sumário

• Importância de páginas bem desenhadas

• Dez erros mais comuns em desenho Web

– 1996

– 2005

– 2007

• Pirâmide Invertida

• Bons Elos


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


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



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


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/


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


• 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


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



O que está errado nesta página ?


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


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


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)


Qual o problema com estas páginas?


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



Qual o problema ?


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!


Qual o problema com esta página ?


Redesenhada em 2003


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


Qual o problema com esta página ?

5



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...


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)


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


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


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


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



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


Não se esqueçam

URLs curtas mais fáceis de memorizar


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


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)


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


Esquemas

• Estrutura da página: navegação e informação • Primeiro rascunhos depois usando uma

ferramenta

7



Simulacros • Representação de alta-fidelidade da página final • Usando Photoshop (por ex.)

– Só Look, sem Feel


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


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


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


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


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



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


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.


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)


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)


Bons Elos

• Nomes de elos compridos e descritivos – Sabemos para onde vamos


Bons Elos

• Separam elos que mudam de linha!

9



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


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

vi.1 – desenho de páginas web · – aumentar satisfação geral do utilizador (diz a outros)...

Documents