Un guide complet de la conception de l'expérience utilisateur

Publié: 2022-03-10
Résumé rapide ↬ Les concepteurs ont tendance à se perdre dans les détails jusqu'à ce qu'ils aient tout tracé. Ceci n'est pas recommandé, car le processus de conception est itératif. Ce guide vous aidera à rester sur la bonne voie.

( Ceci est un article sponsorisé .) Après avoir entrepris une recherche initiale sur les utilisateurs et analysé les résultats de votre recherche, la phase suivante du processus de conception consiste à appliquer ce que vous avez appris en développant une série de conceptions pour tester vos hypothèses. Dans le quatrième article de ma série pour Adobe XD, je me concentrerai sur la phase initiale du processus de conception.

Dans cette série globale de dix articles, c'est le premier des trois qui relient le processus de conception. Cet article traite de la conception UX à un niveau supérieur, du point de vue des oiseaux. Mon prochain article explorera la conception de l'interface utilisateur, explorera les inventaires d'interfaces, créera des bibliothèques de modèles et concevra des interactions et des animations. Le troisième article de cette série dans une série explorera le wireframing et le prototypage.

Comme je l'ai exploré dans mon article précédent sur la recherche UX, il est important de souligner que nous nous appuyons sur la recherche utilisateur entreprise. Après avoir analysé les résultats de nos recherches, notre objectif à cette phase du processus de conception est de :

  • établir des parcours utilisateur clairs qui répondent aux besoins des différents utilisateurs en adoptant des histoires d'utilisateurs, des scénarios et des storyboards ;

  • appliquer quelques leçons du monde de l'interaction homme-machine (HCI) afin que nous concevions avec les premiers principes à l'esprit ; et

  • établir une « apparence » pour nos conceptions d'une manière qui est indépendante de l'appareil et qui peut être appliquée à la fois dans un contexte de bureau et mobile.

En bref, cet article se veut un pont entre la phase de recherche et la phase de conception . Comme je l'ai souligné dans mon dernier article, le processus de conception - recherche, conception, prototype, construction, test - est itératif ; à ce stade du processus, nous nous concentrons sur le développement d'une série de conceptions que nous pouvons prototyper, construire et tester.

La conception UX est un vaste sujet, alors considérez cet article comme une brève introduction, mais - comme dans mes articles précédents - je vous proposerai quelques lectures suggérées pour vous assurer que vous êtes bien couvert.

Mettre un squelette en place

Avant d'aborder les détails de la conception de l'interface utilisateur (UI) et de la construction de prototypes interactifs, il est important de mettre en place le flux de haut niveau de la conception, en établissant un squelette autour duquel nous pouvons construire notre conception.

À ce stade du processus, il est important d'utiliser les résultats de nos recherches pour éclairer le développement de témoignages d'utilisateurs, en identifiant les objectifs des différents utilisateurs. Nous pouvons utiliser ces user stories pour créer différents scénarios. Cela nous aide à identifier des objectifs clairs - et une intention sous-jacente - qui guident le processus de conception. Cela nous permet aussi de développer des flux à travers ce que nous construisons.

Lors du développement des flux initiaux - à l'aide de prototypes papier et de storyboards - nous nous concentrons sur le fait d'avoir une idée de la conception dans sa totalité, avant d'approfondir les détails. Il est important de mettre en place un squelette et de ne pas se perdre dans les détails, qui suivront la ligne.

Dans mon article précédent, je me suis concentré sur l'importance d'entreprendre des recherches sur les utilisateurs avant de vous lancer dans la phase de conception d'un projet. Comme je l'ai dit:

Passez du temps avec vos utilisateurs, apprenez à connaître leurs besoins et ce qu'ils essaient d'accomplir, ce sont leurs « tâches à accomplir ».

En taquinant les "tâches à faire" de nos utilisateurs, nous pouvons nous assurer que ce que nous concevons est vraiment centré sur l'utilisateur. Après avoir entrepris des recherches ciblées sur les utilisateurs, il est important de prendre vos conclusions et de les utiliser pour éclairer votre processus de conception. Votre recherche aurait dû vous aider à établir des modèles, des besoins que les utilisateurs que vous concevez ont en commun.

