Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Cette introduction s'intègre dans l'UV CDAW et participe au projet global par lequel vous serez évalué.
Première séance Du blabla, des définitions, un peu d'ergonomie et de principes sur le graphisme (ou l'inverse). On parlera Planification, Exploration, Idéation, Génération, Evaluation, et tutti quanti.
Deuxième séance Le temps nous étant compté, nous irons droit au but : générer le squelette d'une application Web sur la base d'un template existant. Un peu de technique (HTML, CSS) et pas mal de créativité.
Troisième séance Un créneau pour votre projet avec un accompagnement constructif :-)
Ce cours sera donc évalué au travers du projet que vous réaliserez lors de l'UV CDAW. Globalement, on s'intéresse ici aux aspects méthodologiques, graphiques, ergonomiques et imaginatifs. En gros, je vais observer vos compétences :
organisationelles (au niveau projet et travail collaboratif),
artistiques (pas votre niveau en dessin ou en musique, on est d'accord, mais votre capacité à créer du beau),
d'analyse (sur votre travail et celui de vos collègues),
d'ingénieur-designer responsable (tout ça en même temps : j'ai un problème, je cherche une solution SMART, belle et durable)
Mais tout ça en moins d'un mois, je serai pragmatique :-D
Le livrable de l'UV CDAW est de réaliser un site Web, ou plutôt une application Web, à partir d'un cahier des charges simplifié. Quand on parle de site Web ou d'application Web, on fait forcément référence à un usage et à des utilisateurs (à moins de faire du développement Web pour votre plaisir personnel). Depuis les années 2000 (mais on en parlait déjà en 1986 avec Norman et Draper et le concept de Conception Centrée Utilisateurs ou CCU), l'expérience utilisateur (User eXperience ou UX) et l'UX Design (et par extension l'UI Design) a été mise en avant pour faciliter l'adéquation entre les outils et les humains qui les utiliseront. Tout ça peut paraitre évident, mais encore aujourd'hui, beaucoup de développement se font indépendamment des utilisateurs...
Utilisé pour la première fois dans les années 1990, le terme "expérience utilisateur" (UX) a été défini par Alben en 1996 par
tout les aspects liés à la manière dont les gens utilisent un produit intéractif : la sensation du produit dans leurs mains, la compréhension de son fonctionnement, le ressenti durant l'usage, l'accomplissement de leurs buts mais également son adéquation avec le contexte global dans lequel ils l'utilisent. (traduction du livre de Lallemend et Gronier)
Par la suite, ce concept a été réutilisé à toutes les sauces et surtout compris de différentes manières. En fait, il n'y a pas consensus (ce qui est souvent le cas avec des définitions en langages vernaculaire). En général, on admet tout de même que l'UX est le résultat de l'interaction entre :
l'utilisateur humain (ses attentes, ses besoins, sa motivation, etc.)
le système (avec ses caractéristiques comme son but, ses fonctionnalités, son utilisabilité, etc.)
le contexte (un fourre-tout mais qui donne les informations sur l'environnement dans lequel l'intéraction se fait,)
Ce qui pose problème, c'est que l'humain est complexe, le contexte peut l'être aussi. Et de fait on ne peut pas évaluer l'interaction entre l'humain et le systéme comme dans une chambre blanche...
Il existe pas mal de modèle de l'UX, on ne rentre pas dans les détails, mais c'est assez passionnant. Il existe même des modèles de méthodes de recherche en informatique centrée humain qui utilisent ces concepts (telle THEDRE). Si vous voulez en savoir plus, la bibliographie est là pour ça !
L'UX Design consiste à tenir compte de l'expérience utilisateur dès le démarrage du projet, au début du cycle de conception d'un produit (site ou application Web dans notre cas). Il s'agit de concevoir pour eux, mais surtout avec eux. On se place dans le paradigme de la CCU qui est spécifiée par la norme ISO 9241-210. Lallemend et Gronier en donne les grandes lignes (avec ma libre adaptation) :
Le processus de conception est basé sur une compréhension explicite et la plus complète possible des utilisateurs, de leurs tâches et de leurs environnements.
Les utilisateurs sont impliqués tout au long de la conception et du développement du produit, qui sont guidés par des phases d'évaluations centrées sur ces utilisateurs.
L'équipe de conception intègres des profils, des compétences et des perspectives pluridisciplinaires dans une approche participative et collaborative.
La conception porte sur l'ensemble de l'expérience utilisateur, intégrant ainsi les composants liés à la performance du système (performance, fonctionnalités), mais aussi ceux liés à l'utilisateur (habitudes, personnalités, compétences).
Les activités liées à la CCU suivent un cycle itératif en quatre étapes.
En fait, l'UX Design est une généralisation de ce paradigme adapté aux Interactions Homme-Machine (IHM). Cela regroupe un ensemble de méthodes et de concepts permettant de mettre en place de manière effective la CCU pour les logiciels, les interfaces (on parle d'UI Design), le développement Web par exemple. Le mot est à la mode, mais il commence à être largement utilisé, parce que défini par les chercheurs, en particulier autour des modèles théorique de l'expérience utilisateur.
J'adhère volontiers au cycle (processus) suivant en 5 sous-processus (eux-même itératifs) :
Planification : définition des objectifs du projet et reflexion sur les outils et ressources à déployer.
Exploration : recueil des besoins utilisateurs.
Idéation : Synthèse du sous-processus d'exploration et production d'idées de conception.
Génération : formalisation de solutions de conception.
Évaluation : évaluation itérative des solutions générées.
De mon point de vue, l'UX Design fait le lien entre les sciences de l'informatique et les sciences humaines et sociales. Il faut comprendre l'humain pour permettre l'interaction avec la machine. Je vous conseille d'ailleurs de lire les articles de Turing ou à défaut le bouquin Turing à la plage (ou pourquoi on s'est amusé à créer des langages informatiques entre autres). Néanmoins et d'une façon générale, les principes de l'UX Design peuvent se généraliser à toute production (en lien avec l'informatique ou non) impliquant des utilisateurs humains, rejoignant alors les principes du Design (au sens premier du terme).
Pour chaque sous-processus, nous allons évoquer (malheureusement avec peu de détails étant donnée la durée du cours) des outils, des méthodes et des conseils qui permettent de mener à bien un processus global avec l'UX Design. Ce dernier étant assez récent, il apparait chaque année de nouveaux outils et de nouvelles méthodes. Il vous faudra au court de votre carrière réaliser une veille permanente pour pouvoir choisir ceux et celles qui conviendront.
On va planifier ! Et préparer le projet pour que tout se déroule bien.
Si on avait le temps, on regarderait ce qui se fait du coté des SHS. En gros on va écouter les utilisateurs, même quand ils ne parlent pas.
Ça va être dur, mais il faudra être créatif. Et pour ça, on a des techniques. Tempête de cerveaux, par exemple.
Mettre en musique vos idées mais pas en dur, pas tout de suite. Maquette, icônes, storyboard et tutti quanti.
Évaluer, histoire de voir si vous n'êtes pas un créateur incompris, ou plutôt qui n'a pas compris.
Un trait ou une couleur, ça n'est pas neutre. Ici, on regarde quelques principes de bases.
L'ergonomie, c'est vaste. Prenons quelques minutes pour survoler cette discipline.
Lisez, vous mourrez moins bête. Mais vous mourrez quand même (merci professeur moustache, oui vraiment merci !).
On rentre ici dans le sous-processus clé sans lequel l'UX Design ne serait pas ce qu'elle : une méthode iétrative centrée sur l'utilisateur. Cela consiste à tester la qualité des solutions que vous avez créée dans la phase de génération. Dans les faits vous avez déjà évaluer, à toutes les phases et avec les utilisateurs. Ici on se concentre sur l'évaluation de l'ensemble du livrable (comme un tout) et pas seulement une partie, une fonctionnalité ou une interface donnée. C'est une phase hautement itérative : toute recommandation issue de l'évaluation globale devra être intégrée puis de nouveau évaluée. À lissue de ces itérations, après une ultime (?) évaluation, le système final pourra être effectivement produit dans sa version 1.0.
Les échelles de mesures existent depuis la conception des premières interfaces (et la naissance de l'ergonomie comme science). Il s'agit de mesurer l'utilisabilité de votre système. Il en existe plusieurs, et le plus difficile reste de choisir la bonne au bon moment. La passation se fera via un questionnaire, et recueille des données quantitatives sur lesquelles vous pourrez réaliser différents traitements statistiques. Elles sont souvent appréciées des décideurs (qui n'y comprennent pas grand chose, mais qui sont impressionnés par des chiffres, des formules compliquées et des graphiques colorés; cet avis n'engage que moi ^_^). Elles ont l'avantage d'avoir un format standardisé facilement partageable entre différentes équipes.
Soyons clair : il y a beaucoup d'échelles.
Une des plus connues est l'échelle SUS (System Usability Scale) qui, en plus d'avoir un nom rigolo, est adaptable pour tout type de système.
Une autre, un peu plus riche, est l'échelle CSUQ (Computer Usability Satisfaction Questionnaire).
Enfin, l'échelle DEEP a l'avantage de permettre la proposition des recommandations de conception en plus de l'évaluation du système.
Vous trouverez sans soucis des exemple de ces échelles sur le Web.
Ces échelles sont un peu différentes : elles visent à évaluer l'expérience utilisateur en elle-même. Elles sont chacune basées sur un modèle théorique et recueillent des avis subjectifs de manière standardisée.
Une échelle qui me parait très bien pensée est meCUE, et on peut l'utiliser.
Au XXIème siècle, l'habit fait le moine. La première impression est aujourd'hui absolument primordiale, et bien plus encore en ce qui concerne les interfaces et le Web.
L'idée générale est de mesurer la première impression en recueillant ce qu'un utilisateur retient d'une interface après 5 secondes pile poil. Mais attention : il ne faut pas utiliser cette méthode si d'autres méthodes plus élaborées produisent de meilleurs résultats ! On n'utilise donc cette méthode que parce qu'on a besoin d'un avis rapide et peu précis sur un aspect du système à évaluer.
Après ces 5 secondes, il faut donner aux utilisateur un très court questionnaire (plus ou moins 5 questions) sur le ressenti du type :
Mon impression de cette application est : Très mauvaise/Mauvaise/Moyenne/Bonne/Très Bonne
Au niveau esthétique, je trouve ce site : ...
Quels éléments de l'interface avez-vous retenus : ... et dessinez ce dont vous vous souvenez.
Selon vous, à quoi sert cette application ?
Donnez 3 mots qui vous viennent spontanément à l'esprit en regardant cette application.
Bien sûr, il faut adapter ces questions à vos objectifs. Une analyse qualitative (sur les données verbales ou écrites) et une analyse quantitative (si vous avez un nombre significatif d'utilisateurs et sur l'impression générale et l'ésthétique) seront faites.
Les tests utilisateurs sont le b.a.ba de l'UX Design et servent dans tous les sous-processus. Cela consiste, à l'instar de l'observation dans le sous-processus exploration, de placer des utilisateurs en situation afin d'observer ses comportements ses réactions et sa performance face au système (et dans la réalisation de tâches souvet prédéfinies).
Pour réaliser un test utilisateur, il vous faut planifier votre test, construire un scénario d'usage (que vous avez souvent déjà écrit en amont), élaborer une grille d'observation, et recruter vos utilisateurs. La passation s'effectue sur le même modèle que pour l'observation mais en étant plus guidée, en suivant le ou les scénarios prédéfinis.
Ils sont souvent associés à différents supports en fonction des objectifs :
en exploration sur les maquettes;
pour évaluer un prototype fonctionnel;
pour valider un prototype final;
pour comparer des maquettes ou prototypes;
dans un processus d'améioration continue sur un produit déjà sur le marché.
Pour en savoir plus, une description très complète se trouve dans le bouquin de Lallemand et Gronier.
Trop ! :-)
Ce sous-processus de la démarche d'UX Design est le coeur de celle-ci : plus vous comprndrez les utilisateurs finaux, plus, en principe, votre production répondra à leurs besoins. Pour cela, il faut échanger, faire preuve d'empathie, etc. Tout cela doit être mené en parallèle de recherches sur le contexte et l'environnement d'utilisation, sur des sources d'inspiration pour votre projet, sur les défis techniques ou scientifiques à relever. Bref, il y a du travail en principe.
Malheureusement, le temps nous est compté. Et pire, les utilisateurs manquent... Pour pallier à ces soucis, vous jouerez le rôle des utilisateurs et nous travaillerons en cherchant l'inspiration avec des documents rééls (vidéos par exemple).
Dans cette partie, nous effleurerons les méthodes d'exploration. Si vous faites à l'avenir de l'UX Design, travaillez les techniques des sciences humaines et sociales decrites ici à fond (c'est souvent une lacune chez les informaticiens...)
Il s'agit d'une méthode fondamentale qui peut être utilisée aussi bien explorer le contexte d'utilisation, que pour définir les besoins utilisateurs ou pour les différentes phases d'évaluation.
L'entretien est une méthode de recueil de données qualitatives où un membre de votre équipe échange avec un utilisateur final et l'interroge sur divers aspects (expérience, attitudes ou comportement) en relation avec le projet. L'entretien est avec le questionnaire la méthode la plus répandue dans les sciences humaines et sociales.
Il existe plusieurs formats d'entretien :
l'entretien non directif ou exploratoire. On commence par une question consigne initiale, puis on laisse parler l'interviewé avec des relances si nécessaire.
l'entretien semi-directif (le plus utilisé). une première question de consigne suivi d'autres questions ouvertes et des relances.
l'entretien directif. Dans ce cas, les questions sont fermées et demandent des réponses courtes et brèves. Une consigne suivi de questions fermés, on est très proche du questionnaire.
Les 2 premiers formats ont l'avantage de laisser place à une certaine connivence qui permet l'empathie et les reflexions personnelles (un point utile à la démarche UX Design). Les questions sont définies en amont et regroupées au sein d'un guide d'entretien. un document qui contient aussi des informations relatives à l'activité en elle-même (timing, documents à montrer lors de l'entretien, etc.).
La création d'un guide d'entretien n'est pas simple et il est souvent utile de se rapprocher d'un spécialiste en la matière (qui connait bien les sciences humaines). Voici les étapes pour créer son guide d'entretien :
Définir vos objectifs structurés en thématiques, sous-thématiques, etc.
Composer vos questions, avec 4 types : de comportements, d'opinion, de connaissances, démographiques et factuelles.
Formuler les questions.
Définir les activités supports (présentation de documents, de photos, scénarios, etc.)
Il vous faut alors choisir les futurs interviewés et organiser au plus juste les entretiens. Attention, il s'agit d'une activité fatiguante (pour vous comme pour l'interviewé). Ne comptez pas faire passer des dizaines d'entretiens par jours (on considère qu'un entretien dure entre 45 et 90 minutes).
Il est très utile, si l'interviewé est d'accord, de filmé ou d'enregistré l'entretien. Ça facilitera l'extraction de verbatim pour appuyer une analyse à venir.
Je reprends du bouquin de Lallemand et Gronier une structure en 5 phases de l'entretien qui me semble très juste :
Introduction (5 mn), accueil (se présenter !), mise en confiance et signature de l'accord de consentement et de la demande d'enregistrement.
Échauffement (5-10 mn), une question démographique simple.
Corps de l'entretien (80% de la durée de l'entretien), questions génériques puis spécifiques.
Retrospective (5-10 mn), questions génériques pour finir, puis une courte synthèse.
Debriefing (5 mn), demander si il n'a rien à ajouter et remercier !
Il y a un vrai travail sur soi pour savoir mener des entretiens. Je vous conseille la lecture du livre Petit traité de manipulation à l'usage des honnêtes gens., ça vous sera utile :-)
Il reste à retranscrire l'entretien (d'où l'utilité de l'enregistrement) pour réaliser son analyse. Cette dernière doit être menée en accord avec les objectifs initiaux de l'entretien (on n'analyse pas ce qui n'est pas utile à votre projet).
Il s'agit d'une forme d'entretien collectif. On considère que le groupe favorise l'échange et l'émulation autour du sujet.
On va essentiellement essayer de multiplier les intéractions et d'en tirer des informations inédites sans elles.
Il existe de nombreux types de focus group et comme pour l'entretien, il vous faut construire un guide qui permettra la bonne tenue de l'activité. On retrouvera une série de questions qui reprennent les catégories vues précédemment. La différence principale se situe au niveau de l'accueil des particpants, il faut "casser la galce" et instaurer une certaine confiance entre eux.
L'analyse des résulats est plus complexe : il s'agit de faire ressortir de la production verbale les éléments pertinents (ce qui peut être délicat si l'animateur n'a pas su passer la parole de manière fuide). Il existe différentes méthodes pour analyser cet exercice, en particulier pour analyser les intéractions : on regarde les accords et désaccords, la résolution des conflits, le partage d'expérience entre particpants et comment ils en ont parlé, les contradictions, la formation de sous-groupes.
L'observation est largement utilisé dans les sciences humaines et sociales. Il s'agit d'observer sans intervenir directement avec l'utilisateur. Et bien sûr de noter ses faits et gestes.
L'observation permet d'observer une activité réelle, d'analyser l'environnement (le contexte naturel d'usage) et de tester des hypothèses. On observe beaucoup de choses utiles : des informations en situation naturelle, un recueil de données en continu, une immersion dans la situation de l'utilisateur et souvent un support pour de nouvelles idées pour le projet.
Mais il y a des incovénients :
elle n'est pas toujours possibles (contextes délicats);
elle est particulièrement chronophage et consommatrice en ressources humaines;
elle laisse la place au subjectif de la part de l'observateur et introduit un biais par sa simple présence;
on ne contrôle pas les variables externes (appels, bruits, etc.)
Comme pour les autres méthodes, il faut planifier votre observation et créer une grille d'observation (informations génériques comme l'heure ou le lieu, ce qui a été observé avec la situation et les éléments utilisés, les patterns observés tel les actions de l'utilisateurs, ses mots ou ses réactions).
Pour l'analyse, un rapport d'activité sera très utile. Vous y synthétiserez les activités, leur description, leur fréquence, et leur durée cumulée. Un graph temporel d'activité ou timeline est particulièrement pratique.
Le questionnaire est une méthode clasique de recueil de données quantitative et fait suite en principe à une serie d'entretiens. On cherche à valider quantitativement une série d'hypothèses émises suite aux entretiens.
Avec le questionnaire, on va toucher une large audience et communiquer sur des résultats statistiques. Les questions reprennent les catégories des entretiens et sont de plusieurs types :
Les questions fermées (vrai/faux par exemple)
Les questions semi-ouvertes (variation sur une échelles de valeurs)
Les questions ouvertes (textes courts ou long)
Les questionnaires peuvent être soumis via de multiples canaux de communication. La diffusion par le Web est aujourd'hui la plus fréquente avec des outils commes Google Forms ou Framasoft.
Le traitement des réponses aux questionnaires peut faire l'objet de traitements statistiques. Il est important d'en tenir compte lors de la conception du questionnaire (les questions ouvertes rendent ces traitements plus délicats !).
Ce sous-processus vise à l'émergence d'idées sur la base des données recueillies avec les utilisateurs. Il existent beaucoup de méthodes pour favoriser l'émergence d'idées. Mais mon expérience m'a montré que seules quelques unes d'entre elles fonctionnent avec une majorité de personnes. Mais surtout le fondement théorique de certaines méthodes sont parfois difficile à appréhender. Dans cette partie, je n'en présenterai que deux (enfin un et petit bout de l'autre), libre à vous de creuser la question :-)
La "tempête de cerveaux" est la plus connues et la plus commune des techniques de génération d'idées. Elle est apparut ddans les années 1930 et rencontre toujours le succès.
Une séance de brainstorming se déroule selon le plan suivant :
un groupe de participant émet un maximum d'idées sur une thématique donnée. Aucun jugement (ni aucune critique) ne doit être formulé sur ces idées.
les idées sont notés par un modérateur qui veille aux respects des 3 règles : spontanéité, pas de jugement (!), encourager les idées extravagantes et fertilisation croisée.
Cette méthode a l'avantage de renforcer la cohésion d'un groupe par la co-construction d'une solution à un problème.
Pour créer cette activité, il faut préciser :
la question ou le problème principal;
la durée de la session (entre 10 et 60 minutes avec pauses pour les plus longues);
le nombre de participants (entre 5 et 12 et plutôt moins de 10);
Le modérateur oou animateur a un rôle central. Il doit
donner les instructions (avec les 4 règles) et exposer le problème;
avoir une attitude positive;
garder le rythme;
gérer le groupe;
Le résultat est une liste d'idée en vrac qu'il faudra trier, évaluer à l'aide d'outils telle une matrice de priorisation ou une grille multicritère.
Les cartes sont un outil emblêmatique de l'UX Design. Les cartes d'idéation visent à stimuler l'émergece d'idées nouvelles. Il en existent des dizaines, souvent basés sur les recherches en UX design (elles sont utilisées pour mener des expérimentations dans ce domaine).
Pour donner un exemple, voici quelques cartes de l'outil PLEX Cards (le site, l'article, les cartes en français)
Vous avez les règles d'utilisation, les explications, les fondements scientifiques. Y'a plus qu'à :-)
Blague à part, il faut vous approprier un de ces outils, le comprendre et comme pour le brainstorming, apprendre à modérer et animer une séance avec celui-ci.
Si vous souhaitez creuser la questions : Personnas, Design studios, Experience maps, techniques génératives
Définition La charte graphique, est un document de travail qui contient l'ensemble des règles fondamentales d'utilisation des signes graphiques qui constituent l'identité graphique d'une organisation, d'un projet, d'une entreprise. Wikipédia
Elle est indispensable pour :
Unifier l'aspect un document.
Donner une identité visuelle.
Véhiculer une image, un style graphique et contrôler cette image.
Partager la production de documents entre différents acteurs.
Assurer une homogénéité à l'intérieur de entreprise.
Attention : La charte graphique doit être originale et esthétique. Et ça, c'est pas gagné !
Break : un exemple comme ça en passant, Charte graphique de l'Université de Cergy
Il s'agit de créer un document regroupant les différents aspects graphiques des réalisations à venir. Pour cela il faut convenir de la forme et de l'aspect d'un certain nombre d'éléments. Il faut évaluer le ressenti de votre charte (ce que les designers appellent le "Watch and feel").
Voici une liste (non exhaustive) des éléments dont il faut tenir compte :
Le mélange du statique et du mouvement (image, animations, etc.)
La mise en page et l'équilibre de celle-ci.
Le choix et utilisation des lettres, des couleurs, de l'espace, des lignes, etc.
La qualité visuelle de la typographie et de la photographie.
L'image à véhiculer.
La première impression est importante en générale !
Sur un site Web bien sûr sinon l'utilisateur risque de déserter le site (et donc avoir une mauvaise image de l'entreprise ou de votre projet en général.)
Sur vos productions, ce qui peut avoir une influence sur l'idée qu'on se fait de vous.
Sur beaucoup de point, l'esthétique et le design de la charte graphique rejoint l'ergonomie de vos documents finaux (on en reparlera ici).
On définit toujours la forme avant les couleurs !
En général il est utile de se poser quelques questions avant de réfléchir à une charte graphique.
Quel public visez-vous ?
Quels types de documents voulez-vous construire ?
Quels messages voulez-vous faire passer ?
Quelle image voulez-vous donner ?
La verticale évoque la force, la dignité, la vérité. Elle s'apparente aussi à la rigidité, à l'immobilisme. L'horizontale est synonyme de calme, de repos, de tranquillité, d'horizons largement ouverts. Mais aussi, tel un gisant, de mort. L'oblique symbolise le mouvement, le dynamisme. Mal utilisée, elle se transforme en chute. La droite est la figure la plus simple, la plus directe. Rigueur, décision, mais aussi ennui. La courbe s'apparente à la plénitude, à la féminité. Mais elle évoque également la mollesse. La ligne brisée est souvent signe d'agitation, de confusion. Les lignes convergentes, divergentes sont ambiguës. Elles signifient à la fois: choc, violence mais aussi expansion, éloignement.
Le cercle est synonyme de perfection, d'absolu, d'infini. Le triangle représente l'harmonie, la proportion, la sécurité. Le carré est solide, stable. Il symbolise l'absence rassurante de tension. C'est le support idéal pour une information neutre et objective. Le rectangle s'apparente au carré. Présenté à la française, c'est-à-dire à la verticale, il est plus dynamique. A l'italienne, c'est-à-dire à l'horizontale, il produit un effet panoramique.
Vous devez tenir compte aussi bien des valeurs (nuances de gris) que des couleurs. Le choix des couleurs se base sur des critères le plus souvent esthétiques (vos goûts en quelque sorte), mais ce choix doit plaire à vos "lecteurs". Vous devez tenir compte de l'emplacement de vos couleurs.
En général, le test est le meilleur révélateur de mélanges ratés : fond bleu + écriture rouge, fond foncé + écriture foncé, etc.
Nous verrons par la suite que l'ergonomie pose certaines contraintes (pas plus de cinq couleurs sur une page par exemple).
Il va de soit que certaines couleurs se marient mal entre elles et il peut y avoir de grandes différences entres les associations de couleurs sur un écran (Web) et celles "sur le papier".
Pour choisir vos couleurs, il existe des sites permettant d'associer des couleurs et de générer une maquette Web afin de valider vos choix (et même de les faires valider par des utilisateurs).
Le logo va être le représentant visuel d'une une entreprise, une marque mais aussi un projet ou une équipe au sein d'une entreprise. Avant même de lire la marque (ou le nom du produit, le titre du site...), l'oeil reçoit déjà une information visuelle par l'intermédiaire du logo.
Il véhicule :
des valeurs,
une image, un message.
Il s'agit de définir un certain nombre de paramètres avant de créer un logo.
Choix des couleurs
Ajout d'un dessin (type « mascotte », produit, valeur symbolisée...) ou non
Choix de la typo
Forme générale
Certaines marques ont largement montré l'intérêt du graphisme dans la communication tel Apple (en particulier avec l'épisode de l'iPod) ou Coca-Cola.
L'ergonomie est l'étude de la facilité et de la souplesse d'utilisation d'un système, ainsi que de sa bonne adaptation aux objectifs recherchés, en tenant compte du bien-être de l'utilisateur.
En informatique elle concerne aussi bien le matériel (écran pivotant, inclinable, agréable, sans clignotement, clavier à teinte matte, à touches bien disposées, ordinateur rapide et silencieux...) que le logiciel (productif, bien conçu et adapté à la tâche, mode d'emploi intuitif, avec aide en ligne contextuelle...) qui doit être en adéquation avec le mode de travail des utilisateurs et les objectifs de l'entreprise.
Elle intervient donc avant la conception logicielle d'un produit. Dans l'UX Design, l'ergonomie est assez centrale. On répond aux questions soulevées par les ergonomes en impliquant les utilisateurs à toutes les étapes et en ayant un recourt systématique aux tests utilisateurs.
L'ergonomie d'un site Web, c'est sa capacité à rendre facile la recherche et l'accès à l'information, à transmettre un message, à remplir ses objectifs, à répondre aux attentes et besoins des internautes... et ce de manière pratique et agréable.
C'est la recherche d'un idéal : trouver le juste compromis entre utilité, beauté, fonctionnalité et simplicité.
Certains comportements face à l'écran (ou aux documents "visuels" en général) ont été analysés par les ergonomes (aspects cognitifs, processus d'intégration de l'information).
En fait, on retrouve des comportements classiques mis en avant par les chercheurs ergonomes ou IHM :
La lecture en "Z".
La perte d'attention due aux éléments animés.
La surcharge d'informations sur un même espace.
L'information détournée par des éléments graphiques secondaires.
Dans le cas Internet, les menus mouvants, les actions sur simple clic, les curseurs personnalisés, etc.
Certaines situations n'offre aucune solution à l'utilisateur. Il est malheureusement encore fréquent de rencontrer ces situations au quotidien. Elle peuvent être :
des messages incompréhensibles (phrases alambiquées, vocabulaire trop spécifique, etc.),
des instructions sans solutions évidentes (boutons aux libellés identiques, pas de boutons sur une pop-up, etc.),
une navigation qui boucle.
Des exemples un peu anciens mais vécus en vrai par moi-même :-)
Les erreurs structurelles concernent des éléments ou des libellés inadaptés au sein des interfaces. Ces erreurs gênent l'utilisateur dans l'usage du logiciel ou du site Web, quelquefois de manière imperceptible, et renforce un sentiment d'amateurisme.
Les erreurs de type culturelles sont des éléments inadaptés au public cible soit au niveau des usages, soit au niveau du vocabulaire, soit enfin au niveau graphique. Il est extrêmement important de connaître les aspects culturels du pays cible, de la communauté ciblée, etc.
Ce sous-processus est celui où vous allez mettre les mains dans le cambouis : créer les prototypes et maquettes de système à concevoir, c'est-à-dire les représentations physiques des solutions imaginées dans la phase d'idéation, avec lesquels votre équipe pourra intéragir et qui pourront être évaluer par les utilisateurs. Générer et explorer un ensemble d'alternatives possibleset faire des choix éclairés par les évaluations successives est de fait la base de l'UX Design.
Cette démarche itérative jalonnée par des évaluations avec les utilisteurs permet d'affiner les prototypes et maquettes, parfois en les combinant entre elles, pour atteindre un niveau de qualité et de fidélité de plus en plus important. En bref : il faut mettre vos idées en musique en évitant la cacophonie !
Il existe encore une fois pas mal de méthodes et d'outils pour créer des prototypes. Nous allons nous concentrer sur 3 d'entre eux en proposant une gradation du moins intéractif au plus plus réaliste.
Une image vaut-elle mieux qu'un long discours ? La plupart du temps sans doute, encore faut-il que cette image soit bien comprise. Depuis la création des interfaces dites graphiques au début des années 1980, les icônes sont omniprésentes dans les logiciels. Associées à une interaction, elles favorisent une simplification des actions de l'utilisateur (évitant ainsi des lignes de commandes difficiles à comprendre pour le néophyte). Pour autant la création d'icônes n'est pas simple : il faut tenir compte des habitudes des utilisateurs, du contexte social et culturel, etc.
Il vaut mieux associer un texte à une icône : le premier est moins ambigu, la seconde est plus rapidement comprise et repérée.
Les icônes sont composées de différents éléments :
le signifiant (le coeur de l'icône e.g. une personne, un objet, etc.)
les indices (pour guider l'interprétation du signifiant e.g. une flèche, un trait, etc.)
les symboles (pour donner un sens particulier au signifiant e.g. rouge pour un interdit, dont il ne faut pas abuser parce qu'ils peuvent brouiller le message).
La conception des icônes suit le processus suivant :
choix du format de celles-ci;
planification de la méthode (définir le contexte d'usage, construire une grille de passation avec un concept à faire dessiner par les utilisateurs, recrutement des utilisateurs);
passation (ravailler avec les utilisateurs sur leurs représentations mentales, faire dessiner des icônes);
analyse des résultats.
On finit par une phase d'exploration des résultats où l'icône, une fois correctement interprétée par les utilisateurs (80% d'entre eux), va être affinée pour atteindre une qualité suffisante.
Et si vous avez la flemme, il existe des sites très bien, pourvu que vous fassiez une évaluation comme il faut de vos choix :-)
Un storyboard est la représentation sous forme de bande dessinée simplifiée de votre système. Avec ces courts récits illustrés, vous allez représenter les intéractions entre les utilisateurs et votre système. Cette méthode narrative a pour objectif de raconter les scénarios utilisateurs que vous avez imaginé en amont. Inutile d'être un dessinateur professionnel, le storyboard doit permettre de valider vos choix et c'est surtout sa structure narrative qui compte. Ces concepts sont largement repris dns le Storytelling, un paradigme très à la mode dans la conception depuis quelques années. De plus, cette approche narrative se retrouve dans le Design Thinking et le sketching, des méthodes qui font appel à la pensée visuelle.
Plusieurs perspectives sont possibles pour faire un storyboard :
la perspective écologique, centrée sur le système dans son contexte. On ne rentre pas dans les détails de son fonctionnement;
la perspective d'intéraction, centrée sur les écrans et l'interface, sur les actions de l'utilisateur et de ses réactions face au système;
la perspective émotionnelle, centrée l'expérience et les émotions qu'elle suscite.
L'avantage du storybard est de propsoer un format simple avec lequel vous allez pouvoir communiquer que ce soit auprès des utilisateurs (et donc pour évaluer vos propositions) ou auprès de vos collègues (équipe ou hiérarchie).
Son défaut est de ne pas permettre de représenter des éléments détaillés. Vous serez parfois freiné par votre humilité naturelle quant au dessin (ainsi que vos collègues). Et oui, on a toujours peur de passer pour un mauvais dessinateur :-)
Je vous conseille d'aller voir le site Storyboardthat qui propose pas mal d'example (avec le mot clé IHM par exemple).
Pas besoin d'en dire beaucoup sur cette méthode, une maquette est un passage quasi-obligatoire pour tout projet de conception. Pour ce qui nous concerne, le design d'interface, il existe une multitude d'outils pour maquetter des interfaces d'auatnt plus faciles à utiliser si vous avez créé vos icônes et réalisé des storyboards.
Leur avantage est de proposer une visualisation quasi-fonctionnelle de votre système. Plusieurs formats sont possibles, en fonction du niveau de détails, d'intéractivité, de la taille, de la capacité à évaluer (maquette jetable ou incrémentables), de leur orientation (horizontale ou verticale, tâches ou scénario).
On choisit aussi un modèle de maquette en fonction de sa diffusion future, de son niveau d'audience possible. N'oubliez pas que le but de la maquette est l'évaluation de vos idées !
Pour plus d'information sur les outils de maquettage, la biblio est là. Et le site qui sert : Prototypr.io
Design persuasif, Tri de cartes, Gamification, etc.
Cette phase est cruciale pour bien démarrer un projet en UX Design. Il faut impliquer toutes les parties prenantes du projet, comprendre son ecosystème et les enjeux de celui-ci. En gros, comme dans tout problème, il faut appréhender toutes les données initiales disponibles.
Vous disposez d'un très court cahier des charges. Il vous faut le compléter en réalisant diverses actions avec différents outils et méthodes.
Ici tout est affaire de communication :
mener des entretiens individuels avec vos collègues impliqués dans le projet, de préférence semi-structurés (des questions ouvertes mais dans la thématique) et informel (restez naturel);
organiser une réunion de lancement pour confronter les points de vues (et basée sur les entretiens précédemment menés), mais aussi pour convaincre de l'intérêt de la démarche UX Design (et oui tout le monde ne pense pas forcément comme vous !). Parmi les outils sympa, UX sales deck de Boag peut vous aider dans cette démarche.
Il faut alors sélectionner les outils et méthodes de recherche qui permettront de comprendre besoins et motivations des utilisateurs.
Rechercher des utilisateurs est primordial; il faut comprendre leurs besoins, développer une forme d'empathie envers eux, former une base sur laquel vos futurs idées prendront place. De nombreux auteurs considèrent que la recherche utilisateurs se décline en 3 phases :
Planification de la recherche. Élaborer des stratégies, émettre des hypothèses, scénariser et préparer.
Passation. Faciliter, observer, écouter, collecter.
Analyse. Grouper, synthétiser, cartographier, comprendre.
Orchestrer les activités et phases ultérieures; vous devez définir vos outils et méthodes pour chaque sous-processus de la démarche. Le diagramme d'Ishikawa ou en arrêtes de poisson est un outil intéressant pour orchestrer ces activités.
Comme tout projet de production, une recherche sur l'existant est indispensable. Il existe plusieurs sources pour réaliser cette recherche.
La recherche documentaire : fouiller la littérature scientifique (artciles de recherche), les ressources professionnelles (blog, associations professionnnelles telle FLUPA), les bases de propriétés industrielles (INPI par exemple).
Les ressources internes à votre entreprise.
L'analyse concurrentielle au travers par exemple des études de marché.
Recruter les utilisateurs (on dit parfois utilisateurs finaux ou cibles) est une étape importante à ne pas négliger. Comment doit-on les sélectionner ? Combien en faut-il ? Comment organise-t-on les sessions de travail avec eux ?
Pour identifier les utilisateurs à recruter, des discussions dans votre équipe (en mode brainstorming par exemple) doivent être menées au préalable. Puis il faut décrire les caractéristiques de ces utilisateurs : démographique, liées à la tache, organisationelles ou psycho-cognitives. Enfin, il convient de sélectionner les utilisateurs représentatifs (avec en particulier les méthodes d'échantillonnage). On ne rentre pas dans les détails, je vous renvoie au livre de Lallemand et Gronier (je n'ai pas d'actions, mais il faut avouer qu'il est très bien fait !).
Le recrutement en tant que tel peut alors se faire. Le nombre d'utilisateurs à recruter dépend de l'objectif de votre étude et des méthodes que vous utiliserez (définies dans la phase "Planifier la démarche UX Design"). Le recrutement peut être géré par vous même ou par un cabinet extérieur et vous devrez choisir le mode de filtrage, les méthodes pour motiver et récompenser les participants. Vous devrez alors organiser les sessions, non sans les avoir pré-tester et planifier au préalable.
L'éthique est un sujet complexe et souvent subjectif. Il faut en tenir compte dans tous projets impliquant des humains (voir des êtres vivants). Vous trouverez beaucoup de littérature sur le sujet et de nombreux docuements pour encadrer vos démarches : Ethical Design, UXPA, etc.
Vous devez aussi connaitre, avant de démarrer votre projet, les grands principes déontologiques et légaux. Bien sûr, les lois (telle la RGPD dont on parle beaucoup ces derniers mois) encadrent ce type de démarche, surtout quand il s'agit de recueillir et potentiellement de stocker des données sur des personnes. Un point qui me semble important est de permettre aux utilisateurs de donner leur consentement libre et éclairé quant à leur participation à vos travaux. Pour cela, pensez à leur faire signer un formulaire de consentement bien construit. Aller, un exemple :Notice de consentement pour le projet de recherche APACHES
Lisez, vous mourrez moins bête. Mais vous mourrez quand même (merci , oui vraiment !).
Des outils de maquettage Web ? Comment choisir ?
Un site ultra bien foutu avec plein d'outils dans tous les sens
Lallemand, C., & Gronier, G. (2015). Méthodes de design UX: 30 méthodes fondamentales pour concevoir et évaluer les systèmes interactifs. Editions Eyrolles. Excellent bouquin réédité en 2018, très complet. Je m'en suis largement inspiré pour faire ce cours.
Rachid G., Hoang L.N. (2020). Turing à la plage, L'intelligence artificielle dans un transat. Collection : A la plage, Dunod. Un bouquin de vulgarisation sans se prendre la tête qui montre l'importance d'Alan Turing... tout court.
Pastoureau, M., & Simonnet, D. (2007). Le petit livre des couleurs (Vol. 377). Points. Pour en savoir plus sur les couleurs par un historien de qualité.
Joule, R. V., Beauvois, J. L., & Deschamps, J. C. (1987). Petit traité de manipulation à l'usage des honnêtes gens. Grenoble: Presses universitaires de Grenoble. Toujours utile de ne pas être le dindon de la farce. Ce livre est aussi très utile pour apprendre à engager les utilisateurs dans votre projet (multiple rééditions).
Alben, L. (1996). Quality of experience: defining the criteria for effective interaction design. interactions, 3(3), 11-15.
Norman, D. A., & Draper, S. W. (1986). User centered system design; new perspectives on human-computer interaction. L. Erlbaum Associates Inc..
Lucero, A., & Arrasvuori, J. (2010, September). PLEX Cards: a source of inspiration when designing for playfulness. In Proceedings of the 3rd International Conference on Fun and Games (pp. 28-37).
