Axure : Créer un menu et un fil d’ariane sans dupliquer aucun contenu

Menu

Dans un prototype, on veut souvent qu’un menu soit présent dans toutes les vues auquel il permet d’accéder, et qu’un item du menu soit visuellement distinct des autres pour montrer qu’elle correspond à la vue en cours. (Par vue j’entends une page ou une section au sein d’une page.)

Solution bourrine : dupliquer le menu autant de fois qu’il y a de vues. oui, mais si on danse si quelque chose change ? Par exemple si je dois intercaler un nouvel item ou changer un lien, il faudra le répéter partout. Comme d’habitude, évitons de nous répéter.

Meilleure solution : utiliser un master. Comme ça, toute modification ultérieure du menu sera répercutée dans chaque vue. Axure offre même une fonction pour insérer à votre place un master dans les pages et à l’emplacement de votre choix (clic droit sur un master dans le panneau dédié, puis « Add to pages ». Sauf cas particulier (par exemple si vous voulez changer la hauteur du menu), vous n’avez plus à toucher à chaque écran. Oui mais, comment signifier qu’une vue est sélectionnée ?

Solution ultime : un mélange de ce qu’Axure appelle les styles d’interaction et de l’évènement onPageLoad.

Premier ingrédient : les styles d’interaction

Les styles d’interactions sont des variations visuelles qui s’activent lorsqu’un widget est dans un état donné. Il y a le clic, le survol, l’inactivité et la sélection.1 C’est cette dernière qui nous intéresse. Il faut spécifier :

  • Le style lui-même. Ici, ça peut être que le libellé passe en gras. Une fois ajouté, il apparait dans le panneau « Widget properties ».
  • L’action qui le déclenche.

Axure tuto 1
Axure tuto 2

Second ingrédient : onPageLoad

Axure permet d’exécuter des actions au chargement d’une page, dans l’onglet « Page interactions » du panneau « Page properties ». Ici, cela permet d’activer un item du menu différent à chaque page, même s’il est dans un master.

sans titre 5

Un tutoriel sur Axure.com avec un fichier source pour essayer.

Et au sein d’une page ?

Notez que le truc marche entre pages, mais aussi au sein d’une page. Dans ce cas, le menu n’est plus un master mais une simple suite de widgets, et chaque vue est un état d’un panneau dynamique. Au clic sur l’item 1 du menu, on le passe en « Sélectionné »et on passe le panneau à l’état 1.

Un tutoriel plus complet.

Fil d’Ariane

Un fil d’Ariane, c’est encore un objet constant à travers les pages mais dont un aspect change. Pour que la page sélectionnée soit en gras, il suffit de suivre les explications plus haut. Mais comment faire pour le nom de la page qui change à chaque fois. La solution, c’est d’utiliser un master pour le fil d’ariane et d’ajouter à chaque chargement de page une action « Set text », avec la valeur [[PageName]]. Cette variable prédéfinie par Axure correspond au titre de la page tel que défini dans votre arborescence, donc si elle s’appelle « 04-b », le fil d’Ariane comportera « 04-b ».

Axure tuto 4


  1. Attention : Axure, aimant la simplicité, distingue ces styles de la liste d’évènements, laquelle comporte des termes très proches (mouseOver vs onMouseHover vs Selected). Because 

De quelques similitudes entre utilisabilité et sécurité

Créer un système, c’est s’assurer qu’il remplit un ensemble de fonctions données, mais aussi qu’il possède des qualités globales comme la maintenabilité, la fiabilité, la rapidité… On les appelle parfois des exigences non-fonctionnelles. Parmi elles, l’utilisabilité et la sécurité sont des qualités cruciales et moins antagonistes que l’on ne pourrait le croire.

Ne pas raisonner dans l’absolu

On se demande souvent « est-ce que cette interface est ergonomique ? » Ce n’est pas la bonne question à se poser car elle n’a pas grand sens dans l’absolu. Il faut plutôt chercher à savoir dans quelle mesure elle est utilisable, selon certains critères, pour certains usages et avec certaines contraintes.

Le même enjeu existe en sécurité : on oscille entre fantasmes de protection totale et sentiment résigné que, de toute façon, Google et la NSA savent tout de nous. Pourtant, non seulement la sécurité n’est pas une propriété binaire, mais grosso modo elle dépend de trois facteurs.

  1. Les enjeux : à quel point les données à protéger sont critiques ? Cette évaluation se fait classiquement selon trois critères : la disponibilité (les personnes autorisées ont accès aux données), la confidentialité (uniquement ces personnes y ont accès) et l’intégrité (les données n’ont pas été modifiées dans leurs dos). Selon le contexte, certains critères vont être privilégiés : par exemple je considère que déverrouiller mon téléphone facilement est plus important que de le rendre indéchiffrable, donc je ne lui donne pas de mot de passe interminable.
  2. Le modèle de menace : qui en a après mes données, quelles ressources a-t-il et à quel point est-il déterminé.
  3. La réponse : quelles mesures mettre en place ?

Elaborer une politique de sécurité n’est pas forcément très compliqué. Par exemple, selon James Mickens dans cet article très drôle, le modèle de menaces d’un particulier peut se limiter à « Mossad ou pas Mossad ». Si le Mossad (ou une institution comparable) en a après vous, vous êtes foutus. Si non, prenez des mesures raisonnables et tout ira bien.

Même si elle n’est pas très compliquée, la sécurité n’est jamais une propriété binaire. Il en va de même en ergonomie : on peut favoriser la polyvalence ou la spécialisation, une apprenabilité rapide ou longue, etc.

Ne pas se croire tout puissant

En sécurité, un aspect intéressant est que les mesures prises ont pour objectifs de rendre acceptable le niveau de risque — et pas plus. Pour chaque risque identifié, on évalue sa vraisemblance et sa gravité, avant de prendre une mesure pour diminuer son impact. A la fin, il reste des vulnérabilités résiduelles, qu’il suffit d’expliciter et de justifier : certes, quelqu’un avec un accès physique au système, une porte dérobée déjà en place et un supercalculateur de poche pourrait opérer une brèche. Mais c’est un risque acceptable.

Ce n’est pas très différent d’une démarche ergo, dans laquelle on identifie certains déterminants de l’activité (par exemple, l’utilisateur est forcé d’utiliser sa tablette avec des moufles), auxquels on répond par des solutions (doubler la taille des boutons) ou des recommandations (ne pas utiliser la tablette dans un contexte nécessitant ces moufles).

La différence, dans mon expérience, c’est que la démarche ergo est :

  • Moins formalisée : Les observations et solutions sont moins décomposées, les points faibles sont affichés de manière moins transparente. (Mais j’ai peut-être une vision idéaliste des audits de sécurité.)
  • Moins cadrée : au nom d’une utilisabilité parfaite et absolue, on nous demande souvent l’impossible. Une bonne part du boulot d’un expert en ergonomie est d’expliquer que l’on n’est pas omnipotents.

Faire avec l’utilisateur

Une dernière similitude, c’est qu’on ne peut pas concevoir un système isolé : il faut anticiper son utilisation et supposer que l’utilisateur peut être étourdi, bricoleur, ou malveillant (voire les trois en même temp). Par exemple, il faut anticiper ce qui se passe si l’utilisateur oublie son mot de passe ou s’il est laxiste dans une procédure de vérification quelconque.

Dans les deux cas, il y a une tension entre les utilisateurs réels (pressés et tous différents) et idéaux (consciencieux et attentifs). Il existe même un concept juridique de « personne prudente et raisonnable », consacrant le fait que manipuler des informations sensibles entraine certaines responsabilités et exige un certain comportement. Evidemment, c’est plutôt rare d’aller en prison parce que vous n’avez pas utilisé un logiciel comme un concepteur l’espérait. Malgré tout, la conception doit faire certains postulats et compromis.

Similaires, voire complémentaires

La sécurité nuit souvent tellement à l’utilisabilité qu’elle se tire une balle dans le pied. Les exemples ne manquent pas, des critères absurdes de choix de mot de passe à la complexité (PDF) des outils de chiffrement. Les deux approches sont suffisamment similaires pour pouvoir être complémentaires. Il suffit d’en revenir à l’utilisateur. Voici deux articles classiques pour creuser le sujet : « Users are not the enemy  » (PDF) et « When security gets in the way ».

Pocket et la cohérence c’est pas trop ça

Pocket est un service de lecture différée plutôt chouette et disponible officiellement sur cinq plateformes. Hélas, les interfaces de ces différentes plateformes souffrent d’un certain manque d’homogénéité. C’est même carrément le bordel. J’ai fait un tableau de ces incohérences.

Dans l'ordre, la barre de navigation des versions Web, Android, Windows et Mac
Dans l’ordre, la barre de navigation des versions Web, Android, Windows et Mac

Notez bien que :

  • Je me suis concentré sur l’accès aux fonctions concernées. Il y a d’autres incohérences : dans le reste de la procédure (ex : ajout d’items sur Mac, modification groupée sur iPad), dans le choix des pictogrammes (mode d’affichage sur Windows), dans le concept de base (principe de double panneau avec l’article à droite sur Mac)…
  • Un « non » dans le tableau signifie que la fonction est purement absente.
  • Le site web est responsive mais je n’ai inclus que la version « grand format ».
  • J’ai regroupé Paramètres et Aide par commodité car ils sont toujours placés à côté.

Le tableau, je trouve, montre bien l’étendue des divergences :

  • une moitié des fonctions est indisponible sur au moins une plateforme.
  • Aucune fonction étudiée n’est parfaitement homogène (c’est-à-dire offrant un accès identique sur toutes les versions).
  • Sur les cinq plateformes, on dénombre quatre accès différents pour trois fonctions

Certaines divergences sont facilement explicables :

  • Pocket suit parfois les conventions propres à chaque plateforme. Par exemple, sur Android, les paramètres se trouvent habituellement dans le menu en haut à droite (celui accessible par les trois points) et ce menu n’a pas d’équivalent sur iOS.
  • Certaines fonctions ont moins d’intérêt sur certaines plateformes, par exemple un affichage en grille sur un petit smartphone.
  • Il y a toujours une certaine inertie dans le développement multi-plateformes et il n’est pas facile d’avoir une feuille de route unifiée dans le moindre détail.

Mais ça n’explique pas l’ampleur du problème. J’y vois surtout un manque de volonté des créateurs. Par exemple, la version Windows / Chrome OS utilise les même technologies que la version web (en gros c’est une web app lancée en local). Les deux devraient donc être relativement faciles à faire converger, pourtant la version Windows est l’une des plus divergentes.

Un facteur supplémentaire d’incohérence est temporel : des mises à jour modifient fréquemment les interfaces et ajoutent à la confusion. Je ne saurais dire si l’homogénéité est tendanciellement croissante.

Foin de blabla, voici le tableau.

Fonction iPad Android Web Windows Mac # de divergences
Nav principale Menu hamburger Menu hamburger À gauche Menu déroulant central Non 3 + 1 non
Filtrer par labels Menu hamburger Menu hamburger À gauche 1e ligne, droite En bas 4
Filtrer par type d'articles Menu hamburger Menu hamburger À gauche Gauche, 1e ligne Première ligne 4
Paramètres et aide Menu hamburger Menu, droite Menu, droite Menu déroulant central Barre de menus native 4
Premium Menu hamburger Menu hamburger Menu, droite Menu déroulant central Non 3 + 1 non
Messagerie Menu hamburger Menu hamburger 1e ligne, droite Non Non 2 + 1 non
Modification groupée Menu, droite ou tap long sur item Menu, droite 2e ligne, droite Non Non 2 + 1 non
Ajout d'items Gauche, 1e ligne Non 1e ligne, droite Gauche, 1e ligne Barre de menus native 3
Recherche 1e ligne, droite 1e ligne, droite 1e ligne, droite 1e ligne, droite En bas 2
Mode d'affichage 1e ligne, droite Non 2e ligne, droite Gauche, 1e ligne Non 2 + 2 non

Paris sans le peuple – La gentrification de la capitale

paris sans le peuple

On change des thèmes habituels de ce blog avec des morceaux choisis de l’essai Paris sans le peuple – La gentrification de la capitale, d’Anne Clerval et aux Éditions de la découverte.

Le retour des ombres

Ce n’est pas le titre d’un roman fantastique, c’est le fait qu’après quelques excès de minimalisme, on assiste ici et là à un retour des ombres portée. Voici deux exemples notables.

Evolution des popovers

A gauche : les « popovers » depuis iOS 7. A droite : leur équivalent sur iOS 9. Si si, il y a une légère ombre portée.

Evolution d'Office 365

A gauche : Skydrive, en 2012. A droite : OneDrive, son successeur, en 2015. L’ajout de l’ombre et d’une flèche clarifie la relation entre le panneau et son origine. A noter que Windows 10 n’a pas suivi la même évolution et présente toujours des panneaux sans ombre (source), alors qu’à l’origine les interfaces web et desktop étaient beaucoup plus homogènes graphiquement.

Les invariants de conception ne sont pas magiques

Tiré de La Mesure de l'homme, par Henry Dreyfuss (un des fondateurs de l'ergonomie scientifique)
Tiré de La Mesure de l’homme de Henry Dreyfuss, un des fondateurs de l’ergonomie scientifique

