Blog ENI : Toute la veille numérique !
Dernière chance (fin le 29/02) : -25€ dès 75€ sur les livres en ligne, vidéos... code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Design UI-UX
  3. UX
Extrait - Design UI-UX Concevoir sites et apps pour et avec les utilisateurs (2e édition)
Extraits du livre
Design UI-UX Concevoir sites et apps pour et avec les utilisateurs (2e édition) Revenir à la page d'achat du livre

Les prototypes fonctionnels

Prototypage HTML

1. Pourquoi prototyper en HTML ?

Dans les chapitres précédents, nous avons vu l’importance d’inclure le prototypage dès les phases de préconception, puis lors de la conception des structures destinées à présenter les contenus et assurer les interactions.

À chacune de ces phases correspondent des prototypes spécifiquement adaptés : personae, puis scénarios et story-boards, et enfin wireframes.

Nous allons maintenant nous intéresser en profondeur aux outils de prototypage qui vont intervenir lors des phases ultérieures d’un projet digital.

Il s’agit essentiellement désormais de tester des parcours ou des séquences dans des conditions les plus proches possible de la réalité.

À ce stade, le produit minimum viable a été défini, l’identité visuelle est déjà affirmée, les contenus qui ont été validés sont en partie intégrés et les fonctionnalités sont opérationnelles.

Il est toujours impératif pour le responsable UX de ne pas relâcher ses efforts et de s’assurer que lors des phases de réalisation graphique et de développement, aucune dérive ne sera susceptible de perturber l’expérience utilisateur.

D’autre part, dans un processus itératif d’amélioration continue, les interfaces pensées initialement pour le projet se sont enrichies de nouvelles fonctions, des parcours ont probablement évolué, et dans certains cas, la cible initiale a été recadrée.

La composante technique est également présente, car on doit s’assurer, avant le développement, que les solutions retenues, notamment en matière de design responsif (adaptables à tous les écrans), produisent la meilleure expérience utilisateur possible.

Enfin, il peut être nécessaire de retravailler l’existant, que ce soit pour envisager une évolution potentielle, l’ajout de nouvelles fonctionnalités, ou une refonte radicale.

Pour toutes ces raisons, nous allons avoir besoin de créer des prototypes d’un niveau de fidélité élevé qui pourront être consultés directement...

Les outils collaboratifs de prototypage fonctionnel

Nous avons constaté que le prototypage fonctionnel en HTML impose de sérieuses connaissances en développement, ce qui les destine à des projets d’envergure.

Lorsqu’on conduit des projets plus simples, et qu’il faut prototyper des dispositifs pour tester des parcours ou interactions sur poste, il est nécessaire d’être très réactif et donc de disposer d’outils à la fois rapides et précis.

Des expériences en ligne ont rapidement vu le jour comme Pixate (http://www.pixate.com/) qui, hélas, a cessé d’être supporté en octobre 2016, son équipe ayant rejoint le pôle prototypage de Google.

Les éditeurs majeurs de logiciels ont rapidement compris qu’il y avait un besoin à satisfaire et proposent désormais des applications professionnelles. Nous avons choisi de vous présenter deux solutions à la fois fiables et accessibles à tous.

1. Adobe XD

Adobe XD CC (Adobe Experience Design) est intégré dans la suite Creative Cloud, le système d’abonnement d’Adobe qui donne accès à toutes les applications de cet éditeur.

À l’heure de rédiger ce livre, Adobe a manifesté son intention de racheter Figma, concurrent en ligne, et ne propose plus XD aux nouveaux entrants. Il reste néanmoins accessible aux détenteurs d’un compte Créative Cloud qui l’avaient installé.

De plus, trois enquêtes des autorités américaines, anglaises et européennes sont en cours pour déterminer si cette acquisition ne contrevient pas aux lois antitrust. L’avenir de XD est donc en suspens.

Il est accessible via l’application dédiée du Creative Cloud sur Mac ou Windows.

images/05_UX_017.png

Avec Adobe XD vous pourrez facilement créer en quelques minutes des prototypes couvrant tous les stades de la conception, depuis les wireframes (maquettes filaires) basse fidélité jusqu’à des prototypes interactifs sophistiqués pour tous les écrans.

Les prototypes pourront être partagés en ligne et testés directement sur des périphériques connectés.

a. Lancer Adobe XD

Lors du lancement d’Adobe XD, un écran d’accueil...