L’idée est bonne au premier abord, mais les résultats obtenus semblent loin d’être vraiment professionnels. La solution est basé sur une bibliothèque d’objets qui sont censés être des standards en matière d’interface utilisateur (par exemple, le CoverFlow qu’on voit à la fin de la vidéo). Or ces standards évoluent sans cesse, et même les objets les plus standardisés (boutons de controles, barre de téléchargement, etc.) ont tendance à évoluer (c’est même ce qui fait la qualité des applications modernes).

L’innovation, aujourd’hui, provient d’une très bonne compréhension des dits standards et de leur amélioration constante. Or, Balsamiq semble permettre une utilisation un peu simpliste des objets numériques. Il est préférable, à mon sens, d’utiliser les librairies de Yahoo! (Yahoo! UI Design Patterns) et les API associées.

A la fin des années 90, les éditeurs de logiciels WYSIWYG web pensaient aussi pouvoir conquérir un public semi-professionnel (ou semi-amateur) en proposant des interfaces ’simples’, or nous savons bien que ce n’est pas ce qui s’est produit. Ce sont les blogs qui ont permis aux utilisateurs débutants de publier sur le web, et non pas les logiciels en question.

Je ne vois pas bien dans quelle niche d’usage pourrait venir se situer Balsamiq, en fait. Les cahiers de spécifications techniques pour les logiciels sont autrement plus complexes que les exemples montrés dans la démo (sans parler du bord à spirales à gauche…), et le travail nécessaire au maintient d’une librairie de standards digne de ce nom est assez colossal.

Si quelqu’un a des exemples d’utilisation professionnel de Balsamiq, je serais interresé pour les voir en tout cas.

Avant même d’essayer, la première image de l’interface qu’on voit est en comic sans…
Pour une application qui va nous aider en terme de design, c’est quand même une grosse faute de gout.

Je viens d’essayer et en fait tout est en comic sans par défaut. Je crois que je vais rester au crayon

A comparer avec http://www.gliffy.com/ qui offre la même chose plus d’autres (UML, FlowChart, etc. (même plans de maison !)) en ligne.

Hi there, thanks for the great review!

I understand french but haven’t written in French in so long I’d just make a fool of myself, so I’ll answer in English, I hope that’s ok.

—
matthieu - I encourage you to try Mockups for your next project, and I’d be happy to send you a free license. I hope you’ll be surprised. The point is not to look professional, but to help software designers (programmers included) focus on the structure and usability of their applications/sites, without worrying about anything else. The fact that the result is digital also helps with collaboration, but, at least for me, the strong point of Mockups is how it helps me jot down my ideas and refine them much more quickly than what I could do on paper, or in code.

Regarding examples of professional uses of Mockups, I know of many (I have over 130 customers now), but only some are publicly available. I plan on posting some real-world case studies on my blog in the future.

—
houille - I know Comic Sans makes designers cringe, my apologies. I chose it because it was cross-platform and I didn’t need to embed it, but maybe the drawbacks outweigh the positives in this case. Someone suggested I use these fonts: http://tinyurl.com/5cszfc what would you suggest?

—
Evopub: I love Gliffy! The difference between Mockups and Gliffy is that Mockups is a “vertical” (specialized) tool, Gliffy is a “horizontal” diagramming tool.

—
Thanks everyone for the comments, I am always looking for ways to improve Mockups!

Peldi
————————————————–
Giacomo ‘Peldi’ Guilizzoni
Founder, Balsamiq Studios, LLC
http://www.balsamiq.com
ph: +1 (415) 367-3531, Skype, GTalk, Facebook, Twitter, FriendFeed: balsamiq

personnellement, j’ai utilisé balsmiq dans un cadre professionnel. Et il a un avantage qui est son aspect crayonné. le client ne s’attend pas au résultat qu’il voit. il comprend directement que se n’est qu’une maquette.

Il manque peut-être un outil de type crayon. Afin de pouvoir complété le dessin si l’élément est manquant dans la palette.

Merci pour cette nouveauté, mais je rejoins par certains aspects l’analyse de Mathieu.

Directeur artistique dédié au Web depuis une chtite décennie maintenant, de la startup montée par une poignée de furieux, en passant par la Webagency bien charpentée ou le grand compte, j’ai pu observer en tant que freelance à peu près tous les cas de figures.

Le problème a rarement été la fourniture des masques de pages, ou zoning, telle que le propose Balsamiq (ou bien je n’ai rien compris à cette appli). La plupart des gens de ma professions bossent avec des schémas de pages fait sous PowerPoint par leur client. Dans d’autres cas, il revient à notre savoir-faire de réaliser et de proposer ces masques.

Cela structure et formalise le cheminement jusqu’à l’habillage visuel final.

