Lorsque nous avons chez emagin démarré notre réflexion sur ce projet, nous ne disposions d’aucun brief précis ni besoin clairement exprimé. Avec notre regard de professionnel, en analysant / comparant les grands sites de productions cinématographiques, en réfléchissant aux différentes options technologiques, graphiques et fonctionnelles, nous avons-nous-même dressé le périmètre et les contraintes du projet.

Avant tout, que pouvions-nous leur proposer d’intéressant et de séduisant ? Quel “plus” apporter à ce projet ? Comment démontrer qu’une refonte du site actuel est nécessaire et qu’elle serait un véritable atout pour la communication et l’image de l’entreprise ?

En tant que professionnels cela nous apparut évident : la version en ligne d’Europacorp propose une interface un peu “vieillotte”, les éléments graphiques sont peu soignés et les outils fonctionnels mal exploités ou incomplets. Une simple refonte graphique nous semblait insuffisante et nous souhaitions leur proposer des outils adaptés à leur métier et à leurs besoins. Des fonctionnalités utiles qui présenteraient une réelle valeur ajoutée au contenu présenté, le tout habillé dans une interface cohérente et de qualité.

La place qu’occupe aujourd’hui EuropaCorp sur le marché de la production cinématographique, la qualité visuelle et l’orientation résolument moderne des productions de la société ont très largement influencé notre proposition et nos choix fonctionnels.

Notre démarche créative peut ainsi se résumer en 3 mots : design, utile et utilisable. Ces 3 mots clés résument les principes de base de l’ergonomie web et sont pour nous la clé d’un site Internet réussit :

Design, car le beau, bien que subjectif, véhicule avant toute chose l’image d’un site ; c’est ce qui nous touche et nous interpelle en premier. Il se doit donc d’être en accord avec l’identité du projet ; sans prendre le pas sur le contenu, il doit être pertinent et au service de l’information présentée.
Utile, parce que l’Internaute qui visite votre site s’attend à trouver une certaine information. Il faut donc que l’interface propose des accès pertinents et que l’information recherchée soit clairement identifiée et identifiable.
Utilisable, pour faciliter la satisfaction de ce besoin : ces accès doivent être clairs et aérés ; les fonctionnalités doivent simplifier l’accès à l’information et être d’une utilisation intuitive, pratique et si possible ludique.

Nous avons essayé - à travers cette proposition - de présenter un projet avec une réflexion aboutie au niveau ergonomique et graphique tout en offrant de grandes valeurs ajoutées fonctionnelles.

La nouvelles interface Europacorp

Nous avons optés pour une interface full-flash, en accord avec l’univers graphique d’EuropaCorp. Le design est soigné et les différents composants sont au service de l’information pour une lisibilité ou une compréhension optimale. Les accès, illustrés par des visuels, sont identifiables rapidement. La présentation de l’information est quant à elle hiérarchisé et aérée, et les modules fonctionnels simples, performants et ludiques.

L’interface se décompose en 5 parties distinctes :

• 1 - La zone marque/navigation
• 2 - L’espace “A l’affiche” mis en avant via le “Player emagin”.
• 3 - Les accès prochains films / prochaines sorties DVD.
• 4 - La zone “push infos” proposant les actualités ainsi que le catalogue DVD
• 5 - le menu footer.

1 - La zone marque

Elle propose en premier lieu le logo, placé en haut à droite le rendant ainsi immédiatement visible. Sur la droite au même niveau sont proposés les différents accès de premiers niveau de l’arborescence. Nous avons identifié 5 grands accès : les films à l’affiche - Les prochaines sorties - Les films en production - Le catalogue DVD/BLU-RAY - Le catalogue des bandes annonces. Cet espace héberge également les accès à l’espace Corporate ainsi que la connexion à l’Intranet EuropaCorp.

2 - L’espace “a l’affiche”

Emagin a développé un Player (lecteur) multimédia qui permet, dans un module unique, la diffusion des différents médias disponibles sur internet : l’image, la vidéo et le son. Ce module, adapté ici pour ce projet, est imposant et prédominant sur la page d’accueil. Il permet ici de mettre en avant de manière ludique et intuitive les films à l’affiche. Il offre un grand nombre de fonctionnalités très utiles qui sont autant de valeurs ajoutées à l’information proposé. Ce Player et ses fonctionnalités sont décrits un peu plus bas. L’accès “A l’affiche” propose, en plus du grand visuel de Player, 3 gros accès qui invitent à accéder au détail des films présentés : voir la fiche de détail du film - visionner la bande annonce - voir le mini site du film.