Cependant, une taille unique convient rarement à tous, et il est probable que tout ce que vous concevez aura plusieurs types d'utilisateurs avec des besoins différents. Développer des « histoires d'utilisateurs » - qui représentent les besoins des différents utilisateurs - peut vous aider à distiller les objectifs que vous essayez de résoudre, en aidant à façonner le reste du processus. Mais que sont exactement les user stories ?

Histoires d'utilisateurs

Les user stories sont un moyen utile d'établir une vue d'ensemble des "tâches à effectuer" des différents utilisateurs. Rédigés du point de vue d'utilisateurs typiques, ils vous aident à établir les différents objectifs de vos différents utilisateurs afin que vous puissiez concevoir en conséquence leurs différents besoins .

Le terme « User Story » a été créé par Alistair Cockburn, l'un des initiateurs du mouvement agile dans le développement de logiciels, qui a inventé l'expression « une user story est une promesse de conversation » lors d'un projet pour Chrysler en 1998.

Les histoires d'utilisateurs déplacent l'accent de l'écriture sur les exigences vers la discussion à leur sujet. Bien que subtil, ce passage - de l'écriture à la parole - peut avoir un impact significatif sur le processus de conception.

Trop souvent, les exigences sont fournies de manière abstraite, sous la forme d'une liste à cocher qui - si vous ne faites pas attention - ressemble peu à ce dont les utilisateurs ont besoin et ressemble davantage à ce dont une «conception par comité» a besoin. Les user stories aident à positionner les utilisateurs au cœur de la conversation.

Les user stories sont un excellent moyen de définir les besoins des différents utilisateurs en positionnant l'utilisateur au cœur du processus de conception. Les user stories vous aident à mapper les rôles sur les actions et les objectifs.
Les user stories sont un excellent moyen de définir les besoins des différents utilisateurs en positionnant l'utilisateur au cœur du processus de conception. Les user stories vous aident à mapper les rôles sur les actions et les objectifs.

Cette idée, d'un outil pour encourager et faciliter la conversation, capture la force des user stories. Ils constituent un outil idéal pour commencer à élaborer des scénarios , garantissant que les utilisateurs restent toujours au cœur du processus de conception et de développement.

De brèves descriptions des objectifs et des fonctionnalités présentées du point de vue de différents utilisateurs, les user stories vous aident à comprendre les objectifs sous-jacents de vos utilisateurs afin que vous puissiez voir le problème de leur point de vue. Ceux-ci suivent un modèle comme suit:

  • En tant que (personne dans un rôle particulier),
  • Je veux (réaliser une action ou découvrir quelque chose),
  • Pour que (je puisse atteindre mon objectif de).

En utilisant le modèle ci-dessus, nous pouvons nous mettre à la place de différents utilisateurs et développer différentes histoires pour façonner notre conception. Imaginez, par exemple, que nous construisons une ressource d'apprentissage basée sur le Web où les enseignants et les étudiants peuvent partager du matériel d'apprentissage. Nous sommes susceptibles d'avoir un certain nombre d'utilisateurs différents avec des besoins différents. La user story d'un conférencier peut être :

En tant que conférencier, je souhaite partager mes diapositives de cours afin de pouvoir fournir à mes étudiants un accès à des ressources au-delà de la salle de classe.

En développant une petite histoire autour des besoins spécifiques de cet utilisateur, on peut commencer à envisager des design patterns qui satisfont ce type d'utilisateur. Vu du point de vue d'un étudiant - un utilisateur différent avec des besoins différents - nous pourrions développer la user story suivante :

En tant qu'étudiant, je souhaite accéder aux diapositives du cours afin de pouvoir m'y référer lorsque je révise.

