Você já reparou?

Continuando com a minha série de posts questionando a maneira em que fazemos sites (veja o meu post anterior Repensando o “acima da rolagem”), hoje tenho uma nova pergunta para você.

Você já reparou quantos sites hoje informam aos usuários que eles precisam rolar para baixo para ver mais informações?

Aqui separei alguns para você ver:

GoBank

https://www.gobank.com/

Spendee

http://www.spendeeapp.com/

The Future of Airlines

http://www.f-i.com/fi/airlines/

Continuar lendo

Repensando o “acima da rolagem”

O texto abaixo foi enviado pelo Marcus Perez e faz parte da série de colaborações que o Blog de AI está recebendo. Envie o seu também.

Aliás, esse é o primeiro artigo em português do Marcus, que dá um show à parte não apenas na sua fluência no idioma, mas também em entender os usuários brasileiros e desenhar experiências para eles. Parabéns pela coragem de aceitar o desafio e pelo excelente artigo!

Repensando o "acima da rolagem"

Em uma conversa recente entre o cliente e a agência sobre que parte específica do conteúdo deve ficar acima da rolagem, a seguinte pergunta veio à minha atenção: o que significa estar acima da rolagem?

Com tantos dispositivos novos que estão sendo lançados no mercado, o que é que nós, designers, devemos considerar um padrão acima da rolagem? É o laptop que o cliente utiliza para avaliar o trabalho que estamos fazendo? São as telas de iMac que nossos designers e desenvolvedores usam para trabalhar? Ou os telefones celulares e tablets que alguns de nossos usuários carregam? Assim como muitas outras coisas foram transformadas com a evolução da web, “acima da rolagem” é uma das coisas que temos que reconsiderar.

Desde o ano passado venho trabalhando em diferentes projetos que são considerados Responsive Web Design. Como você sabe, Responsive Design é um subconjunto do Adaptive Design, que significa que o site responde ao contexto e às limitações da resolução de tela em que está sendo visualizado, reorganizando o conteúdo para encaixar corretamente no display. Entre nosso time, temos uma regra que estabelece que não podemos mais criar um site que não seja Responsive. Não é mais um mito, mas sim uma realidade, que as pessoas acessam sites em dispositivos móveis tanto quanto (ou mais que) desktops ou laptops. Assim, é justo perguntar o que significa ter o conteúdo acima da rolagem.

Mesmo criando sites responsivos, continuamos lidando com a questão do que é considerado “acima da rolagem”. Quando focamos em dispositivos móveis, por exemplo: qual é o dispositivo móvel usado como padrão? Um iPhone? Se for assim, qual iPhone? O 3, o 4, o 4S, o 5? Nem todo mundo possui o mesmo tipo de telefone, e, infelizmente, as resoluções de tela variam muito.

Por isso, a escolha de um dispositivo aleatório na hora de determinar o “above the fold” ainda não é a solução para este problema.

Em vez disso, penso que a solução esteja em ter informações importantes e interessantes logo no começo para engajar os seus usuários a descobrirem mais sobre o seu site e, assim, verem o que existe “abaixo da rolagem”.

Como afirmado por muitos estudos de usabilidade: as pessoas vão rolar. No próprio UX Myths, as pessoas não rolarem a tela é listado como um dos maiores mitos de UX. Nós temos rolado telas por muito tempo, então por que pararíamos agora? Eles argumentam que “você não tem que espremer tudo no topo de sua página inicial ou acima da dobra. Para se certificar de que as pessoas vão rolar, você precisa seguir certos princípios de design e fornecer conteúdo que mantenha os visitantes interessados ​​[…]”

Levando isso em consideração, é preciso ser capaz de avaliar que tipo de informação precisa ser mostrada primeiro para o seus usuários, e que outros elementos vão continuar a guiá-los através do resto do site. Infelizmente, ainda vivemos em uma era onde os profissionais de marketing (incluindo os diretores de marketing digital) tentam aplicar práticas “offline” num espaço “online”, muitas vezes de forma mal sucedida.

Um exemplo que me vem à mente é o espaço que temos nas prateleiras dos supermercados. Imagine se você tentasse colocar tudo em uma única prateleira (aquela que fica na altura do seu campo de visão). Bem, é muito provável que os consumidores fiquem confusos e procurem outro lugar, já que seria uma situação difícil para tomar uma decisão.

A mesma coisa vale quando você embala tudo em um único lugar no seu site, em vez de distribui-lo uniformemente. Provavelmente, uma das coisas mais difíceis que enfrentamos como profissionais de UX (e outros profissionais que trabalham nesta área) é: o que deve ser considerado importante para ser exibido no topo da página?

Leia também: Os usuários descem a rolagem da página?

