Thèmes de forum : principes d'ergonomie

Demandes de réalisation d'images déterminées avec Gimp.

Modérateur : Ze Techos

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Thèmes de forum : principes d'ergonomie

Message par Flamme » jeu. sept. 24, 2009 10:10 am

Bannières et en-têtes

Évitez d’insérer une bannière trop haute car elle empiète sur l'information. Évitez de dépasser 200px, la taille idéale étant aux alentours de 120-150 pixels. Elle ne doit en aucun cas excéder un tiers de la hauteur de la page de navigation.

En règle générale, évitez de masser de l'information dans l'espace d'en-tête : ce n'est pas une page web! Les premiers sujets du forum doivent être accessibles sans scroller dans la résolution la plus courante (1024x768). En effet, si les premiers sujets du forum ne sont pas visibles dès ouverture de la page, le visiteur ne sera peut-être même pas conscient de la présence d'un forum un ou deux écrans plus bas... Et dans tous les cas, il sera obligé de scroller dès qu'il voudra consulter un message.

Thème graphique

Vous devez veillez à l'homogénéité des éléments graphiques, qui doivent former un ensemble et non être collés les uns aux autres sans relation graphique ou thématique évidentes.

Un thème graphique évocateur est l’idéal. Si vous n’en trouvez pas, préférez un thème neutre à un thème inapproprié, trop voyant ou peu ergonomique : testez toutes les fonctions (messages, messages privés, réponses, administration…) sous ce thème avant de le rendre disponible.

Si le forum est lié à un site, harmonisez la couleur et l’ambiance des deux.

Ergonomie

Évitez les contrastes agressifs et la prédominance de couleurs trop vives !

Ne les insérez que par petites touches sur un fond plus neutre. Réfléchissez au message véhiculé par chaque couleur. Vous trouverez des éléments à ce sujet sur les sites d'infographie et de webdesign.

Vous pouvez toujours l'adapter à votre univers en changeant des éléments graphiques tel que le fond, les icônes, les boutons... Laissez aux membres la possibilité de revenir à un thème clair et simplifié s’ils le souhaitent. Si c’est possible, mettez-en plusieurs au choix.

Lisibilité

Restez attentifs à la couleur du texte. Il doit présenter un fort contraste par rapport à son fond, qu’il soit uni ou avec motif. Évitez de superposer des couleurs pouvant comporter des ambiguïtés pour les personnes présentant un trouble de la vision des couleurs ou des nuances. Préférez, dans la mesure du possible, un texte sombre sur fond clair plutôt que l'inverse.

Les textes principaux doivent être au minimum de taille 12. Évitez l'abus de l'italique ou de couleurs "fantaisistes" dans vos messages comme dans ceux des membres. Choisissez de polices de caractères standard, de préférence sans-sérif (Arial, Verdana, Trebuchet...)

Images

Évitez les images trop grandes.

Elles nuisent à la présentation du jeu en occupant de l'espace d'information et rendent le chargement difficile pour les petites connexions. Si elles outrepassent la largeur fixée pour le forum ou la largeur de l’écran, elles obligent à un scrolling horizontal très désagréable.

Évitez également les icônes démesurées : le propre d’une icône est d’être à la fois claire et discrète.

Évitez de placer en fond de page des zone de titre ou de texte des images trop voyantes. Le fond d’une zone où apparaît du texte doit être uni ou ne présenter que des motifs discrets. Dites-vous qu'une image de fond figurée ne sert à rien si elle est cachée par la table du forum : il n’y a pas grand intérêt à n’apercevoir qu'un pied ou un bout d’aile…

N'utilisez les gifs animés qu'avec modération, pour signaler quelque chose de nouveau ou d'important.

N'agressez pas le visiteur !

Dans l'ensemble, évitez tout ce qui défile et tout ce qui clignote, surtout en en-tête de page. Évitez également, pour la même raison, les musiques de fond et bruitages intempestifs.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Message par Ishimaru Chiaki » ven. sept. 25, 2009 4:26 am

