Projeto de interfaces Aula 1

Prévia do material em texto

Projeto de Interface
Edvaldo Junior
Projeto de Interface
Variações para cada usuário
Tamanho e resolução da página
As resoluções de tela mais utilizadas atualmente pelos usuários mundiais de PCs são:
 1366 x 768 pixels – um dos formatos que mais ganhou usuários no último ano e é o mais usado 
atualmente. Em outubro de 2013, foi usada por 16,53% dos usuários mundiais (site Market Share).
 1024 x 768 pixels (975 x 720) – ainda pode ser considerada como uma das referências para o 
desenvolvimento de web sites. Em outubro de 2013, foi usada por 8,22% dos usuários mundiais (site 
Market Share).
 1280 x 800 pixels – formato mais horizontal, utilizado por um número crescente de usuários. Em outubro 
de 2013, foi usada por 8,14% dos usuários mundiais (site Market Share).
 1920 x 1080 pixels – Em outubro de 2013, foi usada por 6,37% dos usuários mundiais (site Market Share).
 1280 x 1024 pixels – Em outubro de 2013, foi usada por 6,11% dos usuários mundiais (site Market Share).
A resolução 840 x 640 pixels (800 x 600) hoje é pouco utilizada. Em fevereiro de 2012, foi usada por apenas 
1,55% dos usuários mundiais (site Market Share) e em 2013, não foi mencionada.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Um gráfico da StatCounter entre os meses de 2009 e 2012 (Foto: Reprodução).
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
A densidade de pontos média da maioria dos dispositivos digitais ainda é 72PPI. Mas este cenário está 
mudando rapidamente. A densidade de iPhones 3GD é de 320x480, com 264 ppi. A dos iPhone 4 e 4S, iPods
Touch é de 960x640, com 326 ppi de densidade de pontos. A dos iPhone 5 é de 640px x 1136px, com 326 ppi de 
densidade de pontos. A dos iPads2 é de 1024 x 768, a dos iPads3, é de 2048 x 1536 (sendo que o Retina Display 
apresenta densidade de pontos de 326 PPI). Os MacBook Pro têm a maior densidade dos computadores atuais: 
200ppi.
A resolução dos tablets Galaxy, da Samsung, de 7 polegadas (WVGA854), é 1024 x 600, com 316PPI e a de 10 
polegadas, 1280 x 800 (WXGA).
De modo geral, dispositivos Android com telas maiores, têm 960 x 720 e 320 ppi de densidade. Telas menores 
incluem tamanhos e densidades de large 640 x 480 (240 ppi), 470dp x 320 (160 ppi) e 426 x 320 (120 dpi).
Blackberries têm resoluções como: 240x260, 320x240, 324 x 352, 240x320, 240x160, 480x360. O celular Xperia
S, da Sony, é o dispositivo móvel com maior densidade de pontos, 342 ppi.
Pesquisas mostram que as telas maiores, como as de PCs, são adequadas para atividades produtivas, enquanto 
as menores, como as dos dispositivos móveis, são indicadas para comunicação e entretenimento. Por isto, é 
importante examinar os casos de uso de cada interface para priorizar o uso num tamanho ou outro, ou em 
todos os tamanhos.
Para facilitar o acesso de um web site projetado para PCs, definir uma medida mínima para a largura das 
colunas em layouts líquidos, que se adaptam à largura das telas – a adaptação irrestrita às telas estreitas dos 
dispositivos faz com que muitos textos fiquem ilegíveis, especialmente se o layout tiver muitas colunas.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Normalmente, quanto maior o monitor, maior a resolução ou densidade dos pontos com que se pode configurá-lo 
– embora o iPad 3, com monitor de alta resolução, quebre um pouco esta regra. De qualquer forma, quanto maior 
o número de pontos (bits), mais definidas aparecem as imagens.
Do mesmo modo, quando um monitor grande é configurado com baixa resolução de pontos, pode mostrar 
imagens embaçadas e indefinidas, pois precisa criar pontos falsos da imagem de menor tamanho. Em alguns 
casos, pode "esticá-la", para ocupar toda a sua área, ou mostrar a área ocupada pela imagem com espaços 
laterais neutros até os limites laterais da tela.
Variações de tamanho e resolução
Os formatos dos dispositivos digitais estão ficando cada vez mais heterogêneos, variando entre as grandes telas 
para uso de PCs desktop e as telas menores para uso em movimento.
O espaço de publicação de conteúdo de sites e plataformas online precisa considerar o aumento das diferenças 
entre largura máxima e mínima das telas de PCs, que variam entre 320 a 2560 pixels ou mais (quando os usuários 
usam mais de um monitor).
O layout das interfaces web precisa também considerar a proporção entre a largura e da altura dos monitores, 
que apresenta grandes variações. Esta vai desde 4:3, padrão dos aparelhos de TV e PCs, comum nas larguras de 
1024 a 1280dpi, até a proporção dos monitores de HDTV, wide screen (16:9, resolução 1280x720 ou 16:10, 
resolução 1280x800, chegando a 1680x1050 e 2560x 1600).
Em PCs, telas com a largura de 1280dpi, por exemplo, podem ter proporção mais quadrada (como a 1280 x 1024, 
proporção 5:4) ou mais larga. Estas diferenças de resolução e proporção aumentam ainda mais quando se 
considera as telas dos dispositivos móveis.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Resoluções a considerar no projeto de interfaces web
No desenvolvimento de web sites para PCs, a decisão sobre a resolução de tela a ser adotada como padrão 
prioritário depende do perfil da maioria dos usuários .
O usuário médio que navega na internet, escreve e-mails e textos, faz planilhas, tende a preferir monitores com 
resolução mais baixa, pois, além dos dispositivos serem mais baratos, as imagens e os textos ficam mais fáceis 
de ver e ler. O usuário que usa programas gráficos profissionais para edição de vídeos e imagens, projetos web, 
visualização de imagens complexas, costuma usar monitores grandes de alta resolução.
Os usuários de jogos costumam preferir as resoluções nativas dos monitores compatíveis com a resolução dos 
aplicativos, pois quando se aumenta a resolução, o desempenho do jogo tende a diminuir, na medida em que 
existirão mais pixels a ser processados na tela.
No projeto de intranets, como as condições de acesso são conhecidas, pode-se estabelecer uma resolução 
padrão que serve de base para o desenvolvimento da interface.
Por apresentar compatibilidade com os monitores mais antigos, muitos desenvolvedores web ainda consideram 
a resolução de 1024 x 768 como base para o desenho de páginas, com largura-referência da interface de 960px, 
incluindo as dimensões do browser e de barra de rolagem laterais.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Na internet aberta, como o público e as possibilidades de configurações e situações de acesso são amplos, é 
mais relevante a premissa de que o layout deve se manter estruturado em diferentes configurações. Desta 
forma, mesmo os usuários com resoluções de tela não prioritárias podem ter uma boa experiência de uso. O 
tamanho ideal da página previsto no layout deve incluir o maior número de visitantes possível, com uso de 
diferentes resoluções. 
Autores como Ethan Marcotte defendem o chamado "responsive design", ou design responsivo, segundo o qual 
o design de interfaces web para um número cada vez maior de dispositivos deve considerar as diferenças de 
resolução como facetas da mesma experiência.
Outros, como Elliot Jay Stocks, defendem que o design responsivo deve mirar a independência de plataforma, 
na medida em que novos dispositivos e resoluções são criados a toda hora, e não se pode atender a todas as 
variações possíveis. Pode-se desenhar para uma experiência ideal, mas também agregar tecnologias baseadas 
nos padrões web para que as telas sejam renderizadas de modo adaptativo a cada mídia.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Layout líquido: usar ou não?
Em páginas web com layout líquido, o conteúdo seadapta à janela do browser de cada usuário. Ou seja, a 
largura das ferramentas e das áreas de conteúdo aumenta à medida que a largura da tela aumenta, e diminui 
quando o monitor e/ou a resolução de tela é menor. Mas com a proliferação de formatos e o uso de telas cada 
vez mais largas, esta é ainda uma solução a considerar?
Especialistas como Jakob Nielsen recomendam o desenvolvimento de interfaces baseadas no chamado "layout 
líquido", em que os limites laterais das páginas são definidos em percentuais em vez de pixels.
Ele aponta 3 critérios a considerar na adaptação da interface à resolução de tela:
 Visibilidade inicial: Informações mais importantes da página localizadas no alto, para que o usuário possa 