L’honorable Raphaël « iErgo » Yharrassarry aime à rappeler que la conception est encadrée par certains invariants :

La taille d’un téléphone est et sera toujours conditionnée par la distance entre l’oreille et la bouche, ainsi que par la taille de la main et la taille du bout des doigts pour les touches. (Source)

C’est éminemment vrai, au sens qu’avant de concevoir un service ou un objet, il y a des valeurs relativement stables, notamment physiologiques et anatomiques, qu’il faut connaitre et prendre en compte. Il faut pourtant faire attention : ces invariants ne sont que des guides. Il n’y a pas de critère unique et magique.

Il n’y a pas d’homme moyen

Reprenons l’exemple du téléphone : quelle dimension doit-il avoir pour être utilisable ? On peut prendre pour cible la taille moyenne des mains de notre population cible, mais c’est trop approximatif. Une même moyenne peut cacher des distributions très différentes, comme dans ce graphique.

Moyenne identique, écart-type très différent
Moyenne identique, écart-type très différent

Pour une même moyenne, les gens peuvent avoir des mains très semblables ou au contraire dissemblables. Sans donnée plus fine, on ne peut pas savoir quelle proportion de gens pourront correctement utiliser le téléphone.

Pour concevoir un peu moins au pif, on utilise les centiles (ou « percentiles »). Cela consiste à ordonner les mesures dont on dispose et à les répartir en cent paquets comprenant chacun le même nombre de mesures. Cela donne une meilleure idée de la distribution des données et permet aussi de définir des seuils. Par exemple, si j’ai mesuré cent mains, le premier centile marque le seuil en deçà duquel se trouvent les dix mains les plus petites.

