Componentes da interface web

Barras de rolagem

Atualizado em 6.4.2010

Barras de rolagem são as áreas laterais à janela do browser, que sinalizam a existência de conteúdo que ultrapassa a área visível da página e permitem o deslocamento da janela para alcançá-lo.

Embora muitos usuários simplesmente ignorem o conteúdo localizado abaixo da janela que aparece imediatamente no browser, estas barras são muito úteis, pois permitem o ajuste da janela ao formato do conteúdo publicado.

Como muitos usuários relutam em utilizar estas barras, é importante que o conteúdo mais importante de cada página fique localizado "acima da dobra", ou na parte visível da página logo que esta carrega no browser.

Esta afirmação se aplica especialmente na página Principal, uma das mais usadas para o acesso às páginas internas: apenas 23% dos usuários que visitam um site pela primeira vez usam as barras de rolagem nesta página e este número diminui ainda mais nas visitas seguintes. (1)

Jakob Nielsen afirma que os hábitos dos usuários da internet nos últimos 15 anos mudaram muito, e que se em 1995 os usuários raramente faziam a rolagem, atualmente (2010) esta é bastante usada. No entanto, o grau de atenção varia muito entre o alto da página visível sem rolagem e as áreas mais baixas, acessáveis por rolagem: 80,3% das ações de fixação do olhar (que demonstra atenção) se concentraram no alto, enquanto apenas 19,7% nas parte mais baixas. (2)

Na página Principal, o assunto principal e o motivo principal das visitas devem ficar localizados acima da dobra (um site sobre cotação das bolsas de valores deve ter estas informações identificáveis à primeira vista, no alto).

De qualquer forma, se os usuários estão interessados no conteúdo, o que acontece em sites de conteúdo especializado, estes procuram descobrir, ou pelo menos dar uma olhada, no que pode estar localizado abaixo da dobra.

-> A diretora de design de interface do usuário e arquitetura da informação da AOL, Milissa Tarquini, verificou que a parte de baixo de muitas páginas dos sites da empresa eram intensamente acessadas. Na página do site TMZ.com, da AOL, um dos links mais selecionados, "Wait! There is more - Next page", fica situado na base da longíssima página. (Boxesandarrows, acesso em 11.11.2007)

Os usuários estão habituados a encontrar nas barras de rolagem os seguintes elementos:

Setas acionáveis no alto e embaixo, sensíveis ao toque prolongado do mouse.

"Deslizador" arrastável, normalmente em cor diferente do fundo, que sinalizar o movimento em direção à parte de cima ou de baixo da página e, pelo seu tamanho, indica a extensão da janela.

A semelhança do formato das barras de rolagem à interface do browser - e aos programas que usuário está acostumado a usar - ajuda os usuários a identificá-las imediatamente e também a entender o seu modo de uso.

Quando as barras são muito diferentes da interface do browser, sua funcionalidade fica difícil de identificar, especialmente pelos usuários que usam a internet há pouco tempo. Exemplo

-> Por exemplo: Muitos sites que usam frames preferem manter as configurações das barras de rolagem do programa de navegação, para facilitar a identificação da sua funcionalidade (como é o caso do site ilustrado abaixo, em que a barra de rolagem fica localizada ao lado da coluna central). Exemplo

Barras de rolagem muito discretas dificultam a identificação pelo usuário, que deixa de ter acesso a informações que pode estar procurando. Exemplo

A barra de rolagem retangular, que apresenta contraste com a cor de fundo, é mais facilmente visível e reconhecível em relação aos outros elementos da interface. Exemplo

As barras de rolagem podem ser horizontais (pouco indicadas, pois exigem a rolagem horizontal, usada por apenas 0,4% dos usuários) ou verticais, mais comuns e previsíveis. (Clickstream study reveals dynamic web, 6.2006)

A rolagem horizontal deve ser evitada, pois a maioria dos usuários não se sente confortável fazendo este movimento, especialmente se a interace já demanda rolagem vertical.

A rolagem em duas dimensões (horizontal e vertical) é dispersiva e exige que o usuário precise decidir qual dos movimentos vai fazer primeiro.

Este problema é ainda mais grave para pessoas com deficiências físicas, especialmente motoras, que sentem ainda mais dificuldades para a rolagem em dois sentidos, na medida em que precisam usar as setas do teclado para se deslocar em cada sentido.

 

Ilustração do conceito:  Chico Buarque de Hollanda, site oficial

http://www.chicobuarque.com.br/texto/index.html (acesso em 21.7.2005)

Assuntos relacionados
Aspectos específicos da interface web
Acessibilidade : abrangência das soluções
Variações para cada usuário : O tamanho da página
A configuração técnica do usuário

Referências sobre barras de rolagem
Horizontal attention leans left (Alerbox, acesso em 6.4.2010)
Scrolling and attention (Alerbox, acesso em 23.3.2010)
1) Livro: Prioritizing web usability, de Jakob Nielsen e Hoa Loranger. New York: New Riders, 2006
Clickstream study reveals dynamic web (WebSiteOptimization, acesso em 29.7.2006)
Scrolling and scrollbars (UseIt, acesso em 1.8.2005)

Mais informaçao sobre o assunto
Rating: Blasting the myth of the fold (Boxesandarrows, acesso em 11.11.2007)

Avellar e Duarte no Twitter Avellar e Duarte no Facebook