Como usar o efeito de posição serial para criar sites melhores

Há uma coleção de leis de UX e princípios de design que explicam como o cérebro humano funciona em relação às interfaces digitais. Eles formam a base geral para um bom design como um todo e devem ser aproveitados sempre que você criar um novo site, aplicativo ou atualizar um já existente.

O efeito de posição serial é uma dessas leis. Descreve um fenômeno que ocorre quando o cérebro humano tenta recordar vários itens que aparecem em uma sequência ou grupo. O efeito de posição em série sugere que as pessoas são capazes de lembrar melhor o primeiro e o último itens do que os do meio.

O psicólogo alemão Hermann Ebbinghaus, que realizou pesquisas sobre memória, foi o primeiro a cunhar o termo. Foi por meio de seus estudos que descobrimos como dois fatores – primazia e recência – afetam nossas habilidades de recuperação de informações.

Digamos que eu abordei você com o seguinte:

“Eu preciso que você pegue o seguinte na loja: alecrim, pimenta preta, cominho, alho em pó, sal rosa, manjericão e coentro.”

Então eu pedi para você repetir todos os itens que eu pedi para você pegar. Você provavelmente tentaria recriar a lista desde o início. Rosemary seria mais fácil de lembrar. Talvez pimenta preta… E depois o que mais?

Este é o efeito de primazia em ação. Temos a tendência de lembrar vividamente o primeiro item de uma sequência com mais clareza do que o que vem depois.

Quando repetimos listas, tendemos a começar com a primeira, o que efetivamente coloca esse primeiro item em nosso armazenamento de memória de longo prazo. Outra razão é porque o primeiro tende a aparecer com mais frequência – seja por causa da prioridade assumida ou por causa de seu posicionamento principal no início.

Agora vamos dizer que estamos em uma festa juntos e eu apresento a vocês alguns membros da minha família:

“Este é meu pai, tio Charlie, meu irmão Eric, sua esposa Tammy, primo Brad, tia Zelda, e esse é meu avô Joe.”

Você anda um pouco pela festa e o tempo passa. Embora você possa se lembrar de quem são os membros da minha família em termos de relacionamento, de quais nomes você se lembra? As chances são boas de você se lembrar do nome do meu vovô Joe porque foi o último que eu disse. Se você passasse mais tempo interagindo com ele, isso também reforçaria seu nome.

É assim que o efeito de recência funciona. Quando você tiver um monte de itens semelhantes para receber de uma só vez, você se lembrará mais fortemente do último.

Uma razão pela qual o efeito de recência funciona é porque o último item vai direto para nossa memória de trabalho, o que torna mais fácil de lembrar do que o que veio antes dele. Há também o fator tempo.

A curva de esquecimento de Ebbinghaus explica a rapidez com que a memória se degrada. Portanto, o último item de uma sequência teve o menor tempo possível para escapar de nosso armazenamento de memória, e é por isso que as pessoas geralmente podem se lembrar dele mais rápido do que todo o resto.

Aqui estão algumas maneiras pelas quais você pode usar o efeito de posição serial em seus designs da web e, posteriormente, melhorar a experiência do usuário:

Pode parecer que cada detalhe é importante em sua página inicial. Embora tudo seja relevante, há uma hierarquia de importância.

Normalmente, a seção herói transmite sua proposta de valor exclusiva. É a primeira seção da página inicial e explica a grande promessa que sua marca está fazendo para seu público. Sem essa informação, os usuários podem se sentir sem rumo ou sem inspiração.

A seção de apelo à ação na parte inferior da página inicial oferece aos usuários uma próxima etapa clara a ser seguida. Embora a página inicial possa direcioná-los em várias direções, esta seção os direciona para um destino específico.

A maioria Temas do WordPress e modelos de sites irá apresentar o design desta forma para você. Leva Polegar verde, por exemplo. Esta é a seção de heróis da página inicial:

E esta é a seção CTA:

Há muito conteúdo entre essas duas seções. No entanto, seus designs uniformes (típicos para as seções internas da página inicial) permitem que essas duas tampas se destaquem mais – e com razão.

O cabeçalho do site e navegação é outra área onde a hierarquia entra em jogo. É por isso que normalmente não há muita variação nos layouts gerais dos cabeçalhos do site.

Para cabeçalhos horizontais, o logotipo geralmente aparece na borda esquerda, enquanto o botão principal – por exemplo, botão CTA, ícone do carrinho de compras, barra de pesquisa – aparece na extremidade direita. Para cabeçalhos verticais, o logotipo ficará na parte superior e o botão principal na parte inferior.

Se você der uma olhada nos vários designs de menu disponíveis em um plugin do WordPress como Mega Menu Groovypor exemplo, você verá esse padrão repetido várias vezes:

Criamos cabeçalhos de sites dessa maneira por alguns motivos.

Uma é por causa padrões de rastreamento ocular. Em geral, nossos olhos são naturalmente atraídos para o canto superior esquerdo da tela antes de qualquer outra coisa. Eles então se movem para a extrema direita antes de ziguezaguear para baixo.

A outra razão é o efeito de posição serial. Por exemplo, ao colocar nossa marca na primeira posição, isso lhe dá mais visibilidade na página e melhora a forma como nossos usuários poderão se lembrar dela daqui para frente.

A ordem em que você coloca as seções em uma página da web afeta quais seus visitantes se lembram melhor. Ao fazer com que certos componentes grudem, no entanto, você pode controlar qual é a “primeira” coisa que todos veem a qualquer momento.

Por exemplo, um cabeçalho fixo garante que o logotipo, a navegação e outros elementos do cabeçalho estejam sempre presentes, o que garantirá seu lugar na memória de longo prazo de seus visitantes.

