Une diatribe contre les jolies conceptions d'applications

Publié: 2022-03-11

"Garde-toi de cette vanité qui courtise un compliment ou s'en nourrit." –Chalmers

En surfant sur des sites d'inspiration de design avec mes yeux aux rayons UX critiques et anti-hype :) Je repars souvent avec de la fumée qui sort de mes oreilles. Comme le titre l'indique, ceci est une diatribe, mais ne le prenez pas trop au sérieux. J'essaie de faire valoir un point.

Oui, je sais que certains de ces sites de présentation de design ne sont pas nécessairement destinés à des produits du monde réel, mais je dis toujours qu'ils doivent refléter une approche réfléchie du design, principalement en posant la question principale "Pour qui est-ce ? », « Comment les gens utiliseront-ils mon produit » et « Est-il réellement utilisable ? ».

Les conceptions d'applications superficielles qui suivent les dernières modes et ignorent de manière flagrante les conventions d'utilisation de base, les meilleures pratiques UX et les principes fondamentaux de la conception d'interaction échoueraient très probablement dans le monde réel ! Heureusement, ils ne vont généralement pas au-delà du monde imaginaire généralement ridicule et auto-défilé sur Dribbble et Behance.

Malheureusement, ces «conceptions conceptuelles», un seul écran dans une application imaginaire, ne servent qu'à perpétuer les concepteurs étiquetés comme des artistes - comme des prétendants qui ne se soucient que du placage, des jolies couleurs et des polices de caractères. De nos jours, toute conception d'application doit aller bien au-delà.

Je parle d'UX.

Si des personnes dans le monde réel essayaient d'utiliser ces applications, je garantis que plus de 50 % auraient du mal à le faire et abandonneraient par la suite dans la confusion.

application météo - mauvaise conception de l'application
Qui n'a pas besoin d'une autre application météo ? Il n'y a aucun indice pour l'utilisateur sur la façon de l'utiliser. (Jona Dinges sur Dribbble)

Les concepteurs de produits numériques dignes de ce nom et désireux d'élever leur jeu savent qu'il est essentiel de laisser leur ego à la porte et d'éviter les fioritures inutiles, les défilés publics égoïstes et la séduction inutile du public. #UXFail !

conception d'applications de voyage - mauvaise conception d'applications
Aucune animation GIF sophistiquée ne résoudra de graves problèmes d'expérience utilisateur avec une application mal conçue, comme une interaction gestuelle cachée, des icônes dénuées de sens ou un texte à faible contraste. (Application de voyage par Arunraj sur Dribbble)

Abandonner l'utilisabilité pour la flatterie

De bonnes expériences utilisateur sont indispensables pour que la conception de produits numériques réussisse sur le marché. Bien sûr, l'esthétique - de superbes conceptions esthétiques et agréables sont importantes, mais elles ne sont que la touche finale qui complète un produit utilisable qui est également un plaisir à utiliser. Viser uniquement la perfection esthétique tout en abandonnant la convivialité est finalement un jeu de perdant.

Comme l'a dit Don Norman, le « gourou de la technologie exploitable » souvent surnommé, « les grands designers produisent des expériences agréables ».

Les expériences agréables sont celles qui créent le moins de friction tout en offrant une interaction fluide et transparente et des expériences d'anticipation (c'est-à-dire que les choses apparaissent comme par magie. Les bonnes choses, au bon moment, de la bonne manière).

La façon d'y arriver n'est certainement pas d'ignorer les meilleures pratiques établies et les conventions de conception et de se concentrer simplement sur la façade. C'est évident, Dribbble se pavane : 1) Vous ne comprenez pas votre utilisateur, et 2) Vous copiez les modes.

Meilleures pratiques de conception UX d'applications mobiles
Vos conceptions posent-elles ces questions ?

Ignorez les conventions à vos risques et périls

Les conventions de conception, que ce soit dans la conception de produits numériques ou la conception industrielle - par exemple une voiture ou un vélo - sont ancrées dans le comportement humain, la mécanique, la physique, les sciences et la recherche approfondie. Ils suivent les meilleures pratiques et les attentes humaines quant à la façon dont les choses fonctionnent parce que nous y sommes habitués, ayant suivi ces conventions pendant des éternités. Ce sont des conventions qui ont été élaborées par essais et erreurs et qui se sont avérées très efficaces au fil du temps ; un peu comme l'évolution.

