Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

Les fondamentaux d'une super UX

by
Length:MediumLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX

French (Français) translation by Henri Lotin (you can also view the original English article)

Au profit des logiciels et applications partout dans le monde, l'UX est devenue une étape de plus en plus croissante en importance dans le cycle de vie de développement de logiciel. Bien que l'UX soit une couche légèrement subreptice du design, elle n'en est pas moins importante. Elle, par la nature de son nom, définit l'expérience des utilisateurs. Cette expérience détermine si oui ou non ils veulent revenir pour plus, ou fuir en hurlant dans la direction opposée.

L'UX est une chose que tout le monde peut faire. Le problème est que tout le monde ne peut pas le faire correctement. Je peux entreprendre le design visuel pour un site web, mais je vous garantis qu'il aura l'air affreux et non professionnel.

Si vous n'apprenez rien d'autre sur l'UX je vous demande de retenir ces deux choses.

  1. Connaissez l'utilisateur.
  2. Vous n'êtes pas l'utilisateur (dans la plupart des cas).

Si vous ne connaissez pas votre base d'utilisateurs, leurs habitudes et leurs tendances, et pourquoi ils exécutent ou pas certaines actions, alors vous ne pouvez pas vous attendre à concevoir une bonne expérience pour eux. Même si vous êtes très similaires à vos utilisateurs, souvenez-vous que vous n'êtes qu'une seule personne et que cela ne définit pas les qualités de votre base d'utilisateurs en entier. Connaissez vos utilisateurs et concevez l'expérience en les gardant à l'esprit. Le rôle d'un UXer est d'avoir cette connaissance, de l'étendre constamment, et ensuite de concevoir avec ces utilisateurs à l'esprit, sculptant d'incroyables expériences qui les réjouiront et les satisferont.

Passons en revue les étapes possibles par lesquelles un UXer doit passer pour définir l'UX d'un produit. Ces étapes créent le processus idéal. Ces étapes ne sont pas toujours possibles à exécuter dans la réalité, mais nous avons besoin de les couvrir toutes, afin que vous soyez avisé sur la possibilité de mettre de côté certaines étapes et pourquoi. Parfois vous n'avez pas toujours besoin de mettre de côté une étape, mais elle est intégrée dans une autre étape, ou remplacée en utilisant une combinaison d'expérience, de connaissance, et d'intuition.

Besoins

La collecte des besoins/exigences est l'une des premières étapes dans la conception de l'UX. A ce niveau vous devez poser un tas de questions. Beaucoup de questions pourraient ne pas être répondues correctement mais notez-les et soyez persévérant. Il y a plusieurs types de besoins :

  1. Exigences de l'activité : Les buts et les besoins des autres composantes de votre entreprise ou ce qui est nécessaire pour monétiser le produit. Malheureusement, cela l'emporte souvent sur certaines choses que vous pouvez vouloir faire. C'est un mal nécessaire si votre produit est toute chose allant au-delà d'un projet pour le pur plaisir.
  2. Exigences de design : Parfois il peut y avoir des considérations ou des besoins de design spéciaux qui doivent être satisfaits.
  3. Exigences de la technologie : Il pourrait y avoir un besoin de technologie spécifique (plate-forme, langage, etc.) dont vous devrez tenir compte dans le design. Quelles sont vos limitations ?
  4. Exigences de l'utilisateur : Pour qui est le produit ? Qui est l'audience principale ? Est-ce qu'il y a une audience périphérique et, si oui, qui est-ce ? Couvre-t-elle l'ensemble de votre base d'utilisateurs ou en supporte-t-elle un sous-ensemble ?
Requirements are your building blocks
Construction de bloc sur Photodune

Ces exigences seront la fondation qui donnera forme à votre design. Sans elles votre design sera sans but.

Analyse des utilisateurs

Avant que nous puissions concevoir pour un utilisateur nous avons besoin de connaître nos utilisateurs. Parfois vous aurez une grande quantité de connaissance pré-existante à leur sujet. Parfois vous n'aurez qu'une poignée de suppositions à leur sujet. Si vous n'avez pas la connaissance de vos utilisateurs alors votre design est une approximation au mieux. L'analyse utilisateur est nécessaire pour comprendre les besoins et les propensions des utilisateurs.

Know who your users are
Jeunes utilisateurs sur Photodune

