VI.2 DESENHO DE PÁGINAS WEB E PADRÕES DE DESENHO WEB. The Design of Sites, Cap. 1, 2, 4 e 5, D. Duyne, J. Landay, J. Hong

Transcrição

1 VI WWW VI.2 DESENHO DE PÁGINAS WEB E PADRÕES DE DESENHO WEB The Design of Sites, Cap. 1, 2, 4 e 5, D. Duyne, J. Landay, J. Hong Jakob Nielsen 1 Melhor e Pior? 2 1

2 Melhor e Pior? 3 Melhor e Pior? 4 2

3 Melhor e Pior? 5 Resumo Aula Anterior o Importância de páginas bem desenhadas o Dez erros mais comuns em desenho Web? 6 3

4 Resumo Aula Anterior o Importância de páginas bem desenhadas o Dez erros mais comuns em desenho Web 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 7 Sumário o Artefactos e Práticas de Design o Pirâmide Invertida o Estudo Usabilidade o Bons Elos o Padrões de Desenho Web Padrões para construir Home Page 6 Regras para fazer uma boa Home Page 8 4

5 DESENHO DE PÁGINAS WEB ARTEFACTOS E PRÁTICA DE DESIGN 9 Artefactos e Prática de Design Mapas Storyboards Esquemas Simulacros 10 5

6 Mapas do Local 11 Storyboards 12 6

7 Esquemas 13 Simulacros 14 7

8 DESENHO DE PÁGINAS WEB ESCRITA EM PIRÂMIDE INVERTIDA 15 Problema Leitura no ecrã 25-30% mais lenta que no papel 16 8

9 Problema Utilizadores querem gratificação instantânea ou saem! 17 Solução Começar pelas conclusões Acrescentar detalhe para quem quiser mais informação 18 9

10 Diagrama da Solução This is the short blurb describing the article Info Mais Importante 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 Título 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 Short text This is some Blurbs 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 (Sumário) Panorâmica 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 Info Menos Importante 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 Informação de suporte Detalhes de Suporte Frases Longas 19 Jornalistas Usam Pirâmide Invertida Sociedade h57 Investigadores afastam cenário de atentado Título conciso resume artigo Caixa negra de Airbus suporta tese de acidente Trecho curto apres. conclusões Parágrafo de suporte Detalhes apoiam e ampliam história 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

11 DESENHO DE PÁGINAS WEB USABILIDADE 21 Estudo Usabilidade Web o Estudo de usabilidade de 9 locais web (1998) C Net, Disney, HP, Fidelity, etc. o Por companhia especializada User Interface Engineering, Jared M. Spool o Dados Análise detalhada da composição do local Tarefa: encontrar informação específica por local Dezenas de horas de observações utilizadores 22 11

12 Estudo Usabilidade Web Resultados Nenhum local particularmente bom Páginas legíveis disfarçam conteúdo-chave 23 Estudo Usabilidade Web Animações (1/2) Aumentam click-through rates, mas 24 12

13 Estudo Usabilidade Web Animações (2/2) Úteis para comunicar informação? 25 Surf or Retrieve Navegar é diferente de Recuperar Informação 26 13

14 DESENHO DE PÁGINAS WEB ELOS 27 Elos curtos know more about Disneyland o Carregar em Disneyland irá mostrar um mapa informação sobre bilhetes mostrar detalhes do parque 28 14

15 Elos longos learn how to read the pricing listings definem expectativas 29 Elos Recomendações o Elos embebidos em parágrafos são má opção o Elos textuais antes de elos gráficos o Elos intra-página podem confundir o Elos que saltam de linha confundem 30 15

16 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 o Evitar links muito curtos do tipo: Carregue aqui ou Aqui (lei de Fitts) 31 Exemplo de bons elos 32 16

17 PADRÕES DE DESENHO 33 Padrões de Desenho Motivação Maioria dos exemplos são críticas a desenhos Desenho é sobre encontrar soluções Mas designers reinventam 34 17

18 Como codificar técnicas de desenho? o Solução: Usar Padrões de desenho Reutilizam conhecimento sobre coisas que funcionam bem descrevem: O problema aprofundadamente O racional da solução Como aplicar a solução Os compromissos na aplicação da solução 35 Padrões de Desenho na Web Emergem da forma como interagimos com o mundo à nossa volta 36 18

19 Padrões de Desenho o Usados pela primeira vez em arquitectura [Alexander 1977] o Comunicam problemas de desenho e respectivas soluções o Não devem ser nem demasiado genéricas nem demasiado específicas o Adaptados em engenharia de software Ver Design Patterns do GoF 37 Padrões de Desenho Podemos fazer o mesmo em Web Design! Comunicar problemas de desenho e respectivas soluções

20 Padrões de Desenho Categorias navegação estilo de escrita arranjo (layout) consistência marca adaptação homepages busca navegação pelo conteúdo desenhar conteúdo self service apoiar e-commerce métodos e-merchandising acesso rápido oferecer ajuda política de confidencialidade melhorar localização melhorar compatibilidade 39 Homepage Página por onde passa a maioria dos visitantes 40 20

21 Homepage: Problema Sem homepage apelativa, ninguém se dará ao trabalho de visitar o resto do vosso local Milhões de visitantes saem depois de visitar homepage 41 Homepage Deve seduzir os visitantes, mas 42 21

22 Padrões para a Homepage 1. Primeira impressão positiva 2. Focar num tópico principal 3. Construir imagem de marca 4. Facilitar navegação 5. Atrair visitantes a regressar 6. Tornar carregamento rápido Primeira impressão positiva 44 22

23 IV.4 Análise de Dados da Avaliação 2. Focar num tópico principal Construir imagem de marca 46 23

24 3. Construir imagem de marca Construir imagem de marca 48 24

25 4. Facilitar navegação Atrair Visitantes a Regressar 50 25

26 6. Tornar Carregamento Rápido Tornar Carregamento Rápido Yahoo! 30K texto 100K gráficos Google 3K texto 8K gráficos 52 26

27 Resumo o Artefactos e Práticas de Design o Pirâmide Invertida o Estudo Usabilidade o Bons Elos o Padrões de Desenho Web Padrões para construir Home Page 6 Regras para fazer uma boa Home Page 53 Próxima Aula o Padrões de desenho Web Carrinho de Compras o Personalização de Home Pages o Acessibilidade 54 27