vi.2 – padrões de desenho web - autenticação · pdf...

VI.2 – Padrões de Desenho Web

1

VI – WWW


The Design of Sites, Cap. 2,

D. Duyne, J. Landay, J. Hong

2VI.2 – Padrões de Desenho Web

Melhor e Pior?


Melhor e Pior?


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 Tecnologia3. Animações contínuas4. URLs complicadas5. Páginas órfãs6. Páginas (demasiado) longas7. Falta de apoio à navegação8. Cores de elos não padronizadas9. Informação Desactualizada10.Páginas Lentas a carregar


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


Ciclos de Desenvolvimento Web

Avaliar

Desenhar

Prototipar

Início

Descoberta

Exploração

Refinamento

Produção

Codificação

Manutenção

&Avaliação


2


Processo de Desenho

Produção

Refinamento

Exploração

Descoberta

… segue-se a codificação e manutenção


Processo de desenho : Descoberta

Avaliar necessidades– Compreender expectativas de uso

– determinar âmbito do projecto

– Características dos utilizadores

– avaliar site actual e/ou concorrência

Produção

Refinamento

Exploração

Descoberta


Processo de desenho: Exploração

Produção

Refinamento

Exploração

Descoberta Gerar alternativas* visualizar soluçõespara requisitosidentificados* Desenharinformação e navegação* Design gráficopreliminar* seleccionar umdesign


Processo de desenho: Refinamento

Produção

Refinamento

Exploração

Descoberta Detalhar desenho* Níveis de detalhecrescente* Forte ênfase no design gráfico* Design iterativo


Preparar desenhopara entrega* Criar produto final* especificações, linhas-mestras e protótipos* Tantos detalhesquanto possível

Processo de desenho : Produção

Produção

Refinamento

Exploração

Descoberta


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


3


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)


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


Esquemas

• Estrutura da página: navegação e informação• Primeiro rascunhos depois usando uma ferramenta


Simulacros

• Representação de alta-fidelidade da página final• Usando Photoshop (por ex.)– Só Look, sem Feel


Motivação : Padrões de Desenho

• Maioria dos exemplos da literatura de IPMsã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


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


4


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


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


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


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 ahomepage– Maioria já não volta -> perca de vendas, etc.


Home Page: Problema

• Home Page é a páginapor onde passam a maioria dos visitantes

• Devem seduzir osvisitantes, mas

• Equilibrando um grande número de aspectos:– Imagem de marca

– Navegação

– Conteúdo

– Carregamento da página


Padrões para Home Page

• Problema– Se não for atraente, utilizadores não voltam

• 6 Regras para uma boa HomePage1. Primeira impressão positiva2. Focar num tópico principal3. Construir imagem de marca4. Facilitar navegação5. Atrair visitantes a regressar6. Tornar carregamento rápido


5


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.


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


2 - Focar num tópico principal

• Concentrar atenção num único tópico de interesse– Criar um 1º elementopara 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


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


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


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


6


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


6 - 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


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


Diagrama da Solução

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

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

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

Info Mais Importante

Info Menos Importante

.

.

.

TítuloShort Blurbs

(Sumário)Panorâmica

Informação de suporteDetalhes de Suporte

Frases Longas


Jornalistas Usam Pirâmide Invertida

www.publico.ptSociedade 13-11-2001 - 13h57

Investigadores afastam cenário de atentado

Caixa negra de Airbus suporta tese de acidente

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 quelevem 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é às09h13. 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 hajamortos no solo, na sequência da queda do aparelho sobre o bairro de Queens.

Título conciso resume artigo

Trecho curto apres. conclusões

Parágrafo de suporte

Detalhes apoiam e ampliam

história


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


7


Bullets e listas

Título conciso

Sumário curto

Bullet list curta

e fácil de ler

Parágrafos

de suporte


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

– http://www.uie.com

• Dados– dezenas de horas de observações utilizadores

– Análise detalhada da composição do local

– Tarefa : encontrar informação específica por local


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


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


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!


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


8


Frames


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)


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.


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)


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)


Bons Elos

• Nomes de elos compridos e descritivos– Sabemos para onde vamos


9


Bons Elos

• Separam elos que mudam de linha!50VI.2 – Padrões de Desenho Web

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 Page1. Primeira impressão positiva2. Focar num tópico principal3. Construir imagem de marca4. Facilitar navegação5. Atrair visitantes a regressar6. Tornar carregamento rápido

• Pirâmide Invertida• Estudo Usabilidade (resultados inesperados)


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

vi.2 – padrões de desenho web - autenticação · pdf...

Documents