Quebrando a ilusão da perfeição no design

Ainda estamos rolando

Houve um tempo em que os designers obcecavam em manter as coisas “acima da dobra”. Mas a rolagem se tornou tão intuitiva que é uma prática de design que não é mais necessária.

Um relatório de abril de 2018 do Nielsen Norman Group apóia a alegação de que rolamos, mas não muito longe, dependendo dos níveis de interesse. Seus dados mostraram que “os usuários gastaram cerca de 57% do tempo de visualização da página acima da dobra. 74% do tempo de visualização foi gasto nas duas primeiras telas. ”

Somos legais com a rolagem, mas às vezes precisamos de um pouco de orientação.

Levar os visitantes através de um design

O minimalismo depende do espaço negativo, mas muito de uma extensão em branco pode criar um fundo falso onde parece que não há nada mais na página. As pessoas podem pular antes de perceberem que há mais conteúdo. Embora o minimalismo forneça um espaço livre de distrações para destacar o conteúdo, os visitantes precisam de dicas que contenham conteúdo abaixo da dobra.

Uma maneira de fazer isso é mostrando fatias parciais do que está por vir. Arrumar partes de texto ou imagens incentivará a rolagem.

Mathieu Levesque usa essa abordagem em seu site de portfólio de fotografia. A visualização da área de trabalho em sua página de destino mostra uma imagem cortada de um copo de leite girando. Nós instintivamente sabemos que há mais para ver, encorajando-nos a rolar. Há também transições animadas com o título deslizando no lugar, sinalizando as transições de um bloco de conteúdo para o próximo.

O corte de conteúdo também funciona em designs não mínimos. Neste layout para a revista de skate Thrasher , o conteúdo é ligeiramente empurrado para baixo da página e interrompido pela dobra, sinalizando claramente que há mais para ver.

Use gráficos e texto para fornecer direção

Claro, uma flecha pode liderar o caminho, mas nem todas as pistas precisam ser tão contundentes. Algo tão sutil quanto uma única linha pode levar as pessoas na direção certa.

Este projeto para a Land Life Company mostra como as sugestões podem se integrar ao design e ainda servir a sua finalidade de navegação. Uma única linha no centro da parte inferior da tela nos sinaliza para rolar.

O designer André Givenchy usa um pequeno ícone animado em seu site de portfólio para incentivar a rolagem. Este é outro exemplo de uma sugestão gráfica que é sutil e eficaz.

Sugestões de texto e chamadas à ação também podem levar a um site. A agência de criação NOHAU usa a frase “Veja o que podemos fazer por você” como um convite para continuar rolando.

Incentive a percorrer as transições animadas

As transições animadas adicionam interesse, quebram a monotonia de uma página e dão uma sensação de energia. Eles também promovem a rolagem ao atingir o centro de recompensas de nossos cérebros. As transições animadas distinguem um bloco de conteúdo do seguinte, levando-nos a avançar em um design.

Este site para o festival francês de música eletrônica Lattexplus usa texto para guiar a rolagem, mas são as transições animadas que realmente nos levam para baixo da página. Cada transição acionada por rolagem traz uma foto de um ato musical tocando no festival.

A imagem muda e oscila em posição antes de entrar em foco. Com o som ligado, o EDM pulsa no fundo. Transições de um artista para o outro imitam a antecipação de um conjunto de DJs.

E enquanto estamos falando de animações com rolagem de rolagem que arrebentam a ilusão da perfeição, não podemos esquecer a paralaxe . Parallax dá uma sensação artificial de profundidade a outros designs planos.

Ao projetar o primeiro plano para se mover mais rápido do que o fundo, temos uma sensação de espaço. E o movimento nos gráficos, imagens e texto em camadas solicita que os visitantes rolem, revelando mais à medida que os elementos se encaixam.

A ESPN usa uma flecha para persuadir a rolagem pelas subseções de atletas em seus melhores movimentos de assinatura na história da NBA. Rolagem desencadeia um efeito de paralaxe, mudando de um jogador de basquete profissional para o próximo e a década que eles são conhecidos. Recebemos a mensagem de que estamos no final quando a palavra FINALE aparece na última tela, e a rolagem descendente não nos leva a lugar nenhum.

Tenha cuidado com layouts horizontais

A rolagem horizontal está aparecendo cada vez mais, mas como se solta da navegação padrão, ela pode ser menos intuitiva. Assim como os designs verticais padrão, as transições animadas, as dicas gráficas e o conteúdo de corte são todos indicadores para fazer as pessoas rolarem lateralmente.

Este projeto para orgulhoso e rasgado , onde o foco está na história húngara, usa algumas técnicas diferentes para incentivar a rolagem. Imagens de corte e uma rara paralaxe horizontal sugerem que a rolagem irá revelar mais conteúdo. Há também um prompt amigável para “Rolar normalmente à medida que continuamos na horizontal”.

Vale lembrar que, por mais óbvia que uma interação possa parecer para os designers, isso não será necessariamente óbvio para o público. Um pouco de orientação extra não arruinará a experiência para aqueles que “entendem”, mas pode ser tremendamente útil para aqueles que não o fazem.

As pessoas que navegam na web são usadas para becos sem saída horizontais, com coisas como carrosséis sinalizando uma parada difícil. Proud and Torn nos leva através de um layout não convencional que torna imediatamente aparente que há mais conteúdo para ver.

Cuidado com o uso de linhas horizontais sólidas – somos treinados para tratá-las como o fim. Um sinal para parar.

Deixe-os saber que há uma imagem maior

A ilusão da perfeição lhe dá a falsa sensação de que não resta mais nada para ver. É como ir ao Grand Canyon, andar a quinze metros da borda e pensar “Uau! Olhe essas rochas bonitas. ”E depois voltando para o seu carro.

Seu projeto precisa de diretrizes para conduzir as pessoas através da bela expansão que é a sua criatividade.