Post on 11-Jan-2019
VI.2 – Padrões de Desenho Web
1
VI – WWW
VI.2 – Padrões de Desenho Web
The Design of Sites, Cap. 2,
D. Duyne, J. Landay, J. Hong
VI.2 – Padrões de Desenho Web 2
Resumo da Aula Anterior
•! Importância de páginas bem desenhadas
•! 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
VI.2 – Padrões de Desenho Web 3
Melhor e Pior?
VI.2 – Padrões de Desenho Web 4
Melhor e Pior?
VI.2 – Padrões de Desenho Web 5
Sumário
•!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
VI.2 – Padrões de Desenho Web 6
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
VI.2 – Padrões de Desenho Web
2
VI.2 – Padrões de Desenho Web 7
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
VI.2 – Padrões de Desenho Web 8
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
VI.2 – Padrões de Desenho Web 9
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
VI.2 – Padrões de Desenho Web 10
Categorias de padrões de desenho
Padrões podem-se agrupar em algumas categorias:
•! 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
•! navegação
•! estilo de escrita
•! Arranjo (layout) •! consistência •! marca •! adaptação •! homepages
•! busca •! navegação pelo conteúdo
VI.2 – Padrões de Desenho Web 11
Home Page: Problema •! Home Page é a página por
onde passam a maioria dos visitantes
•! 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.
VI.2 – Padrões de Desenho Web 12
Padrões para Home Page
•! 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
VI.2 – Padrões de Desenho Web
3
VI.2 – Padrões de Desenho Web 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.
VI.2 – Padrões de Desenho Web 14
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
VI.2 – Padrões de Desenho Web 15
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
VI.2 – Padrões de Desenho Web 16
3 - 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
VI.2 – Padrões de Desenho Web 17
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
VI.2 – Padrões de Desenho Web 18
5 - 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
VI.2 – Padrões de Desenho Web
4
VI.2 – Padrões de Desenho Web 19
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
•! Yahoo –! 30K texto + 100K Gráficos
•! Google –! 3K + 8K
VI.2 – Padrões de Desenho Web 20
Melhor e Pior ?
VI.2 – Padrões de Desenho Web 21
Exemplos de + Padrões
•!Padrões que utilizam a experiência
off-line
•!Comércio Electrónico:
–!Carrinho de compras
–!Caixa registadora (CHECKOUT)
VI.2 – Padrões de Desenho Web 22
Carrinho de Compras
•!Problema
–!Como permitir que utilizadores comprem
múltiplos itens numa transacção
•!Solução
–!Metáfora do carrinho de compras
•!Armazenar itens antes do consumidor finalizar
compra
–!regista nome, quantidade, disponibilidade e preço
dos itens
VI.2 – Padrões de Desenho Web 23
Carrinho de Compras
•! Tornar fácil acrescentar itens do catálogo em cada página
–!Facilitar a compra ao utilizador! –!Parece óbvio mas muitos locais não sabem
como fazer …
VI.2 – Padrões de Desenho Web 24
Carrinho de Compras
•! Dar info detalhada sobre cada item:
modo de eliminar
quantidade c/ modo alterar
preço
nome com elo para detalhe
Descrição sumária
disponibilidade
VI.2 – Padrões de Desenho Web
5
VI.2 – Padrões de Desenho Web 25
Carrinho de Compras •! Fornecer Info sobre todos os custos
–!Sub-totais –!Portes & envio, taxas, outros encargos
(se souber…)
VI.2 – Padrões de Desenho Web 26
Carrinho de Compras
•!Elo visível para CHECKOUT
VI.2 – Padrões de Desenho Web 27
Carrinho de Compras
•!Elo que permita continuar a comprar…
VI.2 – Padrões de Desenho Web 28
Carrinho de Compras
•! Não permitir itens não disponíveis –!Ou então dar informação sobre disponibilidade
VI.2 – Padrões de Desenho Web 29
Wish List
VI.2 – Padrões de Desenho Web 30
Resumo – Carrinho de Compras
•!Como fazer este padrão funcionar
–!Acessível em todas as páginas
–!Tornar fácil acrescentar itens do catálogo
–!Dar info detalhada sobre cada item
–!Fornecer Informação sobre todos os custos
–!Elo visível para CHECKOUT
–!Elo que permita continuar a comprar
–!Não permitir itens não disponíveis
VI.2 – Padrões de Desenho Web
6
VI.2 – Padrões de Desenho Web 31
Personalização da Home Page •! Problema
–!Seria ideal os visitantes voltarem frequentemente à vossa homepage •! comprar, ver anúncios, usar serviços, etc.
–!Se o conteúdo não é alterado e personalizado é menos provável que os visitantes regressem ou fiquem
–! Info personalizada é mais útil que info genérica. •! Solução
–!Personalizar conteúdo •!Uma homepage personalizada para cada visitante
VI.2 – Padrões de Desenho Web
Diagrama solução
novos utilizadores
para re-visitantes
VI.2 – Padrões de Desenho Web 33
Página Personalizada
VI.2 – Padrões de Desenho Web 34
Como Personalizar a Página
•! Obter informação dos PERFIS CONVIDADOS & utilizá-la para construir um local que –!Retém o interesse
–!Parece adaptado só para eles
•! Os visitantes têm de confiar em vós –!para fornecer info. directa/indirectamente
–! cookies nem sempre aceites se não houver confiança
–!devem usá-la para benefício deles apenas
•! Quatro modos de obter informação
–!Editar, entrevistar, deduzir, filtro colaborativo
VI.2 – Padrões de Desenho Web 35
Editar Info de Personalização
•! Visitantes seleccionam informação de listas –! Tempo em cidades –! Fontes noticiosas –! Acções a comprar –! Desportos a ver –! …
•! Incluir módulos usando selecções
•! Problemas ? –! Monótono se muito
repetido –! Relação custo-benefício
(vale a pena gastar o meu tempo?)
my.yahoo.com – bom exemplo de editar para personalizar
VI.2 – Padrões de Desenho Web 36
Método das Entrevistas
•! Visitantes resp. escolhas múltiplas
•! Actualizam PERFIL CONVIDADO
•! Incluir módulos baseados em um ou mais critérios de pontuação
•! Deve permitir refinar personalização ao longo do tempo
VI.2 – Padrões de Desenho Web
7
VI.2 – Padrões de Desenho Web 37
Deduzir para Personalizar
•! Monitorizar Comportamento dos Utilizadores –! Amazon observa encomendas para oferecer livros
semelhantes em visitas subsequentes
•! Actualizar PERFIL CONVIDADO •! Seleccionar conteúdo com base em critérios de
pontuação (ex. Amazon.com)
VI.2 – Padrões de Desenho Web 38
Filtros Colaborativos
•! Fornecer conteúdo
apelativo com base
em todos os
visitantes
•! Fornecer módulos
adaptados usando
perfis semelhantes
–! correlação de perfis
para identificar áreas
de interesse
VI.2 – Padrões de Desenho Web 39
Acessibilidade
•! Normas e Recomendações
•! UMIC - Agência para a Sociedade do Conhecimento –!http://www.umic.pt –!Resolução do CM em 1999 WAI – Web
Accessibility Initiative
•! W3C –!http://www.w3.org/WAI/References/
QuickTips/
VI.2 – Padrões de Desenho Web
Vídeo
O Ecrã Preto
40
VI.2 – Padrões de Desenho Web 41
Associar Texto a elementos visuais
1. ! Imagens e animações. –! Utilize o atributo alt para descrever a função
de cada elemento visual
2. ! Mapas de imagem. –! Utilize mapas de cliente (anotação map),
empregando texto nos pontos activos
3. ! Multimédia. –! Disponibilize legendas e transcrições
da componente sonora, e descrições da componente visual
VI.2 – Padrões de Desenho Web 42
Ligações e Organização.
4.! Ligações de hipertexto –! Utilize texto que faça sentido, mesmo
lido fora do contexto. Por exemplo: evite "clique aqui".
5.! Organização das páginas –! Utilize cabeçalhos, listas e uma
estrutura consistente. Sempre que possível, utilize CSS para efeitos de disposição e estilo.
VI.2 – Padrões de Desenho Web
8
VI.2 – Padrões de Desenho Web 43
Gráficos e Scripts.
6.! Gráficos e esquemas –! Forneça resumos ou utilize o atributo
longdesc.
7.! Scripts, applets e suplementos –! Forneça conteúdo alternativo, se as
características activas não forem acessíveis ou se não forem suportadas pelo navegador.
VI.2 – Padrões de Desenho Web 44
Gráficos e Scripts.
8.! Frames –! Utilize a anotação noframes e
empregue títulos com significado.
9.! Tabelas –! Faça com que a leitura linha-a-linha
seja compreensível. Forneça resumos.
VI.2 – Padrões de Desenho Web 45
Validação
10.!Verifique o trabalho –! Recorra a ferramentas e às directivas
existentes em http://www.w3.org/TR/WCAG
•! Acessibilidade (cores) –! http://www.vischeck.com/vischeck/vischeckURL.php –! http://www.vischeck.com/
•! Validação de HTML –! http://validator.w3.org
–! http://www.flfsoft.com/html/html_validators.html
VI.2 – Padrões de Desenho Web 46
Deuteranope (Deficiência Verde/Vermelho)
VI.2 – Padrões de Desenho Web 47
Resumo
•! 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
–! Carrinho de Compras
•! Personalização de Home Pages
•! Acessibilidade
VI.2 – Padrões de Desenho Web 48
Próxima Aula
•!Modelo de Acontecimentos
•! Sistemas de Gestão de Janelas
•! Árvore de interactores
•! Definição de MVC
•! Fluxo de acontecimentos
•! Ler
–! Developing User Interfaces, Cap. 5, Dan Olsen