Il est téméraire et quelque peu arrogant d'ignorer ou de violer les conventions de conception. Ils sont fondamentaux et servent de base à partir de laquelle nous pouvons ensuite innover. Il s'agit de ce qui est attendu. Sans eux, vous risquez d'embêter les gens. Imaginez si chaque vélo, chaque poignée de porte - ou les pédales et le volant de chaque voiture - fonctionnaient différemment, tout cela uniquement au nom de "l'innovation".

Deux mots : chaos total.

Une interface utilisateur est comme une blague. S'il faut l'expliquer, ça ne marche pas.

Trucs et astuces de conception UX mobile
Une autre conception d'application de Dribbble. (Aaron 1991 sur Dribbble)

Attention à l'heuristique

Les applications bien conçues qui s'efforcent d'être des produits utilisables suivent des conventions de conception bien établies, des directives d'utilisation de base et des principes de conception d'interaction (entre autres) et réussissent l'évaluation heuristique avec brio. ("Heuristiques" car ce sont des règles empiriques générales, pas des directives d'utilisation spécifiques.)

Pour que les conceptions d'applications fonctionnent bien dans le monde réel, elles doivent respecter les 10 heuristiques d'utilisabilité pour la conception d'interface utilisateur telles que définies par le groupe Nielsen Norman, une voix de premier plan dans le domaine de l'expérience utilisateur depuis 20 ans. Ceux-ci sont:

  1. Visibilité de l'état du système
  2. Correspondance entre le système et le monde réel
  3. Contrôle et liberté de l'utilisateur
  4. Cohérence et normes
  5. Prévention des erreurs
  6. Reconnaissance plutôt que rappel
  7. Souplesse et efficacité d'utilisation
  8. Design esthétique et minimaliste
  9. Aidez les utilisateurs à reconnaître, diagnostiquer et corriger les erreurs
  10. Disponibilité de l'aide (il peut s'agir de "visites rapides" ou de procédures pas à pas)

Lisez plus en détail ces 10 principes généraux pour la conception d'interaction ici.

Engouement au nom de l'innovation

Souvent, les écrans de concept d'application sont conçus par des concepteurs à la recherche de nombreux likes sur des sites de présentation de portefeuilles dans le but de se frayer un chemin jusqu'à la section des coups chauds quotidiens sur Dribbble. Quelques conceptions d'interface utilisateur fantaisistes et minimalistes ne sont pas le produit. Cela revient à concevoir une porte de voiture sans offrir aucune idée de ce à quoi ressemble le reste de la voiture ou de son fonctionnement dans un scénario réel.

Meilleures pratiques de conception d'interface utilisateur mobile pour la conception d'applications mobiles
Une conception d'application de trading de Dribbble. Il arbore non pas un mais deux menus remplis d'icônes mystérieuses et de texte à faible contraste.

Ne vous méprenez pas ! L'innovation de conception est nécessaire. Il est sain et essentiel pour toute discipline ou domaine créatif de s'épanouir. Mais cela ne devrait pas se faire au détriment d'une bonne UX. Faisons ici une distinction et appelons-la expérimentation de conception. Sous le prétexte d'un design épuré et minimaliste, voulant simplement être différent et cool, bon nombre des conceptions soi-disant innovantes présentées sur ces sites sacrifient la convivialité de base.

Convivialité 101

La convivialité, fondement des expériences utilisateur exceptionnelles, est un attribut de qualité qui évalue la facilité d'utilisation des interfaces utilisateur. Le mot convivialité fait également référence aux pratiques visant à améliorer la facilité d'utilisation au cours du processus de conception.

L'utilité d'une application est définie en termes d'utilité et de convivialité. L'utilitaire fournit aux utilisateurs les fonctionnalités dont ils ont besoin ; la convivialité est la facilité et l'agrément d'utilisation de ces fonctionnalités. Par conséquent, les conceptions d'applications fantaisistes qui ignorent ces principes de base de la convivialité finissent par être inutiles par définition.

Il est compréhensible que les concepteurs recherchent des moyens innovants et intéressants de concevoir la navigation de leur application. Mais il y a une ligne fine entre l'inattendu et l'inutilisable. Trois éléments à prendre en compte dans la conception de la navigation sont la cohérence, les attentes des utilisateurs et les indices contextuels. Peu importe la fantaisie de votre eCommerce, par exemple, la conception du concept d'application. Si les utilisateurs ne trouvent pas le produit, ils ne peuvent pas l'acheter.

Conception utile

Comme l'a dit Steve Jobs, « Ce n'est pas seulement ce à quoi ça ressemble et ce à quoi ça ressemble. Le design, c'est comme ça que ça marche.

