CHOC 02

graphisme généraliste
sites internet
programmation SPIP


de l’ergonomie ?

Sans vouloir rentrer dans les détails d’accessibilités déjà longuement définis et discutés (voici la page wikipedia pour bien commencer), nous livrons ici quelques remarques générales sur l’ergonomie d’une interface web qui peuvent nécessiter quelques éclaircissements.

Nous prenons la notion d’ergonomie dans son sens large qui regroupe des notions diverses et variées, mettant au centre de la réflexion la facilité d’utilisation d’un site web.

Tout d’abord, rappelons que bien souvent, tout dépend du contexte : nous sommes bien obligé d’adapter chaque mise en page pour son contenu particulier. Les règles générales peuvent être nuancées.

la largeur de la mise en page : les minimums

Le minimum généralement respecté est de tenir la mise en page dans un écran de 1024×768 pixels (pour satisfaire la quasi totalité des internautes : voir statistiques statcounter et W3schools), fenêtre de navigateur agrandie sur tout l’écran : la largeur doit tenir compte de l’ascenseur éventuel pour défiler les informations vers le bas, ce qui retire 20 pixels, il reste disons 1000 pixels de large pour la mise en page, et la hauteur doit tenir compte des barres d’adresse du navigateur, de la barre d’onglet, des différentes barres d’outils supplémentaires (et parfois inutiles ?), ce qui réduit la hauteur à environ 550 pixels. Voilà pour les minimum : 1000×550 px.
Pour la hauteur, 550px n’est pas la hauteur de la page, qui pourra bien entendu contenir plus d’information à dérouler par un ascenseur latéral, mais c’est l’espace en haut de page qui devra contenir les informations importantes, le menu de navigation principal ou le nom du site par exemple, car c’est le haut de page qu’on verra en premier.
le minimum d’accord, mais pourquoi avoir un format maximum ?... Le premier point est le suivant, la largeur d’une colonne de texte...

Élargir la colonne de texte pour ne pas jouer de la molette ?

On peut toujours faire des lignes de texte plus longues, mais ça ne sera pas plus agréable à lire, au contraire.
La largeur d’un pavé de texte se calcule avec un certain nombre de mots par ligne pour une plus grande facilité à revenir à la ligne pour lire la suite de la phrase, c’est ce qu’on appelle le confort de lecture. (cf un livre de poche qui tente, quand c’est possible, de respecter ces règles.) Les colonnes d’un journal d’information « papier » sont nettement plus étroites.
Vouloir faire tenir toute l’information dans un écran 1024 x 768 n’est pas la solution. Mieux vaut synthétiser l’information importante en haut de page et développer ensuite tout en agrémentant de photos pour donner des informations complémentaires.
Ça ne dérange plus grand monde de descendre dans la page quand une information nous intéresse, on le fait sur n’importe quel site d’actualité, blog... quand à ceux qui ne le feront pas ça n’a pas d’importance puisque l’essentiel est présent en haut de page.
en septembre 2011 : "Les blocs de texte oscillent souvent entre 500 et 530 pixels de large, ceux du site du journal Le Monde font 540, je n’ai trouvé dans ebay ou amazone aucune colonne de texte dépassant les 500 pixels, Libé, le fig, le monde diplo, l’express ont tous des colonnes de texte de la même taille sauf Le Courrier international effectivement qui fait 650 pixel de large... mais c’est nettement moins agréable à lire."

Argument supplémentaire : si on veut éviter les frais d’une interface dédiée aux I-phones et autres smartphones, il est préférable de rester dans une certaine largeur pour réduire les zooms et les déplacements nécessaire pour lire une ligne...

la largeur de la mise en page : les maximums

si les colonnes ont un maximum (largeur individuelle de chaque colonne de texte pour le confort de lecture), et un minimum (largeur de l’ensemble de la mise en page + largeur individuelle pour ne pas faire un mot par ligne), on peut premièrement envisager une largeur proportionnelle qui s’adapte à l’écran de l’internaute, pour avoir un minimum et un maximum respecté dans tous les cas et pour la même interface.
On peut aussi envisager d’avoir une colonne qui se dédouble quand la largeur le permet : une colonne sur un petit écran peut devenir deux colonnes sur un écran plus large, les informations basses remontant latéralement. On peut aussi le combiner avec la solution proportionnelle...

Il y a des solutions comme celle-ci qui restent rarement utilisées, qui pourraient pourtant apporter une souplesse pour s’adapter à nos écrans très larges en respectant les petits...

retour à l’accueil se fait en cliquant sur le logo qui se trouve en haut de page :

