Prototypage d’une interface utilisateur

Cette rubrique explique comment le prototypage d’une interface utilisateur peut aider à réduire les défauts de conception et à garantir une expérience utilisateur réussie.

Introduction

Parfois, au fur et à mesure qu’un projet avance, de petites hypothèses et des décisions bien intentionées mais médiocres s’accumulent, transformant des heures de travail en une expérience utilisateur désoempante. Les équipes intelligentes éliminent leurs erreurs avant d’être livrées à l’aide d’une technique appelée prototypage d’interface utilisateur. Combinés à des études de facilité d’utilisation, les prototypes permettent aux équipes de se diriger dans la bonne direction.

Pourquoi prototyper ?

Le prototypage est un moyen d’explorer des idées avant d’y investir. Tous les artisans et ingénieurs expérimentés créent des prototypes de leur travail avant de construire quoi que ce soit : les architectes créent des modèles en papier ou en carton, ou avec des outils de réalité virtuelle. Les ingénieurs aéronautiques utilisent des souffleries. Les générateurs de ponts créent des modèles de contrainte. Les concepteurs de logiciels et web créent des maquettes de la façon dont les utilisateurs interagissent avec leurs conceptions.

La meilleure raison de prototyper est de gagner du temps et des ressources. La valeur d’un prototype est qu’il s’agit d’une façade , comme un ensemble hollywoodien, où seul l’avant du bâtiment est construit. Par rapport au produit réel, les prototypes sont faciles et peu coûteux à créer. Ainsi, pour un investissement minimal, des problèmes de convivialité et de conception peuvent être trouvés et l’interface utilisateur ajustée avant d’investir substantiellement dans la conception finale et les technologies.

Lors de l’examen des besoins d’un projet particulier, des raisons de créer un prototype autre que d’économiser de l’argent peuvent être trouvées. L’objectif est-il d’explorer un nouveau modèle d’interface ? Apporter des modifications à une partie de la conception existante ? Investiguer une nouvelle technologie ? Avant de commencer, il est important d’être clair sur la raison pour laquelle vous créez ce que vous construisez. Commencer par des objectifs clairs permet de faire un effort direct et efficace. Les raisons de la création de prototypes se répartissent en trois catégories de base :

• Preuve de concept.

  Parmi certaines équipes, il y a des désaccords sur l’orientation future d’un projet. Un prototype peut être utilisé pour prouver qu’une idée ou une nouvelle approche a le mérite ou la valeur. Un prototype peut aider à montrer qu’une idée fonctionne, à exprimer ses qualités de manière visuelle et interactive, et/ou à motiver les membres de l’équipe à réfléchir au problème d’un autre point de vue.

• Exploration de la conception.

  Si vous concevez des logiciels interactifs, la seule façon d’explorer comment quelque chose sera utilisé est de créer une maquette et d’interagir avec celui-ci. Parfois, la maquette est liée à une étude de convivialité, où des parties du prototype peuvent être évaluées de manière structurée. Parfois, il s’agit simplement d’un moyen d’exprimer clairement à un développeur comment quelque chose doit fonctionner ou ressembler. Dans de nombreux cas, un concepteur peut simplement expérimenter, afin d’avoir une idée de l’approche qui peut fonctionner. Tous les membres de l’équipe peuvent utiliser des prototypes pour explorer les problèmes de conception, bien que les concepteurs soient généralement les plus qualifiés. Les explorations de conception doivent être destinées à essayer de résoudre des problèmes spécifiques qui sont reconnus dans le produit.

• Exploration technique.

  Les développeurs qui examinent les approches d’implémentation d’un problème essaient souvent différentes techniques de codage pour voir si elles fonctionnent bien. L’utilisation de COM+, de HTML dynamique (DHTML), de Microsoft Win32 ou d’approches de codage spécifiques au sein de chaque technologie a des inconvénients différents. Parfois, un prototype représente une exploration de la technologie qui fonctionnera correctement pour prendre en charge une certaine fonctionnalité d’interface utilisateur.

