Articles à plusieurs colonnes
Je viens de tomber sur cet article par Paul Lewis. La première chose que j'ai remarquée est la disposition multi-colonnes.
C'est formidable que les gens essaient de briser l'utilisation de modèles surutilisés pour les articles/blogs, mais il n'y a pas tout à fait raison. C'est peut-être simplement dû à la façon dont les autres articles sont structurés, mais je trouve que cela ressemble plus à une grille de choses différentes et mon œil ne sait pas trop où chercher.
Comment pourrions-nous rendre cela plus utilisable? Comment pourrions-nous dessiner l'utilisateur au début de la pièce par défaut? Ou cette disposition ne fonctionnera-t-elle jamais aussi bien que d'autres possibilités?
En le comparant à des articles imprimés dans des magazines, etc., cela ne semble-t-il pas 100% correct parce que vous ne voyez jamais simplement un groupe carré carré de colonnes comme celui-ci? Par exemple. Dans un magazine, la première colonne peut être plus haute que les autres car il peut y avoir une image au-dessus des autres, etc.
Les très longues lignes de texte sont difficiles à lire et les gens ont tendance à faire des erreurs lorsqu'ils terminent une ligne et souhaitent passer à la ligne suivante. Les formats multi-colonnes aident à résoudre ce problème, mais les dispositions multi-colonnes ne conviennent pas à toutes les situations.
Articles à plusieurs colonnes fonctionnent bien lorsque vous n'avez pas à faire défiler pour voir le bas de chaque colonne. Pensez à un journal. Sur un site Web, cela signifie que l'utilisateur doit faire défiler vers le bas de la page pour terminer la lecture de la colonne 1, puis revenir en arrière pour continuer à lire la colonne 2, puis faire défiler la page pour terminer la lecture de la colonne 2, etc. etc. etc.
Le concepteur peut ne pas avoir ce problème s'il conçoit sur un grand écran, mais ce n'est pas le cas pour la majorité des utilisateurs.
La seule fois où plusieurs colonnes fonctionnent bien pour les articles sur les appareils numériques, c'est quand vous devez changer la page pour continuer à lire. C'est ce que fait The Economist pour iPad pour conserver leur disposition de colonnes standard, et cela fonctionne bien.
Les utilisateurs d'Internet sont très habitués aux dispositions d'une colonne (texte). Selon votre groupe cible (par exemple, les développeurs Web), vous voudrez peut-être rompre avec cette convention pour souligner l'individualité.
Pour le web, principalement consommé avec des ordinateurs de bureau, oui, cette mise en page ne fonctionnera jamais aussi bien que d'autres possibilités. L'expérience peut être meilleure sur les tablettes électroniques. Mais je pense que l'on devrait aller un ou deux pas plus loin, comme concevoir la page de manière à ce qu'il n'y ait pas de défilement vertical.
Les options pour augmenter la convivialité d'une disposition multi-colonnes sont
- numéroter les titres (les plus forts)
- à l'aide de casquettes
- utilisation du retrait de ligne
Personnellement, je préférerais toujours une taille de police plus grande que plusieurs colonnes (texte).
Peut-être que Paul Lewis veut que son blog ressemble à un journal pour le rendre plus institutionnel. Si c'est le cas, il devrait avoir tilisé les majuscules et lignes en retrait, et non un (sous) titre pour commencer l'article.
Ces éléments servent la lecture, c'est pourquoi ils sont encore utilisés dans les journaux d'aujourd'hui, ils sont moins sur l'esthétique et la logique que sur la lisibilité.
De plus, il pourrait penser que tout le monde a un écran super énorme et il est vraiment dans le contenu condensé parce que je ne comprends vraiment pas pourquoi il nous fait défiler de haut en bas quand nous pouvons simplement faire défiler dans une direction ou pourquoi la hauteur des colonnes ne répond pas .
lisibilité de la longueur de ligne suggère que chaque ligne devrait avoir 50-60 caractères (ou 75 max) par ligne pour une expérience de lecture optimale.
Le paragraphe de gauche contient environ 100 caractères par ligne, tandis que celui de droite contient environ 50 à 60 caractères par ligne. Je trouve que le bon est plus facile à lire.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je vois de nombreux sites avec des conceptions de 2 colonnes qui utilisent 1 colonne pour les médias et 1 pour le texte. Pour une lecture de texte plus facile et une meilleure utilisation de l'espace.
Le fait est que vous pouvez utiliser la disposition multi-colonnes assez efficacement pour transmettre vos informations. Vous avez juste besoin de savoir quel design correspond à vos factures. Comme, dans l'exemple que vous avez mentionné, la disposition à 3 colonnes, alors qu'elle facilite la lecture du texte, le fait qu'elle s'étende sur tout mon écran, il est un peu difficile pour moi de consommer le contenu. Guidez les yeux des utilisateurs avec vous des repères de conception/visuels et rendez le contenu facile à consommer.
Un problème que je peux souligner dans l'exemple que vous avez mentionné, il n'y a pas de boîtier pour le texte et l'arrière-plan commun me fait sauter l'espace entre les colonnes . Regardez le paragraphe 'SAME HYMN SHEET, DIFFERENT PAUL', car il est dans un arrière-plan de couleur distinct, mes yeux sont verrouillés dans la région pendant la lecture.
Je viens de remarquer cette question dans les suggestions de la barre latérale: Largeur de colonne idéale pour les paragraphes en ligne
La réponse donne un joli résumé des règles de base:
Règles générales Prenez-les avec un grain de sel, ce ne sont que des lignes directrices; n'hésitez pas à les casser. Je le répète, ils ne sont pas "une règle pour tous" que vous devez adopter; juste un Push/indice dans la bonne direction.
- 12 mots par ligne
- 39 caractères quelle que soit la taille du texte (alphabet et demi)
- multipliez la taille en points par 2 et interprétez-la comme des pics (points-fois-deux)
- environ 50-60 à au plus 75 caractères (espaces compris) - c'est généralement la ligne directrice empruntée à nos amis en typographie
"Les éléments du style typographique" de Robert Bringhurst, mentionne les mesures plus spécifiques suivantes
- Longueur de ligne de 45 à 75 caractères (mesure); spécifiquement 66, y compris les espaces; Seule colonne
- 40 à 50 caractères; multi-colonne
- 85 à 90 caractères; texte discontinu; généreux leader
- 40 caractères (minimum); justifié
- 12 à 15 caractères; notes marginales; Anglais
Variables de lisibilité:
- taille de police
- plus grand = je l'ai essayé, (certaines) personnes le trouvent ennuyeux. Visez juste la bonne "taille moyenne"
- moyen/standard = plus grande largeur
- plus petit = plus petite largeur
- hauteur de la ligne
- grand (1,9+) = plus facile à balayer les lignes, les lignes plus longues deviennent plus acceptables
- normal = lignes plus courtes
- plus petit = lignes très courtes
- longueur du contenu
- gros blob = longues lignes + grande hauteur de ligne
- message court = lignes courtes + hauteur de ligne raisonnable