Les tendances UI / UX de 2019

Titouan Olivier
Aboutgoods Company
Published in
17 min readJan 28, 2019

Cet article a été publié à l’origine en anglais par Moses Kim. Merci à lui d’avoir accepté qu’on le traduise. Bonne lecture !

Scenery Illustration par J.HUA

L’année dernière, nous avions déjà établi une prévision des tendances du design d’UI mobile. Cette année, nous allons plus loin que le mobile. La tendance numéro une du design moderne est le contexte et il n’y a plus de vraiment de généralisation. Tout doit être analysé avec son contexte et avec son environnement.

Il semblerait que nous commençons à avoir une bonne compréhension de la façon dont les utilisateurs utilisent les produits grâce aux nouveaux outils et aux progrès technologiques.

A l’avenir, nous développerons un état d’esprit de conception universelle que nous utiliserons pour tout ce que nous produisons, même ce que nous ne vendons pas. La façon dont nous faisons les choses pour nous-même nécessite de meilleurs choix de conception. La façon dont nous communiquons peut elle aussi être améliorée. Malgré tout, encore loin d’être à notre plein potentiel, voyons ce que 2019 nous réserve dans le domaine de l’UI et de l’UX design.

De puissants navigateurs

Le navigateur n’est pas seulement le moyen d’aller sur internet, c’est aussi un moyen d’obtenir de la visibilité. Les navigateurs deviennent plus rapides, plus puissants et plus attrayants.

  • Les navigateurs les plus utilisés du marché ont des performances qui s’améliorent considérablement selon les derniers tests et benchmarks.
  • Amélioration de la vitesse de chargement grâce à la compilation en streaming. Selon Mozilla, le nouveau compilateur est 10 à 15 fois plus rapide que le précédent
  • Les navigateurs récents supportent WebGL 2 qui permet un tout nouveau niveau de rendu 3D des textures et des objets.

Les fonctionnalités des navigateurs web et mobile comblent le fossé entre le design conceptuel et la réalité.

Evolution des technologies du web. Malheureusement evolutionoftheweb.com n’est plus mis à jour depuis 2012 😑

Mais le problème est que la plupart des progrès des navigateurs continuent de promouvoir leur propre produit sans avoir d’impact sur le secteur en général. Parce qu’il se passe tant de choses sur le web, il est difficile pour les développeurs de navigateurs de trouver des solutions universelles et d’améliorer les standards d’internet.

Les navigateurs peuvent être des outils géniaux, mais s’ils permettent d’accéder à de mauvais sites, ils seront détériorés par de mauvaises UX. Nous devons proposer de meilleurs choix de conception pour développer pleinement le potentiel actuel des navigateurs web.

De nombreux sites font passer les navigateurs pour des mauvais logiciels.

Des animations utiles

Entre autres, de nouvelles fonctionnalités des navigateurs ont ouvert la porte aux animations. Pas seulement comme le mouvement des éléments, mais comme une opportunité nouvelle de design. Le domaine, connu sous le nom de motion design implique beaucoup d’aspects du design mais se recoupe également avec la psychologie et la biologie.

Nous pensons que ce domaine va s’approfondir encore davantage en 2019. La complexité est maintenant à la mode et devient la caractéristique principale de l’animation en design. Les mouvements et les transitions transmettent beaucoup d’informations qui, sans eux, seraient perdues.

Les transitions entre les pages étaient autrefois un no-man’s land. C’est dorénavant un nouveau terrain de jeu pour les designers.

Page de présentation de l’artiste du blog créatif Cocoladas par Zhenya Rynzhuk

Impliquer un utilisateur plus profondément signifie rester avec lui à chaque instant de l’interaction pour l’accompagner et faire en sorte que chaque seconde compte. Les designers doivent saisir cette opportunité dès maintenant avant que le marketing ne s’en empare.

Le motion design ne se limite pas à la simple présentation des éléments et au comblement des temps de chargement. Il fait maintenant partie intégrante de la stratégie de marque. Pourtant, beaucoup de logos sont encore statiques. C’est notre imagination et notre expérience qui les font vivre. Pourquoi ne pas puiser dans cette imagination et s’assurer qu’elle s’oriente dans la bonne direction ?

