mercredi 27 juin 2012

Mockup ou pas mockup ?

La problématique  :
Pour bon nombre d'entre nous, ils devient indispensable de réaliser rapidement des maquettes logicielles et bonne facture pour valider les orientations ergonomique...mais comment faire ?
  • Les dessiner à la main ?
  • Utiliser des écrans existants ?
  • Utiliser une charte graphique ?
  • Utiliser un outil de mockup ?

Ce que vous ne trouverez pas dans cet article :
L'idée du billet n'est pas de faire une liste exhaustive des tous les outils de Mockup d'interface logiciel du marché, tout d'abord parce qu'il en existe un certains nombre et que d'autres articles ont déjà fait ce travail de "benchmark". Vous trouverez cependant un certain nombre d'outils en fin d'article via liens.

Mais alors en quoi consiste l'article ?
Et bien c'est simple, il s'agit d'expliquer une (ma) démarche qui en très peu de temps peu permettre d'arriver à un produit d'interface sur lequel vos clients ou vous même pouvez vous projeter sur l'avenir de votre logiciel...

Qu'est le mockup ?
Le mockup (Littéralement : Maquette) n'est pas un terme dédié à l'informatique, cependant, il est devenu très usité ces dernières années depuis que des logiciels permettent de réaliser des maquettes réalistes des interfaces homme machine.


Définition Wikipédia Mock-upEn informatique, le terme mock-up (qui vient du même mot anglais qui signifie une maquette à l'échelle 1:1) désigne un prototype d'interface utilisateur. Un mock-up a ainsi pour rôle de présenter les idées sur l'utilisation d'un logiciel.


Le premier contact est...
Tout d'abord il est "primordial" de prendre comme postulat que le premier contact avec l'outil informatique est le regard. Ce postulat est d'ailleurs avéré pour bien d'autres sujets, votre premier contact et première impression avec une voiture est le regard, avec une tablette tel l'iPad également etc...

Vous aurez donc beau essayer d'expliquer la future interface d'un logiciel, ses fonctionnalités ou son ergonomie par des mots, un schéma valant mieux qu'un long discours, sans support de type maquette votre cause est perdue d'avance. Il faut donc réaliser une maquette...donc oui au mockup

Second postulat...
Le second postulat est qu'en phase de d'analyse ou de définition, votre maquette va bouger et évoluer un certain nombre de fois de manière itérative...incrémentale, elle va s'affiner au fur et à mesure...

Il est donc préférable d'opter pour un outil informatique permettant les changements. Il est donc à éviter de les faire à la main, hormis lors de la première réunion d'expression de besoin, et également éviter de les faire avec un outil de dessin d'images de type bitmap tel photoshop ou mspaint.

A faire...
Il faut en effet privilégier l'outil à base de "calques", l'outil permettant d'être neutre dans son graphisme et l'outil permettant un minimum d'interactivité par des liens hypertextes par exemple.

Les outils que je déconseille donc sont : 

  • MsPaint, pour des images bitmap
  • MsVisio, pour sa non neutralité dans l'interface, il oblige a dessiner des écrans de type windows !
  • et enfin MSPowerPoint qui ne contient pas de bibliothèque d'éléments natif d'interfaces homme machine tel les boutons, les onglets etc...

Les outils que je conseille sont donc :

  • Pencil : simple, gratuit, un peu complexe dans la gestion des bibliothèques d'objets. Contient cependant une librairie "Sketchy GUI" donnant l'impression d'un dessin à la main. Il permet en autres :
    • D'aligner automatiquement les objets entre eux,
    • Interconnecter les objets à des pages pour une animation
    • Utiliser un style "main levée" Sketchy GUI,
    • Réaliser différents type d'export pour les présentations
    • ...


Copie d'écran PENCIL - "Skectching Composant" -  Pencil

Certes, il n'a probablement pas toutes les fonctionnalités de Balsamiq, mais je vous assure qu'a part travailler dans une web agency, Pencil est un sérieux concurrent si on les compare d'un point de vue rapport qualité / prix et répondra je le pense en majorité à vos besoins de maquette...

Petite information, Pencil bien que disponible en version WEB propose une version StandAlone et surtout des bibliothèques à télécharger et importer dans Pencil....

Et après ...
Une fois la partie présentation réalisée et validée, il peut être intéressant de réaliser la structure de votre application. Je parle exclusivement dans ce cas d'application WEB ou technologie WEB. Dans ce cas, je vous conseille un petit outil réalisé par les équipes à l'origine du projet "Eclipse". Eclipse étant le céléèbre outil de développement Java.

L'outil dont j'aimerai vous parlé est : Maqetta

Bien sûr nous pourrions imaginer réaliser la maquette dès le début dans cet outil, mais il me parait un peu trop rigide dans le dessin des écrans, dans la mesure où il ne propose pas de réels objets "Sketch" mais propose de les construire.

Cependant, Maqetta propose une mise en place de la structure HTML de manière très puissante avec notamment : 
  • Des ajouts par simples glisser/déposer d'objets disponibles dans une bibliothèque,
  • Un accès à un nombre important de propriété par objets (de la taille à la couleur en passant par l'évènement..)
  • Une large bibliothèque : Dojo ContainersDojo ControlsHTMLDojox Mobile, Jquery UI, Yahoo UI...
Les points positifs de cet outil, des possibilités extrêmement large qui en font un vrai outil de développement WEB pour la partie structure de page.

Et si point négatifs ils y avait, il faut être de la partie pour l'utiliser, car il est nécessaire de lancer un script MS-DOS qui exécute un serveur WEB... (et oui là j'ai perdu quel lecteur...désolé...)

et oui enfin j'oubliai, lors de mon utilisation de Maqetta j'ai eu une erreur sur le fichier projet, et là impossible de récupérer le projet.

Cela n'en fait pas moins un outil promu à un bel avenir sachant que je n'ai du utiliser que 5% de ses capacités...


Donc pour finir ...
  • Les Mockup : OUI
  • L'outil idéal : PENCIL
  • et pour la suite : Maqetta
Bonne maquette....






Aucun commentaire:

Enregistrer un commentaire