As novas regras para rolagem em Web Design

O que foi tabu em design de site fez um ressurgimento completo como uma das técnicas mais populares nos últimos anos como os usuários estão encontrando um novo amor e apreço para os sites onde a rolagem é uma necessidade. Shedding seus antigos estigmas, rolagem é reinventar-se como um elemento de design de interação núcleo – que também significa designers precisam aprender as novas regras.

Sem Título-5

Nesta peça, exploraremos o renascimento da rolagem, discutiremos alguns prós e contras e listaremos algumas dicas rápidas para a técnica.

Por que a rolagem é renascida

Desde que os usuários móveis ultrapassaram os usuários de desktops , os designers de UI em todos os lugares foram ajustados de acordo. E com tantos usuários em telas menores, a rolagem está se tornando mais uma necessidade: quanto menor a tela, mais longo é o scroll.

Mas há outros fatores. O acesso à Internet de alta velocidade está disponível em mais lugares, tornando o pergaminho uma maneira mais rápida de acessar informações do que clicar de página em página. A crescente força de sites de mídia social também alimenta a técnica: rolagem naturalmente acomoda sua riqueza de conteúdo gerado pelo usuário.

Conforme explicado no guia Web Design Tendências 2015 e 2016 , scroll longo evoluiu lado a lado com base em cartão de design . Quando combinadas, as técnicas permitem que você forneça aos usuários um fluxo interminável de conteúdo de tamanho mordido (o que é perfeito para experiências na web e especialmente em dispositivos móveis).

Além disso, a doutrina acima-da-dobra que estava segurando rolagem para trás agora está sendo reconhecido como o mito que realmente é. A verdade, de acordo com estudos reais , é que os usuários realmente não se importam de rolagem. A prática de encravar tudo acima da dobra está perdendo para espaçar tudo para fora ao longo de um rolo uniforme e liso.

Parte do motivo pelo qual o mito tornou-se popular, é claro, foi que a rolagem só foi considerada seriamente como um padrão de design intencional depois de avanços em JavaScript e CSS. Antes disso, era muito mais difícil fazer a rolagem “sexy” através da narrativa visual. Como você pode imaginar, uma longa página cheia de texto (interrompida por imagens ocasionais) não é um layout de interface muito envolvente.

Mas uma vez que você começa a se aproximar do pergaminho longo como uma tela para ilustrar um início, meio e fim (através de gráficos, animações, ícones, etc), então você começa a ver o seu filme como poder na captura de atenção do usuário.

Na verdade, alguns padrões híbridos estão surgindo como a última tendência em rolagem. Por exemplo, o ” roteamento fixo no local” que usamos em nossa própria  página de passeio UXPin cria a mesma experiência interativa de um site tradicional de rolagem longa sem esticar o site verticalmente.

É Scrolling direito para você?

Com cada técnica de design e ferramenta, há aqueles que amam o conceito e aqueles que odeiam. Na maioria dos casos, nenhum lado é intrinsecamente certo ou errado; É por isso que é importante ponderar todas as considerações antes de abordar tal projeto.