Fuck d’Eduard Mykhailov

Si vous n’avez pas encore réfléchi à la composition de votre logo, aux émotions qu’il procure, au goût, à l’odeur et aux sons, c’est le moment de le faire.

Le mouvement parle mieux que la composition, le positionnement et la texture. Il raconte une histoire. Si vous pouvez faire de votre logo une partie intégrante de votre histoire en y réfléchissant un peu, il serait pertinent de le faire.

Lakko — Animation du logo par Zlatko Kelemenić

Il est important de se rappeler qu’il y a un contexte pour tout, y compris l’animation. Ce que vous voyez en tant que designer n’est pas ce qu’un client voit en tant que… client. Si le produit que nous concevons est lié à des situations catastrophes, nous ne pouvons pas nous permettre d’implémenter des animations, même si elles sont significatives. S’il y a une contradiction émotionnelle, restez toujours neutre.

N’animez pas avec un enthousiasme insouciant.

Interfaces en 3D et deep flat

Le rendu 3D d’images réelles en images de synthèse existe depuis un certain temps déjà. Pour des raisons de rapidité et de performance, mais aussi d’accessibilité, les concepteurs ont l’habitude d’éviter les modèles 3D complexes dans les interfaces utilisateur. Les nouveaux navigateurs ont fait de ce luxe une fonctionnalité désormais abordable. Des effets visuels très complexes font entrer des scènes de cinéma dans le domaine du web.

Les graphismes 3D dans les interfaces mêlent réalisme et animation numérique.

Cette tendance sera particulièrement utile pour les sociétés dont les produits et les processus sont complexes et peu visuels. En utilisant la visualisation 3D, n’importe quel processus technologique peut bénéficier d’un support visuel et ainsi créer un niveau de compréhension plus développé.

Baker Hughes Digital par Sanu Sagar

Ces images fonctionnent bien dans les films et les jeux vidéo car la durée d’affichage est très courte. Ils demandent seulement une impression superficielle et non pas une évaluation longue et minutieuse. Combinée à une animation pertinente, la 3D devient un outil de design puissant.

L’industrie mobile, grâce à de nouvelles puces plus puissantes a permis non seulement de faire des rendus d’objets 3D mais aussi de les utiliser au sein de l’interface. Les petits écrans sont parfaitement adaptés pour cela.

Transitions de cartes en 3D par Gleb Kuznetsov
Menu de navigation 3D par Minh Pham

Le design d’UI flat est une tendance dominante depuis plus de 5 ans et n’a pas vraiment évolué. Dernièrement, nous avons été témoins d’une nette tendance à ajouter de la profondeur et de la dimension au flat design sans en changer l’idée principale. La profondeur est nécessaire car nous avons besoin de symbolisme pour donner du sens au design. C’est d’ailleurs pour la même raison que le flat design a vu le jour car c’est certainement le style qui offre le plus de symbolisme.

Le deep flat est le nouveau flat design

La combinaison de la 3D et de l’infographie a révélé une réactivité des utilisateurs à interagir avec des objets réalistes. Le flat design est également capable de le faire d’une manière unique et encore inexplorée. On appelle cela la 2,5D (ou pseudo 3D). Ce sont des couches plates qui s’empilent pour créer un effet tridimensionnel. L’intérêt principal d’ajouter une dimension au flat design est l’ajout d’ombres, de lumières et de reflets.

ARTA / Art Gallery par Mike | Creative Mints

Il y a aussi une tendance à la hausse de la fausse 3D qui utilise des outils de conception classiques comme Principle et After Effects pour créer des motifs de mouvement simulant la 3D.

Astronaut par Markus Magnusson

En 2019, nous pourrions même assister au retour du skeuomorphisme d’une nouvelle manière. Si le flat peut être profond, il peut aussi être isométrique. Conserver un symbolisme plat tout en puisant dans une vision réaliste est une tendance à explorer.

😑

