doodle ux/ui webdesign

 

AVERTISSEMENT

À vous hommes et femmes de culture, artistes et autres représentants, désireux d’apprendre, ou simple curieux de la conception web, n’ayez pas peur d’entrer dans cet étrange monde du webdesign, si loin du domaine artistique. Créer son site web est une activité diverse et exigeante, nous voici à une étape avancée de ce parcours. Sous ces grands airs, l’UX design est une discipline simple à appréhender et riche en réflexions pertinentes. Toutefois, son application reste moindre pour un site individuel ou un collectif, mais plus approprié pour un établissement (théâtre et école), où votre site devient un outil de diffusion majeur.

Internet est un secteur en constant évolution, et nos façons d’y accéder, de le représenter et de l’utiliser en dépendent. Inutile de retracer l’histoire du web depuis sa création, mais soyons d’accord sur le fait que son esthétisme a profondément évoluée depuis les années 2000. Aujourd’hui, sites web, applications (et dans un domaine plus large, logiciels et autres outils numériques) ont une apparence bien plus épurée, une navigation plus intuitive, un message identifiable, des chemins utilisateurs précis, etc… Très loin des designs initiaux d’Internet avec ses animations flashs, son WordArt ou ses nuages de tags.

 

Le site de la Comédie Française dans les années 2000

 

Résumons cette transformation graphique par l’évolution du webdesign, dû à cette émergence de nouveaux formats et de besoins chez l’internaute. En vérité, le design d’un site web ne peut pas se réduire simplement à un aspect visuel. Ce n’est qu’une surface et sous cette partie émergée se projette « l’expérience utilisateur », celle qu’il va ressentir durant sa navigation.

Ce « design de l’expérience utilisateur » se nomme l’UX Design pour « User eXperience Design ». C’est un processus visant à étudier les interactions de l’utilisateur avec un service, afin d’améliorer l’utilisabilité et l’accessibilité de ce-dernier. Son expérience devient ainsi plus facile, confortable et désirable.

Cette notion « d’Ux » se retrouve dans de nombreux domaines, mais c’est son application en conception digitale qui nous intéresse. Concrètement, on dessine et réalise un site web selon un profil précis d’utilisateur pour améliorer deux points : l’ergonomie de son interface, et les affects de l’usager. Différentes techniques et principes existent, détaillés dans cet article.

 

 

UX DESIGN, UN ACRONYME PLEIN DE BON SENS

 

1. Définition

En soit, le terme « webdesign » ne veut plus dire grand-chose. C’est un domaine évoluant rapidement et englobant de nombreuses disciplines. Perçu de loin, il se résume à l’intégration simpliste d’une charte graphique et à des choix cohérents de formes, couleurs et typographies. Mais son application est bien plus profonde, et si le contenu d’un site est sa substance, c’est le design qui permet de voyager à l’intérieur.

Admettons par exemple que vous soyez en création ou refonte d’un site Internet. Si vous représentez un théâtre, vous souhaitez peut-être faciliter la réservation de vos spectacles en ligne, recevoir plus de dons, ou encore homogénéiser la présentation de votre programmation. En tant qu’école, vous pourriez créer un espace pour vos élèves, voir mettre en avant vos stages. Vous passerez par bon nombre de raisonnement, où bien souvent on se focalise sur un aspect précis : fonctionnalités, contenus, design graphique, sécurité, etc… Alors qu’en réalité, ce qui fait la réussite et la pertinence d’un projet, c’est d’imaginer et de concevoir principalement autour de vos utilisateurs. On appelle cette démarche l’UX Design, pour « User eXperience Design ».

 

Une citation de Jesse James Garrett, célèbre designer, cerne bien l’apport et les problématiques soulevés par l’UX Design : « Il n’existe pas de mode d’emploi à lire avant de le consulter, ni de séance de formation, ni de service consommateur pour servir de guide. L’utilisateur est seul devant le site web, et seules son intelligence et son expérience peuvent l’orienter. »

 

 

L’Ux est donc un processus de conception centré autour de l’utilisateur. Il se combine et se lie avec vos contenus, vos visuels, et vos réflexions stratégiques sur votre public, votre identité, et vos objectifs. Il s’intègre dans une démarche d’optimisation afin de délivrer un service (ou un produit) de la meilleure façon possible à un public. Se faisant, il cherche à améliorer « l’expérience interactive » de son utilisateur. Si celle-ci est positive et mémorable, le pari est gagné.

 

