VI WWW. VI.2 Padrões de Desenho Web

Transcrição

1 VI WWW The Design of Sites, Cap. 2, D. Duyne, J. Landay, J. Hong Melhor e Pior? 2 IPM 2007/2008 1

2 Melhor e Pior? 3 Resumo da Aula Anterior Importância de páginas bem desenhadas Diferenças entre IU para Web e Desktop 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 4 IPM 2007/2008 2

3 Sumário 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 5 Ciclos de Desenvolvimento Web Exploração Início Descoberta Manutenção & Avaliação Desenhar Prototipar Avaliar Codificação Refinamento Produção 6 IPM 2007/2008 3

4 Processo de Desenho Descoberta Exploração Refinamento Produção segue-se a codificação e manutenção 7 Processo de desenho : Descoberta Descoberta Exploração Refinamento Produção Avaliar necessidades Compreender expectativas de uso determinar âmbito do projecto Características dos utilizadores avaliar site actual e/ou concorrência 8 IPM 2007/2008 4

5 Processo de desenho: Exploração Descoberta Exploração Refinamento Produção Gerar alternativas * visualizar soluções para requisitos identificados * Desenhar informação e navegação * Design gráfico preliminar * seleccionar um design 9 Processo de desenho: Refinamento Descoberta Exploração Refinamento Detalhar desenho * Níveis de detalhe crescente * Forte ênfase no design gráfico * Design iterativo Produção 10 IPM 2007/2008 5

6 Processo de desenho : Produção Descoberta Exploração Refinamento Produção Preparar desenho para entrega * Criar produto final * especificações, linhas-mestras e protótipos * Tantos detalhes quanto possível 11 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 12 IPM 2007/2008 6

7 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) 13 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 14 IPM 2007/2008 7

8 Esquemas Estrutura da página: navegação e informação Primeiro rascunhos depois usando uma ferramenta 15 Simulacros Representação de alta-fidelidade da página final Usando Photoshop (por ex.) Só Look, sem Feel 16 IPM 2007/2008 8

9 Motivação : Padrões de Desenho Maioria dos exemplos da literatura de IPM são críticas a desenhos Norman, Nielsen, etc. Desenho é sobre encontrar soluções Infelizmente, os designers normalmente reinventam Difícil de saber soluções anteriores Complicado reutilizar soluções específicas 17 Como Codificar Técnicas de Desenho? Solução: Usar Padrões de desenho Reutilizam conhecimento sobre coisas que funcionam bem Padrões descrevem O problema aprofundadamente O racional da solução Como aplicar a solução Os compromissos na aplicação da solução Padrões de desenho na Web Emergem da forma como interagimos com o mundo à nossa volta 18 IPM 2007/2008 9

10 Padrões de Desenho Usados pela primeira vez em arquitectura [Alexander 1977] Comunicam problemas de desenho e soluções Tamanho e colocação das portas Como criar espaços sociais tipo jardim da cerveja Como desenhar maçanetas nas portas Não devem ser nem demasiado genéricas nem demasiado específicas Reutilizar solução milhões de vezes sem a repetir duas Adaptados em engenharia de software 19 Padrões de Desenho Podemos fazer o mesmo em Web Design Comunicar problemas de desenho e soluções Como armazenar compras on-line? Adoptar a metáfora do carrinho de compras das lojas reais Como comunicar nova funcionalidade (elos) aos clientes? Elos azuis sublinhados (são a norma, usem-nos!) Combinar hábitos de utilização on e off-line se o Yahoo usa soluções que funcionam, adoptem-nas 20 IPM 2007/

11 Categorias de padrões de desenho Padrões podem-se agrupar em algumas 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 em portais melhorar compatibilidade 21 Home Page: Problema Sem homepage apelativa, ninguém se dará ao trabalho de visitar o resto do vosso local. Inquéritos mostram que milhões de visitantes saem depois de visitar a homepage Maioria já não volta -> perca de vendas, etc. 22 IPM 2007/

12 Home Page: Problema Home Page é a página por onde passam a maioria dos visitantes Devem seduzir os visitantes, mas Equilibrando um grande número de aspectos: Imagem de marca Navegação Conteúdo Carregamento da página 23 Padrões para Home Page Problema Se não for atraente, utilizadores não voltam 6 Regras para uma boa 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 24 IPM 2007/

13 1 - Primeira Impressão Positiva Criar uma primeira boa impressão (não há segunda oportunidade) Fazer testes com utilizadores Usar nomes de elos longos e descritivos Melhor acessibilidade, + fácil carregar + confiança ao utilizador Usar linguagem familiar (ao utilizador) Compreender os utilizadores Quem são? Questionários e entrevistas. Cores e gráficos apropriados? Azul eléctrico & gráficos agressivos bons para desportos radicais, maus para business-to-business ou notícias. 25 Primeira Impressão Positiva (Ex.) Variedade à esquerda Destaques e Artigos de Interesse no centro e à direita Elos fáceis de identificar Subsecções mais abaixo mostram detalhe Páginas pequenas (depois do 11 Set.) mais rápidas a carregar 26 IPM 2007/