Non, curieusement ce n’est pas à cet endroit que cela pêche et encore aujourd’hui alors que déjà 10 ans se sont écoulés, mais bien en amont.

L’histoire, la logique de communication de chaque page à réaliser, puis à mettre à la disposition d’un éventuel visiteur du site final reste une tannée à imaginer.

Après tout ce temps écoulé, l’expérience des uns et des autres sur le Web, force est de constater que les avancées dans ce domaine restent encore timides, spécialement en France.

Fièrement les clients me présentent le cahier des charges du “super site de la mort qui tue qui va bien arracher le sac à dos très fort”.

Mais à la question : “que souhaitez-vous que l’utilisateur, pense, croit ou fasse en toute priorité en voyant cette page ?”, je vois perler des gouttes de sueur sur le visage au sourire gêné de mon interlocuteur.

Le sourire se transforme ensuite en rire quasi hystérique quand je pose la question pour toutes les pages. Même celle des mentions légales. Je sors alors mon tube de Xanax et en propose à mon client.

Nous enchaînons ensuite sur une session de tai-Chi (style Yang) salvatrice afin de retrouver le calme nécessaire destiné à répondre à cette fichue question : a quoi sert en priorité chacune des pages et comment formuler la communication de manière univoque en ce sens.

Comment construire une affiche de cinéma pour chaque page dans le but de vendre (hé oui, le Web est destiné à ce seul objectif). Vendre une idée, un service, un produit, une action à accomplir, mais vendre, emporter l’adhésion, donc raconter une histoire.

Dernièrement il m’a été donné la chance de collaborer avec une belle start-up au brillant avenir. Un outil de sélections de Resort avec force vidéos, etc.

On pouvait facilement deviner que des milliers d’heures en développement avaient été consacrées à l’appli. Cela occultait tout le reste. Au final de la présentation difficile pour moi de lacher autre chose que : “Vous avez un super outil. Génial. Donc vous allez lancer sur le Web le unième super outil”. Et les “dèv” de me regarder les yeux brillants : “Tu l’as dis un super outil !”.

“Cet outil est super jusqu’à qu’un autre arrive, copie, ou fasse mieux dans un avenir par forcément si lointain, non ? Et là, il restera quoi de super au final ?”.

Re Xanax et re Tai-Chi.

Personne n’avait imaginé qu’il fallait auparavant se pencher sur la légende, le mythe à construire, l’histoire incroyable, le scénario diaboliquement bon qui emporte le visiteur comme une bonne vieille cassette VHS dirigiste ou une salle de ciné qui ne laisse rien d’équivoque.

Ce pli, une palanquée d’outils VS une méchante bonne idée par page, reste encore très marqué dans les briefs et les cahiers de charges.

Les pages testent encombrées de menus, de gadgets, bref de portes de sorties que le visiteurs s’empresse de suivre en lieu de se diriger vers l’endroit précis où nous souhaitons le conduire sur chaque page.

Il n’est pas certain que Balsamiq puisse aider à la résolution de cette histoire car il prolonge l’illusion qu’il ne faille pas se donner la peine d’imaginer une légende de la mort qui tue pour chacune des pages de notre site.

Chez mon libraire j’ai dégotté une super appli en ce sens. Un crayon de papier HB que je taille au cutter.

There’s nothing worst than comic sans, I actually erased it. Put aything (arial/verdana) but this awfull font that all the PAs in the world use to pretend they are creative, sorry for being so harsh but this font should be banned, forbidden, burnt

FrederickDrai, thanks for the nice comment. Forgive my answering in English and forgive me if I misunderstood your point, but I wanted to make it clear that Mockups does not promise users to be a tool that lets you build great websites just because it’s easy to use. On the contrary, I am very well aware that simplicity is the hardest thing to achieve. My goal with Mockups is to help people try to build the best (i.e. simple, most usable) website/application they can, by removing all distractions and giving them a tool that is, in itself, a pleasure to use (i.e. it gets out of your way). In a sense it’s similar to the excellent Writeroom: http://hogbaysoftware.com/products/writeroom (some people call this category “zenware”)

Regarding the “narration” part of your comment, I am working on a way to stitch multiple mockups together into an interactive prototype. It’s a highly requested feature and I have some exciting plans about it, I just don’t have a timeline for its implementation yet.

Thanks again for the great discussion!

Tout à fait d’accord avec FrederickDrai sur son analyse, … avec un bénol sur l’utilisation de ce type d’outil pour des interfaces web.

Il ne doit pas être utilisé en amont de l’étude ou du cahier des charges, mais éventuellement pendant ou après, afin de visualiser les concepts de chaque type de page, pour le client bien sur, mais aussi pour les équipes de production, web designer et développeurs.