En anthropométrie, on présente souvent seulement le 5e, le 50e (équivalent à la médiane) et le 95e centile. Voici par exemple la longueur de la main des britanniques masculins :

  • 5e centile : 174 mm
  • 50e centile : 184 mm
  • 95e centile : 207 mm

Par choix, on considère que les mesures en deçà du 5e et au-delà du 95e centile sont des extrêmes et peuvent être ignorés. Il reste seulement ces trois mesures à prendre en compte : est-ce que le téléphone aura une bonne prise pour ces trois tailles de main ?

Quelle mesure choisir ?

Compliquons encore les choses : on a fait comme si seule la longueur de la main importait, mais il y a d’autres mesures pertinentes. La source dont j’ai tiré la longueur de la main fournit en fait six tailles :

Données anthropométriques d'individus « valides » en millimètres (Source)
Dimension Genre 5e centile 50e centile 95e centile
Longueur de la main Masc. 173-175 178-189 205-209
Fém. 159-160 167-174 189-191
Longueur de la paume Masc. 98 107 116
Fém. 89 97 105
Longueur du pouce Masc. 44 51 58
Fém. 40 47 53
Largeur du pouce Masc. 11-12 23 26-27
Fém. 10-14 20-21 24
Longueur de l'index Masc. 64 72 79
Fém. 60 67 74
Largeur de la main Masc. 78 87 95
Fém. 69 76 83-85

