Les prototypes fonctionnels

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...

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.

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.