Projet UI - Impression des topos

#22

Sauf qu’en pratique tu apprends rapidement où se trouve l’info que tu cherche. Et surtout tu cherche un bout de texte qui à la « tête » de l’info que tu cherche :

  • cotation globale => 1 ou 2 lettres majuscules
  • cotation ski : 2 chiffres séparés par un point
  • altitude : 4 chiffre puis « m »
  • dénivelé : « + »/"-" puis 4 chiffre puis « m »

Pour que cette recherche soit plus facile, il faut éviter que l’info utile soit noyée dans des titres en gras.

Avec l’habitude, on a rapidement plus besoin de lire le titre des champs chiffrés.
Et cet apprentissage se fait en qq jours ou qq semaines, pas en 10 ans.
Donc il faut privilégier l’ergonomie pour les années qui suivent l’apprentissage au lieu des qq jours d’apprentissage (qui fonctionne quand même, on ne cache pas le titre en ne le mettant pas en gras).

#24

C’est un standard de mauvais design pour ce genre de donnée :slight_smile:
On n’est pas obligé de le suivre.
Pas de problème pour avoir une mise en forme du titre des champs différente de celle du texte de base (italique, taille plus petite que l’info, gras mais couleur grise, …), mais il faut que l’info (souvent plus courte que le titre) soit mise en avant.
Avec la mise en forme de la maquette, où les cotations sont rassemblés, idem pour les altitudes et dénivs, ce déséquilibre est moins flagrant.
Sur la V5, pour les cotations on avait un gros pavé de texte où était noyé les cotations. En imprimant en noir et blanc c’était difficile de lire rapidement les cotations (en plus elles n’étaient pas alignées).

Dans le genre de mode à ne pas suivre : en 2000, le standard de design était une page en 800px de large maxi (padding et colonnes de liens compris, donc on arrivait souvent à 5-600px pour le texte).
c2c a su résister à ce design majoritaire à l’époque, qui n’avait aucun sens (à part pour les écrans en 800px de large) et ne permettait pas de s’adapter au support. C’est ce qui a en partie fait le succès de c2c : c2c était simplement lisible quel que soit la largeur de l’écran (en desktop, pas de mobile à l’époque), quel que soit la taille du texte, ce qui n’était pas le cas pour le design en 800px.
Aujourd’hui ce genre de design a disparu, sauf pour les blogs ou les sites qui n’ont pas changé leur design depuis 15 ans.

#25

On s’en fout, on le votera.

2 Likes
#26

Merci pour tous ces retours !

Je note les points suivants :

  • Condenser au max (certains topos ne tiendront pas en 1 seule page, mais bon, on va essayer de faire au mieux en gardant un minimum de lisibilité)
  • A défaut de laisser le choix à l’utilisateur (trop compliqué si on veut que ce soit abouti pour la fin du mois), je vais essayer de mettre les images embarquées en grande taille et sur une page distincte
  • Rajouter la licence et version du doc (idem v5). Pour le QR code, il faut que je me documente…
  • Je ferai des essais pour le gras sur labels ou données.
1 Like
#27

Juste avec du CSS ?

#28

Oui, ça ne me paraît pas insurmontable.

#29

Avec du css, on peut donc modifier l’url de l image pour enlever le suffixe MI afin d’avoir la rresolution la plus grande ?
Et pour les images en svg, remplacer l’extension jpg par svg. Ou alors se contenter du format BI, ce qui est dommage car le svg permet d’avoir une résolution infinie concernant le texte et les tracés.

#30

J’avais pas vu ce point. Je bricole aussi un peu de javascript. Au pire, si je n’y arrive pas quelqu’un prendra peut-être le relais…

Pour ce qui est de la résolution maximale à avoir, sauf si tu veux retapisser ta chambre avec des schémas de topo, il me semble que la résolution BI est déjà pas mal, non ?

Tu as un exemple d’image en svg svp?

#31

Pour la version, comme signalé par @AntoineM, prend juste le code chrono AAAAMMDD HHMMSS par exemple plutôt que de les renuméroter de 1 à n comme c’était dans la V5.

Une page par image et à chacun de gérer quelle page ils impriment ?

Quelle police de caractère ? En effet, la police sur le topoguide est bien à l’écran, mais je ne la trouve pas aussi lisible que d’autres une fois imprimée sur papier.

#32

Je ferai au plus simple, et il me semble que c’est le plus simple :slight_smile:

