En ce début d’année, découvrez notre dossier sur les tendances digitales qui vont marquer vos futures créations.

En 2015, les tendances vont être sensiblement les mêmes que celles observées en 2014 (responsive, flat design, images et vidéos, grille, typographie, etc.).
Mais 2015 sera encore plus mobile et plus connectée !
Cette année nous tournerons notre cahier des tendances sur ce qui fait que vous allez régulièrement sur vos sites web préférés : l’expérience utilisateur.

1 | La conception adaptée via le RWD et le tout connecté

Le Responsive Web Design s’est standardisé, valeur incontournable de 2014, il est devenu une évidence pour 2015.
Une étude réalisée par comScore nous annonce qu’aux Etats-Unis 52% du temps passé sur internet se font via mobile (pas loin de 40% pour la France).
La définition de “conception adaptée” est en pleine expansion notamment via la montre connectée, la SMART TV et l’ensemble des objets connectés qui vont avoir une place de plus en plus importante aux côtés des tablettes et des smartphones.

bourse-directe
Grâce à Bourse Directe restez connectés partout et tout le temps !

meetic
Faites de belles rencontres sur votre montre Android !

2 | La conception adaptée pour une expérience unique

Le design mobile, en plus d’être intuitif, influence notre navigation sur les différents terminaux que ça soit sur petit ou grand écran. C’est le Mobile First qui s’impose à nous ! Merci Luke Wroblewski ;-)
La navigation doit être simple, compréhensible et quasi identique entre les différents terminaux connectés afin de ne pas perturber l’utilisateur. Ceci est possible en ayant au préalable travaillé sur un workflow éditorial multidevice.mac-yosemite
Le nouveau système d’exploitation OS X pour Mac propose une interface complètement renouvelée et pourtant instantanément familière… Pourquoi ? ;)

Bon à savoir : la navigation doit valoriser le contenu et proposer une réelle expérience pour l’utilisateur.

3 | L’immersion utilisateur par l’expérience visuelle

C’est le pari d’engager émotionnellement les utilisateurs à visiter votre site en leur offrant une expérience unique et positive.
La vidéo et l’image apportent une plus value pour illustrer et livrer rapidement votre message. Combinés avec des textes forts, elles immergent et séduisent très facilement les mobinautes et/ou internautes.

marketstreetcatch
Un beau site qui met l’eau à la bouche…

Nous allons au restaurant pour le goût, la présentation, l’ambiance. Au final, la conception d’une interface n’est pas si différente…

D’un point de vue design, on laisse place aux médias en full screens avec des superpositions de layers (textes, boutons, blocs colorés).

Bon à savoir : cependant, attention au poids des images et/ou vidéos ! Il ne faut pas perdre l’idée que le contenu doit être rapidement accessible.

4 | Une navigation fluide grâce aux animations

Les animations et les interactions sont indispensables pour une bonne expérience utilisateur. Le regard est attiré par le mouvement. Utilisez-le à votre avantage en signalant un changement d’état (icône animée, survol bouton…).
Proposer des transitions rend l’expérience plus fluide, il n’y a pas de cassures, l’information continue de couler. C’est aussi un moyen de rendre plus ludique et plus accessible vos contenus. En plus d’être vivant, c’est une réelle immersion de l’internaute.

vangoghmuseum
Entrez dans le monde de Van Gogh et vivez une expérience totalement immersive !

Bon à savoir : attention à l’utilisation à outrance d’animations et de transitions car cela peut avoir un effet perturbateur sur l’ expérience utilisateur.

5 | Le contenu mis en valeur par le flat design

Réelle confirmation depuis plus de 2ans, le skeuomorphisme pur et dur et le « web 2.0″ se sont fait la malle pour faire place à un design sobrel’aplat est roi. C’est une approche qui encourage la simplicité, la clarté et l’utilité.
Design épuré et minimaliste, le flat se concentre sur l’essentiel et sur l’utilisateur. Les ombres portées, les bizotages/estampages et les dégradés sont à bannir. Même si depuis l’IOS7 le dégradé retrouve peu à peu sa place…

Simplicité, aplat de couleurs, design en mosaïque pour une meilleure clarté
Simplicité, aplat de couleurs, design en mosaïque pour une meilleure clarté

Bon à savoir : l’originalité et la créativité résident dans la maîtrise de l’ergonomie et des éléments graphiques.

6 | Le contenu se veut lisible

Le content first pour une réelle stratégie éditoriale.
On se réimpose les bases essentielles pour la lecture du contenu. Contraste et lisibilité du texte sont une priorité ! Afin de faciliter la lecture, privilégiez des zones de texte peu larges et laissez respirer vos textes (blancs tournants).

Chez Spotify, le texte est aussi important que l'image pour livrer un message
Chez Spotify, le texte est aussi important que l’image pour livrer un message

Bon à savoir : mener à bien l’utilisation de l’espace blanc améliore la compréhension du texte par l’utilisateur de près de 20%.

7 | Pour des UX aux petits oignons

C’est le Saint Graal !

indiana
Comme Indy, partez pour la quête du Saint Graal

Malheureusement l’UX (User experience) est encore trop souvent négligé, voir totalement oublié en 2014.
Au-delà des tendances, le design doit être justifié et servir l’utilisateur. Il faut que le design soit adapté à l’utilisateur, et non l’inverse, la conception de l’interface doit répondre à 3 fonctions :

  • utilité
  • utilisabilité
  • opportunité

Bonus | Et ce qu’il ne faut plus voir en 2015…

A bannir impérativement de vos créations…

Les photos des banques d’images.
On arrête les photos creuses à la « American family », on privilégie les photos naturelles et contemporaines.
La loading flash type flash.
Une attente trop longue peut mettre en péril l’UX. De plus, il peut y avoir des soucis de référencement quand il y a beaucoup d’images et peu de texte.
Le web ultra kitchouille.
Au revoir le vieux “web 2.0 so glossy” pour des raisons de clarté…
 

Conclusion

Découvrez l’intégralité de notre cahier « tendances webdesign 2015, l’année de l’UX » sur slideshare
Maintenant, à vous de jouer ! Et surtout n’oubliez pas l’utilisateur ;)

Dossier réalisé par le studio telmedia, pour nous contacter : studio@telmedia.fr

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec un *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>