SlideShare une entreprise Scribd logo
1  sur  23
Télécharger pour lire hors ligne
tendances 2015
l’année de l’UX
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
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.
Grâce à Bourse Directe restez connectés partout et
tout le temps !
Avec Meetic, faites de belles rencontres sur votre montre
Android !
La balance connectée de Terraillon.
Nouvel objet pour suivre facilement son poids, son IMC
et sa composition corporelle...
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.
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.
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.
Laissez-vous séduire par un territoire magnifique
labellisé "Grand Site de France" !
Test pourjhhj
http://www.lesdeuxcaps.fr
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
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.
Entrez dans le monde de Van Gogh et vivez une
expérience totalement immersive !
Test pourjhhj
http://www.vangoghmuseum.nl/en
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.
Simplicité, aplat de couleurs, design en mosaïque, pour
une meilleure clarté pour l’utilisateur
Test pourjhhj
http://www.sosh.fr
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%.
Sur le site de Spotify, le texte a autant d’importance que l’
image pour livrer un message
Test pourjhhj
http://www.spotify.com
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é
Eux, ils sont déjà prêts pour 2015...
Inspirez-vous d’eux,
nous avons aimé...
Le site de Speedo
explore.speedousa.
com/experience/artofthecap/#home
-
Le webmagazine de Rolex
magazine.rolexawards.com
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 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)
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

Contenu connexe

En vedette

Presentation benchmark
Presentation benchmarkPresentation benchmark
Presentation benchmarkanaistriolaire
 
Négociation partenariale
Négociation partenarialeNégociation partenariale
Négociation partenarialeGeoParks
 
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTEN
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTENCM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTEN
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTENtecom
 
Social-Media-Monitoring für Kulturinstitutionen
Social-Media-Monitoring für KulturinstitutionenSocial-Media-Monitoring für Kulturinstitutionen
Social-Media-Monitoring für KulturinstitutionenChristoph Deeg
 
Portfolio photos
Portfolio photosPortfolio photos
Portfolio photosCelinel75
 
Portfolio écrits
Portfolio écritsPortfolio écrits
Portfolio écritsCelinel75
 
Podium «Warum ich angefangen habe zu bloggen und warum ich damit noch nicht a...
Podium «Warum ich angefangen habe zu bloggen und warum ich damit noch nicht a...Podium «Warum ich angefangen habe zu bloggen und warum ich damit noch nicht a...
Podium «Warum ich angefangen habe zu bloggen und warum ich damit noch nicht a...infoclio.ch
 
100910 foerderdatenbankpraes
100910 foerderdatenbankpraes100910 foerderdatenbankpraes
100910 foerderdatenbankpraesaerospacesaxony
 
"Stiefkind Dokumentation" im Unternehmensprozess - Max Brändle
"Stiefkind Dokumentation" im Unternehmensprozess - Max Brändle"Stiefkind Dokumentation" im Unternehmensprozess - Max Brändle
"Stiefkind Dokumentation" im Unternehmensprozess - Max Brändletecom
 
Die WWF Online-Umfrage 2012
Die WWF Online-Umfrage 2012Die WWF Online-Umfrage 2012
Die WWF Online-Umfrage 2012WWF Deutschland
 
Les categorie des_ordinateursz
Les categorie des_ordinateurszLes categorie des_ordinateursz
Les categorie des_ordinateurszsamarkochtane
 
Reinhard Willfort: Crowdsourcing + Crowdinvesting = InnovationsTurbo
Reinhard Willfort: Crowdsourcing + Crowdinvesting = InnovationsTurboReinhard Willfort: Crowdsourcing + Crowdinvesting = InnovationsTurbo
Reinhard Willfort: Crowdsourcing + Crowdinvesting = InnovationsTurboSemantic Web Company
 
Martin Kaltenböck - Anforderungsanalyse für Open Government Data in Österreich
Martin Kaltenböck - Anforderungsanalyse für Open Government Data in ÖsterreichMartin Kaltenböck - Anforderungsanalyse für Open Government Data in Österreich
Martin Kaltenböck - Anforderungsanalyse für Open Government Data in ÖsterreichSemantic Web Company
 

En vedette (20)

Presentation benchmark
Presentation benchmarkPresentation benchmark
Presentation benchmark
 
Négociation partenariale
Négociation partenarialeNégociation partenariale
Négociation partenariale
 
Tqc digital
Tqc digitalTqc digital
Tqc digital
 
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTEN
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTENCM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTEN
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTEN
 
Social-Media-Monitoring für Kulturinstitutionen
Social-Media-Monitoring für KulturinstitutionenSocial-Media-Monitoring für Kulturinstitutionen
Social-Media-Monitoring für Kulturinstitutionen
 
Portfolio photos
Portfolio photosPortfolio photos
Portfolio photos
 
Portfolio écrits
Portfolio écritsPortfolio écrits
Portfolio écrits
 
