Aguarde...

19 de fevereiro de 2019

Usabilidade na Web: Importância da Dobra no Web Design

Usabilidade na Web: Importância da Dobra no Web Design

Se você passou algum tempo trabalhando no campo de web design, você pode ter ouvido que é importante manter tudo acima da dobra em um ponto ou outro. Embora muitos argumentem que o conceito de manter tudo acima da dobra esteja desatualizado, ele ainda permanece uma parte integrante do design do site. Pode não ser tão consequente como já foi, mas ainda requer consideração por todos os sites que visam a aparência apresentável para fornecer uma experiência envolvente aos seus visitantes.

Então, o que exatamente significa “dobra”? Quão importante é e você deve se preocupar em web design?

A história por trás do DOBRA

O conceito da dobra originou-se da era do jornal. Os jornais são impressos em folhas grandes de papel e são dobrados quando atingem as arquibancadas. Isso leva apenas a metade superior do papel visível para os espectadores.

Essa noção fez com que a indústria de jornais acreditasse que, para atrair o público, eles deveriam adicionar manchetes cativantes e conteúdo e imagens que chamam a atenção na metade superior da página. O mesmo princípio é aplicável ao conteúdo digital. No entanto, a única diferença é que, ao contrário dos jornais, os sites não têm nenhuma dobra física. A dobra neste caso significa a barra de rolagem.

Qualquer coisa acima do pergaminho é referida acima da dobra.

As coisas que são visíveis imediatamente sem rolar o site são consideradas como a dobra acima. Tudo o que requer rolagem é considerado abaixo da dobra.

Usabilidade na Web: Importância da Dobra no Web Design

Por que é acima da dobra importante?

O conteúdo colocado acima da dobra é o primeiro visível para os visitantes quando eles carregam a página. E como a visibilidade do conteúdo acima da dobra é alta, é uma boa prática manter o conteúdo que é crucial para alcançar as metas de negócios lá. Além disso, também é considerado um fator importante no SEO.

O que manter em mente no conteúdo acima da dobra

Embora acima da dobra seja o imóvel de um site, há certas coisas que um web designer precisa considerar ao projetar seu conteúdo e aparência.

Concentre-se na usabilidade

A dobra é um importante princípio de design de orientação. Portanto, certifique-se de criar um site para o qual você projete acima da dobra, de modo que ele se concentre na usabilidade do site. O conteúdo precisa chamar a atenção, convencer e incentivar os usuários a continuar explorando o site ainda mais, rolando ou clicando no que você fornece. Ele precisa ser relevante e atrair os usuários de que estão no lugar certo.

Este conceito acima da dobra de SnackNation afirma claramente que o site é sobre como obter lanches deliciosos para o seu escritório. Além disso, há também um botão de call-to-action de “Experimente grátis”, onde o usuário pode inserir o email de trabalho para obter uma caixa de amostra grátis da SnackNation. Tanto o conteúdo quanto o botão de call-to-action chamam a atenção, deixando os visitantes curiosos para navegar pelo resto do site.

Não empinar conteúdo acima da dobra

Como dito acima, todas as imagens, mensagens e conteúdos importantes devem estar acima da dobra. Mas, ao fazer isso, certifique-se de equilibrar esse conceito com os princípios de usabilidade e não apenas congestione cada parte do conteúdo acima da dobra. Isso fará mais mal ao seu site do que bom.

Por exemplo, seu website tem uma mensagem mostrando “Quer saber mais?” E, abaixo disso, há um grande botão dizendo “Saiba mais”. Isso deixa claro para o usuário que, se ele quiser mais informações, precisará clicar no botão “Saiba mais”. Agora, considere um caso em que você tem cerca de 4 a 5 dessas mensagens no mesmo espaço. Seus visitantes ficarão confusos em qual botão eles devem clicar. Então, não empilhe todo o seu conteúdo acima da dobra. Agrupá-lo em pedaços gerenciáveis ​​e espalhá-los com hierarquia adequada e espaço em branco.

Um conceito de design muito simples e elegante do Flickr . Ele transmite tudo o que oferece aos visitantes sem abarcar muito conteúdo acima da dobra, mantendo um equilíbrio igual entre conteúdo e espaço.

Vá contando histórias

O conteúdo mantido acima da dobra deve ser uma prévia das informações fornecidas no restante da página. Deve ser tal que os visitantes serão encorajados a rolar para baixo para obter mais informações e explorar a vida abaixo da dobra.

Este design da Dropbox é o exemplo perfeito do conceito de contar histórias . Acima, o design da dobra, com fontes e cores atraentes, informa aos usuários sobre o que é o site e uma seta apontando para baixo para indicar aos usuários que eles podem obter mais informações rolando para baixo . Além disso, um formulário de inscrição também é fornecido para os usuários que estão prontos para cantar de uma só vez.

Qualidade acima da quantidade

Sempre se concentre na qualidade do conteúdo que você tem acima da dobra. Certifique-se de que seu conteúdo seja preciso e convidativo para os usuários. Por exemplo, dê uma olhada na página de destino do Trello . Ele tem um design minimalista usando cores decentes, uma mensagem precisa transmitindo o que ele faz e um convidativo botão de call-to-action de inscrição.

Como encontrar a dobra?

Com os avanços no design responsivo da web, as dobras para diferentes tamanhos de dispositivos são praticamente as mesmas. Como por Optimizely , uma linha de dobra média que todos os web designers concordaram é de aproximadamente 1.000 pixels de largura e 600 pixels de altura. Este é o melhor cenário em que a resolução da tela é de 1024 * 786 pixels, com a janela do navegador maximizada e nenhuma barra de ferramentas instalada.

Existem muitas ferramentas on-line para determinar essa dobra, uma delas é um mapa de calor. O Mapa de Calor coleta dados de usuários em tempo real sobre como eles interagem com o site e exibe os resultados usando cores diferentes, como vermelho escuro mostrando a parte usada com frequência na página, amarelo para as peças usadas e verde claro para as seções menos usadas.

Existem muitos tipos de heatmaps disponíveis para os sites. Scroll heatmap é o que permite determinar a dobra do seu site. Ele rastreia até onde o visitante rola sua página. Você pode ter uma ideia de onde seus visitantes passam a maior parte do tempo e de onde começam a rolar. Isso lhe dirá onde está a dobra da sua página.

Conclusão

O conceito de dobra nunca pode desaparecer, no entanto, pode ser certamente dobrado. Ao obter um equilíbrio adequado entre o conceito de dobra e usabilidade e colocar apenas as coisas mais importantes acima da dobra, você pode fornecer um design da Web atrativo, atraente e convidativo.

Postado em BlogTags:
Escreva um comentário