Este documento discute as melhores práticas na construção de sites web, cobrindo tópicos como usabilidade, arquitetura da informação, design, conteúdo e erros comuns. Ele enfatiza a importância de entender as necessidades dos usuários, testar continuamente o site, e seguir princípios como simplicidade, consistência e foco no conteúdo.
4. O alto custo de não ser
possível encontrar
informação
“The Fortune 1000 stands to waste at least $2.5 billion per year
due to an inability to locate and retrieve information.”
“While the costs of not finding information are enormous, they are
hidden within the enterprise, and...are rarely perceived as having
an impact on the bottom line.”
The High Cost of Not Finding Information, IDC White Paper
5. Os maiores problemas
na experiência de
utilização da web
Resultados de pesquisa mal organizados 53%
Arquitectura da Informação mal definida 32%
Performance baixa 32%
Homepages mal definidas 27%
Terminologia confusa 25%
Registo invasivo 15%
Navegação Inconsistente 13%
Fonte: Vividence Research 2008
7. “a
melhor
forma
de
os
u�lizadores
interagirem
com
a
tecnologia
de
modo
a
completarem
determinada
acção”
Zimmerman
e
Muraski
Um
interface
intui�vo
e
manuseável
na
perspec�va
do
u�lizador
8. Usabilidade v.s.
experiência de
utilização
“We
don't
just
use
technology,
we
live
with
it.
(...)
People
who
design,
use,
and
evaluate
interac�ve
systems
need
to
be
able
to
understand
and
analyze
people's
felt
experience
with
technology”
(McCarthy
&
Wright,
2004).
16. Porquê a
usabilidade na
web?
A usabilidade regula a web: se o consumidor não
descobrir o produto num site, irá à procura noutro
sítio
O consumidor tem a palavra-final. Toda a
concorrência está apenas a um clique!
17. Porquê a
usabilidade na
web?
A usabilidade assumiu mais importância com a Internet
Na web os consumidores experimentam primeiro e pagam
depois
É necessário que exista uma preocupação no modo como os
consumidores vão receber a mensagem do site
18. Desenvolver um website
“usável” implica dominar
conceitos para lá do
webdesign
Ter conhecimentos de
programação e
webdesign não
significa que se
perceba as
necessidades ligadas
à experiência de
utilizador e à
usabilidade
19. Um bom website requer a
compreensão das
necessidades e objectivos
dos utilizadores
Interacção
permanente
20. A preocupação com
a usabilidade
melhora a web
Fornece instrumentos de análise
Alarga competências
Desenvolve uma consciência crítica
22. Mas muitos projectos
web estão ainda longe
destas preocupações…
Arquitectura de informação: a estrutura do
site tenta reflectir o modo como a empresa
está organizada
23.
24. Mas muitos projectos
web estão ainda longe
destas preocupações…
Design: Criar páginas visualmente atractivas
mas não necessariamente simples de utilizar
25.
26. Mas muitos projectos
web estão ainda longe
destas preocupações…
Escrita Linear: utilização do estilo de escrita
linear dos meios tradicionais
27.
28. Mas muitos projectos
web estão ainda longe
destas preocupações…
Estratégia de links: “linkar para dentro”
31. Design
Simplicidade (with a twist):
– Design suporta na maior parte daz vezes o conteúdo
– O seu focus principal está no conteúdo
– Design deve ajustar-se às várias soluções e diferenças
tecnológicas
– Menus visíveis e manuseáveis
– Uso de metáforas (mas com atenção a especificidades e
características do público-alvo
40. Conteúdo
O centro da estratégia para a web
– Estudos de usabilidade revelam que muitos utilizadores
fazem um scan rápido sobre a área principal do site à
procura de títulos e de outros elementos que
identifiquem o propósito do site
– Necessidade de conteúdos de qualidade
41. A Usabilidade a 3
níveis: Conteúdo
Escrita para a web:
– Necessidade de textos breves e concisos (“pirâmide
invertida”)
– Escrita para uma leitura rápida do conteúdo global
– Utilização do hipertexto para dividir textos longos em
múltiplas páginas
45. Arquitectura da
Informação
Somos nós que temos de pensar o site, não o
utilizador
Não há regras dogmáticas, há princípios
orientadores
46. Arquitectura da
Informação
Alguns princípios:
Desenho para uma orientação simples:
– Onde estamos - Orientação
– Onde está a informação que o utilizador procura -
Navegação
– Como dar ao utilizador aquilo que ele procura -
Hiperligações
47. Arquitectura da
Informação
Alguns princípios:
Consistência e standards:
– Conhecer a concorrência antes de fazer um
site
– Procurar as melhores práticas
48.
49.
50. Arquitectura da
Informação
Alguns princípios:
Utilizadores têm diferentes níveis de
conhecimentos e competências:
– Primeira visita e utilizadores regulares
– “Experts” em internet e “iniciados”
56. Mobilidade e
tudo à volta...
Um contexto imprevisível
Aplicações adaptadas à
necessidade do momento
Desenvolver utilizando standards
multiplataforma
Tirar partido das redes sociais
existentes!
61. Conteúdo
Evitar paragrafos longos
Utilizar sub-títulos, hiperligações (com pouco texto com link,
listas
Elimine
metade
do
texto
e
depois
elimine
a
outra
metade
da
metade
que
restou
Steve
Krug,
Don't
Make
Me
Think:
A
Common
Sense
Approach
to
Web
Usability
62. Conteúdo
Conteúdo por terminar:
não colocar online sem ter
o website finalizado.
Verificar!
0.44 de 25/03/2011
24 milhões de resultados no
Google em pesquisa por
Lorem ipsum
69. Pesquisa
Pesquisa mal
categorizada e sem
metadados
Necessidade de organizar a
informação, indexar, perceber
tendências de
pesquisa,testar: recorrer às
melhores práticas. Usar
Google se necessário
72. Design gráfico e
layout
Principais erros:
– Texto demasiado pequeno
– Esquemas de cores demasiado subtis ou invasivos
– Texto centrado
– Utilização de tecnologias e versões sem aviso ao
utilizador (exº Flash)
– Desrespeito por regras de acessibilidade
77. Construir um
website
1. Pensar o projecto – conhecer o mercado, saber que tipo de projecto
pretendemos
2. A arquitectura da informação: construir a estrutura do website; ou o
storyboard
3. Desenvolver blocos de informação – wireframes
4. Design: conceber a maquete, receber feedback
5. Testar (actividade contínua)
6. Desenvolver
7. Testar (actividade contínua)
Voltar ao princípio: um website é sempre versão Beta!
78. 2. Arquitectura
da Informação
Hierarquia: taxionomias, top levels, modelo mental (também por
associações
Bases de dados: contexto estruturado com relações
Hiper texto: referências cruzadas, contextual
hierarquia
hipertexto
Base
de
dados
79. 2. Arquitectura da
Informação
Esquemas de
organização
Exacto
Tudo tem o seu lugar
Fácil para criar e manter
Exº páginas amarelas, geografia,
cronologia
Ambíguo
Difuso e com sobreposições
Difícil de criar e manter
Bom para a aprendizagem
Exº tópicos, discussão de audiência
86. Em resumo
Perceber os objectivos e a lógica do negócio
Perceber os objectivos do utilizador
Conhecer o medium em que trabalhamos, as
características e especificidades
Trabalhar com standards
Primeiro pensar, desenhar depois
Testar, testar, testar!