Programmation Annecy2016

Ergonomie

Wireframes, Illustrator, HTML/CSS

La programmation du festival d’Annecy est publiée fin mai, et chaque année, un effort est fait pour apporter des améliorations à cet outil. J’avais opéré une refonte ergonomique et graphique en 2013 : après trois ans de fonctionnement et de petits correctifs, j’avais identifié des points d’amélioration.

  • la navigation entre les nombreux programmes
  • le responsive des différents menus.

Le Festival du film d’animation, son marché et ses rencontres, ce sont plus de 300 événements en 6 jours répartis en une trentaine de catégories. L’enjeu ergonomique est d’autant plus important que le public réserve directement depuis ce programme en ligne, avec de grosses montées en charges à l’ouverture de la billetterie. En 2013, pour s’adapter aux différents usages et aux différentes temporalités (en amont et pendant le festival), j’avais imaginé 3 affichages différents de la programmation : par programmes thématiques, par dates et par lieux.

Dans l’affichage par dates, j’ai remplacé le gros menu qui prenait une colonne à droite par un petit menu, très synthétique, sur une ligne, au dessus des ongles des jours. Ce menu permet de filtrer les événements affichés selon les 3 grandes catégories (Festival, Marché et Rencontres), ou bien de les filtrer en n’affichant que ses coups de cœur ou ses réservations.

Menu de l'affichage par date

Pour celleux qui veulent filtrer plus précisément le contenu de la page, le menu détaillé est accessible via un bouton sur cette même ligne. Le menu se situe désormais dans un volet sur le côté droit qui peut être affiché ou caché. Les évènements affichés ont plus de place en largeur, ce qui permet d’en diminuer la hauteur et donc de réduire le scroll. La disparition du menu détaillé simplifie l’interface.

Dans l’affichage par programme, le passage sur toute la largeur de la page a aussi permis quelques améliorations. D’abord sur la page d’accueil, les événements du Marché et des Rencontres ont pu venir se positionner à côté du festival et non plus en dessous. Ensuite, j’ai introduit, à la demande du service Films, une petite barre de tri qui permet de réordonner les films contenus dans un programme afin de les parcourir plus facilement.

Enfin, là où avant on ne pouvait mettre que le programme de courts métrages en coup de coeur, on peut désormais mettre de côté les courts métrages eux-mêmes, afin de pouvoir plus aisément repérer les programmes qui nous intéressent le plus.

J’ai aussi imaginé un affichage de recherche libre dans les programme, mais l’équipe technique n’a pas eu le temps de le développer.

J’avais déjà posé et intégré la charte graphique pour le reste du site, j’ai donc juste eu à effectué les modifications directement dans le code du site. J’en ai profité pour passer le layout en flexbox.