Quelques expérimentations

Le flat design de la Grèce antique à nos jours

Le 04 décembre, j’ai donné une présentation à Lille dans le cadre du quatrième Welsh Design, qui m’a gentiment donné l’opportunité de parler de mes lubies.

L’angle est très proche de cet article sur l’éternelle querelle du minimalisme, mais le contenu est largement remanié. A l’origine, il y a ma frustration face au débat du flat design, débat nécessaire mais manquant à mon sens cruellement de recul. D’une part, j’ai voulu apporter quelques repères historiques, montrer que l’opposition entre le chargé et le sobre ne date pas d’hier. D’autre part, j’ai tenté de distinguer des concepts différents mais souvent confondus, car ayant tous à voir avec l’historicité du design et de la technique : skeuomorphisme, métaphore, signe, kitsch et ce que j’ai appelé « exaptation », faute d’une meilleure traduction pour repurposing.

Vu les limites de temps et de mes capacités oratoires, le contenu était un peu ambitieux, mais enfin voilà les diapositives vaguement annotées de la présentation. (Je tente un lecteur de PDF embarqué, dites‐moi si ça déconne.)

Vu les limites de temps et de mes capacités oratoires, le contenu était un peu ambitieux, mais enfin les diapositives vaguement annotées de la présentation sont disponibles ici.

Le guide relativement exhaustif et raisonnablement ultime des outils de prototypage

J’ai commencé un guide des différents logiciels de prototypage, sous forme de matrice de fonctionnalités. Elle est sur Wikipedia et toutes suggestions et contributions sont les bienvenues.

Pour y voir plus clair, il y a trois sections : généraliste, wireframing (zoning) et animation (souvent des outils dédiés au mobile). Je pensais au départ faire un guide plus large, afin d’inclure des outils pouvant être pratiques pour du prototypage mais dont ce n’est pas le but premier : frameworks CSS, logiciels de design UI (Fireworks, Sketch), IDE web avec des fonctions de templating et de préprocesseur, aides au prototypage papier, etc. Finalement l’article est limité aux logiciels dédiés, ce qui fait tout de même quarante‐six items. Cela permet d’éviter le coté fourre‐tout et de permettre la comparaison de fonctionnalités à terme à terme. Une liste brute des outils exclus se trouve dans la page de discussion.

Évidemment, ce choix et les catégories retenues sont discutables, tout comme la manière dont j’ai tenté de normaliser les atouts de chaque logiciel en les faisant rentrer dans des cases. Certains services ont certes des concepts propres et sont remplis de petites astuces qui peuvent les démarquer, mais ils sont pourtant globalement assez homogènes. Si vous avez des idées de meilleur découpage ou s’il y a des points obscurs, n’hésitez pas.

Nota bene : les tableaux sont scrollables horizontalement. Ce n’est pas idéal mais c’est la présentation que j’ai trouvé la plus optimale.

À faire :

  • Remplir la section Wireframing.
  • Trouver un découpage pour la section Animations.
  • Je compte faire quelques posts pour mettre en valeur des logiciels méconnus ou des fonctionnalités que j’ai trouvé cool.
  • J’envisage de faire un flowchart qui servirait de vrai guide pour choisir le logiciel le plus adapté à ses besoins. Un arbre de décision moins rude que les tableaux actuels. À voir.

Un menu radial inspiré des jeux de tir

Résumé : Plein de mots arides sur les modes en IHM, puis une modeste proposition d’interaction pour écran tactile.

Rappels sur les modes

En IHM, un mode est un paramètre qui permet de produire différents résultats avec le même input, selon que ce mode soit activé ou non. C’est en fait très simple : par exemple enclencher la touche Caps Lock fait basculer les autres touches en mode « lettre capitale ».

On considère classiquement que c’est une technique utile mais à manier avec précaution. C’est pratique pour augmenter l’éventail des possibilités. Les touches Shift et Caps Lock permettent de doubler le nombre de caractères que l’on peut entrer, alors que les premières machines à écrire avaient un clavier dédoublé ou devaient se contenter d’une seule casse. Le problème est que cela risque d’égarer l’utilisateur. Vous vous souvenez sans doute de l’inénarrable mode « refrappe » : on pouvait l’activer avec la touche Insert et ce n’était signalé que par un minuscule RFP en bas de la fenêtre de Microsoft Word. Il était facile d’entrer dans ce mode sans le vouloir mais nettement plus difficile d’en sortir, quand on ne connaissait pas le truc.

Jeux vidéo et quasi‐modes

Si on veut avoir le beurre et l’argent du beurre, Jeff Raskin recommande l’utilisation de ce qu’il appelle des quasi‐modes, c’est-à-dire des modes qui demandent une intervention constante de la part de l’utilisateur. Citons le cas du pédalier d’un piano ou la touche Shift d’un clavier : elle n’a pas d’effet si elle n’est pas pressée. Cela demande plus de coordination motrice, mais en contrepartie les deux actions (ici, shift + lettres) sont liées et concomitantes. L’utilisateur a ainsi plus de contrôle sur le système et cela diminue les risques de rester dans un mode sans s’en rendre compte.