Parfois, des prototypes sont créés pour une combinaison de ces raisons. Si une équipe planifie suffisamment bien, elle peut lui donner du temps pour qu’un développeur et un concepteur ou un chef de projet travaillent ensemble sur un prototype. Dans ce cas, il est extrêmement important de définir clairement les objectifs et les contributions chaque membre de l’équipe est censé faire. Tout le monde doit être clair sur les objectifs, les enjeux et le résultat potentiel.

Qui est impliqué ?

Le prototypage peut être effectué de manière informelle par n’importe qui, quel que soit son parcours ou son rôle dans le projet. Il est facile de créer un prototype simple mais efficace en prenant une bitmap d’Adobe Photoshop, en la plaçant dans l’outil de création et de gestion de site Web Microsoft FrontPage et en ajoutant des boutons ou des liens actifs. Ces prototypes légers ne vont que si loin, et peuvent devenir difficiles à gérer pour les interactions complexes.

Pour des prototypes plus formels par des équipes plus grandes, un développeur ou un chef de projet collaborera souvent avec un concepteur et un ingénieur de convivialité. Ensemble, ils vont générer des idées, créer un prototype qui représente les meilleures idées, puis aller dans le labo pour voir à quel point il est efficace dans la résolution des problèmes des utilisateurs. Les développeurs peuvent s’impliquer s’ils peuvent perdre du temps, ou si leur expertise technique est nécessaire. Souvent, le concepteur ou le chef de projet effectue la plupart des scripts ou du codage pour générer le prototype.

Quand un prototype doit-il être construit ?

Selon l’étendue du prototype et le niveau de détail requis, les prototypes peuvent être créés à tout moment pendant le projet. Le plus souvent, ils sont créés au début du projet, pendant la phase de planification et de spécification, avant que les développeurs écrivent du code de production. C’est là que le besoin d’exploration est le plus important et que l’investissement en temps nécessaire est le plus viable. Si les développeurs plutôt que les responsables de programme ou les concepteurs font du prototypage, le temps de planification devient encore plus important en raison de la nécessité de s’assurer que le travail investi dans le prototype est pris en compte dans le calendrier de développement. La planification de toute version de l’interface utilisateur doit inclure un certain niveau de prototypage.

En fin de projet, des prototypes plus petits peuvent aider à résoudre des problèmes techniques et de conception difficiles. Une maquette HTML rapide du comportement d’une boîte de dialogue ou d’une page Web peut aider à répondre à la question d’un développeur ou à donner à d’autres collègues une idée de l’expérience souhaitée. Dans certains cas, un gestionnaire de programme ou un concepteur fort peut implémenter le comportement dans le logiciel de développement Microsoft JScript et se rapprocher de la plupart de la logique de programmation que les développeurs devront réfléchir.

Le temps nécessaire à la création d’un prototype peut varier considérablement en fonction de l’étendue et de la précision du résultat final. Un prototype informel peut signifier quelques heures de travail par une seule personne; Un effort plus organisé peut impliquer des semaines d’efforts de la totalité d’une équipe.

Où le focus doit-il se trouver ?

Dans un prototype, ne créez que la plus grande partie de la conception nécessaire. Il est possible d’avoir des boutons qui ne fonctionnent pas, ou du texte qui ne se met jamais à jour. Tant que les interactions requises peuvent être vécues, il est bien d’utiliser de la fumée et des miroirs pour le reste. Voici quelques raisons pour lesquelles les efforts doivent être soigneusement ciblés :

• Coût de la construction du prototype.

  Le coût de construction du prototype devrait être réduit au minimum. Le défi du prototypage est de reconnaître l’investissement minimal nécessaire pour répondre efficacement aux questions sur la conception. C’est là que les études de convivialité sont essentielles, car elles identifient clairement les parties de l’interface utilisateur qui nécessitent le plus de travail. Même sans études de facilité d’utilisation, définissez clairement les problèmes des utilisateurs qui sont résolus ou les tâches qui sont améliorées, avec la conception dans le prototype.

