Projetando Interfaces Focadas para Melhor Engajamento do Usuário

Engajamento do usuário é uma métrica complicada que pode ser obtida de diferentes maneiras para diferentes projetos. A maioria dos designers pensa na interface quando eles falam sobre interatividade, mas Conteúdo da página também pode incentivar a interação do usuário. Para um melhor envolvimento do usuário, é importante escrever conteúdo envolvente, e apresentar esse conteúdo em um design atraente.

É muito mais fácil dizer do que fazer, mas se você aprender alguns fundamentos, não terá problemas em criar um interface focada com ótimo conteúdo para seus projetos.

Neste post, vou mostrar como aumentar interação do usuário e engajamento de conteúdo em interfaces baseadas na web. Estas são as duas formas mais comuns de envolver um visitante, e se você puder otimizar a experiência você não terá nenhum problema em aumentar esse tempo lucrativo na métrica da página.

Capture Novelty

O conceito de novidade define um evento ou coisa que é geralmente nova, geralmente muito nova e única baseada no contexto. Eventos novos prenda nossa atenção porque eles se destacarem. Isso também é verdade para o design de interface com elementos que representam novidade que parecem saltar fora da página.

Eu encontrei recentemente um ótimo post discutindo a importância da novidade quando se trata de engajamento. Usuários parecem gravitam em direção a novas experiências, interfaces e elementos de interface do usuário porque eles são diferentes. O único fato de ser projetado de forma diferente, muitas vezes chama a atenção.

Um exemplo comum é o botão de chamada para ação encontrado na maioria das páginas de destino. Você também pode construir novidade com fotos de fundo, ilustrações ou capturas de tela do aplicativo, como na página de destino do Uber for Business.

Esta página tem um botão de chamada para ação, mas minha atenção imediatamente vai para as imagens. Eles animam quando são carregados pela primeira vez, então isso combina novidade de design com movimento chamar atenção.

Uma alternativa seria o GiftRocket usando ícones ilustrados como links para aprofundar ainda mais no site.

Ambos os exemplos use novidade a seu favor. Você não pode sempre atrair mais pessoas para o site, mas você verá melhores resultados se captar a atenção deles em um nível visceral primeiro.

O design é a primeira coisa os visitantes veem e você precisa chamar a atenção deles em segundos para incentivar ainda mais o envolvimento.

Tipografia Skimmable

Estudos descobriram que a maioria dos usuários digitalizar uma página da web em vez de ler palavra por palavra. Você provavelmente vai querer atrair as pessoas para ler o seu conteúdo, mas você só pode fazer muito.

A melhor alternativa é criar conteúdo passível de com manchetes, texto em negrito e imagens que ilustram o que você está tentando dizer. Eu posso pensar em pelo menos três poderosas técnicas de escrita você pode empregar em seu conteúdo para aumentar a legibilidade:

1. Divide o conteúdo com legendas claras
2. Quebrar parágrafos para torná-los menores
3. Use listas com marcadores para compartilhar seus pontos mais rapidamente

O objetivo é manter seus leitores descendo a página por quaisquer meios necessários. Mantendo o conteúdo pequeno em pedaços pequenos você terá muito mais facilidade em capturar a atenção e direcionar as pessoas para o site.

Confira o blog do Quick Sprout para um exemplo desse estilo de escrita. O conteúdo é escrito por Neil Patel e ele freqüentemente escreve conteúdo muito longo, mas ele divide os parágrafos em 1-3 frases cada.

Se você tem manchetes adequadas, E use imagens / pontos de bala em todo o conteúdo, você terá pessoas que estão vasculhando e lendo muito mais. Também não se esqueça de aumentar a quantidade de espaço em branco entre parágrafos. Margens e Paddings ambos desempenham um papel enorme no design do layout e legibilidade.

Design de texto para que seja realmente divertido ler. Cópia chata não vai atrair, mas nem cópia divertida é muito pequena ou sem contraste.

Imagens atraentes

Um estudo de caso recente do Backlinko sugere que páginas com pelo menos uma imagem geralmente classificar mais alto do que páginas sem imagens. Isso é ótimo de uma perspectiva de SEO.

Mas e o engajamento do usuário? Se você puder manter essa imagem acima da dobra ou perto do topo Ele também irá capturar a atenção dos visitantes antes que eles saltem. Lembre-se que os novos elementos da página tendem a atrair.

Quando você tem uma imagem (ou muitas imagens) intercalada ao longo da página, você quebrar a monotonia de blocos de texto chatos. Os usuários podem faça uma pausa na leitura apreciar a imagem ou fazer uma conexão entre a imagem e o conteúdo escrito. Mas, como acontece com a maioria das técnicas de design, a qualidade é mais valiosa do que a quantidade.

