{"id":2245,"date":"2012-10-17T12:02:01","date_gmt":"2012-10-17T11:02:01","guid":{"rendered":"http:\/\/flaven.fr\/?p=2245"},"modified":"2013-09-24T05:27:19","modified_gmt":"2013-09-24T03:27:19","slug":"wireframes-prototypes-interactifs-prototypage-ux-introduction-a-axure-rp-6","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2012\/10\/wireframes-prototypes-interactifs-prototypage-ux-introduction-a-axure-rp-6\/","title":{"rendered":"Wireframes, prototypes interactifs, prototypage, UX – Introduction \u00e0 Axure RP 6"},"content":{"rendered":"

<\/p>\n

\t\t<\/p>\n


\n<\/p>\n

Un constat s’impose \u00e0 l’\u00e9vidence dans le monde du web et au-de-l\u00e0, il est d\u00e9sormais beaucoup plus souhaitable en lieu et place d’un cahier des charges de concevoir des wireframes, voir des prototypes interactifs o\u00f9 les sp\u00e9cifications UX (User experience) sont les \u00e9l\u00e9ments essentiels de compr\u00e9hension par rapport \u00e0 toutes autres consid\u00e9rations. Concevoir des \u00e9crans, ax\u00e9 autour de l’exp\u00e9rience utilisateur, c’est la certitude d’obtenir une compr\u00e9hension commune dans un projet web, mobile, logiciel pour toutes les personnes, parties prenantes du projet, qu’elles aient une culture marketing, technique ou commercial.<\/p>\n

UX design, le langage universel<\/H4>
\nCette petite introduction souligne la pond\u00e9ration de plus en plus importante de l’exp\u00e9rience 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\u00e9ment les incompr\u00e9hensions traditionnels entre les directions technique, informatique, marketing et commerciale.<\/p>\n

On va pr\u00e9senter donc pr\u00e9senter rapidement, Axure, dans cet article, un des logiciels les plus aboutis du march\u00e9 pour concevoir ce type de document totalement orient\u00e9 exp\u00e9rience utilisateur.<\/p>\n

Des outils comme Axure, il en existe d’autres (Balsamiq, Pencil Project), n\u00e9anmoins Axure est sans doute le plus abouti. Il permet la production rapide et it\u00e9rative des principaux \u00e9crans 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\u00e9, pour toute type plate-forme et\/ou de p\u00e9riph\u00e9riques.<\/p>\n

La d\u00e9monstration est faite avec Axure RP 6.5, le fichier (HecubeSocialAxureIphone.rp au format zip) peut \u00eatre t\u00e9l\u00e9charg\u00e9 en cliquant ici<\/a><\/b><\/p>\n

Un projet d’une application iPhone<\/h4>\n

Pour ceux d’entre vous, qui ont utilis\u00e9 OmniGraffle par exemple, faire une d\u00e9monstration concluante d’une application iPhone se r\u00e9v\u00e8le vite chronophage et complexe \u00e0 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\u00e9nario utilisateur.<\/p>\n

La librairie graphique ou la biblioth\u00e8que iconographique adapt\u00e9 \u00e0 un environnement iPhone, iPad, Android<\/b>
\nVous disposez d\u00e9j\u00e0 d’une librairie graphique qui vous permet d’avoir les principaux \u00e9l\u00e9ments d’interface de l’iPhone. On peut t\u00e9l\u00e9charger cette biblioth\u00e8que iconographique iPhone UI Elements<\/code> facilement sur le site de Axure, http:\/\/www.axure.com\/download-widget-libraries<\/a>. Il en serait de m\u00eame si on souhaitait faire une application Andro\u00efd ou iPad, des biblioth\u00e8que iconographique existent aussi.<\/p>\n

On s’est inspir\u00e9 pour notre prototype Axure, de cette video Scrolling Content Tutorial<\/code> disponible sur http:\/\/www.axure.com\/videos<\/a>.<\/p>\n

Notre objectif est de mixer une carte google, de la rendre cliquable, pour aller sur un autre \u00e9cran comportant un texte “scrollable”, de revenir \u00e0 la carte au besoin. Tout cela bien s\u00fbr avec des effets de “swiping” dans les transitions entre les deux \u00e9crans.<\/b><\/p>\n

Note : On suppose que vous avez pr\u00e9alablement charg\u00e9 la biblioth\u00e8que iconographique iPhone UI Elements<\/code> Voir la video “Custom Widget Libraries” dans cette http:\/\/www.axure.com\/custom-widget-libraries<\/a> pour savoir comment charger une biblioth\u00e8que qu’elle soit personnelle ou pas.<\/i><\/p>\n

On a cr\u00e9e une seule page sur laquelle, on a pos\u00e9 notre iPhone et la carte Google au milieu. Pour information, on conventionne un peu notre nomenclature d’\u00e9cran et de page, en faisant du “CamelCase”, c’est une bonne pratique car on se retrouve plus facilement. Ainsi notre page se nomme iPhoneNavigation<\/code>, notre “Dynamic Panel” se nomme InterfacePanel<\/code> et les deux \u00e9tats (states) de cet \u00e9l\u00e9ment InterfacePanel<\/code> se nomment ShowMap, ShowText<\/code><\/b>
\n\"Wireframes,<\/p>\n

On peut tout suite voir le r\u00e9sultat en publiant le projet. Le r\u00e9sultat s’affiche dans le navigateur configur\u00e9 par d\u00e9faut dans Generate > Prototype > General<\/code><\/b>
\n\"Wireframes,<\/p>\n

Notre deuxi\u00e8me \u00e9cran avec le texte “scrollable” et un bouton de retour.<\/b>
\n\"Wireframes,<\/p>\n

La taille de l’\u00e9cran sur un \u00e9cran iphone est de 320×481 en pixels<\/b>
\n\"Wireframes,<\/p>\n

Les param\u00e8tres de publication de notre projet mobile sous Axure<\/b>
\n\"Wireframes,<\/p>\n

Le rendu de notre deuxi\u00e8me \u00e9cran, un texte “scrollable”<\/b>
\n\"Wireframes,<\/p>\n

Le param\u00e9trage du bouton “back” sur notre deuxi\u00e8me \u00e9cran avec le texte “scrollable”.<\/b>
\n\"Wireframes,<\/p>\n

En savoir plus<\/h2>\n