L’émergence du « mode sombre » sur de nombreuses applications est, par exemple, un processus d’UX design. Les veillés tardives devant l’écran amènent un nouveau besoin chez l’utilisateur que l’Ux identifie, théorise puis solutionne (dans ce cas présent, en apaisant les tons clairs au profit des tons sombres).

 

Au fond, ce sujet n’a rien de nouveau et pourrait même sonner comme l’évidence même. On retrouve ces réflexions centrées autour de l’utilisateur dans de nombreux domaines : l’expérience d’un patient en hôpital, du client dans un hôtel ou dans un parc d’attraction, l’expérience d’un environnement de travail, etc… L’UX design traduit le fait qu’aujourd’hui, c’est le produit/service qui doit s’adapter à l’utilisateur et non l’inverse.

 

2. Applications

Au risque d’être déroutant, il n’y a pas de méthodologie précise d’UX Design. Le webdesign n’existe pas sans Ux, et inversement. Ce n’est pas une étape de travail, mais une réflexion continue qui se pose à chaque avancée d’un projet. Il n’est pas possible de créer un site web sans penser à son utilisateur. C’est un non-sens. Vous concevez pour les autres et non pour vous-même.

Il existe certes des théories, des schémas reconnus, et des modèles établis, mais en définitive tous s’adaptent à l’envergure du projet. Selon les problématiques identifiées ou les objectifs annoncés, les applications diffèrent.

 

Apporter une « bonne expérience » à ses utilisateurs est avant tout une démarche empirique. Elle s’opère autour d’un quatuor simple : Rechercher – Définir – Concevoir – Vérifier. Il convient de savoir que dire, où le dire, comment le dire, et à qui le dire. Ce sont vos réflexions stratégiques, qui définies, vont vous permettre de réaliser les premières modélisations de votre site web.

 

Une façon très simple de travailler son webdesign consiste à réaliser des croquis. Il est possible de les réaliser numériquement (via Adobe XD entre autres), mais le mieux est d’utiliser bonnement une feuille blanche et un crayon à papier. Ces premières esquisses sont une bonne solution pour percevoir les grandes lignes du projet, et organiser la structure de vos contenus. Vous pouvez concevoir des maquettes fonctionnelles (avec juste vos éléments graphiques, contenus…), ou des maquettes fonctionnelles et visuelles (rajout des couleurs, formes, polices, etc.)

 

Voilà, un peu comme ça.

 

Petite précision de vocabulaire

Quand le design graphique s’applique à une conception digitale (et non « print » comme une affiche, un flyer, etc…), on nomme ce travail complémentaire « l’UI Design » pour « User Interface Design ». Si l’Ux est une réflexion d’ensemble sur l’expérience utilisateur, l’Ui peut être considéré comme sa composante, comme l’aspect graphique d’un site web. Somme toute, ce sont juste des choix graphiques cohérents avec votre identité visuelle. En clair, l’Ux organise le contenu, et l’Ui le présente (en respectant les codes visuels établis dans la charte graphique).

 

SI VOUS SOUHAITEZ VRAIMENT UNE MÉTHODOLOGIE DÉTAILLÉE :