tomar conhecimento do assunto geral sem precisar fazer rolagem vertical.
 Estética: Aparência da página e composição dos elementos dispostos de maneira harmônica em diferentes 
resoluções de tela.
 Legibilidade: Textos fáceis de ler em páginas com colunas de diversas larguras, especialmente colunas nas 
mais estreitas.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Nas telas com alta resolução, as letras dos textos criados para leitura em 1024 x 760 podem ficar muito 
pequenas e difíceis de distinguir. Por outro lado, a leitura de textos em layouts criados para leitura em 1280 x 
800 pode exigir dos usuários com resolução de 1024 x 760 longas rolagens verticais da tela.
Em ambos os casos, o layout líquido facilita a visualização dos textos (especialmente se o tamanho das letras for 
configurado para variar proporcionalmente à resolução de tela). Portais com grande volume de acessos diários, 
como Amazom.com, Submarino e Americanas.com preferem usar este modelo de configuração, por incluir o 
maior número possível de usuários em suas lojas online.
O layout líquido também é mais confortável para os usuários que aumentam o tamanho das letras no browser, 
pois se mantém estruturado mais facilmente. 
Estudo realizado em 2001 pela equipe de usabilidade da universidade estadual de Wichita, EUA, mostrou que o 
layout líquido foi percebido pelos usuários como o mais adequado para a leitura, a navegação e a localização de 
informações, em detrimento dos layouts mais estreitos, centralizados ou alinhados à esquerda da tela. Foi 
também percebido como o mais "profissional". 
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Imperfeições do layout líquido
Mas esta solução não é perfeita. Entre suas desvantagens está a difícil leitura em janelas pequenas, em que a 
largura da mancha que contém os textos fica muito estreita, especialmente em telas de baixa resolução - mas 
este problema pode ser atenuado com a configuração de larguras mínimas de colunas de textos.
Já se o layout ocupa toda a largura da janela do browser numa tela de alta resolução, as linhas de textos podem 
ficar muito longas e difíceis de ler (ou fazer uma varredura), o que pode ser atenuado com a configuração da 
largura para apenas 85% da página.
Por isto, é importante limitar a largura horizontal das interfaces web. Larguras maiores que 1.000 pixels são 
muito extensas e o usuário pode ter dificuldade de olhá-la por inteiro, precisa mover os olhos de um lado para 
outro.
O uso de recursos de HTML e CSS para o ajuste da interface à configuração dos usuários de perfil majoritário 
permite a manutenção da usabilidade do conjunto, independentemente das condições de acesso.
Alguns desenvolvedores utilizam também os chamados "hacks", ou recursos de programação que permitem a 
verificação da resolução do monitor do usuário e a apresentação de páginas desenhadas especialmente para 
estas condições.
No entanto, estas soluções costumam ser provisórias, na medida em que as mudanças tecnológicas vão 
rapidamente substituindo as configurações mais utilizadas por novas situações de acesso e uso.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Responsive design
A aderência aos padrões (standards) web e às normas do W3C é cada vez mais adotada tanto pelos 
desenvolvedores de hardware quanto dos softwares de acesso, e é uma referência para os desenvolvedores 
comprometidos com a compatibilidade e o uso amplo das suas interfaces em diversos dispositivos e 
circunstâncias de acesso à internet.
As media queries, componentes previstas nas especificações de CSS3, permitem melhor adaptação das telas aos 
diferentes tipos de mídias. Uma media query permite o direcionamento de algumas classes para dispositivos 
específicos, bem como verificar as características físicas do dispositivo que renderiza a tela. Por exemplo, 
seguindo o aparecimento do WebKit (browser web de código aberto) móvel, algumas media queries passaram a 
ser adotadas para adaptar estilos CSS para o iPhone e telefones com Android. Para isto, incorpora-se uma query a 
um atributo de mídia num link de style sheet:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="nomedoestilo.css" />
A query tem 2 componentes, tipo de mídia (screen), e, entre parêntesis, a característica da mídia (max-device-
width) a verificar, seguida pelo valor da resolução (480px).
Pode-se assim agregar tecnologias baseadas nos padrões web para que o design das telas se adapte a cada mídia.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Navegadores (browsers) utilizados
É grande a variedade de browsers, ou programas de 
navegação, utilizados pelos usuários da internet. É grande 
também a quantidade de dispositivos de acesso, desde 
computadores pessoais até assistentes digitais e telefones 
portáteis. O mercado se divide entre 5 principais marcas de 
browsers web: Internet Explorer, Firefox, Chrome e Safari e 
Opera.
Segundo a NetApplications, em fevereiro de 2012, as 
diferentes versões do Internet Explorer somaram 52,84% do 
mercado mundial, o Firefox 20,92%, o Chrome 18,9%, o Safari 
5,24%, o Opera 1,71%. Depois de acelerado crescimento nos 
últimos anos, o share do Firefox se mantém levemente 
descendente nos últimos meses.
Dados da mesma fonte em agosto de 2009 mostram o Internet 
Explorer com 66,97% dos usuários, o Firefox por 22,98%, Safari 
por 4,07%, Chrome por 2,84% e o Opera por 2,04% dos 
usuários. A diminuição do uso do Internet Explorer é gradual, 
embora haja oscilações e seja o browser dominante em 
computadores pessoais.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Dados históricos e geográficos
 Em dezembro de 2010, na Europa, o Firefox tinha 38.11% do mercado, contra 37.52% do IE.O Google Chrome
