Qual o problema desta página? VI WWW Conteúdo ocupa pequena % The Design of Sites, Cap. 1, 4 e 5, D. Duyne, J. Landay, J. Hong http://www.useit.com/alertbox/, Jakob Nielsen 2 Resumo da Aula Anterior Sumário Dispositivos de Entrada de Dados Texto Importância de páginas bem desenhadas Teclados, Escrita à mão, Fala Diferenças entre IU para Web e Desktop Coordenadas Ratos e derivados Dez erros mais comuns em desenho Web Tabletes 1996 3D Novos dispositivos 2005 2007 3 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% 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 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 5 6 1
Uma Página Web Representa... Desenho Web vs Desktop GUI Vista que o utilizador tem da informação Unidade de navegação O que se obtem quando se carrega num link Diversidade de dispositivos (Web) Difícil de antecipar o que irão usar (TV Interactiva, PDAs, Tlms) Ser diferente é uma feature Endereço para obter informação na rede (URL) Armazenamento de informação No servidor Utilizadores controlam a navegação Por caminhos nunca dantes antecipados Caem do céu via motores de pesquisa/bookmarks Página é uma unidade atómica que unifica estes conceitos Parte de uma experiência integral Utilizadores movem-se entre diferentes locais 7 8 Wizards Diferenças? 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 Desktop Web 9 Saídas claramente assinaladas são importantes Óbvias no desktop mas não na web... 10 Caixa de Diálogo Desktop Caixa de diálogo na Web 11 12 2
Caixa de diálogo na Web 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! 13 14 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 15 16 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 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 Excelente lista de difusão / local http://www.useit.com/alertbox/ 17 18 3
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 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 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) 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) 19 20 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 O que está errado nesta página? 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 22 6. Páginas muito longas 6. Páginas muito longas (cont) 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 23 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 4
5. Páginas Orfãs Qual o problema com estas páginas? 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 26 4. URLs Complicadas Não devem expor endereços da máquina Qual o problema? 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 email Word-wrapping, etc. Ver shorturl.com fazcaching de urls e devolve urls curtas 27 28 3. Animações contínuas Qual o problema com esta página? 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 30 5
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 31 32 Qual o problema com esta página? 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... 33 34 Frames (cont.) Resumo (Lista original 1996) 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 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 6
Lista de 2005 Lista de 2007 1. 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 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 37 38 Referências Não se esqueçam 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 URLs curtas mais fáceis de memorizar 39 40 Resumo Próxima aula Importância de páginas bem desenhadas Processo de desenho para a Web Diferenças entre IU para Web e Desktop Práticas de Design Wizards Padrões de Desenho Web Diálogos Padrões para construir Home Page Dez erros mais comuns em desenho Web 6 Regras para fazer uma boa Home Page Originais de 1996 Pirâmide Invertida 2005 e 2007 Estudo Usabilidade Web 41 42 7