Projeto de interfaces aula 3

Prévia do material em texto

Projeto de Interface
Edvaldo Junior
Projeto de Interface
Características das páginas
O tempo médio que um usuário passa numa página web é menor que 10 segundos. Neste intervalo, precisa não só 
entender a estrutura da interface, como também verificar se o conteúdo e o layout o interessam e para onde deve 
ir a seguir.
Para atender a impressões tão imediatas, as páginas de um site, de maneira geral, têm características gerais que a 
maioria dos usuários está acostumada a encontrar, como:
1. Modelo de navegação que resume a relação entre as ações dos usuários e o conteúdo publicado – inclui a 
gramática (ou conjuntos de símbolos articulados) entre a ação do usuário e os objetos da interface. A interface 
torna visível funcionalidades invisíveis.
2. Padrões de layout – Cores, tipologias, aplicações da identidade visual, ícones, etc..
3. Padrões de interação com/para o usuário – Barras de navegação, menus, botões, janelas, mensagens, 
formulários.
4. Modelo de conteúdo, ou o conceito editorial e comercial da publicação, que define como vários tipos de 
informação são exibidas.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Há também elementos pontuais de uso aceito e legitimado pela maioria dos usuários, como:
1. Carrinho de compras em site de comércio – solução para armazenar as mercadorias durante o processo de 
seleção e decisão sobre a compra.
2. Migalhas de pão, ou trilhas de navegação – facilitam a orientação dos usuários dentro da estrutura geral.
3. Mapa do site – modelo de visualização da arquitetura da informação e dos relacionamentos entre as áreas e 
unidades principais.
4. Contato – informações de diversas formas de acesso do usuário à pessoa/ empresa que publica um site.
É importante também considerar as características específicas da página Principal e das páginas internas.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
A página Principal
Embora tenha a mesma estrutura visual e conceitual do resto do site, uma página Principal bem diferente das 
páginas internas sinaliza claramente que contém referências de acesso para todas as outras.
Jakob Nielsen afirma que 40% dos visitantes chegam a um site pelas páginas internas, onde ficam de 25 a 35 
segundos. Por isto, a diferenciação da Principal ajuda a orientar os usuários na estrutura de informações.
No entanto, a jornalista Nanette Marcus, da iMedia Connection conversou em julho de 2007 com uma série de 
editores e webmasters de sites como Razorfish, Real GirlsMedia, Next Stage Evolution e verificou que quase todos 
concordam que a chamada home page já não tem mais o apelo que tinha no início da web. 
Ferramentas como Ajax, RSS, e recursos para a personalização de páginas cada vez mais afastam o usuário das 
páginas Principais default dos web sites. Também o uso generalizado das ferramentas de busca como recurso de 
navegação contribui para a menor relevância da home page.
A página Principal ainda é muito procurada por usuários que precisam obter informações gerais sobre uma marca, 
uma empresa ou determinada área de atividade.
Já em sites com pouco apelo de marca como este que você está lendo, cerca de 90% dos visitantes chegam pelas 
páginas internas e não visitam a página Principal.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
De qualquer forma, ainda é importante manter a aparência da Principal atraente para motivar o leitor interessado 
no conteúdo a visitar as páginas internas. E é importante também, nestas páginas (especialmente nas das camadas 
superficiais), destacar o conteúdo mais importante, ao modo da página Principal do web site. 
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Embora tenha a mesma estrutura visual e 
conceitual do resto do site, a página 
Principal diferente das páginas internas 
sinaliza claramente que contém 
referências de acesso. A página Principal 
leva em conta aspectos mais genéricos do 
conteúdo do site, enquanto as páginas 
internas apresentam recortes específicos 
dos assuntos.
Projeto de Interface
Características a considerar na página Principal:
1- Identificar claramente a localização do usuário e a atividade/conteúdo mais importante do site e o que este 
pode oferecer (através do logotipo e/ou do símbolo, com breve descrição da marca em local bem visível, relação 
direta do layout com a atividade e clareza dos títulos das barras de navegação). 
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Identificar claramente a atividade mais 
importante do site (através do logotipo 
e/ou do seu símbolo bem visível, de breve 
descrição da marca, da relação do layout 
com a atividade, dos títulos das barras de 
navegação) e o que pode oferecer. A 
página ilustrada ao lado apresenta o 
logotipo bem visível, mas a explicação das 
atividades do site, em um longo parágrafo 
no alto, dificilmente é lida pela maioria 
dos usuários que a visitam, que tendem a 
permanecer apenas 30 segundos na 
página Principal (Nielsen, 2006).
Projeto de Interface
2- Oferecer suporte aos usuários para encontrar o que procuram, através de ferramentas de busca, contato bem 
visível e fácil de usar, arquitetura da informação clara, atalhos para páginas mais profundas na estrutura.
3- Ser permanentemente atualizada e identificar o conteúdo renovado (como acontece na primeira página de um 
jornal online ou impresso). 
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Ser permanentemente atualizada e 
identificar o conteúdo atualizado (como 
acontece na primeira página de um 
jornal). As informações ficam dispostas na 
página de acordo com os objetivos 
editoriais e comerciais - tanto em relação 
à imagem organizacional quanto em 
relação a acontecimentos sazonais e à 
oferta de produtos.
O exemplo abaixo identifica com clareza 
os assuntos atualizados, especialmente as 
"Notícias" e a "Agenda", na coluna à 
esquerda. E destaca os assuntos principais 
sob o título "Veja no site".
Projeto de Interface
4- Marcar a localização do usuário em relação às outras páginas e guiar seus percursos.
5- Ter mais área para a navegação do que para conteúdo, sinalizando o conteúdo mais importante na parte 
superior. 
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Ter mais área para a navegação do que 
para conteúdo, sinalizando o conteúdo 
mais importante na parte superior. As 
telas abaixo mostram um exemplo de site 
(cujo layout não é mais este) em que a 
página Principal apresenta apenas 
chamadas e links para o conteúdo mais 
importante. Já as páginas internas 
apresentam textos e imagens que 
desenvolvem os assuntos com mais 
profundidade.
Projeto de Interface Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
6- Informar os assuntos de maneira 
concisa e direta, para que os leitores 
não se dispersem entre as 
informações e deixem de encontrar o 
que estão procurando. Pesquisa 
global sobre os hábitos de usuários 
de programas leitores de tela por 
pessoas com deficiência visual 
mostra que a maioria (46%) lê o 
conteúdo da Principal, mais do que 
acessa os links para ir para outras 
páginas (35%). 
7- Ser dividida em diferentes seções 
de acordo com os objetivos 
estratégicos da marca e com a 
estrutura de informações.
8- Publicar, se conveniente, uma 
seção ou menu com links para as 
áreas mais acessadas pelos usuários, 
que mude periodicamente, de 
acordo com os resultados dos 
relatórios de acesso.
Já as páginas internas apresentam textos 
e imagens que desenvolvem os assuntos 
com mais profundidade.
Projeto de Interface
Páginas internas
A rigor em um web site todas as páginas são internas, inclusive a Principal, poistodas fazem parte do canal e a 
navegação não segue uma ordem linear, como num livro ou um filme. De qualquer forma, "páginas internas" são 
aqui apontadas como as que não incluem a Principal, localizadas na segunda camada de navegação.
Cada vez mais as páginas internas são acessadas diretamente, sem que o usuário sinta necessidade de passar pela 
Principal. Veículos como blogs, ferramentas de busca, e-mails informativos, wikis e tecnologias como RSS se 
consolidam como suportes à navegação dos leitores online e os direcionam para as informações que procuram.
Cerca de 60% dos visitantes chegam a um site pelas páginas internas e suas visitas são mais longas – 70 a 80% do 
tempo – do que quando chegam pela Principal. 
Características a considerar nas páginas internas para facilitar o deslocamento e a realização de tarefas:
1- Apresentar em destaque o nome da página Principal, de preferência no canto superior esquerdo. O termo de 
referência pode ser também Home, e pode ser substituído pelo logotipo da empresa/ departamento/ projeto.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
2- Mostrar o logotipo da empresa ou organização em local bem visível, ligado à página Principal. 
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Mostrar o logotipo da empresa ou 
organização em local bem visível. No site 
ao lado, o logotipo institucional fica bem 
visível em relação ao conteúdo e aos 
elementos funcionais.
Projeto de Interface
3- Manter o mesmo estilo das outras páginas, pelo menos das páginas da mesma camada, para contextualizar a 
navegação e orientar o usuário que chegue por elas.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
4- Manter o foco em aspectos mais específicos do que na página Principal.
5- Prover o sentido de localização do usuário em relação ao resto do site e à página Principal. Para isto, é 
importante apresentar os níveis anteriores da estrutura de informações (com links) até chegar à página atual (esta, 
em formato textual, sem link).
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Prover o sentido de localização do usuário em relação ao resto do site e à Principal. As 2 páginas reproduzidas 
aqui não indicam claramente onde estão situada em relação às informações da barra de navegação principal.
Projeto de Interface
6- Manter as informações estruturais de navegação, sobre o site (como breadcrumb, ferramenta de busca, data de 
atualização, links relacionados, mapa do site) e de auxílio ao usuário sempre em locais de fácil acesso e 
visualização.
Na maioria dos sites, estas informações costumam ficar localizadas em lugares fixos em todas as páginas.
1- Se o conteúdo for muito extenso, dividir o assunto em um resumo geral numa página e detalhar o assunto em 
outra, de forma que o usuário possa decidir se quer se aprofundar no assunto. 
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Se o conteúdo for muito extenso, pode-se dividir o 
assunto em um resumo geral numa página e 
detalhar o assunto em outra página, de forma que o 
usuário possa decidir se quer conhecer melhor o 
assunto. O exemplo aqui mostra o resumo de um 
texto. O link para o texto mais detalhado, em 
formato PDF, está abaixo do resumo, com indicação 
de formato e tamanho do arquivo.
Projeto de Interface
2- Prover mais informações sobre o assunto da página, como por exemplo 
imagens ou fotos ilustrativos, links para páginas do site ou de outros sites, 
podcasts e vídeos relacionados. 
O fortalecimento de uma estrutura menos centrada na página Principal e 
nas relações hierárquicas entre as informações, apoia os percursos 
transversais dos usuários através de uma estrutura matricial. Deste modo, 
o canal fica mais estruturado em torno dos interesses dos usuários do que 
na sua taxonomia interna.
3- Programar as páginas (com CSS) de modo que a versão impressa 
contenha apenas os elementos de conteúdo principais e menos 
elementos de navegação (quem imprime a página geralmente está 
interessado no conteúdo e não na estrutura de informações em torno da 
página, na tela). 
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Aprofundar o assunto da página, como por exemplo imagens ou fotos ilustrativos, links 
outras páginas do site ou de outros sites, podcasts e vídeos relacionados. O exemplo ao 
lado mostra um jornal que valoriza os assuntos relacionados ao artigo principal e lista 
os principais assuntos do dia para fortalecer a estrutura de navegação centrada em 
torno do conteúdo (e menos na estrutura de informações das editorias).
Projeto de Interface Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Programar as páginas para que 
a a versão impressa tenha 
apenas os elementos de 
conteúdo. As duas imagens 
abaixo mostram o preview de 
impressão da página. A versão 
para monitor, que tem altura de 
apenas uma tela, pois utiliza 
iframe e uma barra de rolagem 
interna, demanda duas páginas 
para sua impressão. Vemos que 
mais da metade da primeira 
página é ocupada por espaços 
em branco e pela barra de 
navegação. E apenas uma 
pequena parte da página 
seguinte é ocupada pelo texto. 
O preparo com CSS de uma 
versão para impressão pode 
eliminar espaços e conteúdos 
supérfluos e economizar 
algumas folhas de papéis dos 
visitantes.