Archives par mot-clé : web

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