L’apparence définitive de votre site est le résultat d’un long processus où l’utilisateur doit être central. Vous devez savoir comment vos visiteurs vont penser, agir et réagir lorsqu’ils utiliseront votre site, et avoir la certitude que ce-dernier fonctionnera comme un ensemble cohérent. Reprenons alors notre quatuor, et détaillons ses étapes :


  • RECHERCHER

    C’est votre étape stratégique. Vous connaissez le sujet et le concept de votre site web, identifiez donc sa cible, et les autres acteurs du marché.

    En tant que théâtre ou école, vous devriez avoir une vision assez nette de votre public (genre, âge, comportements, habitudes, besoins, etc..). À vous de répondre à leurs problématiques, et de savoir pourquoi, quand, et comment se rendent-ils sur votre site.

    Listez vos fonctionnalités (nécessaires et celles plus ou moins importantes pour vos utilisateurs), ainsi que vos principales thématiques de contenus. Intégrez et veillez à la cohérence de l’ensemble de vos outils de communication (réseaux sociaux, newsletter, applications…). En clair, qu’est-ce qu’il est possible de faire ou non selon vos moyens, temps et ressources.

  • DÉFINIR

    Ajustez vos idées en fonction de vos recherches. Faîtes une synthèse globale du marché et de votre audience pour réussir à déterminer vos objectifs et votre « valeur ajoutée ».

    Organisez vos informations, et commencez à imaginer le parcours de vos utilisateurs. Combien de pages sont nécessaires ? Où seront-elles accessibles ? Définissez les différents formats et fonctions de vos contenus. Intégrez dès à présent des réflexions autour de votre référencement.

  • CONCEVOIR

    C’est l’heure des plans et des maquettes. Prenez vos grands « blocs » de contenu et agencez-les entre eux. Vous dressez les premières ébauches de votre site Internet. Son squelette prend forme. Pensez hiérarchie, cohérence et lisibilité.

    Commencez dès à présent à recherchez des retours auprès de vos utilisateurs. Entrez progressivement dans la phase de modélisation: vous créez concrètement votre site web, riche de toutes ces réflexions précédentes.

    Puis apportez un peu de design graphique pour donner cœur et corps à votre ossature. Votre identité doit ressortir. Quelle est l’ambiance de votre site (détendu, poétique, solennelle, engagée, éducative, complice, institutionnelle, etc..) ? Ajoutez des couleurs, typographies et des transitions pour harmoniser le tout.

  • VÉRIFIER

    Lancer votre production de contenus (sur votre blog ou sur vos réseaux sociaux). Vérifier en continu les performances de votre site (SEO & UX). Faites régulièrement des tests utilisateurs et soyez attentifs à l’évolution des normes et pratiques en vigueur sur Internet.

 

 

Ne soyons pas dupe non plus

Bien nombreux sont les sites web construits par des systèmes où les éléments visuels et interactifs sont préconçus. Le webdesign devient alors une affaire d’agencement, et non plus de conception. Cette-dernière est remplacée par le choix de modèles et de styles graphiques au plus proche de votre identité, un travail bien souvent intuitif. Si ces outils de création de site peuvent être quelques fois limités, ils ne sont pas contradictoires avec un processus d’UX design.

 

3. Évaluations

L’expérience utilisateur s’examine principalement sur 2 axes, l’ergonomie et l’émotion, desquels découlent différents critères d’évaluations :

  • Un site web est avant tout utile et efficient.
    L’utilisateur doit clairement comprendre ce qu’il peut faire, et comment peut-il le faire. Sa prise en main doit être facilitée et intuitive. De plus, une interface doit être accessible pour tous, handicap compris, et dans n’importe quelle situation. Son contenu doit générer de la valeur et être aisément atteignable.
  • Un site web est avant tout capable de susciter des émotions.
    Son interface peut impressionner, donner envie, être rassurante, stimulante, ludique, réconfortante, etc… L’utilisateur doit se sentir en confiance ; son aspect et son contenu doivent être crédibles à ses yeux. C’est un gage de fidélité.

L’Ux requiert un long travail de recherche et d’étude. Il faut comprendre les attentes, les comportements et les ressentis de l’utilisateur lors de son voyage parmi vos outils de communication. Prenez en compte de ce qu’il vit avant et après l’interaction avec votre service. Si vous êtes capable de segmenter son parcours, vous pourrez agir de manière concrète pour améliorer son expérience.

 

Au fond, le parallèle est assez simple. Prenez l’ouvreur d’un théâtre qui se doit d’être avenant, souriant et disponible pour les spectateurs. Il est l’un des visages du théâtre, et les mêmes adjectifs s’appliquent pour un site web. Le parcours de vos spectateurs commencent dès l’instant où ils ont l’envie d’aller voir un spectacle, jusqu’au moment où ils quittent la salle.

 

DIFFÉRENTS PRINCIPES D’UX À APPLIQUER

 

