Les interfaces de demain

Qui suis-je ?


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

@grsmto - grsmto.com

Intro : évolution des interfaces

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

Sur le web, avant 2000

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


Comment rendre les interfaces intuitives, fluides et naturelles ?
Le mouvement donne vie à tout ce qu'il affecte


La transition permet de réduire le travail de compréhension de l'utilisateur en lui racontant une histoire

Problème

animations = performances

HTML5/CSS3 à la rescousse

CSS3 animations/transitions
L'haptique

Des outils


 Le dom est vivant


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

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 demain ?

(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

Cartographie : de la carte papier à l'immersion

côté natif

  • Mobile (Windows Phone/Android/iOS7)
  • Oculus Rift
     


Merci !

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
  • http://famo.us/
  • VelocityJS
  • Made with Slides.com