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