Tendances de conception UX et UI 2022
Il vous suffit de revenir sur des interfaces Web et mobiles plus modestes (et plus maladroites) pour réaliser le chemin parcouru. Les concepteurs UI et UX innovent constamment, offrant des expériences plus positives et facilitant davantage de réussite commerciale au fur et à mesure.
Alors, quelles tendances UX et UI avons-nous vues jusqu’à présent en 2022, et vers quoi de plus nous dirigeons-nous cette année ? Nos experts sélectionnent sept tendances à surveiller.
1. Animation subtile
Un mouvement subtil peut être un moyen simple de rehausser une page Web autrement fatiguée, et récemment, nous le voyons de plus en plus dans des conceptions sur des sujets généralement arides (pensez à la finance, aux soins de santé ou aux services de ressources). Bien sûr, il est important d’atteindre l’équilibre et de s’assurer que le mouvement ne domine pas ou ne distrait pas la page.
« En 2019, l'animation a peut-être été un peu surutilisée », déclare Stephen Cronin, spécialiste du contenu d'Envato pour les sites Web et les thèmes. "J'espère qu'en 2020, il sera utilisé de manière plus intelligente, avec une animation plus subtile pour soutenir l'engagement des utilisateurs et une animation plus évidente pour attirer l'attention sur un ou deux appels à l'action."
Page de conseils de carrière de SEEK montre une animation subtile en action, utilisant une idée simple et directe pour ajouter du plaisir et du dynamisme à une page de navigation autrement prévisible.
Avec un modèle HTML personnalisable comme Lums par Layerdrops, qui comprend des pages de destination, des pages intérieures, un curseur de carrousel et une animation CSS3, vous pouvez commencer à tester ce qui fonctionne.
2. Neumorphisme
Il est arrivé en grand au cours des premiers mois de 2020 et continue de faire l’objet de beaucoup de battage médiatique. Mais qu’est-ce que le neumorphisme ?
Tout d'abord, le mot lui-même : c'est un jeu de mots entre « nouveau » et « »skeuomorphisme', ce dernier étant un terme utilisé dans la conception de l'interface utilisateur pour décrire des éléments de conception qui ressemblent à leurs homologues réels, par exemple l'interface de la calculatrice de votre ordinateur ou une disquette pour représenter « enregistrer ». C’est Apple qui a été le premier à défendre les conceptions skeuomorphiques sous le règne de Steve Jobs, avant d’annoncer le déclin du skeuomorphisme à mesure que ses logiciels mobiles post-2013 se simplifiaient progressivement.
« Le neumorphisme combine le meilleur du design plat et du skeuomorphisme ; nous parlons d'interfaces épurées, dotées d'une grande solidité grâce à une utilisation intelligente des hautes lumières et des ombres, » écrit Jim McCauley sur Creative Bloq.
L'utilisation intensive d'ombres douces dans la tendance donne un design à la fois futuriste et réaliste, et apporte une nouvelle sensation aux interfaces familières. Cependant, le défi pour les designers qui adoptent cette tendance résidera dans son aspect pratique, comme Uyen Vicky Vo écrit sur UX Collective, neumorphisme et accessibilité ne vont pas intrinsèquement ensemble.
Expérimentez avec 26 éléments inclus dans le Kit d'interface utilisateur neumorphique par cerpow ou le super-flexible « Interface utilisateur neumorphique pour Smart House » par merkulove, tous deux disponibles sur Envato Elements.
3. Grandes images
Plus c'est grand, mieux c'est, et cela s'améliore en 2020. Même si l'illustration reste également au premier plan de la conception de sites Web, là où l'illustration n'est pas utilisée, ce sont les images qui apparaissent comme l'attraction principale. Et ils sont utilisés intelligemment, que ce soit comme arrière-plans complets et subtils ou comme centres de table saisissants.
« En 2020, il est indispensable d'avoir une sorte d'image (ou de vidéo d'arrière-plan) sur votre site Web, et plus c'est grand, mieux c'est », explique Stephen.
Pour les arrière-plans, pensez à un design minimaliste comme le tranquille Modèle Lana pour les pages « à venir » par Erilisdesign. Ou testez quelque chose de plus dynamique, comme Rideo par codecarnival, un modèle de commerce électronique pour le vélo de montagne.
4. Briser les règles de conception
Bonne nouvelle pour les anarchistes parmi nous : 2020 pourrait être le moment de jeter les règles par la fenêtre.
« Brisons cette grille et optons pour une disposition asymétrique. Utilisons une police sauvage qui n'est pas aussi lisible. Incluons des éléments dessinés à la main. Mettons certains éléments au-dessus d'autres, en les masquant », suggère Stephen (chaque fois que cela n'affecte pas de manière significative la convivialité).
Cette tendance se mêle aux tendances de design émergentes comme l'esthétique du street art et la résurgence du style brutaliste anti-design (vu dans des choses comme Modèle HTML Bootstrap brutaliste par mp-web sur ThemeForest).
"Je pense qu'il s'agit d'une tendance importante", déclare Tahlia Giannopoulas, conceptrice d'expérience utilisateur chez Envato, "car elle remet en question le beau design et pousse les gens à créer quelque chose d'engageant qui n'est pas conventionnel."
5. Polices variables
Les typographes se réjouiront de cette astuce : ne sous-estimez jamais la bonne police dans votre design UX. Une police variable est un fichier qui vous offre de nombreuses options : permettant d'obtenir différentes apparences avec des options d'espacement, de poids et de largeur, et conduisant à des performances améliorées et à des transitions plus fluides entre les styles.
« Avec l'amélioration de la prise en charge des navigateurs, 2020 pourrait être l'année où les polices variables apparaîtront et deviendront monnaie courante dans les thèmes et les modèles », prédit Stephen.
Si vous êtes enthousiaste et prêt, essayez immédiatement de nouvelles polices, comme les polices en bloc et sans empattement. Fabrication par dafeld ou l'empattement de style victorien Figuera par Adamfathony.
Vous ne savez pas par où commencer ou souhaitez d’abord revenir à l’essentiel ? Les polices variables sont expliquées plus en détail, avec des exemples de polices et des instructions étape par étape sur l'ajout de polices variables à une page Web, dans ce document. Guide d'instruction.
6. Ramener l’humanité
C'est bien établi, et tout le monde (nous y compris) a continué à en parler, mais c'est parce que la tendance à revenir à des éléments plus humains dans le design s'est installée, et elle ne mènera nulle part.
« Les humains ludiques et diversifiés fonctionnent mieux », déclare Kate McInnes, spécialiste du contenu graphique d'Envato.
Des exemples peuvent être vus dans les identités de marques comme Chobani ou dans les illustrations utilisées par Mailchimp à la place des icônes et des indices de navigation fatigués (et elles s'inspirent également de notre tendance d'animation subtile susmentionnée).
« Nous avons vu la conception Web devenir plus élégante et plus brillante au fil des années, avec une sensation « numérique » distincte. Nous voyons désormais des marques ramener l'humanité dans la conception Web grâce à des illustrations, des icônes et des polices dessinées à la main, ainsi qu'à l'utilisation de textures et d'effets de grain », explique Camilla Anderson, designer numérique chez Envato.
Essayez des modèles comme Duduk de deTheme ou le Pages créatives ultimes 404 par UserThemes pour la taille.
7. Image de marque et direction artistique dans la conception UX/UI
En fin de compte, les concepteurs UI et UX sont experts dans l’art de rassembler divers éléments (images, texte, couleur, interaction) dans une conception cohérente pour réduire la distance entre l’écran et le client. Et de plus en plus, ces compétences ne proviennent pas nécessairement de personnes ayant une formation en technologie.
Chez Google, Jefferson Cheng et Emily Blank, qui codirigent le programme Material Design Imagery, ont récemment pris la parole sur L'approche de Google pour repousser les limites de l'UX typique.
"Nous ne prescrivons pas vraiment un style unique pour l'ensemble de Google", a déclaré Jefferson. Il a mentionné que souvent les artistes et les designers qui n'ont jamais travaillé dans le domaine de la technologie ont une approche unique et précieuse.
"Pour l'un de nos sprints de conception, nous sommes allés au Walt Disney Museum à San Francisco, et j'ai trouvé fascinant de voir comment, grâce à une variété d'éléments visuels et stylistiques, vous pouvez toujours distinguer un film Disney d'un autre film d'animation", a déclaré Emily. Blank dans la même interview.
Le message ici est assez clair : lorsqu'il s'agit d'UX et d'UI, il est très important d'être cohérent, distinctif et de continuer à évoluer.