Le portail MyUNIL prépare sa révolution

par Paulo Monteiro et Philippe Gardel, conception et développement, Ci-UNIL

Le look, l’ergonomie et la technologie du portail MyUNIL datent de son lancement en 2003. Ils vont être revus en profondeur, visite du chantier en cours.

15_myunil
© Minerva Studio – Fotolia

Le graphisme et l’ergonomie du portail MyUNIL apparaissent toujours tels qu’ils avaient été imaginés en 2003. Malgré une refonte technique effectuée en 2008, permettant son évolution au cours de ces dernières années en l’adaptant aux avancées technologiques et en apportant quelques nouvelles fonctionnalités, l’ensemble a vieilli et perdu sa cohérence au fil du temps. Il devenait indispensable de repenser le portail en profondeur en commençant par le socle technique, l’architecture, l’ergonomie et le graphisme.

15_myunil_historique

Qu’est-ce qu’un portail ?

La définition qui a servi de référence au projet MyUNIL dès le début est toujours d’actualité :

Un bureau virtuel, adaptatif, donc dynamique, personnalisé, proposant un accès unifié à diverses sources d’information et services, permettant d’interagir avec d’autres personnes, applications ou contenus pertinents et intégrant les activités administratives et académiques.

Notre but est de faire du futur portail MyUNIL un outil simple, rapide et efficace permettant de transmettre de l’information personnalisée à l’utilisateur et de lui fournir un moyen d’accéder aux différents outils informatiques indispensables à son travail quotidien.

Pour certaines fonctionnalités, MyUNIL ne sera pas le seul moyen d’accès, mais une voie toujours disponible pour l’utilisateur. Le projet EdUNIL (refonte du système de gestion académique) partagera aussi ce concept en axant sa communication avec les étudiants au travers de MyUNIL.

MyUNIL 3.0, un nouveau socle technique

Le premier chantier a été de choisir les environnements techniques et l’architecture qui nous permettraient d’atteindre les objectifs ambitieux de ce projet. Après une étude de marché des solutions portail, nous avons finalement opté pour la solution de portail d’entreprise Liferay, logiciel placé premier de sa catégorie dans le Magic Quadrant de Gartner.

Pour la conception des interfaces utilisateurs, nous avons opté pour ZKoss, un produit utilisé à satisfaction pour la conception du module Agenda. Ce produit est un des leaders dans le développement d’interfaces utilisateurs modernes et ergonomiques. Il permet une grande rapidité de conception et une remarquable légèreté et propreté du code développé.

Nous avons également décidé de baser la couche graphique sur Bootstrap, fourni par Twitter et qui nous garanti une bonne adaptabilité des interfaces utilisateur aux différentes plateformes d’accès (smartphone, tablette, laptop et desktop). Elle apporte aussi une homogénéité des interfaces développées.

15_myunil_technique

L’ergonomie et le graphisme

Le second chantier a consisté à définir les règles ergonomiques et le graphisme les mieux à même à remplir les objectifs ambitieux de ce projet. N’ayant pas ces compétences en interne, nous avons décidé d’externaliser cette partie et nous avons donc fait un appel d’offres à des entreprises spécialisées dans ce domaine. Après avoir reçu des offres et des concepts de plusieurs entreprises, notre choix s’est porté sur la proposition de Cross Agency. C’est cette entreprise qui nous a présenté le concept le plus innovant, en proposant simplicité, légèreté et efficacité pour le futur MyUNIL. La collaboration avec cette société a abouti à l’élaboration d’un document décrivant des concepts ergonomiques et des éléments graphiques pouvant être déclinés et appliqués sur l’ensemble du portail.

Si quelques concepts sont spécifiques au portail, une grande partie de la charte graphique et ergonomique sera déclinable dans d’autres projets de l’UNIL. C’est notamment le cas pour le projet EdUNIL, qui applique déjà ces concepts et recommandations.

MyUNIL exploitera des principes ergonomiques unifiés afin de permettre à l’utilisateur de toujours accéder aux fonctions et aux informations de manière efficace et simplifiée.

Voici les principes fondamentaux de la nouvelle ergonomie (cas de l’application Agenda) :

15_myunil_agenda_ergonomie

1. Espace utilisateur et identité
Le logo du portail est présent en haut à gauche de chaque page. L’accès aux informations liées à l’utilisateur est positionné au niveau du logo. En cliquant sur son avatar, une liste déroulante permet d’accéder à ses informations personnelles et de se déconnecter.

15_myunil_agenda_identite

