VI WWW. VI.1 Desenho de Páginas Web

Transcrição

1 VI WWW The Design of Sites, Cap. 1, 4 e 5, D. Duyne, J. Landay, J. Hong Jakob Nielsen Qual o problema desta página? Conteúdo ocupa pequena % 2 1

2 Resumo da Aula Anterior Dispositivos de Entrada de Dados Texto Teclados, Escrita à mão, Fala Coordenadas Ratos e derivados Tabletes 3D Novos dispositivos 3 Sumário Importância de páginas bem desenhadas Diferenças entre IU para Web e Desktop Dez erros mais comuns em desenho Web

3 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% 5 Importância de Bom Desenho Diferença entre sucesso e fracasso Páginas com um desenho Limpo Fáceis de usar 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 6 3

4 Uma Página Web Representa... Vista que o utilizador tem da informação Unidade de navegação O que se obtem quando se carrega num link Endereço para obter informação na rede (URL) Armazenamento de informação No servidor Página é uma unidade atómica que unifica estes conceitos 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 8 4

5 Wizards Diferenças? Desktop Web 9 Onde está Aplicação e Estado? Back (anterior) no desktop Tipicamente desfaz alterações no último passo Back nas páginas Web botão back do navegador? Invisível para servidor não altera estado Elo back na página? servidor pode alterar estado Pode-se impedir o utilizador de usar back? Usando javascript, mas não é uma boa ideia Saídas claramente assinaladas são importantes Óbvias no desktop mas não na web

6 Caixa de Diálogo Desktop 11 Caixa de diálogo na Web 12 6

7 Caixa de diálogo na Web 13 Diferenças entre Diálogos Desktop: Caixas de diálogo pop-up Geralmente mais pequena que janela principal Mantém contexto (por detrás) sobre tarefa principal Web: Nova página (substitui Anterior) necessário andar para trás e para frente para recuperar contexto forward navegador perde valores depois de back (forms) MUITO tempo para carregar páginas Necessário relembrar contexto no tempo! 14 7

8 Soluções Problema do Contexto Repetir contexto acrescentar nova info. na pág. corrente Do ponto de vista do utilizador a página expande-se Optimizar páginas para carregamento rápido Reduzir gráficos Melhorar desempenho do servidor

9 Dez erros de Web Design Lista de Nielsen (original 1996) Não necessariamente consensual Nielsen - Autodesignado Web guru Investigador em Hypertexto muito antes da Web Excelente lista de difusão / local 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 18 9

10 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) 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 (a ver mais tarde) 20 10

11 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 21 O que está errado nesta página? 22 11

12 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 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 24 12

13 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) 25 Qual o problema com estas páginas? 26 13

14 4. URLs Complicadas 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 URL 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 Muitas pessoas não sabem teclar ~ URLs são difíceis de enviar por Word-wrapping, etc. Ver shorturl.com faz caching de urls e devolve urls curtas 27 Qual o problema? 28 14

15 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! 29 Qual o problema com esta página? 30 15

16 Redesenhada em 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 32 16

17 Qual o problema com esta página? 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

18 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) 35 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.Paginas Lentas a carregar 36 18

19 Lista de Problemas de Legibilidade Tipos fixos/pequenos e contraste 2. Links Não-standard Cores, visitados não visitados 3. Flash Utilização gratuita 4. Conteúdo não escrito para a Web Deve ser curto, e directo ao assunto 5. Pesquisa Ineficiente Melhorar os algoritmos de pesquisa 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 9. Arranjo (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 37 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 38 19

20 Referências Nielsen s top 10 list Web pages that suck Dicas para web-designers User Interface Engineering 39 Não se esqueçam URLs curtas mais fáceis de memorizar 40 20

21 Resumo Importância de páginas bem desenhadas Diferenças entre IU para Web e Desktop Wizards Diálogos Dez erros mais comuns em desenho Web Originais de e Próxima aula Processo de desenho para a Web Práticas de Design Padrões de Desenho Web Padrões para construir Home Page 6 Regras para fazer uma boa Home Page Pirâmide Invertida Estudo Usabilidade Web 42 21