Fermer

décembre 11, 2020

Comment concevoir une interface utilisateur simple lorsque vous avez une solution complexe


À propos de l'auteur

Suzanne Scacca est une ancienne réalisatrice, formatrice et directrice d'agence WordPress qui travaille maintenant comme rédactrice indépendante. Elle se spécialise dans l'artisanat marketing, web…
En savoir plus sur
Suzanne
Scacca

Les logiciels et les applications résolvent souvent des problèmes très complexes pour les entreprises et les consommateurs en termes de ventes, de marketing, de finances, etc. Mais proposer un produit qui résout les problèmes de vos utilisateurs ne suffit pas. Si l'interface utilisateur est aussi complexe que le problème d'origine, le taux de désabonnement des utilisateurs sera élevé. Aujourd'hui, nous allons examiner quelques conseils pour concevoir une interface utilisateur simple quelle que soit la complexité de votre solution.

Que disent-ils? Les problèmes complexes nécessitent des solutions complexes? Cela est certainement vrai lors du développement d'applications et de logiciels.

Mais comment vous assurer que le backend complexe ne se répercute pas sur le frontend?

Une interface utilisateur complexe, en général, est une raison plus que suffisante pour de nombreuses personnes abandonner un site Web ou une application mobile. Cependant, quand il s'agit de payant ou d'utilisateurs abonnés, ne vous attendez pas à ce que l'un d'eux se contente de l'interface compliquée de votre logiciel.

Peu importe à quel point votre produit est incroyable. Si l'apparence extérieure de celui-ci rend vos utilisateurs fous, vous pouvez vous attendre à de grandes quantités de désabonnement coûteux en retour. est une technologie que de nombreux designers ont eu du mal à développer seuls. Ci-dessous, nous allons examiner quelques-uns des conseils qui les ont aidés à surmonter ce défi de conception d'interface utilisateur et qui peuvent également vous aider.

Comment concevoir une interface utilisateur simple pour une solution complexe

Votre objectif lors de la conception de l'interface de votre solution est de présenter une interface très simple et intuitive à l'utilisateur (et parfois aussi à ses utilisateurs finaux).

Alors, comment Flatfile a-t-il pu accomplir cela? Le processus d'intégration des données peut à lui seul être compliqué: il faut prendre des données à partir de diverses sources, types de fichiers et utilisateurs, puis les traduire en données utilisables dans l'application. Amener les utilisateurs à préparer, valider et assainir leurs données sur le frontend n'est pas non plus une tâche facile.

Outre le processus de conception de logiciel standard, Flatfile a pris des mesures supplémentaires pour s'assurer que les utilisateurs ne se rendent jamais compte de la complexité de leur produit. . Voici ce qu’ils ont appris:

1. Déterminez les objectifs de vos utilisateurs afin de pouvoir concevoir une interface utilisateur en premier

Pour créer un produit que les utilisateurs trouvent utile, vous devez concevoir en fonction de leurs objectifs et de leur point de vue. Si vous perdez cela de vue, vous pourriez vous retrouver avec une interface utilisateur qui donne la priorité à vos objectifs et priorités, ce qui laisse transparaître les complexités des coulisses.

Voyons comment ce faux pas peut avoir de sérieuses ramifications pour votre application ou

Instagram a récemment mis à jour l'en-tête et le pied de page de son interface de longue date. Voici à quoi ressemblait l'en-tête avant et après novembre 2020:

 Conception de l'en-tête Instagram: le haut est avant novembre 2020 et le bas est après novembre 2020
Une comparaison de la conception de l'en-tête d'Instagram avant (en haut) et après (en bas) Novembre 2020. (Source de l'image: Instagram ) ( Grand aperçu )

La conception antérieure contient deux symboles / actions:

  • L'icône de l'appareil photo pour prendre ou télécharger des photos. [19659022] L'icône Messenger pour discuter avec les connexions.

La conception la plus récente a fait pivoter toutes les icônes vers la droite. Il y en a trois maintenant:

  • Le symbole plus pour créer des publications, des histoires, des bobines et des vies Instagram.
  • Le symbole du cœur pour afficher l'activité (c'est-à-dire après l'engagement, les nouveaux abonnés, etc.).
  • The Messenger L'icône conserve la même conception et le même emplacement.

En regardant l'en-tête, vous pourriez ne pas penser que grand chose ne va pas ici. Cependant, Instagram n'a probablement pas repensé sa navigation pour améliorer l'esthétique ou la convivialité. Le nouveau pied de page en est la preuve:

 Conception du pied de page Instagram: le haut est avant novembre 2020 et le bas est après novembre 2020
Une comparaison de la conception du pied de page d'Instagram avant (haut) et après (bas) novembre 2020. ( Source de l'image: Instagram ) ( Grand aperçu )