Cada projeto é diferente, cada situação é diferente e os objetivos de negócios variam. No entanto, aqui está uma lista de coisas que podem ajudá-lo a tomar a decisão do que vem primeiro e o que vem a seguir:

  1. Com base nos objetivos de negócio, tente pensar no(s) gatilho(s) principal(s) que irá ajudar a mover os usuários do ponto A ao ponto B. Se você pode conectar os seguintes pensamentos “O que estou fazendo aqui?” para “O que devo fazer agora?” (mantendo os objetivos de negócios em mente), então você está indo no caminho certo.
  2. Não é sobre a interface, mas sobre o conteúdo. Muitas vezes tomamos muito espaço tentando explicar como a interface funciona – e acabamos empurrando o conteúdo para baixo. Os usuários não se preocupam como a sua interface funciona, eles se preocupam com o conteúdo. Eles só se preocupam sobre como a interface funciona, uma vez que percebam que ela não está funcionando.
  3. Sabe aqueles links de “Fale Conosco”, “Precisa de Ajuda?”, “Compartilhar isso”, “Feedback?”, etc? Esses são considerados peças secundárias de informação, e talvez não devam sempre estar na parte superior direita. As pessoas não entram no site e começam a pedir ajuda, eles só pedem ajuda quando não sabem o que fazer. Eles não vão compartilhar seu conteúdo sem vê-lo primeiro e não vão lhe dar feedback até que eles tenham a chance de experimentar o que você tem a oferecer.
  4. “A última promoção” tem que vir bem na frente. Sério? Antes de tomar essa decisão, considerar quem é o seu público-alvo e os objetivos de negócios. Talvez seja mais importante para o primeiro introduzir o que você faz para os seus usuários, antes de dizer-lhes sobre a sua mais recente promoção. Por que eu iria olhar para a sua mais recente promoção, se eu não sei nem o que você faz?
  5. Não querendo ser repetitivo, mas você não está mais trabalhando em uma única resolução. Você precisa pensar sobre como essas informações estão sendo apresentadas em diferentes resoluções e sobre o contexto em que os usuários estão interagindo com o seu site. Se eles estão fazendo isso através de um telefone celular, então eles estão procurando informações diferentes que se fossem acessá-lo através de um laptop ou tablet.

O tempo que as pessoas passam em seu site antes de decidir deixá-lo ou continuar lá, é tão breve quanto o tempo de uma conversa de elevador. Mas como um papo de elevador é curto, você precisa saber organizá-lo. Existe um limite das coisas que você pode dizer entre o térreo e o oitavo andar.

marcus perez cervantes

Escrito por Marcus Perez.
Marcus Perez Cervantes é Designer de Interação, viajante do mundo e atualmente mora em São Paulo, Brasil. Ele tem formação em Desenho Industrial e mestrado em Design de Interação da Universidade Carnegie Mellon. Trabalha na R/GA e já trabalhou em lugares como a frogdesign e Insitum.

Conteúdo acima da rolagem: quando essa preocupação faz sentido?

Above The Fold

Já falamos muito por aqui sobre como o conceito de colocar conteúdo acima da rolagem do navegador está ficando ultrapassado.

Primeiro porque acabou a época onde era possível mais ou menos prever a resolução de tela do usuário. Sites responsivos se adaptam a qualquer resolução, seja ela de um smartphone ou de um iMac – e você enlouqueceria tentando prever onde termina a primeira rolagem da página em cada dispositivo.

Mas não dá para simplesmente ignorar o fato de que sua página é maior do que cabe no browser.

Li um artigo há alguns dias que falava justamente sobre quando a preocupação com a rolagem faz sentido:

  • Em páginas curtas. “If you have a limited amount of content that CAN all fit on one screen (above the fold) it’s best to try. There’s no reason to force the user to scroll a couple hundred pixels.”
  • Não espere que o usuário adivinhe. “Check your designs at different resolutions. If you have any hard horizontal breaks across the page, make sure they’re not right at the fold. Easy to fix by vertically spacing your content. We want to avoid guessing if this is the bottom of the page or not. Guide them down the page by trying to avoid these fold breaks.”

Leia também:

Os usuários descem a rolagem da página?

Aqui vai uma resposta certeira e bem humorada para acabar de vez com o mito da barra de rolagem: http://www.thereisnopagefold.com/

Mais sobre o mito da barra de rolagem:

Em tempo: procurei no whois e encontrei o autor, o freelancer sul africano Damien Du Toit.

O mito da rolagem

Quem nunca tentou espremer o conteúdo ao máximo para que ele ficasse acima da linha de rolagem que atire a primeira pedra. E quem nunca refez uma diagramação quando descobriu que era impossível evitar o inevitável scroll? Também não devem ter sido poucas as vezes em que foi preciso justificar para o cliente o uso da malfadada rolagem.

O estudo feito pela ClickTale com 120 mil páginas da web entre novembro e dezembro de 2006 traz algumas justificativas e respostas para que seus sites não fiquem limitados a uma determinada resolução. Importante destacar que a pesquisa incide apenas sobre a rolagem vertical. Seguem alguns números, como o cliente gosta:

  • 96% das páginas da web possuem rolagem
  • 76% dos usuários que encontram páginas com rolagem fazem uso da mesma, pelo menos pelas 2 ou 3 páginas abaixo da resolução
  • 23% dos usuários costumam fazer a rolagem até o final, independente do tamanho da página

O estudo ainda faz algumas recomendações:

Não tente espremer a página para deixá-la mais compacta. O benefício para os visitantes é mínimo. Caso a página tenha scroll, a maioria irá usá-lo

Já que a rolagem é um mal necessário, invista em um layout que facilite o escaneamento das áreas mais baixas da página (essa também é uma dica de outro estudo, o Eye Track III)

MAIS SOBRE O TEMA

Unfolding the fold
Blasting the mith of the fold
The fold is an unecessary limitation

Agora é navegar e rolar (não resisti ao trocadilho)!

Dica do Propaganda Interativa