Archives de catégorie : Réflexions

Documenter son travail de creative coding

La documentation d’un travail est une partie indispensable à tout projet. D’une part parce que la documentation d’un projet permet d’en retracer la genèse mais également parce qu’elle permet d’en retrouver les sources. Cela est d’autant plus utile dans le cadre d’un projet de creative coding.

Qui ne s’est jamais replongé dans un projet une semaine, un mois ou un an après en se posant l’une des questions suivantes :

  1. « Pourquoi avais-je fais ces choix graphiques ? »
  2. « Quelle était la problématique de départ? Quels étaient mes conclusions ? »
  3. « Que peut bien faire cette fonction ? Comment fonctionne-t-elle ? »

Autant de questions qui montrent l’importance d’un travail documenté.

Commenter son code

L’une des premières méthodes de documentation est sans aucun doute l’ajout de commentaires au code source du projet. Évidemment il est inutile de documenter la moindre ligne de code. Ainsi il est plus judicieux de documenter les algorithmes dont il sera important se de rappeler du fonctionnement.

L’exemple suivant montre une méthode commentée permettant de calculer la position d’un point sur un cercle.

Dans le cas de certaines fonctions nous utiliserons des commentaires plus détaillés permettant de retrouver le détail de l’algorithme. L’exemple suivant montre une fonction documentée permettant d’appliquer une rotation à un vecteur en 3 dimensions autour d’un vecteur servant d’axe.

Codes et attribution

Réutiliser des codes (entier ou par portions) trouvés sur internet est un bon exercice pratique cependant la réutilisation de code sans en avoir citer la source peut être considérée comme de la copie et du plagiat.

Le developpement a toujours impliqué l’utilisation de code provenant d’autres sources et nous avons la chance de profiter d’une communauté open source. Sans le partage de savoir de cette communauté celle-ci ne grandirait pas et votre travail ne verrait sans doute pas le jour. C’est la raison pour laquelle il est éthique de citer ses sources.

Tout comme vous citez les sources original dans vos travaux graphiques et écrits, vous devez citer l’ensemble des sources techniques afférant à votre projet tel que les auteurs des algorithmes ou outils incorporés à vos projets ou les documents de recherches et cours utilisés dans la création de votre projet.

Texte original de Scott Murray, Assistant Professor, Design Department of Art + Architecture, University of San Francisco.

Lorsque que vous utilisez une fonction ou un code réalisé par un autre développeur il est donc important d’en citer la source. Tout comme le commentaire de fonction, citer la source vous permet à vous et aux autres personnes qui auront accès à votre code de retrouver l’origine de l’algorithme, du programme et de sa documentation. Lorsque nous citons la provenance d’une méthode nous utiliserons la méthode suivante :

edit (26/11/2015) : Jonathan, collègue enseignant et co-créateur du site disruptions.fr, m’a fait remonter un commentaire en ce qui concerne l’importance de la citation du code d’autrui :

En ce qui concerne les citations du code d’autrui, en plus de l’aspect morale, il y a un côté bassement pragmatique – parfois le code ne fonctionne pas dans telle ou telle condition. D’avoir le lien accessible permet de vérifier s’il y a une mise à jour [tenant compte de votre problème] ou de dialoguer avec l’auteur pour déceler le problème.

Jonathan Munn

Documenter l’ensemble de son travail

ixd-documentation
Extrait de la documentation d’un projet d’installation interactive — Bonjour, interactive lab 2015

