Lecture/Web/Améliorations pour ordinateur/Cinquième test du prototype
Nous aimerions recevoir vos commentaires par rapport à certaines décisions concernant le design graphique de l'habillage Vector 2022. Avec l'expression "design graphique" (visual design) nous entendons le style du texte, des boutons, des contours, des fonds et l'espacement.
Instructions
- Consulter cette page pour le contexte
- Créez une nouvelle section sur cette page en utilisant le formulaire ci-dessous (il sera prérenseigné avec les points auxquels vous pouvez répondre).
- Renseignez vos avis concernant le prototype dans votre nouvelle section ajoutée.
Merci de garder à l'esprit :
- Il s'agit de prototypes, la majorité des fonctionnalités ne marche pas, et vous pourriez rencontrer d'autres bogues ou bizarreries.
- Le « formulaire de nouvelle section » n’est malheureusement pas compatible avec l’éditeur visuel (VE). Si vous utilisez l’éditeur visuel, créez une nouvelle section manuellement et copiez-collez les points auxquels vous voulez répondre (listés ci-dessous).
- Vous ne devez pas forcement passer en revue toutes les sections ; concentrez-vous sur celles qui vous intéressent le plus.
- Le design, notamment le design graphique, peut être subjectif. Bien que chacun ait droit à ses propres opinions, nous vous demandons de faire de votre mieux pour expliquer les vôtres et la manière dont elles sont liées à nos objectifs de simplicité et d'utilisabilité.
- Certaines bonnes options pourraient ne pas être présentées ici. N'hésitez pas à suggérer autre chose si vous pensez que cela fonctionnerait mieux que les options présentées. Si vous êtes à l'aise avec le design et/ou le codage, n'hésitez pas à inclure des maquettes ou des prototypes de vos idées (mais ce n'est pas obligatoire). Fichiers du design : Figma, Sketch, Google Drawing. Prototype : GitHub.
- Pour soumettre vos idées, ne modifiez pas cette page mais incluez-les dans votre formulaire de commentaire.
- Nous apprécions les designers amateurs et respectons le point de vue des designers expérimentés. Nous examinerons toutes les commentaires et les idées et, au bout du compte, nous nous en remettrons au jugement de concepteurs expérimentés pour prendre les décisions finales.
- Si vous préférez faire part de vos commentaires par courriel, veuillez contacter Olga Vasileva à l'adresse [$1 olga@wikimedia.org].
Aperçu des questions en attendant vos avis
- Menus — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-menus.web.app/Brown_bear Quelle option préférez-vous et pourquoi ? Assurez-vous de bien vérifier le menu de recherche, le menu utilisateur, le menu des langues et le menu des outils.
- Fonds et contours — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-borders-bgs.web.app/Zebra Quelle option préférez-vous et pourquoi ?
- Section active dans le Sommaire — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-toc-active.web.app/Otter Quelle option préférez-vous et pourquoi ?
- Logo dans l'entête — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-header-logo.web.app/Panda Quelle option vous préférez et pourquoi ?
- Couleurs des liens — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-link-colors.web.app/Salmon Selon vous, il faudrait du travail supplémentaire avant de faire ce changement ?
- Taille de police — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-font-size.web.app/Hummingbird Avez-vous des doutes ou remarques concernant la taille de police proposée ?
Fond et contexte
Au cours des deux dernières années nous avons fait divers changements structurels à l'interface. Nous avons déplacé la barre de recherche, le sélecteur des langues, et lesommaire. Nous avons organisé quelques liens et outils dans des menus. Nous avons aussi limité la largeur du contenu, ajouté un entête figé, et déplacé le titre de la page au-dessus de la barre des outils de la page. Actuellement, une fois ces différents éléments intégrés dans l'interface actualisée, nous nous intéressons à l'aspect général. Les premières questions que notre équipe s'est posé sont les suivantes :
- Comment nous pouvons utiliser le design graphique pour améliorer l'interface ?
- Pensons-vous qu'il soit utile que l'habillage ait plus de caractère (comme avec les lignes bleues et les gradients dans le Legacy Vector) ?
- À partir de quel moment ça devient trop, au point de devenir une source de distraction ou de rendre l'interface confuse ?
- Et si nous en faisions le moins possible, en adoptant une approche hyper minimaliste comme celle adoptée par l'interface d'origine de Wikipédia ?
Historiquement, notre approche a été simple et fonctionnelle. Les éléments HTML sont peu stylisés (voire pas du tout), ce qui simplifie l'interface tant pour les utilisateurs que pour les concepteurs. Cela signifie aussi que notre design graphique est plutôt atemporel. Nous ne suivons pas la mode et n'avons pas besoin de faire des changements tous les deux ans. En regardant les captures d'écran ci-dessous, nous pouvons voir comment l'habillage Monobook et l'habillage Legacy Vector utilisent le design graphique avec parcimonie (principalement les contours et les couleurs du fond).
Changements envisagés
Menus
Nous utilisons différents menus dans notre interface. Jusqu'à présent, notre approche au style des menus n'a pas été cohérente. Nous avons l'opportunité, avec Vector 2022, de développer une approche plus consistante et accessible du style de nos menus. Dans leur forme la plus simple, les menus ont deux composantes : un déclencheur de menu et des éléments du menu. Nous sommes en train de prendre en considération les couleurs bleu vs. noir (à la fois pour le déclencheur du menu et pour les options du menu), et les graisses du texte, gras vs. régulier (pour le déclencheur du menu).
Lien vers le prototype avec les options : https://di-visual-design-menus.web.app/Brown_bear
1) déclencheur du menu en bleu, éléments du menu en bleu | 2) déclencheur du menu en bleu, éléments du menu en noir | 3) déclencheur du menu en noir, éléments du menu en bleu |
4) déclencheur du menu en noir, éléments du menu en noir |
Contours et fonds
Devrions-nous ajouter des contours ou des fonds pour aider à diviser les zones de l'interface ? dans ce cas-là, comment ils devraient s'afficher ? Comme nous l'avons mentionné dans la section Fond et contexte ci-dessus, Monobook et Vector utilisent tous les deux des fonds et des contours pour séparer l'interface du contenu. Fonds et contours peuvent aussi donner du caractère à l'interface. Cependant, il est difficile de savoir dans quelle mesure ils sont fonctionnels ou nécessaires. Nous avons créé plusieurs options, avec des fonds et des contours progressivement de plus en plus sombres.
Lien vers le prototype avec les options : https://di-visual-design-borders-bgs.web.app/Zebra
1) minimaliste | 2) contours de l'article | 3) contours de l'article + entête souligné |
4) ligne du Sommaire + entête souligné | 5) ligne du Sommaire + titre de la page souligné | 6) contours de l'article + fond de l'entête (plein) |
7) contours de l'article + fond de l'entête (dégradé) | 8) fond extérieur de l'article (dégradé) | 9) fond extérieur de l'article (plein) |
Section active du sommaire
Le Sommaire est désormais dans la barre latérale (à gauche) de l'article, et est fixe pour rester visible quand on fait défiler la page. Une nouvelle fonctionnalité du Sommaire indique quelle des sections de l'article vous êtes en train de lire (nous l'appelons « section active »). Actuellement, en suivant un pattern utilisé pour les onglets Article/Discussion, la section active du Sommaire est noire, et les sections non actives sont bleues. Nous aimons ce pattern, parce qu'il est simple, déjà utilisé, et réduit les distractions. Nous pourrions également utiliser un style supplémentaire pour indiquer la section active.
Lien vers le prototype avec les options : https://di-visual-design-toc-active.web.app/Otter
1) minimaliste | 2) gras | 3) fond | 4) ligne avec contour |
5) ligne avec contour (2) |
Logo dans l'entête
Monobook et Legacy Vector, tous deux présentent un logo Wikipedia carré avec un grand globe. En prenant en compte les diverses modifications apportées à Vector 2022, un logo plus petit et rectangulaire dans le coin pourrait mieux convenir à la mise en page. Cependant, nous voulions être sûrs d'essayer différentes options. Merci de se souvenir de tester ces options avec des différentes tailles d'écran, car l'équilibre de la mise en page change en fonction de la taille de votre écran.
Lien vers le prototype avec les options : https://di-visual-design-header-logo.web.app/Panda
1) Logo rectangulaire à gauche | 2) Logo carré à gauche | 3) Logo carré à gauche (dégradé) |
4) Logo rectangulaire au centre |
Couleurs des liens
The World Wide Web Consortium (W3C) a Règles pour l'accessibilité des contenus web. Ces directives définissent un niveau de contraste minimum pour les liens : « Pour des raisons d'utilisabilité et d'accessibilité, les liens devraient être soulignés par défaut. En cas contraire, le texte du lien doit présenter un contraste d'au moins 3:1 avec le texte environnant, et doit présenter un indicateur non coloré (généralement souligné) au passage de la souris ou s'il est sélectionné à l'aide du clavier. »[1] Étant donné que nous ne soulignons pas les liens par défaut, le choix de la couleur de nos liens doit répondre à l'exigence d'un contraste de 3 : 1. Afin de vérifier le contraste entre nos liens et notre corps de texte, nous pouvons utiliser le contrôleur de contraste fourni par WebAIM.
Couleur | Contraste avec le corps du texte #202122
|
Résultat du test | Lien vers les résultats du test |
---|---|---|---|
liens bleus #0645ad
|
1.89 : 1 | ❌ Échec | lien vers les résultats |
liens visités #0b0080
|
1.01 : 1 | ❌ Échec | lien vers les résultats |
Couleur | Contraste avec le corps du texte #202122
|
Résultat du test | Lien vers les résultats du test |
---|---|---|---|
liens bleu #3366cc
|
3 : 1 | ✅ Validé | lien vers les résultats |
liens visités #795cb2
|
3.06: 1 | ✅ Validé | lien vers les résultats |
D'ailleurs, la couleur bleue proposée pour les liens fait déjà partie du Guide de style du design de Wikimédia, et est utilisée sur nos sites Web mobiles ainsi que dans les logos de divers projets, ce qui nous permettrait de gagner en cohérence.
Lien vers le prototype avec les couleurs proposées : https://di-visual-design-link-colors.web.app/Salmon
Couleurs actuelles des liens | Couleurs des liens proposées |
Taille de police
Notre mouvement a pour mission de fournir toutes les connaissances du monde au plus grand nombre de personnes possible. Actuellement, la majorité de la connaissance que nous offrons est sous forme de texte. Des études ont montré que les réglages typographiques (comme la taille de police, la longueur de la ligne, et la hauteur de la ligne) influencent l'expérience de la lecture et de l'écriture, les deux dans le sens du confort général de l'utilisateur (p.ex. fatigue et tension oculaire), aussi bien que la compréhension et la mémorisation.[2][3][4][5] Il est donc important pour nous d'utiliser des réglages typographiques optimaux dans notre interface. Un facteur important à garder à l'esprit pour déterminer ce qui est optimal pour nos projets est que les gens s'engagent à la fois dans une lecture approfondie et dans un balayage du texte.[6][7]
Dans une phase précédente du projet, nous avons lu des études concernant la longueur des lignes et avons conclu qu'une longueur de 90 à 140 caractères par ligne était optimale pour nos projets. (lien vers le rapport) Récemment, nous avons passé du temps à lire des études sur les tailles de police. La recherche la plus convaincante, et directement applicable, que nous ayons trouvée jusqu'à présent est une étude de 2016, qui a utilisé l'oculométrie pour évaluer les effets de la taille de police et de l'espacement des lignes sur les personnes lisant Wikipédia :
À l'aide d'un modèle de mesure hybride, nous avons comparé la lisibilité et la compréhension objectives et subjectives des articles pour des tailles de police allant de 10 à 26 points et des interlignes allant de 0,8 à 1,8 (police : Arial). Nos résultats montrent que la lisibilité, mesurée par la durée moyenne de fixation, augmente significativement avec la taille de police. En outre, les questions de compréhension du texte comportaient beaucoup plus de réponses correctes avec les tailles de police 18 et 26. Ces résultats prouvent que les sites web à forte densité de texte devraient utiliser des polices de taille 18 ou supérieure, et utiliser une interligne par défaut dans l'objectif de rendre une page web facile à lire et à comprendre. Nos résultats diffèrent sensiblement des recommandations précédentes, sans doute parce qu'il s'agit du premier travail à couvrir les tailles de police au-delà de 14 points.[8]
Tout d'abord, nous devons convertir la mesure utilisée par les chercheurs (points) en la mesure que les navigateurs restituent finalement (px). La conversion est: 1px = 72pt / 96.[9][10] Ainsi, l'intervalle examiné dans la recherche (10-26 points) est équivalent à 13,3-34px. Leur conclusion, de 18 points, équivaut à 24px.
Devrions-nous donc augmenter la taille de la police à 24px ? La recherche a étudié la lecture en profondeur, cependant les gens parcourent souvent la page pour trouver un certain morceau d'information. Il s'agit d'un différent comportement de lecture, qui bénéficie sans doute d'une taille de police plus petite que la lecture approfondie. Notre proposition, qui veut être prudente en tenant compte de la lecture en diagonale, est d'augmenter la taille de la police à 16px pour commencer. (Nous augmenterons également la largeur maximale de l'article, qui passera de 960px à 1050px.) Dans une prochaine étape, nous prévoyons de mener nos propres recherches pour étudier plus à fond la taille de police sur les wikis Wikimédia.
Bibliographie commentée des recherches sur la typographie et la lisibilité
Lien vers le prototype avec la taille de police proposée : https://di-visual-design-font-size.web.app/Hummingbird
Donnez votre avis
Références
- ↑ Accessibilité du contraste et de la couleur, comprendre les exigences des WCAG 2 en matière de contrastes et de couleurs : « identification des liens en couleurs uniquement ».
- ↑ Hussain, Sohaib, Ahmed, Qasim Khan, (2011-11-01). "Web readability factors affecting users of all ages". Australian Journal of Basic and Applied Sciences, 2011, 5 (11), pp. 972 - 977.
- ↑ Nanavati, Bias (2005). "Optimal Line Length in Reading--A Literature Review". Visible Language, v39 n2 p121-145 2005.
- ↑ Banerjee, Majumdar, Majumdar (2011-01). "Readability, Subjective Preference and Mental Workload Studies on Young Indian Adults for Selection of Optimum Font Type and Size during Onscreen Reading". Al Ameen Journal of Medical Sciences.
- ↑ Patterson, Tinker (1940). "How to make type readable; a manual for typographers, printers and advertisers, based on twelve years of research involving speed of reading tests given to 33,031 persons". Harper & Brothers Publishers.
- ↑ TeBlunthuis, Bayer, Vasileva (2019-08). "Dwelling on Wikipedia: investigating time spent by global encyclopedia readers". OpenSym '19: Proceedings of the 15th International Symposium on Open Collaboration.
- ↑ Moran (2020-04-05). "How People Read Online: New and Old Findings". Nielsen Norman Group.
- ↑ Rello, Pielot, Marcos (05-2016). "Make It Big! The Effect of Font Size and Line Spacing on Online Readability". Conference on Human Factors in Computing Systems.
- ↑ Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. percent"
- ↑ Convertisseur de PT à PX