Ca me semble le plus simple également.
Personnellement, ça ne me choquerai pas si on n’imprimait aucune image et qu’on laissait l’utilisateur imprimer lui-même les images qu’il souhaite en passant par le doc de l’image. Mais je comprends que ça fait quelques manips de plus et donc ce n’est pas très ergonomique.

Tu préférerais de l’Arial ? Il me semble que certains navigateurs imposent une police pour l’impression, quelque soit celle demandée par la page web.

#34

Première étape : Condenser le contenu => livré

image.png557×695 92.2 KB

N’hésitez pas à me dire si certains points sont trop extrêmes.

6 Likes
#35

Pas mal !
Peut-être des pistes d’amélioration :

  • Pour gagner de la place on pourrait se passer de la rose des vents et afficher l’orientation sous forme textuelle comme dans la v5 (N - S - E - W) ;
  • de plus les remarques et matériel sur 2 colonnes c’était pas mal aussi (si c’est faisable). La section « remarques » est assez courte généralement ;
  • le corps du titre peut encore être réduit.
#37

Beau boulot ! Réduire la taille police du titre ? Réduire taille rose des vents au final on sait la lire il faut juste identifier les champs noircis ?

#38

C’est bien.
Par contre que ce soit sur web ou à l’impression, je trouve que c’est bien plus intuitif que la ligne horizontal des titres soit au dessus du titre et non en dessous (comme c’était fait sur la V5).
En regardant le document de loin, on voit en premier ces lignes, qu’on pense être les séparateurs des sections, on commence donc la lecture en dessous… Et on loupe le titre, qui lui par contre semble être un titre orphelin à la fin de la section précédente (ce qui arrive parfois quand un doc est en cours de rédaction, donc on ne trouve pas ça anormal).
Il y a le même défaut sur Wikipédia, et je ne m’y fais pas.

Le pire est qu’il est possible d’ajouter des lignes horizontales dans le document, via ---- :

Et là forcément c’est un vrai séparateur, avec le texte en dessous qui n’a aucun lien avec le texte en dessus.
Du coup il y a 2 logiques différentes qui peuvent coexister, et on ne comprend plus rien intuitivement, obligé de lire « consciemment » le texte. Alors que toute la mise en forme est justement faite pour rendre la lecture et la compréhension plus intuitive, de façon inconsciente.

2 Likes
#39

Merci pour ton retour.
La rose des vents, toute une histoire… C’est sûr que j’aimerais bien pouvoir le faire.
Ok pour le titre.
Le problème des 2 colonnes, c’est qu’on a des topos où la part de matériel est significativement plus importante que celle des remarques, et qu’on risque d’avoir du mal à équilibrer les 2 colonnes.

#40

Au passage, le bug de page blanche à la fin des impressions avec Firefox a disparu, mais je ne sais pas par quel miracle…

Edit : en fait ce bug de la page blanche n’existe qu’en local…

#41

Parmi les gens qui impriment, il y a 2 types de gens :
1- les gens qui n’ont pas de topo papier (c’est mal) et qui veulent donc le max d’infos. Par exemple avant de partir en vacances, ils impriment 15 topos et choisirons dans la liste. Pour eux peu importe la taille du truc.

2- les gens qui impriment juste pour avoir l’itinéraire dans la poche pendant la sortie

Moi je suis dans l’option 2, comme je pense la majorité des gens : je me fiche de l’historique, l’orientation, le matériel : toute cela je l’ai lu en amont, je l’ai dans mon topo papier souvent et si je suis dans la voie, ces infos sont inutiles. Donc je virerai tout ca.

ou alors faire 2 modes d’impressions : Impression complète ou impression terrain. mais ca complique encore l’usine à gaz

1 Like
#42

3- les gens qui ne montent pas en refuge ou en raid avec un bouquin mais qui veulent avoir plusieurs options suivant les conditions

On parle aussi d’alpi, de ski de rando…

1 Like
#43

Sur la page d’un topo, tu as à chaque fois à droite des différents titres (Historique, description, matériel, remarque) une petite flèche orientée vers le bas. Cette flèche te permet de masquer les sections que tu ne veux pas voir et quand tu imprimes, ça garde les sections que tu as masqué. Donc tu as toujours les titres, mais tu gagnes un peu de place.

image.png887×288 63.9 KB
image.png887×244 58.6 KB

1 Like
#44

Une option (possible?) serait de ne pas imprimer du tout les champs masqués ?

1 Like