Regardez les icônes du milieu et de l'avant-dernière. Après novembre, les icônes plus et cœur ont été déplacées dans le coin supérieur droit de l'application et remplacées par ce qui suit:

  • Un lien vers les bobines Instagram, une fonctionnalité qui agit de la même manière que TikTok (et augmente sans doute la dépendance de la plate-forme ).
  • Un lien vers les achats sur Instagram, une fonctionnalité qui permet aux utilisateurs de faire des achats dans des magasins populaires (et non dans ceux qu'ils suivent activement).

L'interface utilisateur n'encourage plus (principalement) les utilisateurs à gérer le contenu de leurs comptes préférés ou à établir des liens organiques avec d'autres utilisateurs. Au lieu de cela, l'interface utilisateur donne la priorité aux nouveaux aspects pay-to-play de la plate-forme, en favorisant les marques et les influenceurs qui dépensent de l'argent dessus.

Par conséquent, la convivialité de l'application a été compromise car les boutons de notification et de création ont été supprimés. la zone du pouce et dans un coin de l'application. Non seulement cela rend l'application plus difficile à utiliser, mais cela sensibilise davantage à ce qui se passe dans les coulisses. Si les utilisateurs d'Instagram ne pensaient pas aux algorithmes complexes et aux décisions commerciales au travail, l'interface utilisateur attire désormais l'attention sur eux.

Avant de faire quoi que ce soit d'autre, déterminez ce que vos utilisateurs veulent accomplir et comment ils attendez que cela se produise. Ensuite, résumez les objectifs de vos utilisateurs de la même manière que Randy Wiafe, responsable produit de Flatfile:

«L'objectif pour les utilisateurs de Flatfile est d'importer en douceur les données de leurs clients. Les utilisateurs de Flatfile doivent déplacer des données d'un logiciel à un autre et ce processus doit être aussi simple que possible car c'est l'une des premières expériences de produit qu'un nouveau client aura – importer ses données. "

Vous ne pouvez pas permettre de perdre cela de vue. Parce que si vous ne concevez pas une interface utilisateur qui soit conforme aux objectifs de vos utilisateurs et à leur parcours préféré, alors vous risquez de révéler une partie de la complexité qui se passe dans les coulisses.

2. Évaluez les produits des compétitions afin de créer votre MVP

Un produit minimum viable est absolument nécessaire à chaque fois que vous créez une application. Non seulement vous économisez du temps et de l’argent en développant uniquement la version la plus simple du produit, mais une version bêta en direct et fonctionnelle vous permet de recueillir de véritables commentaires des utilisateurs lors de votre itération.

C’est ce que Flatfile a fait. Wiafe explique la valeur du MVP:

«La version bêta nous a vraiment ouvert les yeux sur la manière dont les clients et leurs utilisateurs finaux interagissent avec le produit. Être capable de comprendre pourquoi et comment les utilisateurs étaient bloqués nous a aidés à améliorer considérablement l'expérience. »

Cela dit, comment savez-vous comment minimal pour aller avec l'interface utilisateur de votre MVP? Parce qu'il y a une énorme différence entre minimal et inutilisable.

Plutôt que de recommencer le processus de conception à partir de zéro, je vous recommande de passer du temps à l'intérieur du logiciel de vos concurrents.

De toute évidence, je ne préconise pas de voler celui de quelqu'un d'autre dessins. Ce que je suggère, cependant, c'est que vous obteniez une expérience de première main avec eux.

Pour commencer, cela vous permettra d'identifier les tendances à travers les interfaces utilisateur – des tendances de conception avec lesquelles vos prospects sont déjà à l'aise et avec lesquels ils s'engagent avec confiance. Deuxièmement, vous pouvez utiliser ces démos pour réduire votre MPV au strict minimum nécessaire.

Imaginons que vous construisiez un logiciel de passerelle de paiement. Vous pouvez commencer par Stripe :

 Accueil du tableau de bord de la passerelle de paiement Stripe
Un aperçu du logiciel de la passerelle de paiement Stripe. (Source de l'image: Stripe ) ( Grand aperçu )

Et 2Checkout :

 Accueil du tableau de bord de la passerelle de paiement 2Checkout
Un aperçu de 2Checkout logiciel de passerelle de paiement. (Source de l'image: 2Checkout ) ( Grand aperçu )

J'ai supprimé toutes les données de ces tableaux de bord et laissé uniquement les principaux composants, la navigation et les étiquettes. Quels sont les fils communs que nous voyons entre les deux interfaces utilisateur?

  • Une barre de recherche près du centre de l'en-tête,
  • Un lien vers les paramètres utilisateur ou les informations de compte dans le coin supérieur droit,
  • A gauche- panneau de contrôle aligné qui prend entre un ⅙ ou un ⅕ de la page,
  • Données présentées dans des blocs autonomes,
  • Polices neutres sans empattement utilisées pour l'étiquetage,
  • Le contraste des couleurs est minime et n'existe que dans le tableau de bord pour indiquer les onglets sélectionnés ou pour distinguer les ensembles de données.

C'est juste une analyse de base, mais vous voyez le point. En supprimant les détails et en transformant efficacement les produits de vos concurrents en wireframes, vous pouvez identifier les détails de conception que les utilisateurs se sentiraient à l'aise et sûrs de voir dans votre logiciel.

Vous pouvez également utiliser ce temps passé sur leurs produits pour comprendre où leur complexité transparaît. La hiérarchie des données présentées est-elle illogique? Y a-t-il des éléments inclus qui compliquent trop les choses parce qu'ils apparaissent sur les mauvais écrans? Demandez-vous aux utilisateurs de franchir une étape de trop pour atteindre leur objectif principal?

Une chose que Wiafe suggère est de ne pas traiter votre MVP strictement comme un filaire:

«Un autre domaine d'intérêt pour nous était de savoir comment faire cela l'expérience se sent bien pour nos utilisateurs. Nous ne voulions pas que la version bêta soit froide et sans intérêt. Nous voulions faire une bonne première impression et cela signifiait que nous devions passer du temps à donner du caractère au logiciel avant de le sortir. »

Donc, oui, vous utiliserez le logiciel des concurrents pour étoffer les spécifications de conception qui gardez l'interface utilisateur simple. Cependant, votre MVP doit toujours être un produit viable que les utilisateurs souhaitent utiliser, ce qui signifie qu'il doit être conçu pour être attrayant.

3. Introduisez progressivement la complexité et confirmez avec les tests utilisateur

Avez-vous déjà commandé de la nourriture dans un restaurant via une application de livraison et vous êtes-vous demandé pourquoi cela prend autant de temps?

Vous passez votre commande à 20 h. L'application indique que le restaurant a confirmé la commande quelques secondes plus tard et que vous aurez la nourriture vers 8h45. À 8 h 40, vous ouvrez l'application pour voir où se trouve le livreur sur la carte et vous vous demandez pourquoi il ne bouge pas. Ou, pire, pourquoi ils vont dans la mauvaise direction. Votre estomac commence à grogner et vous regrettez de ne pas avoir récupéré la commande vous-même.

Si vous n'êtes pas familier avec cela, vous avez de la chance. Mais si vous Google "le livreur est allé dans la mauvaise direction sur l'application", vous verrez ce que je veux dire:

 La recherche Google pour "le livreur est allé dans la mauvaise direction sur l'application" montre la frustration de l'utilisateur
Recherche Google pour "livraison pilote est allé dans la mauvaise direction sur l'application '. (Source de l'image: Google ) ( Grand aperçu )

C'est un nouveau problème pour les gens qui mangent au restaurant. Dans le passé, tout ce qu'ils recevaient était un message de confirmation de commande, puis ils recevaient un appel, un SMS ou frappaient à la porte lorsque leur nourriture arrivait.

Mais les applications de livraison ont changé au cours de la dernière année environ, à condition que une visibilité totale non seulement sur les progrès du restaurant dans la cuisson de vos plats, mais aussi pour vous montrer où se trouve exactement le livreur.

Est-ce que cette fonctionnalité a été absolument essentielle au succès des applications de livraison? Si cela exaspère les utilisateurs au point où ils subissent des volumes élevés de réclamations auprès du service client, de remboursements de commandes ou de taux de désabonnement, alors non, ce n'était pas le cas. entièrement intégré une fois que les tests utilisateur confirment qu'il s'agit d'un ajout intéressant.

Comme l'explique Wiafe:

«En fonction de l'utilisateur du produit, l'introduction de la complexité du produit varie. Avec notre produit Portal nous travaillons plus fréquemment avec les développeurs afin que ce ne soit pas un problème qui augmente la complexité de l'importateur. Cependant, Concierge a été conçu pour le succès des clients et les équipes de mise en œuvre, qui ont tendance à être moins techniquement orientées. Nous avons donc veillé à ajouter des fonctionnalités ou des composants complexes au logiciel jusqu'à ce que nous les testions. »

Comprendre les objectifs et les attentes de vos utilisateurs est précieux lorsque vous débutez. Mais ne supposez pas que vous comprenez tout ce qui passe dans l'esprit de vos utilisateurs une fois que vous avez une application ou un logiciel en direct.

À moins que vous ne soyez à la place de vos utilisateurs et que vous l'expérimentiez exactement comme ils sont, vous avez vraiment aucune idée de ce que les nouvelles couches de complexité vont faire à l'utilisabilité telle que elles la perçoivent.

Il est donc extrêmement important de formuler des hypothèses de travail liées à ce qui se passera lorsque vous introduirez plus de complexité dans l'interface utilisateur ou quand vous supprimez quelque chose que vous jugez trop complexe. Une fois que vous avez une idée basée sur des données, vous pouvez commencer à solliciter les commentaires de vos utilisateurs et à affiner votre produit.

Conclusion

Pour créer une application que vos clients utiliseront, vous devez leur donner quelque chose pour travailler avec et pas quelque chose qui les oblige à contacter le support client pour obtenir de l'aide chaque semaine. Ou cela les amène à se demander pourquoi ils utilisent quelque chose qui leur cause plus de stress et de frustration qu'auparavant.

Faites donc attention à la complexité du backend que vous autorisez à infecter le frontend. Si l'interface utilisateur est trop compliquée à naviguer ou trop compliquée à comprendre, les utilisateurs se révoltent et fuient en masse.

 Smashing Editorial (ra, il)




Source link