Concevoir des interfaces ciblées pour une meilleure implication de l'utilisateur

Engagement de l'utilisateur est une métrique délicate qui peut être obtenue de différentes manières pour différents projets. La plupart des designers pensent à interface quand ils parlent d'interactivité, mais Contenu de la page peut également encourager l'interaction de l'utilisateur. Pour un meilleur engagement des utilisateurs, il est important de: écrire un contenu attrayant, et présenter ce contenu dans un design accrocheur.

C’est beaucoup plus facile à dire qu’à faire, mais si vous apprenez quelques notions de base, vous n’aurez aucun problème à interface utilisateur ciblée avec un excellent contenu pour vos projets.

Dans ce post, je vais vous montrer comment augmenter interaction de l'utilisateur et engagement du contenu sur les interfaces Web. Ce sont les deux moyens les plus courants d’engager un visiteur, et si vous le pouvez optimiser l'expérience vous n'aurez aucun problème à augmenter ce temps lucratif sur la métrique de la page.

Capturer la nouveauté

Le concept de nouveauté définit un événement ou une chose qui est généralement nouveau, souvent très nouveau et unique en fonction du contexte. Événements novateurs attirer notre attention parce qu'ils ressortir. C’est également le cas de la conception d’interface avec la nouveauté représentant des éléments qui semblent sauter de la page.

J'ai récemment trouvé un excellent article sur l'importance de la nouveauté en matière d'engagement. Les utilisateurs semblent graviter vers de nouvelles expériences, interfaces et éléments d'interface utilisateur parce qu'ils sont différents. Le seul fait d'être conçu différemment attire souvent l'attention.

Un exemple courant est le bouton d’appel à l’action situé sur la plupart des pages de destination. Vous pouvez également créer de la nouveauté avec photos d'arrière-plan, illustrations ou captures d'écran d'applications, comme sur la page de destination d'Uber for Business.

Cette page contient un bouton d’appel à l’action mais mon attention est immédiate. va aux screenshots. Ils s'animent quand ils sont chargés pour la première fois, donc cela combine nouveauté du design avec mouvement attirer l'attention.

Une alternative serait GiftRocket utilisant icônes illustrées sous forme de liens approfondir le site.

Ces deux exemples utiliser la nouveauté à leur avantage. Vous ne pouvez pas toujours attirer les gens plus loin sur le site, mais vous obtiendrez de meilleurs résultats si vous captez leur attention. au niveau viscéral premier.

Le design est la première chose les visiteurs voient, et vous devez attirer leur attention en quelques secondes pour encourager l'engagement.

Typographie Skimmable

Des études ont montré que la plupart des utilisateurs numériser une page Web plutôt que de le lire mot pour mot. Vous voudrez probablement amener les gens à lire votre contenu, mais vous ne pouvez pas en faire plus.

La meilleure alternative est de créer contenu écrémable avec des titres, du texte en gras et des images qui illustrent ce que vous essayez de dire. Je peux penser au moins trois techniques d'écriture puissantes vous pouvez utiliser dans votre contenu pour augmenter la lisibilité:

1. Diviser le contenu avec sous-titres clairs
2. Casser les paragraphes pour les rendre plus petits
3. Utiliser des listes à puces pour partager vos points plus rapidement

Le but est de garder vos lecteurs descendre la page par tous les moyens nécessaires. En gardant le contenu petit en petits morceaux vous aurez beaucoup plus de facilité à capter l'attention et à pousser les gens plus loin dans le site.

Consultez le blog Quick Sprout pour un exemple de ce style d'écriture. Le contenu est écrit par Neil Patel et il écrit souvent un contenu très long, mais il décompose les paragraphes en 1-3 phrases chacune.

Si tu as titres appropriés, et utilise images / puces tout au long du contenu, vous obligerez les gens à parcourir et à lire beaucoup plus loin. Veillez également à augmenter la quantité d'espaces entre les paragraphes. Marges et rembourrages les deux jouent un rôle important dans la conception et la lisibilité.

Créez du texte pour qu'il soit réellement amusant à lire. Une copie ennuyeuse ne séduira pas, pas plus qu'une copie amusante qui est trop petite ou qui manque de contraste.

Images accrocheuses

Une étude de cas récente de Backlinko suggère que les pages avec au moins une image généralement rang supérieur que des pages sans images. C'est super du point de vue du référencement.

Mais qu'en est-il de l'engagement des utilisateurs? Si vous pouvez garder cette image au dessus du pli ou près du sommet Cela attirera également l'attention des visiteurs avant qu'ils ne rebondissent. Rappelez-vous que les nouveaux éléments de page ont tendance à attirer.

Lorsque vous avez une image (ou plusieurs images) dispersée dans la page, vous briser la monotonie de blocs de texte ennuyeux. Les utilisateurs peuvent faire une pause de lecture pour apprécier l’image ou pour établir un lien entre l’image et le contenu écrit. Mais comme pour la plupart des techniques de conception, la qualité a plus de valeur que la quantité.

Une étude de cas de Moz a révélé que les images de haute qualité ont tendance à garder les visiteurs sur la page pour beaucoup plus longtemps. D'autre part, des images de mauvaise qualité ne fonctionne pas aussi bien et dans certains cas, ils ont causé des visiteurs rebondir plus vite que sans images. Vous devriez essayer d’inclure au moins une image qui est en rapport avec le contenu et cela fournit de la valeur au lecteur.