Podium «Warum ich angefangen habe zu bloggen und warum ich damit noch nicht a...
Podium «Warum ich angefangen habe zu bloggen und warum ich damit noch nicht a...Podium «Warum ich angefangen habe zu bloggen und warum ich damit noch nicht a...
Podium «Warum ich angefangen habe zu bloggen und warum ich damit noch nicht a...
 
100910 foerderdatenbankpraes
100910 foerderdatenbankpraes100910 foerderdatenbankpraes
100910 foerderdatenbankpraes
 
"Stiefkind Dokumentation" im Unternehmensprozess - Max Brändle
"Stiefkind Dokumentation" im Unternehmensprozess - Max Brändle"Stiefkind Dokumentation" im Unternehmensprozess - Max Brändle
"Stiefkind Dokumentation" im Unternehmensprozess - Max Brändle
 
2010 09 30 14-30 thomas lang
2010 09 30 14-30 thomas lang2010 09 30 14-30 thomas lang
2010 09 30 14-30 thomas lang
 
SIIR Strategimöte120619
SIIR Strategimöte120619SIIR Strategimöte120619
SIIR Strategimöte120619
 
sepsis severe
sepsis severesepsis severe
sepsis severe
 
Die WWF Online-Umfrage 2012
Die WWF Online-Umfrage 2012Die WWF Online-Umfrage 2012
Die WWF Online-Umfrage 2012
 
Les categorie des_ordinateursz
Les categorie des_ordinateurszLes categorie des_ordinateursz
Les categorie des_ordinateursz
 
Reinhard Willfort: Crowdsourcing + Crowdinvesting = InnovationsTurbo
Reinhard Willfort: Crowdsourcing + Crowdinvesting = InnovationsTurboReinhard Willfort: Crowdsourcing + Crowdinvesting = InnovationsTurbo
Reinhard Willfort: Crowdsourcing + Crowdinvesting = InnovationsTurbo
 
Martin Kaltenböck - Anforderungsanalyse für Open Government Data in Österreich
Martin Kaltenböck - Anforderungsanalyse für Open Government Data in ÖsterreichMartin Kaltenböck - Anforderungsanalyse für Open Government Data in Österreich
Martin Kaltenböck - Anforderungsanalyse für Open Government Data in Österreich
 
2011 05 12 13-15 topsoft_zuerich_scrum
2011 05 12 13-15 topsoft_zuerich_scrum2011 05 12 13-15 topsoft_zuerich_scrum
2011 05 12 13-15 topsoft_zuerich_scrum
 
Connecting Branches 08/2010
Connecting Branches 08/2010Connecting Branches 08/2010
Connecting Branches 08/2010
 
François Rabelais
François RabelaisFrançois Rabelais
François Rabelais
 

Similaire à telmedia* : tendances webdesign 2015, l'année de l'UX

Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesConcept Image
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirConcept Image
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus Vanksen
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
 
2012 folio brochure
2012 folio brochure2012 folio brochure
2012 folio brochureZélia Sakhi
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Idean France
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenVanksen
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...maclic
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenLes 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenSolange Derrey
 
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Vincent Vandevelde
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Julien Dereumaux
 
Star d'ux bordeaux #2 la trib-ux-ne libre
Star d'ux bordeaux #2   la trib-ux-ne libreStar d'ux bordeaux #2   la trib-ux-ne libre
Star d'ux bordeaux #2 la trib-ux-ne libreAnne PEDRO
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
Competitic ergonomie site web - numerique en entreprise
Competitic   ergonomie site web - numerique en entrepriseCompetitic   ergonomie site web - numerique en entreprise
Competitic ergonomie site web - numerique en entrepriseCOMPETITIC
 
Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014Teester
 
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...Microsoft
 

Similaire à telmedia* : tendances webdesign 2015, l'année de l'UX (20)

Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
2012 folio brochure
2012 folio brochure2012 folio brochure
2012 folio brochure
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionnel
 
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenLes 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by Vanksen
 
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
 
Star d'ux bordeaux #2 la trib-ux-ne libre
Star d'ux bordeaux #2   la trib-ux-ne libreStar d'ux bordeaux #2   la trib-ux-ne libre
Star d'ux bordeaux #2 la trib-ux-ne libre
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Veille digitale
Veille digitaleVeille digitale
Veille digitale
 
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
 
Competitic ergonomie site web - numerique en entreprise
Competitic   ergonomie site web - numerique en entrepriseCompetitic   ergonomie site web - numerique en entreprise
Competitic ergonomie site web - numerique en entreprise
 
Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014Grande Rétrospective 2013, Chiffres clés et Tendances 2014
Grande Rétrospective 2013, Chiffres clés et Tendances 2014
 
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
 

telmedia* : tendances webdesign 2015, l'année de l'UX

  • 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 !
  • 5. Avec Meetic, faites de belles rencontres sur votre montre Android !
  • 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é
  • 19. Eux, ils sont déjà prêts pour 2015...
  • 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
  • 21. Et ce qu’il ne faut plus voir en 2015...
  • 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