14 2 - Focar num tópico principal Concentrar atenção num único tópico de interesse Criar um 1º elemento para ser lido Atrair o olhar para um só elemento gráfico Simples, escorreito e maior que o resto da página Suprimir resto dos elementos deixando uns poucos escolhidos Construir imagem de marca Construam a vossa imagem de marca Apresentem a imagem da vossa companhia O que faz Incluam a proposta de valor promessa aos visitantes Incluam elos para informação de CONFIDENCIALIDADE & POLÍTICAS de USO ABUSIVO -> promovem confiança 28 IPM 2007/

15 4 - Facilitar navegação Tornem a Navegação fácil de usar Deve funcionar à primeira para peritos e noviços Múltiplos modos de navegação ELOS EMBEBIDOS BARRAS DE NAVEGAÇÃO (vários tipos) Tabelas HTML com FUNDOS COLORIDOS para separar secções MARCAS REUTILIZÁVEIS para destacar conteúdo novo. Espaço em Branco para criar grupos Atrair Visitantes a Regressar Atrair pessoas a regressar Conteúdo fresquinho Frequentemente actualizado -» razão para regressar TEXTO atraente Convencer em poucos segundos Texto Vivo, preciso e directo Voz activa Frases curtas 30 IPM 2007/

16 6 - Tornar Carregamento Rápido Façam a página descarregar rápido (2-3 seg.) Se não os clientes vão para outro local Estratégias Texto HTML SEMPRE que possível É a primeira coisa a carregar Imagens requerem 10 transacções Contratem Designer perito em Web Fontes, estilos, cor de fundo Imagens pequenas Arranjo em grelha número mínimo de secções e colunas + Fácil de pesquisar Tornar Carregamento Rápido (Cont.) Se não, os utilizadores mudam-se. Quantos sobram devido à lentidão? CNN Melhorou muito depois do 11 de Set. Yahoo 54K texto + 48K Gráficos Google 4K + 9K 32 IPM 2007/

17 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 33 Diagrama da Solução Info Mais Importante 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 Título Short Blurbs (Sumário) Panorâmica 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 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 34 IPM 2007/

18 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. 35 Pirâmide Invertida (Ex.) Abrir com título conciso Reflecte conteúdo Prosseguir com pontos +importantes Hipertexto para partir informação Utilizadores não desenrolam ou lêem Usar menos texto 50% menos que em papel Estilo de Escrita SIMPLES Frases simples sem exageros ELOS EMBEBIDOS para ajudar utilizadores encontrarem informação Bullets e listas Apoia busca informação 36 IPM 2007/

19 Bullets e listas Título conciso Sumário curto Bullet list curta e fácil de ler Parágrafos de suporte 37 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 38 IPM 2007/

20 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 39 Resultados (cont.) Tempo de descarga pouco significativo Tempo e frustração sem correlação Design Gráfico com pouco efeito Vejam o Yahoo Pode ser importante para estabelecer marca, marketing, etc. Navegação deve reflectir conteúdo Senão, utilizadores acham local menos utilizável Elos genéricos não dão resultados (de navegação) previsíveis 40 IPM 2007/

21 Resultados (cont.) Violavam guião de vendas Standards de interacção humana Navegar e só dar informação pessoal ao Comprar Locais que violam este princípio Falham Utilizadores não gostam de dar info pessoal antes de comprar Necessário inspirar confiança! 41 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 42 IPM 2007/

22 Frames 43 Resultados (cont.) Frames (quadros) Não tão maus, mas Assegurem-se que quadro grande muda como resultado de clicks no quadro pequeno (índice) Não possibilitam elos externos (para dentro de um frameset) 44 IPM 2007/

23 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. 45 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) 46 IPM 2007/

24 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) 47 Bons Elos Nomes de elos compridos e descritivos Sabemos para onde vamos 48 IPM 2007/

25 Bons Elos Separam elos que mudam de linha! 49 Resumo Processo de desenho para a Web Padrões de desenho permitem-nos reutilizar Experiência (conhecimento) de desenho Utilizados em Arquitectura e Eng de Software Padrões de desenho Web 6 Regras para uma boa Home Page 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 Pirâmide Invertida Estudo Usabilidade (resultados inesperados) 50 IPM 2007/

26 Próxima Aula Padrões de desenho WWW E-commerce e Carrinho de compras Personalização de homepages Standards de desenho Web Cascade Style Sheets (CSS) Separação de conteúdo vs apresentação Locais de validação de CSS e HTML 51 IPM 2007/