Si l’utilisation des commentaires permet à la fois de documenter son code et d’en citer les sources et références, ils ne permettent pas d’incorporer des images ou vidéos. Lors de la réalisation d’un projet il est important de tenir à jour une documentation complète permettant à tout instant de revenir en arrière sur la phase d’un projet. Cette documentation est destinée avant tout à nous même et aux collaborateurs du projet. Elle ne requiert donc pas de mise en forme particulière et peut tout à fait prendre la forme d’un document texte. Pour ma part mes documentations prennent la forme d’un document texte reprenant les points suivants :

  1. Concept
  2. Références
  3. Détail de l’idée
  4. Parcours utilisateur
  5. Questionnement :
    remise en cause ou points à explorer durant le projet
  6. Pour aller plus loin :
    Déclinaisons et évolutions possibles du projet
  7. Scénographie / format d’exploitation
  8. Cahier des charges techniques :
    Technologies envisagées, langages, librairies…
  9. Notes de développement :
    Note au jour le jour du développement effectué indiquant les problèmes rencontrés, les solutions envisagées, les sources et les références.

Une fois le projet terminé, le document pourra alors être remise en forme afin de réaliser le making of ou servir aux évolutions futur du projet.

Installations interactives : pensez à tous les utilisateurs

Les installations interactives sont de plus en plus courantes dans le monde de la communication. Déjà présentes depuis de nombreuses années dans le domaine de l’art numérique avec des artistes comme Jeffrey Shaw ou Myron Krueger — pour n’en citer que deux — elles font depuis quelques années leur apparition dans le monde la communication, désireux, généralement, de sortir de l’écran et d’engager un dialogue physique avec le public. Il est donc normal que cet engouement arrive jusqu’aux domaines de l’enseignement et que de nombreux étudiants ou jeunes diplômés s’essaient à la pratique.

Les installations interactives, comme toutes productions, présentent certaines contraintes qu’il est important de prendre en compte lors de la conception. Ces contraintes relevant souvent de la mise en place technique et de l’exploitation de l’installation, elles ne sont généralement que peu abordées lors des cours, où leurs cas d’usage sont difficiles à mettre en place. Nous allons nous y intéresser à travers 3 types d’utilisateurs qui auront à interagir d’une manière ou d’une autre avec l’installation : l’utilisateur, l’hôte(sse) et le régisseur.

L’utilisateur

L’utilisateur est bien connu du designer puisqu’il est celui pour qui l’installation a été conçue, il est au centre même de la conception. Dans le cadre d’une installation interactive (de marque) il est important prendre en compte le fait que l’utilisateur ne s’est pas spécifiquement déplacé pour découvrir l’installation. À la différence d’un site ou d’une exposition par exemple où il s’est rendu (en règle générale) volontairement, l’utilisateur d’une installation de marque est très souvent présent face à l’installation pour des motivations bien différentes que celles de vivre une expérience, il s’y retrouve en quelque sorte confronté. Dans le cas où le lieu se trouve être un centre commercial ou un magasin, l’utilisateur s’y est probablement rendu pour effectuer un achat — ou simplement pour effectuer un trajet habituel maison-bureau dans le cas d’une vitrine interactive. Le guidage est donc important. Il est nécessaire d’inciter l’utilisateur à prendre part à l’expérience, souvent par le biais d’un «call to action». L’incitation doit être simple et compréhensible de tous dans le mesure où les utilisateurs peuvent être extrêmement variés (âge, langue, temps disponible…).

Installation interactive sonore pour Côte d'Or chocolat à l'occasion de l'évènement le Quartier du Chocolat.
Installation interactive sonore pour Côte d’Or chocolat à l’occasion de l’évènement le Quartier du Chocolat. Agence : Fullsix – Production : Elegangz – Design, sound design & developpement : Bonjour, interactive lab

Une fois que l’utilisateur a été incité à prendre part à l’expérience, il lui faut comprendre l’interaction. L’ergonomie de l’installation a une grande importance. L’utilisateur doit être en mesure de distinguer les éléments d’interfaces des éléments graphiques, il doit également être en mesure de comprendre le ou les interactions qu’il sera amené à avoir, leurs raisons et leurs buts. Une fois encore, notre ergonomie doit prendre en compte le fait que les utilisateurs peuvent être tous différents et ne possèdent pas nécessairement la même culture. Il n’est pas rare en effet de voir une installation interactive extrêmement bien maitrisé par un enfant, alors que ses parents seront en difficulté pour interagir avec et vice versa. Il est donc nécessaire de se rappeler le contexte de l’installation. Souvent l’utilisateur n’alloue que très peu de temps à la compréhension de l’interaction car, rappelons le, il se trouve dans un contexte différent (achats à effectuer, retour chez lui, balade en famille…). Dès lors que l’installation nécessite un outil ou un mode d’interaction relativement nouveau, il devient alors plus compliqué d’en expliquer le fonctionnement.

