Inte

rfac

es

Pe

sso

a M

áqu

ina

Desenho de Páginas Web I

20

Cap. 13 – Desenho Para a Web

Mudar… para melhor (!?)En

viad

o p

or

Pe

dro

Bu

cho

(6

95

37

)

Mudar… para melhor (!?)En

viad

o p

or

Pe

dro

Bu

cho

(6

95

37

)

Mudar… para melhor (!?)En

viad

o p

or

Pe

dro

Bu

cho

(6

95

37

)

Onde está o Link?

Onde está o Link?

Qual o problema?

Qual o problema?

Conteúdo ocupa

pequena %

Resumo Aula Anterior

Manuais convencionais

Ajudas Interativas

Princípios e guias para manuais

Navegação

Aprendizagem

Leitura

Tipo de manual vs público alvo

Consistência entre IU, manuais e ajudas interativas

Modelo conceptual

Perguntas!

A quem se destinam os manuais do utilizador

Quais as vantagens da documentação online face à documentação em papel?

Sumário

Importância de páginas bem desenhadas

Princípios Fundamentais

Dez erros mais comuns em desenho Web

Layout

Conteúdo

Bom desenho pode aumentar vendas

Antes:

“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:

Uso do botão "help" diminuiu 84%

Vendas aumentaram 400%

http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html

Mau desenho pode levar ao desastre

Cobrar £3.2/sem por acesso ao site...Acessos cairam 90%Apenas 1.5% dos antigos leitores pagaram

Nem os assinantes (acesso grátis) acediam aos sites...

... Por terem de se autenticar onde tal não era esperado!

http://gigaom.com/2010/11/02/news-corp-paywall/

Importância do bom desenho

Sucesso

Fracasso

Exemplo de sucesso

Simples, estético, minimalista

(1999)

01PRINCÍPIOS

FUNDAMENTAIS

Parte de uma experiência Integral

boogy_man@ sxc.hu

Utilizadores controlam a navegação

Diversidade de dispositivos e contextos

Artefactos e Prática de Design

Mapas

Storyboards

Esquemas

Simulacros

Mapas do Local

Storyboards

Esquemas

25

Simulacros

02DEZ ERROS MAIS

COMUNS