Plusieurs lois régissent cette discipline. L’excellent Laws of UX (en anglais) en théorise vingt et une, et si je vous invite à en prendre connaissance, sachez qu’il est malgré tout superflu d’atteindre un tel degré de maitrise. De plus, concevoir une expérience utilisateur correcte est rarement le travail d’une seule personne, mais la mission de toute une équipe. À notre niveau, seules quelques recommandations et astuces sont suffisantes pour accompagner le design de votre site Internet.

 

1. Soyez clair dans vos propos et sur les informations transmises

Si un internaute ne comprend pas le fonctionnement ou le message d’un site web, il le quitte en moins de 15 secondes. Évitez donc les actions multiples sur une même page (plusieurs formulaires, plusieurs appel à l’action, etc…) et faîtes respirer votre contenu.

Pour fluidifier votre interface, pensez par groupements : quels sont les éléments qui s’assemblent, et ceux qui ont besoin d’être indépendants et isolés. Vous pouvez les distinguer soit par leur localisation (les éloigner pour signifier leur différence), soit en appliquant des formats, tailles, ou couleurs différentes.

 

Une représentation schématique. (© Uxmisfit) Idéalement, restez aux alentours d’un maximum de sept groupements de contenus, par page.

 

Présentez, de préférence directement sur votre page d’accueil, une « proposition de valeur ». À l’image d’un slogan, c’est une phrase ou une formule présentant votre « valeur ajoutée ». Elle peut se transmettre textuellement ou visuellement. Si vous êtes, par exemple, une école de théâtre se différenciant par des prix, un volume horaire important, une méthode particulière, ou de célèbres intervenants, ce sont ces informations qui vous définissent, et qui en définitive aident à la diffusion de votre activité. Dans le cadre d’un théâtre, la programmation et les spectacles en cours sont déjà l’essentiel, mais une démarche politique, une histoire particulière, ou de jeunes créations peuvent être perçus comme une « proposition de valeur ».

 

2. Pensez toujours aux buts de l’utilisateur

Prenez de la distance, et gardez à l’esprit le parcours de vos visiteurs :

  1. Comment et où rentre-t-il en contact avec mon site ?
  2. Quelles étapes doit-il traverser pour les informations qu’il recherche ?
  3. Est-ce qu’il a atteint son objectif ?
  4. Qu’inspire mon site web (émotions, identité, etc…) ?
  5. Est-ce qu’il a eu la meilleure expérience possible ?

Soyez précautionneux, l’utilisateur doit se sentir maitre de son environnement. Il n’est ni bloqué, ni contraint et peut annuler ou revenir sur une action. L’interface réagit à ses demandes. S’il souhaite par exemple réserver des places de théâtre en ligne, le système doit lui fournir un retour visuel de confirmation. Évitez les pop-up intrusives. De plus, tous les éléments interprétés par l’utilisateur doivent être explicites. Chaque élément (pages, menus, médias, icones, textes) doit être catégorisé et libellé avec finesse. Il doit être capable de savoir ce qui se cache derrière un bouton, une icône, le titre d’une rubrique ou l’intitulé d’un lien hypertexte.

 

3. Limitez le nombre de clics pour atteindre une page web

En réduisant les obstacles qu’ils pourraient rencontrer, vous simplifiez les parcours de vos visiteurs, et leur facilité d’apprentissage en découvrant votre site. C’est par ailleurs un travail corolaire au référencement naturel, puisqu’en réduisant la profondeur d’une page vous optimisez également son indexation.

De même, indiquez à l’utilisateur où il se trouve et laissez le menu accessible à chaque endroit. Placez des titres et présentez votre contenu pour ne pas perdre votre public. Votre navigation doit répondre aux questions suivantes : Où suis-je sur le site ? D’où je viens ? Où puis-je aller ensuite ?

 

Bon, l’alexandrin est un peu martyrisé, mais vous saisissez la corrélation.

 

4. Aérez votre mise en page et préférez les espaces vides

Jouer sur la taille et la couleur de vos éléments (menus, boutons, formulaires, médias…) permet d’établir une hiérarchie visuelle. Vous apportez ainsi cohérence et fluidité entre vos associations graphiques. Soyez concis, et n’hésitez pas à supprimer les éléments inutiles pour limiter un effet d’encombrement visuel.