La phase d’expérience est également une phase importante. Si l’utilisateur le souhaite il doit pouvoir rapidement accéder à une information (que faire à ce point précis de l’installation? comment interagir?) ou être capable de la quitter si celle-ci ne lui convient pas. Dans le cadre d’une installation utilisant une Kinect cela peut être relativement simple. Une interface pourra présenter les canaux d’interactions et l’utilisateur pourra à tout moment quitter l’expérience. Mais cela devient plus ardu lors d’une expérience de réalité virtuelle où l’utilisateur, en plus de voir à 360°, se retrouve avec un casque câblé à un ordinateur. La solution la plus évidente est alors la prise en main de l’utilisateur par un(e) hôte(sse). L’hôte(sse) est une personne en charge de l’installation et ses utilisateurs. Elle pourra alors les guider durant l’expérience, mais également les aider dans leur compréhension de l’interaction ou les inciter à participer.

L’hôte(sse)

L’hôte(sse) est un utilisateur à considérer lors de la phase de conception d’une installation interactive. Il aura pour rôle de représenter la marque et d’animer le lieu de point de contact. Sa mission est autant d’inciter l’utilisateur à participer à l’expérience que de le guider durant celle-ci, mais également de lui faire découvrir la marque et ses produits. Il aura donc un rôle clé durant l’ensemble de l’exploitation et il est important qu’il puisse maitriser l’ensemble des outils mis à sa disposition. Parce qu’il est le point de contact avec les utilisateurs, il est nécessaire de considérer son parcours. Il sera souvent en charge de l’installation de l’utilisateur au sein du dispositif, du lancement de l’expérience ou encore de la récupération des données CRM ou d’envoi d’e-mailling.

Dans le cadre d’une installation nécessitant son lancement par l’hôte(sse) il est nécessaire de penser également l’ergonomie de son interface à destination de cet utilisateur. L’installation doit pouvoir être lancée facilement car l’hôte(sse) doit être en mesure d’interagir avec les personnes présentes sur le lieu. Il devient compliqué de lancer une expérience dès lors que l’hôte(sse) doit aller en régie pour accéder à l’interface ou qu’il(elle) doit suivre sa souris affichée sur un écran géant à 10 mètres de distances. Un écran déporté — avec clavier et souris — à disposition de l’hôte(sse) est souvent la meilleure solution. Si la marque souhaite un stand épuré ne présentant aucun écran, clavier ou souris, d’autres dispositifs peuvent être mise en place.

Par exemple, les expériences Peugeot Connect et Astral Skeleton ne présentaient aucun écran, clavier ou souris, leurs espaces d’expérience ne prévoyant aucun point de contrôle. De plus les expériences étant des expériences de réalité virtuelle vécues à travers un casque Oculus Rift, l’hôte(sse) n’avait aucun repère quant à la position temporelle de l’utilisateur dans l’expérience. Il est alors difficile de savoir si l’expérience a débuté ou si celle-ci est terminée. La solution envisagée fut la mise en place d’un unique bouton rétroéclairé permettant de contrôler l’installation et placé sur la stèle. Lorsque l’hôte(sse) souhaite démarrer l’expérience — une fois l’utilisateur installé — il(elle) appuie sur le bouton. L’expérience démarre et l’éclairage du bouton s’allume indiquant ainsi à l’hôte(sse) que celle-ci est en cours. Une fois l’expérience finie, le rétro-éclairage du bouton s’éteint afin de lui indiquer que l’utilisateur à terminé l’expérience et que le casque peut lui être enlevé. Si un utilisateur souhaite quitter l’expérience, l’hôte(sse) pourra à tout moment la terminer par une simple pression sur le bouton, le rétro-éclairage s’éteignant pour indiquer que l’expérience s’est arrêtée.