ficou em terceiro lugar, com 14.58% - 5.06% em dezembro de 2009 (StatCouter).
 Em junho de 2006, o browser para PC mais utilizado no Brasil era o Internet Explorer (93,7% dos usuários), 
seguido pelo Firefox (5,6% dos usuários), Opera, Mozilla (e-bit).
 Em julho de 2006, o Firefox tinha grande número de usuários na Europa, 21.1% do total. Na primeira semana 
de julho, já representavam 27.8% dos usuários (XiTi Monitor).
 Na Eslovênia em 2007, o Firefox era usado por 47.9% dos usuários, e na Polônia, Hungria e Croácia, por mais 
de 39% dos usuários. (CNet, 17.7.2007)
 Em novembro de 2007, para acessar este site o Internet Explorer foi usado por 74,86% dos usuários e o 
Firefox por 21,79%, seguidos do Firefox para Linux (1,32%), do Opera para Windows (0,64%).
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Ambiente heterogêneo
A grande variedade de browsers, suas versões e as diferentes maneiras de interpretar os padrões web dificultam 
o trabalho do desenvolvedor web, que precisa prever como as páginas e interfaces web aparecem em cada um 
deles.
A maioria dos browsers atuaissuporta HTML 4.0, ou XHTML, embora haja inconsistências entre os programas na 
maneira como interpretam os estilos CSS. Aos poucos, os novos browsers se mostram compatíveis com o HTML 5. 
Uma mesma página pode aparecer na tela de maneira muito diferente, dependendo do programa e das 
configurações do usuário. 
Para contornar este problema, alguns projetistas recorrem aos chamados "hacks", ou artifícios de programação 
que simulam a interpretação do código de alguns browsers, para garantir a consistência do layout das páginas.
A maioria dos desenvolvedores opta por escolher os browsers prioritários para os quais criam o código das suas 
páginas. Este é um processo de decisão que demanda a avaliação de questões como:
 A partir de que versões dos programas um site deve ser compatível?
 Quando, a partir de que versão, deixar de oferecer suporte?
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
A escolha dos browsers priorizados para visualizar um determinado site é uma tarefa que exige estudos prévios 
sobre os hábitos dos usuários, com ajuda de estatísticas de acesso e de dados fornecidos por pessoas e/ou 
dispositivos que mantêm contato direto com o público.
 Como o número de usuários deste site que utiliza o Firefox é 10% maior que nas estatísticas globais, levamos 