Le design graphique a son importance pour susciter des émotions et vos choix sont déterminants. Outre vos éléments visuels et vos animations (apparitions en fondu, en diapositive, au survol d’une souris, etc…), vous pouvez concevoir toute votre interface sur la base d’un sentiment. Par exemple, un processus de réservation de places, souvent banal et mécanique, pourrait être plus ludique et engagé. C’est une vision à long terme qui s’étudie en accord avec votre contenu et votre identité.

 

5. N’oubliez pas l’importance du responsive design

Un site web doit être accessible. Il doit s’adapter automatiquement à l’outil de l’utilisateur, quelle que soit la dimension de son écran (ordinateur, mobile, tablette…). Les différents boutons, liens ou zones de toucher doivent être correctement dimensionnés et espacés. Il faut les rendre intuitivement « cliquable ».

Vérifiez également si votre site est compatible avec tout les navigateurs, s’il s’affiche correctement dans toutes les résolutions et si vos images ne sont pas pixélisées.

Pour travailler efficacement votre responsive design, vous pouvez inverser ce processus : commencez directement à designer pour un format mobile, et adaptez-le ensuite à de plus grands écrans. Selon votre projet et vos moyens, vous pourriez même être tenté de mettre en place tout un tas de « micro-interactions » : une vibration en appuyant sur un bouton, une confirmation sonore, une navigation par le mouvement (changer de contenu en allant à gauche ou à droite par exemple), etc.

 

6. The Serial Effect

Faute d’une traduction française satisfaisante, le « Serial Effect » (inventé par le philosophe allemand Herman Ebbinghaus) est un effet psychologique décrivant comment la position d’un élément dans une séquence affecte sa mémorisation. L’Ux design est très friands de ces nombreux concept cognitifs, et en complément des liens précédents, je vous invite à la lecture de « Psychology in Design » si vous souhaitez d’autres exemples visuels.

Deux effets principaux sont impliqués dans le Serial Effect :

  • L’effet de primauté : les éléments présentés au début d’une liste sont mémorisés avec une plus grande précision que ceux du milieu.
  • L’effet de récence : les éléments présentés à la fin d’une liste sont également plus susceptibles d’être mieux retenu que ceux du centre.

En d’autres termes, on se rappelle du premier et du dernier, mais non du peloton. On mémorise A et C, mais non B. Plus une liste d’informations est longue, plus elle exerce une pression considérable sur nos ressources attentionnelles et sur notre système de mémoire à court terme.

 

 

 

De façon plus concrète, c’est une aide pour hiérarchiser vos informations. Si vous organisez le contenu d’une page web ou d’une liste, mettez l’accent au début et à la fin, tout en laissant le moins impactant au milieu. Évitez la surcharge d’informations, et ne faîtes pas de listes trop longues (dans l’idéal, un maximum de sept).

 

7. Ne réinventez pas la roue à chaque fois

Soyez certes créatif, mais à moins de confier cette tache à un professionnel compétent, évitez les sites insolites et décalés. Restez sur des motifs (ou « patterns » en anglais) identifiables. À chaque fois qu’un utilisateur découvre un nouveau site web, il analyse et apprend à interagir avec son interface. Facilitez-lui cette tache en respectant certaines règles implicites et modèles établis, comme l’emplacement des menus ou l’apparence d’un formulaire.

Nombreuses sont les interfaces abusant de cette méthode, incitant l’utilisateur à acheter un produit, ou à réaliser une action qui n’est pas dans son intérêt. Ce sont des « dark patterns », alors n’hésitez pas à cracher et à piétiner ces perfides nuisibles.

 

8. Testez en continu votre design

Dans leur travail, les Ux Designer font régulièrement appel à des groupes de discussions, mais c’est une démarche onéreuse. À notre échelle, montrez plutôt votre site à des amis ou collègues, et laissez-les maitres de la souris. Nul besoin de rameuter le Tout-Paris, puisque selon une étude de Jakob Nielsen (célèbre expert en ergonomie informatique), seuls 5 utilisateurs testés sont suffisants pour déceler au moins 80% des problèmes d’utilisabilité. Le but d’un test n’est pas de prouver, mais de mettre en évidence certains problèmes, et des pistes d’améliorations pour votre site web.

