UX DESIGN — BEST PRACTICES & TRENDS 2019. – Work in progress

Cette page est régulièrement mise à jour par l’équipe UX design de ICP Consulting et Qualia Systèmes pour ses collaborateurs et pour ses clients

Voici quelques best practices et trends qui animent notre vision des projets que nous accompagnons.
  1. PENSER UX FIRST
  2. CONCEVOIR MOBILE FIRST
  3. DEFINIR SON DESIGN SYSTEM
  4. DESIGN GRAPHIQUE — FLAT / PROFOND ET ANIMÉ — TREND 2019
  5. SOIGNER LA NAVIGATION
  6. UNE DEMARCHE VOLONTAIRE
  7. TESTER
LE MEILLEUR INDICATEUR ?
Si un tuto est nécessaire, tout est à refaire !

1 - UX FIRST

Ce n’est pas ce que vous voulez dire qui compte mais ce dont vos publics ont besoin. La 1ère best practices “UX design” est de rendre préférable une situation existante pour l’utilisateur.

La SNCF l’a compris à ses dépens lors de l’arrivée de Captain Train dans son écosystème.

Le site de la SNCF en avril 2009 :

Une interface orientée “proposition commerciale”

Captain Train arrive avec une interface “fonctionnelle” simplissime répondant aux attentes des publics voulant acheter et gérer leurs billets de trains.

Depuis 2012, elle n’a pratiquement pas bougé même après le rachat par TrainLine :

La SNCF a eu le talent de réagir rapidement à cette intrusion dans son écosystème.

Le site Voyage SNCF en 2014 :

Ecouter ses publics et identifier leurs douleurs fonctionnelles est la première best practice pour la conception ou la refonte d’un dispositif interactif.

Nous sommes entrés depuis maintenant 10 ans dans une nouvelle économie de l’attention et l’enjeu est d’immédiatement capter l’attention de nos publics.

La recette est simple et c’est Seth Godin qui nous la donne :

2 - MOBILE FIRST

Ce n’est seulement parce que l’usage du mobile est aujourd’hui largement majoritaire qu’il est nécessaire de concevoir “mobile first”. 
C’est aussi parce que la simplicité d’usage est imposée par la taille de l’écran et l’usage en mobilité.

Si l’UI de la version mobile de votre interface est fluide et simple, votre version web “élargie” en profitera nécessairement.

Cette approche Mobile first vous permettra de mieux gérer vos priorités et celles de vos publics.

https://endirectavec.preventionbtp.fr/

3 - DEFINIR SON DESIGN SYSTEM

Toujours dans cette logique de simplifier la tache aussi bien de ceux qui vous lisent et qui utilisent vos fonctionnalités que de ceux qui les conçoivent (UX / UI et tech), un design system a pour ambition de proposer une approche modulaire de la conception.

Un “design system” est une bibliothèque de composants qui définit les éléments fondateurs du system :
- la ligne graphique (univers et règles colorielles, principes typographiques et iconographiques) 
- les modules et les grilles permettant d’encapsuler les différents types de contenus en faisant du responsive design une contrainte incontournable. 
- les principes éditoriaux (tonalité et formats d’écriture) 
- Les principes UI (élements structurants — Header / footer / principes de navigation / responsive / …) 
- Les principes d’interaction : Animation des interactions

L’ambition est double : 
- simplifier la lecture en créant un univers référent cohérent entre toutes les parties du site et de l’application > ne pas réapprendre à chaque site
- simplifier la conception aussi bien en design qu’en développement en définissant des modèles réutilisables

Certains acteurs de l’internet on fait de leur design system un acte de communication en le mettant a disposition de tous.

Google — Material design 
IBM — Carbon Design System
Microsoft — Fluent design system 
AirBNB — AirBNB design 
et d’autres exemples : https://designsystemsrepo.com/design-systems/

Pour approfondir le sujet :
https://newflux.fr/2017/10/23/savoir-design-system/

et pour rencontrer la communauté des praticiens : https://www.meetup.com/fr-FR/DesignSystemsFrance/

4 - TREND 2019 — DESIGN GRAPHIQUE — FLAT / PROFOND ET ANIMÉ

Mais avant, un peu d’histoire du design des interfaces.

2007 - SKEUOMORPHISME

Tout commence avec les premiers smartphones avec des écrans tactiles. Pour permettre aux publics concernés de comprendre rapidement les fonctionnalités proposées, les designers ont simplement transposé sur l’écran ce qui se passe dans la vraie vie. On appelle ça le Skeuomorphisme.
Cette étape a permis une accélération de l’appropriation par les publics de cette incroyable innovation :