Mais nous allons bien finir par manquer d’options. Déjà, il n’y a pas de direction précise vers laquelle les interfaces utilisateur 3D convergent. Cela va dans les deux sens — simplification et sophistication. S’il faut plus d’efforts technologiques pour nous impressionner, il faut tout autant de courage pour supprimer la complexité des designs et déployer un concept atypique. Cependant, si les interfaces les plus complexes manquent de sens ou si les idées les plus audacieuses ne sont qu’une façade, tous les efforts réalisés seront vains.

On peut maintenant faire des images impressionnantes. Il est temps de les remplir de sens et d’aborder des questions plus profondes. Comment pouvons-nous y parvenir ?

Design surréaliste

Toutes les possibilités de design 3D et de motion design offertes par de meilleures technologies ne signifient rien si elles ne parviennent pas à susciter un impact émotionnel. Ironiquement, vous n’avez pas besoin de complexité pour avoir le plus d’impact possible. La raison pour laquelle l’attitude des rebelles a toujours été un miroir des tendances dominantes est son attrait naturel.

Nous avons besoin de quelque chose pour équilibrer le bon sens, besoin d’un diablotin sur notre épaule, et parfois, nous sommes joueurs.

Certaines des plus grandes campagnes de refonte et les illustrations associées sont se avérés très originales :

How to stay scrappy par Justin Tran pour Dropbox Design
Shop Small par Joe Montefusco pour Mailchimp

Ce style d’illustration cartoon n’a qu’un seul but — maintenir une certaine fraîcheur. Lorsqu’un produit est basique, il y a un intérêt sans fin autour de lui. Peu importe à qui cela s’adresse, il peut être bizarre ou même laid sans que ça ne pose de problèmes. Il faut s’attendre à voir plus de ce type de design avant-gardiste et surréaliste en 2019.

😑

Mais toutes les entreprises et tous les produits ne peuvent pas se permettre cette fantaisie. Plus le public est large, plus le design doit être neutre. Même si cela peut fonctionner pour les marques établies, les petites entreprises et celles qui ont de la difficulté à s’exposer devront faire preuve de prudence et s’en tenir aux points classiques.

Construisez d’abord votre clientèle, emmenez-les rêver ensuite.

Dégradé 2.0, couleurs vives et sombres.

Les nouveaux écrans ont un excellent rendu des couleurs. Ils le montrent souvent au travers de leur fond d’écran par défaut d’ailleurs. Les designers explorent les limites de l’accessibilité et des dégradés impressionnants dans leurs interfaces.

Les dégradés ne sont plus utilisés pour se distinguer, ils apportent désormais profondeur et dimension à l’interface.

Grabient 2.0 par Eddie Lobanovskiy

Le dégradé 2.0 est subtil et simple. Il n’utilise pas de couleurs contradictoires. Il a une source de lumière claire et s’aligne avec les formes pour apporter de la profondeur.

Les couleurs vives ne sont plus à la mode. Nous verrons plus d’effets de couleurs combinées. Finalement, même une palette monochrome présentera une sorte d’esthétique visuelle par sa profondeur et son dimensionnement.

Valley Illustration par J.HUA for Tunan

Nous manquons de confiance et d’optimisme globalement. Les couleurs flamboyantes favorisent la positivité. Feriez-vous confiance à une application de crypto comme celle-ci ?

Crypto app par uixNinja

Ce qui est positif c’est que les couleurs vives et les dégradés importants se distinguent mieux sur les fonds sombres. Les thèmes sombres deviennent la norme et ils ne feront que se démocratiser dans l’avenir. Ici, ils ont adopté une approche anthropologique pour comprendre les thèmes sombres et pourquoi ils sont populaires. Ceux qui trouveront l’équilibre entre accessibilité de l’interface sombre et réponse émotive de couleurs éclatantes seront au top l’année prochaine.

Deep flat, couleurs et 3D dans l’obscurité.

Dashboard by uixNinja

😑