peugeot
Le stand Peugeot Expérience présent lors du mondial de l’automobile 2014 était composé de bornes épurées, sans écran de contrôle pour les hôtesses. Par ailleurs chaque hôtesse avait pour mission de prendre l’utilisateur en photo afin de partager l’expérience sur les réseaux sociaux et récolter de l’information emailing pour tout utilisateur intéressé. Un système de bouton pression permettant de contrôler et monitorer l’expérience a donc été mise en place. Peugeot Expérience, salon de l’automobile 2014. Agence : Havas Event – Design, sound design et développement : Bonjour, interactive lab

L’ergonomie en dehors de l’application est également à prendre en compte dans la mesure où l’hôte(sse) pourra également avoir à charge de démarrer et arrêter le dispositif matin et soir. Cette procédure doit donc être aussi simple que possible. Il est envisageable de pré-programmer le démarrage et l’arrêt de l’ordinateur à des heures fixes. Dans le cas où ces derniers nécessitent une action de l’hôte(sse), il est également possible de paramétrer le lancement de l’application au démarrage de l’ordinateur, facilitant ainsi le processus de démarrage du dispositif. Si l’automatisation du dispositif est importante, il arrive toutefois que le lancement du programme soit à la charge de l’hôte(sse) ou qu’il soit obligé de le relancer. Auquel cas le bureau de l’ordinateur devra être suffisamment organisé pour permettre à l’hôte(sse) d’accéder à l’application ou au contact du régisseur rapidement.

Le régisseur

Le troisième utilisateur à considérer est le régisseur. Il s’agit de l’utilisateur le plus avancé de votre expérience étant donné qu’il est en charge de son bon fonctionnement tant logiciel que technique. Il a pour mission de veiller et intervenir si nécessaire sur votre installation dans le cas où celle-ci subirait un dysfonctionnement (ordinateur ne démarrant pas, problème d’affichage… ). Tout comme l’hôte(sse), il a accès non pas au logiciel uniquement mais à l’ensemble de l’ordinateur. Il est donc important que celui-ci soit suffisamment organisé — tant en terme de placement de fichiers que de noms — et qu’il ne regorge pas de nombreuses barrières que pourraient être différents mots de passe.
Dans l’idéal, le régisseur doit avoir accès via le bureau, à un dossier réunissant l’ensemble des éléments nécessaires à la correction d’un problème informatique — tel que les drivers d’origine — ainsi qu’à la fiche contact de l’équipe de développement indiquant mails, numéros de téléphones et heures d’appels.

Dans le cas où le régisseur ferait face à un problème matériel, il devra être en mesure de le remplacer. Il est d’usage d’avoir en régie du matériel en double tels que les capteurs utilisés par exemple. Chaque installation étant spécifique, ce dernier devra également disposer d’un plan de montage de vos capteurs lui indiquant comment démonter le capteur usagé mais également comment monter le capteur, le sécuriser et le connecter à l’ordinateur. Il est donc important d’envisager tous les cas de figures lors de la rédaction du document à destination de la régie, de même que lors du design de la scénographie il est nécessaire de rendre accessible l’ensemble des composants de l’installation.

Si l’utilisateur principale est le premier auquel le designer pense durant la conception et réalisation de son installation, il est donc important de ne pas négliger l’hôte(sse) et le régisseur qui auront autant, voir sans doute plus, d’interactions avec votre dispositif tout au long de son exploitation.

Ergonomie et responsive design

Le design web est en constante évolution et nous voyons chaque année de nouvelles tendances UI ou UX emmerger. Une tendance web de plus en plus présente est l’utilisation du burger menu — appelé ainsi pour la ressemblance de son pictogramme — sur des sites à destination du desktop. Or il arrive que son utilisation ne soit pas toujours pertinente, il est donc intéressant de s’interroger sur celle-ci.