Laissez l’internaute se débrouiller pour étudier au mieux ce qui accroche son regard, et où clique-t-il en priorité. Posez-lui foule de questions, mais gardez à l’esprit que bien souvent, les utilisateurs ne savent pas ce qu’ils veulent. Prêtez donc attention à ce qu’ils font, avant d’écouter ce qu’ils disent.

Vous pouvez mesurer les résultats de vos tests par différents critères :

  • Efficacité : L’utilisateur a-t-il compris comment utiliser votre site ? A-t-il bien atteint ses objectifs ?
  • Efficient : L’utilisateur a-t-il bien atteint ses objectifs en un délai correct et en un minimum d’effort ?
  • Satisfait : Combien de remarques positives et négatives l’utilisateur a-t-il émis durant le test ?
  • Sécurité : Le site fonctionne-t-il correctement ? L’utilisateur s’est-il trompé, puis corrigé rapidement de façon autonome, en naviguant sur votre interface ?

 

POUR ALLER PLUS LOIN :

Outre les entretiens et les questionnaires, différentes méthodes de test existent. Sans dresser une liste complète, voici les plus accessibles :

  • Il vous est possible de présenter différentes versions de votre site à divers échantillons d’utilisateurs, afin d’identifier la plus attrayante et performante. Dans le jargon d’un Ux Designer, ce procédé est appelé « l’a/b Testing » (on test une version A et une version B). C’est une méthode idéale lors d’une refonte de site.
  • Plus simplement, vous pouvez utiliser la technique des 5 secondes, où vous affichez votre site sur cette durée, avant de récolter et d’analyser les premières impressions de vos compères. C’est une bonne solution pour comprendre ce qui capte l’attention rapidement.
  • Enfin, si vous n’avez pas d’amis sous la main, ou sur un site opérationnel depuis longtemps, vous pourriez être tenté d’étudier à distance les comportement de vos utilisateurs. Par exemple, il arrive qu’un visiteur « scan » une page plus qu’il ne la lise. C’est une problématique courante qui peut se résoudre en analysant les déplacements de son regard sur une page et là où il se concentre. Vous obtenez alors des « heatmaps » qui rapportent également les mouvements, scroll et clics d’une souris. Hotjar et Crazy Egg sont les outils les plus réputés dans ce domaine, même si leur version gratuite reste assez limitée. Utile pour réajuster la disposition de vos éléments dans des zones plus pertinentes.

Une « heatmap » de Wikipédia. Plus les zones sont chaudes, plus le taux de clic est élevé.

 

 

Si l’on devait synthétiser très simplement la pensée de l’Ux Design, elle reviendrait à créer un espace où l’utilisateur se sent assez en confiance pour y inviter ses amis et d’autres personnes. Chaque idée et fonctionnalité doivent tendre vers cette sainte « expérience utilisateur ». Or si cette dernière est certes essentielle, n’oublions pas que nous sommes entourés de produits et de services conçus avant tout pour une « tache à accomplir ». En d’autres termes, mieux vaut un produit moche mais fonctionnel, que beau et impraticable.

Prenez de la distance sur votre projet et cherchez l’aval de vos proches. Il est en effet courant de partir d’une idée précise, à priori alléchante, mais qui au résultat ne correspond pas à votre audience. Plus vous balisez en amont vos réflexions, plus les caractéristiques de votre design seront adaptées et encadrées.

À la différence des plateformes comme Facebook ou Youtube, vous contrôlez entièrement le fond et la forme de votre site web. Vous pouvez user de cet avantage en le personnalisant au maximum, tout en veillant à son ergonomie. Par exemple, intégrez une narration ou inspirez-vous de jeux vidéos pour créer des systèmes de récompenses (type exploration, progression, etc…)

Au fond, le site web n’est qu’un outil parmi d’autres. Selon votre activité, et votre degré d’implication dans votre communication digitale, il peut plus ou moins vous servir. À vous de décider s’il nécessite autant d’attention. 🌈

 

Benjamin Profil édito BouletCorp

ÉCRIT PAR : Benjamin

Double parcours en communication et théâtre, je passe mon temps à étudier et à produire des contenus pour Parlons Théâtre. On peut se croiser à la bibliothèque, au théâtre, ou autour d’un verre.

0 réponses

Laisser un commentaire

Rejoindre la discussion?
N'hésitez pas à contribuer !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *