Le design de l’interface graphique d’une solution est souvent sous-estimé. Il s’agit cependant d’un aspect de la plus haute importance. La plupart d’entre nous passons de longues heures chaque semaine devant nos ordinateurs et quoi de plus stimulant que de travailler avec un logiciel visuellement BEAU !  Pour ma part, c’est un élément essentiel ! Pourquoi ne pas offrir ce bonus à nos clients ? Raffiner les détails pourra charmer certains utilisateurs et fera également marquer des points à son concepteur ! Lors de rencontres avec de nouveaux clients, cette force pourra être mise en valeur avec preuve à l’appui et deviendra un argument de vente supplémentaire. Non ?

Le point de départ afin d’obtenir ergonomie et esthétisme est l’élaboration de maquettes. Je vous partage notre vision et le logiciel que j’utilise pour structurer l’information et obtenir une solution agréable à utiliser… et à regarder !

Durant un projet de développement chez Fin Finaud, mon moment préféré arrive juste après l’analyse : conceptualiser les maquettes ! L’immense avantage de réfléchir à ses interfaces avant de toucher à FileMaker est d’avoir la possibilité de bouger les choses facilement. Nous pouvons confirmer la fonctionnalité et l’emplacement des champs ainsi que la composition des rapports. Nous nous assurons de ne rien oublier et d’obtenir l’approbation du client avant de s’attaquer au développement. Beaucoup plus simple de corriger une maquette que de revenir en arrière dans notre programmation.

Présentement, j’utilise le logiciel Balsamiq Mockup. Il est simple, abordable, me permet pratiquement de tout faire et je peux même obtenir un PDF interactif pour présenter à mon client la navigation de son futur système. C’est parfait !

balsamiq Mockup

Quelques points que j’aime respecter :

  • Ne pas avoir de barre de défilement à l’horizontal
  • Concevoir les maquettes en noir et blanc
  • Réunir et uniformiser la navigation principale
  • Si besoin d’une navigation secondaire, respecter la même règle
  • Définir les zones d’informations
  • Laisser respirer l’interface
  • Aligner les éléments
  • Utiliser des icônes universelles
  • Utiliser une seule typographie

Des liens utiles et d’inspiration…

FileMakerUI960.gsLogo inventiconsDesignrfix

Vous pouvez voir l’exemple que j’ai fait spécialement pour vous au tout début de l’article 😀

Pendant la conférence FileMaker à Montréal au mois de mai dernier, Yann Liqueur-Salzedo de Infografix.biz nous a partagé une citation d’Antoine de Saint Exupéry le célèbre auteur français du « petit prince »:

« La perfection est atteinte, non pas lorsqu’il n’y a plus rien à ajouter mais lorsqu’il n’y a plus rien à retirer. »

J’adore