em conta este dado no seu aperfeiçoamento e atualização.
Se não for possível atender às especificações de todos os programas e o desenvolvedor não quiser criar estilos 
CSS ou recursos alternativos para cada um, as páginas devem ao menos se manter estruturadas, harmoniosas e 
funcionais em navegadores menos utilizados e na principais plataformas. Assim, um maior número de usuários 
pode acessá-la adequadamente.
Para isto, o uso de padrões web, recomendações do W3C para desenvolvedores de sites e de browsers, aumenta 
a compatibilidade das páginas com diferentes plataformas, linguagens e sistemas operacionais. Estes padrões 
apontam para recursos que todos os browsers dispõem (ou devem dispor) e para o estabelecimento de critérios 
universais para a programação de interfaces web.
Sua adoção representa um grande ganho de tempo/recursos para os desenvolvedores e facilita o estabelecimento 
de uma relação de confiança dos usuários com a interface.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Espaço do browser na página
Cada browser ou programa navegador ocupa um espaço diferente na janela do dispositivo em que estiver aberto, 
seja um computador, assistente pessoal, celular, tablet ou aparelho de TV. Estes espaços variam também de 
acordo com a resolução de tela utilizada.
Para criar layouts adequados a estas telas, é necessário considerar a largura em pixels e subtrair o espaço 
ocupado pelo browser da largura total. Para isto, basta configurar o monitor para um tamanho, expandir a janela 
do browser ao seu tamanho máximo, fazer uma captura de tela, abri-la num programa editor de imagens e medir 
a área de conteúdo em pixels.
No entanto, este cálculo de medidas fixas é sempre variável, porque cada usuário configura seu programa de 
maneira diferente, utilizando ferramentas com ou sem ícones, habilitando ou não a barra de status, com ou sem a 
visualização de barras personalizadas de ferramentas de busca.
Acontece também que muitas vezes o tamanho da página diminui porque o usuário navega com a janela do 
browser apenas parcialmente aberta e pode ver apenas uma parte da página.
Os valores usados para a elaboração de layouts devem considerar os valores default, usados pela maioria dos 
usuários. Pode-se usar os valores:
 Para tamanho de tela 1024 x 768: Internet Explorer - 1003 × 568; Firefox - 1005 × 602; Opera - 1001 × 595; 
