Un hack d'interface utilisateur simple pour améliorer l'intégration UX [OCD]

Les maquettes et les croquis de l'interface utilisateur supposent que les données utilisateur sont déjà présentes. Par exemple, la maquette ci-dessous suppose que l'utilisateur aura des contacts avec lesquels discuter, des notifications et même des fils de discussion.

Interface utilisateur de messagerie simple construite à l'aide de cette ressource de croquis gratuite

Mais ce n'est jamais le cas lorsqu'un utilisateur s'inscrit. Au début, il n'y a pas de données, donc une colonne de contacts vide et une fenêtre de discussion vide.

La conception d'interface utilisateur brillante facilite la consommation d'informations et ne se concentre pas sur la façon de créer ces informations.

J'ai appris cela à la dure lorsque j'ai trempé autant de Dribbble que possible pour concevoir un tableau de bord pour une application B2B. Cela avait fière allure sur Sketch, mais nos clients n’ont pas pu se repérer.

Une mauvaise UX augmente les coûts d'intégration et de support, affectant directement les revenus. Cela fait également du mal de regarder un utilisateur qui a du mal à consommer votre conception parfaite de pixels. Vous rappelle que vous avez échoué.

Solutions existantes

Une solution était d'avoir une intégration initiale en utilisant des diapositives comme une interface. Cela semble être la norme pour les applications mobiles.

UX d'intégration de diapositives de Slack

Le problème avec l'approche des diapositives est le manque de contexte. Vous ne pouvez transmettre que beaucoup de choses sur les diapositives (combien l'utilisateur conserve est une question différente).

C'est très bien pour donner un aperçu du produit, mais pas très utile pour expliquer comment le produit fonctionne. Cela n'était pas pertinent pour mon cas d'utilisation, car la complexité du produit ne pouvait pas se résumer à quelques diapositives.

Il y avait également une solution basée sur des info-bulles qui guide l'utilisateur à travers des étapes spécifiques. Cette option est plus populaire auprès des applications Web. Il existe de nombreuses bonnes bibliothèques javascript pour vous aider à créer ces flux.

Infobulle basée sur une démo embarquée pour introjs.com/

En ce qui concerne une solution basée sur les info-bulles, je les ai trouvées ennuyeuses et j'ai presque toujours cliqué sur «sauter le didacticiel». Bien que les grandes entreprises comme Canva utilisent l'info-bulle basée sur l'intégration. Un produit appelé AppCues vous permet de concevoir ces info-bulles sans code, soignée.

Il existe également une approche de style balise, où les caractéristiques généralement mal comprises sont étiquetées avec des balises lumineuses, qui fournissent des informations pertinentes en cas de besoin.

C'est le moyen le plus discret. Contrairement à l'infobulle qui enfonce un didacticiel en 17 étapes et disparaît lorsque vous en avez réellement besoin, cette approche basée sur le hotspot fournit des informations lorsque vous êtes prêt.

Il convient de mentionner que Slack utilise les trois formulaires. Pas étonnant que leurs utilisateurs s'en tiennent. Ce qui fait également allusion au fait que la rétention est directement proportionnelle à la facilité d'intégration.

OCD aka Onboarding centric design

J'aime nommer les choses. Les noms aident à matérialiser les idées dans l'esprit. Appelons donc cette conception centrée sur l'intégration.

Je voulais une solution qui:

  • Était pertinent dans le contexte
  • N'était pas ennuyeux (personne n'aime faire 17 étapes pour apprendre comment fonctionne une fonctionnalité)
  • Est discret (comme les balises)
  • Est facile à consommer (les info-bulles ne sont pas faciles à consommer)

Résultat

J'ai simplement commencé à concevoir des états. La conception du chat que vous avez vue lorsque vous avez commencé à lire cet article peut être conçue avec trois états.

État 1: aucun contact n'est présent

État 2: contacts présents, mais pas de discussions

État 3: les chats et les contacts sont présents

Le but de chaque état est de faire passer l'utilisateur à l'état suivant. Lorsque l'utilisateur est passé à l'état 3, il est correctement intégré. Compte tenu de la maquette du chat, les objectifs pour chaque état sont les suivants:

Objectif de l'état 1: l'utilisateur principal pour ajouter un contact

La maquette ci-dessous n'a qu'un seul appel à l'action, le bouton bleu plus qui permet à l'utilisateur d'ajouter un nouveau contact. Les graphiques et le texte amorcent tous deux l'utilisateur à prendre cette mesure.

État 1 - Amorcez l'utilisateur pour ajouter des contacts (illustration par undraw.co)

Une fois qu'un contact a été ajouté, nous pouvons commencer le deuxième objectif.

Objectif de l'état 2: inciter l'utilisateur à démarrer une conversation

La maquette ci-dessous montre une introduction graphique pour démarrer une conversation. Il décrit explicitement les fonctionnalités disponibles. Encore une fois, il n'y a qu'une seule chose que vous pouvez faire maintenant, à savoir envoyer un message. Vous pouvez également effectuer un appel dans cette interface utilisateur, mais ces deux actions ont le même objectif. Ils amènent votre utilisateur à l'étape 3.

État 2 - Contact ajouté, premier pour démarrer une conversation

Objectif de l'état 3: aucun, l'utilisateur est intégré - tous les signaux doivent disparaître

Et enfin, lorsque votre utilisateur a répété le processus plusieurs fois, son interface utilisateur commencera à ressembler à ce que nous avions initialement prévu.

État 3 - L'utilisateur est correctement embarqué

Avantages de cette approche

  • Par rapport à l'approche des diapositives à l'étape 1, Onboarding Centric Design (OCD) présente le contenu en morceaux. Les informations sont disponibles au moment de la prise de décision.
  • Cette approche peut être utilisée sur les appareils mobiles et de bureau. Cette interface utilisateur est simple, mais dans le cas d'une interface utilisateur complexe, vous pouvez utiliser l'OCD avec des points d'accès pour élever les CTA.
  • Cette approche améliore votre UX en premier lieu, en vous forçant à penser en termes de parcours de l'utilisateur.
  • S'il vous arrive d'écrire vos frontends à l'aide de React, cette approche s'intègre parfaitement à son architecture de composants.

Donc, en règle générale:

Concevoir des maquettes pour les États.
Chaque État a un objectif: passer à l'état suivant.
Le dernier état est lorsque votre utilisateur est intégré.

Merci d'avoir lu :)

Bonjour, si vous avez aimé cet article et que vous souhaitez rester à jour, suivez-moi sur: Medium, Github ou Twitter

Je dirige une communauté détendue (qui comptait 18 membres au 6 octobre 2018) où vous pouvez aider les autres ou recevoir de l'aide concernant le frontend, le backend et le développement en général. Vous pouvez le rejoindre ici.