• Durée de vie limitée.

• Les prototypes doivent avoir des durées de vie clairement définies. L’objectif final est-il une présentation lors d’une réunion d’équipe ? Une réunion d’examen exécutif? Une révision des spécifications ? Une étude de convivialité ? Identification du fait que la conception résout un problème utilisateur ? Une fois les besoins de ces objectifs spécifiques satisfaits, le prototype doit être mis de côté. L’état d’esprit de base est que le code ou les bitmaps générés dans un prototype seront laissés pour compte. Il peut y avoir des exceptions dans lesquelles du code ou des visuels sont présents dans le produit, mais on s’attend à ce que ce ne soit pas le cas.

• Risque de surcharger l’équipe.

  Montrer des prototypes aux développeurs et aux collègues peut être difficile. Un prototype trop complexe ou élaboré, doté de visuels et d’animations étonnants, peut submerger les gens. Toujours avoir une idée du chemin à parcourir et de la quantité de prototypes à prendre au sérieux.

Qu’est-ce que l’étendue ?

À mesure que l’effort de prototypage est déterminé, tenez compte des points suivants :

• Besoins des clients.

  En commençant par une compréhension des principaux problèmes ou besoins des utilisateurs (peut-être quelque chose qu’un ingénieur en convivialité a fourni) fournit une idée des parties de la conception de l’interface utilisateur qui méritent le plus d’exploration.

• Tâches d’étude de convivialité.

  Si vous créez le prototype pour une étude de convivialité, discutez avec l’ingénieur de la facilité d’utilisation des tâches spécifiques qui feront partie de l’étude et concevez ces éléments.

• Entrée de l’équipe.

  Discutez avec les développeurs clés de l’équipe à mesure que les idées du prototype se rassemblent. Obtenez une idée de base de ce qui est raisonnable, de ce qui est possible et de ce qui n’est pas pris en compte pour la prochaine version. Dans certains cas, envisagez d’aller au-delà de ce qu’ils disent être possible pour un aspect de la conception s’il s’agit d’un point clé et que l’équipe doit être mise au défi. Toutefois, ne le faites pas avec tous les aspects de votre prototype, car il existe une ligne fine entre repousser les limites et submerger votre équipe. Si le désir est d’inspirer l’équipe en lui montrant une vision pour plusieurs versions, alors allez-y. Toutefois, si l’exigence est de définir des modifications spécifiques pour la version suivante, concentrez-vous sur ces modifications. Veillez à appeler les modifications spécifiques de manière modulaire et à montrer aux développeurs un chemin pour créer les conceptions.

• Largeur et profondeur.

  Pour les prototypes plus volumineux, il y a une considération supplémentaire de largeur par rapport à la profondeur. Chaque fonctionnalité de la conception doit-elle fonctionner un peu ou doit-elle être choisie pour le prototype avec presque toutes ses pièces et options ? Essayez de ne pas faire les deux car le résultat peut être un grand prototype difficile à modifier et difficile à jeter.

Prototypes flexibles

Une façon de se concentrer sur les ressources de prototypage consiste à se concentrer sur la conception intelligente. Des prototypes plus efficaces peuvent être créés en permettant à un seul morceau de code prototype d’exercer de nombreuses idées différentes. Au lieu d’avoir cinq prototypes différents, envisagez de créer un prototype qui a les options permettant de changer les différents attributs du prototype.

La barre d’outils doit-elle se trouver à gauche ou en haut ? Doit-on afficher 10 éléments sur la page d’accueil ou 20 ? Un bon prototype a une sorte de panneau d’options intégrées qui vous permet de modifier les paramètres de l’apparence ou du fonctionnement du prototype. Gardez ces panneaux d’options masqués dans le prototype. Essayez d’éviter qu’un participant à la facilité d’utilisation les trouve accidentellement pendant un test.