Il parlait de design utile .

Si un concepteur perturbe trop le modèle mental d'une personne sur la façon dont les choses devraient fonctionner, l'application échouera. S'il y a un énorme décalage entre le modèle mental des utilisateurs et le modèle conceptuel, l'application est grillée. Les modèles mentaux, comme leur nom l'indique, sont des modèles conceptuels dans l'esprit des gens qui représentent leur compréhension de la façon dont les choses fonctionnent.

L'un des principes les plus fondamentaux de la conception d'interaction est qu'une interface utilisateur doit avoir des signifiants pour être utile. Si les utilisateurs n'ont pas d'indices visuels dans l'interface utilisateur qui signalent les actions disponibles ou les interactions gestuelles à leur disposition, appelées signifiants , la conception de votre produit est DOA.

Même si vous, en tant que concepteur, pouvez être épris de votre produit, les utilisateurs se soucient beaucoup plus de l'utilité. Ils ne veulent pas apprendre votre application, et ils ne veulent pas se lancer dans un voyage de découverte ou d'expérimentation pour voir ce qui fonctionne en essayant de glisser des éléments dans l'interface utilisateur. Comme Steve Krug, consultant en utilisabilité depuis plus de 20 ans, l'a déclaré dans son livre Don't Make Me Think , "[L'utilisabilité] est le principe primordial, le point décisif ultime pour décider si une conception fonctionne ou non."

Conception d'applications mobiles d'application d'astrologie
Comment utilise-t-on cette application ? (Application d'astrologie de Brandon Termini sur Dribbble)

Pour être sûr, comme Dieter Rams, un designer allemand légendaire chez Braun dans les années 70 et une source d'inspiration pour tout ce qui concerne Apple, a déclaré :

La qualité esthétique d'un produit fait partie intégrante de son utilité car les produits que nous utilisons au quotidien affectent notre personne et notre bien-être. Mais seuls les objets bien exécutés peuvent être beaux.

En d'autres termes, le design doit fonctionner à tous les niveaux.

Conception d'application mobile minimaliste
Une radio Braun conçue par Dieter Rams. Véritable minimalisme fonctionnel.

Voici les 10 commandements d'un bon design selon Dieter Rams :

minimalisme de conception d'applications mobiles

Rappelons-nous que la conception visuelle - l'esthétique - n'est qu'un aspect de la conception UX. C'est la dernière couche qui devrait élever tout ce qui s'est passé avant dans le processus de conception UX, c'est-à-dire la définition des objectifs commerciaux, l'identification de l'utilisateur principal (personas), la recherche d'utilisateurs, les croquis, l'idéation, le wireframing, les maquettes, les prototypes et les tests d'utilisabilité. . C'est le placage final qui rehausse l'expérience globale de l'utilisateur en alignement avec la conception pour les émotions.

Réduire l'effort mental

bonnes pratiques de conception d'applications mobiles
La plupart des gens n'auraient aucune idée de ce que signifient les icônes sans étiquette, et le manque de contraste dans l'en-tête rendrait la navigation invisible pour la plupart des utilisateurs. (application de commerce électronique fantaisie)

Avec une mauvaise conception en action, ce que font M. et Mme Designer est de demander aux gens de déchiffrer et d'interpréter des icônes et des symboles vagues, augmentant ainsi leur charge cognitive (la quantité totale d'effort mental utilisée dans la mémoire de travail). D'autre part, une bonne conception de l'expérience utilisateur réduira la charge cognitive. Ce type de conception égoïste - oui, j'y suis allé - jette des barrages routiers sur le chemin des gens, augmentant les frictions et la frustration. Est-ce vraiment le but ?

conception d'applications mobiles modèles mentaux conception d'interface utilisateur
Que signifie "ON et OFF" ? A quoi servent les icônes ? Cette conception demande aux utilisateurs d'interpréter et d'apprendre trop. (Stan Yakusevich on Behance)

Les concepteurs doivent fournir un étiquetage clair (liens et boutons) et des panneaux de signalisation évidents (navigation claire) pour aider les utilisateurs à former une carte mentale de l'application et à comprendre où se trouvent les choses et comment les utiliser. La navigation doit être claire, axée sur les tâches et logique (par exemple, les commandes à l'écran suggèrent comment l'utiliser) et son emplacement doit être cohérent (par exemple, sur une barre de menus).