Vous devrez poser les questions suivantes au minimum pour pouvoir comprendre votre base d'utilisateurs :

  1. Pour qui est-ce ? Données démographiques ? Ce qu'ils aiment/Ce qu'ils n'aiment pas ? Passes-temps ? Occupation ?
  2. Quelles exigences spéciales représentent-ils ? Présentent-ils un problème particulier que vous devez résoudre ? Correspondent-ils à un besoin précis de l'entreprise ?
  3. Quels modèles mentaux de la base d'utilisateurs devez-vous prendre en compte ? Varient-ils significativement dans les sous-domaines ?
  4. Quand, pourquoi, comment les utilisateurs se serviraient de ce produit ?
  5. Quelles préoccupations d'accessibilité devez-vous intégrer dans le design ?

Analyse des tâches

Après avoir terminé notre analyse des utilisateurs nous devons passer à l'analyse des tâches. Quelle est la principale action que veulent exécuter les utilisateurs ? Il peut y avoir plein de choses que quelqu'un peut faire sur votre site ou sur votre application, mais il y a toujours une tâche principale. Vous devez comprendre cette tâche et optimiser l'UX pour elle et pour la base d'utilisateurs précise à laquelle elle est destinée. Nous n'avons toujours pas atteint l'étape du design, mais nous savons maintenant ce que nous allons concevoir, et pour qui nous allons le faire.

What do your users wantneed to do Post-it notes are great way to brainstorm tasks
Pense-bêtes sur Photodune.

Nous devons également déterminer toutes les tâches secondaires. Il y a très peu de sites/applications où les utilisateurs ne peuvent faire qu'une seule chose; il y a souvent plusieurs tâches associées à exécuter. Déterminez-en l'envergure pour connaître l'ampleur de ce vers quoi se profile votre design.

Autres choses à comprendre dans l'analyse des tâches :

  • De quel type d'Aide/FAQ avez-vous besoin ?
  • Quels états d'erreur sont nécessaires ?
  • Quels sont les cas de limite que pourraient présenter vos utilisateurs ?
  • Y'a-t-il de multiples méthodes que pourraient essayer vos utilisateur pour exécuter une tâche singulière ?

Allocation de fonction

L'allocation de fonction c'est de comprendre ce qui est nécessaire pour gérer toutes les fonctions que vous souhaitez voir exécutées. Ceci se produit à plusieurs niveaux.

  • Avez-vous des systèmes et/ou serveurs multiples ? Lesquels géreront le mieux une fonction.
  • Ce qui doit se passer dans le back-end vs le front-end ?
  • Quelles pages sont les plus appropriées pour gérer une fonction particulière ? (Le tri de carte fonctionne super bien à ce niveau.)
  • Ce qui est automatisé (géré par l'ordinateur) vs ce qui est manuel (contrôlé/géré par l'utilisateur)?
Define what will carry out each function
Fourchette, cuillère et couteau sur Photodune

Les réponses à ces questions peuvent radicalement influencer l'efficience et l'usabilité de votre produit.

Esquisse

Faites des esquisses. Faites-en un tas. C'est rapide. C'est peu coûteux. C'est efficace.

Faire des esquisses ressort un tas d'idées de votre tête et les transfère rapidement sur le papier. Cela aide à donner forme aux bonnes idées et à éliminer les mauvaises. Vous pouvez très rapidement itérer sur des esquisses. L'investissement est faible comparé au retour.

Put pencil to paper
Maison esquissée sur Photodune

La créativité est également la clé dans cette étape. Faites des choses loufoques, hors des sentiers battus. Elles peuvent ne pas fonctionner mais elles pourraient aiguillonner une autre idée. Essayez de varier vos esquisses de manière significative pour voir jusqu'où vous pouvez étirer une idée.

Stylo/crayon + papier = une banque dans laquelle puiser lorsque vous commencez à vraiment définir vos designs.

Wireframes intermédiaires

Maintenant vous devriez avoir au moins une idée de l'endroit où vous souhaitez amener votre design. Le premier ensemble de wireframes devrait être une itération de vos esquisses et commencer à faire ressortir plus de définition. L'architecture d'information devrait commencer à s'installer. C'est là que les choses vont de plusieurs morceaux de concepts et d'informations épars et lâchement connectés vers une documentation plus cohérente sur la manière dont le produit se voit et fonctionne.

Prototypes

Il y a un tas de prototypes différents que vous pouvez réaliser. Ils peuvent aller du simple PDF cliquable à un site HTML/CSS presque pleinement fonctionnel. Cela dépend entièrement de ce que vous voulez pour votre projet pour savoir jusqu'où vous voulez aller au niveau du prototype. Il y a un tas d'outils disponibles à partir desquels vous pouvez très rapidement mettre en place vos prototypes. Un petit échantillon inclut :

Trouvez l'outil qui correspond à votre flux de production et à votre background pour savoir sur quoi vous pouvez prototyper rapidement et efficacement. Les prototypes ne devraient pas prendre beaucoup de temps, mais ils devraient communiquer efficacement votre design et ses interactions.

