1. DESIGN D’INTERFACE
- Quelles seront les tendances en 2016 ? -

2. - C’EST NOUVEAU (OU PRESQUE) -

3. Aujourd’hui, une interface
doit s’adapter à une multitude
de terminaux et de résolutions,
en constante évolution. Il est
nécessaire de faire évoluer
nos méthodes de conception
pour garantir l’évolutivité
et la cohérence d’une interface,
quel que soit le support digital.
En conception, il n’est plus possible de
raisonner en « page fixe », nous devons
penser un design « fluide » conçu avec
un système de composants et de grilles
modulables (tout comme les
développeurs le font depuis longtemps).
Plusieurs approches gravitent autour de
ce sujet : le Responsive Design bien sûr
mais aussi l'Adaptive UI, le Material
Design et l'Atomic Design.
TENDANCE N°1
UNE CONCEPTION
FLUIDE

5. Les utilisateurs se sont habitués
aux expériences riches que peuvent
apporter certaines applications :
contenus plus légers, fonctionnalités
ciblées, design d’interaction plus
poussé et navigation propre
à chaque OS. Ils sont devenus
exigeants et s’attendent donc
à retrouver une expérience similaire
sur le web.
De nombreux sites n’hésitent donc
pas à reprendre les codes graphiques
et ergonomiques des applications
mobiles et tablettes. Cela se traduit
par une réflexion autour du contenu
pour ne garder que l’essentiel et une
optimisation de la navigation avec
des interfaces « intelligentes » (clever
menu, formulaires prédictifs, etc).
TENDANCE N°2
DES APPS
QUI INSPIRENT
LE WEB

7. - ÇA RESTE D’ACTUALITÉ -

8. TENDANCE N°3
UNE SIMPLICITÉ
À TOUTE
ÉPREUVE
Le maître mot est « less is more »
avec comme quête permanente
de ne garder que les informations
utiles pour l'utilisateur que ce soit
au niveau du fond (les contenus)
ou de la forme (l’interface).
On oublie donc toutes les fioritures
qui surchargent l'interface pour aboutir
à un design épuré à son maximum.
Pour obtenir un équilibre visuel
harmonieux, l'interface doit être
structurée à l'aide d'une grille
où chaque espace et alignement
est traité avec soin.
Et contrairement aux idées reçues,
simplicité ne rime pas avec facilité
ou rapidité de conception !

10. Le Flat Design est encore à l'honneur
et se conjugue avec le Material
Design.
Le Flat Design est encore très présent
avec son souci de simplicité et ses
aplats colorés.
Le Material Design apporte
une dimension supplémentaire
avec le concept de hiérarchie de plans,
le retour des ombres et surtout des
animations. Cela permet de clarifier
la structure de l’information et de
renforcer l’affordance des éléments
interactifs.
TENDANCE N°4
LE MATERIAL
ENRICHIT LE FLAT

12. TENDANCE N°5
ON EN VOIT
DE TOUTES
LES COULEURS
La couleur est très importante dans
les partis pris graphiques puisqu'elle
pose l'univers de marque, participe
à la hiérarchie visuelle de l'interface
et guide le regard de l'utilisateur.
L’utilisation des couleurs vives donnent
une dynamique essentielle
à la compréhension de l'interface.
Elles peuvent être complétées par des
teintes pastels ou associées entre elles
pour créer des gammes chromatiques
audacieuses. Il est aussi probable que
de très légers dégradés en background
soient de retour pour intensifier
la notion de profondeur.

14. TENDANCE N°6
L’ILLUSTRATION
SOUS TOUTES
SES FORMES
En réponse au Flat design et aux
visuels impersonnels des banques
d'images, on voit apparaître de plus
en plus d’illustrations.
L’approche ludique et différenciante d’
une illustration permet de donner
une personnalité aux interfaces, d’
affirmer l’identité d’une marque
et de trouver une nouvelle manière
de présenter les contenus.
Elles sont particulièrement pertinentes
pour créer du storytelling.

16. TENDANCE N°7
UNE IMMERSION
PAR LE
BACKGROUND
Certaines interfaces n’hésitent
pas à jouer avec de grands visuels
de fond pour apporter une touche
réaliste et humaine et donner ainsi
de la profondeur à l’interface.
Ces visuels sont de véritables espaces
d'expression pour la marque
car ils permettent de valoriser
le contenu et l'univers ciblé.
De plus en plus de petites vidéos
en arrière-plan apportent une réelle
sensation d'immersion ; en veillant
à ce que cette animation reste discrète
pour ne pas perturber et distraire
l'utilisateur.

18. TENDANCE N°8
DU SCROLL
À L’INFINI
L'éternelle crainte selon laquelle
les utilisateurs ne scrollent pas
et passent à coté de certains
contenus est révolue !
Avec l’utilisation des smartphones,
le geste de défilement est devenu
naturel et systématique.
Depuis quelques années, les sites
en « one page » se sont multipliés,
aussi bien sur desktop que sur mobile,
avec un chargement progressif des
contenus.
D’ailleurs, le fait de scroller augmente l’
engagement de l’utilisateur.

20. TENDANCE N°9
UNE HIÉRARCHIE
PAR LA
TYPOGRAPHIE
La typographie reste un moyen
incontournable pour hiérarchiser l’
information grâce à des contrastes
de taille et des variations de graisse.
L’arrivée des webfonts a également
permis une plus grande liberté d’
expression typographique.
Deux familles de caractères sont
suffisantes pour créer à la fois du
rythme, une mise en page harmonieuse
et garantir une bonne lisibilité
du contenu (Font pairing).

22. TENDANCE N°10
DES ANIMATIONS
QUI APPORTENT
DU SENS
Les animations ne sont pas là
pour créer le « wahou effect »,
elles aident à la compréhension
de l’interface et des interactions.
Fidèles aux guidelines Material Design,
les animations s’inspirent des lois
de la physique tout en restant discrètes.
Les micro-interactions permettent
de donner du feedback à l’utilisateur
suite à une action.
Attention à ne pas en abuser
pour garder une cohérence
et du sens à l’expérience utilisateur.

24. - CONCLUSION -

25. Nous pouvons en retenir une évolution logique des tendances
en fonction des usages et du marché.
3 principes à garder en tête :
● Chaque tendance doit être challengée par rapport
aux utilisateurs et aux objectifs des marques,
● Le mode « test and learn » est le meilleur moyen de vérifier
la compréhension et les hypothèses,
● Et bien évidement, une bonne UI n'est rien sans une bonne UX !

26. Pour plus d’informations…
Marie-Amélie COTILLON
Responsable du Studio de Création
marie-amelie.cotillon@backelite.com
www.backelite.com