UX, Wireframe, Widget Library, Axure – Créer une bibliothèque Widget Library Axure pour faire des maquettes des écrans Google TV


L’utilisation des widget libraries d’Axure, que l’on traduira très approximativement par bibliothèque, présente 3 avantages que l’on peut résumer ainsi : efficacité, cohérence et collaboration. Autant d’attributs indispensable à un projet web, mobile ou applicatif qui serait mené de manière « Agile » avec une dose de « Lean UX ». S’appuyer et créer ses propres bibliothèques dans Axure offre un gain de temps considérable et un surcroît de clarté dans la conduite de projet. Vous n’êtes pas obligé(e) de ré-inventer la roue pour chaque écran sur chaque nouveau projet. Par analogie, le bénéfice est identique à s’appuyer pour votre développement en Javascript sur jQuery ou en PHP sur un framework type Code Igniter ou Kohana… Rapide, Efficient, Agile en quelque sorte.

Pour donner une idée plus précise ce qu’est une widget library (bibliothèque), c’est un ensemble d’objets (image, texte, menu déroulant, boutons…etc.) stockés dans un format fichier lu uniquement par Axure nommé RPLIB.

De même que l’on peut préciser 2 des avantages réels de l’usage du widget library (bibliothèque) d’Axure, cette fois-ci en extrapolant :

  1. Un avantage évident : maquetter rapidement des « wireframes » en utilisant des widgets d’objets prêts à l’emploi pour le design de vos écrans, sans partir de zéro, c’est gagner du temps sur un projet et donc gagner de l’argent. Vélocité que diable !
  2. Un avantage plus subtile, qui n’échappera pas aux graphistes forçats du pixel, aux ergonomes en culotte courte et aux « gens » du marketing comme on dit : c’est d’assurer une cohérence graphique, UX et visuelle pour l’ensemble des wireframes livrables au sein d’un projet ou carrément d’une entité (marque, entreprise, département). Un peu d’esthétisme, de cohérence graphique et ergonomique dans ce monde de brutes ne fera de mal à personne !
Axure RP 6 Prototyping Essentials

Axure RP 6 Prototyping Essentials

Un excellent livre d'introduction aux méthodes de wireframing, si indispensable à notre sens pour piloter un projet de manière agile.

Genre(s) : , , , , , , , , , , , ,
Auteur(s) :
Edition(s) :

Créer sa bibliothèque Axure

On est parti d’un cas concret, l’obligation de concevoir une bibliothèque pour faire rapidement des interfaces « brandés » Google TV.

On a mis au banc d’essai 3 logiciels de wireframing : Axure, OmniGraffle, Balsamiq pour réaliser cette bibliothèque de ressources.

Créer un fichier (.rplib)

On va créer une bibliothèque des éléments que nous allons constamment utiliser, c’est donc un fichier (.rplib). Notre fichier se nomme Google-TV-buttons-v3.rplib

Créer le fichier Google-TV-buttons-v3.rplib
UX, Wireframe, Widget Library, OmniGraffle - Créer une bibliothèque Widget Library Axure pour faire des maquettes des écrans Google TV

Documenter son fichier (.rplib)

Lorsque on crée un fichier qui est censé être partagé et utilisé par d’autres que vous-même, la moindre des choses est de documenter un peu afin de donner des informations complémentaires sur ce fichier éventuel.

Mettre une icône à notre bibliothèque
UX, Wireframe, Widget Library, OmniGraffle - Créer une bibliothèque Widget Library Axure pour faire des maquettes des écrans Google TV

UX, Wireframe, Widget Library, OmniGraffle - Créer une bibliothèque Widget Library Axure pour faire des maquettes des écrans Google TV

Axure a plutôt bien prévu le coup en vous donnant la possibilité de donner un complément d’informations dans les Widget Properties et les Widget Notes

Il vous est possible d’éditer, rafraîchir, désinstaller ces bibliothèques (library)

Charger notre bibliothèque Google-TV-buttons-v3.rplib (library)
UX, Wireframe, Widget Library, OmniGraffle - Créer une bibliothèque Widget Library Axure pour faire des maquettes des écrans Google TV

Une fois, chargé la bibliothèque (library) des boutons Google TV, par un glisser-déposer, vous pouvez en disposé à votre guise pour réaliser les wireframes de vos écrans de TV connecté sous Google TV.
UX, Wireframe, Widget Library, OmniGraffle - Créer une bibliothèque Widget Library Axure pour faire des maquettes des écrans Google TV

UX, Wireframe, Widget Library, OmniGraffle - Créer une bibliothèque Widget Library Axure pour faire des maquettes des écrans Google TV

UX, Wireframe, Widget Library, OmniGraffle - Créer une bibliothèque Widget Library Axure pour faire des maquettes des écrans Google TV

Le fichier est placé dans /Users/votre-nom-d-utilisateur/Documents/Axure/Libraries

Une vue d’ensemble de ce que vous pouvez télécharger

La même librairie mais vu sous Balsamiq, cette fois-ci !
UX, Wireframe, Widget Library, OmniGraffle - Créer une bibliothèque Widget Library Axure pour faire des maquettes des écrans Google TV

Conclusion : Libre à vous pour chaque projet de créer vos propres bibliothèques (libraries) pour donner une vraie orientation « Lean UX » à votre travail.

La version de cette librairie est à télécharger au format .zip ici. Pour fonctionner, elle nécessite d’utiliser Axure RP Pro V6.5 ou +. Télécharger axure_Google-TV-screens_and_buttons-v3.zip

En savoir plus