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.

1. Boas Práticas na Construção
de Sítios Web
Março 2011
Pedro Tavares

2. Arquitectura
Design
Tecnologia

3. I’m Lost!

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

6. Usabilidade

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

9. Vários produtos sofrem de
pouca preocupação com
experiência de utilização
It’s
Google!

10. Outros jogam com a
experiência emocional
Is
it
for
my
hair?
Medical
experiences?
Oh,
i
got
it...
It’s
a.....

11. Muitas
das
nossas
escolhas
são
baseadas
não
na
u�lidade,
ou
simplicidade,
mas
pela
sua
forma,
pela
relação
que
nos
liga
ao
objecto

12. How about
the Web?

13. Yahoo!
em
1996

14. Yahoo!
em
2004

15. Yahoo!
hoje

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

21. Muitos projectos
estão longe destas
preocupações

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

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

26. Mas muitos projectos
web estão ainda longe
destas preocupações…
Escrita Linear: utilização do estilo de escrita
linear dos meios tradicionais

28. Mas muitos projectos
web estão ainda longe
destas preocupações…
Estratégia de links: “linkar para dentro”

30. 3 níveis de
Usabilidade

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

32. 3 níveis de
usabilidade
Design

36. Design
Design Ergonómico:
– Verificar distâncias de scroll
– Verificar esquema de cores

39. 3 níveis de
usabilidade
Conteúdo

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

44. 3 níveis de
usabilidade
Arquitectura da
Informação

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

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”

53. Wait!
I’m outside!

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!

57. It’s an error…

58. Erros principais
em websites
UI Wizards, Inc.:
– Conteúdo
– Suporte à tarefa
– Navegação
– Formulários
– Pesquisa
– Apresentação de Texto
– Apresentação de links
– Design gráfico e layout

59. Conteúdo
Falta de
identificação da
homepage:
O quê, como, para
quem

60. Conteúdo
Utilizadores fazem
uma visualização
rápida do website:
deve dizer
claramente o que é
o website e quais
os objectivos

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

63. Conteúdo
Perceber contexto de
aplicação das
mensagens

64. Suporte à tarefa
Requerer dados
desnecessários
Necessidade de
solicitar o
mínimo
necessário

65. Suporte à tarefa
Aplicação
desenvolvida
sobre informação
irrelevante para o
utilizador

66. Navegação
Vários tipos
diferentes de
navegação

67. Navegação
Página actual
não indicada

68. Formulários
Parece ser
texto editável
mas não é

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

70. Hiperligações
Botões difíceis
de descobrir

71. Hiperligações
Links não
visíveis

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

73. Design gráfico e
layout

74. Design gráfico e
layout

75. Design gráfico e
layout

76. So, now let’s
build a website

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

80. 2. Arquitectura da
Informação
Estrutura do site

81. 2. Arquitectura da
Informação
um storyboard

82. Reflectir, analisar, conhecer as
melhores práticas
Conhecer os problemas ajuda
a novos e melhores
desenvolvimentos

83. 3. Conceber blocos de
informação - Wireframes

84. 4. Construir a maquete,
receber feedback

85. 5. Testar!
6. Desenvolver
7. Testar (e voltar a testar)

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!

87. Some ideas

88. Be creative, innovate

89. Think before you
design

90. Stay updated

91. You are what you
share
(Charles Leadbeater)

92. Think before you
design

93. This is teamwork

94. Next year everything
will be new (or not…)

95. Onde posso saber
mais

96. Mais Info

97. Mais Info
Asilomar
Ins�tute
for
Informa�on
Architecture
h�p://aifia.org/
Bloug
h�p://louisrosenfeld.com/home/
Boxes
&
Arrows
h�p://www.boxesandarrows.com/
Findability.org
h�p://findability.org/
Iawiki
h�p://www.iawiki.net/IAwiki
Seman�cs
h�p://seman�cstudios.com/publica�ons/seman�cs/
www.useit.com
www.iaslash.org
Update
yourself
@
Techcrunch.com
Thenextweb.com
Engadget.com
Mashable.com

98. Obrigado!
Keep it social:
11frames.com I pedroltavares@gmail.com
linkedin.com/in/pedroltavares
facebook.com/pedroltavares
twitter.com/ptavares