Ce 3è jour sera beaucoup consacré à l'ergonomie et au design. Ce n'est pas ma compétence première, cela sera donc très difficile pour moi de résumer correctement les 3 sessions auxquelles j'ai assisté - malgré leur richesse - autrement que par des mots clés et de façon très lapidaire.
Tag - ergonomie
Design et Ergonomie : "Donne-moi ce que je veux !"
Remise en ligne d'un billet que j'avais publié en octobre 2007 sur le livre "Internet, donne-moi ce que je veux", ce dernier est maintenant disponible gratuitement en ligne : http://www.navigation-web.com/autour-du-livre/les-60-modeles-de-navigation
------
J’ai acheté ce livre suite au passage sur le blog de notre ami Frédéric, l’ayant plébiscité.
Orienté marketting, l’ouvrage se veut pragmatique et répond exactement à la phrase impérative : donner aux internautes ce qu’ils cherchent, et selon ce que veut mettre en avant le site (le besoin).
Les modèles proposés sont riches et pertinents et contiennent un bon nombre d’astuces ergonomiques ou techniques, le sujet de l’accessibilité est également abordé. Les rappels sur les bonnes pratiques sont répétés afin de mieux les retenir au fil de la lecture.
Comme souvent, la stratégie de design et d’ergonomie d’un site sera en fonction du besoin, c’est à dire ce que l’on souhaite mettre en avant, et “vendre”.
Autrement dit, pas un design idéal, mais bien des solutions différentes selon la typologie du site : marchant (avec toutes les déclinaisons selon la nature des objets vendus), blog, encyclopédique, photos, moteurs, etc.
Les conseils glanés peuvent être facilement appliqués, sous réserve d’étudier un minimum le comportement des internautes de son site/blog : qu’est-ce qu’ils cherchent, et comment le cherchent-ils ? (Google analytics, phpmyVisites sont vos amis pour cela).
Ce livre pourra être complété par le Zen des CSS, ce dernier1 se veut plus technique pour le côté mise en forme CSS.
Retrouvez l’actualité du livre sur le site navigation web.
1 du site (presque) éponyme Css Zen garden
Typo : ajout d'une barre sociale et d'un sommaire
J’avais déjà vu des articles sur le site Dev411 concernant l’ajout d’une barre de bookmarking ainsi que l’ajout d’un sommaire des billets de la page courante, c’est maintenant fait.
La barre ressemble à ça, à ceci près que je l’ai passée en noir & blanc :
Ce que j’aime lorsque j’arrive sur une page c’est d’avoir un sommaire des articles de la page, cela évite de parcourir toute la page et avoir en un clin d’oeil les titres des billets, un peu comme delicious. C’était aussi l’occasion1 de mettre un peu les mains dans Typo, et de modifier quelques scripts (index.rhtml et modèles rails) de mon thème2 scribbish : _article.rhtml, _article_toc.rhtml, _article_notable.rhtml
Il reste à appliquer un style maison pour habiller le sommaire.
#articles_toc
{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
background-color:#EEEEEE;
padding-left:5px;
border-color:#B7B7B7;
border-style:solid solid dotted;
border-width:1px;
}
#articles_toc a
{
display:block;
}
Outil que j’utilise pour les images écran : Screenshot captor, logiciel qui permet en outre d’habiller ou de manipuler la capture.
1 A faire : mettre en place un vserver pour typodev…
2 Scribbish, en plus d’une assez belle charte, apporte une sémantique aux pages grâce à l’utilisation du microformat hAtom.