L’UX au cœur des tendances web design de 2017

Qu’est ce que la User eXpérience ?

User eXpérience (ou expérience utilisateur) est un terme assez nouveau qui nous vient tout droit d’une ancienne méthode appelée « Design Thinking » et qui centre tout le design d’un site sur le bon confort de l’utilisateur. Son but est de répondre au mieux à ses attentes et de faciliter sa navigation. On synthétisera cette approche en évoquant que le travail d’un UX Designer est de créer pour des utilisateurs types, appelé Personas, le meilleur souvenir d’une expérience passée sur un site web.

La démarche UX se découpe en plusieurs phases :

• Recherche d’utilisateurs types comme vu ci-dessus et que l’on appellera Personas.
• Recherche d’une valeur ajoutée ou d’une réponse à un besoin. On peut (doit) ici faire de la veille pour chercher de nouveaux besoins ou des attentes qui ne sont pas encore parfaitement bien définis.
• Création de prototypes que l’on va aussi appeler Wireframes qui représentent une maquette fonctionnelle « non esthétique » du futur site que l’on fera préalablement tester à nos Personas pour relever des axes d’amélioration avant la…
• …réalisation de la maquette finale qui prendra en compte toutes les contraintes techniques des développeurs car sachez que les designers et les développeurs vont voir leurs relations devenir de plus en plus intimes.

Comme vous l’aurez observé, il ne faut surtout pas commencer par le design graphique. Jamais !

Une fois que la recherche utilisateur a été réalisée, que le produit répondant à une vraie valeur ajoutée a été décelé après un « Benchmark » et qu’enfin les prototypes liés à des parcours utilisateurs ainsi qu’à des interactions avec ces derniers ont été validés… qu’en est-il du Web Design ? Qu’est-ce qui marche ? Ne marche pas ou plus ? Et qu’est-ce qui marchera de plus en plus pour améliorer vos taux de conversion ? En gros, quelles sont les tendances graphiques pour cette nouvelle année 2017 ?

AVEZ-VOUS ENTENDU PARLER DE l’INBOUND MARKETING ?

On est sûr que oui. L’Inbound Marketing ou Content Marketing est cette méthode qui s’appuie sur la production de contenus à forte valeur ajoutée sur un site web optimisé. Son but est de diffuser des contenus au bon moment, destinés aux bonnes cibles.

Et bien justement, aujourd’hui on parie d’abord sur le contenu et sa mise en avant plutôt que sur l’aspect purement graphique d’un site Internet. Ce contenu, si vous avez suivi, devra donc être ciblé, synthétisé, lisible, compréhensible et enfin stylisé. Encore une fois, le style n’arrive qu’à la fin du processus.

Bon c’est bien joli, mais moi je suis Web Designer et là je ne vois pas bien comment je pourrais me mettre au goût du jour vu que la majorité du temps au lieu de mettre du contenu réel, j’utilise du faux-texte latin appelé « Lorem Ipsum ». Effectivement avant de concevoir une UI – pour User Interface, traduit en français par interface utilisateur -, il faut d’abord savoir pour qui nous la faisons et à quoi elle va servir. C’est seulement ensuite que vous devez connaître les nouvelles conventions actuelles.

UNE APPROCHE ORIENTÉE MOBILE FIRST

Aujourd’hui, et ce n’est pas seulement une tendance, les usages nous imposent de débuter toute conception avec une approche Mobile First.

En effet, en automne dernier (2016), la consommation Internet sur téléphone portable a dépassé celle des grands écrans (ordinateurs). Cette bascule faite, il est incontestable que de profonds changements dans la conception des interfaces actuelles sont nécessaires. On ne va pas parler de Responsive Design vu que c’est devenu depuis plus d’un an une obligation pour toutes les agences Web actuelles mais bien de transformations dans la navigation et la mise en valeur du contenu.

Comme vous pouvez le voir sur le visuel ci-dessous, le Mobile First Web Design, qui est privilégié aujourd’hui, possède des disparités avec le Responsive Web Design. On va d’abord concevoir des interfaces pour les petits écrans pour ensuite les décliner sur nos plus grands appareils. La démarche est beaucoup moins lourde aussi bien en amont, lorsque nous concevons nos prototypes, quand aval, pendant la face de développement du site. Les feuilles de style CSS vont se voir, grâce à cette technique, allégées en lignes de code.

Il est plus facile de rajouter du code que d’enlever du code en CSS. Un autre point positif du Mobile First, est la modélisation synthétique du contenu apportant une vrai valeur ajoutée aux internautes. Cela va mettre en évidence ce qui doit réellement figurer sur un site Internet de ce qui n’est que figuratif et redondant vis à vis d’autres sites concurrents.

Le design pour le mobile ainsi que pour tous ces nouveaux appareils connectés (ex : montres connectées) nous oblige à penser Design Pragmatique, un design adaptable suivant les différents écrans utilisés par les internautes.

Vous le savez sans doute déjà, mais le design des sites modernes s’articulent autour d’un Système de Grilles (voir image ci-dessous). De nombreux « Frameworks » graphiques, tels que Bootstrap ou encore Foundation utilisent ce système afin de modéliser rapidement des structures de site complexes et adaptables.