2. Recherche et aide
Le moteur de recherche est positionné en haut à droite de chaque page. Une liste déroulante permet de filtrer les résultats. Des liens permettent d’accéder aux pages transverses : donner son avis, aide et contact.

3. Navigation de premier niveau : fonctions et outils
La navigation de premier niveau est présente sur toutes les pages. Elle est construite sous forme de pictogramme + intitulé. Elle se compose de 2 grandes parties : l’une orientée utilisateur (à gauche), l’autre orientée UNIL (à droite).

La barre de filtres/actions/affichage permet d’agir sur le contenu des pages par le biais d’actions, de filtres, ou de possibilités d’affichage multiples voir de combinaison de ces fonctionnalités.

15_myunil_agenda_filtres
Barre de filtres
15_myunil_agenda_navigation
Système de navigation (affichage) et de boutons combinés (action)

Le bouton d’action centrale permet de lancer dans chaque application une action dans l’outil en cours d’utilisation, comme par exemple ajouter un événement pour l’outil Agenda ou ajouter une publication dans l’outil Serval.

15_myunil_agenda_actioncentrale
Bouton d’action centrale

 

MyUNIL passe à l’ère mobile

A l’ère du mobile, il paraissait impensable de commencer un chantier d’une telle envergure sans penser mobile first. Mais contrairement à un site web classique où ce principe est facile à appliquer, la difficulté avec un portail est qu’il offre souvent une panoplie de fonctionnalités très avancées difficilement adaptables à des résolutions de smartphone.

Pour chaque application du portail nous avons donc pris la décision de lister toutes les fonctionnalités offertes et choisi celles qui pouvaient être accessibles sur smartphone.

15_myunil_agenda_mobile
Vue agenda mobile
15_myunil_agenda_desktop
Vue agenda desktop

Pour la même application, l’utilisateur a accès à une palette de fonctionnalités différentes entre la vue mobile et desktop. Dans la vue mobile, l’utilisateur a simplement accès à son emploi du temps journalier avec la possibilité de consulter ses documents de cours. Par contre dans la vue desktop, il a accès à toutes les fonctionnalités, ajout d’événements, plusieurs vues (liste, semaine, mois) et gestion de ses tâches.

Le but de l’équipe de développement était d’utiliser le même code pour développer ces différentes vues. L’utilisation de Bootstrap et ZKoss nous a beaucoup facilité la tâche dans ce processus, puisqu’il nous a permis d’atteindre le but fixé, tout en garantissant au code développé une grande simplicité et évolutivité.

Le « Quoi de neuf ? »

Pour répondre à la maxime il faut s’informer avant d’agir, un nouveau concept fera partie intégrante de MyUNIL 3 : le Quoi de neuf ?

Après s’être authentifié sur le portail, l’utilisateur aura accès à plusieurs flux de nouveautés, ce qui lui permettra de voir les événements importants qui se sont produits depuis sa dernière visite sur le portail et d’agir en conséquence. Il pourra par exemple voir qu’un nouveau document a été ajouté dans l’un de ses espaces de cours, et il pourra si nécessaire le télécharger directement.

Plusieurs événements seront affichés dans ce nouvel outil, comme par exemple les messages non lus, les prochains événements de son emploi du temps (calendrier exchange, horaires de cours et d’examens), dernières publications dans les actualités, ajout de documents dans l’espace cours et publication des résultats d’examens. Cette palette d’informations va certainement encore s’étoffer dans le futur.

15_myunil_quoideneuf

Le dossier académique

Le dossier académique est une des fonctionnalités les plus utilisées par les étudiants, surtout en période d’examens : c’est par cette voie que sont remis les résultats de leurs évaluations et l’historique de leurs études à l’UNIL. La version actuelle, bien que fonctionnelle, est très difficile à lire pour la plupart des étudiants. Chaque étudiant ayant son propre parcours universitaire, son propre plan d’études et objectifs, ce dossier est devenu très difficile à maintenir et donc à faire évoluer.

Pour MyUNIL 3.0, nous sommes donc partis sur une approche différente afin de simplifier cet outil, en le rendant aussi ergonomique et lisible que possible.

Le dossier académique a donc été partagé en deux vues, une vue synthétique affichant les résultats des évaluations par semestre académique triés par objectif et une vue détaillée affichant tout l’historique des études à l’UNIL.

15_myunil_acad_synth
Vue synthétique
15_myunil_acad_global
Vue globale

Depuis la vue globale l’étudiant aura accès au détail complet de son plan de cours.

Le retour de l’agenda

