Conversational semantics

Case-Study

L'avant propos de Iolce

La fin d’année approchant, les professeurs nous gardaient une seconde tâche au chaud, bien différente de ce que l’on avait pu tester la première fois.

Dans un premier temps, il nous fut demandé de choisir chacun une conférence, parmi une liste de 10 vidéos, dont nous devions présenter ce qu’elle nous avait appris et ce que nous avions ressenti.

La vidéo que j’avais choisie portait sur la manière dont nous devrions traiter les utilisateurs de nos interfaces et à quel point il est important de penser un coup à l’avance sur l’utilisateur pour lui éviter des erreurs. Je préparai sans grand mal mon oratoire et, le jour venu, je le récitai devant la classe entière, tentant d’être aussi convaincant que possible.

Après avoir vu les présentations de chaque étudiant, nous fûmes invités à nous rassembler par groupes de quatre afin de réaliser un résumé collectif de l’une des conférences choisie à l’unanimité au sein de ces dit-groupes.

Le projet “Iolce” allait ainsi pouvoir réellement commencer.

La concréti­sation de l'atelier

La conférence que nous choisîmes s’appelait “Conversational semantics”, présentée par Aaron Gustafson, portant sur l’importance d’une bonne sémantique dans un code HTML.

Les membres de mon groupe et moi-même avions déjà pu effleurer le sujet auparavant, via un article donné lors d’un précédent exercice ; peut-être une sorte de prémisse à ce qui nous attendait.

Étant donné que le thème de l’accessibilité grâce au code m’intéressait particulièrement, il me sembla tout naturel de voter favorablement au choix de cette conférence.

À côté de nos activités de groupe, les professeurs nous demandèrent de tenir un carnet de bord du projet, le case-study que vous lisez actuellement, ainsi que de réaliser un rapport personnel de ce qu’avait éveillé en nous la conférence choisie par le groupe.

Ce rapport serait lisible par tous – via un site tout aussi individuel que nous avions à créer – et les propos seraient accompagnés d’éléments graphiques descriptifs afin d’en faciliter la compréhension.

L'objectif du case-study était claire ; établir le compte-rendu détaillé de tout l’atelier, de tous les essais réalisés et tout illustrer, dans l’objectif d’être capable de réitérer un tel projet, sans commettre les mêmes erreurs.

D’autres consignes vinrent s’ajouter, telles qu’un mode sombre et un menu pour plus facilement naviguer à travers les pages constituant le rapport.

Le logo

Le site avait pour obligation de posséder un style graphique personnel, devant disposer d’une structure par les grilles (telle que nous l’avait enseigné l’un des professeurs), mais également d’images et de mise en page des textes.

Le site étant personnel (malgré les parties collectives exigées), il nous fut demandé de créer un logo original à base de formes géométriques simples.

Je tentai donc différentes choses. D’abord en restant autour du thème du cerf afin de garder une continuité avec l’illustration de mon précédent site, mais en y réfléchissant plus profondément, je décidai de changer complètement d’axe.

En effet, le style de site portant sur une telle conférence ne correspondait pas à ce que j’avais l’habitude de réaliser en termes de graphisme ; il me fallait partir avec une toute autre perspective.

C’est pourquoi je me mis dans un état d’esprit proche de ce que m’inspirait l’image mentale du site que j’imaginais, cherchai des références sur de nouvelles sources et entamai de nouveaux essais, avant de finalement trouver le résultat que je voulais.

Le style graphique

Cette première étape terminée, je m’attelai à trouver les bons ingrédients d’une bonne touche graphique à apporter au site. Je tentai différentes approches, m’essayant à des exercices que je n’avais jamais réalisés auparavant, toujours dans l’optique de correspondre au thème de la conférence.

C’est ainsi que je me retrouvai à chercher l’inspiration dans les magazines, sur des affiches de théâtre ou de conférences pour créer l’entête de mes pages, laquelle serait la première chose que chaque lecteur verrait à l’arrivée sur mon site.

Au fil des itérations, l’idée qu’il me fallait recréer une structure semblable à celle d’un code HTML pour mes textes s’ancra dans mon esprit. Je décidai donc d’encadrer mes paragraphes d’une certaine manière, mes citations d’une autre, changeant de signe distinctif – sciemment comparable à des balises de code – et de style de texte pour chaque catégorie.

Ces signes furent ensuite teintés d’une couleur bleue claire (couleur liée à la communication par excellence), contrastant avec les tons noir et blanc du reste du rapport, choisis quant à eux pour leur sérieux. Le but était de permettre une lecture plus simplifiée pour l’utilisateur ainsi qu’appuyer la structure pour aider à se repérer dans les textes.

Première présenta­tion

Nos professeurs avaient convenu d’une date pour une première présentation de nos projets avant la remise finale, histoire de nous remettre sur le droit chemin en cas de besoin. Je m’efforçai donc d’atteindre un niveau satisfaisant avant cette première appréciation.

Malheureusement pour moi – ou plutôt heureusement pour le projet – il en résultat qu’il me fallait tout revoir de ma touche graphique ; si la structure, et donc les grilles installées, était bonne, le style n’en était que trop agressif, trop exagéré dans certains cas, inutile pour le reste. Seul mon icône signalant les paragraphes survécut à la tornade correctrice.