Ces mesures ne sont pas forcément parfaitement corrélées entre elles. Pour schématiser, des mains de bucherons et de pianistes sont longues mais pas de la même manière. Résultat : même si le téléphone couvre 95% des utilisateurs selon une mesure, il peut en exclure d’autres selon d’autres mesures. Plus on ajoute de critères, plus on risque d’exclure de gens. C’est ce qui est arrivé aux chaises ergonomiques d’Herman-Miller. Dans un article passionnant, ils expliquent qu’en croisant sept mesures, leur chaise pouvait être inconfortable pour un tiers des personnes selon au moins une de ces mesures.

ant

EDIT : dans les années 50, l’armée américaine a découvert le même problème pour les cockpits d’avions : « Out of 4,063 pilots, not a single airman fit within the average range on all 10 dimensions ».

Quel principe de conception ?

Il y a des techniques statistiques pour extraire les variables pertinentes d’un ensemble de corrélations, mais c’est hors de portée de cet article. Imaginons qu’une technique de ce genre nous dise que retenir trois des six variables permette de couvrir du 6e au 97e. Ça ne nous dit pas toujours pas quoi faire. Il y a trois axes de conception possibles :

Première solution : décliner le produit en plusieurs tailles afin de couvrir la plus grande population possible. C’est la solution retenue pour les chaises sus-citées (trois tailles) ou d’Apple pour leur montre (deux tailles).