En 2014, une partie des fonctionnalités de l’agenda de MyUNIL ont été transférées dans Exchange. Il a donc fallu repenser complètement cette application afin de l’adapter aux nouveaux standards de connectivité et d’ergonomie, mais surtout de la centrer sur l’utilisateur en lui apportant une valeur ajoutée par rapport aux outils existants.

Nous avons donc pris la décision de revoir en profondeur cette application.

L’utilisateur aura accès à une nouvelle palette de fonctionnalités facilitant la gestion de son emploi du temps depuis un point central.

L’utilisateur aura accès en lecture et écriture à ses données d’Exchange (calendrier principal, tâches, invitations) mais aussi à toutes ses données académiques (horaires de cours et horaires d’examens).

L’autre préoccupation a été de réfléchir à une façon élégante de fournir un point central, depuis lequel l’utilisateur pourrait accéder et synchroniser ses horaires académiques. En effet, on est arrivé à la conclusion que l’utilisateur moderne utilise des outils personnels pour la gestion de son emploi du temps, certains sont des adeptes des applications Google, d’autres utilisent iCal ou encore Outlook, mais aussi de plus en plus de personnes utilisent exclusivement leur smartphone. Le but final de ces développements était donc de fournir un point d’accès unique pour synchroniser ses données académiques avec son outil préféré.

15_myunil_agenda_synchro
La synchronisation

Agilité, une nouvelle approche de gestion de projet pour MyUNIL

Le terme Agile définit une approche de gestion de projet différente des approches traditionnelles qui sont généralement prédictives et séquentielles. Une approche traditionnelle de gestion de projet attend généralement du client final un contrat exhaustif incluant la liste de toutes les fonctionnalités désirées pour le produit final. Cette approche laisse peu de place au changement, puisque tout est décrit dans une documentation exhaustive avant le démarrage du cycle de développement.

L’approche Agile propose au contraire de réduire considérablement cette approche prédictive en donnant davantage de visibilité au produit, mais surtout en impliquant le client final du début à la fin du projet et en adoptant un processus de développement itératif et incrémental. Dans le cadre de MyUNIL, plusieurs groupes de travail ont été formés, afin de créer un produit final s’approchant au maximum des besoins de nos utilisateurs.

Les valeurs principales véhiculées par les méthodes agiles sont les suivantes :

  • Individus et interactions plutôt que processus et outils
  • Développement logiciel plutôt que documentation exhaustive
  • Collaboration avec le client plutôt que négociation contractuelle
  • Ouverture au changement plutôt que suivi d’un plan

Nous avons choisi des méthodes de développement dites agiles pour MyUNIL 3.0, car un portail largement utilisé par des étudiants a besoin d’évoluer vite, à l’image de ses principaux utilisateurs toujours jeunes, toujours adeptes des dernières technologies (l’approche classique reste pertinente dans d’autres contextes). Ces méthodes visent à réduire le cycle de vie du produit en commençant par développer une première version, fournissant une palette de fonctionnalités indispensables à la viabilité du produit, puis d’ajouter des fonctionnalités par un processus itératif basé sur une écoute du client.

Nous pouvons ainsi réaliser des tests en incluant les utilisateurs finaux tout au long du cycle de développement et donc de corriger les problèmes avant même une première mise en production.

Dans la palette des outils agiles nous avons choisi d’utiliser SCRUM. Cette méthode définit un cadre de travail permettant la réalisation de projets complexes qui sont divisés en plusieurs cycles de travail relativement courts que l’on appelle sprints. Dans le cadre de MyUNIL, ces sprints durent trois semaines. Durant ces 3 semaines l’équipe de développement est isolée et peut se concentrer au maximum sur les développements prévus. Ces sprints nous permettent d’évaluer régulièrement les progrès liés au projet et de planifier les prochaines étapes de développement.

MyUNIL 3.0 c’est pour quand ?

Contrairement à un nouveau produit qui arrive sur le marché, qui fourni souvent une liste de fonctionnalités limitée, MyUNIL existe depuis plus de 10 ans déjà et au fil des années est devenu un outil indispensable pour la communauté universitaire (plus de 8000 accès journaliers). Nous avons donc déterminé les fonctionnalités indispensables à développer pour une première mise en production.

Ce processus de priorisation des fonctionnalités et l’utilisation des outils de planning de projet offerts par la méthode Scrum, nous ont permis d’estimer une première date de sortie.

En l’état actuel du projet et des estimations de planning, MyUNIL 3.0 devrait être mis en production en automne 2016.