Parmi les principes d'ergonomie énoncées plus haut, je viens développer au sujet de ce point :
Flamme a écrit :Évitez les images trop grandes.

Elles nuisent à la présentation du jeu en occupant de l'espace d'information et rendent le chargement difficile pour les petites connexions. Si elles outrepassent la largeur fixée pour le forum ou la largeur de l’écran, elles obligent à un scrolling horizontal très désagréable.

Évitez également les icônes démesurées : le propre d’une icône est d’être à la fois claire et discrète.
Certains n'en sont pas conscient, mais plus vous ajoutez d'images, de scripts et d'animations Flash, plus votre page sera lourde à charger. Il ne faut pas oublier que certaines régions rurales de la France et du Québec n'ont pas encore le haut débit et donc, une page trop lourde prendre une éternité à se charger. En règle générale, si le chargement prend plus de 15 secondes, le visiteur fuira votre site et n'y reviendra pas.

Il est donc important d'éviter d'alourdir vos pages afin de permettre au plus grand nombre, même les visiteurs qui ont une petite connexion, de pouvoir naviguer aisément sur votre site.

Le poids idéal recommandé pour une page est situé entre 50 et 80 kilo-octets, ce qui est en général facile à respecter pour un forum que l'on télécharge et installe soi-même (phpBB, PunBB, Connectix Boards et MyBB entre autres), mais dans le cas d'un forum clé-en-main de type forumactif qui, à lui seul, inclut un javascript pesant plus de 120 Ko, on peut tolérer un poids jusqu'à 200 Ko.

Comment connaître le poids de ses pages

En faisant des recherches sur Google, j'ai trouvé un outil en ligne où vous n'avez qu'à entrer l'adresse de votre page à analyser pour que l'outil vous donne les résultats suivants :
  • Le poids total de votre page
  • Le poids de chacun des éléments de votre page (fichier HTML, images, javascripts, animations Flash)
  • Le temps de chargement estimé pour différents types de connexions Internet
  • Des liens morts, s'il y en a
Un tel outil est utile pour connaître les améliorations à faire pour alléger le poids de vos pages Web, et vous pourrez constater à quel point une accumulation de petits éléments peut vite faire grimper le poids de vos pages !

Lien : http://www.graphitoo.com/poids_page.php
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Message par Ishimaru Chiaki » ven. janv. 22, 2010 4:26 am

Tailles recommandées pour les images d'un forum

Puisque l'on recommande d'éviter de faire des images trop grandes, je viens indiquer ici les dimensions que je recommande de ne pas dépasser pour chaque type d'image.

Bannière/Logo : Pour la largeur, avec la disparition des 800*600, on peut se permettre de faire des bannières larges de 1000px. Pour la hauteur, celle-ci ne doit pas dépasser le tiers d'un écran, soit entre 120 et 150 pixels.

Barre de navigation : Le cumulatif des boutons ne doit pas dépasser 1000px ou la largeur de la bannière. Pour la hauteur, je recommande de ne pas dépasser 50px.

Dossiers des forums : Pas plus que 50*50

Dossiers des sujets : Pas plus que 40*40

Icone "qui est en ligne" : Pas plus que 150*150

Gros boutons : Pas plus que 150 de large, pas plus que 40 de haut. Seule exception : les traductions comportant des mots très longs.

Petits boutons : Pas plus que 80*30. Seule exception : les traductions comportant des mots très longs.

Mini-icônes : Pas plus que 15*15 pixels

Image de fond : Cela dépend du type. Je ne conseille pas les grandes photos à cause de la diversité des configurations. De plus, une photo non-optimisée en poids (plusieurs centaines de Ko) qui a des dimensions excédant le double du nombre de pixels de mon écran (1280*1024) peut faire ramer le défilement, même pour les connexions ADSL. Une image raccordable (se répétant sans coupure visible) est plus conseillée.
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Répondre