Fermer

janvier 25, 2023

Copier des conceptions ne fonctionne pas, et voici pourquoi9 minutes de lecture


Il existe une sorte de dissonance cognitive qui hante les designers : le véritable désir d’être vraiment innovant et original tout en parcourant le Web à la recherche d’inspiration et d’idées de design.

Je doute que de nombreux designers s’assoient avec l’intention de copier Airbnb, Apple ou Stripe. Mais ce sont des expériences si bien conçues qu’il est difficile ne pas être inspiré dans une certaine mesure – même inconsciemment.

Alors que l’optionnalité illimitée d’un tableau Figma vierge peut être écrasante, la réponse est rarement de copier quelqu’un d’autre. La question du plagiat mise à part, c’est difficile de reproduire la magie d’une autre expérience utilisateur et de ne pas perdre la magie qui la fait fonctionner.

Comprenez-vous réellement pourquoi cela a fonctionné? Avez-vous perdu la sauce secrète quelque part dans la réplication ? Pouvez-vous ensuite innover vos propres idées sur eux?

Tout d’abord, permettez-moi de vous donner un exemple d’une industrie où il est courant de copier ce qui fonctionne de start-ups plus jeunes et plus agiles : bancaire.

Aujourd’hui, j’ai publié certaines des conclusions d’une étude de 900 jours portant sur 12 banques au Royaume-Uni et intitulée The UX de la banque. En tant que lecteur de longue date de Smashing Mag, je voulais vous donner à tous un extrait modifié de cet article puis quelques conseils comment s’inspirer efficacement des autres.

Monzo Bank a été fortement copiée en 2020

En 2020 (lorsque j’ai commencé cette étude), j’ai critiqué la façon dont la plupart des banques en place géraient les fonctionnalités de base de gestion des cartes. Ils manquaient de contexte, les conceptions elles-mêmes étaient vraiment médiocres et il y avait des problèmes d’utilisation de base.

De nouvelles fonctionnalités, telles que le gel de votre carte ou l’affichage de votre code PIN dans l’application, ont simplement été ajoutées sous forme de nouvelles lignes, similaires à une page de paramètres. C’était le risque prévisible d’ajouter de nouvelles fonctionnalités pendant des décennies sans rééquilibrer l’expérience utilisateur de base.

Fonctionnalités de gestion mobile des cartes bancaires
Fonctionnalités de gestion des cartes bancaires mobiles en 2020 : Barclays, First Direct, HSBC. (Grand aperçu)

Mais, débarrassé de la façon dont les choses étaient, Monzo, Starling et Revolut ont saisi l’opportunité de concevoir quelque chose qui semblait intuitif pour ce nouveau paradigme. Cet exemple vient du Royaume-Uni, mais c’est vrai pour de nombreuses marques mondiales, comme Robinhood, Venmo, N26 et CashApp.

Depuis 2020, il y a eu un effort notable pour reproduire ce qui fonctionne sur la scène bancaire britannique, et les expériences se ressemblent beaucoup.

Application Monzo en 2020
L’interface de l’application Monzo en 2020. (Grand aperçu)

En particulier, l’ordre et le positionnement des fonctionnalités de gestion de cartes les plus courantes – comme indiqué ci-dessus sur Monzo en 2020. C’est ce qui a clairement été une « inspiration » massive pour les autres banques.

Fonctionnalités de gestion de cartes les plus courantes des banques mobiles
Voici à quoi ressemblent les interfaces utilisateur bancaires aujourd’hui, quelques années plus tard. (Grand aperçu)

Cela est vrai à la fois pour les aspects visuels de la conception (c’est-à-dire son apparence) et pour l’architecture fonctionnelle de la gestion de votre carte (c’est-à-dire son fonctionnement).

Barclays pourrait avoir plus de 80 000 employés, mais il semble qu’ils aient les mêmes habitudes grises Figma que le reste d’entre nous.

Le risque de copier

Laissez-moi maintenant vous montrer un exemple où la copie peut vous causer des ennuis : rechercher la « parité des clics », copier un flux simple que vous ne comprenez pas et ne pas considérer que les meilleures expériences sont souvent les plus longues.

Voici le nombre de clics nécessaires pour commander une nouvelle carte auprès de chacune des 12 banques que j’ai suivies :

Un graphique montrant le nombre de clics nécessaires pour commander une nouvelle carte auprès de chacune des 12 banques
Avec une Metro Bank, il suffit de 4 clics pour commander une nouvelle carte, et avec HSBC il vous faudra 12 clics. (Grand aperçu)

En tant qu’analyste (et à première vue), il pourrait sembler que Metro a le meilleur parcours utilisateur. Mais dans ce cas, le nombre de clics n’est pas la bonne mesure à prendre en compte.

Il semble y avoir très peu de corrélation positive entre ce que je pense être les meilleures expériences (par exemple, Revolut, Monzo et Starling) et le nombre de clics.

Au contraire, avoir trop peu de clics est plus susceptible d’être un indication qu’il n’y a pas assez de contexte (ou qu’il est entassé dans un seul écran).

C’est presque comme les codes de triche évidents du design : utilisez plus de rembourrage, espacez les choses et donnez-vous plus d’espace pour ajouter du contexte.