Qu’est ce que le burger menu

Le «burger» menu est une méthode consistant à regrouper la navigation d’un site ou d’une application dans une sous-partie symbolisée par une icône rappelant le principe de couche d’un burger ou d’un sandwich.

icoBurger

D’un point de vue du design ce pictogramme symbolise la notion de liste d’éléments et a notamment été démocratisé avec l’avènement du design mobile. Son objectif est avant tout d’obtenir un gain de place sur les pages ne pouvant afficher les menus comportant de nombreux éléments. En effet le design mobile étant plus restreint en terme de taille — pour rappel la résolution mobile la plus rependue reste 360×640 et est présente sur 19.91% des terminaux mobiles — il est parfois impossible d’afficher sur une même page des menus aux nombreux éléments.

Si sa création relève d’une véritable problématique il est tout de même important de s’intéresser à l’ergonomie résultante de son utilisation. Le langage de l’homme étant basé sur les signes typographique, les mots et les phrases, on est à même de se demander si ce pictogramme est compréhensible aux non initiés au premier abord.

La question que nous poserons ici est celle de l’ergonomie en fonction des supports. Aujourd’hui les terminaux mobiles représentent une grande partie de la navigation web et les sites sont donc tous soumis à des contraintes de responsive. Il n’est donc pas rare de voir des sites desktop (à destination d’ordinateur) arborer un menu «burger» comme pour leurs versions mobiles. Mais son utilisation dans ce cas précis est-elle pertinente?

Ergonomie et Burger sont-ils compatible?

«À tribord toute mon capitaine»

Le «burger» ne date pas d’hier même si le design web mobile est relativement jeune. Alors pourquoi ce questionnement sur ce menu?

Ce questionnement m’est venu après avoir visité plusieurs sites présentant une navigation en haut à droite de la page. Pour chacun de ces sites il me fallu plusieurs secondes avant de découvrir que le menu était caché sous le «burger». Pourquoi m’a-t-il fallu autant de temps pour trouver une navigation pourtant si évidente sur la page? Simplement parce que mes habitudes utilisateur me font réserver la position haute droite de la page pour la navigation de type «action» tel que les menus de loggin, d’enregistrement, de panier ou encore de langues. Il me semblait donc que ce burger réservait dans son sous-menu cette navigation «action» et non de contenu. Je n’allais donc pas y chercher ma navigation.

fi

Je me suis permis de poser cette question d’ergonomie à propos ce menu sur facebook. Julien Vieira, designer et enseignant me fit remarquer que ce choix de position pouvait sans doute trouver son origine du fait que l’interface était pensée pour le tactile en prenant en considération les droitiers. Nous ne serions donc plus dans un site responsive mais tactile à destination des droitier. Nous sommes loin de l’accessibilité.

Nous avons donc une hypothèse concernant le positionnement du menu mais nous ignorons toujours pourquoi utiliser ce menu sur desktop.

«Ergonomiquement cela fonctionne»

Ugo le Prudhomme, à la fois developpeur et UX designer chez Soap Creative, souleva le point intéressant de l’ergonomie en abordant les avantages de ce menu à destination du mobile tel que :

  1. Sa facilité de déploiement (technique)
  2. Son identification simple par l’utilisateur
  3. La non nécessite de traduction
  4. L’accès en un clic à un contenu

Si selon lui, si ce menu n’a pas sa place sur desktop, il reste tout de même une solution fonctionnelle est envisageable dans certains cas. Cependant cela ne doit pas devenir automatique comme il le précise. Je suis cependant en désaccord avec certains points évoqué tel que :

  1. La non nécessite de traduction :
    En effet le pictogramme ne fait que placer dans une sous-partie un menu textuel. Menu qu’il faudra traduire dans la langue de l’utilisateur dans tout les cas.
  2. L’accès au contenu en un clic :
    Là encore je suis en désaccord dans le sens où il faudra un clic pour ouvrir le menu puis un second pour accéder au contenu voulu. Nous sommes donc loin de l’accès rapide.