Jakob Nielsen (http://www.useit.com)

Lista de Nielsen (1996-2011)http://www.useit.com/alertbox/9605.html

1 – Pesquisa Ineficiente

2 – Ficheiros PDF para leitura online

3 – Não mudar cor de links visitados

Já cá estive ou ainda não?

Aqui já estive, e aqui não...

4 – Texto difícil de apreenderFrom this day forward, Flight Control will be known by two words: 'Tough' and 'Competent.' Toughmeans we are forever accountable for what we do or what we fail to do. We will never againcompromise our responsibilities. Every time we walk into Mission Control we will know what westand for. Competent means we will never take anything for granted. We will never be found shortin our knowledge and in our skills. Mission Control will be perfect. When you leave this meetingtoday you will go to your office and the first thing you will do there is to write 'Tough andCompetent' on your blackboards. It will never be erased. Each day when you enter the room thesewords will remind you of the price paid by Grissom, White, and Chaffee. These words are the priceof admission to the ranks of Mission Control. The size and age of the Cosmos are beyond ordinaryhuman understanding. Lost somewhere between immensity and eternity is our tiny planetaryhome. In a cosmic perspective, most human concerns seem insignificant, even petty. And yet ourspecies is young and curious and brave and shows much promise. In the last few millennia we havemade the most astonishing and unexpected discoveries about the Cosmos and our place within it,explorations that are exhilarating to consider. They remind us that humans have evolved to wonder,that understanding is a joy, that knowledge is prerequisite to survival. I believe our future dependspowerfully on how well we understand this Cosmos in which we float like a mote of dust in themorning sky. The Earth is a very small stage in a vast cosmic arena. Think of the rivers of bloodspilled by all those generals and emperors so that, in glory and triumph, they could become themomentary masters of a fraction of a dot. Think of the endless cruelties visited by the inhabitants ofone corner of this pixel on the scarcely distinguishable inhabitants of some other corner, howfrequent their misunderstandings, how eager they are to kill one another, how fervent their hatreds.Look again at that dot. That's here. That's home. That's us. On it everyone you love, everyone youknow, everyone you ever heard of, every human being who ever was, lived out their lives. Theaggregate of our joy and suffering, thousands of confident religions, ideologies, and economicdoctrines, every hunter and forager, every hero and coward, every creator and destroyer ofcivilization, every king and peasant, every young couple in love, every mother and father, hopefulchild, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar,"every "supreme leader," every saint and sinner in the history of our species lived there--on a moteof dust suspended in a sunbeam. The Earth is the only world known to harbor life. Nowhere else.

5 – Texto de tamanho fixo

6 – Títulos pouco visíveis para m.pesquisa

“Página Principal”

???!!

7 – Elementos semelhantes a publicidade

8 – Violar convenções de desenho

9 – Abrir novas janelas do navegador

10 – Não dar resposta às questões do ut.

03LAYOUT

Estrutura da página

Guiar o Olhar

Atenção selectiva

Atenção selectiva

Ou encontro o que quero...

Desenho Estético e Minimalista

Tem que haver um equilíbrio

estética

funcionalidadeusabilidade

Consistência

Imagem de Marca

O que era???

Mais um...

O que era???

Acertaram, claro! (?)

Sinal vs. Ruído

Espaço Desaproveitado

Elementos Destacados

Hierarquias Visuais Claras

Acima da Dobra

Layout Dinâmico

Layout Dinâmico

Layout Dinâmico

04CONTEÚDO

Útil, rápido de encontrar, ou...

Pirâmide Invertida

65

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

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

Título conciso resume artigo

Trecho curto apres. conclusões

Parágrafo de suporte

Detalhes apoiam e ampliam história

Texto Sucinto

Ajude-nos a melhorar o nosso serviço preenchendo o questionário em seguida apresentado. Não é estritamente necessário preencher todos os campos, apenas os assinalados com (*). Se quiser deixar comentários adicionais, existe uma caixa de texto no final do questionário que pode preencher.

(40 palavras)

Texto Sucinto

Ajude-nos a melhorar o nosso serviço preenchendo o questionário em seguida apresentado. Não é estritamente necessário preencher todos os campos, apenas os assinalados com (*). Se quiser deixar comentários adicionais, existe uma caixa de texto no final do questionário que pode preencher.

(40 palavras)

Por favor ajude-nos preenchendo este questionário. Os campos obrigatórios estão assinalados com um (*).

(13 palavras)

Texto Sucinto

Bem-vindo ao nosso site! Somos a Consulta, uma empresa de consultadoria na área da informática que fará tudo ao seu dispor para o ajudar.

(26 palavras)

Texto Sucinto

Bem-vindo ao nosso site! Somos a Consulta, uma empresa de consultadoria na área da informática que fará tudo ao seu dispor para o ajudar.

(26 palavras)

(0 palavras)

Links reconhecíveis

Neste texto existe um link para informação sobre o produto. Boa sorte a descobrir onde...

Links reconhecíveis

Neste texto existe um link para informação sobre o produto. Boa sorte a descobrir onde...

Links Curtos

... quais os voos que partem do nosso aeroporto nas

próximas horas.

Links Curtos

... quais os voos que partem do nosso aeroporto nas

próximas horas.

o mesmo ou diferentes?

Alvo Reconhecível

Alvo Reconhecível

... para saber mais informação clique aqui.

Alvo Reconhecível

... para saber mais informação clique aqui.

???

Information Scent

Utilizador percebe onde pode ir parar com contexto e texto da âncora...

Alvo Reconhecível

Lei de ???

Links Intrapágina

Imagens e Botões

Imagens para a Web

18MP, 5183x3456, 9MB 640x427, 190KB

Resumo

Importância de páginas bem desenhadas

Princípios Fundamentais

Dez erros mais comuns em desenho Web

Layout

Conteúdo

Referências

Nielsen’s top 10 list

http://www.useit.com/alertbox/9605.html

Web pages that suck

http://www.webpagesthatsuck.com/

User Interface Engineering

http://www.uie.com

TPC – Desenho para a Web (cont.)

Ler Cap. 13 do Livro

Secções 13.5 a 13.7