Deuxième solution : rendre le produit ajustable, lors de l’installation ou de l’utilisation. Par exemple on peut changer la hauteur, l’avancement… d’un siège de voiture. Ce serait compliqué pour un téléphone, mais on peut citer le Galaxy Note 3, doté d’un mode assez curieux permettant réduire la surface utile de l’image d’un geste (cliquez pour arrêter l’animation) :

Un geste de va-et-vient réduit la taille de l'écran. (Source : Android Central)
Un geste de va-et-vient réduit la taille de l’écran. (Source : Android Central)

Enfin, on peut essayer de trouver une dimension unique qui satisfasse le maximum de monde. Par exemple on peut placer une borne interactive à hauteur de bras d’une personne de petite taille, dans l’idée qu’il est plus facile pour une grande personne de se baisser que le contraire.

Et l’usage au fait

Il y a une dernière complication : au-delà des critères physiques, les usages d’un téléphone sont variables, y compris pour une même personne.

D’abord, il y a plusieurs manières de tenir son appareil. Au minimum on peut distinguer la prise à une main (une moitié des usages observés), la prise en berceau (plus de 15%) et la prise à deux mains (un petit tiers). Je tire ces chiffres de cette passionnante présentation de Cornelia Laros à Paris Web, qui contient bien d’autres données (portrait vs paysage, changements de prise en main, influence du contexte, etc.).

Prises en main du téléphone