Il existe une autre tendance, qui permet également un gain de productivité. Le designer va se créer des outils qui s’apparenteraient à des briques de « Lego », aussi appelés des UI Kits, qu’il pourra réutiliser pour concevoir ses Wireframes.

Les designers de BlaBlaCar travaillent par exemple avec ces briques graphiques de manière isolée. Une brique est ajoutée à la bibliothèque des éléments graphique, lorsque son design a été validé. Il peut par exemple s’agir d’un simple bouton, d’un champs email, d’un pictogramme, etc. Le designer pourra alors très simplement composer sa maquette en assemblant ses briques et consacrera ainsi toute son attention à l’optimisation de l’expérience utilisateur.

Ensuite il y a la familiarité pour les internautes du Scroll Infini. Il est plus facile de scroller à la verticale que de cliquer sur un téléphone. Cette méthode va aussi nous servir à capter et garder l’attention des utilisateurs. Des grands noms comme Pinterest, Facebook et tout le milieu blogueur l’ont bien compris.

Le Scroll Infini est souvent mis au service du Storytelling. Le Storytelling est un passage de plus en plus utilisé pour créer une connexion émotionnelle avec avec l’internaute. Il permet de véhiculer une image d’entreprise reconnue, proche, rassurante et plus accessible.

Le « One Page Scrolling » est-il vraiment une bonne pratique ? Peut-on totalement soustraire un menu classique (navigation visible) à un « Menu Hamburger » ? Il n’existe pas de réponse universelle, car tout dépend de la stratégie et du positionnement choisis. D’une manière générale, il faut partir du principe que si l’expérience utilisateur est bonne, alors la technique employée est la bonne. Tout est histoire de goûts et le goût est très subjectif…

LE MATERIAL DESIGN ET L’INFLUENCE DES GAFAs (GOOGLE, AMAZON, FACEBOOK, APPLE, … )

Nous confondons souvent le Material Design et le Flat Design. Pour comprendre comment ces tendances ont été lancées, il faut commencer par parler du Skeuomorphisme.

Le Skeuomorphisme est une tendance lancée par Apple qui consiste à retranscrire virtuellement un objet du monde réel pour lui donner la même utilité dans l’usage de l’application. Ce style a été initié afin de faciliter l’entrée dans le monde numérique à un public étranger à ces concepts. Par exemple, le l’icône d’application horloge ressemble à une vraie horloge, alors que l’application elle même montre l’heure sur un simple timer numérique.

Notons par ailleurs,  que les applications mobile, bien qu’incontournables, perdent du terrain face au Web Mobile. Le « there’s an app for that » d’Apple n’a d’importance que quand cette application a une réelle nécessité d’exister et d’utiliser les capteurs, technologies ou applications natives d’un téléphone (Appareil Photo, Contact, SMS, GPS, Gyroscope, Microphone, NFC, Infra Rouge, etc.).

La nouvelle génération (la Y), est née avec ces nouvelles technologies et les conventions qui les accompagnent. Le Skeuomorphisme a donc rapidement été mis de côté au profit du Flat Design initié par Microsoft 8 et son interface « Metro » . Le principe est simple, il reprend d’une manière minimaliste l’iconographie que l’on pourrait voir dans la vie de tous les jours. Avec ses dessins à plat et ses longues ombres sans reliefs, cette tendance est devenue vite lassante.

Pour pallier à cette lassitude du Flat Design, le Material Design, initié cette fois-ci par Google, va pallier ce défaut du « trop » aplati en transformant les ombres plates du Flat Design en ombres diffuses avec plusieurs niveaux de profondeurs. Il emmène ainsi un peu de réel dans le virtuel. En résumé, pour créer du Material Design, on a ajouté du parallaxe dans le Flat Design. Ses formes géométriques sont très appréciées et rappellent le prémisse des arts contemporains en y ajoutant un brin de modernisme. L’utilisateur peut maintenant plus facilement interagir avec ces perspectives qui vont se retrouver de plus en plus souvent animées.

Toutes ces tendances nous viennent ainsi de ces grands géants du digital qui font la pluie et le beau temps sur le Web. Vous avez le droit d’être réfractaires mais ce serait dommage de laisser votre âme révolutionnaire se priver de toutes ces nouveautés.

LA MONTÉE DE L’ANIMATION ET DE L’INTERACTION

Les visuels embellissent vos pages, mais vous allez être surpris de savoir que l’on ne peut plus duper les visiteurs. Si vous utilisez des photos impersonnelles, clichés ou vides de sens qui sont tout droit tirées de banques d’images surutilisées par tous vos concurrents, vos fans iront voir ailleurs.