Il est évident que dans le cas d’une navigation comportant un grand nombre d’éléments ne pouvant s’afficher sur un seul écran ce menu est intéressant mais qu’en est-il dans le cas d’un site desktop ayant la place d’afficher l’ensemble de son menu? Est-ce utile de multiplier les clics avec un tel menu quand la page du site peut aisément afficher l’ensemble du menu? Par ailleurs, l’utilisation du burger menu cache le contenu à l’utilisateur qui ignore donc le type de contenu auquel il pourra accéder. Cela peut donc être un risque de perdre l’utilisateur.

Si nous avons la possibilité d’afficher l’ensemble du menu sur notre page, pourquoi utiliser une navigation venant du mobile?

«Le framework est fait de cette façon… et tout le monde le fait»

Maxime Bodereau, spécialisé en UX et UI, design souleva le dernier point, sans doute le plus intéressant :

Je pense que c’est une question de fainéantise aussi, rapport au fait que les bootstrap/fundation et autres frameworks proposent par défaut ce Hamburger.

Les frameworks serait donc en cause — au premier abord — et j’avoue partager ce point de vue. Nous sommes aujourd’hui à l’air des templates et frameworks à tel point qu’il est dure de ne pas voir un site intégré avec boostrap et dont le template n’a pas été vu et revu sur themeForest. Cette effervescence d’outils et règles préconçues tendent vers une uniformisation du web dont certains annonce la mort (à tords ou à raison, cela est une autre question). Tout ces outils sont en soit intéressant mais il n’est pas rare de voir se développer une fainéantise globale tant du côté du designer se tournant vers un template simple à intégrer que du côté du développeur qui n’utilisera que la couche superficielle de son outils. Ces outils, extrêmement bien fait, facilitent la mise en place de site responsive. Mais comme tout outils ils ne sont pas fait pour s’adapter à tout les besoins mais à certains besoins. Ceux-ci proposent donc le burger menu comme menu par défaut ou en option, facile à déployer et dont le responsive est «parfait».

Cependant c’est aux UX designers de se poser la question de la pertinence de cet outils dans les différents cas de navigation. Pour autant nous avons tous tendance à manger un sandwich quand nous sommes en déplacement, ce n’est pas pour autant que nous en prendrions un au restaurant. Pourquoi serait-ce alors la même chose pour l’ergonomie? Pourquoi serait-elle identique sur mobile et sur desktop?
Lors de mes études dans le domaine de l’art graphique, nos enseignants avaient l’habitude de répéter que les logiciels de création d’images ne sont que des outils comme le sont crayons, fusain et autre encres de chine. J’aborde ce point de vue là également en programmation — notamment avec le design génératif — qui est pour moi un outils à la création. Si l’outil nous aide à créer il n’est pas pour autant le créateur et il est important de ne pas se laisser guider par lui mais de le maîtriser. Dans le cas de notre «burger» menu cela signifie qu’il est important de penser l’ergonomie de son site et de ne pas la laisser à la libre décision de son outils ou des tendances. D’autant plus qu’en grattant un peu sous la couche superficielle, on se rend vite compte que notre outils nous permet de réaliser aisément cette ergonomie que nous aurons pensé en amont.

Références :

Voici quelques références abordées lors de l’échange facebook :

http://blocnotes.iergo.fr/concevoir/le-burger-de-la-mort/ (Merci Julien Vieira)

http://www.lukew.com/ff/entry.asp?1945 (Merci Justin Marsan)

http://deep.design/the-hamburger-menu/ & https://medium.com/@drewbrolik/hamburgers-aren-t-the-problem-menus-are-a-hack-5a371447854 (Merci Maxime Bodereau)

Statistiques des résolutions mobiles 2014-2015