Trieur Organisé de Solutions et de Ressources Informatiques

logo du site TOSRI

Mot-clé - ergonomie

Fil des billets - Fil des commentaires

19 juin 2011

Niveau : personne ayant des bases en informatique (terminologie, principe)

Critiques de Gnome 3 sur fedora 15

Bien le bonjour à tous !
Je souhaiterais vous faire part de mes remarques positives ou négatives sur l'interface Gnome 3 (disponible sous fedora 15 par exemple ;-) )
Je peaufinerai sans doute cet article au cours des prochains jours...

Les plus

  • Un réel effort sur le design : enfin ! On finissait par croire que le design était réservé à de quelques OS, Je pense tout de même que beaucoup remarqueront de très forts points communs avec MAC OS. D'un point de vue esthétique, c'est classe.
  • Gestion des fenêtres : plus de barre en bas pour accéder directement à la fenêtre. Le nouveau maniement des fenêtres est sympa...quelques jours. Les aperçus et la sélection des fenêtres passe par le menu "Activité" en haut à gauche (aussi accessible par l'envoi du curseur dans la partie haut-gauche de l'écran. De plus, cette option (forcée) devient ingérable en bi-écran. Les fenêtres n'ont que le bouton de fermeture (par défaut), les boutons de maximisation et de réduction ont disparus. Pas un grand drame, on s'y fait (ou presque) !
  • L'intégration des logiciels : il y a des logiciels qui s’intègrent bien comme empathie (messagerie instantanée) et les autres... (cf : §les Moins)
  • La barre supérieure : Elle est belle, certes. Avec son minimum d'outils (ou presque).
  • La barre de notification inférieure : Elle est belle (oui aussi !).
  • Les interactions : pas mal, on reprend une option dans gnome2 qui empêche une fenêtre qui s'ouvre d'interrompre l'utilisateur. Cette fois, une petite notification avertit que la fenêtre est chargée. Pratique !
  • La centralisation des paramètres système : c'est un bon point, à la sauce KDE (et MAC). Tout est réuni au sein d'un gestionnaire. C'est une bonne idée, ça évite une liste énorme d'applications de paramétrage dans un menu (cf Gnome2).

Les moins

  • Toujours le design : mais qui est l'auteur de ses fonds d'écran monstrueux sur Fedora ! On s'était habitué à des choses sympa, mais même l'écran de connexion est triste à mourir. Et la joie de vivre ! Mince !
  • Gestion des fenêtres : Aïe ! Même si c'est dynamique, que ça bouge, c'est l'horreur à gérer. Peut-être le manque d'habitude, en tout cas on y perd du temps et de l'efficacité (ça n'est pas du tout naturel pour l'utilisateur). Bref tout ce qui n'a pas de système entièrement gérable par onglets et qui utilise les fenêtre devient difficilement domptable... Dommage !
  • L'intégration des logiciels : un logiciel non intégré un logiciel difficilement gérable. Prenez Amsn (moche mais efficace depuis longtemps !), ne le réduisez pas en icône ! Sinon vous risquez de ne plus jamais avoir la main sur la fenêtre...
  • La barre de notification supérieure : Mais qui s'est dit : "bon, on arrête la personnalisation de l'affichage par clique-droit, c'est pas terrible..." ? Au secours ! Là où le simple clic droit et un "show date" prenait 5s, maintenant il faut passer par gnome-shell (donc la console) puis entrer "gsettings get org.gnome.shell.clock show-date". Super user-friendly ! Bref aucune personnalisation simple de cette barre, même l’icône d’accessibilité (par défaut et tant mieux ! Mais ne sert pas à tous) est compliquée à enlever. Et moi qui aimait profondément mes nombreuses extensions, elles ont quasiment toutes disparues et leur installation passe par yum... Snif...
  • La barre de notification inférieure : décidément, rien n'a voulu être simple. Elle s'affiche de temps en temps et possède les quelques icônes des rares logiciels bien intégrés. On peut forcer son affichage en pointant l'écran en bas à droite.

Ma conclusion

Je rappelle que c'est un avis strictement personnel (même si je vais sans doute en parler avec des développeurs et des utilisateurs).
Comme vous avez pu le voir, je suis assez déçu. D'un point de vue design, c'est bon (voire très bon). Mais niveau ergonomie c'est zéro (ou presque). Alors soit l'équipe qui a pensé cette ergonomie est mauvaise, soit ils n'ont pas eu le temps de faire ce qu'ils voulaient. Peu de choses de révèlent pratiques. Essayez la gestion des fenêtres déjà ! On s'y perd, on cherche et on perd du temps... La personnalisation aussi : on était très fournis en applications de configuration système, en widget pour savoir la météo, monter les disques et d'autres choses bien pratique... Pour moi, si Gnome3 ne s’investit pas plus dans cette ergonomie qui n'est plus, c'est l'ensemble du projet Gnome qui risque d'en pâtir. Unity de Ubuntu serait un bon exemple à suivre (d'un point de vue ergonomie) ! J'espère sincèrement que cette interface va être repensée (sous certains aspects) et que Gnome3 va rapidement s'améliorer.
Je compte peut-être revenir sur Gnome2 dans quelques temps...

 PS : des captures d'écrans seront sûrement rajoutées à cet article.

20 octobre 2010

Niveau : personne ayant des bases en informatique (terminologie, principe)

Ergonomie, améliorer l'efficacité de son site Web

Niveau : Moyen
Temps : 20min (lecture)
Domaine : Ergonomie, accessibilité, utilisabilité

Introduction

Bannières clignotantes, pop-up publicitaires, animations Flash/Javascript ... le web regorge d'éléments attractifs. Attractifs certes, mais à quel point ? Quel en est le prix ? Les éléments qui compose un site Web doivent être judicieusement choisis et ne doivent pas seulement répondre à un critère esthétique. Avant de concevoir un site il faut se poser les bonnes questions : quels seront les utilisateurs ? quel est leur niveau de connaissances en informatique ? Quels seront les navigateurs internet utilisés (statistiques 2010 d'utilisation des navigateurs ) ? Le contenu du site est-il destiné à des personnes handicapées (associations, informations...) ? Doit-on privilégier l'esthétique - le contenant - (site vitrine, présentation de marque...) ou le contenu (informations, documentations...) ? L'utilité des conseils suivants dépend du contexte. On peut citer l'exemple d'un site intranet d'une entreprise utilisant uniquement le navigateur Safari où il est peu utile de s'attarder aux défauts d'affichage avec IE6. Ces conseils sont regroupés en différentes rubriques et s'adressent principalement à ceux qui veulent prendre de bonnes habitudes pour concevoir efficacement. On ne tiendra pas compte ici du temps de réalisation qui peut s'avérer très coûteux.

Page d'accueil

C'est la page la plus importante du site. L'utilisateur doit trouver rapidement l'information qu'il recherche. Tout au long de sa navigation sur internet il acquière des automatismes qu'il est recommandé d'utiliser pour améliorer l'efficacité et le confort.

  • Cette page ne doit être ni trop longue ni trop dense. On peut appliquer la "rêgle des 3 espacements" (méthode : se placer en haut de la page et appuyer trois fois sur la barre d'espace, si l'on atteint pas le bas de la page alors on peut considérer que celle-ci est trop longue. Ne pas mettre « /accueil Â» à la fin de l'url. www.lesite.fr donne directement accès à la page d'accueil.
  • Utiliser une favicon (image affichée dans la barre d'adresse) afin de renforcer l'identité du site.
  • Par convention le logo du site doit se situer en haut à gauche et doit être cliquable : retour à la page d'accueil (sauf lorsque l'on est sur la page d'accueil).
  • Faire figurer les principales fonctionnalités couplées au dernières mises à jour créé du dynamisme.
  • Le reste du site Web doit avoir une présentation identique, seul le contenu change.
  • Ne pas réaliser une bannière et un menu trop volumineux car ces éléments sont présents sur l'ensemble du site. Cet espace est particulièrement précieux car il peut être lu sans dérouler la page, cette zone doit être particulièrement étudiée car c'est l'espace le plus stratégique.

Menus

Le menu principal doit être visible dès la page d'accueil (point d'entrée dans le site) et doit rester cohérent tout au long de la navigation (position, forme, comportement, items). Dans le cas contraire il entraine une confusion auprès de l'utilisateur et empêche l'acquisition d'automatismes. Il a pour but d'indiquer à l'utilisateur les différentes possibilités qui sont proposées.

  • Utiliser les listes html pour formater le menu
  • L'item « accueil Â» doit figurer dans le menu, il renvoi à la page d'accueil
  • Faire ressortir visuellement l'item sélectionné (taille, couleur...), cela facilite l'orientation et la navigation

Couleurs

Le contenu du Web évolue constamment ; la tendance actuelle est plutôt aux sites clairs, aérés, légers. Les nombreuses couleurs vives sont remplacées par des dégradés sobres, les cadres arrondis redeviennent plus stricts ou disparaissent.

  • Les grands espaces de couleurs chaudes (rouge, orange...) attirent fortement l'Å“il : à n'utiliser que si cette zone contient le sujet principal de la page
  • Éviter le contraste noir/blanc qui est agressif et augmente la fatigue visuelle, préférer gris foncé / blanc cassé
  • Utiliser un nombre de couleurs modéré et rester cohérent dans leur utilisation en définissant leur rôle
  • Les utilisateurs sont influencés par leur vie quotidienne, créant ainsi des automatismes que l'on peut intégrer aux interfaces. Si on reprends la sémantique du feu tricolore :
    • le rouge indique l'arrêt, l'erreur
    • le jaune indique la prudence, l'avertissement
    • le vert indique l'accord, le bon fonctionnement

Typographie et textes

  • Type : les polices sans empattements (Arial, Verdana...) sont plus faciles à lire sur un écran que celles avec empattements (Times New Roman...) elles sont donc plus appropriées pour le Web
  • Taille : éviter de descendre en dessous de 10px pour le contenu principal de la page (hors pied de page, mentions légales... qui sont des informations de second plan)
  • Couleur : un texte en jaune ou vert est difficile à lire. Pour améliorer le confort visuel, ne pas utiliser de couleurs trop vives, privilégier les teintes pastel. On peut citer les couleurs du projet Tango .
  • Le soulignement est réservé exclusivement aux liens hypertexte. Pour mettre en valeur du texte on peut augmenter sa taille, le mettre en gras ou changer sa couleur.
  • En français les majuscules sont accentuées (exemple : É). Dans le cas contraire les logiciels de synthèse vocale liront Energie : « eunergie »...
  • Les textes doivent être très structurés (titres, parties, sous-parties, énumérations...). La lecture sur le web se fait généralement en diagonale, les gros blocs de texte sont donc à proscrire.
  • Pour les grands articles ont peut améliorer l'efficacité en créant un sommaire avec des ancres HTML au début. On peut aussi proposer une version PDF pour les personnes préférant lire sur papier.

Images

Les images sont des éléments importants du site. Elles informent, agrémentent et dynamisent le contenu. Il faut cependant veiller à ne pas en utiliser trop ou des formats trop grands qui augmenterais considérablement le temps de réponse de la page. Si le poids de la page ne peut pas être réduit alors il faut indiquer à l'internaute par un message ou une barre de progression qu'il doit patienter.

  • Il faut distinguer les images illustratives qui font partie du contenu (balise HTML « img ») des images de fond qui font partie du conteneur (balise CSS « background »)
  • Mettre un attribut ALT sur toutes les images illustratives afin d'avoir un texte de substitution lorsque l'image ne s'affiche pas.

Accessibilité

  • Ne pas mettre d'ascenseur horizontal (entraine des difficultés de navigation)
  • Améliorer le repérage spatial en mettant en place un fil d'Ariane
  • Garder un contraste important entre la couleur de fond et celle du texte. Vous pouvez tester en ligne vos contrastes grâce à l'outil de www.etre.com .
  • Doubler les indications de couleur par des indications de forme (exemple : les liens hypertexte sont colorés ET soulignés). Ceci améliore l'accessibilité au personnes daltoniennes et permet d'imprimer les pages en noir et blanc
  • Toujours mettre un caractère dans les cases vides d'un tableau. Les logiciels de synthèse vocale n'interprètent pas les cases vides ce qui entraine des décalages

Tests

Après la phase de réflexion et de conception il reste une phase importante, les tests. Ils permettent de rectifier des anomalies non détectées antérieurement et de faire évoluer légèrement certains affichages ou fonctionnements. Il est possible de faire de nombreux tests d'accessibilité et d'ergonomie. Voici quelques possibilités :

  • Vérifier le bon respect des règles HTML en soumettant les pages au validateur W3C
  • Vérifier avec le validateur CSS W3C la conformité de vos feuilles de style
  • Optimiser le temps de réponse de vos pages en suivant les recommandations du plug-in Yslow du navigateur Firefox.
  • Contrôler le niveau d'accessibilité en soumettant les pages sur le site cynthiasays . Trois niveaux d'accessibilité sont définis :
    • Bronze (A) : règles obligatoires pour que le site soit considéré comme accessible
    • Argent (AA) : règles qui devraient être respectées
    • Or (AAA) : règles qui peuvent être appliquées (très difficile à mettre en place pour un site web volumineux)
  • Contrôler que l'affichage sur un navigateur texte (lynx ) est possible et structuré (utilisation d'éléments tels que les div, les listes...)
  • Contrôler l'aspect (affichage, navigation...) lorsque l'on désactive[1] :
    • les images
    • le Javascript
    • le flash

Conclusion

Libre à chacun de ne respecter aucun des conseils présents si dessus. On notera cependant que les sites gouvernementaux ont l'obligation de valider leurs site Web afin qu'ils soient accessible aux personnes handicapées. Une bonne méthode pour comprendre les difficultés perçues par les personnes atteintes de déficiences visuelles telles que les personnes âgées consiste à passer du temps avec celles-ci pour mieux cerner leurs besoins. Il faut garder en mémoire que l'on ne développe pas pour soi mais pour répondre à besoin précis. Ce qui plait au programmeur n'est pas toujours au goût des futurs utilisateurs ; leur avis est primordial, leur satisfaction peut être estimée grâce à un questionnaire portant sur les choix réalisés, l'interface, la navigation, le contenu...

Notes

[1] On peut utiliser le plug-in Web Developer du navigateur Firefox pour désactiver ces éléments.


16 juillet 2010

Niveau : personne ne possédant pas de compétences de bases en informatique

Ergonomie Web

L'ergonomie, de façon générale, désigne les relations entre l'homme et la machine.

L'ergonomie Web, c'est analyser puis créer des interfaces faciles à utiliser, se basant sur des principes connus afin d'utiliser l'expérience des utilisateurs et augmenter l'efficacité du site ou de l'application Web. L'ergonomie se base aussi sur des actions réelles ; on peut citer l'exemple des sites d'e-commerce qui permettent aux utilisateurs d'ajouter des articles dans leur panier virtuel.

Derrière l'ergonomie se cache de réels enjeux : efficacité, clarté, facilité d'orientation... déterminant ainsi la réussite ou l'échec d'un site Web. Avec la démocratisation d'internet, les sites se sont multipliés de façon anarchique, certaines conventions sont apparues afin de faciliter le déchiffrage du Web (bannière en haut, liens hypertexte soulignés, page d'accueil...).

Certains voient dans l'ergonomie un frein à la créativité, il est plus juste de la considérer comme une trame mettant en valeur le contenu ; c'est prévoir les action des utilisateurs, les guider vers l'information recherchée.