Indiquez clairement où les utilisateurs doivent taper, s'ils peuvent balayer et rendre les cibles suffisamment grandes pour être facilement tapotées. Prévenir les erreurs. Ne faites pas deviner aux gens ce que signifie quelque chose. Ne soyez pas paresseux. Évitez les menus hamburger et kebab (les trois points) car ils masquent la navigation et rendent le contenu moins détectable. Evitez notamment les hamburgers qui ne ressemblent même pas à des menus hamburgers ! Oui, l'espace est limité, mais il a été prouvé que la combinaison d'onglets (en haut en bas) et de menus de hamburgers fonctionne bien mieux qu'un seul hamburger.

menu hamburger de conception d'application mobile
Menu de type hamburger au sommet. Icônes sans étiquette nécessitant une interprétation. (Application de comptabilité de xiaoniaojiu sur Dribbble)


meilleures conceptions d'applications mobiles
Même Uber est un grand délinquant UX dans une application par ailleurs bien conçue. Pouvez-vous voir ce menu de hamburgers ? La plupart des gens non plus.


Mauvaise conception de l'application mobile
Turo est un autre grand délinquant avec ses icônes sans étiquette dans la barre d'onglets. Il n'y a aucun indice quant à leur signification.


erreurs de conception d'applications mobiles
La plupart des gens dans le monde réel auraient de réelles difficultés à comprendre comment utiliser cette application. (Application de budgétisation à domicile par Tubik)

Ce n'est pas un monde parfait

Si votre produit se retrouvait entre les mains des utilisateurs, seraient-ils capables de trouver des choses et de les utiliser réellement ? Ils n'ont peut-être pas accès à une configuration super-duper comme celle que vous avez utilisée pour concevoir ces écrans. Repensez à l'utilisabilité et à l'accessibilité (handicap visuel, handicap physique, handicap cognitif). Selon les données du recensement, aux États-Unis, au moins 19 % des personnes ont un handicap et le pourcentage est probablement plus élevé dans les pays moins développés. Si quelqu'un avec une vision moins que parfaite choisissait votre application, serait-il capable de l'utiliser ?

Votre conception est-elle « conviviale pour les doigts » ou littéralement pénible à utiliser ? Combien d'efforts les gens doivent-ils déployer pour atteindre les différentes parties de l'écran de l'application ? Envisagez-vous des flux de tâches utilisateur, en mettant des éléments exploitables sous le bout des doigts des gens au lieu de les faire sauter aux quatre coins de l'écran ? Le design est-il vraiment tactile ? Avez-vous pris en compte la zone obscurcie sous la main qui tient le mobile ?

Comme le souligne Luke Wroblewski dans Designing for Large Screen Smartphones, avez-vous réfléchi aux performances de vos conceptions sur des écrans plus grands ?

une meilleure conception d'applications mobiles pour une meilleure UX
Les écrans mobiles plus grands rendent certains éléments de l'interface utilisateur difficiles à atteindre.

Votre conception respecte-t-elle vraiment la recommandation d'Apple sur l'interface humaine de l'iPhone d'une taille cible minimale de 44 pixels de large sur 44 pixels de haut ? Le guide de conception et d'interaction de l'interface utilisateur Windows Phone de Microsoft suggère une taille cible tactile de 34 pixels avec une taille cible tactile minimale de 26 pixels.

Ne tombez pas amoureux du contraste super minimum entre le texte et l'arrière-plan ou du petit texte illisible, car cela rend vos créations "branchées, propres et minimalistes".

conception UX d'applications mobiles
Presque indéchiffrable en raison du manque de contraste entre les éléments. Icônes à trois endroits, certaines sans étiquette.


mauvaise conception de l'application mobile
En raison du faible contraste, la navigation est presque impossible à lire. (Application de suivi de vitesse par Rono sur Dribbble)


Meilleure expérience utilisateur

Conception d'applications mobiles Spotify
La conception de l'application Spotify est propre et bien étiquetée. Ses fonctions principales sont rapidement comprises. (Mais il y a ce menu de kebab embêtant !)


Conception UX de l'application mobile Starbucks
Les créateurs de Starbucks ne sont pas paresseux. Regardez, pas de menu hamburger! Les concepteurs ont même supprimé les icônes et opté pour de simples étiquettes de texte à la place.


Bonne conception d'application mobile
Même si un designer fait preuve de créativité avec des icônes, si elles sont clairement étiquetées, il n'y a pas de conjecture. (Conception de l'application par le designer Toptal Mohammed Bilal)

Nous avons besoin d'un meilleur design

