Sumário. ! Importância de páginas bem desenhadas! Dez erros mais comuns em desenho Web ! 1996! 2005 ! ! Pirâmide Invertida!

Transcrição

1 Qual o problema desta página? VI WWW VI.1 Desenho de Páginas Web The Design of Sites, Cap. 1, 4 e 5, D. Duyne, J. Landay, J. Hong Conteúdo ocupa pequena % Jakob Nielsen VI.1 Desenho de Páginas Web 2 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 VI.1 Desenho de Páginas Web 3 VI.1 Desenho de Páginas Web 4 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% VI.1 Desenho de Páginas Web 5 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 VI.1 Desenho de Páginas Web 6 1

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 Dez erros de Web Design! Lista de Nielsen (original 1996)! necessariamente consensual! Nielsen - Autodesignado Web guru!investigador em Hypertexto muito antes da Web! Parte de uma experiência integral! Utilizadores movem-se entre diferentes locais VI.1 Desenho de Páginas Web 7! Excelente lista de difusão / local! VI.1 Desenho de Páginas Web 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 9. Informação desactualizada! 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) VI.1 Desenho de Páginas Web 9 VI.1 Desenho de Páginas Web 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 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 VI.1 Desenho de Páginas Web 12 2

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 VI.1 Desenho de Páginas Web 13 VI.1 Desenho de Páginas Web 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 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 16 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 VI.1 Desenho de Páginas Web 17! URLs são difíceis de enviar por ! Word-wrapping, etc.! Ver shorturl.com! faz caching de urls e devolve urls curtas VI.1 Desenho de Páginas Web 18 3

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! VI.1 Desenho de Páginas Web 19 VI.1 Desenho de Páginas Web 20 Qual o problema com esta página? Redesenhada em 2003 VI.1 Desenho de Páginas Web 21 VI.1 Desenho de Páginas Web Uso gratuito de tecnologia Qual o problema com esta página?! 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 23 VI.1 Desenho de Páginas Web 24 4

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 não funciona... VI.1 Desenho de Páginas Web 25 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 26 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 VI.1 Desenho de Páginas Web 27 VI.1 Desenho de Páginas Web Lista de 2005 (2/2) 1.! Incompatibilidade de Browsers! Optimizado para IExplode 2.! Formulários difíceis de usar! Muito grandes, com perguntas desnecessárias 3.! Falta de Informação e de Contactos sobre a Empresa! Diminui credibilidade (e-commerce) 4.!Layout Congelado com Largura de Página Fixa! Muito espaço em branco, problemas de impressão 5.! Ampliação de Foto Inadequada! Produtos em e-commerce VI.1 Desenho de Páginas Web Lista de ! 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 VI.1 Desenho de Páginas Web 30 5

6 Referências Não se esqueçam! Nielsen s top 10 list! Web pages that suck! Dicas para web-designers! User Interface Engineering! VI.1 Desenho de Páginas Web 31 URLs curtas mais fáceis de memorizar VI.1 Desenho de Páginas Web 32 Artefactos e Prática de Design! Designers criam representações de locais em múltiplos níveis de detalhe 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)! Locais Web iterativamente refinados a todos os níveis Mapas Storyboards Esquemas Simulacros VI.1 Desenho de Páginas Web 33 VI.1 Desenho de Páginas Web 34 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 VI.1 Desenho de Páginas Web 35 VI.1 Desenho de Páginas Web 36 6

7 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 37 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 38 Diagrama da Solução Jornalistas Usam Pirâmide Invertida 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 Título conciso resume artigo Trecho curto apres. conclusões Parágrafo de suporte Detalhes apoiam e ampliam história Sociedade h57 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. VI.1 Desenho de Páginas Web 39 VI.1 Desenho de Páginas Web 40 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! 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 VI.1 Desenho de Páginas Web 41 VI.1 Desenho de Páginas Web 42 7

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. VI.1 Desenho de Páginas Web 43 VI.1 Desenho de Páginas Web 44 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) VI.1 Desenho de Páginas Web 45 VI.1 Desenho de Páginas Web 46 Bons Elos Bons Elos! Nomes de elos compridos e descritivos! Sabemos para onde vamos VI.1 Desenho de Páginas Web 47! Separam elos que mudam de linha! VI.1 Desenho de Páginas Web 48 8

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 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! Bons Elos VI.1 Desenho de Páginas Web 49 VI.1 Desenho de Páginas Web 50 9