Este não é o único momento em que é valioso tornar parte do seu site grudento. Veja o blog, por exemplo. À medida que o novo conteúdo é publicado, o conteúdo mais antigo é empurrado cada vez mais para longe dos olhos dos visitantes.

Existem algumas maneiras pelas quais você pode garantir que seu melhor conteúdo permaneça no primeiro lugar.

Uma maneira é usar o WordPress Deixe este post fixo característica:

Isso colocará as postagens designadas no topo do feed principal do blog, tornando-as as primeiras vistas por todos os visitantes do blog.

Outra opção é usar um tema de blog WordPress como Escrita para criar um layout de blog onde a postagem em destaque ocupa o primeiro lugar:

Também não é apenas a sua posição de topo que vai chamar a atenção dos visitantes. É também a quantidade de espaço que ocupa em comparação com as postagens subsequentes.

Estudos de rastreamento ocular sugerem que a maioria dos usuários verifica a margem esquerda, bem como os títulos de uma página para ver se vale a pena uma leitura mais profunda. Cada site é diferente embora. Também depende de que tipo de conteúdo está na página.

É por isso que é importante estudar os dados ao vivo do seu site para ver como é a atenção média do visitante.

A maioria dos seus visitantes pode chegar até a metade da maioria das páginas. Portanto, se você quiser garantir que a última (e mais forte) memória dessa página seja a seção de call-to-action, talvez seja necessário criar um fundo falso.

Para isso, você precisará de uma ferramenta como Hotjar, Lucky Orange ou Mouseflow que use tecnologia de mapeamento de calor para detectar como os usuários interagem com uma página da web. Com os mapas de calor ativados, você pode ver quais áreas da página são mais visualizadas e quais elementos recebem cliques.

Você também pode obter dados sobre até onde as pessoas rolam a página. Você encontrará um exemplo de como isso funciona no site do Hotjar:

Quanto mais fria a cor fica, mais visitantes param de rolar. Você também pode passar o mouse sobre o mapa de calor sombreado para ver qual porcentagem de visitantes atingiu determinados pontos na página.

Se você não pode se dar ao luxo de encurtar suas páginas, pode criar um fundo falso para aqueles que nunca chegam ao final.

Tudo o que significa é colocar um call-to-action no meio da página, onde pelo menos 50% de seus visitantes desistem. Dessa forma, sua última impressão da página – e uma das coisas que eles mais lembram dela – ainda é o CTA.

As leis de UX, como o efeito de posição serial, são úteis porque nos permitem tomar decisões de design (e copiar) que funcionam bem com o funcionamento do cérebro humano. Dito isso, também podemos usar esses princípios para ter mais controle sobre as respostas de nossos visitantes ao que projetamos.

Vamos usar o exemplo de uma tabela de preços.

Você já reparou que muitos plugins de tabela de preços e modelos de tabela de preços – como o incluído no Dígito — muitas vezes fazem com que o plano/opção do centro pareça diferente do resto?

Isso porque o designer entende que o cérebro humano naturalmente quer ler as opções da esquerda para a direita (ou da direita para a esquerda em idiomas como árabe e hebraico). Se os visitantes fizerem isso, o primeiro e o último plano serão os que eles se lembrarão mais claramente.

Ao dar à opção central um design mais pronunciado, podemos incentivar os visitantes a prestar atenção a ela primeiro. E se essa é a que eles se lembram melhor — e nosso design sugere que é a opção mais popular ou valiosa – então devemos ver as vendas desse plano aumentarem.

O vídeo pode ser uma maneira eficaz de se comunicar com os visitantes do site. O formato visual geralmente facilita muito a compreensão de ideias longas, complexas ou abstratas.

Sabendo disso, muitas marcas incorporam players de vídeo em áreas-chave de seus sites – como a seção de heróis da página inicial e nas páginas de destino de vendas. Mas em vez de ir direto para a história, você pode notar que esses vídeos geralmente exibem um cartão de título animado primeiro.

Eles fazem isso por causa do efeito de posição serial. A história ou mensagem transmitida no vídeo é importante. No entanto, é igualmente importante que a pessoa que assiste ao vídeo conecte a mensagem à marca – e o cartão de título da marca faz isso por ela.

Existem muitas maneiras de adicionar sua marca ao cartão de título (e final) de um arquivo de vídeo. Uma maneira é usar um logotipo estático e adicionar um slogan animado acima ou abaixo dele. Outra opção é animar o próprio logotipo.

A Envato Elements tem milhares de modelos de picada de logotipo escolher a partir de:

Faça-os tão longos ou curtos, mínimos ou complexos, como quiser. Apenas certifique-se de que eles apareçam no início e no final de cada vídeo para reforçar sua marca toda vez que alguém assistir a um de seus vídeos.

Há uma razão pela qual princípios de design e leis de UX, como o fator de efeito de posição serial, são tão proeminentes no processo de design. Aprender como o cérebro humano e a capacidade de atenção funcionam permitirá que você tome decisões mais inteligentes sobre o que colocar e onde em seu site.

O efeito de posição em série, em particular, fará você pensar em como o posicionamento e o tempo podem melhorar coisas como reconhecimento de marca, engajamento de visitantes, taxas de conversão e muito mais. Por sua vez, você criará sites que tornarão mais fácil para seus usuários atingirem seus objetivos.

Saiba mais Princípios de design com Tuts+

Não importa onde estejam suas especialidades, se você é um designer, os princípios básicos de design se aplicam ao seu trabalho. Dê uma olhada em nossa crescente coleção de artigos e tutoriais de teoria do design.