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 ? <

Le ministère de l’Éducation assigné en justice pour son partenariat avec Microsoft

lundi 15 août 2016

La convention de « partenariat » liant le ministère de l’Éducation nationale et Microsoft sera bientôt débattue devant la justice. Le collectif EduNathon, pour qui il s’agit en réalité d’un marché public déguisé, a déposé aujourd’hui un référé auprès du tribunal de grande instance de Paris. Une audience est prévue pour le 8 septembre.

Voir en ligne : sur nextinpact.com

Pascal Desfarges : « Je compare l’émergence des tiers-lieux à celle des monastères au XIIe siècle »

mardi 7 juin 2016

Ces lieux représentent un contre-pouvoir ou du moins un équilibre des pouvoirs face la société algorithmique imposée par de très grands groupes comme Facebook, Google, Apple ou Samsung qui sont en train de monopoliser les données, de les capter et de les revendre. On assiste aussi à l’avènement de la société de contrôle où tout va être automatisé : domotique, traçage… Je travaille sur ce sujet comme sur la ville intelligente. À la ville transhumaniste, j’oppose la ville collaborative.

À la ville intelligente, j’oppose l’intelligence de la ville. Et cette intelligence est produite par ses habitants.

Voir en ligne : sur lepopulaire.fr

L’open source, pierre angulaire de la démocratie

mardi 7 juin 2016

Pourtant, la sûreté se trouve parmi les première libertés de la Déclaration des droits de l’homme et du citoyen. C’est une des libertés dites naturelles, c’est-à-dire inaliénables et fondatrices. La sûreté, c’est la possibilité de se garantir contre l’arbitraire. Emprisonnement, condamnation, spoliation... mais aussi, pour ces lycéens, la décision de la filière qu’ils suivront après le bac ou encore le montant de l’impôt payé par le contribuable.

Au tribunal, la sûreté est garantie par le débat contradictoire. Le défenseur a le droit de développer ses arguments avant le jugement.

Lors d’une décision administrative, cela devait être assuré par la possibilité de contester la décision prise. Or, l’opacité des systèmes informatiques qui président à ces décisions est une entrave sérieuse à la contestation, donc à la sûreté.

Voir en ligne : sur le site rue89.nouvelobs.com

Le faux problème des bloqueurs de pub

mardi 22 mars 2016

Les éditeurs de presse nous expliquent qu’ils ont besoin de la publicité, car cela finance leur entreprise. Je n’en ai rien à cirer. C’est leur problème, pas le mien. S’ils ne sont pas contents, ils peuvent passer en paywall, comme médiapart. Leur souci est que cela n’est pas possible pour la plupart d’entre eux, car la valeur ajoutée qu’ils apportent n’est pas suffisante pour que les internautes acceptent de payer.

Voir en ligne : http://authueil.org/?2016/03/22

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

mentions - Plan du site - SPIP -