UA 03
Important de maintenir une exp utilisateur uniforme et prévisible dans l’ensemble de l’interaface.
Typographie : si vous utilisez une police et une palette de couleurs spécifiques sur une page ou une section de votre application, mais que vous changez de police et de palette de couleurs sur une autre page sans raison apparente, cela peut désorienter l’utilisateur.
Couleur : si vous utilisez une couleur spécifique pour signaler des actions interactives (par exemple, tous les liens sont bleus), mais que vous utilisez soudainement cette même couleur pour des éléments non interactifs, cela peut semer la confusion.
Libéllé : imaginons que vous ayez un bouton « Envoyer » dans un formulaire de contact, et qu’ailleurs sur le site, vous utilisiez le terme « Soumettre » pour une action similaire : cette incohérence terminologique peut être déroutante pour l’utilisateur.
Disposition : si la navigation est en haut de la page sur une partie du site et en bas de la page sur une autre, cela peut désorienter l’utilisateur.
Convention d’interaction : si un double clic sur un élément produit une action sur une page, mais qu’un double clic sur un élément similaire sur une autre page ne produit pas d’action (ou une action différente), cela peut frustrer l’utilisateur.
Icônes : si une icône de « corbeille » est utilisée pour supprimer un élément dans une partie de l’interface, mais qu’une icône de « croix » est utilisée pour la même action dans une autre partie, cela peut semer la confusion. Les utilisateurs doivent réapprendre ce que signifie chaque icône à chaque fois, ce qui n’est pas une expérience utilisateur optimale.:
Hiérarchie visuelle
Les principes de la hiérarchie visuelle aident à guider l’oeil de l’utilisateur à travers l’interface de manière efficace et intuitive. L’objectif est de mettre en évidence les éléments importants, faciliter la lecture et guider l’utilisateur dans sa navigation.
Échelle et Taille : les éléments les plus importants doivent être plus grands pour attirer l’attention et structurer l’information.
Couleur et Contraste : les couleurs vives et les contrastes élevés attirent l’attention de l’utilisateur. Utilisez ces éléments pour mettre en évidence les informations importantes ou les boutons d’action.
Espace blanc (ou négatif) : utiliser l’espace blanc autour d’un élément pour l’isoler et attirer l’attention. Cela crée un effet de « respiration » autour des éléments importants.
Positionnement et Disposition : la position d’un élément sur la page peut affecter sa visibilité. Par exemple, nous lisons de gauche à droite et de haut en bas, donc les éléments placés en haut ou à gauche ont tendance à être vus en premier.
Typographie : utiliser différents styles de police (gras, italique, majuscule) pour différencier les titres, les sous-titres et le corps du texte.
Proximité : les éléments liés entre eux doivent être groupés ensemble, ce qui aidera l’utilisateur à comprendre leur relation et leur hiérarchie.
Hiérarchie visuelle
Les principes de la hiérarchie visuelle aident à guider l’oeil de l’utilisateur à travers l’interface de manière efficace et intuitive. L’objectif est de mettre en évidence les éléments importants, faciliter la lecture et guider l’utilisateur dans sa navigation.
Échelle et Taille : les éléments les plus importants doivent être plus grands pour attirer l’attention et structurer l’information.
Couleur et Contraste : les couleurs vives et les contrastes élevés attirent l’attention de l’utilisateur. Utilisez ces éléments pour mettre en évidence les informations importantes ou les boutons d’action.
Espace blanc (ou négatif) : utiliser l’espace blanc autour d’un élément pour l’isoler et attirer l’attention. Cela crée un effet de « respiration » autour des éléments importants.
Positionnement et Disposition : la position d’un élément sur la page peut affecter sa visibilité. Par exemple, nous lisons de gauche à droite et de haut en bas, donc les éléments placés en haut ou à gauche ont tendance à être vus en premier.
Typographie : utiliser différents styles de police (gras, italique, majuscule) pour différencier les titres, les sous-titres et le corps du texte.
Proximité : les éléments liés entre eux doivent être groupés ensemble, ce qui aidera l’utilisateur à comprendre leur relation et leur hiérarchie.
Affordance
Les affordances sont des signaux dans l’interface utilisateur qui suggèrent comment un élément peut être utilisé.
Une icône «poubelle» dans un logiciel suggère la suppression. L’icône de poubelle qui suggère la suppression « dit » à l’utilisateur comment l’utiliser juste par son apparence. Cependant, le concept d’affordance dépasse le simple cadre de la bonne illustration d’une fonction et de sa compréhension. Il intègre aussi la prise en compte des conventions et de l’intuition. Lorsqu’il est mal appliqué, le concept d’affordance peut entraîner une confusion et une frustration significatives pour les utilisateurs.
Liens texte qui ne ressemblent pas à des liens : dans les interfaces web, il est courant que le texte souligné ou de couleur différente soit un lien. Cependant, si le texte ressemble à du texte normal mais est en réalité un lien, cela peut être une affordance ratée. De même, si du texte ressemble à un lien (par exemple, s’il est souligné ou coloré) mais n’est pas interactif, cela peut également être source de confusion.
Boutons qui ne ressemblent pas à des boutons : parfois, les concepteurs peuvent essayer de faire preuve de créativité avec le design de leurs boutons, mais si un bouton ne ressemble pas à un bouton (c’est-à-dire qu’il n’a pas l’air pressable), les utilisateurs peuvent ne pas réaliser qu’ils peuvent interagir avec lui.
Affordance conditionnelle et négative
L’affordance conditionnelle fait référence à une interactivé conditionnelle. Par exemple : un bouton qui s’active seulement après le remplissage correct des champs « login » et « password », Cette bonne pratique guide l’utilisateur à accomplir des actions dans un ordre spécifique et assure la complétude des informations requises.
L’affordance négative fait référence à un design qui donne une fausse indication sur la manière dont un élément ou une fonctionnalité doit être utilisée, créant ainsi une confusion pour l’utilisateur et une expérience utilisateur dégradée.
Soyez vigilant : parfois les terme « affordance négative » et « affordance conditionnelle » sont employés avec ambiguïté. 9
Accessibilité
L’accessibilité implique de rendre l’interface utilisable par tous les utilisateurs, quelles que soient leurs capacités. Cela peut impliquer de concevoir pour les utilisateurs ayant des déficiences visuelles, auditives, motrices ou cognitives.
Utilisation de couleurs contrastées : il est important d’utiliser des couleurs contrastées pour faciliter la lecture et la compréhension du contenu. Les personnes atteintes de troubles de la vision des couleurs ou ayant une faible vision peuvent avoir des difficultés à distinguer certaines combinaisons de couleurs.
Taille de la police : la taille de la police doit être suffisamment grande pour être facilement lisible. Il peut être utile d’offrir une option pour augmenter la taille du texte pour ceux qui en ont besoin.
Utilisation de sous-titres et de descriptions audios : pour les personnes sourdes ou malentendantes, il est utile d’ajouter des sous-titres aux vidéos. Pour les personnes aveugles ou malvoyantes, il peut être utile d’ajouter des descriptions audios aux visuels.
Navigation au clavier : il est essentiel de garantir que toutes les fonctionnalités du site Web ou de l’application peuvent être utilisées à l’aide d’un clavier uniquement, pour les personnes qui ne peuvent pas utiliser une souris ou un écran tactile.
Structure claire et balisage sémantique : une structure claire et des balises appropriées aident les lecteurs d’écran à interpréter correctement le contenu, ce qui est crucial pour les utilisateurs malvoyants.
Éviter les animations clignotantes : les animations clignotantes peuvent provoquer des crises chez les personnes atteintes d’épilepsie photosensible.
Fournir des alternatives textuelles : toutes les images doivent avoir un texte alternatif, qui peut être lu par un lecteur d’écran.
Composants d’interface 1/2
Les composants d’interface sont les éléments de base de l’interface utilisateur. Chaque composant a un rôle spécifique et doit être conçu de manière à être facilement compréhensible et utilisable.
Boutons : utilisés pour des actions spécifiques, comme soumettre un formulaire ou ouvrir une nouvelle page.
Champs de texte : permettent aux utilisateurs d’entrer des informations textuelles.
Listes déroulantes : permettent aux utilisateurs de sélectionner une option parmi plusieurs proposées.
Cases à cocher : permettent aux utilisateurs de sélectionner une ou plusieurs options parmi un ensemble.
Boutons radio : permettent aux utilisateurs de sélectionner une seule option parmi un ensemble.
Curseurs : permettent aux utilisateurs de sélectionner une valeur le long d’un continuum.
Icônes : utilisées pour représenter des actions, du contenu ou des fonctions spécifiques.
Formulaires : composés de plusieurs éléments d’entrée, ils recueillent des informations de l’utilisateur.
Menus : permettent aux utilisateurs de naviguer dans l’interface.
Burger Menu : l’icône menu Hamburger désigne un mode de présentation ramassé du menu de navigation.
Composants d’interface 2/2
Onglets : permettent de naviguer entre plusieurs vues ou sous-pages.
Cartes : utilisées pour représenter des informations dans un format facile à comprendre.
Barres de progression / spinner : indiquent le statut d’un processus en cours.
Tooltips : fournissent des informations supplémentaires sur une fonction ou un bouton lorsqu’un utilisateur passe la souris dessus.
Notifications : informations temporaires ou persistantes sur l’état du système ou des actions de l’utilisateur.
Boites de dialogue modales : petites fenêtres qui s’affichent par-dessus le contenu pour attirer l’attention de l’utilisateur et demander une action.
Filtres : aident à trier et organiser le contenu.
Pagination : permet de naviguer à travers plusieurs pages de contenu.
Barre de recherche : permet à l’utilisateur de chercher du contenu spécifique.
Breadcrumb (Fil d’Ariane) : indique la localisation actuelle de l’utilisateur dans la structure de navigation.
Tableaux : présentent des informations dans un format structuré de lignes et de colonnes.
Les Call To Action (CTA)
Les Call-to-Action, ou CTA, ou «appel à l’action» est une invite qui guide l’utilisateur vers l’action que vous voulez qu’il effectue. Il peut s’agir d’un texte, d’un bouton, d’une image, d’une icône ou de tout autre type de composant d’interface.
Clarté : le libellé de votre CTA doit être clair et précis. Il doit indiquer exactement ce qui va se passer lorsque l’utilisateur clique sur le bouton. Par exemple, « Télécharger le livre blanc » est un bon CTA car il est clair sur ce qui va se passer. Un mauvais exemple pourrait être « Cliquez ici » – cela ne donne pas suffisamment d’informations sur ce qui va se passer ensuite.
Visibilité : un CTA doit être bien visible. Il doit se démarquer du reste de la page par le contraste des couleurs ou des formes. Par exemple, un bouton CTA orange sur un fond bleu est bien visible. Une erreur courante est de placer le CTA dans une zone encombrée où il est difficile à voir.
Positionnement : l’emplacement du CTA est également crucial. Il doit être placé là où il est facile pour les utilisateurs de le trouver. Généralement, cela signifie qu’il est préférable de le placer « au-dessus de la ligne de flottaison » (la partie de la page visible sans défilement). Un CTA mal placé pourrait être caché en bas d’une longue page, où l’utilisateur pourrait ne jamais le voir.
Taille : le CTA doit être assez grand pour être facilement cliquable, surtout sur les écrans tactiles. Cependant, il ne doit pas être si grand qu’il semble envahir la page ou distraire de l’information importante. Un exemple de mauvaise pratique serait un CTA si petit que les utilisateurs ont du mal à cliquer dessus.
Indication d’action : utilisez des verbes d’action pour rendre votre CTA dynamique et engageant. « Commander maintenant », « Inscrivez-vous gratuitement », « Démarrer l’essai » sont de bons exemples. Un CTA avec un texte passif comme « Information » ou « Plus de détails » pourrait ne pas inciter à l’action.
Éléments de l’interface
17
Pattern UI
Les patterns UI sont des ensembles d’éléments interactifs répétitifs qui aident à résoudre des problèmes d’interaction courants. Les patterns UI sont des solutions réutilisables à des problèmes de design communs.
Navigation principale : c’est la façon dont les utilisateurs naviguent sur un site web ou une application. Les patterns courants incluent le menu déroulant, le menu latéral (aussi appelé menu « hamburger » en raison de son icône à trois lignes) et le menu de navigation en pied de page.
Formulaire de recherche : Présent sur presque tous les sites web et applications, permet aux utilisateurs de chercher directement des informations ou des fonctionnalités spécifiques.
Cartes d’information : ce sont des conteneurs d’informations utilisés pour regrouper des informations associées. Vous les voyez souvent dans les galeries d’images, les listes de produits, etc.
Listes déroulantes : elles permettent aux utilisateurs de choisir parmi une liste d’options sans prendre beaucoup de place sur l’interface.
Éléments de l’interface
Profusion et conventions
Évitez d’utiliser trop de patterns différents sur une même page. Cela peut dérouter les utilisateurs.
Ne forcez pas un pattern à fonctionner dans une situation où il n’est pas approprié. Veuillez respecter les conventions courantes. Les utilisateurs s’attendent à certaines choses, comme un logo cliquable qui les ramène à la page d’accueil.
19
L’utilisation d’images et d’icônes est une partie essentielle du design d’interface utilisateur pour représenter les actions, améliorer l’esthétique ou guider l’utilisateur.
Choix approprié de l’icône : il est essentiel de choisir des icônes qui sont à la fois intuitives et familières pour l’utilisateur. Par exemple, une icône de maison est généralement reconnue comme un lien vers la page d’accueil.
Cohérence visuelle : Assurez-vous que toutes vos images et icônes sont cohérentes en termes de style, de taille et de couleur. Par exemple, si vous utilisez un ensemble d’icônes plates et minimalistes, évitez de mélanger ces icônes avec des icônes détaillées et réalistes.
Optimisation des images : Afin d’assurer des temps de chargement rapides et une expérience utilisateur fluide, il est crucial d’optimiser les images utilisées dans l’interface.
Raconter une histoire : les images peuvent être utilisées pour créer une narration visuelle et émotionnelle qui peut aider à engager les utilisateurs.
Testez vos icônes : Même si une icône semble intuitive pour vous, cela ne signifie pas qu’elle le sera pour vos utilisateurs. Testez vos icônes auprès de vos utilisateurs cibles pour vous assurer qu’elles sont compréhensibles.
Icônes adaptatives : Avec l’émergence de nombreux dispositifs différents avec différentes résolutions d’écran et densités de pixels, il est important de s’assurer que vos icônes sont adaptatives et peuvent être mises à l’échelle pour une variété de tailles d’écran.
Cohérence de la colorimétrie et du style artistique : que vous utilisiez des photos ou des illustrations, il est crucial de maintenir une cohérence dans la colorimétrie, la palette couleur et le style artistique.
Rich Media
Le terme « Rich Media » se réfère à l’utilisation de contenu, comme les vidéos, les audios, les animations et tout autre type de contenu qui va au-delà du texte et des images statiques.
En publicité numérique, le « Rich Media » désigne une annonce qui intègre des fonctionnalités avancées telles qu’une vidéo, du son ou d’autres éléments qui incitent les internautes à interagir avec le contenu.
Les vidéos et les motion designs. On parle ici d’images en mouvement nécessitant généralement un lecteur vidéo software. D’un point de vue contenu, on s’accorde à les différencier : « La vidéo capture des moments réels, tandis que le motion design anime des éléments graphiques». D’un point de vue technique, on peut aussi rattacher la vidéo à son format : on réalise donc par exemple un motion design que l’on publiera sous forme de vidéo.
Les audios peuvent être utilisés pour fournir des informations, de la musique d’ambiance, ou des commentaires sonores. Les contenus audios, tels que les podcasts ou les voix off, apportent une information sonore, la musique, elle, apporte une dimension émotionnelle.
Éléments de l’interface
Contenu intrusif ou invasif
Attention cependant à l’intrusion ou l’envahissement qui, au sein d’une interface utilisateur peut gravement nuire à l’expérience utilisateur, en provoquant de la frustration, de l’irritation et en fin de compte en conduisant les utilisateurs à quitter le site ou l’application.
L’utilisation abusive de « Rich Media » en auto play peut être particulièrement coupable de cette intrusion.
Systèmesde grille
Les grilles sont des outils essentiels pour organiser l’interface et assurer une disposition cohérente des éléments. Elles favorisent l’alignement les éléments, l’utilisation optimale de l’espace et à facilitent la mise en page selon les terminaux.
Alignement et cohérence : l’utilisation d’une grille aide à aligner les éléments sur la page et assure la cohérence entre différentes parties de l’interface ou entre différentes pages. Cela crée une expérience plus cohérente pour l’utilisateur et facilite la navigation dans l’interface. Par exemple, sur un site web, une grille peut être utilisée pour aligner les en-têtes, les blocs de texte, les images et les autres éléments de manière cohérente sur différentes pages.
Utilisation de l’espace : une grille aide à définir comment l’espace est utilisé sur la page. Elle permet de déterminer où les éléments doivent être placés et comment l’espace doit être réparti entre eux. Par exemple, une grille peut être utilisée pour définir la largeur des colonnes de texte, la taille des images et l’espace entre les différents éléments et la marge autour de chaque colonne (appelée « gouttière »).
Mise en page responsive : les grilles sont essentielles pour la création de mises en page responsive. Une grille flexible permet à la mise en page de s’adapter à différentes tailles d’écran, en redimensionnant et en réorganisant les éléments de manière efficace. Par exemple, une grille à 12 colonnes peut être divisée en plusieurs configurations (3 colonnes sur un grand écran, 2 colonnes sur un écran moyen, 1 colonne sur un petit écran).
Grille et System Design
Les différents types de grille
La grille à colonnes, souvent divisée en douze pour une grande flexibilité, est la plus couramment utilisée.
La grille de base permet un alignement horizontal et vertical des éléments, tandis que la grille modulaire, souvent utilisée dans les magazines, utilise des modules répétitifs pour une structure plus complexe.
La grille hiérarchique attribue différentes tailles de sections basées sur l’importance des éléments, favorisant une hiérarchie visuelle claire. Pour utiliser une grille, vous pouvez commencer par définir le nombre de colonnes
Design Systems
Un système de design est une collection cohérente de composants d’interface qui peuvent être réutilisés à travers un produit ou une gamme de produit tout en accélérant le processus de conception.
Material Design de Google : Lancé en 2014, le Material Design est le système de design de Google, utilisé dans tous ses produits, de Gmail à Android. Le Material Design est connu pour ses directives détaillées sur l’animation, le style, la disposition, les composants et les modèles. Il est apprécié pour sa flexibilité, permettant aux designers de créer une variété de styles visuels tout en maintenant une cohérence et une usabilité. Son approche physique de la conception (c’est-à-dire la métaphore du « matériau » comme feuille de papier en trois dimensions) offre un moyen intuitif de comprendre comment les éléments doivent interagir et se comporter.
Apple Human Interface Guidelines : Le système de design d’Apple pour iOS est bien connu pour son esthétisme minimaliste et son attention aux détails. Il est conçu pour être élégant, moderne et propre, tout en étant intuitif et facile à utiliser. Les directives d’interface humaine d’Apple couvrent une variété de sujets, y compris la disposition, la typographie, l’animation, l’icône et la conception de l’interface.
IBM Carbon Design System : Le système de design de IBM, Carbon, est un système de design pour produits numériques. Il contient des composants, des modèles et des directives de design qui favorisent la cohérence et la réutilisabilité à travers les produits. Carbon est connu pour sa communauté de contributeurs active et son engagement envers l’accessibilité.
Ant Design : Système de design open source pour les applications d’entreprise, Ant Design est largement utilisé pour les applications web basées sur React. Il est apprécié pour ses composants de haute qualité, ses directives de design bien pensées et son support actif.
Fournir des choix clairs : les utilisateurs devraient toujours avoir une idée claire des actions qu’ils peuvent entreprendre. Cela peut être réalisé en utilisant des boutons, des menus et d’autres éléments d’interface pour afficher clairement les options disponibles.
Permettre aux utilisateurs de revenir facilement sur leurs actions : les utilisateurs devraient toujours être en mesure d’annuler ou de modifier leurs actions. Par exemple, si un utilisateur supprime accidentellement un élément, il devrait y avoir une option facile à trouver pour le récupérer.
Éviter les comportements inattendus : les actions de l’utilisateur devraient toujours entraîner les résultats attendus. Si un utilisateur clique sur un bouton pour envoyer un e-mail, par exemple, il ne devrait pas se retrouver soudainement sur une page de produit.
Ne pas modifier l’interface sans le consentement de l’utilisateur : les changements dans l’interface utilisateur, tels que les mises à jour de l’interface ou l’ajout de nouvelles fonctionnalités, devraient toujours être accompagnés d’une notification claire et la possibilité de refuser ou de reporter ces changements.
Réduire les « erreurs de l’utilisateur » : une erreur est souvent due à une interface confuse plutôt qu’à une erreur de l’utilisateur. En étant clair, en prévenant les erreurs et en fournissant des messages d’erreur utiles, on peut minimiser la frustration de l’utilisateur.
Les types de plateforme
La manière dont le design est abordé change en fonction de la nature du produit que ce soit un site web, une application web, une application native ou un logiciel.
Site web : un site web est une collection de pages web généralement accessibles via Internet. Les sites web sont conçus pour être consultés via un navigateur web et peuvent donc être utilisés sur une variété de dispositifs, tels que les ordinateurs de bureau, les laptops, les tablettes et les smartphones.
Application web : une application web est une application logicielle qui est hébergée sur un serveur et est accessible via un navigateur web. Les applications web mais elles offrent généralement une interaction plus riche et plus complexe, similaire à celle des applications logicielles traditionnelles.
Application native : une application native est une application logicielle conçue pour fonctionner sur une plateforme spécifique, telle qu’iOS ou Android. Les applications natives offrent une expérience plus fluide et plus intégrée car elles accèdent directement aux fonctionnalités et aux ressources du dispositif.
Logiciel : les logiciels peuvent varier largement en termes de complexité et de fonctionnalité, allant des simples éditeurs de texte aux systèmes d’exploitation complexes. Tous les logiciels ne sont pas des applications, mais toutes les applications sont des logiciels.
Compatibilité et adaptabilité
Site web ou Application ?
Pour exemple, le site web d’Amazon est accessible à tous les utilisateurs possédant un navigateur web, que ce soit sur un ordinateur de bureau, un ordinateur portable, une tablette ou un smartphone.
En parallèle, Amazon propose également une application mobile, disponible sur les plateformes iOS et Android. Pour l’utiliser, les utilisateurs doivent l’installer directement sur leur appareil mobile.
p.36
Les types de plateforme
La manière dont le design est abordé change en fonction de la nature du produit que ce soit un site web, une application web, une application native ou un logiciel.
Site web : un site web est une collection de pages web généralement accessibles via Internet. Les sites web sont conçus pour être consultés via un navigateur web et peuvent donc être utilisés sur une variété de dispositifs, tels que les ordinateurs de bureau, les laptops, les tablettes et les smartphones.
Application web : Application web : une application web est une application logicielle qui est hébergée sur un serveur et est accessible via un navigateur web. Les applications web mais elles offrent généralement une interaction plus riche et plus complexe, similaire à celle des applications logicielles traditionnelles.
Application native : une application native est une application logicielle conçue pour fonctionner sur une plateforme spécifique, telle qu’iOS ou Android. Les applications natives offrent une expérience plus fluide et plus intégrée car elles accèdent directement aux fonctionnalités et aux ressources du dispositif.
Logiciel : les logiciels peuvent varier largement en termes de complexité et de fonctionnalité, allant des simples éditeurs de texte aux systèmes d’exploitation complexes. Tous les logiciels ne sont pas des applications, mais toutes les applications sont des logiciels.
Compatibilité et adaptabilité
Site web ou Application ?
Pour exemple, le site web d’Amazon est accessible à tous les utilisateurs possédant un navigateur web, que ce soit sur un ordinateur de bureau, un ordinateur portable, une tablette ou un smartphone.
En parallèle, Amazon propose également une application mobile, disponible sur les plateformes iOS et Android. Pour l’utiliser, les utilisateurs doivent l’installer directement sur leur appareil mobile.
Les différents modes d’interaction touché, souris, clavier, voix ont chacun leurs particularités qui imposent des réflexions de conception distinctes.
L’interaction au clavier est privilégiée pour la saisie de texte, mais aussi pour la navigation rapide à travers les interfaces, notamment pour les utilisateurs à mobilité réduite.
L’interaction « touch » : à la différence de la souris n’offre pas de fonction de survol (hover), comme c’est le cas avec une souris. Cela signifie que les informations ou les actions déclenchées au survol du curseur ne fonctionnent pas dans une interface tactile.
Taille des cibles : les interfaces tactiles nécessitent des cibles plus grandes pour les doigts que les interfaces de souris. Cela peut influencer la conception globale, car elle doit être capable d’accommoder des cibles plus grandes sans sacrifier la clarté et la fonctionnalité.
Position et ergonomie : les interfaces tactiles sont souvent tenues à la main et utilisées dans une variété de positions, ce qui peut affecter l’endroit où les éléments de l’interface doivent être placés pour être facilement accessibles : c’est la zone d’interaction de pouce (ou « zone de confort)
Le feedback haptique : contrairement à un clic de souris qui fournit un feedback haptique (physique), un toucher sur un écran n’offre pas souvent ce type de feedback.
Gestes et Multi-touch : les interfaces tactiles permettent une variété de gestes, comme pincer pour zoomer, glisser pour faire défiler, ou balayer pour passer à la page suivante. Ces gestes offrent une interaction plus riche et plus nuancée que le simple clic de la souris.
L’interaction vocale : popularisé avec l’avènement des assistants virtuels comme Alexa, Siri et Google Assistant, la commande vocale vient compléter la gamme des modes d’interaction. Un des enjeux est la réduction du taux d’erreur lors de la phase de reconnaissance.
CLS : pas trop compris de quoi il s’agissait, besoin de plus d’explications
Page 3 :
Le texte doit être lisible, sur tout type d’interface, ici les textes sont trop petits empêchant la bonne lisibilité des informations.
Page 4 :
Les Couleurs sélectionnées ne sont pas lisibles du au mauvais contraste entre le fond et les couleurs du textes.
Page 5 :
Les éléments de textes doivent avoir un interlignage entre eux pour faciliter la lecture (de l’espace négatif)
Page 6 :
Hiérarchie des informations : les informations principales doivent avoir une graisse différente
Page 7 : Hiérarchie des informations, on doit pouvoir distinguer les informations essentielles d’un seul coup d’oeil sans les mélanger au informations secondaires
Page 8 : Hiérarchie des informations, nous devons distinguer le titre de la chanson de l’artiste.
Page 9 : Manque d’interlignage et l’espacement inter-paragraphe vis à vis de l’image, entrainant un problème de lisibilité de l’information
Page 10 : Dans la typographie, un orphelin (une partie de texte isolée au début ou à la fin d’un paragraphe) peut nuire à l’esthétique visuelle d’un document et rendre la lecture moins fluide en rompant l’harmonie,
la compréhension et le rythme du texte.
Page 11 : Problème de structure de l’information, l’image de gauche empêche la bonne lecture des informations dû à l’absence de textes en gras et d’icônes illustrant la partie traitée.
Page 12 : on ne comprend pas ce que l’on va supprimer du à la surcharge de texte, il faut que les informations soient claires et compréhensible d’un seul coup d’oeil
Page 13 : Trop de couleurs dans l’affichage avec un mauvais contraste, de plus la surcharge d’élément n’offre pas une bonne lisibilité des informations présentées
Page 14 : problème de hiérarchisation des informations, on ne sait pas dans quel sens il faut lire les informations, et la mise page du texte pose des problèmes de lectures
Page 15 : problème de hiérarchie des éléments, il faut que les éléments soit lus dans de manière continue, que l’utilisateur n’est pas besoin de faire des allers-retours.
Page 16 : perturbation du schéma de lecture
Page 17 : Problème de lisibilité, il faut respecter les conventions déjà mise en place pour ne pas perturber les utilisateurs et faciliter la lecture de l’information.
Le premier format « +33 6 56 78 90 00 » est plus facile à mémoriser car la séparation des chiffres en petits groupes utilise la technique de « chunking »,
qui facilite le traitement et la rétention d’informations dans la mémoire humaine.
Page 18 : Les informations sont cachées, ici il faut que l’affichage des informations soient simples à trouver et ne demande pas trop de recherches à l’utilisateur. A gauche 4 boutons, droite liste déroulante.
Page 19 : Ordre de lecture perturbée due à une lecture des éléments en zig-zag, l’affichage doit être simple à lire et compréhensible en un simple coup d’oeil.
Page 20 : La lecture en zigzag pose problème, l’interface doit être simple à lire et ne pas demander à l’utilisateur de faire des allers retours
Page 21 : Problème de hiérarchies des éléments, il faut mettre certains éléments en gras pour séparer les champs à remplir, il faut aussi espacer les champs et les informations pour offrir une meilleure lisibilité.
Page 22 : mauvaise mise en pages des éléments, il faut que l’utilisateur puisse comparer en un seul coup d’oeil les différentes offres et puisse accéder aux CTA simplement.
Page 23 : Problème d’alignement texte, il faut que le texte soit aligné du même côté en laissant de l’espace au bord de l’écran. Problème de marges
Page 24 : Problème de lisibilité des informations, il faut que l’utilisateur voit ce qu’il doit remplir comme en ayant de forts contrastes sur l’élément à remplir.
Page 25 : L’ajout d’icône est essentielle pour une lisibilité simple de l’information.
Page 26 : problème de lisibilité du au choix des couleurs, il faut que les informations se détache du fond de l’image pour offrir une bonne expérience, une bonne lisibilité.
Page 27 : Mauvais contraste avec les autres éléments visuels, les informations sont difficiles à lire et les icônes ne sont pas visibles.
Page 28 : Informations trop complexes, il faut simplifier l’affichage des informations pour l’utilisateur puisse trouver les informations nécessaires d’un seul coup d’oeil, problème de contraste, il faut séparer les éléments cliquables du background. l’alignement des titres produits pour avoir un pied d’égalité.
Page 29 : Problème de qualité d’image, il faut que les contenus images soit en bonnes définitions
Page 30 : Problème image, il faut que l’image s’affiche dans ses bonnes dimensions sans être déformées.
Page 31 : Problème d’adaptabilité du design, le design n’a pas été pensé pour du mobile et par conséquent semble difficile à lire sur l’appareil. il faut que l’interface soit pensée pour l’appareil.
Pour les mobiles l’utilisation d’un sélecteur de date et d’heure sous forme de « scroller » permet une navigation intuitive et rapide, facilitant la sélection de dates et d’heures sans le besoin de taper ou de naviguer à travers un calendrier complet. Si le choix se porte sur un calendrier, il doit être responsive.
Page 32 : Problème d’adaptabilité, la page n’a pas été pensée en responsive design et s’affiche comme sur un ordinateur, il est important de penser à adapter son interface en mobile first du à un double colonage.
Page 33 : Problème de cohérence entre la home page et les autres pages du site, il faut que le contenu garde une cohérence visuelle pour ne pas perdre l’utilisateur.
Page 34 : Il faut que l’interface soit pensée pour être utilisable par tous en sélectionnant des couleurs avec un haut contraste pour se détacher du reste, de plus des éléments visuels de la même couleur
permettent de renforcer l’information.
Page 35 : Cohérence des icônes, il faut utiliser des icônes similaires pour la cohérence de l’interface.
Page 36 : Cohérence le choix des icônes, il faut que toute les icônes soit de la même famille avec la même graisse de contour ainsi que de la même taille.
Page 37 : Cohérence sur le libellé, il faut utiliser le même libellé pour ne pas perdre l’utilisateur.
Page 38 : problème de libellé, il faut que l’on sache ce que fait chaque option avant de cliquer dessus.
Page 39 : Problème de simplicité du message d’erreur, il faut que l’utilisateur sache d’où vient le problème simplement en évitant le jargon technique.
Page 40 : Manque d’information sur le problème, il faut informer l’utilisateur du problème et lui fournir une possibilité de revenir en arrière facilement.
Page 41 : Informations trop complexe sur l’erreur, il faut informer l’utilisateur du problème et lui fournir une possibilité de revenir en arrière facilement.
Page 42 : Problème de lisibilité des informations du messages d’erreurs, on ne peut pas lier l’erreur au champ facilement.
Page 43 Il faut que les informations du message d’erreur soit liée au champ afin de faciliter la compréhension utilisateur.
Page 44 : Hiérarchisation des informations sur l’erreur, il faut que le message d’erreur soit placé après le champ.
Page 45 : Problème de hiérarchisation des informations, le CTA doit être situé après les informations nécessaires pour ne pas perturber l’interaction de l’utilisateur.
Page 46 : Le CTA doit être clair, visible, bonne taille et bien positionné pour faciliter l’interactivité.
Page 47 : Il faut que le CTA soit clair et visible, ici nous ne pouvons séparer les différents CTA.
Page 48 : Il faut que le CTA soit clair visible en se démarquant du fond.
Page 49 : Il faut que les CTA soit visible et clair en séparant les actions possibles par une hiérarchie.
Page 50 : Il faut que le CTA soit clair et placé de sorte à ce que l’on puisse l’identifier et interagir facilement avec ce dernier.
page 51 :
page 52 : Il faut renseigner l’utilisateur sur les étapes restantes lui permettant de se repérer dans le parcours d’utilisation, l’exemple à gauche ne le fais pas ce qui peut porter à confusion et peut décourager l’utilisateur.
Les barres de progression dans les scénarios de shopping, de remplissage de formulaires et de KYC (Know Your Customer) améliorent l’expérience utilisateur en fournissant une indication visuelle de la progression, réduisant ainsi l’incertitude et augmentant la patience de l’utilisateur.
Page 53 : Il faut que les CTA soit d’une taille assez importante pour être visible et utilisable par un utilisateur, ici l’icône est trop petite et non identifiable.
Page 54 : Il faut que le CTA soit visible et facilement utilisable, ici les CTAs sont trop proches ce qui pose problème pour l’interactivité en créant un risque de miss click.
les boutons radios sont ronds, vous pouvez cocher les trois, les carrés signifie un choix unique
Compte tenu de la taille moyenne du doigt de l’utilisateur, il est essentiel de prévoir un espacement adéquat entre les icônes pour éviter les interactions non intentionnelles.
Page 55 : Il faut que les CTAs soient d’une bonne taille afin qu’il soit facilement utilisable, à gauche le CTA est trop petit et empêche l’utilisation facile.
Page 56 : Il faut donner plus d’informations claire et visibles via les CTA et la représentation d’une barre d’avancement des tâches pour le parcours de l’utilisateur et ne pas le décourager sur le nombre d’étape restante.
Boutons radios (ronds) sont exclusifs, les checkboxes (carrés) choix inclusifs
Page 57 : Il faut lier le CTA à la tâche et ne pas lui envoyer le message sans contexte, comme l’exemple de gauche.
page 58 : Il faut que le bouton ne puisse pas causer de misclicks, avec une lisibilité de ces derniers simples rattaché à des icônes évidents.
Page 59 : Design de gauche, j’ai les informations dont j’ai besoin sous mes yeux, pas d’informations polluantes
Page 60 : La taille de l’écran
page 61 : oui, ainsi nous pourrons adapter notre design UI à ses textes