L’accessibilité n’est pas le seul problème avec les dégradés, les couleurs et les thèmes sombres. Les couleurs vives sont traditionnellement utilisées pour de l’accentuation. Quand tout est coloré, comment pouvez-vous accentuer un élément ? Tous les utilisateurs n’ont pas d’écrans OLED, certains dégradés peuvent donc être perdus. Trop de contraste peut gêner la concentration de l’utilisateur. Les thèmes sombres fonctionnent moins bien en journée ensoleillée par exemple. Mais globalement, ils sont intéressants.

Polices variables

Traditionnellement, les polices sont perçues comme des entités statiques avec un ensemble limité de paramètres ajustables. Les designers et les rédacteurs doivent tenir compte de la lisibilité selon la hauteur du trait et de la largeur des lettres.

Chaque fois que le design nécessite plusieurs polices, les designers doivent fournir tous les fichiers pour les styles utilisés. Vous ne pouvez donc pas vous lancer pleinement à faire la typographie d’un produit si vous ne couvrez pas tous les aspects. Avec les polices variables, vous n’avez besoin que d’un seul fichier car elles fournissent un nombre infini d’ajustements de hauteur et de largeur des lettres.

Les polices variables peuvent couvrir n’importe quelle partie de l’espace restant pour le texte.

Marvin Visions

Les polices variables se distinguent dans la conception de design responsive et personnalisés. Par exemple, dans certains projets, les designers ont travaillé pour adapter le texte à des écrans plus petits sans perdre l’essence du design ou sans l’étirer pour une langue différente qui utilise moins de caractères.

VOTE de Josh Rinard

Lorsque les polices web ont été introduites, l’aspect responsive leur manquait. Le manque de flexibilité a entraîné des problèmes de lisibilité et un mauvais alignement du design lui-même. Les polices variables sont assez récentes et aident à fournir des polices pour le Web plus rapidement et à rationaliser le processus de conception en général.

Ce n’est que le début. Les options artistiques des polices responsive restent à explorer en 2019.

Typography.Guru

😑

Mais combien de temps avant qu’une police intelligente et ajustable ne devienne un moyen de promouvoir une vente ? Si vous pouvez faire en sorte que votre texte réponde aux subtilités de chaque contexte possible, comment protéger un lecteur contre la manipulation ?

Figma

Aujourd’hui, nous continuons de nous poser toujours la même question : “Les designers ont-ils besoin de coder ?”, ou encore “les développeurs ont-ils besoin de connaissances en UX ?” Le raisonnement est simple : éviter les difficultés et les divergences dans la mise en œuvre de la conception. Si se simplifier la tâche est une objectif , il faut aussi penser au déroulement pour y parvenir

Apprendre à coder est une option rationnelle. Si vous êtes celui qui développe ce que vous avez imaginé, vous évitez un tas de problèmes. Cependant, la quantité de travail que vous devez effectuer pour être un designer pertinent et un développeur performant est importante. Vous pouvez le faire ? C’est tant mieux pour vous. Pour ceux qui ne le peuvent pas, il y a d’autres options.

Le but n’est pas de faire de vous un designer universel. Il s’agit de fabriquer de meilleurs produits, avec enthousiasme.

Une autre façon d’atteindre cet objectif est d’utiliser et de promouvoir de meilleurs outils. Figma est l’un d’entre eux. Auparavant, les designers devaient prendre en compte de nombreuses variables comme le système d’exploitation, l’intégration, les plugins, le stockage, la synchronisation, la collaboration, et enfin, le moyen d’assembler le tout en un seul et même endroit. Ceux qui ont développé un workflow efficace méritent tout notre respect, mais aujourd’hui, cela semble dépassé.

Totally switched to Figma par Alexey Kolpikov

Figma est un outil de conception développé par des designers pour des designers. En proposant de nombreuses fonctionnalités il était accompagné de beaucoup de scepticisme.

Figma a détruit Sketch

Figma fait tout ce que Sketch et Adobe XD font mais en mieux. Plus important encore, Figma vise à designer ce qui sera implémenté. Chaque composant Figma peut être transformé en composant React via l’API et implémenté sur le front end. Jusqu’à présent, Figma a battu la concurrence en terme de coût, de vitesse, de collaboration, de partage, d’intégration, de support, etc. Cela dit, Figma est encore en développement et en 2019, il y aura certainement d’autres nouveautés.