Ces histoires - relayées sous différents angles - nous fournissent des provocations utiles que nous pouvons utiliser au début du processus de conception pour commencer à cartographier notre conception à un niveau élevé. Surtout, les histoires sont axées sur la satisfaction des besoins de nos utilisateurs. En bref, les user stories nous aident à avoir une idée des objectifs des utilisateurs à un niveau élevé. Nous pouvons ensuite utiliser ces histoires pour développer différents scénarios que nous pouvons commencer à concevoir.

Utilisation de scénarios pour éclairer votre conception

Au début d'un projet, il est facile de se laisser emporter par l'ajout de fonctionnalités à profusion et de se perdre dans les « fonctionnalités ». Le danger de cette approche est qu'il est facile de commencer à ajouter des fonctions et des fonctionnalités qui nuisent aux objectifs principaux de vos utilisateurs.

En utilisant des user stories pour développer des scénarios types, vous restez concentré sur les objectifs principaux de vos utilisateurs. Cette approche vous permet également d'établir des attentes et de développer des repères pour les besoins typiques des utilisateurs, qui peuvent être utilisés pour définir des livrables et une portée clairs au début du projet .

En commençant par les user stories, nous pouvons commencer à créer différents scénarios qui répondent aux différents besoins des utilisateurs. La cartographie de ces histoires et des flux de construction nous permet d'établir comment les besoins des différents utilisateurs sont pris en compte.
En commençant par les user stories, nous pouvons commencer à créer différents scénarios qui répondent aux différents besoins des utilisateurs. La cartographie de ces histoires et des flux de construction nous permet d'établir comment les besoins des différents utilisateurs sont pris en compte.

En revenant à l'exemple précédent, nous pouvons établir des objectifs de haut niveau du point de vue de nos différents utilisateurs : pour le conférencier, nous allons devoir concevoir une fonctionnalité de téléchargement ; pour l'étudiant, nous allons devoir concevoir une fonction d'accès. Ce sont des objectifs de haut niveau, mais nous pouvons, au fur et à mesure que nous développons nos scénarios, commencer à ajouter de la granularité et de la complexité à nos user stories pour éclairer davantage la conception.

Par exemple, en revenant à l'exemple précédent, du point de vue des étudiants, nous pourrions envisager les scénarios suivants :

  • Au niveau de base, les étudiants veulent accéder aux diapositives.

  • À un niveau légèrement plus avancé, les étudiants voudront peut-être pouvoir annoter les diapositives, en capturant leurs notes.

  • Enfin, si les ressources le permettent, les étudiants peuvent vouloir partager leurs notes avec leurs pairs, permettant un apprentissage collaboratif.

Les scénarios, comme l'exemple exploré ci-dessus, nous permettent d' avoir une image claire des différents niveaux de complexité et de la conception de ceux-ci en conséquence . Ils nous permettent également d'avoir une idée du flux d'utilisateurs à travers notre conception, nous permettant de les cartographier sur papier afin que nous puissions commencer à construire une vue d'ensemble du projet.

Cartographier votre flux de conception

En utilisant vos récits d'utilisateurs et vos scénarios comme moteur de discussion, il est possible de commencer à tracer des voies à travers votre conception à un niveau élevé. Ce processus de cartographie des user story , illustré précédemment, nous aide à définir différents flux d'utilisateurs.

A ce stade du processus, le papier est un outil puissant pour un prototypage rapide , avant de passer à l'élaboration de storyboards plus raffinés. Approche peu coûteuse, peu fidèle et rapide, le prototypage papier présente de nombreux avantages :

  • Son faible coût vous permet d'explorer plusieurs idées avec très peu d'obstacles à l'entrée ;

  • C'est une basse fidélité, ce qui vous encourage à vous concentrer sur la vue d'ensemble et à ne pas vous perdre dans les détails ;

  • C'est rapide, ce qui vous permet de parcourir rapidement plusieurs variantes d'un flux.

Le papier permet également la collaboration, permettant à plusieurs participants de se réunir autour d'une table et de développer rapidement un design , en tenant compte des opinions et des idées de chacun.