Je retournai donc quasiment au point de départ, ou presque car j’avais maintenant au moins une idée légèrement plus précise de ce qui était à ne pas faire.

Correc­tion

Comme à mon habitude, cet échec ne m’avait permis que de mieux me relever. Car si je n’étais pas certain du résultat obtenu la première fois, les professeurs n’avaient fait que confirmer mes soupçons. J’avais maintenant champ libre pour suivre mon intuition, que j’avais initialement fait taire. Je partis donc dans une toute autre direction, emmené par une inspiration nouvelle.

Je gardai l’idée de débuter mes pages par une entête censée accrocher le regard de l’utilisateur et j’y ajoutai un brin de structure supplémentaire en l’organisant en bloc suivant la célèbre courbe de fibonacci – ce qui donnait un style plus distingué, selon moi.

L’idée de diviser le contenu de manière logique était une bonne piste, certes, mais je ne l’avais pas appliquée de la bonne manière. Dans ma première itération, le lecteur se retrouvait assailli d’informations, ne sachant plus où donner de la tête et se perdant bien trop facilement au final, ce que je cherchais originellement à éviter.

Pour atteindre mon but, je décidai de diviser les grandes parties seulement et de garder ensemble ce qui devait logiquement se trouver ensemble – autrement dit, j’appliquai la loi de proximité.

Pour ne pas ennuyer le lecteur avec des zones de texte interminables, je choisis d’aérer mes paragraphes en les découpant, divisant en deux les parties trop longues mais tout de même directement connectées et plaçant à différentes zones de la grille les informations plus indépendantes. Ainsi, lorsque la lecture était interrompue, toute personne restait à même de facilement s’y retrouver.

Si cependant je devenais satisfait de ce que je créais, il restait un problème majeur ; les couleurs.

En effet, pour des raisons de lisibilité, il nous était imposé de travailler avec des couleurs aux contrastes parfaits, ce qui n’était pas le cas de celles que j’avais choisies à l’origine. Je réussis néanmoins à résoudre le problème en choisissant deux teintes de bleus différentes en fonction du mode, qu’il soit sombre ou clair.

Pour que ça ne semble pas monotone, j’ajoutai encore des teintes de gris au reste. Le résultat était certes différent de ce que j’avais prévu, mais il restait cohérent avec ce que je voulais transmettre.

Codage du site

Voilà qui marqua la fin du processus de création de l’apparence générale du site, il me fallait désormais passer à sa mise en place.

Je commençai donc par inscrire tout le contenu brut dans le code HTML, ajouta les actions demandées en javascript – telles que la gestion de la date du copyright et la mise en place du burger menu, ainsi que le darkmode (dont le code nous fut grâcieusement offert par l’un des professeurs car nous n’avions pas eu le temps de voir la matière en cours) – et y appliquai par la suite le style créé en CSS.

Tout se passa sans réelle accroche. J’envisageai même d’ajouter quelques fantaisies, telle que changer une image en fonction de l’activation ou non du darkmode.

Cependant, si le code fonctionnait correctement, une erreur que je ne pouvais expliquer se glissa. Je me résolu à l’enlever, ne voulant pas m’encombrer d’une erreur et n’ayant pas de temps à consacrer à la recherche d’une solution pour ce détail.

Une vidéo

Afin de s’assurer que rien ne soit laissé au hasard durant le processus de réalisation de cet atelier, nous fûmes contraints de nous filmer et d’ajouter la vidéo au site.

Cette partie fut la plus simple de toutes, si simple qu’il n’y a aucun intérêt à en parler.

Conclu­sion

Durant cet atelier, ce qui me permit d’atteindre l’objectif fut de présenter mon travail, d’avoir un retour afin de me remettre sur la bonne voie.

J’ai pu déceler un grand facteur d’échec : le temps.

En effet, la durée de ce projet était relativement courte ; beaucoup durent sacrifier des nuits de sommeil afin de ne pas accumuler de retard.

D’un autre côté, la première présentation du projet aux professeurs fut bien trop rapprochée à mon goût de la date butoire, ce qui – pour tous ceux se retrouvant dans le même cas de figure que moi, c’est-à-dire devant tout reprendre à zéro – fut un réel handicap à mon sens.

Parallèlement, un autre facteur d’échec (car ce fut lui qui me priva le plus d’un temps précieux) ne fut rien d’autre que moi-même ; certes j’avais perdu des heures à travailler sur la première itération de mon site, qui fut mise à la poubelle, mais ce qui retarda réellement mon travail fut l’écriture des différents textes demandés.

Le nombre d’heures passées à réécrire maintes et maintes fois ce case-study et mon expérience personnelle – pour la simple et bonne raison que je ne savais pas sous quel angle présenter les choses, ni quel ton adopter – résultat d’un retard de remise de la page du case-study et, parfois, le bâclage de certaines parties du site.

J’en veux pour exemple que je dû me contenter de coder de manière classique mes pages, sans y appliquer les balises de sémantiques spécialement dédiées à la bonne accessibilité du site, balises que présentait Aaron Gustafson dans la conférence que j’analisai pour ce projet.

Voyez l’ironie de la chose…