Les interfaces de demain

Qui suis-je ?


Adrien Denat
Développeur front-end
Passionné de multimédia et d'UI design

@grsmto - grsmto.com


  1. Introduction : Retour sur l'évolution des interfaces web
  2. État actuel
  3. Et après ?
  4. Liens et références

Intro : évolution des interfaces

"...that strange new zone between medium and message. That zone we call the interface."
— Steven Johnson, 1997


source

Sur le web, avant 2000


  • Pages
  • Hyperliens
  • Formulaires
  • GIF !

Les bases de navigation et d'interaction sont posées.

Pourquoi les interfaces évoluent ?

Pourquoi ne pas se contenter de l'expérience acquise par les utilisateurs ?


"We will come to think of interface design as a kind of art form— perhaps the art form of the next century." 
— Steven Johnson, 1997

Les interfaces WEB en tant qu'art


123klan

TeamcHmAn

VectorLounge

...

L'évolution technologique


  • Le web influencé par le natif
  • Nouvelles possibilités techniques nécessitent nouvelles interfaces pour être exploitées
  • L'adoption des technologies par l'utilisateur pousse à aller plus loin

Les enjeux


  • Utilisation naturelle de l'interface
  • Multi-support
  • Expérience utilisateur unique


Aujourd'hui


côté natif

  • Windows 8 (Metro)
  • iOS7
  • Oculus Rift



SUr le web :
LE DOM EST VIVANT


chaque élément du DOM peut avoir ses propres propriétés et être traité comme on le veut

La maturité de JavaScript offre de nouvelles possibilités


Et canvas ?
canvas peut s'intégrer au DOM (tant bien que mal) 

2D et 3D : Deux mondes


2D : HTML5/CSS

  • Parallax
  • Scrolling websites
  • ...

3D : WebGL/Flash

  • jeux
  • démos/expés

et après ?

(DEMO TIME)






Si on peut faire des cubes, donc...? 

Les possibilités offertes par CSS3 ouvrent de nouveaux horizons

C'est sympa la 3D, mais c'est compliqué !



CSS3 vulgarise la 3D et la rend simple
Des éditeurs 3D directement dans le navigateur

Pour les jeux ok, mais pour les interfaces utilisateurs ?


Augmenter l'expérience utilisateur sur le web

Améliorer l'expérience de lecture d'un article

Liens références


Références ui design


JS Libraries


  • Transit : Lib JS pour animer en CSS http://ricostacruz.com/jquery.transit/
  • Animations avancés (JS) http://www.greensock.com/gsap-js/
  • ThreeJS : Moteur WebGL
  • Made with Slides.com