Monthly Archives: juin 2014

Le guide relativement exhaustif et raisonnablement ultime des outils de prototypage

J’ai commencé un guide des diffé­rents logi­ciels de proto­ty­page, sous forme de matrice de fonc­tion­na­lités. Elle est sur Wikipedia et toutes sugges­tions et contri­bu­tions sont les bien­ve­nues.

Pour y voir plus clair, il y a trois sections : géné­ra­liste, wire­fra­ming (zoning) et anima­tion (souvent des outils dédiés au mobile). Je pensais au départ faire un guide plus large, afin d’in­clure des outils pouvant être pratiques pour du proto­ty­page mais dont ce n’est pas le but premier : frame­works CSS, logi­ciels de design UI (Fireworks, Sketch), IDE web avec des fonc­tions de templa­ting et de prépro­ces­seur, aides au proto­ty­page papier, etc. Finalement l’ar­ticle est limité aux logi­ciels 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 compa­raison de fonc­tion­na­lités à terme à terme. Une liste brute des outils exclus se trouve dans la page de discus­sion.

Évidemment, ce choix et les caté­go­ries rete­nues sont discu­tables, tout comme la manière dont j’ai tenté de norma­liser les atouts de chaque logi­ciel en les faisant rentrer dans des cases. Certains services ont certes des concepts propres et sont remplis de petites astuces qui peuvent les démar­quer, mais ils sont pour­tant globa­le­ment assez homo­gènes. Si vous avez des idées de meilleur décou­page ou s’il y a des points obscurs, 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 trouvé la plus opti­male.

À faire :

  • Remplir la section Wireframing.
  • Trouver un décou­page pour la section Animations.
  • Je compte faire quelques posts pour mettre en valeur des logi­ciels méconnus ou des fonc­tion­na­lités que j’ai trouvé cool.
  • J’envisage de faire un flow­chart qui servi­rait de vrai guide pour choisir le logi­ciel le plus adapté à ses besoins. Un arbre de déci­sion moins rude que les tableaux actuels. À voir.

Le responsive design ailleurs que sur le web

Les appli­ca­tions natives mobiles, sur Android (et Apple depuis peu) ont accès à des fonc­tions respon­sive, mais sur desktop la pratique est moins fréquente. Non seule­ment les inter­faces ont rare­ment des agen­ce­ments 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 redi­men­sion­nées. Certains logi­ciels bloquent égale­ment la largeur mini­male de la fenêtre, parfois dras­ti­que­ment. C’est dommage, car ce serait l’oc­ca­sion de mieux prendre en compte les petits écrans (cf. par exemple les distri­bu­tions de Linux visant spéci­fi­que­ment les notet­books) et toutes les manières d’uti­liser un OS fenêtré.

Il y a évidem­ment des contre-exemples : en mode album, iTunes ajuste le nombre de colonnes et la taille des jaquettes. Depuis des années, Microsoft adapte intel­li­gem­ment 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 pour­tant pas fréquent. Il y a évidem­ment de bonnes raisons pour ces limi­ta­tions. D’une, dans la plupart des cas on a affaire à un view­port dont le contenu est par défi­ni­tion fixe (exemple : une page Word). On peut alors seule­ment jouer sur l’UI (comme dans l’exemple d’Office). De deux, on retombe sur le grand problème du « device-agnostic respon­sive design » (conce­voir pour une largeur donnée, sans préjuger de l’ap­pa­reil utilisé) : il est diffi­cile de prédire les préfé­rences des gens. Si je redi­men­sionne la fenêtre, serais-je content d’avoir un agen­ce­ment adapté et sans scroll hori­zontal, ou au contraire énervé qu’on m’im­pose quelque chose ? Suivant les cas et les raisons du redi­men­sion­ne­ment, la réponse varie.

La solu­tion la plus utilisée dans les logi­ciels de produc­ti­vité un peu complexes, c’est de laisser l’uti­li­sa­teur person­na­liser les diffé­rentes palettes, barres et panneaux d’interface comme il l’en­tend. Par exemple, Photoshop permet de créer diffé­rents « espaces de travail », c’est-à-dire diffé­rents agen­ce­ments que l’uti­li­sa­teur pourra activer comme il lui sied.

Jusqu’ici j’ai surtout parlé du cas assez restreint où l’uti­li­sa­teur redi­men­sionne sa fenêtre. Le problème du respon­sive se pose de manière peut-être plus aiguë si l’on veut créer des services dans l’éco­sys­tème Windows. Microsoft promet une plate­forme unifiée où le déve­lop­pe­ment à travers les OS sera unique, ou en tout cas faci­lité. 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 fonda­tions, aussi bien dans le design que dans la tech­nique. Cela pose la ques­tion de la conver­gence des diffé­rentes appli­ca­tions : à quel point doivent-elles être semblables, faut-il un processus de concep­tion unique, etc.