Projeto de Sites da Web

Introdução
„
Projeto de Sites da
Web
Hipertexto
„
É um documento composto por um conjunto de nós contendo
texto, imagens, sons e aç
ações, interligados entre si e formando
uma complexa teia de associaç
associações nãonão-seqü
seqüenciais, que pode
ser percorrida livremente pelos usuá
usuários.
„
Hipermídia = Hipertexto + Multimídia
A Web é um repositório de informações hipermídia
„
Web Site
„
Mário Meireles Teixeira
UFMA – DEINF
–
Local da Internet com nome e endereç
endereço conhecidos, que
conté
contém informaç
informações sobre um determinado assunto,
indiví
indivíduo, instituiç
instituição, empresa etc.
UFMA-DEINF
Utilização de Hipertexto
„
„
„
„
„
„
„
„
Fácil navegaç
navegação de um documento para outro, atravé
através
dos links;
Facilidade de criaç
criação de novos links quando necessá
necessário;
Forç
Força o autor a organizar melhor a informaç
informação;
Modularidade das informaç
informações;
Eliminaç
Eliminação de redundância de informaç
informação;
O documento não se limita a um único tipo de mí
mídia ou
forma de publicaç
ç
ão;
publica
Facilita a colaboraç
colaboração entre autores distantes fisicamente.
UFMA-DEINF
Mário Meireles Teixeira
2
Utilização de Hipertexto
Vantagens:
„
Mário Meireles Teixeira
3
Desvantagens:
„
É mais trabalhoso criar um documento em hipertexto;
„
É necessário manter os links atualizados ao longo do
tempo;
„
Em documentos complexos, o leitor pode ter a
sensação de estar perdido;
„
Há a possibilidade de distração do leitor, devido às
inúmeras possibilidades de navegação oferecidas.
UFMA-DEINF
Mário Meireles Teixeira
4
Fases de Projeto
O Desafio do Projeto de Sites
„
„
A metáfora de interação dos leitores com uma página
HTML é diferente da sua experiência com livros. Os
usuários não se limitam a olhar a informação na web,
eles interagem com a mesma
„
„
„
Algum desafios para os web designers:
„
„
„
„
„
„
Como subdividir, organizar e apresentar a informaç
informação;
É necessá
necessário fornecer ao leitor ferramentas de busca e
navegaç
navegação, assim como “dicas”
dicas” de onde ele está
está;
Qual o tamanho ótimo para uma pá
página;
Que tipo(s) de mí
í
dia
utilizar
e
em
que combinaç
m
combinação;
É importante conhecer a audiência do site e suas expectativas.
UFMA-DEINF
Mário Meireles Teixeira
No projeto de sites da web, pode-se encontrar
as seguintes fases:
„
„
5
Determinação dos objetivos do site e o retorno
esperado;
Identificação da audiência do site;
Determinação do tipo de informação que se quer
armazenar (escopo);
Projeto do site: a metáfora de navegação utilizada;
Projeto das páginas: o visual do site.
UFMA-DEINF
Atividade
„
„
Páginas web diferem das pá
páginas de um livro fundamentalmente
num aspecto: os hyperlinks permitem o acesso a elas sem nenhum
preâmbulo, logo pá
páginas web precisam ser mais “independentes”
independentes”
que as pá
páginas de um livro
„
As pá
páginas precisam conter informaç
informações para situar o leitor:
„
„
„
„
Mário Meireles Teixeira
6
Páginas Independentes
Definição do site a ser construído por
cada equipe...
UFMA-DEINF
Mário Meireles Teixeira
7
Quem – Sempre informe ao leitor qual a fonte da informaç
informação, quem
está
está falando com ele;
O Quê – O documento deve ter um tí
título explicativo que resuma seu
conté
contéudo.
udo. Este tí
título també
também se tornará
tornará o texto dos bookmarks feitos
pelos usuá
usuários;
Quando – A informaç
informação na web é bastante volá
volátil, logo é importante
informar a data de criaç
criação ou revisão de um documento;
Onde – Uma pá
página deve informar onde está
está localizada, a que
organizaç
organização pertence, qual a sua vizinhanç
vizinhança.
UFMA-DEINF
Mário Meireles Teixeira
8
Projeto de Interface centrado no
Usuário
Páginas Independentes
„
Uma página web precisa, no mínimo, de:
„
„
„
„
„
„
„
Um título informativo (que se tornará também um
bookmark)
A identidade do seu criador (autor ou instituição)
Uma data de criação ou revisão
Um link para uma página anterior ou menu
Um link para a “home page” do site (em suas
principais páginas)
„
„
„
Essas pequenas dicas podem ajudar muito no sentido
de construir um site que possa ser facilmente
compreendido pelos seus usuários
UFMA-DEINF
Mário Meireles Teixeira
As interfaces gráficas surgiram para dar aos
usuários um controle maior sobre as tarefas
realizadas no computador
Uma boa interface deve se adaptar às
necessidades dos usuários e não o contrário
Por isso é tão importante saber para quem se
está projetando o site, conhecer sua audiência
Os seguintes aspectos devem ser levados em
consideração durante o projeto:
[http://www.webstyleguide.com/interface/userhttp://www.webstyleguide.com/interface/user-centered.html]
9
UFMA-DEINF
Navegação
„
„
„
„
Hyperlinks conferem flexibilidade ao web designer,
designer, mas podem
desorientar o usuá
usuário
„
„
„
„
10
Projeto do Site
Elementos grá
gráficos e editoriais, alé
além da presenç
presença fí
física da obra,
dão ao leitor a sensaç
sensação de contexto em materiais impressos
Na web, desaparece a sensaç
sensação “física”
sica” da informaç
informação e os links
fornecem pouca informaç
informação sobre onde está
está o usuá
usuário
Páginas web devem fornecer ao leitor um conjunto de dicas sobre o
contexto em que se encontram e a organizaç
organização da informaç
informação, pois
somente uma pequena parte do site é vista a cada vez pelo leitor
„
Mário Meireles Teixeira
„
„
„
Top menus
Barras de botões
Botões “Back”
Back” and “Forward”
Forward”
Botões “Previous”
Previous” and “Next”
Next”
„
O projeto do site irá determinar sua estrutura
organizacional, ou seja, como arranjar seu
conteúdo a fim de melhor atender às
necessidades dos usuários
Lembre-se: o objetivo principal de um site é
prestar serviços à sua audiência
Pode ser um erro tático utilizar um site
meramente para descrever a estrutura de uma
empresa ou instituição
Exemplos: [HU Yale] [HU UFMA]
[http://www.webstyleguide.com/interface/navigate.html]
UFMA-DEINF
Mário Meireles Teixeira
11
UFMA-DEINF
Mário Meireles Teixeira
12
Subdivisão da Informação
„
„
„
„
Subdivisão da Informação - Menus
Sem uma organização lógica e coerente da informação,
um site não será bem compreendido
Sabe-se que o ser humano consegue guardar cerca de
quatro a sete unidades discretas de informação em sua
memória de curto prazo
Portanto, pequenas porções de informação são mais
fáceis de lembrar e manipular do que longos tratados
Passos básicos para organizar a informação de um site:
„
„
„
„
„
„
Uma ferramenta poderosa para a
organizaç
organização de um site é a utiliutilizaç
zação de menus. Os menus relarelacionam os grandes tó
tópicos do
site com suas unidades
individuais de informaç
informação
„
Tome cuidado para evitar:
„
Divida o conteú
conteúdo em pequenas unidades ló
lógicas;
Estabeleç
Estabeleça uma hierarquia entre as unidades;
Use a hierarquia para estruturar relaç
relações entre as unidades;
Construa o site segundo a estrutura de sua informaç
informação;
Analise o site sob o ponto de vista esté
estético e funcional.
UFMA-DEINF
Mário Meireles Teixeira
„
13
Menus do tipo “lista de
supermercado”
supermercado”
Hierarquias de menus muito
profundas
UFMA-DEINF
Estrutura de um Site
„
„
„
„
„
„
„
„
„
„
Seqüências
Hierarquias
Teias (Webs)
UFMA-DEINF
Mário Meireles Teixeira
14
Organização Seqüencial
Embora na web seja possível ligar qualquer
coisa a qualquer coisa, devemos evitar essa
tentação
Sem uma organização lógica do site, os
usuários irão procurar a informação de que
precisam em outro lugar
Formas principais de organização:
„
Mário Meireles Teixeira
15
É um dos tipos mais comuns e tradicionais de organizaç
organização
O projeto consiste em um conjunto de pá
páginas organizadas em uma
seqü
seqüência pré
pré-definida pelo autor do texto
Cada documento aborda uma parte do assunto principal e tem links
para o nó
nó anterior e o pró
próximo, com alguns possí
possíveis desvios da
narrativa
O padrão de leitura (navegaç
(navegação) é similar ao de um livro, com
capí
capítulos, seç
seções e subsub-seç
seções. O leitor pode, às vezes, querer
imprimir o conteú
conteúdo do site
Recomendado para a apresentaç
apresentação de conteú
conteúdos extensos, como:
apostilas, manuais, listas indexadas, glossá
glossários, informaç
informação
cronoló
cronológica etc.
UFMA-DEINF
Mário Meireles Teixeira
16
Organização Hierárquica
„
„
„
„
Organização em Teia
Muito utilizada para a organização de conjuntos
complexos de informação
Impõe uma disciplina maior ao autor do site
O padrão de navegação se baseia em uma seqüência
de caminhos que partem de um ponto comum, a página
principal do site
O leitor, então, percorre a informação segundo uma
hierarquia top-down
UFMA-DEINF
Mário Meireles Teixeira
17
„
„
„
„
„
Pode ser muito difí
difícil de entender ou prever
Impõe poucas restriç
restrições aos relacionamentos entre as pá
páginas
Para que um conjunto de informaç
informação possa ser organizado desta
forma, é preciso que ele seja altamente uniforme, com tó
tópicos e
subsub-tópicos bem definidos
A audiência desse tipo de site é especializada e deve ser treinada
para esta forma de interaç
interação
DestinaDestina-se à elaboraç
elaboração de manuais de procedimentos,
descriç
descrições de casos mé
médicos,
listas de cursos etc.
UFMA-DEINF
Comparação entre as formas de
organização
18
Diagrama do Site
„
„
Mário Meireles Teixeira
Um bom diagrama do site, de preferência feito
em uma grande folha de papel, é uma excelente
forma de documentar o projeto e a sua evolução
Os três principais padrões de organizaç
organização de sites, considerandoconsiderandose a linearidade da narrativa vs. a complexidade do conteú
conteúdo
UFMA-DEINF
Mário Meireles Teixeira
19
UFMA-DEINF
Mário Meireles Teixeira
20
Temas de Projeto de Sites
Atividade
„
Para o tema escolhido anteriormente,
defina a estrutura do site e a organização
da informação...
[http://www.webstyleguide.com/site/themes.html]
UFMA-DEINF
Mário Meireles Teixeira
21
UFMA-DEINF
Elementos de um Site
Mário Meireles Teixeira
22
Projeto de Páginas
Home pages
„ Menus
„ Guias
„ Novidades
„ Busca
„ Informações de contato e feedback
„ FAQs
„ Referências
„ Páginas de erro
[http://www.webstyleguide.com/site/elements.html]
„
UFMA-DEINF
Mário Meireles Teixeira
23
„
Um bom design de pá
página pode
conferir a um site maior clareza,
legibilidade, organizaç
organização e
confianç
confiança por parte dos
usuá
usuários
„
A finalidade principal do design
grá
gráfico é criar uma hierarquia
visual forte e consistente,
logicamente organizada, que
dirija a atenç
atenção dos usuá
usuários à
informaç
informação que se quer veicular
UFMA-DEINF
Mário Meireles Teixeira
24
Recomendações de Projeto de
Páginas
Projeto de Páginas
„
„
„
Contraste é essencial para
capturar a atenç
atenção dos usuá
usuários
„
Uma pá
página constituí
constituída apenas de
texto tornatorna-se monó
monótona e
indiferenciada
„
Estabeleça uma hierarquia visual
„
Guie o olhar do leitor
„
Uma pá
página com excesso de
cores, fontes ou grá
gráficos també
também
afasta a maioria dos usuá
usuários
„
Um bom contraste visual provê um
senso de organizaç
organização
„
Mário Meireles Teixeira
25
Mário Meireles Teixeira
26
Design Grids
„
„
Antes de codificar um site, deve-se conceber um layout
básico para as páginas do mesmo, um design grid
Este deverá delimitar a área reservada para:
„
„
„
„
„
„
Mário Meireles Teixeira
Crie um layout bá
básico para o seu site e seja fiel a ele
UFMA-DEINF
Dimensões da Página
UFMA-DEINF
Evite grá
gráficos “bonitinhos”
bonitinhos” e desnecessá
desnecessários. Cuidado
també
também com letras muito grandes e excesso de fontes
Consistência é fundamental
„
UFMA-DEINF
A parte superior de qualquer pá
página é a mais importante,
especialmente no caso de informaç
informações lidas na tela do
computador. Atenç
Atenção aos primeiros 10 cm!
Distrações gráficas
„
„
É preciso que a pá
página tenha uma hierarquia visual forte e
consistente, que enfatize os elementos importantes
27
ilustraç
ilustrações
barras de navegaç
navegação
títulos
subtí
subtítulos
texto ...
Seu objetivo é facilitar a montagem de uma nova página,
sem que se perca tempo pensando no layout da mesma,
além de conferir consistência, equilíbrio e previsibilidade
ao site como um todo
UFMA-DEINF
Mário Meireles Teixeira
28
Cabeçalhos: identidade do site
Design Grids
„
O cabeçalho da página deve fornecer informações úteis para a localização do usuário:
„
„
„
Identificação da organização ou instituição
responsável pelo site
Indicação da posição daquela página no contexto
geral do site
Links de navegação para as principais seções do site
[http://java.sun.com]
http://java.sun.com]
UFMA-DEINF
Mário Meireles Teixeira
29
UFMA-DEINF
Rodapés: proveniência
„
„
„
„
„
30
Tabelas
Os rodapés também são importantes na comcepção de uma página e podem conter informações como:
„
Mário Meireles Teixeira
„
„
Origem da página
Data de criação/atualização
Autor
Forma de contato
Links para as principais seções do site
„
„
As tabelas servem para a apresentação
de informação em forma tabular
São mais utilizadas, porém, para compor
o layout das páginas, sendo empregadas
para o posicionamento de textos e
gráficos
Podem ter largura absoluta ou relativa
[http://www.webstyleguide.com/page/tables.html]
[http://www.usp.br]
http://www.usp.br]
UFMA-DEINF
Mário Meireles Teixeira
31
UFMA-DEINF
Mário Meireles Teixeira
32
Frames
„
„
„
„
„
Atividade
Também são utilizados para controlar o layout
das páginas
Permitem o carregamento de múltiplos documentos HTML simultaneamente
São utilizados em sites cujos conteúdos mudam
com freqüência e que exigem flexibilidade na
atualização das páginas
Muitas vezes, são usados para compor páginas
de índice que referenciam uma página principal
[http://www.webstyleguide.com/page/frames.html]
UFMA-DEINF
Mário Meireles Teixeira
33
„
Defina o projeto das páginas do seu site...
UFMA-DEINF
Mário Meireles Teixeira
34