Le papier est un outil puissant pour les premières phases de prototypage. Faible coût et faible fidélité, il vous aide à vous concentrer sur la « vue d'ensemble » et à mettre en place le squelette de votre conception.
Le papier est un outil puissant pour les premières phases de prototypage. Faible coût et faible fidélité, il vous aide à vous concentrer sur la « vue d'ensemble » et à mettre en place le squelette de votre conception.

Enfin, le papier « se sauve ». Lorsque nous concevons sur des écrans, nous perdons souvent des artefacts de conception en raison de la nature des « états » de sauvegarde du logiciel, à différents points du processus de conception. Le prototypage papier nous permet de voir l'intégralité du processus de conception, y compris les idées rejetées en route vers notre concept fini.

D'après mon expérience, un projet typique nécessitera souvent plusieurs séries de prototypes papier au fur et à mesure que vous progressez de manière itérative dans votre réflexion. À ce stade du processus, travailler sur écran est trop lent et trop raffiné, ce qui peut rapidement conduire à se perdre dans des détails inutiles. Le papier vous permet de vous concentrer sur la vue d'ensemble , ce qui compte à ce stade.

Bien sûr, même les concepteurs expérimentés peuvent reculer lorsqu'ils sont confrontés à l'idée d'esquisser des interfaces, trouvant le processus intimidant. Il n'est pas rare d'entendre : « Mais, je ne sais pas dessiner ! C'est manifestement faux, nous étions tous capables de dessiner très bien quand nous étions enfants (comme l'attestaient toutes ces images sur les réfrigérateurs de nos parents !), nous avons juste besoin de réapprendre cette précieuse compétence.

Pour paraphraser Jason Santa Maria :

Dessiner, ce n'est pas être un bon artiste, c'est être un bon penseur.

Une fois les croquis de haut niveau établis, il est temps de commencer à ajouter de la fidélité en créant des storyboards et des wireframes. Maintenez cette pensée. Cependant, j'y reviendrai dans mon sixième article sur le Wireframing et le Prototypage.

Un point de science : les lois UX

L'UX est peut-être une discipline relativement nouvelle, mais elle s'appuie sur des décennies de recherche dans le domaine de l'interaction homme-machine (HCI).

Comme je l'ai noté dans le premier article de cette série, sur l'évolution de la conception de l'expérience utilisateur, nous concevons avant tout pour les humains , et les humains partagent largement des caractéristiques similaires dont nous devons tenir compte lorsque nous prenons nos décisions de conception. HCI nous offre de nombreux principes que nous pouvons appliquer au domaine de la conception de l'expérience utilisateur.

Bon nombre de ces principes ont été distillés sous la forme de « lois » dont nous pouvons nous inspirer, par exemple :

  • la loi de Hick, qui insiste sur la nécessité de minimiser les choix pour alléger la charge cognitive et aider à guider la prise de décision ;

  • la loi de Fitt, qui fournit de précieux conseils sur la manière dont nous pouvons faciliter les interactions grâce à un dimensionnement et un positionnement soignés des éléments d'interface ; et

  • La loi de Miller, qui met l'accent sur les avantages du « regroupement » pour faciliter les tâches complexes .

Ce sont des principes qui peuvent être appliqués à la fois au niveau macro et au niveau micro et pour s'améliorer en tant que concepteur, ils méritent d'être explorés en profondeur. J'en explorerai trois - la loi de Hick, la loi de Fitt et la loi de Miller - mais il y en a beaucoup plus.

L'excellent site de Jon Yablonski, Laws of UX, est une collection utile de principes, qui vaut la peine d'être mise en signet. Non seulement c'est une belle pièce de design en soi, mais elle fournit également un bon aperçu de chaque principe accompagné de liens vers d'autres lectures.

Loi de Hick

La loi de Hick (ou, dans son intégralité, la loi de Hick-Hyman) stipule :

Le temps nécessaire pour prendre une décision augmente avec le nombre et la complexité des choix.

Nommée d'après William Edmund Hick et Ray Hyman, une paire de psychologues, la loi souligne l'importance de réduire le nombre de choix que vous présentez à un utilisateur .

Vous pourriez penser que vous aidez votre utilisateur en offrant une série infinie de choix, mais en réalité, vous ajoutez à sa charge cognitive. Plus un utilisateur est confronté à de nombreux choix, plus il est susceptible de s'en aller, paralysé par la « paralysie décisionnelle ». Cela peut être particulièrement problématique dans un contexte de commerce électronique, où le départ des utilisateurs a un impact direct sur le résultat net.

A Book Apart ne propose que des versions récentes
Plutôt que de répertorier chaque livre sur sa page d'accueil, A Book Apart ne présente que les versions récentes, réduisant le nombre de choix et atténuant la paralysie décisionnelle. Toute la bibliothèque est à portée de clic pour ceux qui recherchent un livre en particulier.

Nous pouvons appliquer la loi de Hick à la conception UX de différentes manières :

  • Lorsque vous créez une navigation au lieu de fournir une liste interminable de choix, concentrez-vous sur quelques-uns . Vos utilisateurs vous remercieront.

  • Dans un contexte de commerce électronique, au lieu de répertorier chaque produit, réduisez le nombre de choix et concentrez-vous. Faites cela, et vous compenserez la paralysie décisionnelle conduisant à un taux de conversion plus élevé .

  • Distinguez le contenu essentiel du contenu secondaire. En permettant aux utilisateurs de trouver un chemin à travers moins de choix, vous réduisez leur charge cognitive .

Nous sommes souvent coupables d'assimiler « plus » à « mieux », mais la loi de Hick nous dit de penser autrement. Plus le nombre d'options est élevé, plus il faut de temps à nos utilisateurs pour prendre une décision (et les conduit parfois à ne prendre aucune décision). La concentration est ce qui compte, notamment dans un monde de plus en plus submergé par le choix.

Loi de Fitt

La loi de Fitt stipule : Le temps qu'il faut pour acquérir une cible est fonction de la distance et de la taille de la cible. Cela signifie : plus une cible est éloignée - un bouton sur un écran, par exemple - plus elle doit être grande pour qu'un utilisateur puisse l'atteindre facilement.

La loi de Fitt est particulièrement importante lorsqu'il s'agit de concevoir des boutons et d'autres éléments cliquables à l'écran. Des contextes différents nécessitent des approches différentes et éclaireront votre approche de conception.

Intercom garantit que les boutons d'appel à l'action sont grands et accrocheurs
Sur sa page d'accueil, Intercom garantit que les boutons d'appel à l'action sont grands et accrocheurs afin qu'ils soient à la fois faciles à voir et à naviguer.

Dans un contexte de bureau, un utilisateur utilisera une souris et, sur un grand écran, parcourra des distances potentiellement importantes. Dans ce contexte, il est important de s'assurer que vos boutons d'appel à l'action (CTA) sont de taille raisonnable, faciles à voir et à cliquer dessus .

Dans un contexte mobile, il est essentiel de prendre en compte les cibles tactiles lors de la conception des interfaces. Lors de la conception pour les écrans tactiles, nos doigts sont moins fidèles que les pointeurs de souris, nous devons donc augmenter la taille de nos cibles tactiles . (Bien sûr, des cibles tactiles plus grandes dans les environnements de bureau peuvent également aider !)

Nous pouvons appliquer la loi de Fitt à la conception UX de différentes manières :

  • Lors de la conception pour mobile, tenez compte de vos cibles tactiles. Avec moins d'espace sur l'écran, réduisez le nombre d'éléments cliquables et augmentez leur taille .

  • Cela peut sembler évident, mais si vous avez un gros bouton à l'écran, assurez-vous qu'il s'agit du principal appel à l'action, sinon vous courez le risque que les utilisateurs cliquent dessus par inadvertance.

  • Lors de la conception de menus déroulants ou d'autres formes de navigation imbriquées, assurez-vous que vos tailles cibles sont suffisamment grandes pour que les utilisateurs puissent acquérir .

En règle générale, plus quelque chose est éloigné, plus il doit être grand pour qu'un utilisateur puisse le toucher. Lors de la planification de votre conception à un niveau élevé, tenez compte des appels à l'action importants et assurez-vous que vous avez pris en compte la loi de Fitt lors de la conception de ceux-ci. Les petits boutons peuvent sembler soignés et bien rangés, mais s'ils frustrent votre utilisateur, votre conception doit être retravaillée.

Loi de Miller

Selon la loi de Miller, une personne moyenne ne peut conserver que sept éléments (plus ou moins deux) dans sa mémoire de travail. En bref : il y a tant de choses que nous pouvons retenir dans nos têtes en peu de temps.

La loi de Miller est particulièrement importante lorsque nous considérons la façon dont nous organisons et regroupons les informations, et c'est là que la segmentation peut s'avérer utile. Considérez le formatage des deux numéros de téléphone suivants (tous deux identiques, numéro fictif) :

  • 07700984964

  • 07700 984 964

En tant que chaîne de chiffres sans espacement, un nombre à onze chiffres est difficile à conserver en mémoire de travail pour un utilisateur. Ajoutez toutefois un peu d'espacement et la tâche de vos utilisateurs est considérablement facilitée. En fragmentant les informations, votre utilisateur peut conserver les trois groupes de nombres dans la mémoire de travail, ce qui lui permet d'accomplir sa tâche.

aider les utilisateurs lors de la saisie de leur numéro de carte et de leurs détails
Lors de la saisie des détails de votre carte de crédit sur Gumroad, des espaces sont ajoutés, divisant les chiffres de votre carte de crédit en groupes de quatre. Cela aide les utilisateurs lorsqu'ils saisissent leur numéro de carte et s'ils ont saisi les bons détails de la carte.

La loi de Miller va plus loin que de faciliter les micro-interactions comme celle-ci ; il peut également être utilisé à une échelle plus macro. Par exemple, lors de la conception de formulaires, concentrez-vous sur le regroupement des informations en groupes organisés logiquement : nom, adresse et coordonnées ; les détails du compte, comme les noms d'utilisateur et les mots de passe ; coordonnées bancaires; et autres groupements.

Nous pouvons appliquer la loi de Miller à la conception UX de différentes manières :

  • Lorsque vous répertoriez les numéros de téléphone, segmentez les informations afin qu'elles puissent être conservées facilement dans la mémoire de travail .

  • Lors de la conception de formulaires de paiement contenant des informations de carte de crédit, un numéro de carte de crédit sera plus facile à analyser par les utilisateurs s'il est divisé en quatre parties sur quatre.

  • Réduisez la charge cognitive en limitant le nombre de choix proposés.

En tant que concepteurs, nous devons souvent présenter des informations complexes. La loi de Miller est utile à garder à l'esprit dans ce contexte. Dans la mesure du possible, recherchez des groupes d'informations qui peuvent être décomposées et fragmentées, ce qui leur permet d'être conservées plus facilement dans la mémoire de travail des utilisateurs.

Look And Feel : Communiquer le design visuel

Avec une vue d'ensemble du flux de votre projet établie, il est important de commencer à réfléchir à son apparence, ainsi qu'à sa conception visuelle. C'est ce que j'appelle la « grammaire visuelle » et c'est l'approche visuelle que vous adopterez dans votre conception.

Avec une prolifération sans cesse croissante d'appareils à concevoir - montres, téléphones (de petite à grande taille), tablettes, ordinateurs de bureau et autres supports - l'idée de développer un visuel parfait en un seul pixel est devenue obsolète.

En réponse à ce paysage changeant, nous avons assisté à une évolution vers des artefacts de conception qui s'éloignent de la perfection des pixels au profit de la capture de la « saveur » d'un design. Ces artefacts comprennent, par exemple :

  • Planches d'ambiance
  • Carreaux de style
  • Collages d'éléments

Le processus de chacun est différent, mais à ce stade du processus, j'utilise une combinaison de planches d'humeur et de collages d'éléments pour aider à établir la direction : les planches d'humeur vous aident à entrer dans le bon stade , les collages d'éléments agissent comme un pont entre votre conception visuelle et la conception de votre interface utilisateur.

Moodboard

Le moodboard, comme son nom l'indique, crée l'ambiance, vous aidant à vous concentrer sur un look particulier qui correspond à votre objectif global. Les tableaux d'ambiance sont utiles pour démarrer la conversation, agissant comme un point central autour duquel vous pouvez construire. En règle générale, je rassemble généralement entre trois et cinq planches d'humeur différentes, chacune indiquant des directions différentes.

Vous avez peut-être une apparence particulière à l'esprit, mais - comme nous le savons tous très bien, j'en suis sûr - votre option préférée pourrait ne pas correspondre au point de vue de votre client. Je trouve qu'il est utile d'avoir des alternatives et je trouve souvent que le résultat final rassemble différents éléments de différents tableaux d'humeur.

moodboards sur le site de Tiny Books
Lors du développement des planches d'ambiance pour Tiny Books, j'ai adopté des approches analogiques (gauche) et numériques (droite). Mes tableaux d'ambiance numériques ont aidé à orienter Vic Bell qui a gracieusement développé l'image de marque du site.

L'essentiel : à ce stade, vous présentez une conception visuelle de haut niveau, sans vous perdre en créant des conceptions parfaites au pixel près , qui sont futiles à une époque de tailles d'écran très différentes. Des maquettes détaillées suivront au stade du wireframing et du prototypage.

Cette étape du processus consiste à développer des artefacts de conception pouvant être utilisés pour susciter des conversations. Pour animer cette discussion créative, il est utile d'avoir une variété de planches d'humeur différentes , chacune avec une apparence et une sensation différentes.

Lors de la création de tableaux d'ambiance, il est important de considérer les approches analogiques ainsi que les approches numériques . Si votre inspiration visuelle est 100% numérique, vous courez le risque de ce que j'appelle tout se ressembler où un design ressemble exactement à un autre. Envisagez de regarder au-delà de l'écran pour trouver l'inspiration, en utilisant de vieux magazines non désirés pour vous inspirer, faites-le, et vos créations se démarqueront.

Collages d'éléments

Avec les commentaires recueillis sur vos tableaux d'humeur, il est temps de commencer à développer certains composants de conception, en appliquant votre direction visuelle à certains éléments d'interface utilisateur typiques afin que vous puissiez vous installer sur une "grammaire visuelle".

Il existe un certain nombre d'outils que vous pouvez utiliser pour ce faire, notamment les mosaïques de style et les collages d'éléments. Les deux ont leurs points forts, agissant principalement comme des catalyseurs pour tendre vers un aspect et une sensation finis.

Comme le dit Samantha Warren, qui a développé la méthodologie Style Tiles :

Les tuiles de style sont un catalyseur pour les discussions autour des préférences et des objectifs du client.

Cet accent - sur le fait d'avoir une discussion sur l'apparence - est la force de ces deux méthodes. Ils permettent de gagner un temps considérable, éliminant le besoin à ce stade de créer des rendus au pixel près à plusieurs tailles.

D'après mon expérience, Style Tiles peut être mal interprété par les clients qui pensent à tort qu'il s'agit de maquettes visuelles. Je préfère une approche plus libre, moins basée sur des modèles, et quand j'ai découvert l'approche Element Collage de Dan Mall, j'ai été accroché.

Element Collages par Dan Mall pour Reading Is Fundamental
Les collages d'éléments - comme celui-ci de Dan Mall pour Reading Is Fundamental - sont utiles pour capturer une variété d'éléments visuels différents et lancer une conversation autour d'une direction de conception potentielle.

Dans un excellent article détaillant son processus de conception sur un projet pour Reading Is Fundamental , Mall souligne la nécessité de remplacer les présentations par des conversations, en impliquant le client dans le processus. Les collages d'éléments sont un excellent moyen de conduire cette approche conversationnelle. Comme le dit Mall :

Lorsque je parle de design avec mes clients, j'aime avoir autant de matière visuelle que possible, afin de m'assurer que nous parlons de la même chose. Ma version de Style Tiles intègre mon amour du collage pour un type d'exécution différent que j'appelle un «Collage d'éléments». Cette phrase particulière crée une attente selon laquelle ce que nous examinons n'est pas une conception finale, mais plutôt un assemblage de pièces disparates sans logique ou ordre spécifique.

La beauté des Element Collages est qu'ils agissent comme un pont entre vos tableaux d'humeur et vos composants d'interface utilisateur (bientôt développés). Ils sont suffisamment flexibles pour montrer aux clients qu'ils doivent se faire une idée de ce que nous allons construire . Surtout, ils sont un outil utile pour vous aider à obtenir un consensus autour de votre grammaire visuelle avant de commencer à développer des prototypes plus chronophages.

En conclusion

Avant d'aborder les détails de la conception de l'interface utilisateur (UI) et de la construction de prototypes interactifs, il est important de mettre en place le flux de haut niveau de la conception, en établissant un squelette autour duquel nous pouvons construire notre conception.

En établissant un processus de haut niveau pour lancer la phase de conception de vos projets, vous pouvez travailler plus efficacement pour mettre en place un cadre clair. À ce stade du processus, il est important de ne pas se perdre dans les détails, mais plutôt de se concentrer sur la mise en place des coups de pinceau larges.

Il est important d'obtenir les coups de pinceau larges avant de plonger plus profondément dans la conception de l'interface utilisateur et le développement de wireframes et de prototypes. Concentrez-vous sur l'établissement d'une direction de conception claire et sur des objectifs utilisateur clairs avant d'entrer dans les détails. Résister à l'envie de se concentrer sur les détails sans établir d'objectifs de conception clairs permet d'économiser du travail inutile.

En bref, ne vous perdez pas dans les détails tant que vous n'avez pas tout tracé.

Lecture suggérée

Il existe de nombreuses publications intéressantes - hors ligne et en ligne - qui vous aideront dans votre aventure. J'en ai inclus quelques-uns ci-dessous pour vous aider à démarrer votre voyage.

  • "Comment écrire des histoires d'utilisateurs plus intelligentes", Joe Natoli
    Si vous connaissez déjà les histoires d'utilisateurs, je vous recommande de lire les améliorations suggérées par Natoli aux histoires d'utilisateurs - en mettant l'accent sur les avantages mesurables - sont une prise intéressante.

  • « Témoignages d'utilisateurs », Mountain Goat Software
    Ce guide fournit des conseils utiles pour diviser les user stories en une série de plus petites histoires connectées et ajouter des "conditions de satisfaction", qui méritent d'être prises en compte.

  • "Lois de l'expérience utilisateur", Jon Yablonski
    Un excellent site avec une collection utile de principes qui vaut la peine d'être mis en signet. Non seulement c'est une belle pièce de design en soi, mais elle fournit également un bon aperçu de chaque principe accompagné de liens vers d'autres lectures.

  • "Psychologie et UX", Groupe Nielsen Norman
    Avec une solide connaissance des différentes lois qui peuvent être appliquées dans le domaine de l'expérience utilisateur, je recommanderais également d'explorer la psychologie.

  • "Collages d'éléments", Dan Mall
    Cela vaut la peine d'être lu si vous souhaitez comprendre comment ces outils peuvent être utilisés au service de projets clients typiques.

Cet article fait partie de la série de conception UX sponsorisée par Adobe. Adobe XD est conçu pour un processus de conception UX rapide et fluide, car il vous permet de passer plus rapidement de l'idée au prototype. Concevez, prototypez et partagez, le tout dans une seule application. Vous pouvez découvrir d'autres projets inspirants créés avec Adobe XD sur Behance, et également vous inscrire à la newsletter de conception d'expérience Adobe pour rester à jour et informé des dernières tendances et informations sur la conception UX/UI.