Archives par mot-clé : ergonomie

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