Monthly Archives: juin 2014

Le guide relativement exhaustif et raisonnablement ultime des outils de prototypage

J’ai com­men­cé un guide des dif­fé­rents logi­ciels de pro­to­ty­page, sous forme de matrice de fonc­tion­na­li­tés. Elle est sur Wikipedia et toutes sug­ges­tions et contri­bu­tions sont les bien­ve­nues.

Pour y voir plus clair, il y a trois sec­tions : géné­ra­liste, wire­fra­ming (zoning) et ani­ma­tion (sou­vent des outils dédiés au mobile). Je pen­sais au départ faire un guide plus large, afin d’inclure des outils pou­vant être pra­tiques pour du pro­to­ty­page mais dont ce n’est pas le but pre­mier : fra­me­works CSS, logi­ciels de desi­gn UI (Fireworks, Sketch), IDE web avec des fonc­tions de tem­pla­ting et de pré­pro­ces­seur, aides au pro­to­ty­page papier, etc. Finalement l’article est limi­té aux logi­ciels dédiés, ce qui fait tout de même quarante-six items. Cela per­met d’éviter le coté fourre-tout et de per­mettre la com­pa­rai­son de fonc­tion­na­li­tés à terme à terme. Une liste brute des outils exclus se trouve dans la page de dis­cus­sion.

Évidemment, ce choix et les caté­go­ries rete­nues sont dis­cu­tables, tout comme la manière dont j’ai ten­té de nor­ma­li­ser les atouts de chaque logi­ciel en les fai­sant ren­trer dans des cases. Certains ser­vices ont certes des concepts propres et sont rem­plis de petites astuces qui peuvent les démar­quer, mais ils sont pour­tant glo­ba­le­ment assez homo­gènes. Si vous avez des idées de meilleur décou­page ou s’il y a des points obs­curs, n’hésitez pas.

Nota bene : les tableaux sont scrol­lables hori­zon­ta­le­ment. Ce n’est pas idéal mais c’est la pré­sen­ta­tion que j’ai trou­vé la plus opti­male.

À faire :

  • Remplir la sec­tion Wireframing.
  • Trouver un décou­page pour la sec­tion Animations.
  • Je compte faire quelques posts pour mettre en valeur des logi­ciels mécon­nus ou des fonc­tion­na­li­tés que j’ai trou­vé cool.
  • J’envisage de faire un flow­chart qui ser­vi­rait de vrai guide pour choi­sir le logi­ciel le plus adap­té à ses besoins. Un arbre de déci­sion 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.