Vantagens do rolagem:

  • Incentiva a interação – Com a constante constante estimulação do elemento em mudança, pode ser um interessante método de contar histórias que incentiva a interação do usuário – especialmente com o scrolling de paralaxe decorado com bom gosto .
  • Mais rápido – A rolagem longa é mais rápida do que clicar em um caminho de navegação complexo e não diminui ou limita a experiência do usuário. Conforme descrito em Interaction Design Best Practices , a percepção  do tempo é muitas vezes mais importante do que a passagem real do tempo.
  • Entiza usuários – A facilidade de uso promove a interatividade e aumenta o tempo no site. Isto é especialmente verdadeiro para infinitos sites de rolagem, onde você pode ajudar os usuários a descobrir conteúdo relevante que eles podem não ter sequer pensado.
  • Design responsivo – O design da página pode complicar-se entre dispositivos com tamanhos e capacidades de tela diferentes, mas a rolagem ajuda a simplificar as diferenças.
  • Controles de gesto – Rolagem parece organicamente ligada ao toque, uma vez que deslizar para baixo é muito mais fácil do que repetidas torneiras em diferentes áreas da tela. Usuários (especialmente móveis) geralmente aceitam isso como uma forma de exibir informações.
  • Design delicado – Poucos cliques podem resultar em interações mais rápidas para uma experiência de usuário mais parecida com uma aplicação ou jogo.

    Desvantagens do rolagem:

    • Usuários teimosos – Nevermind por que, alguns usuários sempre resistem à mudança. No entanto, a técnica é tão generalizada agora (especialmente durante experiências móveis) que é provavelmente seguro dizer que a maioria dos usuários estão acostumados com a técnica.
    • Desvantagens de SEO –  Ter apenas uma página pode ter um efeito negativo no SEO do site. (Para aprender a minimizar estas desvantagens de SEO, confira esta peça de Moz para scroll de paralaxe  e esta peça Quicksprout para scroll infinito .)
    • Desorientação –  A desconexão entre rolagem e conteúdo pode deixar os usuários confusos ou desarticulados.
    • Dificuldades de navegação – pode ser estranho “voltar” para o conteúdo anterior na página. Para contornar isso, você pode criar uma navegação superior persistente, onde cada item é ancorado a uma seção de página
    • Velocidade do site Grandes pedaços de conteúdo, como galerias de vídeo ou de imagens, podem diminuir a velocidade do site, especialmente para sites de paralaxe-scrolling, que dependem do Javascript e do jQuery (confira este tutorial  para aprender a criar sites de paralaxe sem velocidade lenta do site) .
    • Sem rodapés – Com sites de rolagem infinita, recomendamos um rodapé “pegajoso” para que você não sacrifique a navegabilidade. Caso contrário, os usuários podem ser confundidos por uma falta de navegação adicional na parte inferior da página.

    Vantagens e desvantagens de lado, o pergaminho longo é uma técnica que se adapte a alguns tipos de sites mais do que outros. Sites de rolagem mais longos e mais adequados para planos de conteúdo e design que …

    • … vai incluir uma parte significativa do tráfego móvel (a maioria dos usuários)
    • … incluem atualizações freqüentes ou novos conteúdos (como um blog)
    • … têm um monte de informações apresentadas de forma singular para a compreensão (como um infográfico)
    • … não contêm rich media por causa do dreno que isso pode causar em termos de tempos de carga

    Sites de mídia social, com constante e extenso conteúdo gerado pelo usuário, fazer bem com rolagem longa (na verdade, Facebook e Twitter ajudou a popularizar a técnica anos atrás). Por outro lado, sites orientados a metas como o comércio eletrônico – que exigem navegação coerente – tendem mais para comprimentos de páginas conservadores.

Sem Título-5

O meio termo seria um site como Etsy, uma loja on-line para produtos gerados pelo usuário, que usa uma solução híbrida: várias páginas do chamado “infinito” rolagem, terminando com um call-to-action de “Show Me More”. ”

Sem Título-6

Como todas as tendências de design da web, não use rolos mais longos apenas porque você já viu outros sites seguindo o padrão. Certifique-se de que seu site se enquadra nos critérios que discutimos, caso contrário, você pode realmente experimentar um desempenho pior .

Melhores práticas de rolagem

Deslizamento longo, efeitos de paralaxe e mecanismos similares ainda são relativamente novos para o domínio do design (~ 4 anos), mas ainda alguns ensaios e erros rudimentares produziram algumas melhores práticas fundamentais.

Resumido da Web Design Tendências 2015 e 2016 , aqui estão algumas dicas diárias para implementar com êxito a rolagem longa.

  1. Não tenha medo de alternar longos com rolagem curta. Deixe o conteúdo ditar o comprimento do rolo, não o contrário. É totalmente bom (e bastante popular) usar uma página inicial de rolagem curta e páginas de destino de rolagem longa (como Produtos, Tour, etc.).
  1. Considere a navegação pegajosa, como a usada pela Free Range Designs , para que os usuários possam sempre “voltar” rapidamente ou saltar de elemento para elemento na rolagem.
  1. Sugerir rolagem com elementos de design ou ferramentas para que cada usuário possa ver rapidamente como o site funciona. Setas, botões animados ou ferramentas semelhantes de interface do usuário são maneiras divertidas e fáceis de ajudar o usuário a determinar o que fazer a seguir. Alguns sites ainda incluem um pequeno botão com instruções como “Scroll for More” ou “Get Started” para ajudar a navegar em um site com técnicas não convencionais.
  1. Faça distinções claras entre os cliques ou torneios de rolagem e outras chamadas para ação para que seu site obtenha a interação desejada.
  1. Faça alguma pesquisa e veja como os usuários estão interagindo com o rolo. No Google Analytics, por exemplo, você pode abrir a guia “No Page Analytics” para ver quantas pessoas clicam abaixo da dobra. Com base nos dados, você pode ajustar o projeto conforme necessário.
  1. Não vá ao mar. Deslocamento longo não significa 500 páginas de conteúdo contínuo – um pergaminho longo também pode ser simples. Conte sua história e depois pare. Não o force. Deca , abaixo, usa um rolo que tem apenas algumas páginas.
  1. Concentre-se em seus objetivos do usuário e aceite que mesmo os locais infinitos do scrolling não são verdadeiramente infinitos. Ao criar sites de rolagem mais longa, entenda que os usuários ainda precisam de um senso de orientação (sua localização atual) e navegação (outros caminhos possíveis).
  1. Inclua dicas visuais que ajudam a orientar os usuários na rolagem, como os ícones de capacete usados no lado esquerdo para ” The Seven Types of Motorcycle Rider ” site abaixo.

About Author

admin