Mozilla - 1003 × 588; Netscape - 1005 × 557.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Uma maneira de contornar os problemas com as diferentes configurações do usuários é utilizar páginas que se 
adaptem a diferentes larguras de janela, os chamados "layouts líquidos", baseados no percentual do espaço 
ocupado pela página em relação ao tamanho geral da janela.
Nestes, deve-se planejar com precisão as áreas que deverão ou não "esticar" ou "encolher", para controlar 
melhor o resultado em cada situação. Exemplo: Amazon.com.
Já autores, como Ethan Marcotte, defendem que o design de interfaces web para um número cada vez maior de 
dispositivos deve considerar as diferenças de resolução como facetas da mesma experiência. Pode-se desenhar 
para uma experiência ideal, mas também agregar tecnologias baseadas nos padrões web para que as telas sejam 
renderizadas de modo adaptativo a cada mídia. 
Recursos como "media query" não permitem configurar uma interface para classes específicas de dispositivos, 
mas podem verificar as características físicas do dispositivo que interpreta uma interface. Para iPhone e telefones 
com Android, pode-se incorporar uma consulta a um dos arquivos CSS associados a uma página, que defina um 
tipo de mídia ("screen"), e a esta associe uma query, especificando que se o dispositivo tem determinada largura 
máxima ou mínima.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
O espaço da página
Há divergências no resultado de estudos de acompanhamento do movimento dos olhos dos usuários de páginas 
web. Mas numa coisa os pesquisadores concordam: as informações mais importantes devem ser localizadas sem 
que o usuário precise usar a barra de rolagem.
Ao percorrer o espaço de uma página web, o movimento dos olhos dos usuários segue alguns padrões: Segundo 
estudos do Poynter Institute, a maioria dos usuários na cultura ocidental olha a página no sentido diagonal, a 
partir do alto à esquerda, em direção à parte inferior direita, e depois se dirige para o alto (ver esquema com 
movimento dos olhos em The best of eyetrack III: What we saw when we looked through their eyes).
O estudo, que visa à verificação dos elementos editoriais que mais mobilizam o público, afirma que:
 Os olhos dos usuários detectam primeiro os textos, especialmente as manchetes do alto à esquerda. Só 