Sur un écran :

Un bouton est un bouton

Un micro est un micro

Une bibliothèque est une bibliothèque

Pour approfondir : https://www.lunaweb.fr/blog/skeuomorphisme-flat-design/

2010 - FLAT DESIGN

Microsoft à l’occasion de Windows 8 puis 10 innove en matière de design considérant que la maturité des utilisateurs les autorise à simplifier les interfaces

.Microsoft invente le concept de Flat Design

Le principe est de supprimer toutes les “fioritures” inutiles et surtout très lourdes à transporter. Fini les images complexes, fini les ombres inutiles. Le principe est de rationaliser au maximum le rôle fonctionnel de l’image.

Du Skeuomorphisme au Flat design
Moder UI — le design systeme de microsoft en 2010

Le succès du Flat design tient à sa simplicité aussi bien pour les utilisateurs que les concepteurs et les développeurs.

Le Flat design s’incarne dans le premier Design System : Modern UI conçu par Microsoft.

2014 - MATERIAL DESIGN

Après quelques années de Flat design, très simple et très fonctionnel, les marques ont identifié le besoin de créer des univers différenciants tout en respectant les attendus d’origine du Flat design.

L’écosystème a également évolué. Les tuyaux se sont élargis, la vitesse de connexion s’est améliorée et les capacités des terminaux ont considérablement augmenté.

C’est l’occasion pour l'UX design d’introduire une idée nouvelle : l’animation des interactions. La profondeur des interfaces devient un outil nécessaire pour créer des couches.
C’est Google, avec le marterial design qui pose les premières briques de ce qui constitue les tendances de fond depuis quatre ans.

TRENDS 2019 
Depuis 2 ans, on assiste a une sophistication des proposition de design system.

On peut se poser la question de l’efficacité au profit d’une créativité

1 — Asymetric design et Broken Layout

Autre exemple : WebFlow est un CMS d’interactions asymétriques 
https://webflow.com/

2- Typographies XXL

2019 sera l’année des rédacteurs et c’est une bonne chose. Le graphisme sans le sens est est de moins en moins opérant.

C’est à ce titre que l’on voit refleurir les dispositif de communication centrés sur le fond …

Et de fait, place au typographies XXL pour redonner de la visibilité aux mots et au sens.

http://www.sevenhillswholefoods.com/experience/#/

5 - SOIGNER LA NAVIGATION

Maitriser la raison d’être de son site et donc la nature des attentes de vos publics, ce qui assurera votre fréquentation et surtout la récurrence des visites est la meilleure manière de construire son site et sa navigation.

Une navigation simple, fluide mais aussi incitative.

Bel exemple sur le site du groupe AXA : www.axa.com

6

6 - UNE DEMARCHE VOLONTAIRE

Communiquer c’est choisir et choisir c’est renoncer !

Ne tentez pas de tout dire sur votre vitrine ! 
Concentrez-vous sur l’essentiel pour capter l’attention de votre public … soyez en phase avec la raison de sa visite …

Rien de plus frustrant que de ne pas trouver ce que l’on cherche. 
Bon, je vous l’accorde, on n’est pas obligé d’adopter la position ultra radicale de GE (et encore, dans le cas de GE et de la complexité de son offre corporate, cela se justifie)…

Votre visiteur ne vient pas chez vous par hasard. Il doit, en un coup d’oeil, à la fois être sûr d’être au bon endroit (sur le bon site — rôle de la marque) mais aussi être sûr qu’il va trouver ce qu’il cherche (navigation évidente).

Rassuré, il devient disponible à une éventuelle “interpellation”.
Finalement, les sites qui veulent tout dire tout de suite ont un effet distrayant.
Et la distraction est le mal de notre siècle.

Quand votre site est serviciel, il est indispensable d’aller droit au but !

D’ailleurs les nouveaux acteurs en ont fait un pre-requis qui est devenu une règle. Donnez la main à son “visiteur”.

Pour les sites corporates, le principe est de profiter de ces quelques secondes d’attention pour engager une conversation de sens en portant haut et fort une raison d’être ou une preuve de cette raison d’être.

En ce qui me concerne, en matière de corporate, je trouve que AXA fait parfaitement le boulot : 
- de nombreuses preuves, toujours incarnées par ceux qui les ont portées ou vécues. 
- une raison d’être et l’engagement qui va avec …

Bref, nous sommes très fiers d’avoir accompagné le cadrage de ce projet.