Um estudo de caso da Moz descobriu que imagens de alta qualidade tendem a manter visitantes na página por muito mais tempo. Por outro lado, imagens de baixa qualidade não funciona tão bem e em alguns casos eles causaram visitantes saltar mais rápido do que sem imagens. Você deve tentar incluir pelo menos uma imagem relevante para o conteúdo e essa fornece valor para o leitor.

TechCrunch faz isso com imagens em destaque em seus artigos, onde você encontrará muitas vezes um foto em destaque acima da dobra.

O WordPress facilita a adição de imagens em destaque com o recurso de miniatura de postagem. Você pode definir uma foto distinta para cada post que você escreve e forçá-los a aparecer no topo da página. Esta é uma maneira perfeita de dar aos visitantes um vislumbre de qual é o conteúdo, e aumentar CTR para widgets de postagem relacionados que também contêm a miniatura da postagem.

Elementos de página contrastantes

Se você precisar chamar a atenção para uma área específica em uma página, assimetria é seu melhor amigo. Contraste penetra muito entre áreas específicas de um projeto ou certos blocos de conteúdo.

Visitante é naturalmente ravitate para o contraste porque é diferente. Grandes justaposições de cor, tamanho ou espaço em branco chamam a atenção porque quebra o molde de todo o resto no layout.

Meu exemplo favorito para contrastar elementos de página talvez seja a home page do Sketch. Há muito contraste encontrado entre os dois botões de call to action, um para baixar um teste do Sketch e o outro para comprar uma cópia.

O botão de compra usa uma cor de fundo completa muito mais brilhante que outras cores no cabeçalho. O texto do botão também é mais brilhante comparado ao botão de teste gratuito. Isso leva os visitantes até o botão Comprar agora unicamente de estímulos visuais.

Você notará um técnica similar na página inicial do Optin Monster. Este cabeçalho tem apenas um botão chamado Get OptinMonster Now. É um botão verde brilhante sobre um fundo azul sem outros elementos verdes à vista.

A cor, o tamanho e a forma atraem sua atenção porque contrasta com tudo o resto no cabeçalho. Diretamente ao lado do botão há um pequeno link de texto para uma visualização de vídeo. Provavelmente é um ótimo vídeo e merece atenção, mas não tanto quanto o botão CTA de avaliação / inscrição.

Para um blog, você pode ter diferentes qualificações para o envolvimento do usuário. Uma escolha comum é uma formulário de inscrição de boletim informativo como o exemplo da Aeolida.

Se você rolar para baixo até o final do conteúdo, você notará um caixa de inscrição fantasia-shmancy projetado apenas para o formulário de boletim informativo. Destaca-se do resto da página com uma cor de fundo única, tipografia divertida e um ícone fofo do King Triton.

A melhor maneira de projetar com contraste é estudar exemplos e apenas experimentar. Veja o que funciona e o que não funciona Métricas de rastreamento com teste A / B. Se você está procurando mais exemplos, confira este artigo da Codrops cheio de dicas e telas de websites assimétricos ao vivo.

Incentivar a interação do usuário

Existem muitas maneiras de manter os visitantes interessados ​​em um site, mas o mais comum é obtê-los fazendo coisas. Isso vale para blogs estáticos e sites sociais dinâmicos. Não há truques de tamanho único para isso. Você pode fazer o que funciona para fazer os usuários sinta-se envolvido com a página.

Em um site estático, você pode adicionar muitos Links Relacionados para ler mais ou incluir slideshows de imagens. Você também pode adicionar formulários para comentários de usuários ou um boletim informativo por e-mail.

Quando se trata de interfaces dinâmicas, O objetivo do site é geralmente incentivar o envolvimento do usuário. O maior obstáculo é usuários de ensino como o site funciona e como interagir adequadamente com a interface.

Confira este post da KissMetrics falando sobre técnicas de engajamento de usuários. Uma das melhores estratégias que encontrei é projetar uma visita guiada que leva os visitantes através cada um dos principais recursos.

Pense em quão confusa a perspectiva do Twitter seria para um novo usuário. Se eles não seguem ninguém e não têm seguidores, por que eles tweetariam?

o “Siga sugestões” caixa durante a inscrição ajuda os novos usuários conheça como o Twitter funciona. Esse recurso prepara novos usuários para começar a se envolver com a plataforma, e para experimentar com recursos como segue, tweets e mensagens privadas.

Além de uma visita guiada, você também vai querer tornar a interface simples. Recursos principais devem ser 1-2 cliques de distância do painel do usuário ou da página principal. Interfaces intuitivas precisa de explicação, e simplicidade capta atenção muito mais rapido.

Compreendendo todas essas técnicas, você terá mais facilidade em criar interfaces que resolver problemas dos usuários, e incentivar novos usuários a participar. Se você está procurando mais Dicas de engajamento de design UX Confira estas postagens relacionadas:

• Uma tática de integração do usuário para aumentar o engajamento (thinkapps.com)
• Uma lição de envolvimento gradual (uxbooth.com)
• Não assuma que novos usuários querem aprender como usar seu produto (uxdesign.cc)