depois se atêm às imagens.
 Este movimento, no entanto, pode variar em função dos estímulos que o olho recebe pelo próprio 
conteúdo. Se há um estímulo forte no meio da página, os usuários tendem a começar o exame por estes 
elementos e só depois examinam os elementos localizados nas bordas.
Jakob Nielsen, em estudo com objetivos semelhantes, afirma que os usuários de modo geral leem as páginas de 
acordo com um padrão de movimentos que desenham um "F": duas linhas horizontais da esquerda para a 
direita, e uma linha vertical, de cima para baixo, à esquerda. 
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Os olhos dos usuários detectam primeiro os textos, 
especialmente as manchetes do alto à esquerda. Só depois se 
atêm às imagens.
Projeto de Interface
O estudo de Nielsen afirma que:
 Os usuários raramente leem os textos linearmente, normalmente pulam palavras e frases, capturando os 
elementos de forma a editar um texto fragmentado, a partir do seu interesse pessoal.
 Como a leitura é irregular, os dois primeiros parágrafos de cada página sinalizam a informação mais 
importante, para que o leitor saiba de imediato se o texto o interessa ou não.
 Itens assinalados com bolinhas, quadradinhos, estrelas, atraem a atenção dos olhos durante o movimento 
vertical, à esquerda.
Embora os dois estudos apontem para desenhos de movimentos de olhos diferentes (o que deve ou deveria ser 
discutido entre os dois centros de pesquisa), ambos apontam para a importância do espaço do alto, ou da área 
"acima da dobra", e também paraa área situada à esquerda da página.
A importância do alto da página pode parecer evidente, mas não é. É comum encontramos informações 
importantes na base de páginas longas, sendo que a maioria dos usuários, não encontrando de imediato o que 
procura, não as encontra e vai em busca outros sites.
Não só as informações sobre conteúdo, mas também os principais elementos de navegação devem ficar acima da 
dobra: apenas 23% dos links localizados abaixo desta área são selecionados. 
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
A área à esquerda da tela é o lugar onde grande parte dos sites apresenta suas barras de navegação principais, o 
que indica que os usuários podem procurar esta área justamente porque sabe que aí encontram informações 
importantes. Podemos também supor o contrário: porque estas áreas são mais facilmente visualizadas, 
elementos importantes de navegação são situados aí.
Podemos acrescentar ainda que, independentemente da sua localização, os elementos mais importantes ou os 
comandos mais úteis, devem ser claramente sinalizados, para que seja mais fácil encontrá-los.
Sobre a ocupação do espaço da página Principal de cada site, ressaltamos que, por ser um local de convergência 
do deslocamento, um ponto indicador de percursos, pode por isto ter mais ferramentas de navegação do que 
conteúdo. 
Como decorrência, o espaço das páginas internas pode ser mais ocupado pelo conteúdo do que pelas 
ferramentas de navegação (de 50 a 80%).
Independentemente da sua localização no site, quanto mais comandos e botões houver na página, é mais difícil 
para o usuário encontrar o que procura. 
O equilíbrio de espaços preenchidos e espaços em branco ajuda a realçar os elementos mais importantes, de 
forma que fique mais fácil localizá-los.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Localizados "acima da dobra" ou não, os assuntos mais 
importantes ou os comandos mais úteis devem ser sinalizados, 
para que seja mais fácil encontrá-los.
Projeto de Interface Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Sobre a ocupação do espaço da página Principal de cada site, 
ressaltamos que, por ser um local de "convergência" de usuários, 
um ponto indicador de percursos, pode por isto ter mais 
ferramentas de navegação do que conteúdo.
Projeto de Interface Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
O espaço das páginas 
internas deve ser mais 
ocupado pelo conteúdo do 
que pelas ferramentas de 
navegação.
Projeto de Interface Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Independentemente da sua localização no 
site, quanto mais comandos e botões 
houver na página, mais difícil para o 
usuário encontrar o que procura.
Projeto de Interface
Localização dos elementos
Quando acessa um site desconhecido, a maioria dos usuários procura alguns elementos em lugares consagrados 
pelo uso. A aderência a estas convenções depende de cada projeto, mas acelera o uso e a curva de aprendizagem 
das interfaces web, bem como garante que elementos em local de difícil acesso possam ser mais facilmente 
localizados.
A composição de uma página web, com a distribuição dos diversos elementos na sua área, atende a critérios 
como os objetivos principais do site, as tarefas mais importantes que os usuários devem fazer, a priorização de 
um tipo de conteúdo ou funcionalidade.
De qualquer forma, se num site os visitantes encontram facilmente o que procuram, podem se concentrar mais 
facilmente nas tarefas e nas informações que os levaram até ali.
Neste aspecto, o posicionamento dos elementos de acordo com convenções já aceitas pelo senso comum é uma 
prática a considerar, especialmente em portais dirigidos a públicos heterogêneos e não-especializado.
Os usuários de interfaces web estão acostumados a encontrar:
 Informações relacionadas agrupadas por proximidade ou aparência, sendo as mais importantes mostradas 
