Site de la TIM 2020

Introduction du projet

  • Individuel
  • 7 sem.
  • Refonte d'un site web de A à Z
Le programme Techniques d’intégration multimédia (TIM) du Cégep de Sainte-Foy forme à chaque année des étudiants dans le domaine web, tant sur le plan du design que de la programmation/intégration. Pour la version 2020 de leur site, ils voulaient un site à leur image, soit actuelle et vivante, avec une emphase particulière mise sur l’interactivité et l’immersion de l’utilisateur. Étant seule à réaliser ce projet, j’y ai vraiment développé mes capacités d’analyse et de résolution de problèmes.

Mes rôles

Analyse, Conception, Design, Programmation et Intégration

Technologies/outils

Wordpress, 5.3.2, Figma, PHP(v7.2.9), TypeScript(v2.7.1), jQuery(v3.4.1), Sass(v4.13.1)

Code complet du projet disponible sur GitHub

Le but

  • Mettre de l’avant les diplômés de la technique, ainsi que leurs réalisations
  • Présenter la vie de programme de façon continue
  • Donner toutes les informations nécessaires à un futur étudiant
  • Donner toutes les informations nécessaires sur les stages à un employeur potentiellement intéressé à prendre des stagiaires
  • Permettre aux utilisateurs de contacter les différents responsables du programme

Besoins utilisateurs

Après avoir fait des entrevues utilisateurs au près de la clientèle cible principale (soit les futurs étudiants), ce qui est revenu le plus souvent est le désir “de voir plutôt que de lire ce que les gens font dans en TIM”. Cela m’a permis de définir le point central de mon concept pour le site : les réalisations.

Du côté administrateur, les besoins étaient d’avoir une interface admin qui permettait plein contrôle à un webmestre non-programmeur (autrement dit, qui n’irait pas jouer dans le code). On voulait modifier rapidement et efficacement les informations, en ayant les informations pertinentes regroupées.

Diagramme de cas des utilisateurs (clients)
Diagramme de cas des utilisateurs (admins)

Choix design centrés autour des réalisations

Problématique :

Comment harmoniser les couleurs du site aux différents styles et couleurs des réalisations de chaque étudiant?

Plusieurs projets différents par des personnes différentes pouvaient créer une désorganisation visuelle assez rapidemment. Pour contrer le problème, j’ai plutôt décidé de sortir une couleur agencée à chaque réalisation. À chaque fois qu’il serait questions de cette réalisation en question, j’utilise la couleur associée (pour la décoration, les éléments graphiques, les liens vers la réalisation, etc…). J’ai aussi choisi un thème noir et blanc pour le reste des interfaces, pour maximiser l’harmonie visuelle du site.
Exemple des maquettes de différents projets avec les couleurs associées pour chacune.
Une couleur par réalisation : solution pour l’harmonie visuelle

J’ai associé, à l’aide d’ACF, un code de couleur hexadécimal à chaque réalisation. Maintenant associée dans la base de données wordpress, je pouvais utiliser un appel PHP au custom post pour afficher de façon dynamique la couleur accent selon la réalisation affichée.
Capture d'écran de la page des réalisations.
Dans les pages, la couleur est appelée dynamiquement par PHP, selon la réalisation (ici, les liens ‘en voir plus’).
Capture écran de l'outil de couleur créé dans Wordpress.
Le champ créé avec ACF dans l’interface administrateur permet d’associer une couleur à chaque réalisation.
C’est à l’accueil que j’ai vraiment poussé le concept de design centré autour des réalisations. À chaque rafraîchissement de la page, une nouvelle réalisation s’affiche, changeant par le fait même la couleur d’arrière-plan pour celle associée. Avec une vocation plus graphique, j’ai voulu accrocher les utilisateurs et les inciter à aller voir plus loin dans le site. Une touche ludique s’ajoute aussi avec le bouton ‘Une autre’, qui permet à l’utilisateur de rafraîchir manuellement la réalisations affichée.
Capture de l'accueil du site.
Le clic du bouton ‘une autre’ permet de changer la réalisation affichée à l’accueil.

Organisation de l'information

Dans un site très informatif, avec beaucoup de contenu, j’ai voulu trouver une façon de traiter l’information de façon graphique le plus possible. Pour se faire :

À la page descriptive du programme
  • Un video reel joue en en-tête de la page (avec contrôles custom pour arrêter/faire jouer le vidéo par l’utilisateur).
  • Les textes plus long ont été concis, et une organisation graphique du contenu a été priorisée.
  • Les détails du programme se trouvent dans une visionneuse peu conventionnelle, donnant un aspect un peu plus interactif à la page.
