E-saac website - Student project

Conception

Le serious game est basé sur une immersion virtuelle du joueur avec la dimension de communauté et donc d’avatar personnel mais aussi grâce au gameplay défini par la nécessité de jouer avec une tablette tactile et un écran d’ordinateur (de la même manière que la Wii U). Afin de retranscrire au mieux ces aspects dans le site internet, j’ai opté pour une navigation au scroll (contenu one page) en jouant avec des petites animations simples afin de créer un effet de parallaxe attractif et immersif.

Après avoir fait une liste exhaustive du contenu, j’ai pu construire une arborescence qui, par ailleurs, étant complètement linéaire, constitue un travail important en terme de narration. Egalement, dans le but de d’optimiser les phases de validations et de retours, chaque écran et transition «inter écran» ont été numérotés (nombres impairs sauf les deux derniers et nombres pairs sauf le dernier).

Le zoning reflète la quasi totalité des différents écrans du site. Dans la continuité de l’arborescence, les différentes planches sont caractérisées par deux natures fonctionnelles : écran et transition.

Arborescence

Wireframe

Maquettes créatives

Ci-après, une sélection de quelques écrans du site. Les transitions sont représentées en mini mosaïque (lecture de gauche à droite et de haut en bas). Les pastilles numérotées correspondent aux numéros d’écrans présents.

Ergonomie

La navigation et l’ergonomie sont deux problématiques de taille étant donné la cible néophyte visée. En conséquence, nous avons poussé les fonctionnalités de navigation dans le but de la rendre plus claire et intuitive possible. Ci-après, il est présenté : le menu regroupant des ancres et les pushs popins, l’animation dynamique permettant de visualiser l’état d’avancement dans le site et enfin, des pushs situés dans le footer permettant d’automatiser les animations de transitions (ces pushs renforcent la navigation «aimantée» au scroll ainsi que par les touches directionnelles du clavier).