em primeiro lugar.
 O logotipo ou assinatura visual no alto, à esquerda da página.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
 A barra de navegação mais importante no alto, com links dispostos horizontalmente, ou no lado esquerdo 
da página, com links dispostos verticalmente.
 Links para "Voltar à Principal" na área superior esquerda da página.
 A ferramenta de busca interna no alto, na área central ou na parte direita da página.
 As informações para contato no alto da página, à direita.
 Banners e anúncios no alto ou ao longo do lado direito.
 Menus drop down e atalhos para páginas localizadas em áreas mais profundas no alto da área de conteúdo 
ou ao longo do lado direito.
 Formulários para entrar em área reservada do site (com campo de login e senha) no alto, à esquerda da 
página.
 Breadcrumbs ou "migalhas de pão" no alto da área de conteúdo ou embaixo do logotipo, de forma que 
fiquem facilmente associados à localização da página em relação à Principal.
 Carrinho de compras no alto da página - em sites de comércio. Nestes sites, também ficam normalmente no 
alto as informações sobre as compras, o acesso às informações sobre o consumidor e o acesso ao suporte, 
que pode ser feito via e-mail, chat, fórum, telefone.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
 Agrupamentos de links internos na área esquerda das páginas.
 Artigos em promoção, nos sites de comércio, no alto da área de conteúdo.
 Área de conteúdo, na área central da página, onde pode ser localizada com mais facilidade.
 Links internos para informação adicional na área à direita da página.
 Links para outros sites na parte inferior da página.
 Informações institucionais no alto da página em sites institucionais ou na barra localizada na parte de baixo, 
como nos sites de comércio, em que as informações institucionais não são prioritárias.
 Links para "Voltar ao alto" na base de páginas muito altas. Estes também podem ficar localizados ao longo 
da altura em páginas com diversos itens em que é necessário ir e voltar à parte de baixo (como no caso de 
perguntas frequentes, que podem exigir a navegação alternada entre a as perguntas do alto e as respostas 
na parte de baixo).
 Informações sobre o site e mapa do site na base da página, este último eventualmente também no alto da 
página.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior
Projeto de Interface
Para que referências como estas se apliquem, os usuários não devem precisar fazer rolagem horizontal para 
localizar os elementos que procuram – a rolagem horizontal, quando associada à rolagem vertical, é dispersiva e 
especialmente difícil para pessoas que têm problemas motores ou dislexias.
O preparo da página deve permitir que usuários de computadores pessoais visualizem todos os seus elementos 
em resoluções de tela a partir de1024x768px. E os usuários de dispositivos móveis devem ver todos os 
elementos através de rolagem vertical.
As observações acima não são, de maneira nenhuma, regras a seguir de maneira incondicional. Um site que 
precise evidenciar uma postura inovadora ou um posicionamento diferenciado em relação aos seus pares precisa 
problematizar estas referências e propor soluções que abram caminhos para novos usos, novas percepções.
Alan Cooper, especialista em experiência do usuário, afirma que se deve seguir os padrões até que se encontre 
uma alternativa realmente melhor. Caso isto não aconteça, é melhor seguir a regra.
Disciplina: Projeto de Interfaces Eletrônicas
Professor: Edvaldo Junior