Wireframes, prototypes interactifs, prototypage, UX – Introduction à Axure RP 6

Un constat s’impose à l’évidence dans le monde du web et au-de-là, il est désormais beaucoup plus souhaitable en lieu et place d’un cahier des charges de concevoir des wireframes, voir des prototypes interactifs où les spécifications UX (User experience) sont les éléments essentiels de compréhension par rapport à toutes autres considérations. Concevoir des écrans, axé autour de l’expérience utilisateur, c’est la certitude d’obtenir une compréhension commune dans un projet web, mobile, logiciel pour toutes les personnes, parties prenantes du projet, qu’elles aient une culture marketing, technique ou commercial.

UX design, le langage universel

Cette petite introduction souligne la pondération de plus en plus importante de l’expérience utilisateur, UX (User experience) dans la gestion d’un projet. C’est l’apparition d’une langue commune qui fluidifie la gestion de projet au sein d’un projet web ou informatique, de toute nature. Utiliser des documents visuels et interactifs, c’est vaincre plus facilement mais pas assurément les incompréhensions traditionnels entre les directions technique, informatique, marketing et commerciale.

On va présenter donc présenter rapidement, Axure, dans cet article, un des logiciels les plus aboutis du marché pour concevoir ce type de document totalement orienté expérience utilisateur.

Des outils comme Axure, il en existe d’autres (Balsamiq, Pencil Project), néanmoins Axure est sans doute le plus abouti. Il permet la production rapide et itérative des principaux écrans pour tout type de projets UX que ce soit un site web, une application iPhone, une application iPad, un logiciel, un SaaS bref pour des projets de toute taille et de complexité, pour toute type plate-forme et/ou de périphériques.

La démonstration est faite avec Axure RP 6.5, le fichier (HecubeSocialAxureIphone.rp au format zip) peut être téléchargé en cliquant ici

Un projet d’une application iPhone

Pour ceux d’entre vous, qui ont utilisé OmniGraffle par exemple, faire une démonstration concluante d’une application iPhone se révèle vite chronophage et complexe à conceptualiser, avec Axure, c’est beaucoup plus rapide. C’est ce que l’on va tenter de faire avec cette exemple concret et assez simple, il faut en convenir… mais on mesure assez bien le potentiel du logiciel pour le conception de scénario utilisateur.

La librairie graphique ou la bibliothèque iconographique adapté à un environnement iPhone, iPad, Android
Vous disposez déjà d’une librairie graphique qui vous permet d’avoir les principaux éléments d’interface de l’iPhone. On peut télécharger cette bibliothèque iconographique iPhone UI Elements facilement sur le site de Axure, http://www.axure.com/download-widget-libraries. Il en serait de même si on souhaitait faire une application Androïd ou iPad, des bibliothèque iconographique existent aussi.

On s’est inspiré pour notre prototype Axure, de cette video Scrolling Content Tutorial disponible sur http://www.axure.com/videos.

Notre objectif est de mixer une carte google, de la rendre cliquable, pour aller sur un autre écran comportant un texte “scrollable”, de revenir à la carte au besoin. Tout cela bien sûr avec des effets de “swiping” dans les transitions entre les deux écrans.

Note : On suppose que vous avez préalablement chargé la bibliothèque iconographique iPhone UI Elements Voir la video “Custom Widget Libraries” dans cette http://www.axure.com/custom-widget-libraries pour savoir comment charger une bibliothèque qu’elle soit personnelle ou pas.

On a crée une seule page sur laquelle, on a posé notre iPhone et la carte Google au milieu. Pour information, on conventionne un peu notre nomenclature d’écran et de page, en faisant du “CamelCase”, c’est une bonne pratique car on se retrouve plus facilement. Ainsi notre page se nomme iPhoneNavigation, notre “Dynamic Panel” se nomme InterfacePanel et les deux états (states) de cet élément InterfacePanel se nomment ShowMap, ShowText

On peut tout suite voir le résultat en publiant le projet. Le résultat s’affiche dans le navigateur configuré par défaut dans Generate > Prototype > General