3 - Les accès prochains films / prochaines sorties DVD

Illustré par de simples visuels, ces accès proposent au simple survol (cf image accueil 2) la consultation de la fiche du film, la bande annonce ainsi que l’accès au mini site (le cas échéant).

4 - La zone “push info”

Composée de 2 parties, elle propose en premier lieu la consultation des actualités d’EuropaCorp. Ludique, ce module présente les différentes actualités sous forme de titre et de date d’entrée. Au clic (mais également via les flèches situées sur la droite), la bande de titre glisse dans l’espace central, déplaçant de ce fait les autres titres, et laisse apparaître le détail de l’actualité sélectionnée. Elle est composée d’une date, d’un titre, d’une texte de descriptif ainsi que d’un visuel relatif à l’actualité (ici l’image B13-U en fond).

La seconde partie de cette zone présente le catalogue DVD. Présentées comme une galerie d’images en perspectives, les couvertures de DVD défilent sur un plan horizontal au clique sur l’image de la couverture DVD ou via le petit pilote situé sur la droite. Les mêmes informations essentielles se retrouvent pour chacun des films avec ici en plus la possibilité de commander le DVD en 1 clic.

Chacune des 2 parties offre la possibilité de consulter l’intégralité des entrées de ces modules : Voir toutes les actualités - Voir tout le catalogue DVD.

5 - Le menu footer.

Ce menu situé en bas de page présente de manière concise l’intégralité des accès proposés sur le site et offre, sous forme de cartouche, un espace de mise en avant d’une rubrique, (ici l’accès à l’espace Corporate). Ce menu footer propose également le module de recherche sur le site.

Le player emagin

Emagin a développé un player multimédia dont voici le descriptif et les fonctionnalités :

- 2 modes de visualisation : une vue standard s’intégrant dans vos pages. Un affichage fullscreen de la galerie multimédia qui occupe alors tout l’écran.
- 2 modes de lecture : automatique - manuelle - suivant/précédent.
- Personnalisation via le fichier de configuration : couleurs des éléments graphiques, taille et mode de défilement des vignettes, auto hide de la barre d’aperçu, temps d’affichage des médias etc…
- Titre + descriptif des médias proposés.
- Vote des médias.

1 - Visuel d’aperçu qui s’adapte à la résolution définie pour le player, quelque soit la taille de l’image uploadé.
2 - Bouton d’accès à l’information sur le média en cours (titre de l’image + descriptif).
3 - Bouton de passage en mode plein écran.
4 - Bouton pause. Stopper la lecture automatique du média.
5 - Boutons média suivant / média précédent.
Au passage de la souris sur le bas du player, l’onglet d’aperçu de la galerie des médias s’ouvre. Il propose :
6 - Indication du défilement de la lecture automatique.
7 - Aperçu visuel du média + titre.
8 - Pour les médias son et vidéo, un icône représentatif s’affiche au dessus de l’image d’aperçu.
9 - Bouton de défilement des aperçu suivants ou précédent.

Présent sur la quasi totalité des pages, ce player est une réelle valeur ajoutée à l’information proposée. Que ce soit pour la présentation des films à l’affiche, des bandes annonce, des fiches de détail de films ou tout autre espace, ce module permet de constituer, dans une interface unique, une véritable galerie multimédia proposant de l’image, de la vidéo et des extraits sonores.

Chaque média placé dans le Player est visible, en mode standard, à une taille adaptée à la résolution définie pour le Player. Quelque soit la taille initiale de l’image, elle s’adapte automatiquement. Le Player se charge de générer une image réduite en dimensions tout en conservant sa qualité visuelle afin d’optimiser les temps de chargement.

Lors du passage en mode plein écran vous disposez alors d’une visualisation optimale et bénéficiez des images et des vidéos en tailles réelles. Vous pouvez ainsi diffuser une multitude de médias de grandes qualités visuelles ou sonores.

Nous proposerons très bientôt sur ce blog une démonstration en ligne de notre player.

> Voir les maquettes en taille réelle