L’idée initiale qui nous avait conduits à choisir le système modulaire que l'on trouve dans la v2 était de proposer à l’utilisateur une solution permettant de transformer le portail de son VHS-4 en un centre d’information et de consultation de leurs données. Nous ne voulions pas que ce portail soit uniquement un outil de configuration du VHS-4.
Malheureusement, nous n’avons pas su exploiter cette modularité en proposant des modules avec suffisamment de valeur ajoutée pour justifier leur installation sur un VHS-4. Par ailleurs, ce portail version v2 était compatible avec les modules iGoogle, mais cette fonctionnalité n’a jamais été exploitée.
En parallèle, la taille des modules nous a souvent bridés dans le développement de nouvelles fonctionnalités. Nous avons régulièrement été obligés de choisir entre l’ajout de nouveaux paramètres et la nécessité de conserver une certaine simplicité à l’interface, ce qui nous a conduits à proposer certaines applications dans un menu qui s’ouvrait en plein écran au lieu d’un simple module.
L'architecture même de cette interface, et en particulier l'impossibilité de faire communiquer des modules entre eux, nous a amenés à repartir d'une feuille blanche pour le design de la nouvelle interface utilisateur. L'amélioration des performances des navigateurs a également ouvert la porte à plus d'interactivité, et à de nouvelles possibilités en terme d'ergonomie et de design pour une meilleur expérience utilisateur. Sur la v3 nous avons transféré l’ensemble des applications dans un menu disponible en permanence à gauche de l’écran, à la manière d’un dock. Les applications s’ouvrent dans une fenêtre dans la partie droite de l’écran, à la manière d’un bureau classique. Afin de conserver la possibilité d'afficher plusieurs fenêtres (comme par exemple le module de vidéo-surveillance) nous avons implémenté pour certaines applications la possibilité pour l'utilisateur de créer un widget qui peut être placé sur le bureau et gardé en permanence sous les yeux. Chaque utilisateur pourra également personnaliser l'apparence de son interface en changeant le fond d'écran.
Concrètement, le menu occupe la gauche de l’écran, et toute la hauteur disponible du navigateur. Ce menu est déroulant, et permet d'accéder à l'ensemble des applications disponibles pour l'utilisateur en fonction de son profil.
Sous le menu se trouve une zone de lancement rapide sur laquelle on peut venir glisser/déposer les icônes des applications du menu les plus couramment utilisées pour un accès rapide à celles-ci.
Sous cette zone de lancement rapide se trouve l’avatar de l’utilisateur (qui permet de se déconnecter), et une zone de notification où sont affichées les tâches en cours sur le VHS-4 et les messages en provenance du VHS-4.
La partie droite de l’écran accueille les fenêtres des applications et constitue la zone de placement des widgets.
Les fenêtres peuvent être déplacées sur le bureau, et ressemblent à celles rencontrées dans un OS classique. Elles disposent de boutons permettant les actions habituelles telles que fermer, agrandir…, ainsi que de nouveaux boutons. Par exemple, le bouton widget permet de transformer en widget toute application qui offre cette possibilité, tandis que le bouton configurer permet d’atteindre les réglages spécifiques à l'application, astucieusement disposés à "l’arrière" de chaque application et rendus visibles par un effet de retournement. Enfin un bouton d'aide est disponible pour chaque fenêtre, et donne accès à une aide contextuelle immédiatement disponible à l'écran.
Les fenêtres peuvent bien sûr être déplacées, passées en arrière plan et redimensionnées pour les applications qui l'exigent. Nous avons voulu et conçu cette interface comme un véritable gestionnaire de fenêtres et lanceur d'applications. Son architecture nous permettra une très grande souplesse dans l'évolutivité future des applications et du serveur. Enfin, cela nous permettra également de proposer d'autres types de présentation (pour d'autres types d'écrans) ou différents thèmes relativement simplement et rapidement.
L’utilisation de l’interface est très intuitive et ne pose aucun problème d’adaptation à qui a déjà utilisé un ordinateur. L’expérience de navigation est agréable grâce à l’utilisation intensive d’HTML 5 et de CSS3 (animations, ombrages, effets de transparence), et permet d’oublier très rapidement qu’il s’agit d’un site web. Il ne faut d’ailleurs pas hésiter à passer son navigateur en plein écran (touche F11) pour profiter au mieux de l’interface. Un grand soin a été apporté à l’aspect graphique, et les couleurs utilisées, dans une déclinaison de bleu-gris, donnent à l’ensemble un style sérieux et moderne tout en étant très agréable à l’œil.
En contrepartie de cette nouvelle interface moderne, rapide et fluide, nous avons fait le choix d’abandonner le support des navigateurs ne supportant pas ces technologies. L’interface n’est donc plus compatible avec les versions de Firefox inférieur à 3, Chrome 2 ou safari 4, ni avec les versions inférieures à Internet Explorer 9.
Il n'était pas possible d'arriver au résultat que nous souhaitions sans utiliser intensivement l'HTML 5, le CSS 3 et bien sur l'AJAX. Les technologies Web ont heureusement fortement évoluées ces deux dernières années, et les développeurs de navigateurs l’ont bien compris puisque que l’on assiste à une accélération des versions de navigateurs (10 versions de Google Chrome en 3 ans, 4 versions de Firefox en 2 ans). Seul Microsoft a tardé à suivre le mouvement mais une grande partie du retard a été rattrapée avec IE 9. Pour mémoire, IE6 a vécu plus de 6 ans. Nous avons également pris en compte la quasi disparition de ces anciens navigateurs sur nos ordinateurs pour faire le choix de l'innovation par rapport à celui de la compatibilité.
Au fil des prochains articles, nous vous ferons découvrir d'autres captures d'écran de l'interface en lien avec les nouveautés. Pour ceux qui souhaitent réagir, n'hésitez pas à venir en discuter dans la section Le coin des développeurs>Firmware V3!
Jeu de briques
Snake
Pacman
Bubble