Le défi:
raconter sur écran

Instruction: Remanier une conférence vidéo en une expérience interactive.
Par groupe de 4 étudiants à l’HEAJ en web et multimédia (DWM), nous avons eu pour défi de réinterpréter une conférence destinée à être affichée sur les interfaces écrans.

Scroller vers le bas

Des images aux lettres

L’histoire commence par une conférence qu’on a visionnée, à partir de là, beaucoup d’idée et beaucoup d’interprêtation fusent. C’est pourquoi à nous 4, nous avons déconstruit puis ensuite analysé la vidéo pour la restranscrire avec nos mots.

Nous avons d’abord pris chacun de notre côté des notes sur cette conférence, puis petit à petit, nous avons reconstruit la vidéo sous forme de textes.

Application d'une grille photo sur un extrait de la conférence

27:48 The third principal is…, is negativity. And it’s very difficult here.

L’une des plus grandes difficultées durant cette étape était d’arriver vers un système de narration commun. C’est pourquoi, nous avons pris le temps de définir notre public cible, comprendre à qui s’adresse notre restranscription. Á partir de ce moment, tout semblait plus clair, nous comprenons pourquoi et pour qui nous faisons celà.

Voir le google doc
Extrait d'un google doc traitant des données sur la conférence

Nous nous sommes dirigés vers différentes pistes, l’une d’elle était de retranscrire cette vidéo sous le thème culinaire. Après plusieurs essais peu probants, notamment dûs à d’énormes problèmes d’interprétation et du manque de lien avec la conférence, nous avons immédiatement abandonné cette voie.

Effectivement, le thème culinaire était trop restreint, donc des débordements ou même du hors sujet étaient inévitables, c’est pourquoi nous sommes arrivé vers une voie universelle, une voie qui parle à tous. Nous nous sommes mis en quête de rédiger pour vous, plus précisément pour ceux qui contribuent à la création et/ou à la distribution/redistribution de l’information.

Élaborer un ordre

Á présent, nous devons donner une certaine hiérarchie et une suite logique à notre texte. C’est durant cette étape que nous allons établir une structure. Nous allons définir une arborescence à notre contenu à savoir, ce qui prime à ce qui est obsolète.

Nous allons d’abord commencer par clarifier un maximum notre texte, c’est-à-dire: éliminer ce qui semble superflu, ce qui est répétitif ou encore tout ce qui freine la compréhension globale de notre contenu. Après cette première sélection, nous allons ensuite définir un ordre de priorité pour faciliter mais surtout pour améliorer la compréhension de notre récit.

Penser à tout type d'écran

N’ayant nul idée sur quels supports nous allons adapter notre contenu, nous avons au préalable penser à adapter la totalité de notre contenu sous différentes déclinaisons. La progression des nouvelles technologies nous amènent à proposer plusieurs versions et non pas seulement sur les écrans d’ordinateurs.

Suite à celà, nous ne pouvons plus nous baser sur une norme, c’est pourquoi nous avons dressé un adaptive content, c’est à dire, un contenu qui répond à n’import quel type de support.

Voir l'adaptive content

Nous avons aussi retravaillé nos textes pour qu’ils puissent être visible peu importe la demande. Pour cela, nous les avons déclinés sous différentes longueurs.

Voir les déclinaisons

Construire sur écran

Une fois le contenu défini, nous allons commencer à donner forme à nos textes. Durant cette étape et de part les instructions, ce processus de mise en page se fera chacun de notre côté. Nous allons donc tous les 4 proposer une version de ce contenu sur écran.

Je vais tout d’abord définir une grille, et à partir de cette grille, je vais commencer à construire la structure de mon interface. Après, c’est une partie de  Tetris  qui commence, on place les éléments de manière assez harmonieuse sans pour autant les étouffer, c’est pourquoi nous allons définir des gouttières à notre grille qui serviront de marge pour espacer nos éléments.

Comme pour le contenu, on n’y arrive pas forcément du premier coup, j’ai du m’y reprendre à plusieurs fois afin d’arriver à un résultat satisfaisant. J’ai commencé par travailler sur une grille de 12 colonnes, mais par manque de flexibilité et de maniabilité, les éléments étaient beaucoup trop serrés, ceux-ci obstruaient la visibilité du contenu.

