Tag Archive for webdesign

Cmic Blog: Tenue d’été

Cmic Blog nouveau design

Le Cmic Blog inaugure sa nouvelle tenue d’été! Après le turquoise, le noir, le gris et le blanc. Le thème (gratuit) choisi cette fois-ci est ZeePersonal.

Il y aura encore quelques adaptations, des plugins à régler. Dans l’ensemble, il me plaît bien. Bonne lecture, n’hésitez pas à me signaler d’éventuels bugs en commentaire.

Eye tracking: où va le regard de l’internaute

Image 52 300x112 Eye tracking: où va le regard de linternauteVia Twitter, je suis tombée sur cette étude The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes.

L’eye tracking ou oculométrie regroupe un ensemble de techniques permettant d’enregistrer les mouvements oculaires. Cette méthode peut être utilisée dans divers domaines pour divers buts. Il souvent utilisé sur des sites web pour comprendre la manière dont les utilisateurs appréhendent leur contenu ou recherchent un produit qu’ils désirent acheter.

Bien que cette étude ait été faite sur un type particulier de 25 sites de news, les résultats peuvent intéresser tout site d’information et tout webmaster. Sur son blog, Dean Rieck a en détaillé 12 points dans un article intitulé Eye tracking study reveals 12 websites tactics dont je propose ici une traduction libre.

12 tactiques de consultation de sites web

  1. Les titres attirent le regard avant les photos.
    Surprenant alors qu’en général on ajoute un graphique ou une photo pour attirer le regard! Mais les participants à cette étude regardent d’abord les titres et spécialement s’ils sont situés dans la partie supérieure gauche d’une page.
  2. Les lecteurs balaient les premiers deux mots d’un titre.
    Un long titre pourrait fonctionner, mais il semble selon cette étude que les deux premiers mots sont décisifs pour la poursuite de la lecture. Conclusion: mettre les mots importants en début de titre.
  3. Les lecteurs balaient la partie gauche d’une liste de titres.
    Devant une liste de titres, le sens de lecture va du haut de la partie gauche vers le bas, les deux premiers mots de chaque titre sont lus pour décider s’il y a quelque chose d’intéressant à lire. Les lecteurs ne lisent pas nécessairement chaque ligne du début à la fin. Même conclusion qu’au point précédent: mettre les mots importants en début de titre.
  4. Un titre doit attirer l’attention en moins d’une seconde.
    Les lecteurs se déplacent très vite et picorent. Il faut attirer très très vite leur attention pour les accrocher et aller très vite au point principal.
  5. Les petits caractères favorisent une lecture plus attentive.
    C’est logique, car plus petits sont les  caractères, plus ils sont difficiles  lire, donc requièrent une plus grande concentration. Manier toutefois la taille des caractères avec prudence: pas trop grande si vous voulez une lecture attentive et pas trop petite pour une communication rapide.
  6. La navigation au sommet de la page fonctionne le mieux.
    Intéressant d’un point de vue web design, surtout que l’on voit de plus en plus de sites avec une navigation latérale. On retiendra que ce qui est en haut de page se voit immédiatement.
  7. Les paragraphes courts encouragent la lecture.
    Pas de suprise, c’est vrai aussi dans les documents imprimés. Les gros blocs de texte sont lourds et imposants. Dans l’écriture en ligne comme dans l’écriture d’annonces, privilégier le flux d’idées plutôt que le développement d’un paragraphe normal.
  8. Les paragraphes d’introduction sont prisés par les lecteurs.
    Un résumé du contenu figurant après le titre et avant texte est efficace et est fréquent sur les sites de news, comme dans certains publireportages. L’étude révèle que la lecture du résumé n’affecte pas la lecture du texte principal. En améliore-t-il la compréhension ? L’étude ne le dit pas.
  9. Le positionnement des annonces en haut à gauche est l’emplacement qui fonctionne le mieux.
    L’oeil a tendance à commencer dans le coin supérieur gauche d’une page. Une annonce, ou tout autre texte à cet endroit sera remarqué. Mais s’en méfier toutefois. Lorsque les gens sont habitués  voir des annonces publicitaires dans un endroit particulier, ils ne les voient plus. Si vous avez toujours positionné des annonces en haut à gauche, il se peut qu’elles ne fonctionnent plus.
  10. Les lecteurs remarquent plus les annonces placées près du contenu populaire.
    C’est une évidence et c’est aussi le cas dans le monde réel ou les annonces sont placées là où pointent le regard.
  11. Les annonces textuelles sont plus lues que les annonces graphiques.
    Tout le monde ne sera pas d’accord avec cette affirmation. Si les gens recherchent de l’information, ils recherchent du texte, pas des images. Mais les illustrations peuvent être utiles pour des informations complexes, difficiles à communiquer en texte pur.
  12. Le multimédia fonctionne mieux que le texte pour une information non familière ou conceptuelle.
    La lecture repose sur les personnes ayant une certaine compréhension du sujet. Plus le sujet leur est familier, plus rapide et facile sera la lecture. Si l’on veut décrire un processus par exemple, une vidéo ou une illustration transmet mieux cette information qu’un texte.

Pour en savoir plus

Image 48 Eye tracking: où va le regard de linternaute

Tenue d’été

Les beaux jours sont arrivés, le temps idéal pour un changement de look du Cmic Blog. Je passe du thème Agregado à Rask de Bizzartic, du webdesigner Slovène Željan Topić.

J’ai découvert ses travaux grâce à WordPress-tuto.fr qui a présenté le thème Inuit. Après quelques essais, j’ai opté pour ce thème pour sa simplicité et surtout pour son intégration avec Twitter et Flickr.

