1 VI.1 – Desenho de Páginas Web
1 VI.1 – Desenho de Páginas Web
1 VI.1 – Desenho de Páginas Web
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
VI <strong>–</strong> WWW<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
The Design of Sites, Cap. 1, 4 e 5,<br />
D. Duyne, J. Landay, J. Hong<br />
http://www.useit.com/alertbox/ , Jakob Nielsen<br />
Resumo da Aula Anterior<br />
• Dispositivos <strong>de</strong> Entrada <strong>de</strong> Dados<br />
<strong>–</strong>Texto<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
• Teclados, Escrita à mão, Fala<br />
<strong>–</strong> Coor<strong>de</strong>nadas<br />
•Ratos e <strong>de</strong>rivados<br />
•Tabletes<br />
•3D<br />
<strong>–</strong> Novos dispositivos<br />
Bom <strong>de</strong>senho po<strong>de</strong> aumentar vendas<br />
• Artigo NY Times, 8/30/99 (site da IBM)<br />
<strong>–</strong> “Most popular feature was … search …because<br />
people couldn't figure out how to navigate the site“<br />
<strong>–</strong> “The second most popular feature was the help<br />
button, because the search technology was so<br />
ineffective.”<br />
• Depois do re<strong>de</strong>senho,<br />
<strong>–</strong> Uso do botão "help" diminuiu 84%<br />
<strong>–</strong> Vendas aumentaram 400%<br />
http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
3<br />
5<br />
Qual o problema <strong>de</strong>sta página ?<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Sumário<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Conteúdo ocupa<br />
pequena %<br />
• Importância <strong>de</strong> páginas bem <strong>de</strong>senhadas<br />
• Diferenças entre IU para <strong>Web</strong> e Desktop<br />
• Dez erros mais comuns em <strong>de</strong>senho <strong>Web</strong><br />
<strong>–</strong>1996<br />
<strong>–</strong>2005<br />
<strong>–</strong>2007<br />
Importância <strong>de</strong> Bom <strong>Desenho</strong><br />
• Diferença entre sucesso e fracasso<br />
• <strong>Páginas</strong><br />
<strong>–</strong> com um <strong>de</strong>senho Limpo<br />
<strong>–</strong>Fáceis <strong>de</strong> usar<br />
<strong>–</strong> Centradas no utilizador<br />
•Conseguem<br />
<strong>–</strong> Reduzir o número <strong>de</strong> erros do utilizador<br />
<strong>–</strong> Reduzir o tempo necessário para encontrar coisas<br />
<strong>–</strong> Aumentar satisfação geral do utilizador (diz a outros)<br />
• Exemplo <strong>de</strong> Sucesso:<br />
<strong>–</strong> Funciona melhor que os outros motores <strong>de</strong> busca<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
2<br />
4<br />
6<br />
1
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Uma Página <strong>Web</strong> Representa...<br />
• Vista que o utilizador tem da informação<br />
• Unida<strong>de</strong> <strong>de</strong> navegação<br />
<strong>–</strong> O que se obtem quando se carrega num link<br />
• En<strong>de</strong>reço para obter informação na re<strong>de</strong> (URL)<br />
• Armazenamento <strong>de</strong> informação<br />
<strong>–</strong> No servidor<br />
• Página é uma unida<strong>de</strong> atómica que unifica estes<br />
conceitos<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Wizards <strong>–</strong> Diferenças?<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Desktop <strong>Web</strong><br />
Caixa <strong>de</strong> Diálogo Desktop<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
7<br />
9<br />
11<br />
<strong>Desenho</strong> <strong>Web</strong> vs Desktop GUI<br />
• Diversida<strong>de</strong> <strong>de</strong> dispositivos (<strong>Web</strong>)<br />
<strong>–</strong> Difícil <strong>de</strong> antecipar o que irão usar<br />
(TV Interactiva, PDAs, Tlms)<br />
<strong>–</strong> Ser diferente é uma “feature”<br />
• Utilizadores controlam a navegação<br />
<strong>–</strong> Por caminhos nunca dantes antecipados<br />
<strong>–</strong> Caem do céu via motores <strong>de</strong> pesquisa/Bookmarks<br />
• Parte <strong>de</strong> uma experiência integral<br />
<strong>–</strong> Utilizadores movem-se entre diferentes locais<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
On<strong>de</strong> está Aplicação e Estado ?<br />
• Back (anterior) no <strong>de</strong>sktop<br />
<strong>–</strong> Tipicamente <strong>de</strong>sfaz alterações no último passo<br />
• Back nas páginas <strong>Web</strong><br />
<strong>–</strong>botão “back” do navegador?<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
• Invisível para servidor <strong>–</strong> não altera estado<br />
<strong>–</strong> Elo “back” na página ?<br />
• servidor po<strong>de</strong> alterar estado<br />
<strong>–</strong> Po<strong>de</strong>-se impedir o utilizador <strong>de</strong> usar “back” ?<br />
• Usando javascript…, mas não é uma boa i<strong>de</strong>ia<br />
• Saídas claramente assinaladas são<br />
importantes<br />
<strong>–</strong>Óbvias no <strong>de</strong>sktop mas não na web...<br />
Caixa <strong>de</strong> diálogo na <strong>Web</strong><br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
8<br />
10<br />
12<br />
2
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Caixa <strong>de</strong> diálogo na <strong>Web</strong><br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Soluções Problema do Contexto<br />
• Repetir contexto<br />
<strong>–</strong> acrescentar nova info. na pág. corrente<br />
• Do ponto <strong>de</strong> vista do utilizador a página<br />
“expan<strong>de</strong>-se”<br />
• Optimizar páginas para carregamento rápido<br />
• Reduzir gráficos<br />
• Melhorar <strong>de</strong>sempenho do servidor<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Dez erros <strong>de</strong> <strong>Web</strong> Design<br />
• Lista <strong>de</strong> Nielsen (original 1996)<br />
<strong>–</strong> http://www.useit.com/alertbox/9605a.html<br />
<strong>–</strong> Não necessariamente consensual<br />
• Nielsen - Auto<strong>de</strong>signado <strong>Web</strong> guru<br />
<strong>–</strong> Investigador em Hypertexto muito antes da<br />
<strong>Web</strong><br />
• Excelente lista <strong>de</strong> difusão / local<br />
<strong>–</strong> http://www.useit.com/alertbox/<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
13<br />
15<br />
17<br />
Diferenças entre Diálogos<br />
• Desktop: Caixas <strong>de</strong> diálogo pop-up<br />
<strong>–</strong> Geralmente mais pequena que janela principal<br />
<strong>–</strong> Mantém contexto (por <strong>de</strong>trás) sobre tarefa principal<br />
• <strong>Web</strong>: Nova página (substitui Anterior)<br />
<strong>–</strong> necessário andar para trás e para frente<br />
para recuperar contexto<br />
• “forward” navegador per<strong>de</strong> valores <strong>de</strong>pois <strong>de</strong> “back”<br />
(forms)<br />
<strong>–</strong> MUITO tempo para carregar páginas<br />
• Necessário relembrar contexto no tempo!<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
10. Tempos <strong>de</strong> carregamento longos<br />
• Regra dos 10 segundos<br />
<strong>–</strong> Tempo que utilizadores levam a per<strong>de</strong>r interesse<br />
• Consistente com estudos tradicionais <strong>de</strong> factores humanos<br />
• 15 segundos po<strong>de</strong>m ser aceitáveis na <strong>Web</strong><br />
<strong>–</strong> utilizadores habituados a esperar...<br />
<strong>–</strong> Mas só páginas mais importantes<br />
• <strong>Web</strong> está mais lenta<br />
<strong>–</strong> não mais rápida<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
14<br />
16<br />
18<br />
3
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
9. Informação <strong>de</strong>sactualizada<br />
• Contratem um “jardineiro” para a equipa<br />
<strong>–</strong> “root out the weeds and replant the flowers”<br />
• Pessoas preferem criar conteúdo a mantê-lo<br />
• Modo barato <strong>de</strong> melhorar conteúdo<br />
<strong>–</strong> Se ainda relevante -> elo para páginas novas<br />
<strong>–</strong> Senão removê-las<br />
• Conteúdo <strong>de</strong>sactualizado => perca <strong>de</strong><br />
confiança (importante para e-commerce)<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
7. Falta <strong>de</strong> apoio à navegação<br />
• Utilizadores não conhecem o vosso local<br />
<strong>–</strong> Sempre difícil encontrar informação<br />
<strong>–</strong> Comunicar sentido claro <strong>de</strong> estrutura e localização<br />
• Comunicar estrutura do local<br />
<strong>–</strong> Disponibilizem um Mapa do Site<br />
• Para utilizadores saberem on<strong>de</strong> estão e o que po<strong>de</strong>m visitar<br />
<strong>–</strong> Disponibilizem Bom mecanismo <strong>de</strong> busca<br />
• Porque mesmo a melhor navegação não basta<br />
• Expectativas dos utilizadores<br />
<strong>–</strong> Logotipo no canto superior esquerdo ligado à home page<br />
<strong>–</strong> Estrutura <strong>de</strong> outline indicando a localização actual<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
6. <strong>Páginas</strong> muito longas<br />
• Muitos utilizadores não <strong>de</strong>senrolam página<br />
<strong>–</strong> parte não visível não é lida<br />
• Conteúdo crítico e navegação<br />
<strong>–</strong> Devem estar no topo da página<br />
• <strong>Páginas</strong> <strong>de</strong> informação po<strong>de</strong>m ser maiores<br />
<strong>–</strong> Leitores interessados irão pesquisar o conteúdo<br />
<strong>–</strong> É uma boa i<strong>de</strong>ia ser conciso<br />
• Importância <strong>de</strong>crescente<br />
<strong>–</strong> Procurar não usar mais <strong>de</strong> 3 ecrãs<br />
<strong>–</strong> Informação no TOPO dominante<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
19<br />
21<br />
23<br />
8. Cores <strong>de</strong> elos não padronizadas<br />
•Elos para<br />
<strong>–</strong> <strong>Páginas</strong> não visitadas são azuis<br />
<strong>–</strong> <strong>Páginas</strong> já visitadas usar púrpura/vermelho<br />
• Não alterem estas cores<br />
<strong>–</strong> uma das poucas ajudas universais à navegação<br />
<strong>–</strong> consistência importante para aprendizagem<br />
• não sublinhem outros objectos com azul / vermelho!<br />
<strong>–</strong> Este é um padrão <strong>de</strong> <strong>Web</strong> Design (a ver mais tar<strong>de</strong>)<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
O que está errado nesta página ?<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
6. <strong>Páginas</strong> muito longas (cont)<br />
• Não consensual:<br />
<strong>–</strong> Jared Spool <strong>–</strong> os utilizadores<br />
habituaram-se a <strong>de</strong>senrolar páginas se<br />
(e só se?) a página <strong>de</strong>r pistas <strong>de</strong> “haver<br />
conteúdo mais para baixo”<br />
<strong>–</strong> <strong>Páginas</strong> longas versus páginas curtas<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
• Reduzir tempos <strong>de</strong> carregamento<br />
20<br />
22<br />
24<br />
4
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
5. <strong>Páginas</strong> Orfãs<br />
• Todas as páginas <strong>de</strong>vem indicar a que<br />
local pertencem<br />
<strong>–</strong> Utilizadores po<strong>de</strong>m “cair do céu” e não da<br />
home-page.<br />
<strong>–</strong> Acesso via Google, Altavista, Lycos, etc.<br />
<strong>–</strong> Ser acessível sem ser pela home page<br />
• Todas as páginas <strong>de</strong>veriam ter<br />
<strong>–</strong>Elo para home page<br />
<strong>–</strong> Indicação do local a que pertencem e posição<br />
na estrutura do local<br />
(tornar visível o estado do sistema)<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
4. URLs Complicadas<br />
• Não <strong>de</strong>vem expor en<strong>de</strong>reços da máquina<br />
• Utilizadores tentam <strong>de</strong>scodificar URLs das páginas<br />
<strong>–</strong> Para inferir a estrutura do local<br />
• Falta <strong>de</strong> apoio à navegação e sensação <strong>de</strong> localização<br />
• URL <strong>de</strong>vem ser legíveis por pessoas<br />
<strong>–</strong> Nomes reflectirem natureza do espaço informação<br />
<strong>–</strong> Por vezes preciso escrever URL -> minimizar erros<br />
• Usar letra minúscula, nomes curtos sem caracteres<br />
especiais<br />
<strong>–</strong> Muitas pessoas não sabem teclar ~<br />
• URLs são difíceis <strong>de</strong> enviar por email<br />
<strong>–</strong>Word-wrapping, etc.<br />
<strong>–</strong>Ver shorturl.com<br />
•fazcaching <strong>de</strong> urls e <strong>de</strong>volve urls curtas<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
3. Animações contínuas<br />
• Não incluam animações intermináveis<br />
<strong>–</strong> Imagens em movimento estimulam a visão<br />
periférica<br />
• Excluam animações, texto que <strong>de</strong>senrola, marquees<br />
• Utilizadores <strong>de</strong>sligam-nas<br />
<strong>–</strong> Logo, não incluam nada <strong>de</strong> importante nestas!<br />
• Dêem paz e <strong>de</strong>scanso aos utilizadores<br />
<strong>–</strong> para lerem o texto!<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
25<br />
27<br />
29<br />
Qual o problema com estas páginas?<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Qual o problema ?<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Qual o problema com esta página ?<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
26<br />
28<br />
30<br />
5
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Re<strong>de</strong>senhada em 2003<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Qual o problema com esta página ?<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Frames (cont.)<br />
• Motores <strong>de</strong> busca têm problemas c/ frames<br />
<strong>–</strong>que parte dos framesets incluir nos índices ?<br />
•Primeiros surveys <strong>de</strong>monstram<br />
<strong>–</strong> Preferência por locais sem frames<br />
<strong>–</strong> Inquéritos mais recentes confirmam ~70-90%<br />
• Nota: <strong>de</strong>senhadores experientes po<strong>de</strong>m usar<br />
frames <strong>de</strong> forma eficaz<br />
• Amazon.com seria impossível com frames<br />
(<strong>de</strong>sign to be linked to)<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
31<br />
33<br />
35<br />
2. Uso gratuito <strong>de</strong> tecnologia<br />
• Não tentem atrair os utilizadores <strong>de</strong>sta forma<br />
<strong>–</strong> Po<strong>de</strong> ser que atraiam os “nerds” mas os utilizadores<br />
“normais” preocupam-se com conteúdo e serviço.<br />
• Se o sistema/navegador estoira<br />
<strong>–</strong> Não vão voltar<br />
• Ex. usem VRML se a vossa informação “é” 3D<br />
<strong>–</strong> <strong>Desenho</strong> <strong>de</strong> arquitectura ou planeamento <strong>de</strong> cirurgia<br />
<strong>–</strong> É apropriado se ven<strong>de</strong>rem programas <strong>de</strong> CAD/GIS,VR, etc.<br />
• Ex. Introduções “Flash”<br />
<strong>–</strong> Nem sempre se traduzem em mais valia<br />
<strong>–</strong> Deve existir forma <strong>de</strong> contornar<br />
• Browser po<strong>de</strong> não ter plug-in<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
1. Frames<br />
• Confun<strong>de</strong>m utilizadores<br />
<strong>–</strong> Conflito c/ mo<strong>de</strong>lo mental da página web<br />
• Sequência <strong>de</strong> acções acto único<br />
• Unida<strong>de</strong> <strong>de</strong> navegação unida<strong>de</strong> <strong>de</strong> visualização<br />
• Per<strong>de</strong>-se previsibilida<strong>de</strong> das acções utilizador<br />
<strong>–</strong> Que informação aparece on<strong>de</strong> quando se clica ?<br />
• Não é possível fazer bookmarks da página e regressar...<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
<strong>–</strong> Corrigido no Explorer 5<br />
• URLs <strong>de</strong>ixam <strong>de</strong> funcionar (vão para pag 1 frameset)<br />
• Não é possível partilhar com outros<br />
<strong>–</strong> Enviar elos por email não funciona...<br />
Resumo (Lista original 1996)<br />
1. Frames<br />
2. Uso Gratuito <strong>de</strong> Tecnologia<br />
3. Animações contínuas<br />
4. URLs complicadas<br />
5. <strong>Páginas</strong> órfãs<br />
6. <strong>Páginas</strong> (<strong>de</strong>masiado) longas<br />
7. Falta <strong>de</strong> apoio à navegação<br />
8. Cores <strong>de</strong> elos não padronizadas<br />
9. Informação Desactualizada<br />
10.Paginas Lentas a carregar<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
32<br />
34<br />
36<br />
6
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Lista <strong>de</strong> 2005<br />
1. Problemas <strong>de</strong> Legibilida<strong>de</strong><br />
Tipos fixos/pequenos e contraste<br />
2. Links Não-standard<br />
Cores, visitados não visitados<br />
3. Flash<br />
Utilização gratuita<br />
4. Conteúdo não escrito para a <strong>Web</strong><br />
Deve ser curto, e directo ao assunto<br />
5. Pesquisa Ineficiente<br />
Melhorar os algoritmos <strong>de</strong> pesquisa<br />
6. Incompatibilida<strong>de</strong> <strong>de</strong> Browsers<br />
Optimizado para “IExplo<strong>de</strong>”<br />
7. Formulários difíceis <strong>de</strong> usar<br />
Muito gran<strong>de</strong>s, com perguntas <strong>de</strong>snecessárias<br />
8. Falta <strong>de</strong> Informação e <strong>de</strong> Contactos sobre a Empresa<br />
Diminui credibilida<strong>de</strong><br />
9. Arranjo (Layout) Congelado com Largura <strong>de</strong> Página Fixa<br />
Muito espaço em branco, problemas <strong>de</strong> impressão<br />
10. Ampliação <strong>de</strong> Foto Ina<strong>de</strong>quada<br />
Produtos em e-Commerce<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Referências<br />
• Nielsen’s top 10 list<br />
<strong>–</strong> http://www.useit.com/alertbox/9605.html<br />
• <strong>Web</strong> pages that suck<br />
<strong>–</strong> http://www.webpagesthatsuck.com/<br />
•Dicas para web-<strong>de</strong>signers<br />
<strong>–</strong> http://www.dsiegel.com/tips/<br />
• User Interface Engineering<br />
<strong>–</strong> http://www.uie.com<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Resumo<br />
• Importância <strong>de</strong> páginas bem <strong>de</strong>senhadas<br />
• Diferenças entre IU para <strong>Web</strong> e Desktop<br />
<strong>–</strong>Wizards<br />
<strong>–</strong>Diálogos<br />
• Dez erros mais comuns em <strong>de</strong>senho <strong>Web</strong><br />
<strong>–</strong> Originais <strong>de</strong> 1996<br />
<strong>–</strong> 2005 e 2007<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
37<br />
39<br />
41<br />
Lista <strong>de</strong> 2007<br />
1. Pesquisa ineficiente<br />
2. Ficheiros PDF para leitura Online<br />
3. Cor <strong>de</strong> elos visitados não muda<br />
4. Texto ilegível (muito texto)<br />
5. Fontes com tamanho fixo (pequeno)<br />
6. Títulos das páginas com pouca visibilida<strong>de</strong> para<br />
os motores <strong>de</strong> busca<br />
7. Elementos da página semelhantes a anúncios<br />
8. Violação <strong>de</strong> convenções <strong>de</strong> <strong>de</strong>senho<br />
(consistência)<br />
9. Abertura <strong>de</strong> novas janelas do navegador<br />
10.Não respon<strong>de</strong>r às perguntas do utilizador<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Não se esqueçam<br />
URLs curtas mais fáceis <strong>de</strong> memorizar<br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
Próxima aula<br />
• Processo <strong>de</strong> <strong>de</strong>senho para a <strong>Web</strong><br />
• Práticas <strong>de</strong> Design<br />
• Padrões <strong>de</strong> <strong>Desenho</strong> <strong>Web</strong><br />
<strong>–</strong> Padrões para construir Home Page<br />
<strong>–</strong> 6 Regras para fazer uma boa Home Page<br />
• Pirâmi<strong>de</strong> Invertida<br />
• Estudo Usabilida<strong>de</strong> <strong>Web</strong><br />
<strong>VI.1</strong> <strong>–</strong> <strong>Desenho</strong> <strong>de</strong> <strong>Páginas</strong> <strong>Web</strong><br />
38<br />
40<br />
42<br />
7
Change language