😑

Mais chaque fois que nous développons de meilleurs produits et que nous ne parvenons pas à l’utiliser en respectant les règles, nous contribuons à notre décrédibilisation. Twitter par exemple lutte pour récupérer une bonne réputation. 2018 a été l’année où les responsables d’entreprises technologiques devaient s’expliquer devant les tribunaux. En effet, il ne suffit pas de mettre des outils sur le marché et de les laisser se réguler, il faut aussi surveiller la manière dont les gens les utilisent. Figma protégera-t-il les utilisateurs contre les mauvaises intentions d’UX, les mauvais design et les fake news ?

L’interface vocale

Le design n’a pas besoin d’être visible ou visuel pour fonctionner. Avec l’expérience, nous avons réalisé que le choix des outils n’a pas vraiment d’importance si nous construisons des expériences intangibles. Concevoir une UI logique, c’est faire fonctionner la psychologie de l’utilisateur. Construire des commandes vocales, c’est traiter avec le langage naturel.

L’interface vocale est aussi sensorielle que sophistiquée

L’interface vocale applique le concept de l’absence d’IU à son apogée. Le processus est interne et ressemble plus à de l’écriture, de la construction, de la contextualisation et de la synthétisation de données, qu’à du design. Malgré cela, les designers sont obsédés par la recherche de représentation de l’interface vocale. Principalement par le biais d’interfaces et d’animations impressionnantes du genre minority-report.

Organic Artificial Intelligence design par Gleb Kuznetsov

La plupart du temps, ils n’ont rien à voir avec la réalité des interfaces vocales, mais ils préparent l’utilisateur à l’absence de contrôles et lui apprennent à traiter une technologie qui n’en a pas.

En 2019, nous pouvons espérer assister à l’approfondissement des connaissances en matière d’interface utilisateur vocale et d’une transition entre simple esthétique visuelle à une expérience utilisateur significative.

😑

Mais le plus grand défi avec les UI vocales n’est pas, ironiquement, l’interaction d’homme à machine, mais celle d’homme à homme, par le biais d’une technologie qui doit être plus intelligente que les deux. Nous vivons dans une société mondiale profondément déséquilibrée. Nous nous efforçons de nous comprendre les uns les autres à tous les niveaux, y compris sur le plan technologique. Les téléphones, les voitures et les maisons à commande vocale, pourraient bien continuer de creuser l’écart entre nous.

En tant que designers, nous devrions toujours considérer le bien-être de l’humanité comme notre priorité absolue. Si la technologie, même bien conçue, sert les uns aux dépens des autres, il faut s’y attaquer sans relâche. Cela n’arrivera pas.

Ecriture et édition d’expérience utilisateur

L’année dernière, les designers ont commencé à prêter attention à la signification des mots qu’ils utilisent. Les rédacteurs de fiction, ou encore les journalistes ont désormais un nouveau domaine pour mettre à profit leurs compétences. Cela mêne donc à définir le rôle de l’écriture dans le design :

Vous devez contrôler la façon dont votre entreprise communique avec les clients.

Par le passé, il y avait un mélange de baratin narcissique pompeux et de terminologie technique. Ce qu’une entreprise faisait était confondu avec la valeur qu’elle pouvait donner à ses clients. Même si les entreprises étaient excellente, elles ont souffert de l’absence d’un vocabulaire cohérent, simple et persuasif à utiliser avec leur audience.

L’écriture pour une bonne expérience utilisateur est basée sur deux principes simples : être respectueux et utile. Tout le reste découle de ces principes. Être concis, c’est respecter les gens suffisamment pour valoriser leur temps davantage que le vôtre. Etre clair, c’est éviter d’être double et c’est se protéger des mauvaises expériences en étant utile. Etre expressif, c’est être honnête et ne pas cacher les défauts. Concentrez-vous toujours sur aider l’utilisateur en premier et ne montrez pas votre éloquence, ne la recherchez pas et n’utilisez pas les clichés marketing.