TechCrunch fait cela avec des images en vedette dans leurs articles où vous trouverez souvent un photo en vedette au-dessus du pli.

WordPress facilite l'ajout des images en vedette avec la fonctionnalité post miniature. Vous pouvez définir une photo distincte pour chaque message que vous écrivez et les forcer à apparaître en haut de la page. C’est un moyen idéal pour donner aux visiteurs un aperçu de de quoi parle le contenu, et d'augmenter CTR pour les widgets de publication associés contenant également la vignette de publication.

Éléments de page contrastés

Si vous devez attirer l’attention sur un domaine particulier de la page, asymétrie Est ton meilleur ami. Contraste crée un décalage entre des zones spécifiques d'un dessin ou certains blocs de contenu.

Le visiteur est naturellement ravir vers le contraste parce que c'est différent De grandes juxtapositions de couleur, de taille ou d'espaces attirent le regard parce que brise le moule de tout le reste dans la mise en page.

Mon exemple préféré de contraste d’éléments de page est peut-être la page d’accueil de Sketch. Il y a beaucoup de contraste trouvé entre les deux boutons d'appel à l'action, un pour télécharger un essai de Sketch et l'autre pour acheter une copie.

Le bouton d'achat utilise une couleur de fond complète beaucoup plus lumineux que d'autres couleurs dans l'en-tête. Le texte du bouton est également plus lumineux que le bouton d'essai gratuit. Cela conduit les visiteurs vers le bouton Acheter maintenant. uniquement à partir de stimuli visuels.

Vous remarquerez un technique similaire sur la page d'accueil de Optin Monster. Cet en-tête comporte un seul bouton intitulé Obtenir OptinMonster maintenant. C'est un bouton vert clair sur un fond bleu sans aucun autre élément vert en vue.

La couleur, la taille et la forme attirent tous votre attention parce que contraste avec tout le reste dans l'en-tête. Juste à côté du bouton se trouve un petit lien texte pour un aperçu vidéo. C'est probablement une superbe vidéo qui mérite toute notre attention, mais pas autant que le bouton CTA d'essai / d'inscription.

Pour un blog, vous pouvez avoir différentes qualifications pour l'engagement de l'utilisateur. Un choix commun est un formulaire d'inscription à la newsletter comme l'exemple sur Aeolidia.

Si vous faites défiler vers le bas du contenu, vous remarquerez un boîte d'inscription fancy-shmancy conçu juste pour le formulaire de newsletter. Il se démarque du reste de la page avec une couleur de fond unique, une typographie amusante et une icône mignonne du roi Triton.

La meilleure façon de concevoir avec un contraste est d'étudier des exemples et de simplement expérimenter. Voir ce qui fonctionne et ce qui ne fonctionne pas par suivi des métriques avec des tests A / B. Si vous êtes à la recherche d'exemples supplémentaires, jetez un coup d'œil à cette publication Codrops contenant des conseils et des écrans de sites Web asymétriques dynamiques..

Encourager l'interaction utilisateur

Il existe de nombreuses façons de garder les visiteurs intéressés par un site, mais la plus courante consiste à: fais-les faire des trucs. Cela est vrai à la fois des blogs statiques et des sites sociaux dynamiques. Il n’existe pas de solution unique pour cela. Vous pouvez faire tout ce qui fonctionne pour que les utilisateurs se sentir engagé avec la page.

Dans un site statique, vous pourriez ajouter beaucoup de Liens connexes pour en lire plus, ou inclure diaporamas d'images. Vous pouvez également ajouter des formulaires pour les commentaires des utilisateurs ou une newsletter.

Quand cela vient à interfaces dynamiques, le but du site est généralement d'encourager l'engagement des utilisateurs. Le plus gros obstacle est enseignement aux utilisateurs comment fonctionne le site et comment bien interagir avec l'interface.

Découvrez cet article de KissMetrics qui parle des techniques d’engagement des utilisateurs. Une des meilleures stratégies que j'ai trouvées est de concevoir une visite guidée qui conduit les visiteurs à travers chacune des caractéristiques principales.

Imaginez à quel point la perspective de Twitter serait confuse pour un tout nouvel utilisateur. S'ils ne suivent personne et n'ont aucun abonné, pourquoi devraient-ils tweeter?

le “Suivre les suggestions” boîte lors de l'inscription aide les nouveaux utilisateurs se familiariser avec le fonctionnement de Twitter. Cette fonctionnalité prépare les nouveaux utilisateurs à commencer à s'engager avec la plate-forme, et à expérimenter avec des fonctionnalités tels que les suivants, les tweets et les messages privés.

Outre une visite guidée, vous voudrez aussi rendre l'interface simple. Les caractéristiques principales devraient être 1-2 clics depuis le tableau de bord ou la page principale de l'utilisateur. Interfaces intuitives besoin d'explication, et simplicité capte l'attention beaucoup plus rapide.

En comprenant toutes ces techniques, vous aurez plus de facilité à construire des interfaces qui résoudre les problèmes des utilisateurs, et encourager les nouveaux utilisateurs à rejoindre. Si vous cherchez plus Astuces d'engagement de conception UX Découvrez ces articles liés:

• Une tactique d'intégration des utilisateurs pour accroître l'engagement (thinkapps.com)
• Une leçon dans l'engagement progressif (uxbooth.com)
• Ne présumez pas que les nouveaux utilisateurs veulent apprendre à utiliser votre produit (uxdesign.cc)