c’est une habitude très fréquemment admise, mais pas essentielle. On évite de rallonger/surcharger le menu, on gagne en simplicité, mais ce n’est généralement pas le seul moyen de retourner à l’accueil du site.
Quoi qu’il en soit de la page d’accueil (où finalement on a aucune raison de revenir à l’accueil puisqu’on y est ;o), au cours de la navigation dans le site, le fil d’Ariane permet de se situer et de retrouver l’accueil à tout moment.

Et des colonnes, je vous en mets 3, 4 ou 5... ?

Il y a des règles qui n’en sont que parce qu’on y croit... et on les fait pour s’en affranchir avec plaisir.
La vie du web serait bien triste si on n’avait pas de temps en temps l’occasion de croiser un site un petit peu "pas pareil", justement celui qui reconsidère les modèles de mise en page standards. Ces modèles sont tout à fait intelligemment conçus, techniquement irréprochables, et leur premier atout est de pouvoir se greffer sur n’importe quel contenu... le résultat graphique est que tout le monde a le même site interchangeable, et le graphiste n’a plus qu’à choisir les couleurs et les typographies (mais dans un choix ultra limité... faut pas rêver !), une tapisserie pour le fond et hop ! au suivant... Et l’opération peut se répéter chaque jour, vous pouvez changer le modèle de mise en forme aussi souvent que vous changez de chemise : mais est-ce vraiment nécessaire ? Ou même souhaitable ?
Alors qu’avec peu d’effort et finalement sans trop s’éloigner des modèles sus-mentionnés "intelligents", on peut intégrer un contenu dans un modèle de mise en page personnalisé, qui du coup peut être en cohérence avec le projet d’identité visuel global.. d’accord on ne changera pas tous les jours, mais on ne veut pas changer quand on a ce que l’on veut et qu’on est content...

un menu général présent sur chaque page du site

Pour éviter les pages "cul-de-sac", les boutons "retour" et autres barrières qui ralentissent l’accès à l’information...
On devrait pouvoir, pour faire bien, accéder à n’importe quel page du site depuis n’importe quelle autre en maximum 3 clics de souris...

une page d’accueil préliminaire à l’entrée du site ?

au secours !
La page d’accueil doit contenir des informations vraies, refléter le contenu du site et changer régulièrement pour partie : montrer un site qui se met à jour, ne pas lasser l’internaute, satisfaire le référencement en même temps car les moteurs de recherches indexent la page sur son contenu...
c’est aussi ralentir le parcours de l’internaute et lui mettre une barrière comme pour qu’il n’accède pas rapidement à l’information... ça ne va pas dans le bon sens !
ajoutez le fait que si le site est bien conçu, il y a de fortes chances pour que l’on arrive chez-vous autrement que par la porte principale, et l’entrée sera inutile voire inopportune...

les libertés du rédacteur

C’est bête à dire, mais un site web est très souvent un ensemble de page : la mise en page de l’interface (l’ensemble de chaque type de page : accueil et autre...) est pensée et décidée au moment de la conception du site. C’est-à-dire que des choix de couleurs de fond et de texte ont été décidés, la typographie ou les typographies des textes, titres et d’intertitres, sa taille également, sa largeur, la taille des images, le comportement des galeries etc... pour que les éléments se trouvent en cohérence dans l’identité du site.
Le rédacteur ne doit pas pouvoir modifier chaque décisions déjà prises, et il s’en passe d’ailleurs très facilement : son travail en est allégé, il peut se concentrer sur le sens du texte et garde, dans un SPIP installé "par défaut", un certain nombre d’outils simples pour clarifier son texte : mise en gras/italique (ne pas oublier majuscule/minuscule à choisir sur le clavier), intertitre, saut de ligne/paragraphe, notes de bas de page, citation, quelques caractères particuliers (À, Œ et œ, Æ et æ... pour ceux qui ne les connaissent pas sur leur clavier), insertion d’images et documents en tout genre...
Ces outils sont volontairement sobres pour les raisons sus-mentionnées et ne polluent pas la base de données avec les choix de mises en forme : c’est primordial pour utiliser le contenu du site dans d’autres situations que le site internet, les flux RSS par exemple, ou au moment de refaire votre site, dans 6, 8 ou 10 ans, vous serez content de pouvoir utiliser tous vos textes tels que, sans aucune intervention manuelle...
On peut toutefois compléter ces outils par quelques plugins qui viendront donner le loisir de ferrer le texte au choix, d’en changer la taille et la couleur, mais dans des limites définies lors de la conception du site...

des contraintes de mise en page

Le contexte, et le but de notre travail, est de fournir des outils d’information originaux et également efficaces : nous nous devons de respecter les principes de mises à jours qui font tout l’intérêt des solutions dynamiques comme SPIP. Dans l’environnement actuel, avec les langages modernes mais néanmoins répandus largement, nous faisons avec un ensemble de contraintes toutes réunies dans la notion d’ergonomie web.
La tâche n’est pas simple, d’autant plus que les contraintes sont changeantes...

