Barra de rolagem - Scrollbar
Uma barra de rolagem é uma técnica de interação ou widget em que texto contínuo, imagens ou qualquer outro conteúdo podem ser rolados em uma direção predeterminada (para cima, para baixo, para a esquerda ou para a direita) em uma tela de computador , janela ou janela de visualização para que todos os o conteúdo pode ser visualizado, mesmo que apenas uma fração do conteúdo possa ser vista na tela de um dispositivo por vez. Ele oferece uma solução para o problema de navegação para um local conhecido ou desconhecido dentro de um espaço de informação bidimensional. Ele também era conhecido como um identificador nas primeiras GUIs . Eles estão presentes em uma ampla gama de dispositivos eletrônicos, incluindo computadores, calculadoras gráficas, telefones celulares e reprodutores de mídia portáteis. O usuário interage com os elementos da barra de rolagem usando algum método de ação direta, a barra de rolagem traduz essa ação em comandos de rolagem e o usuário recebe feedback por meio de uma atualização visual dos elementos da barra de rolagem e do conteúdo rolado.
Embora os designs de barra de rolagem sejam diferentes ao longo de sua história, eles geralmente aparecem em um ou dois lados da área de exibição como longas áreas retangulares contendo uma barra (ou polegar) que pode ser arrastada ao longo de uma calha (ou trilha) para mover o corpo do documento. Isso pode ser colocado verticalmente, horizontalmente ou ambos na janela, dependendo da direção em que o conteúdo se estende além de seus limites. Duas setas são frequentemente incluídas em cada extremidade do polegar ou calha para ajustes mais precisos. O “thumb” tem nomes diferentes em ambientes diferentes: no Mac OS X 10.4 é chamado de "scroller"; na plataforma Java , é denominado "polegar" ou "botão"; A documentação .NET da Microsoft se refere a ele como "caixa de rolagem" ou "polegar de rolagem"; em outros ambientes é chamado de "elevador", "quint", "puck", "limpador" ou "grip"; em certos ambientes onde os navegadores usam linguagem agnóstica para a terminologia da barra de rolagem, o polegar é referido como a 'ervilha' para o movimento vertical da barra e ainda usa 'disco' para o movimento horizontal.
Funções adicionais podem ser encontradas, como zoom in / out ou várias ferramentas específicas do aplicativo . Dependendo da GUI, o tamanho do polegar pode ser fixo ou variável; no caso posterior dos polegares proporcionais, seu comprimento indicaria o tamanho da janela em relação ao tamanho de todo o documento, indicado pela faixa completa. Enquanto polegares proporcionais estavam disponíveis em várias GUIs, incluindo GEM , AmigaOS e PC / GEOS , mesmo em meados dos anos 1980, a Microsoft não os implementou até o Windows 95 . Uma miniatura proporcional que preenche completamente a depressão indica que todo o documento está sendo visualizado, ponto em que a barra de rolagem pode ficar temporariamente oculta. O polegar proporcional às vezes também pode ser ajustado arrastando suas extremidades, como no Sony Vegas , um pacote de software de edição de vídeo não linear . Nesse caso, ele ajustaria a posição e o zoom do documento, onde o tamanho do polegar representa o grau de zoom aplicado.
Uma barra de rolagem deve ser diferenciada de um controle deslizante, que é outro objeto visualmente semelhante, mas funcionalmente diferente. O controle deslizante é usado para alterar valores, mas não altera a exibição ou move a área que é mostrada como uma barra de rolagem.
História e progressão
Em 1974, mover o cursor para a margem esquerda durante o uso do Bravo mudou sua forma para uma seta de duas pontas para permitir a rolagem. Pressionar o botão vermelho esquerdo ou superior rolou o conteúdo para cima e a linha ao lado do cursor foi para o topo da janela. Pressionar o botão azul direito ou inferior rolou o conteúdo para baixo e a linha na parte superior da janela desceu até o cursor. Manter pressionado o botão amarelo do meio mudou o cursor para um polegar, permitindo pular para aquela porcentagem do documento com um indicador de posicionamento atual.
Em 1977, Smalltalk incluiu uma barra de rolagem estável no lado esquerdo da janela de foco. Clicar na metade direita da barra de rolagem moveu o conteúdo para cima e a metade esquerda moveu o conteúdo para baixo. O polegar central da barra pode ser arrastado suavemente e mostra a porcentagem do conteúdo visível; a primeira barra de rolagem proporcional.
Em 1980, o Interlisp tinha uma barra de rolagem que aparecia no lado esquerdo da janela conforme o cursor se movia para a esquerda. O polegar sombreado da barra mostrava a porcentagem de conteúdo visível e era controlado pelo botão do meio. O botão esquerdo rolou para cima para mover a posição selecionada para a borda superior da janela e o botão direito rolou para baixo para mover a borda superior da janela para a posição selecionada.
Entre 1981 e 1982, o Xerox Star moveu a barra de rolagem para a direita para tirá-la do caminho e reduzir a confusão visual. As setas de rolagem apontavam para dentro na direção em que o conteúdo se moveria com base nos estudos do usuário e os botões + e - permitidos para rolar por páginas. O polegar era um diamante de tamanho fixo, independente de quanto do documento é visível. Clicar na região do elevador do polegar pularia para essa parte do documento.
Em 1983, o Apple Lisa tinha setas apontando para cima e para baixo, botões de página e um polegar de tamanho fixo.
Em 1984, o Macintosh tinha um retângulo cinza claro com uma miniatura de “caixa de rolagem”, trilha de “área cinza” e setas apontando em direções opostas para o conteúdo que seria exposto quando a respectiva seta fosse pressionada. As setas rolariam uma única unidade com um clique ou se repetissem automaticamente ao pressionar continuamente. Os botões da página foram removidos e a trilha do elevador pode ser clicada para ir para a próxima seção. Ao pressionar o polegar, arrastá-lo o traria para aquele ponto específico, a menos que um movimento fosse feito para longe da barra de rolagem antes de soltar, abortando a ação. Uma barra de rolagem vazia era exibida quando uma janela não estava em foco ou se todo o documento estava visível dentro da janela.
Em 1985, o GEM usava um polegar de "caixa de rolagem" de tamanho proporcional, mas operava de forma idêntica ao Macintosh. O resultado líquido foi uma barra de rolagem moderna que parecia e não era diferente da barra de rolagem do Windows hoje. GEM permitiu que o mouse fosse movido para longe da barra de rolagem após clicar e segurar, para reduzir problemas de coordenação olho-mão. O AmigaOS surgiu no final do ano, também com caixas de rolagem de tamanho proporcional.
Também em 1985, o Viewpoint usou o botão direito para mover o conteúdo por porcentagem ou por janela em vez de por página.
Em 1988, a Open Look criou um polegar de elevador com teclas de seta diretamente nele. Clicar na trilha movida pelas páginas e a repetição automática empurra o ponteiro junto. As âncoras de cabo foram colocadas no início e no final do documento, e o centro do elevador pode ser arrastado.
Em 1989, a NeXT moveu a barra de rolagem de volta para o lado esquerdo da janela. O polegar foi dimensionado proporcionalmente com setas juntas na parte inferior da barra. As ações são repetidas automaticamente e a tecla alt moverá o conteúdo pela janela. O polegar pode ser arrastado e usar a tecla alt enquanto arrasta tornaria seu movimento mais lento.
Em 1997, o PalmPilot incluiu uma barra de rolagem convencional onde o texto se estendia além dos limites da tela com o uso de um polegar arrastável e setas que podiam ser tocadas com uma caneta. Ele também tinha dois botões físicos para rolar para cima e rolar para baixo, respectivamente.
Em 2001, o Mac OS X 10.0 usou um polegar proporcional e moveu os dois botões de seta para a parte inferior da barra.
Em 2007, o iPhone e o iOS incluíram uma barra de rolagem regular no navegador da web e outros aplicativos, embora fosse apenas para saída e não pudesse ser interagida. Nos contatos, uma barra de rolagem de letras foi fornecida para pular pelo conteúdo.
Em 2011, o Mac OS X 10.7 removeu os botões do final da barra e foi projetado para se parecer mais com a barra de rolagem do iOS. Com o mesmo lançamento do Mac OS X 10.7, a Apple introduziu a “rolagem natural”, o que significa que a tela se move na mesma direção em que os dedos do usuário se movem quando eles usam o gesto de rolagem com dois dedos. Se os dedos do usuário moverem para cima no trackpad, o conteúdo da página sobe, permitindo ao usuário ler o conteúdo mais abaixo na página e vice-versa.
Na versão 2015 do Microsoft Word para Macs, foram introduzidas barras de rolagem que desapareciam. O posicionamento dentro de um documento não era mais visível quando o mouse estava fora da área da barra, mesmo que a janela em questão estivesse em foco. O objetivo dessa mudança era estar em conformidade com as práticas de design padrão dos Macs de ocultar a barra de rolagem quando ela não for imediatamente necessária para fins hierárquicos de informações.
Uso
Arrasto do polegar
Arrastar o polegar é historicamente a forma tradicional de manipular uma barra de rolagem. Ao mover o cursor sobre o polegar na tela e, em seguida, pressionar e segurar, o polegar pode ser arrastado. Isso geralmente é feito usando um trackpad ou o botão esquerdo de um mouse convencional ou touchpad. Mover o cursor enquanto pressiona para baixo move o polegar da barra de rolagem para ver diferentes seções da página. Em aplicativos nativos do OS X 10.11 (e algumas versões anteriores do OS X), as barras de rolagem não aparecem na interface do usuário até que o usuário use outra técnica de rolagem, como a rolagem com dois dedos ou o uso das teclas de seta. Portanto, o usuário deve rolar usando um desses métodos primeiro e, em seguida, mover o cursor sobre o polegar, onde quer que ele apareça.
No Microsoft Windows , mover o mouse para longe demais do polegar enquanto o arrasta irá redefinir a posição de rolagem para a anterior.
Rodinha do mouse
Uma roda de rolagem em um mouse convencional também pode ser usada. Mover a roda na direção desejada move o conteúdo na mesma direção. A maioria dos mouses contém rodas de rolagem que rolam apenas para cima e para baixo, mas alguns ratos contêm rodas de rolagem que permitem ao usuário rolar em qualquer direção (para cima, para baixo, para a esquerda ou para a direita), incluindo direções diagonais. Ao rolar para cima e para baixo, a direção em que a página rola em resposta à direção em que o usuário rola a roda de rolagem pode diferir dependendo das configurações de rolagem do computador.
Setas
Os botões de seta no teclado podem ser clicados para rolar para cima, para baixo, para a esquerda ou para a direita em uma página. Essa técnica de rolagem geralmente resulta na rolagem da tela muito lentamente em comparação com as outras técnicas de rolagem. Clicar nos botões de seta fará com que a página continue a rolar até que um dos limites de rolagem seja atingido.
Clicando na calha
A calha acima ou abaixo do polegar pode ser clicada para pular imediatamente para aquele ponto na página, ou página por página para conteúdo de várias páginas. Depois de clicar na calha, a rolagem começa automaticamente e pára quando o polegar atinge a posição do ponteiro do mouse. Essa técnica de rolagem é mais rápida do que outras e é melhor usada quando o usuário precisa rolar por uma grande quantidade de conteúdo de uma só vez ou quando sabe exatamente para onde na página deve rolar.
Botões de seta na tela
Muitos aplicativos, como Microsoft Word e PowerPoint , contêm barras de rolagem com setas direcionais na tela para fins de rolagem. Clicar nas setas rola uma pequena parte do conteúdo, geralmente linhas únicas, por vez, e pressioná-las e mantê-las com o cursor rola continuamente por mais área na página até ser liberado. Às vezes, os dois botões de seta aparecem próximos um do outro para manipulação rápida e precisa, sem a necessidade de arrastar o polegar ou mover o mouse grandes distâncias para a outra seta (isso era oferecido como uma opção no Mac OS 8.5 ); um deles também pode ser duplicado de forma a aparecer nas duas extremidades da barra, proporcionando familiaridade para aqueles que estão acostumados com botões separados e adjacentes. Esses botões de seta existiram até o Mac OS X 10.7, onde foram substituídos por gestos de trackpad e mouse com roda de rolagem.
No BeOS , os botões de rolagem na tela para ambas as direções aparecem em ambas as extremidades da barra de rolagem. Em vários programas do Microsoft Office , os botões adicionais ⏪ e ⏩ podem ser usados para navegação por página.
Botões de mouse diferentes
Outra técnica de rolagem com barras de rolagem é verificar qual botão do mouse foi pressionado. Por exemplo, um clique com o botão esquerdo na seta para baixo pode fazer com que a janela role para baixo, enquanto um clique com o botão direito no mesmo lugar iria rolar para cima (por exemplo, RISC OS ), ou o botão do meio poderia ser usado para posicionar o polegar com precisão. Esta forma requer menos habilidades motoras finas , embora exija um mouse com vários botões e, possivelmente, um maior grau de alfabetização em GUI.
Touchpad do Windows
Além disso, algumas máquinas habilitadas para Windows têm um mecanismo de rolagem na lateral do touchpad, conforme mostrado na imagem. Para usar este mecanismo, um dedo é colocado na área de rolagem e movido para cima e para baixo ou para a esquerda e direita para rolar pela página. Novamente, dependendo das configurações de rolagem do computador, mover o dedo em certas direções ao longo dessas áreas de rolagem pode resultar em diferentes direções de rolagem correspondentes.
Trackpad Mac
Uma técnica de rolagem mais moderna é usar a rolagem com dois dedos em um trackpad do Mac. Nesta técnica, as pontas de dois dedos da mesma mão são colocadas na superfície do trackpad e movidas de acordo. Se o usuário tiver a direção de rolagem do trackpad definida como “natural”, mover seus dois dedos em direção ao topo do trackpad fará com que a página role para cima em direção ao topo da página; inversamente, mover seus dedos em direção à parte inferior do trackpad fará com que a página role para baixo em direção à parte inferior. Se o usuário "agitar" seus dedos movendo seus dois dedos muito rapidamente pelo trackpad e, em seguida, liberando seus dedos, a página continuará a rolar na direção em que ele moveu até que eventualmente diminua a velocidade e pare, seja porque um dos os limites de rolagem são atingidos ou porque a velocidade de rolagem diminui tanto que eventualmente simplesmente para. Esse recurso é chamado de inércia.
Designs alternativos
Muitas variações no design e uso da barra de rolagem tradicional foram propostas ou implementadas. Para evitar limitar a visibilidade da janela com barras de rolagem e ainda permitir a funcionalidade, foi proposto o uso de uma corda de software (linha fina) associada ao movimento do ponteiro do mouse em torno da corda. Da mesma forma, a barra de rolagem pode ser colocada diretamente no conteúdo onde for útil, diminuindo o espaço usado e reduzindo os movimentos necessários do ponteiro.
A inclusão de dicas visuais e operacionais na área de exibição da barra de rolagem pode indicar quais direções permitem o movimento de rolagem, bem como quais interações com a barra de rolagem estão disponíveis. Pode ser um campo em branco para sinalizar o fim de uma lista, desativando os botões de rolagem e as mudanças de cor na barra de rolagem.
Algumas barras de rolagem incluem um indicador visual de posição para ajudar a determinar onde a ação de rolagem foi ou irá no conteúdo. Para conteúdo de várias páginas, um indicador do número da página atual vs o número total da página pode ser incluído próximo ao polegar conforme a rolagem ocorre, e as barras de rolagem mais largas podem incluir uma visão geral de toda a página. Em barras de rolagem, como as usadas em listas de contatos telefônicos compostas de letras do alfabeto, a letra correspondente à área atual pode ser exibida em tamanho maior ou realçada de alguma forma. Embora sejam estáveis e fornecidos pelo aplicativo, alguns aplicativos e mecanismos de pesquisa permitem o uso de marcadores de relevância fornecidos ou adicionados pelo usuário. Eles podem ser estritamente visuais ou podem interromper automaticamente a ação na barra de rolagem assim que cada marcador for alcançado. Eles podem ser enfatizados com cores ou até mesmo sons para ajudar ainda mais o usuário a encontrar o que precisa dentro do conteúdo.
Rolagem 2D simultânea
Elementos de controle gráfico especiais como barras de rolagem permitem a panorâmica em um espaço bidimensional simplesmente movendo um único retângulo em qualquer direção no plano. Por exemplo, o GtkScrollpane do GTK + é implementado nos visualizadores de texto gv e ghostview .
Outro exemplo de rolagem bidimensional simultânea é um programa de alinhamento para sequências de proteínas. Inicialmente, a barra de rolagem horizontal se parece com uma convencional. Mas a barra de rolagem oferece três recursos adicionais:
- Ele fornece uma visão geral de toda a cena.
- A altura pode ser aumentada.
- O botão não só pode ser movido para a esquerda e para a direita, mas também para cima e para baixo para rolagem vertical.
No RISC OS, arrastar uma barra de rolagem com o botão esquerdo do mouse funciona da maneira usual, mas arrastar com o botão direito faz com que o ponteiro desapareça e ambas as barras de rolagem sejam manipuladas simultaneamente. Muitas operações GUI no RISC OS executam uma função relacionada, mas ligeiramente diferente, quando clicadas com o botão direito.
Costumização
A capacidade e os métodos específicos necessários para personalizar a aparência e a função das barras de rolagem podem variar significativamente com base no sistema operacional ou aplicativo de software que você está tentando personalizar. Um método comum de alterar a aparência da barra de rolagem em páginas da Web é usar as diretivas CSS para alterar as cores da barra de rolagem. Eles não são padronizados e são suportados apenas pelo Microsoft Internet Explorer versões 5.x ou superior e pelo Opera . E em navegadores baseados em WebKit , existem pseudo-elementos chamados:
::-webkit-scrollbar::-webkit-scrollbar-button::-webkit-scrollbar-track::-webkit-scrollbar-track-piece::-webkit-scrollbar-thumb::-webkit-scrollbar-corner- e
::-webkit-resizer
O WebKit também oferece muitas pseudo classes para modificar o estilo das barras de rolagem.
As barras de rolagem também foram aprimoradas para codificar informações sobre as entradas da lista. Por exemplo, o Google Chrome introduz marcas de canal na barra de rolagem vertical para indicar locais no documento onde um determinado termo de pesquisa foi encontrado.
Limitações e problemas
Usuários com conhecimentos de informática geralmente estão familiarizados com as barras de rolagem, mas aqueles com conhecimento limitado podem não entendê-las intuitivamente, especialmente devido às variações mais recentes, sem assistência. Independentemente da alfabetização, vários problemas podem ser encontrados em vários tipos de barras de rolagem e suas interações. Em termos de design, se o tamanho da janela já for pequeno, a área de conteúdo visível será ainda mais reduzida pela presença de uma barra de rolagem. Embora algumas barras de rolagem desaparecidas mais recentes ajudem a mitigar esse problema, as mais tradicionais não o evitam, especialmente quando há barras horizontais e verticais presentes.
Em termos de uso, muitos problemas comuns estão relacionados à precisão. O mapeamento entre a barra de rolagem e a tela é linear, portanto, a precisão de uso é relativa ao tamanho do conteúdo. A navegação em um documento menor é então mais simples do que a navegação em um documento maior. Isso também significa que todas as partes de um documento são enfatizadas igualmente e a importância de cada parte não é reconhecida pelo uso da barra de rolagem.
Freqüentemente, não há uma indicação de onde no conteúdo um pergaminho chegou, a menos que a ação de rolagem seja interrompida para visualizar o conteúdo. Isso dificulta, independentemente de o usuário saber ou não o que está procurando ou da organização geral do conteúdo. Aqueles que têm um indicador são limitados pelas configurações predeterminadas de visibilidade, quantidade e estilo. Se tentar rolar ao executar uma ação como realçar, a quantidade de rolagem pode não corresponder à quantidade desejada, ultrapassando ou solicitando que o usuário reposicione várias vezes. O overshooting também pode ocorrer ao tentar posicionar próximo à parte superior ou inferior de uma única página em um conjunto maior. Uma tentativa de ajuste de rolagem pequena pelo usuário pode resultar em uma maior, pois a rolagem ativa uma ação automática saltando para a próxima página.
Estudos
Um relatório de 1986 de William Buxton e Brad Myers testou diferentes interações de duas mãos, incluindo rolar, clicar e redimensionar. Em seu estudo, clicar e redimensionar foram feitos em paralelo. Seu primeiro experimento pedia que os participantes realizassem uma tarefa de seleção / posicionamento, e o segundo experimento solicitava que os participantes fizessem uma tarefa composta de navegação / seleção. O estudo descobriu que os usuários podem realizar essas tarefas mais rapidamente e em paralelo quando usam as duas mãos, mas não necessariamente quando usam as duas mãos simultaneamente. Eles também descobriram que quanto mais relacionadas as tarefas que o usuário estava fazendo com cada uma das mãos, mais rápido eles realizavam as tarefas que foram solicitadas a fazer.