Le défi consiste à garder le prototype simple, mais toujours suffisamment utile pour qu’il puisse être montré à un coéquipier, différentes options peuvent être démontrées et des commentaires peuvent être obtenus.

Bêta et prototype

Les versions bêta ne sont pas qualifiées de prototypes, car elles sont des efforts d’ingénierie complets. Si une erreur critique est détectée dans une fonctionnalité d’une version bêta, il est peu probable qu’elle soit ignorée, même si elle peut être dans le meilleur intérêt du produit. Les développeurs, les testeurs et les concepteurs ont déjà investi beaucoup de temps, et la pression pour vivre avec de mauvaises décisions est très forte. Les bêtas aident certainement à trouver des bogues et des défauts, mais ils sont rarement utiles pour effectuer des études contrôlées sur la valeur de directions de conception spécifiques.

Outils et technologies

Il existe plusieurs outils et technologies différents qui peuvent être utilisés pour créer des prototypes, chacun d’entre eux ayant ses avantages et ses inconvénients. Considérez le type de travail de conception en cours de prototype et les objectifs de l’effort de prototypage avant de décider quel outil ou technologie est le bon.

• Microsoft Visual Basic ou C#.

  Il s’agit de la technologie la plus rapide pour créer des prototypes d’interface utilisateur de style Windows. L’objet de navigateur Web facilite l’intégration de HTMLUI à des composants de style Windows standard. S’il est vrai qu’un développeur expérimenté avec Microsoft Visual Studio peut être en mesure de générer plus rapidement l’interface utilisateur en C/C++, cela crée la tentation de réutiliser le code à partir du prototype d’interface utilisateur dans le code de production. Il faut de la discipline pour reconnaître que les objectifs d’un prototype d’interface utilisateur rapide et sale sont très différents de l’ingénierie de haute qualité. Assurez-vous qu’il est clair quel type de code est en cours d’écriture et que l’équipe ou le responsable comprend ce qui sera ignoré.

• Microsoft Expression Blend + SketchFlow.

  SketchFlow est un outil visuel permettant de concevoir, de prototyper et de créer des interfaces utilisateur sophistiquées pour les applications web et de bureau Windows Presentation Foundation (WPF) et Microsoft Silverlight. Les applications sont créées en dessinant des formes, en dessinant des contrôles tels que des boutons et des zones de liste, en faisant en sorte que les éléments d’une application répondent aux clics de la souris et à d’autres entrées utilisateur, et en stylisant tout ce qui semble unique.

• Adobe Director ou Adobe Flash.

  Director est un outil de prototypage d’interface utilisateur populaire parmi les concepteurs. Il est particulièrement utile pour les conceptions d’interface graphique multimédia ou non standard, ou pour les prototypes qui nécessitent une animation importante. Sa grande flexibilité rend la tâche fastidieuse pour l’interface utilisateur par rapport à Visual Basic. Toutefois, un utilisateur Director compétent peut générer l’interface utilisateur Windows ou Web sans difficulté.

• HTML.

  FrontPage et d’autres éditeurs HTML permettent de créer rapidement des prototypes simples. Pour exprimer une idée, il est souvent possible de créer des bitmaps qui illustrent une séquence d’interaction utilisateur et de les placer dans FrontPage. Ces images peuvent être utilisées pour simuler l’interaction avec la conception. JScript et DHTML amènent les choses à un autre niveau, ce qui permet une logique et une interaction très sophistiquées. Si vous utilisez du code HTML pour prototyper un site Web, l’avertissement qui vient d’être décrit pour C/C++ s’applique également ici. Ne tombez pas dans le piège de la confusion entre le code de prototype rapide et l’ingénierie de qualité de production.