Nous arrivons à l’air de l’animation et de l’interaction. L’internaute d’aujourd’hui aime le mouvement. Plutôt que d’opter pour un Slider fourre-tout optez pour une belle vidéo si vous en avez les moyens ou sur UN SEUL visuel très attrayant possédant un joli effet de parallaxe pour créer de la profondeur et du mouvement. Ajoutez à celui-ci un slogan tiré des années 60 qui permettra à l’utilisateur d’identifier instantanément une thématique. Nous vous conseillons d’ailleurs la série Mad Men, avec le célèbre Don Draper, qui sait user des mots pour convertir tout un tas de consommateurs. On dit qu’un visuel vaut bien mieux que de longs discours, mais ça n’empêche qu’une simple phrase superposée sur un beau visuel ou encore mieux, sur une belle illustration, fait des miracles quand il s’agit de pousser vos utilisateurs à cliquer sur un bouton « call to action ».

Pour résumer les tendances en terme d’images et surtout d’animations voici quelques exemples que nous vous conseillons de suivre :

1. Un très beau visuel possédant un joli effet parallaxe usé avec modération et bienveillance.

2. Une belle vidéo « auto-play » humanisante en « Background » pour que le visiteur ne pense plus virtuel mais réel.

3. L’écran-splitté serait lui aussi visiblement tendance.

4. Du texte et des titres concis et stylisés.
Les formes rondes sont à la mode comme le sans-serif et il est essentiel de bien structurer la taille de ses titres pour induire de la fluidité dans la navigation.

5. Les icônes ont toujours la côte, mais il faut les personnaliser au texte qu’elles illustrent, voire les animer avec du format SVG.
On tend à utiliser plus abondamment les micro-interactions et l’animation subtile des « hover ».
La tendance actuelle est d’utiliser des Fonts Icons préconçues comme celle de FontAwesome, de Google ou de créer ses propre Fonts Icons via les services en ligne IcoMoon ou Fontello pour que vos sites gagnent en performance de chargement.

6. Le GIF fait son grand retour mais attention aux abus.
Selon nous, il est préférable de les mettre dans des présentations PPT pour amuser la galerie car ils alourdissent les pages et perdent vite en qualité quand on les agrandit.

7. Le dégradé fait lui aussi son grand retour.

LE DATA VISION OU COMMENT FAIRE PARLER LES CHIFFRES

La Data Visualisation s’articule autour :

• Du Big Data qui est un concept permettant de stocker un nombre indicible d’informations sur une base numérique
• Du Smart Data qui va filtrer les données de façon ciblée
• Et du Data Mining qui va ressortir ses données filtrées grâce à des algorithmes, des statistiques, de l’IA, etc.

Jusqu’à maintenant les tableaux austères d’Excel n’intéressaient personne, mais aujourd’hui, avec le Data Design, ces chiffres et ces graphiques prennent une toute autre dimension. Cela marque un nouveau tournant dans le Web et plus spécifiquement dans le design d’interface. Les chiffres ne font plus peur et sont visuellement plus compréhensibles.
Il est fort à parier que l’on n’a pas fini d’entendre parler de ces données de plus en plus ouvertes grâce aux APIs (ex. : api.gouv.fr) et qui inspirent les UI designers.

LES CHATBOTS OU QUAND SKYNET INONDE LA TOILE

Le Chatbot n’est pas récent, on se souvient tous des petits personnages animés visibles en bas de nos écrans. Grâce aux avancées technologiques, ils reviennent sur le devant de la scène car ils permettent d’engendrer une expérience personnalisée pour l’internaute. De plus, l’IA devient si subtile qu’il est de plus en plus difficile de différencier l’humain de la machine. Ne vous inquiétez pas, cette IA est encore contrôlée par des êtres humains :-).

Phénomène de mode ou phénomène profondément disruptif, il est vrai que l’on peut lui trouver de sérieux avantages comme la qualification du besoin et la redirection de l’internaute vers le service concerné d’une entreprise. Le Chatbot, s’il est bien paramétré, va détecter certains mots que nous allons taper sur nos claviers.

Il est dans un premier temps un bon compromis à l’usage du formulaire de contact et à la gestion chronophage des possibles nombreux commentaires sur votre blog. C’est donc à vous de juger si vous voulez essayer cette « innovation », qui n’en est finalement pas vraiment une, mais qui pourra s’avérer forte utile pour convertir vos utilisateurs.

POUR ALLER VERS L’INFINI ET AU-DELÀ…

Pour conclure et ne pas mettre de côté les autres tendances, voici une liste non-exhaustive des nouvelles technologies émergentes à suivre :

• Le web éthique : Ne plus publier sans connaître ses sources ou encore le besoin d’anonymat sur la toile.
• Les objets connectés : Tout reste à faire quant à la création de leurs interfaces d’utilisation.
• La réalité virtuelle : Comme pour les objets connectés beaucoup de possibilités s’offrent aux UI Designers.
• La réalité augmentée : La Google Glass n’avait auparavant pas séduit le marché mais quand on voit le succès de Pokémon Go on ne peut qu’imaginer ses bonnes perspectives d’évolution (ou de résurrection).
• Le WebGL : La 3D revient en force, mais va-t-elle séduire nos chers internautes ?
• Les Couleurs : Nous n’avons pas chercher à épiloguer sur les couleurs tendances. Elles changent selon les saisons et font référence aux goûts de chacun. Certaines couleurs auraient une signification précise plus ou moins répandue chez le grand public.