C’est pourquoi, j’ai décidé de travailler sur 16 colonnes, en augmentant ce nombre, j’obtiens plus de libertés et plus possibilités pour ce qui est de placer mes éléments. Varier la mise en page de mes éléments est une bonne pratique, notamment pour ne pas donner une lecture trop linéaire à mon contenu ce qui peut causer de l’ennui ou un sentiment de déjà vu. Par conséquent, donner plusieurs formes tout en respectant la grille à un contenu, c’est aller vers une lecture beaucoup plus dynamique.

Concevoir pour vous

Avant d’attaquer la phrase de production, je vais commencer par effectuer des essais. A l’aide de l’application Sketch, qui me permet de construire des wireframes, je vais pouvoir visualiser le rendu final de mon interface.

De part cette étape, je peux donc juger la viabilité de ce que je vais produire. C’est à travers les tests d’utilisateurs et grâce aux feedbacks que je peux continuellement améliorer ma future interface et éventuellement corriger certaines erreurs.

Image de l'interface, traitée sur sketch

Après plusieurs tests d’utilisateurs et feedbacks, ce premier essai de wireframe comporte énormémant de problème, à savoir: titre pas assez explicite, élements qui ne sont pas alignés à la grille et incompréhension de la barre de navigation.

Sur cette wireframe, on peut remarquer que je n’introduits pas mon contenu, j’expose directement le sujet face à l’utilisateur ce qui peut pertuber le spectateur et l’amener vers une incompréhension et une certaine frustration.

Je suis donc parvenu à corriger et à résoudre ces éléments et j’ai mis en place une interface beaucoup plus intuitive et facile d’accès.

J’ai notamment changé les titres de ma navigation pour qu’ils soient beaucoup plus compréhensible et je propose aussi une page de présentation qui introduit correctement le sujet sur lequel je veux que mes spectateurs / mes utilisateurs se concentrent.

Sculpter sa structure

C’est l’étape où l’on va affiner notre mise en page, donner de la vie et du peps à notre structure afin de rendre toute notre interface plus agréable et plus éfficace à consulter. Pour y arriver, nous allons établir une charte graphique pour ne pas surcharger notre interface, car le but premier est de faciliter la lecture pour que l’utilisateur puisse se concentrer principalement sur le contenu avant de prêter attention au design. Le design est simplement une aide visuelle qui va donner accès à un contenu plus agréable et plus clair à regarder.

Less is more

Ludwig Mies van der Rohe

Il ne faut surtout pas tomber dans l’excès, autrement ça peut être dévastateur, ce que nous voulons, c’est épurer notre interface et non ajouter du bruit ou des interférences qui peuvent nuire à la lisibilité de notre contenu.

Avant de définir une charte graphique, j’ai tout simplement effectué des recherches pour trouver de l’inspiration, tout ce qui me semblait en raccord avec le contenu me semblait être une bonne piste. J’ai regroupé toutes ces sources d’inspirations dans un Mood Board.

Voir mon mood board

Par la suite, j’ai effectué des recherches pour combiner des typographies. Ainsi qu’à trouver un bon rapport de propotion pour donner une certaine coordination dans mes titres et mes paragraphes. J’ai regroupé mes recherches dans une section nommée Font Pairing.

Voir mes font pairings

Pour terminer, j’ai établi une charte graphique à l’aide d’un Style Guide, c’est ici que je vais regrouper les polices d’écriture selectionnées, le rapport de proportion défini ainsi que les couleurs et les icones.
Ce Style Guide sera la référence pour appliquer le style à mon interface.

Voir mon style guide

Produire sur écran

Une fois que notre contenu, notre wireframe ainsi que notre charte graphique sont déterminés, on va passer à l’intégration de ces éléments sur notre support de diffusion (dans ce cas ci sur les écrans).

Image of the interface with grid

Avant cela, toujours avec l’aide de l’application Sketch, j’ai au préalable intégré ma charte graphique à ma wireframe, ce qui me permet de travailler plus éfficacement et de manière plus précise.

Cette application me permet de directement placer mes éléments aux endroits que je le désire, ce qui me permet par la suite d’éviter tous ces problèmes de mise en page qui ne sont pas correct mais surtout d’avoir un appuie visuel sur lequel me baser.

Image of a part of code from the conception of the interface

Arrivé à ce stade, il suffit juste de traduire tous ces éléments en langage HTML et CSS.

Sketch me permet de visualiser tous mes blocs et ainsi je suis plus en mesure d’optimiser mon code. Je peux donc à la fois, définir les choses récurrentes, comme le style de mes boutons et de mes liens mais aussi fixer la dimension et le positionnement de mes éléments blocs.