Télécharger pour lire hors ligne
Téléchargé parVirginie Colombel
UX design for web
Ce document traite des principes d'ergonomie liés à la conception de sites web. Il aborde des éléments essentiels comme l'arborescence, la navigation, l'organisation du contenu, ainsi que des conseils sur la lisibilité des textes et la conception de formulaires. L’objectif est de créer des interfaces utiles, accessibles et adaptées aux utilisateurs.
UX design for web
- 1.
- 2. Concevoir des interfaces agréables, accessibleset adaptées. Quelques règles d’ergonomie appliquées au Web Virginie COLOMBEL- Ecriture pour les médias numériques_MMI_2020
- 4.
- 6. La souris danstous ses états : vers plus d’ergonomie
- 7. Un site web ergonomiqueest un site utile et utilisable
- 9. Pour réaliser unsite ou une application utile ET utilisable, il faudra respecter quelques règles simples.
- 10.
- 11. Définition : L’arborescence,ou plan de site, se présente généralement sous la forme d’un schéma qui organise les pages du site en rubriques et définit les différents niveaux de navigation.
- 13. Soigner son arborescence pour optimiserle référencement naturel du site.
- 15. Réaliser l’arborescence de son siteweb en 5 étapes.
- 16. 1. Lister tousles contenus du site 2. Analyser l’arborescence de vos concurrents 3. Organiser & hiérarchiser le contenu 4. Formaliser l’arborescence sur papier ou à l’aide d’un logiciel de maquettage 5. Scénariser, penser SEO et recommencer !
- 20.
- 21. A. Il fautguider le visiteur
- 22. « À chaque clic,je progresse… »
- 23.
- 24.
- 25. ‣ C’est lechemin parcouru ou breadcrumb en anglais ‣ Il met en valeur la localisation de l’internaute : où il se trouve dans le site ‣ Il lui indique le chemin à parcourir ‣ Mais Le fil d’ariane n’empiète pas sur la navigation principale
- 26. Bon ou pasbon ?
- 27. Bon ou pasbon ?
- 28.
- 29.
- 30. Pour tester lessites on fait des scénarii utilisateur.
- 31. Test / TP#01 1.La requête : Paul, 18 ans, doit se rendre à Bordeaux dimanche 22 septembre. 2. Il n’a pas beaucoup de moyens et veut que ça lui coûte le moins cher possible. 3. D’habitude, c’est sa mère qui s’occupe de gérer ses déplacements mais là elle n’a pas le temps. 4. Indiquez quels sites Paul va visiter et pour chaque site en combien de temps ou de clics il obtient une réponse satisfaisante à sa requête.
- 32.
- 33.
- 34. 7 clics maximumpour 1 information
- 35. 4 entrées parsite en général + 2 au maximum* * Sauf exceptions exceptionnelles
- 36. Bon ou pasbon ?
- 37. L’overlay indispensable encas de grandes quantités de contenus
- 38. La barre derecherche
- 39.
- 40. Le menu 100%mobile friendly
- 41.
- 42. Les internautes nesont pas...
- 43.
- 44. IL ne fautni...
- 45.
- 46. Pour bien ciblerson visiteur, on crée des personas
- 47. Qu’est ce quec’est ?
- 48. Définition : Unpersona est un personnage imaginaire , un internaute idéal. Le persona est généralement doté d'un prénom et de caractéristiques sociales et psychologiques.
- 49.
- 52.
- 53. Créez le personadu coeur de cible d’un de ces sites TP#01 1
- 54.
- 55.
- 56. A. La lectureen F, Z ou E ?
- 57. La lecture enF, Z ou E ?
- 58. C’est l’apparence du sitequi influe sur le parcours visuel de l’internaute.
- 59.
- 60.
- 61. On pratique le cut-offdesign
- 62.
- 64. 5.la théorie dela Gestalt
- 65.
- 71. Qu’est ce quise passe ?
- 72. ‣Notre cerveau analysele monde environnant comme un ensemble de formes ‣ Le TOUT est plus que la simple somme de ses parties : la conjonction de plusieurs formes peut faire émerger de nouvelles caractéristiques, une nouvelle image.
- 73. ‣ Notre cerveauregroupe les choses qui sont proches physiquement. proximité visuelle = proximité conceptuelle
- 74. A.C’est la loide proximité
- 75. Dans une pageWeb, il faut donc...
- 76. ‣ Rapprocher lesobjets qui entretiennent un rapport fonctionnel ‣ Eloigner ceux qui n’ont rien en commun
- 77.
- 78.
- 79.
- 82. L’émergence : Pouridentifier un objet, on compare ses formes à celles qui nous sont familières. C’est notre cerveau qui fait ça sans nous demander notre avis.
- 84.
- 89. Réification : Lecerveau peut reconnaître une forme même si des é l é m e n t s s o n t manquants
- 92.
- 95. Si un objeta plus de deux interprétations, on en identifiera une à la fois mais jamais les deux en en même temps.
- 97.
- 99.
- 101. 7 points àne pas négliger pour la conception d’une interface.
- 102.
- 103. ‣ Supprimer toutce qui est inutile ‣ Limiter le poids des pages ‣ Créer une hiérarchie de lecture claire ‣ Prévoir quelques gabarits de pages et s’y tenir ‣ Penser à l’espace d’écran réellement disponible Bien organiser la page web #1
- 104. Les résolutions cibles Source: designersinteractifs.org_2017
- 105. Bien organiser lapage web #2 ‣ Eviter au maximum le scroll horizontal pour une page web ‣ Le scroll vertical ne doit pas altérer la visibilité des éléments critiques qu’il faut placer au dessus du seuil de scroll
- 106.
- 107. Bien organiser lapage web #2 ‣ Eviter tout «scroll stopper» ‣ Eviter un design entièrement élastique : Etirer seulement les colonnes de contenu ‣ Aérer la page par des blancs ‣ Bien différencier les types d’espaces de la page
- 108.
- 109.
- 110. Ce qui veutdire ?
- 111. Les affordances sontles possibilités d’actions suggérées par les caractéristiques d’un objet
- 113. Et donc ?Quel rapport avec le web ?
- 114. Optimisez l’affordance : « Vouspouvez me cliquer »
- 115.
- 116. Augmentez la surfacedes éléments « cliquables »
- 117. Optimisez l’affordance : Vouspouvez interagir avec moi
- 119.
- 121. 3. Des texteslisibles et clairs
- 122. Des textes lisibleset clairs ‣ Présentez les textes pour faciliter la lecture à l’écran : ☞ Préférez le HTML aux images pour du texte ou des informations importantes ☞ Limitez l’usage d’image de fond pour le texte
- 123. Des textes lisibleset clairs ‣ Typographie et couleurs ☞ Une taille de police jamais en dessous d’un Arial 10 ou d’un Verdana 9 pour le corps de page ☞ On préfère les contrastes positifs : foncé sur clair ☞ Des niveaux de luminosité et de contrastes suffisants et qui respectent les normes W3C. Utilisez cet outil
- 128. ☞ Limitez lenombre de couleurs différentes ☞ Préférez les casses mixtes ☞ Utilisez les majuscules uniquement pour attirer l’attention ☞ Limitez l’utilisation des majuscules aux phrases très courtes
- 131. ☞ Augmentez l’espacepar défaut entre les caractères des titres en majuscules ☞ Evitez l’italique ☞ Un texte non cliquable ne doit pas avoir l’air cliquable ☞ Le format souligné est INTERDIT pour mettre une idée en relief et même pour les titres
- 132. ‣ Gestion desblocs et lignes de texte : ☞ Police sans-serif de préférence ☞ Evitez de justifier ☞ Alignement à gauche ☞ Un nombre de caractères agréable : 60-100 ☞ L’interlignage devrait être d’environ 150% du corps du texte Des textes lisibles et clairs
- 134. 4. Des lienshypertextes
- 135. Des liens visibleset utilisés à bon escient ‣ Un format réservé ‣ Un format les différenciant clairement du texte non cliquable ‣ Un format qui les fasse ressortir de la page Remarque : Le format bleu souligné n’est pas obligatoire mais le changement de couleur et le souligné sont de bons indices.
- 136. Liens hypertextes :les clés d’une navigation réussie ‣ Evitez d’avoir trop de formats de liens différents ‣ Adaptez le niveau de lisibilité de vos liens à leur importance ‣ Prévoyez un format spécifique du lien au survol de la souris ‣ Prévoyez un format spécial pour les liens déjà visités
- 137. Liens hypertextes :les clés d’une navigation réussie ‣ Lors de sa rédaction, pensez à la taille du lien ‣ Lorsque le lien est composé d’un pictogramme ou d’une icône et d’un libellé, la zone cliquable doit englober tous les éléments ‣ Evitez qu’un lien passe sur deux lignes
- 138. Liens hypertextes :les clés d’une navigation réussie ‣ Différenciez les liens externes des liens internes ‣ Signalez les liens pointant vers autre chose qu’une page HTML
- 139. 5.Des formulaires simples etefficaces
- 141. Des éléments deformulaire adaptés à la tâche
- 142. Facilitez la priseen main du formulaire ‣ Adaptez la visibilité des zones de saisie à leur importance ‣ Pour donner plus de visibilité à un champ de saisie, il faut le mettre en blanc sur un fond gris ou de couleur ‣ Evitez de remplir tous les champs avec des données pré-remplies
- 143. Faciliter la priseen main du formulaire ‣ Indiquez dès le départ que certains champs sont obligatoires ‣ Accompagnez chaque champ obligatoire d’un élément graphique ou typographique spécifique et facilement repérable ‣ Supprimez les « : » en fin de libellé ‣ En cas de nombreux champs, formez des groupes
- 144. Facilitez la priseen main du formulaire ‣ Aligner les libellés à gauche si le nombre de caractères séparant le libellé le plus long du plus court ne dépasse pas 6 à 8 caractères. ‣ La distance entre le libellé et le champ ne doit pas être trop importante
- 145. Facilitez la tâchede renseignement ‣ Ne demandez que les données strictement nécessaires ‣ Permettez le passage de champ à champ grâce à la touche TAB ‣ Ordonnez les champs selon une logique attendue ‣ Fournissez des aides et des légendes
- 146. Facilitez la tâchede renseignement ‣ Si le nombre de caractères acceptés est limité, informez l’internaute ‣ Le bouton d’action principal doit être visible : fort visuellement et près du formulaire ‣ Evitez de proposer des fonctions d’annulation
- 147. Faciliter la tâchede renseignement ‣ Faire ressortir la ou les actions principales du formulaire
- 148. Aidez l’internaute àéviter et à corriger ses erreurs_1 ‣ Indiquez le format de renseignements attendu à l’extérieur du champ ‣ Réservez le renseignement par défaut à des données peu critiques ‣ Traitez l’ensemble des erreurs en une seule fois
- 149. Aidez l’internaute àéviter et à corriger ses erreurs_2 ‣ Ne pas effacez les informations erronées ‣ Ne pas effacez les entrées valides ‣ Soignez les messages d’erreur : -placez un message juste au dessus du formulaire ☞ il doit attirer l’attention
- 150. Aidez l’internaute àéviter et à corriger ses erreurs_3 ‣ Fournissez un message spécifique contextuel ‣ Mettez en valeur visuellement un champ mal renseigné ‣ Le message doit expliquer l’erreur et donner une piste de résolution
- 151. 6.Des listes etdes tableaux organisés
- 152. Organiser ses listeset ses tableaux ‣ N’affichez que des colonnes contenant les informations nécessaires ‣ Prévoyez des filets séparateurs entre chaque ligne ‣ Indiquez le critère de classement par défaut
- 153. Organiser ses listeset ses tableaux
- 154.
- 155. Des messages d’informationpour accompagner votre visiteur ‣ S’assurer de la bonne visibilité d’un message : ☞ Utilisez des couleurs qui rompent avec celles de la page ☞ Accompagnez le message d’icônes ☞ Jouez sur la taille ☞Animez le message pour lui donner une apparence temporaire
- 156. Des messages d’informationpour accompagner votre visiteur ‣ Présentez le message sous forme d’une fenêtre de type panneau flottant / Opacifier la page du site située en dessous. ‣ Evitez les messages importants sous forme de pop-up
- 157. Des messages d’informationpour accompagner votre visiteur ‣ Faites confirmer à l’internaute toute demande d’action destructrice ‣ Ne présentez pas trop d’informations en survol ‣ Disséminez l’aide générale de manière contextuelle
- 158. Des messages d’informationpour accompagner votre visiteur ‣ Personnalisez votre page 404 : ☞ Evitez tout discours technique ☞ Fournissez des possibilités de navigation ‣ A retenir : Ecrire en rouge c’est alerter d’un danger ou d’une erreur
- 165.
- 166. Un site ergonomique ‣Est correctement architecturé ‣ Les pages sont aérées, bien rangées et leur composition réfléchie ‣ Tout est mis en place pour faciliter l’accès à l’information et la lisibilité* est optimisée. ‣ L’internaute doit trouver ce qu’il cherche librement et facilement * On pensera bien entendu aux mal voyants
- 167. Sources UX Design &ergonomie des interfaces, Nogier & Leclerc, Dunod https://www.lafabriquedunet.fr/conseils/conception-site-web/ arborescence-site-web/ Ergonomie Web & UX design, Pour une conception centrée utilisateur, Amélie Boucher, Eyrolles Méthodes de design UX, 30 méthodes fondamentales pour concevoir des expériences optimales, Lallemenand & Gronier, Eyrolles https://uxdesign.cc/ux-psychology-go-hand-in-hand-how-gestalt- theory-appears-in-ux-design-18b727343da8 https://medium.muz.li/gestalt-principles-in-ui- design-6b75a41e9965