Ensuite, les gens sont prêts à différents compromis selon des facteurs externes à l’objet lui-même. Citons :

  • Les conventions sociales. Selon l’époque et le groupe social, différents styles seront plus ou moins acceptés : « t’as l’air con avec ton ardoise contre l’oreille ».
  • Le type de tâche le plus fréquent. Un contexte d’utilisation avec une pression temporelle forte et un haut facteur de distraction (par exemple : vérifier l’heure de son départ dans une gare) n’appelle pas le même genre de téléphone qu’un contexte de distraction pépouze (type zapper sur Youtube dans son canapé).
  • Les appareils à disposition. Par exemple, il y a dans l’Apple Watch la promesse d’avoir à sortir moins souvent son téléphone de la poche et d’une complémentarité entre les gros écrans des iPhone 6 et l’utilisation ponctuelle de la montre.
  • Les attentes des utilisateurs. Je pense aux profils experts qui préfèrent un téléphone tout simple, puisqu’ils sont de toute façon plus à l’aise avec un ordinateur de bureau pour la moindre tâche complexe.

Rétrospectivement, l’exemple de l’iPhone est intéressant. Sur le seul critère de la prise en main, les premiers modèles étaient indéniablement supérieurs aux phablets d’Android. Du coup, bien des experts (et Steve Jobs lui-même) étaient persuadés qu’Apple n’avait aucune raison de sortir un plus gros iPhone. Le contraire a fini par se produire et s’on est aperçu qu’un grand écran c’était quand même bien pratique.

Conclusion : ne jamais raisonner sur un critère isolé. Tout est affaire de compromis, il faut juste trouver les bons.

Pour aller plus loin

Le germaphobe et l’écran tactile

Ainsi une autoroute peut être une voie pour le conducteur et une limite pour le piéton. (Kevin Lynch, The Image of the City)

Le manuel du parfait germaphobe pour acheter un ticket de métro est un magnifique travail d’enquête sur une interface omniprésente dans les villes : le distributeur automatique. L’auteur, agacé de la lourdeur du processus pour créditer sa carte à New-York (11 étapes contre 3 à San Francisco), est allé discuté avec les créateurs de ces systèmes pour comprendre leurs motivations. C’est un très bon exemple d’interface frustrante cachant des compromis datant d’une autre époque et à une volonté d’être accessible à des profils d’utilisation très différents.

Photo de Aaron Reiss, auteur de l'article
Photo de Aaron Reiss, auteur de l’article

Mais c’est l’origine de l’article qui m’a le plus fascinée : la légère germaphobie de l’auteur. Sa peur des microbes le rend sensible à tout contact physique, surtout dans un environnement aussi hygiéniquement douteux qu’une grande ville et cela l’a conduit à compter le nombre de fois qu’il doit toucher un objet particulièrement horrifiant à ses yeux : l’écran tactile d’un distributeur de billets.

Je trouve fascinant ce regard sur les IHM, diamétralement opposé du mien. Il y a pour moi un aspect magique à toucher un écran, à le voir réagir et à savoir que l’impression d’un simple bout de papier a nécessité l’invocation d’un système complexe et me donne libre accès à une infrastructure publique. Dans ce contexte, la tape sur l’écran constitue l’alphabet de base de nos interactions avec l’informatique. Pour un usager, les boutons d’une borne tactile sont des signaux forts, ils disent « tapote-moi, tu peux dialoguer avec moi » .

Pour un germaphobe, la sémiotique d’une borne tactile est au contraire le dégoût. En conception d’IHM, on considère les affordances comme forcément bonnes et la visibilité est notre critère pour les évaluer : est-ce qu’on voit bien que le bouton est un bouton. Pourtant la gamme de réactions est plus riche, même en restant au niveau du réflexe. Un bouton peut être trompeur (comme noté par Gaver), ou susciter le doute, voire le rejet.

Au-delà des IHM, c’est le regard sur la ville qui change : ce n’est plus une plateforme de déplacements et de liberté mais un terrain dangereux où tous les objets utiles (poignées, rampes, plans) instillent la méfiance.

Notre expérience d’un système ou d’un environnement varie selon notre condition, parfois significativement, parfois de manière invisible. Il est toujours bon de se le voir rappeler.