L’écriture d’UX est facile une fois que vous adoptez le respect et l’utilité.

Les gens ne veulent pas que vous changiez ou que vous vous fassiez de l’auto promotion. Ils veulent savoir comment vous pouvez les aider grâce à votre service.

En 2018, nous avons assisté à une amélioration notable de la conception vocale dans les grandes entreprises. Ils sont moins concentrés sur l’innovation pure mais de plus en plus sur l’augmentation de la valeur pour le client. En 2019, nous sommes prêts à voir se développer le design d’interfaces vocales en tant que nouvelle discipline de l’UX.

Il y a une différence importante entre l’écriture UX et l’édition UX. Les rédacteurs UX produisent du texte orienté utilisateur. Les éditeurs d’UX quant à eux analysent et transforment n’importe quel texte pour en un simple texte humain. Il n’y a pas de formation pour l’édition d’UX. C’est de l’expérience, de l’observation et de la bienveillance.

Chaque grande campagne de refonte en 2019 nécessitera un éditeur d’UX

😑

Mais chaque tendance passe par une série d’étapes. Le premier est le scepticisme, puis la fascination, et enfin l’ennui. La fascination est la plus dangereuse parce qu’elle devient souvent incontrôlable. Elle peut transformer l’idée en caricature et en altérer sa valeur. C’est la même chose pour l’écriture UX. Quand être simple est confondu avec abaisser la qualité, être clair devient insolent, être persuasif devient condescendant.

Il y a encore de la place pour l’écriture créative dans la conception de produits mais pas forcément là où il y a une interaction avec un utilisateur. Par exemple, Nike et Boeing travaillent avec des auteurs de science-fiction pour imaginer l’avenir.

Product designer comme intitulé de poste

L’UX design est un terme très large. Il s’agit d’une partie du design des services dans tous les secteurs. En conséquence, les designers et les bureaux d’études rassemblent des portefeuilles de projets très variés allant de simples applications à des plates-formes complexes pour les fintech.

Le design de service est universel. Il peut couvrir tous les secteurs et domaines et il est possible d’appliquer ce qui fonctionne partout.

Les designers ont leur propre style qu’ils peuvent appliquer aux produits sur lesquels ils travaillent. C’est pour cela qu’ils sont uniques et que les entreprises sont prêtes à payer pour leurs services. C’est comme acheter des pièces chez un fournisseur de confiance.

Cependant, la plupart des entreprises sont des entreprises de produits et elles pourraient avoir besoin d’un niveau de compréhension plus approfondi de la part d’un designer. Ces entreprises ont besoin d’une personne qui s’intègre parfaitement à l’équipe, qui dispose de toutes les données disponibles et des bons outils pour avoir une vraie influence sur le système dans son ensemble.

L’avantage de la conception de produit par rapport à la conception de service est la possibilité de tester les décisions de design en direct.

Les designers produits ont la possibilité de se concentrer sur les spécificités du produit sur lequel ils travaillent et de ne pas avoir à se préoccuper du reste. Ils sont bien informés sur les caractéristiques démographiques de leurs clients et disposent de données réelles sur lesquelles ils peuvent s’appuyer, contrairement aux présomptions avec lesquelles la plupart des designers de services doivent travailler.

Landing page d’un coussin “innovant” par Sasha Turischev

😑

Mais la transition vers le design de produits demande de la volonté. En risquant de plonger dans une industrie ou un produit spécifique, nous faisons un choix potentiellement irréversible. Dans ce cas, la décision doit être réfléchie. Il faut donc tenir compte de de la viabilité de l’industrie et des perspectives d’avenir professionnel qu’elle offre.

La chance sourit aux plus courageux et en 2019, nous verrons de plus en plus de designers se spécialiser et sacrifier leurs compétences universelles. L’avenir nous dira s’ils ont fait le bon choix ou non.

Enfin, la grande tendance que nous commençons à remarquer est un glissement progressif vers l’honnêteté et l’éthique. Il n’y a plus vraiment de tricheries qu’on peut utiliser. Rien ne vaut les bonnes intentions.

--

--