Considérons quelques nuances à ce parcours utilisateur spécifique (c’est-à-dire la perte de votre carte bancaire) :

  • 📅 Utilisation peu fréquente
    La plupart des gens ne commandent pas de nouvelles cartes chaque mois. Donc, ce n’est pas une « fonctionnalité de puissance », et ils n’espèrent pas optimiser l’efficacité.
  • 😰 Connotations négatives
    La plupart du temps, vous commandez une nouvelle carte en raison d’un événement négatif (par exemple, volé, perdu ou endommagé). Vous êtes probablement déjà anxieux, stressé et frustré.
  • ⌛️ Sensibles au temps
    Les gens ont besoin d’une nouvelle carte rapidement. Le contexte derrière la vitesse de livraison est important, plutôt que la vitesse de commande la carte.

Résumer: Les personnes ayant perdu leur carte rechercheront probablement plus de réconfort et de confort que d’efficacité. C’est le ton du parcours utilisateur, et en tant que designer, vous devez en être parfaitement conscient.

Metro a si peu de clics car il s’agit essentiellement d’un écran avec deux boutons. Vous n’avez pas la possibilité de conserver le même code PIN (par exemple, si vous avez endommagé votre carte à la maison), ce qui signifie que vous devez attendre qu’une carte et un code PIN arrivent.

Les deux clics économisés en ne demandant pas cette préférence m’ont obligé à attendre deux jours supplémentaires avant de pouvoir utiliser ma carte.

Un graphique montrant le temps d'avoir une carte bancaire active
De combien de jours auriez-vous besoin pour obtenir une carte active ? Avec HSBC, il vous faudra 3 jours, avec Santander 6 jours. (Grand aperçu)

Et ce sont les deux métriques par lesquelles je mesurerais le succès de ce parcours utilisateur :

  • Quelle a été la qualité de l’expérience (qualitative) ?
  • À quelle vitesse peuvent-ils utiliser leur carte (quantitatif) ?

Si vous deviez copier le flux de Revolut mais supprimer les fonctionnalités dont votre produit ne dispose pas, ce processus en 11 clics pourrait ne pas être le même.

Ou, vous pouvez vous inspirer de «l’écran de sélection de cartes» de Monzo, mais si vous l’avez combiné avec une autre étape qu’ils n’ont pas, vous risquez de perdre la magie de la raison pour laquelle cela fonctionne.

Même les banques, qui ont en grande partie le même ensemble de fonctionnalités, reproduisent les mêmes idées avec une qualité d’exécution très large.

Note: C’est une industrie qui devrait être relativement facile à reproduire des idées, mais qui montre à quel point cela peut être subtilement difficile.

Les choses à faire et à ne pas faire pour mettre en œuvre l’inspiration

Pour être tout à fait clair, je suis partisan de me pencher sur le Biais de familiarité — une tendance des gens à préférer (c’est-à-dire à choisir) des produits, des services et des options qui leur semblent familiers.

Alors, voici quelques conseils pratiques faire et à ne pas faire du bâtiment sentiment familier produits, sans perdre cette étincelle magique :

✅ A faire :

  • Essayez d’identifier le biais psychologiques qui sont en jeu.
    L’utilisateur est-il frustré ? Triste? Essayent-ils d’éviter de faire des pertes, ou leur prise de décision est-elle faussée par quelque chose d’autre ? Au final, ressemblent-ils aux mêmes biais affectant votre produit ?
  • Pouvez-vous vous appuyer sur un mécanisme bien connu et économiser des efforts d’intégration ?
    Par exemple, TikTok a popularisé le mécanisme « swipe to watch ». Il n’y a aucune honte à utiliser ce même style de navigation ; vos utilisateurs se sentiront instantanément plus familiers avec votre produit. Rappelez-vous : la familiarité est un raccourci vers l’apprentissage.
  • Laissez-vous inspirer par l’inventivité de l’exécution, pas par les éléments visuels.
    Il n’est pas productif de tomber amoureux du processus de paiement de Shopify et de vous convaincre que vous devez le copier. Au lieu de cela, essayez d’identifier comment ils ont innové intelligemment sur des problèmes subtils et spécifiques (c’est-à-dire, gérer les adresses de livraison globales sur une seule page sans recharger).

❌ Choses à éviter :

  • Ne copiez pas directement le design de quelqu’un d’autre.
    Vous ne voyez probablement que 5 % de la complexité, et les 95 % restants peuvent inclure des nuances inattendues qui ont conduit à des décisions visibles.
  • Ne présumez pas que vous devriez avoir la parité des fonctionnalités.
    En d’autres termes, ce n’est pas parce qu’une entreprise que vous admirez a les fonctionnalités X, Y et Z dans la navigation principale que vous devriez le faire. Que veulent réellement faire vos utilisateurs ?
  • N’oubliez pas que votre start-up n’est pas Airbnb et que vous devez éduquer les gens sur ce que vous faites réellement.
    En d’autres termes, lorsqu’un produit devient un nom familier, il n’est souvent pas nécessaire de passer du temps (c’est-à-dire des clics) à enseigner à l’utilisateur ce qu’il fait réellement – tout le monde le sait déjà. Mais vous le faites probablement.

Je n’ai pas la solution miracle pour reproduire avec succès la magie d’Apple (et si c’était le cas, honnêtement, je le garderais probablement pour moi et je ferais fortune).

Mais, espérons-le, cela servira de rappel important de ne pas suivre la compétition aveuglément.

Pour lire l’étude complète (et gratuite) sur l’UX de la Banque, visitez Construit pour Mars.

Éditorial fracassant
(vf, yk, le)




Source link