J’utilise Omnigraffle avec les librairies Yahoo et autres, mais le crayon HB suffit dans bien des cas

Testé il y a quelques jours, et totalement convaincu.

J’ai essayé ces… 15 dernieres années… une multitude de logiciels pour faire des mockups, ils sont soit trop compliqués (omnigraffle), soit tout simplement pas fait pour cela (powerpoint, keynote), Balsamiq est parfait.

Chapeau l’artiste.

Pour ce qui est de savoir à quel stade d’un projet l’utiliser, franchement, ce n’est pas comme s’il n’y avait qu’une méthode et une seule pour concevoir un site web. Dans un mode d’agile dev., ce logiciel apporte un surplus de souplesse très bienvenue, sa facilité d’utilisation le rend manipulable par toute l’équipe, et AIR le rend compatible avec toutes les plateformes… un rêve. Dans un mode où l’on passe par un cahier des charge complet et détaillé, c’est juste un petit plus, certes, mais à ce prix, pourquoi s’en passer ?

Au final, ce soft me semble indispensable à une startup, pour une webagency “grand comptes”, en effet, c’est plus compliqué à intégrer à une chaine de production plombée en amont par une profonde méconnaissance du web

Bonjour,
après avoir testé un petit peu balsamiq.
Je le vois plus comme un outil qui permette (à moindre coût) d’exprimer des besoins et de faire évoluer cette expression “facilement”.
Je le compare plus à des outils comme Powerpoint, Dia, Gliffy, Visio ou Axure.

Mais celà reste un outil !
Il a l’avantage d’être simple, facile à installer et utilisable rapidement par n’importe qui.
Il ne cherche pas à remplacer la réflexion qu’il peut y avoir autour d’un design ou d’une mise en place d’architecture de site ou d’application.

Une bonne idée a été de dessiner les éléments façon crayon, ce qui permet immédiatement d’identifier le niveau de l’information du point de vue d’un client (d’expérience, beaucoup ont du mal à faire la différence entre un dessin de “zonage”, un maquette graphique, un maquette dynamique et un prototype…et ce n’est pas fautes d’explications…)

Pour la police de caractère, je comprend la préoccupation du multiplateforme, mais on peut aussi passer en police “system” à ce que j’ai vu.

Si j’en crois le dernier commentaire de Peldi, il va rajouter la possibilité d’interaction entre “mockup” ce qui lui permettra d’être un peu plus complet face aux ténors cités plus haut.

I don’t speak french, so please forgive my English. I’ve included Google’s translation of my comments, which should, at the very least, be entertaining

Thanks for the kind words and mentions of Gliffy. If anyone hasn’t checked us out (or hasn’t checked us out in the past couple months), we’ve recently updated our UI symbols library, specifically to make creating nice mockups and wireframes easier than before.

—-

Je ne parle pas français, de sorte s’il vous plaît pardonner mon anglais. J’ai inclus de Google en matière de traduction de mes observations, qui devrait, à tout le moins, être divertissant:)

Merci pour les paroles aimables et mentions de Gliffy. Si quelqu’un n’a pas vérifié nous (ou n’a pas vérifié nous dans le passé quelques mois), nous avons récemment mis à jour notre bibliothèque de symboles interface utilisateur, en particulier pour faciliter la création et agréable maquettes wireframes plus facile qu’auparavant.

Dans le même genre, il y a aussi Pencil ( http://www.evolus.vn/Pencil/Home.html ), une application libre qui fonctionne sous Firefox.

@Peldi

Je vais essayer un peu plus Balsamiq, c’est sûr, mais je voulais simplement préciser que je réalise des mockups à longueur de semaines justement. Je pense avoir poussé assez loin l’experimentation dans ce domaine pour me rendre compte de la difficulté de cette pratique (qu’on appelle aussi courament Architecture d’Information ou Design Fonctionnel, soit dit en passant)

L’approche traditionnelle consiste à réaliser des mockups approximatifs en utilisant des outils complètement obsolètes tels que PowerPoint. Cette approche perdure encore chez les clients et les chefs de projets d’agences web… Dans mon agence, je renvoie dans leur box les chefs de projets qui me proposent des mockups réalisé sous PowerPoint…
Ce type de pratique qui date des années 90 doit cesser. Si on veut prgresser, il faut accepter la complexité.

Je n’ai pas été non plus particulièrement convaincu de l’efficacité des outils soit disant spécialisés (Visio est pour moi le contre-exemple du bon outil). J’ai trouvé plus de satisfaction à utiliser InDesign, Keynote, et OmniGraffle. Pour moi l’outil professionnel de Design Fonctionnel n’existe pas encore.

Je sens que mon commentaire va provoquer des remous…