Monthly Archives: juillet 2012

Les liens de la semaine #3

Un bref panorama des outils de prototypage

J’ai créé une caté­gorie sur Wikipedia pour recenser les outils de proto­ty­page d’interfaces graphiques. Voici une liste plus complète (mais loin d’être exhaus­tive), incluant ceux qui n’ont pas de pages sur Wikipedia et me permet­tant de faire quelques commen­taires le cas échéant.


EDIT : Voici un article plus récent sur la ques­tion.


Adobe Fireworks (Mac OS, Windows)

Outil de dessin orienté proto­ty­page web. La possi­bi­lité d’export en HTML est assez puis­sante. Une fonc­tion de “slicing” permet de spéci­fier quelles portions de la page reste­ront des images (fonc­tion égale­ment présente sur Photoshop, mais moins poussée).


Powerpoint (Mac OS, Windows)

Logiciel d’une poly­va­lence impres­sion­nante. On peut par exemple lancer un diapo­rama en désac­ti­vant le chan­ge­ment de slide à volonté et le clic droit. Parfait pour une maquette inter­ac­tive. Pour ça, allez dans l’onglet Diaporama > Configurer le diapo­rama et cliquez sur “visionné sur une borne” (“terminal” dans la version anglaise).

Hélas, le fait que Powerpoint n’ait pas été conçu comme un logi­ciel de graphisme se sent vite et peut devenir gênant si on veut en faire une utili­sa­tion poussée. Par exemple le nuan­cier n’inclut pas de valeurs hexa­dé­ci­males. Également, le dessin des formes n’est pas inva­riant selon le niveau de zoom. Cela se peut se révéler exas­pé­rant si on cherche à travailler au pixel près. Par exemple, si on veut aligner plusieurs rectangles, suivant le niveau de zoom il y aura un léger déca­lage. 


Axure (Mac OS, Windows, démo de 30 jours)

Logiciel pour créer des maquettes inter­ac­tives avec export en HTML. Inclut une gestion des états pour animer une page sans avoir à la cloner, ainsi que des tran­si­tions (trans­la­tion, fading, etc.). Un début de fonc­tion de script. Possibilité de créer des masters de widget réuti­li­sables. Parmi les outils qui sont unique­ment dédiés au maquet­tage, c’est proba­ble­ment le plus puis­sant. Tiens d’ailleurs la licence est à $589.


Balsamiq Mockups (Mac OS, Windows, démo en ligne limitée, démo complète à télé­charger et valable sept jours)

Volontairement limité, l’outil est imbat­table pour créer rapi­de­ment une maquette. Tout est dans le choix des widgets prédé­finis et des propriétés spéci­fiques pour les modi­fier. J’apprécie aussi le menu en accès rapide pour éditer le contenu d’un widget avec une syntaxe dédiée (taper “lorem” pour obtenir du pseudo-texte, [ ] pour une checkbox, [x] pour qu’elle soit cocher, - [ ]- pour qu’elle soit désac­tivée, ce genre de choses).


Microsoft Expression Blend + Sketchflow (Windows)

Blend cherche à combler le fossé entre graphistes et déve­lop­peurs en propo­sant un outil hybride qui permet de dessiner des éléments d’interface et de voir le code sous-jacent. Ce n’est pas le premier éditeur WYSIWYG et c’est une approche qui attire souvent la méfiance, mais c’est un logi­ciel vrai­ment inté­res­sant. Il génère des projets lisibles direc­te­ment dans Visual Studio et tota­le­ment natifs au niveau du code (il faut choisir entre WPF, la compo­sante graphique de .NET, et Silverlight). Un graphiste peut ainsi profiter des widgets prédé­finis, les styler, spéci­fier leur compor­te­ment et balancer le tout aux déve­lop­peurs qui peuvent l’intégrer au reste du projet. Cela suggère des manières de travailler en équipe assez inté­res­santes. Au minimum, cela favo­rise les inter­ac­tions entre créa­teurs d’interface et codeurs, puisque cela force les premiers à se fami­lia­riser avec la tech­no­logie et les seconds à faire atten­tion aux spéci­fi­ca­tions qu’on leur envoie. 

Par ailleurs, si vous voulez créer une maquette aboutie graphi­que­ment, il est facile d’y inclure les widgets stan­dard de Windows. Si vous voulez plutôt un rendu en fil de fer, le module Sketchflow (dispo­nible dans la version Ultimate) propose un style “mockup”. Mais n’espérez pas la légè­reté d’un Balsamiq. Blend expose via une inter­face graphique une bonne partie de la tech­no­logie WPF : les liai­sons de données, le système de mise en page, les nombreuses propriétés propres à chaque widget (pardon, à Redmond on dit “contrôle”), etc. Les premiers contacts avec le logi­ciel ne sont pas forcé­ment faciles. C’est sans doute le prix à payer, vu la portée des fonc­tion­na­lités,

Omnigraffle + le gabarit Konigi Wireframes (Mac OS, iPad, démo de 14 jours)

Un logi­ciel de diagramme à la base. Je ne suis pas très fan de l’interface.


Pencil (Add-on pour Firefox)

Un peu vieux et limité. 

Just In Mind (Mac OS, Windows, existe en version gratuite)


Flairbuilder (Mac OS, Windows, Linux).


InVision (En ligne, version gratuite)


Les deux petits derniers :

Moqups (En ligne)

Gratuit, fait des maquettes en fil de fer. Emprunte pas mal à Balsamiq, assez orienté iOS. Prometteur.

Fluid UI (En ligne, orienté mobile)

L’utilisateur a toujours raison – ou pas

On voit de temps en temps des gens se plaindre de l’utilisabilité ou des perfor­mances d’un navi­ga­teur lors d’une utili­sa­tion très lourde. Je pense à des décla­ra­tions du genre : “je suis un power user, j’ai quasi­ment toujours plus de cinquante onglets ouverts et mon navi­ga­teur ne fait rien pour me faci­liter la vie”. Les navi­ga­teurs doivent-ils prendre en compte des cas d’utilisation comme celui-ci, que l’on peut quali­fier d’extrêmes, et faire des efforts pour améliorer l’expérience de ces utili­sa­teurs ?

Si vous avez cinquante onglets ouverts dans la même fenêtre et que vous n’avez pas touché à certains d’entre eux depuis plusieurs jours, on peut arguer que vous n’êtes pas un utili­sa­teur avancé mais une personne bordé­lique et que c’est à vous de changer votre work­flow, pas au logi­ciel de s’adapter. Peut-être. Je me pose la ques­tion.

Les liens de la semaine #2

  • Designing Interactions est un chouette livre, édité par Bill Moogridge et portant sur le design de l’interaction et l’histoire des inter­faces homme-machine. Plusieurs chapitres sont trou­vables en ligne.
  • S’il y a bien un domaine où Microsoft se démarque d’Apple, c’est dans sa tendance à parler ouver­te­ment du déve­lop­pe­ment de nouveaux produits. Exemples : ce blog sur Windows 8, ou encore ces nombreux articles sur Office.
  • Un programme qui ressemble à un chat bot mais qui est en fait plus proche de l’assistant personnel.