Les prototypes aident à comprendre toute étrangeté en rapport avec l'interaction et à ressentir comment se comporte le produit quand il est en action. Ils peuvent aider à découvrir certaines choses que les wireframes statiques ne sont peut-être pas en mesure de découvrir pleinement.

Wireframes haute-fidélité

C'est ici que vous retournez en arrière et commencez à faire des wireframes haute-fidélité. Ajoutez toute la définition dont vous avez besoin. Couvrez autant de détails que vous le pouvez sur la mise en pages et l'interaction. Tout ce que vous laissez à l'interprétation peut facilement être exécuté à l'opposé de ce que vous vouliez. Ne présumez de rien.

Une meilleure qualité visuelle pourrait être ou ne pas être nécessaire. La plupart du temps on ne devrait réellement s'en préoccuper qu'à la phase de design visuel. J'ai trouvé qu'il était souvent mieux de se replier sur des visuels de type wireframe dans le but d'éviter la confusion avec les couleurs finales et les spécifications du design visuel. Toutefois, j'utilise de la couleur si elle est en rapport avec une fonctionnalité (e.g. rouge pour les messages d'erreur).

Test d'utilisabilité

Cette étape peut avoir lieu quel que soit le moment où vous le souhaitez au cours du processus de design. Cela convient parfois à la fin et parfois un peu plus vers le début d'un projet. Cependant, c'est là que vous avez le feed-back actuel de l'utilisateur. Ils peuvent soutenir vos suspicions. Ils peuvent mettre vos pensées sens dessus dessous. C'est néanmoins crucial de connaître leurs pensées et où le bât blesse.

Let users tell you what
Senior se servant d'un ordinateur sur Photodune

Vous concevez pour l'utilisateur. Ce feed-back devrait conduire votre design ou refonte dans le but de résoudre les problèmes qui se soulèvent au cours de ce test. Ne pas tenir compte de, ou ignorer ce feed-back, sans réelles aberrations, est peu avisé et est un péché capital en UX.

Design visuel

J'ai vu un certain nombre de process UX considérer ceci comme le point pendant lequel ils devraient balancer leur documentation par-dessus la clôture, croiser leurs doigts, et espérer pour le meilleur. Cela ne devrait pas être le cas ! Je travaille beaucoup en collaboration même après en avoir fini avec l'UX adéquate.

Vos designers graphiques doivent aussi tenir compte de l'UX. Si ce n'est pas le cas, je prétendrais qu'ils ne sont pas en train de faire pleinement leur travail. Rendre votre wireframe agréable à regarder est super mais s'ils ont des idées qui peuvent encore améliorer l'UX, vaudrait mieux écouter et incorporer. Souvent les designers pensent assez différemment pour aiguillonner de grandes idées et des améliorations.

Développement

De manière similaire, vous devriez travailler avec des développeurs. Ceci pourrait ne pas être comparable au travail en collaboration mais il y a souvent des problèmes qui surgissent au cours de cette étape durant laquelle vous devrez ajuster l'UX. Cela vous aide aussi à gagner en compréhension sur les limitations techniques des projets futurs. Vos développeurs seront plus heureux si vous gagniez en compréhension au lieu de designer des solutions impossibles.

Work with your developers
Code HTML sur Photodune

Aussi, tester votre UX sur le produit final. C'est là que vous retournez aux wireframes et vous rassurez que ce qui ira à vos consommateurs est ce que vous avez conçu. Ce n'est pas peu courant que quelque chose ne corresponde pas, et vous devriez être suffisamment à l'aise avec vos développeurs pour soulever ces problèmes. En fin de compte, vous êtes responsable de l'expérience de vos utilisateurs, alors rassurez-vous qu'ils ont le produit que vous avez conçu.

Conclusion

Ce ne sont que les fondamentaux pour mettre en place une super UX. Vous pourriez ne pas être capable d'exécuter toutes ces étapes, mais vous devez en être conscient pour savoir quand ne pas vous en servir.

Personnellement je crois que l'UX n'est pas une formule. Elle diffère de projet en projet et se repose sur un amalgame de connaissance, d'expérience, de recherche et d'intuition. Nous irons plus en profondeur dans des domaines spécifiques dans des articles futurs, mais nous avions tout d'abord besoin d'une base sur ce qu'un UXer fait durant chaque journée au boulot. Les étapes dont on a donné un aperçu ci-dessus vous mettront sur la voie, pour savoir comment mettre en place une super UX pour des produits que vos utilisateurs adoreront.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.