Alors, qu'est-ce qu'un bon design ? Cette discussion pourrait remplir un livre mais, d'une manière générale, une «bonne conception» est lorsque tout se réunit pour l'utilisateur de cette conception.

Cela signifie que pour qu'une conception soit "bonne" et utile aux utilisateurs, elle doit prendre en compte plusieurs niveaux et facteurs sur lesquels elle doit fonctionner pour réussir.

Les tendances du design vont et viennent. La tendance moyenne en matière de design ne dure qu'un an ou deux ; une bonne convivialité, la base de la conception UX, est là pour rester.

Les produits qui ont été conçus selon les sept facteurs d'une grande UX survivront à toute tendance de conception, c'est garanti. Les concepteurs qui prêtent attention - à une grande convivialité, aux meilleures pratiques UX, aux conventions de conception d'interaction et aux facteurs qui influencent l'expérience utilisateur - auront un impact plus important que ceux qui ne le font pas. En fin de compte, ils seront récompensés et leurs produits numériques plus largement acceptés et couronnés de succès sur le marché.

conception d'interactions d'applications mobiles
Les sept facteurs qui influencent l'expérience utilisateur. (de la Fondation Interaction Design)

Si, en tant que designer, vous voulez devenir meilleur en UX - pour créer des applications mobiles et de bureau utiles, pas seulement jolies - investissez du temps pour apprendre au moins les bases de l'UX. Commencez par suivre les blogs UX et abonnez-vous aux newsletters et publications en ligne telles que Toptal Design Blog, UX Magazine, UX Matters, UserTesting, uxdesign.cc, UX Design Weekly ou Interaction Design Foundation.

Lisez les études d'utilisateurs menées auprès de participants vivants et respirants, de vraies personnes. Comme on dit, les chiffres ne mentent pas ; tout le reste n'est qu'hypothèse et supposition.

Suivez les leaders d'opinion UX sur Twitter. Lisez des articles UX et des livres blancs, la crème de la crème étant The Nielsen Norman Group et Adaptive Path.

Medium est l'une de mes destinations préférées pour lire des articles de conception UX/UI en ligne. Les concepteurs du monde entier l'utilisent pour en savoir plus sur la conception, l'expérience utilisateur, la convivialité et d'autres sujets liés à la création et à la création de produits numériques de qualité. Voici les créateurs à suivre sur Medium.

Lisez quelques-uns des livres classiques fondamentaux que chaque UXer que je connais a sur leur étagère et traitez-les comme des Écritures.

  1. Le livre fondateur de Don Norman sur le design The Design of Everyday Things
  2. Le design émotionnel de Don Norman : pourquoi nous aimons (ou détestons) les choses de tous les jours
  3. Ne me fais pas réfléchir de Steve Krug
  4. Lean UX de Jeff Gothelf : appliquer les principes Lean pour améliorer l'expérience utilisateur
  5. Ingénierie de l'utilisabilité de Jakob Nielsen
  6. Les 100 choses que tout designer doit savoir sur les gens selon Susan Weinschenk

Lisez des ressources en ligne informatives sur les directives d'utilisabilité, les principes de conception d'interaction et les meilleures pratiques UX : études, livres blancs, articles, etc.

  1. Premiers principes de la conception d'interaction
  2. Ensemble complet de 2 397 directives d'utilisation (sur plusieurs rapports) du NNGroup
  3. 10 heuristiques d'utilisabilité pour la conception d'interface utilisateur du NNGroup
  4. Articles du Baymard Institute : Baymard étudie le comportement sur les sites de commerce électronique
  5. Articles sur la maîtrise de l'UX : tout ce qui concerne l'UX

Et enfin, ajoutez ces cinq podcasts UX à votre bibliothèque iTunes :

  1. UX Pod : Discussions avec les concepteurs UX et sur l'utilisabilité en général
  2. Inside Intercom : entretiens avec les meilleurs designers d'entreprises leaders
  3. Podcast UX pour les personnes passionnées par l'équilibre entre les affaires, la technologie et les utilisateurs
  4. Podcast UIE : aperçus de l'ingénierie de l'interface utilisateur sur le monde du design
  5. True North : découvrir des histoires de conception mettant en évidence les tests de conception et la recherche

• • •

Pour en savoir plus sur le blog Toptal Design :

  • Meilleures pratiques de conception d'interface utilisateur et erreurs courantes
  • États vides - L'aspect le plus négligé de l'UX
  • La simplicité est la clé - Explorer la conception Web minimale
  • Principes heuristiques pour les interfaces mobiles
  • Concevoir pour la lisibilité - Un guide de la typographie Web