Découvrez notre dossier tendance 2015 avec un focus sur l'expérience utilisateur au sein de vos projets digitaux.
Webdesign, RWD, vidéo, contenu ou encore interactions possibles, le dossier réalisé par le studio telmedia* alimentera vos réflexions pour l'année à venir ;-)
En savoir plus sur telmedia* ? Nous sommes une agence digitale avec une moyenne d’âge de 33 ans, où ingénieurs et designers conçoivent des produits et des services adaptés aux nouveaux comportements des consommateurs.
www.telmedia.fr
PS : Toutes les photos et/ou illustrations présentent dans notre dossier sont la propriété intellectuelle d'artistes et sont protégées par la législation en vigueur sur le droit d'auteur.
2. Avant-propos
pour bien commencer 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.
Visitez http://www.weareresponsive.fr/
Crédit photo : The Uncomfortable by Katerina Kamprani
3. 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.
4. Grâce à Bourse Directe restez connectés partout et
tout le temps !
6. La balance connectée de Terraillon.
Nouvel objet pour suivre facilement son poids, son IMC
et sa composition corporelle...
7. 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.
Nota bene : La navigation doit valoriser le contenu et proposer
une réelle expérience pour l’utilisateur.
8. Paru en fin 2014, le nouveau système d'exploitation OS X
pour Mac propose une interface complètement
renouvelée et pourtant instantanément familière...
Pourquoi ? Car il s'inscrit dans la continuité des codes
graphiques et ergonomiques mis en place sur l'iOS8.
9. 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, ils immergent et séduisent très facilement les
mobinautes et/ou internautes.
D'un point de vue design, on laisse place aux médias en fulls
screens avec des superpositions de layers (textes, boutons,
blocs colorés). 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.
10. Laissez-vous séduire par un territoire magnifique
labellisé "Grand Site de France" !
Test pourjhhj
http://www.lesdeuxcaps.fr
11. Les gens vont au restaurant pour du goût, de la
texture, de la présentation, et une ambiance
mémorable. La conception d’une interface n’est pas
différente.
Test pourjhhj
http://marketstreetcatch.com
12. L’immersion utilisateur
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
Attention à l’utilisation à outrance d’animations et de
transitions car cela peut avoir un effet perturbateur sur l’
expérience utilisateur.
13. Entrez dans le monde de Van Gogh et vivez une
expérience totalement immersive !
Test pourjhhj
http://www.vangoghmuseum.nl/en
14. 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 sobre où l’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…
L’originalité et la créativité résident dans la maîtrise de l’
ergonomie et des éléments graphiques.
15. Simplicité, aplat de couleurs, design en mosaïque, pour
une meilleure clarté pour l’utilisateur
Test pourjhhj
http://www.sosh.fr
16. Le contenu mis en valeur
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).
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%.
17. Sur le site de Spotify, le texte a autant d’importance que l’
image pour livrer un message
Test pourjhhj
http://www.spotify.com
18. Pour des UX
aux petits oignons
C'est le Saint Graal !
Malheureusement l’UX (User Xperience) 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é
20. Inspirez-vous d’eux,
nous avons aimé...
Le site de Speedo
explore.speedousa.
com/experience/artofthecap/#home
-
Le webmagazine de Rolex
magazine.rolexawards.com
22. 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 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é…(p14)
23. Maintenant, à vous de jouer !
Et surtout n'oubliez pas l'utilisateur ;)
Pour nous contacter : studio@telmedia.fr
Dossier réalisé par :
Julie Turbelin / Designer Web & mobile
Camille Wustner / Designer Web & mobile