Le microblogging fait des ravages, plus c’est court, mieux c’est! La simplicité et la rapidité de la publication de nouveaux articles devrait faciliter ma tâche et rendre la lecture plus attrayante. Cmic Blog est également disponible en version mobile, qui s’affiche si vous vous connectez depuis un téléphone portable type iPhone.

Tout n’est pas encore parfait, la peinture est toute fraîche, merci pour votre patience et votre fidélité.

boldorrouge Tenue dété

Nouvelle présentation du Cmic blog

Voilà , c’est fait, Cmic blog vient de subir sa rénovation annuelle! Un nouveau look, plus épuré, permettra je l’espère une navigation simplifiée et intuitive dans les différents sujets. Yaka cliquer !

Le design du blog est basé sur le thème gratuit agregado, développé par Darren Hoyt, traduit en français par le blogueur masqué. J’ai passé quelques heures pour le personnaliser afin qu’il ne ressemble à  aucun autre,   j’en décrirai les étapes dans un billet plus technique. Merci à  mes testeurs qui se reconnaîtront!

Les nouveautés

image 40 Nouvelle présentation du Cmic blog

Réponses aux questions que vous n’avez jamais osé poser

D’un simple clic, vous pouvez m’envoyer une question concernant l’utilisation des nouvelles technologies, celles que vous n’osez pas poser autour de vous de peur de passer pour un(e) nul(le), ou parce que votre entourage est saturé!, ou une question pour laquelle vous n’avez trouvé aucune réponse. J’y répondrai par un billet, mettant ainsi la réponse à  disposition de tous.

Ailleurs sur le web

Dans cette rubrique, je signale des liens intéressants via des outils de « microblogging« . Toute l’information est ainsi concentrée et présentée sur une même page, qu’elle provienne de Twitter, Delicious, Facebook, Flickr ou autre. Je présenterai ces différents outils dans de prochains billets.

Archives

image 42 Nouvelle présentation du Cmic blogLa navigation dans les archives d’un blog est très souvent fastidieuse et n’attire personne. Ici, les archives sont présentée sous forme de grille, présentant très agréablement à  mon goût les billets classés par mois.

Navigation par catégorie ou par mots clés

Il est possible de naviguer de différentes manières dans les billets du blog :

  • Par catégorie : cliquer simplement sur les titres de la barre de menu et choisir les sous-menus. On obtient la liste des billets de cette catégorie. On peut aussi cliquer sur la caétégorie mentionnée au bas de chaque article
  • Par mots clés : on peut obtenir la liste des billets pour un mot clé donné. On y accède en cliquant sur un mot clé de la liste « nuage de tags » ou sur un mot clé au bas du billet.

Bonne navigation, n’hésitez pas à  donner votre avis sur ce nouveau design et si vous avez une question, vous savez où cliquer!

Votre site web est-il accessible à  tous ?

Question d’actualité, à  l’occasion de la publication d’une intéressante étude sur l’accessibilité des sites web suisses en 2007 (PDF, 5 MB) de la fondation Accès pour tous – Access For All

La fondation « Accès pour tous » a testé 50 sites Web des trois niveaux fédéraux afin de déterminer leur accessibilité pour les personnes handicapées. L’étude

  • présente les résultats des tests d’accessibilité
  • pésente des articles spécialisés consacrés à  l’accessibilité sans barrières
  • décrit la manière dont quatre personnes handicapées effectuent des recherches concrètes sur Internet, les limites et contraintes auxquelles elles se heurtent et leurs exigences
  • définit le cadre légal
  • décrit la méthode de réalisation des tests d’accessibilité, dans la perspective du Web 2.0
  • donne des exemples de bonnes pratiques en 2007
  • fournit des liens vers des sites de référence

J’en recommande la lecture à  tous les webmasters de Suisse et d’ailleurs, les exemples pratiques étant très intéressants et très clairs. Très (trop) souvent, les sociétés de services dans le domaine de l’accessibilité oublient de demander l’avis aux premiers intéressés, à  savoir les personnes avec un handicap. Ici, non seulement des personnes handicapées ont participé aux tests, mais l’institut de labellisation Label4all compte en son sein plusieurs personnes directement concernées par le problème de l’accessibilité sans barrières, parce que vivant elles-mêmes avec un handicap.

Cas pratiques

L’étude présente 4 cas pratiques, la démarche et les difficultés rencontrées pour des recherches à  priori toutes simples :

  1. Une personne avec handicaps multiples veut commander une nouvelle carte d’identité sur ch.ch *****
  2. Une personne malvoyante veut trouver le prix de l’abonnement général CFF, pour deux personnes, sur cff.ch ***
  3. Un non-voyant veut comparer les différentes offres de Swisscom Mobile ***
  4. Une personne âgée de 71 ans veut savoir combien coûte l’envoir d’un colis encombrant à  prendre en charge à  son domicile, service offert par la Poste **

(* = classement obtenu dans l’étude, ***** étant le maximum, * le minimum)

Je parie que le résultat n’aurait pas été très différent avec un internaute lambda, celui ou celle qui utilise régulièrement le web mais sans y être accro, sans trop s’impliquer ni chercher à  comprendre comment tout ça fonctionne. Les webmasters oublient toujours qu’ils créent des produits qui doivent être utilisés par le plus grand nombre et pas seulement par leurs copains informaticiens et autres geeks. Faites le test autour de vous!

Il serait aussi intéressant de savoir quelles sont les sociétés de services web qui ont créé les sites champions de l’accessibilité présentés dans l’étude et celles qui devraient suivre une formation! Peuvent mieux faire chez les Romands : les villes de Genève et Lausanne, les cantons du Jura et du Valais, l’EPFL , tous avec une ou deux étoiles seulement.

En savoir plus