Dans notre façon de penser un site web, nous essayons de trouver des systèmes qui puissent s’adapter à tous types de contenus tout en offrant une certaine diversité de mise en page.


Lire aussi "Les éditeurs WYSIWYG, c’est pas du joli !"

À l’usage des nouveaux propriétaires et des utilisateurs de sites web dynamiques, aux rédacteurs chevronnés ou qui le seront bientôt, qu’ils publient de manière frénétique ou sporadique mais sans trop savoir ce qu’ils font... voici quelques explications élémentaires sur le fonctionnement de leur outil, pour peut-être comprendre ce que vous raconte votre webmaster préféré ou votre hébergeur adoré, ou bien simplement pour savoir ce qu’on fait, c’est déjà pas rien.
À vrai dire vous pouvez très bien vous en passer et continuer à mettre à jour vos sites web... à lire seulement si ça vous tente !

> choc02 > notions et réflexions

libre ? > de l’informatique libre ? <

Civic Tech ou Civic Business ? Le numérique ne pourra pas aider la démocratie sans en adopter les fondements

samedi 4 novembre 2017

Le numérique n’est pas démocratique en soi. Sa simple utilisation ne saurait suffire à gérer magiquement les enjeux démocratiques essentiels, bien au contraire. En lui accordant une confiance aveugle, on ouvre la porte à une perte de souveraineté et de contrôle démocratique. Ce n’est pas sans raison que le mouvement « Open Government » mondial a trouvé ses fondements dans la dynamique Open Data et la gouvernance collaborative de l’internet, elles-mêmes forgées au cœur des principes de la transparence démocratique, de la délibération publique et des communautés du logiciel libre. Il ne saurait être acceptable que le passage au numérique de la vie démocratique s’accompagne de la création de monopoles lucratifs dont les rouages seraient cachés du regard de la société. Cette transition numérique doit donc respecter scrupuleusement, et a minima, le niveau de transparence et de souveraineté de notre héritage démocratique.

Voir en ligne : sur le site regardscitoyens.org

Le Manifeste du web indépendant a 20 ans (depuis quelques mois)

jeudi 5 octobre 2017

Le Web indépendant, ce sont ces millions de sites offrant des millions de pages faites de passion, d’opinion, d’information, mises en place par des utilisateurs conscients de leur rôle de citoyens. Le Web indépendant, c’est un lien nouveau entre les individus, une bourse du savoir gratuite, offerte, ouverte ; sans prétention.

http://www.uzine.net/article60.html

Voir en ligne : sur le site uzine.net

Argent public ? Code public !

mercredi 13 septembre 2017

Pourquoi les logiciels financés par l’impôt ne sont pas publiés sous Licence Libre ?

Nous voulons une législation qui requiert que le logiciel financé par le contribuable pour le secteur public soit disponible publiquement sous une licence de Logiciel Libre et Open Source. S’il s’agit d’argent public, le code devrait être également public.

Le code payé par le peuple devrait être disponible pour le peuple !

https://vimeo.com/232524527

Voir en ligne : sur publiccode.eu

Mozilla accepte d’être le tuteur fiscal et légal de Thunderbird

vendredi 12 mai 2017

Pour ce qui concerne son indépendance opérationnelle, il faut entendre par là, la séparation des éléments comme le site web en cours de migration vers thunderbird.net, avec également un hébergement séparé. Les infrastructures devront être également trouvées pour répondre aux besoins des 25 millions d’utilisateurs du client de messagerie. L’équipe de Thunderbird devra également travailler de manière autonome pour assurer les fonctionnalités du client comme les add-ons et bien d’autres choses.

Voir en ligne : sur developpez.com

Facebook n’est pas un réseau social, c’est un scanner qui nous numérise

mercredi 22 février 2017

Facebook veut nous faire croire qu’il s’agit d’un parc de loisirs alors qu’il s’agit d’un centre commercial.

Ce n’est pas le rôle d’une entreprise de « développer l’infrastructure sociale d’une communauté » comme Mark veut le faire. L’infrastructure sociale doit faire partie des biens communs, et non pas appartenir aux entreprises monopolistiques géantes comme Facebook. La raison pour laquelle nous nous retrouvons dans un tel bazar avec une surveillance omniprésente, des bulles de filtres et des informations mensongères (de la propagande) c’est que, précisément, la sphère publique a été totalement détruite par un oligopole d’infrastructures privées qui se présente comme un espace public.

Voir en ligne : sur framablog.org

0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | ... | 155

mentions - Plan du site - SPIP -