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, ajudando a adaptar a janela ao conteúdo publicado.

Como muitos relutam em utilizar as barras de rolagem e ignorem o conteúdo localizado abaixo da janela que aparece no browser, é importante que o conteúdo mais importante de cada página fique localizado “acima da dobra”, ou na parte visível logo que esta carrega no browser.

Esta afirmação se aplica especialmente na página Principal de um site: 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 nas visitas seguintes. (1)

Jakob Nielsen afirma que os hábitos de uso da internet nos últimos 15 anos mudaram muito, e que se em 1995 os usuários raramente faziam a rolagem, em 2010 esta já era bastante usada. No entanto, o grau de atenção variava 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 modo, se os leitores estão interessados no conteúdo, o que acontece em sites de conteúdo especializado, procuram descobrir, ou pelo menos dar uma olhada, no que está localizado abaixo da dobra. Ou seja, fazem a rolagem quando o conteúdo os motiva a se deslocar para além do alto da página.

Em 2007, a então 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”, ficava situado na base da longíssima página. (Boxes and Arrows, acesso em 11.11.2007)

Alguns websites usam fotos de tela cheia na abertura e setas apontando para baixo, indicando que se deve fazer a rolagem da tela para ver o resto do conteúdo, o que remete aos links “clique aqui”, encontrados em situações em que o layout do link não fica suficientemente claro para motivar a ação (Travel Episodes, exemplo abaixo). Já se a narrativa do conteúdo em si aponta para a parte de baixo, com a inserção de elementos que indiquem que o desenvolvimento do conteúdo continua, fica mais fácil compreender o que fazer.

Botão de rolagem

A tela acima tem um botão de rolagem com a indicação que o conteúdo continua na parte de baixo da página. Acesso em 04.2015

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.

Um botão arrastável, normalmente em cor diferente do fundo, que sinaliza o movimento em direção à parte de cima ou de baixo da página e, pelo tamanho, indica se a janela é mais ou menos extensa.

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

Sites que usavam frames preferiam manter as configurações das barras de rolagem do programa de navegação, para facilitar a identificação da sua funcionalidade (como no caso do caso abaixo, em que a barra de rolagem fica localizada ao lado da coluna central).

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

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

As barras de rolagem no exemplo acima são duas setas localizadas à direita, uma apontando para cima e outra para baixo. Alguns usuários podem não encontrá-las facilmente. Fica também difícil para algumas pessoas fixar o mouse sobre a linha fina para fazer a rolagem.

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.

A barra de rolagem retangular, em contraste com a cor de fundo, fica mais visível e reconhecível em relação aos outros elementos da interface

O uso de cores presentes no layout integra visualmente a barra de rolagem na imagem geral da interface, mas acaba escondendo sua funcionalidade. Como a maioria dos usuários ao acessar uma página web costuma concentrar sua atenção na parte de cima, a camuflagem da barra pode fazer com que o conteúdo localizado na parte de baixo da página (“abaixo da dobra”) seja ainda menos procurado.

Rolagem horizontal

Quando o conteúdo aponta claramente para uma continuidade horizontal, o leitor realiza o movimento com naturalidade.

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. A rolagem horizontal deve ser evitada, pois a maioria dos usuários não se sente confortável fazendo este movimento, especialmente se a interface 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.

(Atualizado em 10.5.2015)

Referências

Dear web designer, let’s stop breaking the affordance of scrolling (Medium, acesso em 10.4.2015)

Horizontal attention leans left (Alerbox, acesso em 6.4.2010)

Scrolling and attention (Alerbox, acesso em 23.3.2010)

Rating: Blasting the myth of the fold (Boxes and Arrows, acesso em 11.11.2007)

1) Livro: Prioritizing web usability, Jakob Nielsen e Hoa Loranger. New York: New Riders, 2006

Clickstream study reveals dynamic web (WebSiteOptimization, acesso em 29.7.2006)

Utilizing the cut-off look to encourage users to scroll, Jared Spool  (User Interface Engeneering, acesso em 27.10.2006)

Scrolling and scrollbars (Alertbox, acesso em 1.8.2005)