Monthly Archives: juin 2014

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.

Le responsive design ailleurs que sur le web

Les applications natives mobiles, sur Android (et Apple depuis peu) ont accès à des fonctions responsive, mais sur desktop la pratique est moins fréquente. Non seulement les interfaces ont rarement des agencements différents selon la taille de la fenêtre, mais en plus elles ne sont pas toujours fluides, c’est-à-dire que tailles et marges des éléments ne sont pas redimensionnées. Certains logiciels bloquent également la largeur minimale de la fenêtre, parfois drastiquement. C’est dommage, car ce serait l’occasion de mieux prendre en compte les petits écrans (cf. par exemple les distributions de Linux visant spécifiquement les notetbooks) et toutes les manières d’utiliser un OS fenêtré.

Il y a évidemment des contre-exemples : en mode album, iTunes ajuste le nombre de colonnes et la taille des jaquettes. Depuis des années, Microsoft adapte intelligemment son fameux « ribbon », avec un grand nombre de points de rupture au fur et à mesure qu’on réduit la fenêtre.

ribbon microsoft word en responsive design

Dans mon expérience, ce n’est pourtant pas fréquent. Il y a évidemment de bonnes raisons pour ces limitations. D’une, dans la plupart des cas on a affaire à un viewport dont le contenu est par définition fixe (exemple : une page Word). On peut alors seulement jouer sur l’UI (comme dans l’exemple d’Office). De deux, on retombe sur le grand problème du « device-agnostic responsive design » (concevoir pour une largeur donnée, sans préjuger de l’appareil utilisé) : il est difficile de prédire les préférences des gens. Si je redimensionne la fenêtre, serais-je content d’avoir un agencement adapté et sans scroll horizontal, ou au contraire énervé qu’on m’impose quelque chose ? Suivant les cas et les raisons du redimensionnement, la réponse varie.

La solution la plus utilisée dans les logiciels de productivité un peu complexes, c’est de laisser l’utilisateur personnaliser les différentes palettes, barres et panneaux d’interface comme il l’entend. Par exemple, Photoshop permet de créer différents « espaces de travail », c’est-à-dire différents agencements que l’utilisateur pourra activer comme il lui sied.

Jusqu’ici j’ai surtout parlé du cas assez restreint où l’utilisateur redimensionne sa fenêtre. Le problème du responsive se pose de manière peut-être plus aiguë si l’on veut créer des services dans l’écosystème Windows. Microsoft promet une plateforme unifiée où le développement à travers les OS sera unique, ou en tout cas facilité. Que Microsoft tienne sa promesse et que ce soit une bonne idée ou non, il reste que Windows, (feu ?) Windows RT et Windows Phone sont de plus en plus bâtis sur les mêmes fondations, aussi bien dans le design que dans la technique. Cela pose la question de la convergence des différentes applications : à quel point doivent-elles être semblables, faut-il un processus de conception unique, etc.