Capture d'une section de la page Programme.
Les diciplines qui composent le programme sont résumées en points clés, avec une représentation graphique.

La visionneuse de la composition du programme a été modifiée et personnalisé à partir de la librairie glide.js. J’ai ajouté des écouteurs d’événement sur les contrôles pour qu’ils déplacent la charte des pourcentages en même temps. Les éléments graphiques composant la charte sont des svg directement dans le html, dont la visibilité des éléments est modifiée au besoin par l’ajout de classes par TypeScript + jQuery.
Capture d'une section du code typescript.
Pour voir tout le code, visiter mon repo GitHub du projet, dans le fichier Visionneuses.ts
À la page des stages Séparation du contenu selon la clientèle ciblée:
  1. Section du haut de page – Futurs étudiants
    • Refonte de certains textes pour diminuer la charge de travail.
    • Utilisation des formes géométriques et des couleurs en aplat pour organiser le contenu.
  2. Section du bas de page – Employeurs
    • Regroupement de toutes les informations pertinentes en un seul endroit.
    • Ajoût d’un formulaire de contact à même la page, juste à côté des informations pertinentes pour les stages, afin d’augmenter les chances de participation de la part des employeurs.
Capture du contenu de la page des stages.
Séparation du contenu selon la clientèle ciblée, et centralisation des informations pertinentes.

Contrôle utilisateur & accessibilité

La page dédiée aux réalisations devait, selon les demandes de notre client, contenir une forme de tri simple. Par contre, 24 diplômés × 4 réalisations = 96 items listés sur la même page… c’est beaucoup d’information à parcourir.

Problématique:

Comment permettre à l’utilisateur de personnaliser son expérience, que ce soit la première ou la enième fois qu’il visite le site?

Offrir plutôt un système de filtres détaillé permettant d’afficher clairement selon les besoins de l’utilisateur. Après avoir réfléchi, je me suis arrêtée sur cinq filtres qui, selon moi, couvrent une spectre assez complet de taxonomie des réalisations.

Pour les diplômés et sessions, toute l’information nécessaire était déjà dans la base de données. Pour disciplines, mots clés et type de projet, j’ai ajouté des champs avec ACF dans l’interface administrateur, où l’admin pouvait cocher les valeurs correspondantes pour chaque réalisation.

Les options retenues pour pouvoir filtrer les réalisations sont : par diplômés, par session, par discipline, par mots clé, ou encore par type de projet.
Filtres variés pour permettre à l’utilisateur d’afficher les réalisations selon ses préférences.
Capture des champs pour les filtres, sous forme de boîte à cocher.
Dans l’interface administrateur, l’ajoût du champ étiquette permet d’associer les réalisations au filtres.
Pour alléger visuellement le menu de tri en format mobile, j’ai opté pour une organisation verticale, avec un système de “menu accordéon” pour chaque élément du filtre.
Maquette des filtres vus d'un écran de téléphone intelligent.
Par contre, en format table, la même organisation devenait trop chargée. Après quelques tests, une disposition horizontale la solution idéale consistait en des onglets montrant le contenu associé dans un seul espace.
Maquette des filtres vus d'un écran d'ordinateur portable.

L’accessibilité du menu des filtres a été une préoccupation particulière. Il a donc été concu afin d’être navigable au clavier (sans la souris). Les étapes :
  • Rendre tabable les éléments interactifs clés (HTML + TypeScript)
  • Rendre les éléments de menus ‘cachés’ non-tabables (TypeScript)
  • Ajouter le focus immédiat dans les choix si sélection de l’onglet faite au clavier (TypeScript + SCSS)
  • Ajouter l’effet au survol au :focus aussi, pour la visibilité (SCSS)
*** Vous pouvez tester le résultat responsive et accessible des filtres dans l’exemple interactif ci-bas.

Voyez ce pen par Marie-Noëlle Grant (@Marienoelle) en cliquant ici sur CodePen.

Conclusion

Avec la réalisation du site de la TIM, j’ai appris à travailler avec les limitations ou les problèmes rencontrés, plutôt qu’essayer de trouver une solution différente. Quoiqu’un peu plus lent à démarrer, je crois que c’est un processus très intéressant qui m’a demandé d’exploiter ma créativité davantage, tant sur le plan design que programmation/intégration. Ce projet a aussi été un grand défi, puisque c’est la première fois que j’entreprenais un projet de cette envergure, seule, avec des connaissances encore embryonnaires d’un CMS comme WordPress. J’en sors avec une nouvelle confiance en mes habiletés d’adaptation et d’apprentissage. De plus, bien que je préfère de loin travailler en équipe, cela m’a permis de cerner un peu mieux mes capacités dans les différentes sphères d’un projet web complet.