Dishonored
Dishonored (ZeniMax / Arkane Studios, 2012)

Certains jeux vidéo croisent cette idée avec celle des menus radiaux (cf. la capture d’écran supra). Si on veut par exemple changer d’arme, on maintient une touche (souvent la molette de la souris) pour faire apparaitre un cercle d’items. Diriger la souris dans la direction d’un item permet de le sélectionner. C’est une très bonne idée qui fait intervenir plusieurs concepts :

  • La mémoire musculaire (ou apprentissage moteur). Au début, il faut apprendre à situer et reconnaitre le pictogramme de l’item souhaité, mais avec l’habitude tout ce qu’il y a savoir, c’est un mouvement de la main selon un certain angle.
  • La loi de Fitts, selon laquelle le temps mis par l’utilisateur pour atteindre une cible dépend de sa taille et de son éloignement (je schématise). Ici la distance est infime (il faut à peine bouger la souris) et la taille angulaire est grande (plus ou moins, selon le nombre d’items).
  • Le quasi‐mode. Ici, le fait de devoir maintenir la touche est une force plutôt qu’un pis‐aller, car ce genre de menu sert d’accès rapide. Il est utilisé souvent et brièvement. Ce ne serait pas adapté pour l’inventaire d’un jeu de rôle, dans lequel on s’attarde plus.

Le design d’interfaces pourrait s’inspirer de cette idée. Cela fait longtemps que les menus radiaux sont utilisés ici et là, mais ce n’est pas toujours convaincant. Dernièrement, on peut citer l’excellente application OneNote sur la Surface de Microsoft, ou bien les widgets s’inspirant de Path – lesquels qui brillent surtout par leur animation.

Je trouve l’idée particulièrement adaptée aux écrans tactiles, donc j’ai en tête un modèle d’interaction de ce genre : presser deux doigts pour faire apparaitre un menu, puis les faire glisser vers l’item désiré. Décoller les doigts de l’écran suffit à sélectionner ce dernier. L’interaction conjugue la facilité des gestes tactiles et l’immédiateté du feedback visuel. Le résultat est fluide puisque les doigts ne quittent pas l’écran. Dans l’animation ci‐après (oui c’est juste un Gif pourri), le menu apparait vers le haut pour ne pas être caché par la main. L’exemple est assez limité (partager un article vers divers services), mais au‐delà ce genre d’interaction me semble prometteur.

2x\_Press\_Hold
Cliquer sur l’animation pour l’arrêter.

Cela pourrait être utilisé soit comme menu contextuel, soit comme menu global (ie qui permettrait d’accéder aux même actions quelque soit l’endroit où j’appuie). Le premier cas serait utile avec beaucoup de cibles potentielles distinctes (par exemple une page pleine de liens), tandis que le second serait plus avantageux avec des actions répétitives (par exemple accéder à une palette d’outils dans une application de dessin). Je suis preneur d’avis et de critiques. L’utilisabilité aussi bien que l’utilité de cette proposition sont certainement critiquables et j’ai pu passer à coté de travaux semblables.

Consider the badger

enter image description here

BadgerBadgerBadger.com + “Consider The Lobster” par Foster Wallace + la police Lobster. Je sais, croiser les références ça ne va pas très loin.

Un petit redesign de Gmail (bonus : supprimer la barre noire des sites Google)

Je me suis amusé (est‐ce le bon mot ?) à faire deux feuille de style pour améliorer un peu l’interface de Google. Pour ceux qui ne connaitraient pas, avec un addon pour son navigateur et un peu de CSS, on peut personnaliser l’apparence d’un site. On peut les trouver ici.

La première fait gicler la barre de navigation noire des services de Google, vu que je ne m’en sers pas et qu’elle est mal intégrée à Search : elle fait doublon avec les boutons « Images », « Maps », etc. tout en se comportant légèrement différemment. Je ne suis pas à le premier à faire ça, mais celle‐ci est plus exhaustive et marche mieux que celles que j’ai trouvé (sans doute parce qu’elle est encore récente, hin hin).

La seconde réarrange le layout (parler de redesign est sans doute un grand mot) pour quelque chose de plus minimaliste. Pour résumer, les deux barres d’actions sont comprimées en une seule, sont supprimés Google Chat, la colonne à droite d’un mail, les fonctions de G+… la barre noire est transformée en petite liste en bas à droite. Évidemment, c’est accordé à mes préférences et inutilisable pour pas mal de monde. Mais c’était un exercice intéressant de voir jusqu’on pouvait aller.

gmail_full

Le résultat n’est pas parfait et je ne garantis pas la perennité du CSS. Il y a beaucoup de règles vilaines et il suffit que Google change le nom d’une classe pour que les choses se gâtent. En attendant, si vous avez Firefox et l’addon Stylish, vous pouvez les essayer depuis .