{"id":8398,"date":"2014-09-11T09:50:41","date_gmt":"2014-09-11T13:50:41","guid":{"rendered":"http:\/\/isarta.com\/infos\/?p=8398"},"modified":"2014-09-11T11:20:11","modified_gmt":"2014-09-11T15:20:11","slug":"le-probleme-avec-les-icones-web","status":"publish","type":"post","link":"https:\/\/isarta.com\/infos\/le-probleme-avec-les-icones-web\/","title":{"rendered":"Les ic\u00f4nes Web, mode d’emploi"},"content":{"rendered":"

Alors que la communication par l’image prend de plus en plus de place en ligne (Pinterest et Instagram en sont de bons exemples), des recherches r\u00e9centes continuent d’indiquer qu’il faut \u00eatre tr\u00e8s prudent dans l’utilisation des ic\u00f4nes. Autrement, on risque de nuire \u00e0 la compr\u00e9hension de ses utilisateurs m\u00eame si elles existent\u00a0dans le but d’am\u00e9liorer l’ergonomie et l’exp\u00e9rience Web de l’usager.<\/span><\/strong><\/p>\n

\"images\"<\/a>Les r\u00e9cents tests du N\/N Group, firme r\u00e9put\u00e9e en ergonomie que j’aime bien citer \u00e0 l’occasion, vont dans le m\u00eame sens que plusieurs travaux<\/span><\/a><\/span><\/strong> r\u00e9alis\u00e9s dans les ann\u00e9es 90. D<\/strong><\/span><\/a><\/span><\/span>eux<\/span><\/a><\/strong><\/span> articles<\/span><\/a><\/span><\/strong>,<\/span><\/span><\/span> publi\u00e9s r\u00e9cemment par Jakob Nielsen et son \u00e9quipe, relatent d’ailleurs ceci \u00e0 propos des ic\u00f4nes<\/span>:<\/span><\/p>\n

1. Peu d’ic\u00f4nes sont reconnues universellement<\/span><\/strong><\/span><\/p>\n

Une enveloppe, une maison, une loupe sont des ic\u00f4nes auxquelles tous les internautes peuvent facilement associer une fonction. Toutefois, certaines d’entre elles,\u00a0notamment le coeur, l’\u00e9toile, le\u00a0\u00abhamburger<\/span><\/a><\/span><\/strong>\u00bb ou encore la fl\u00e8che<\/span><\/a> <\/strong><\/span>du style Google Maps sont utilis\u00e9s de diff\u00e9rentes fa\u00e7ons d’un site \u00e0 l’autre. Ne surestimez donc pas la capacit\u00e9 des utilisateurs \u00e0 comprendre leur signification particuli\u00e8re.<\/span><\/p>\n

2. Un libell\u00e9 de texte devrait accompagner chaque ic\u00f4ne<\/span>\u00a0<\/b><\/span><\/p>\n

En raison de ce qui est mentionn\u00e9 au point pr\u00e9c\u00e9dent, un libell\u00e9 devrait accompagner les ic\u00f4nes qui peuvent semer le doute. \u00abUn mot vaut parfois mille images\u00bb. Prenez par exemple le site de M\u00e9t\u00e9om\u00e9dia<\/span><\/a><\/span><\/strong>. Seriez-vous capable d’identifier ce que veulent dire la roue dentel\u00e9e et la mire si un libell\u00e9 ne leur \u00e9tait pas associ\u00e9?<\/span><\/p>\n

3. La taille relative d’une ic\u00f4ne est importante pour sa d\u00e9tection<\/span><\/strong><\/span><\/p>\n

Les ic\u00f4nes ne doivent pas \u00eatre noy\u00e9es dans le contenu. Ceci dit, une ic\u00f4ne, int\u00e9gr\u00e9e \u00e0 une application, risque d’\u00eatre plus facile \u00e0 d\u00e9tecter que sur une page Web type car elle est normalement entour\u00e9e d’un\u00a0contenu minimal.<\/span><\/p>\n

4. Testez vos ic\u00f4nes<\/b><\/span><\/p>\n

Quand vous faites vos choix d’ic\u00f4nes, il y a de bonnes chances que l’analogie ne soit pas assez logique pour l’utilisateur si celui-ci (ou vous-m\u00eame) prend plus de quelques secondes avant de\u00a0faire le lien appropri\u00e9 (ou non).\u00a0Un test au pr\u00e9alable devra cons\u00e9quemment \u00eatre effectu\u00e9\u00a0avec votre client\u00e8le avant la s\u00e9lection finale.<\/span><\/p>\n

Un petit test, en terminant. Dans cette liste<\/span><\/a><\/strong><\/span>, \u00e0 combien d’ic\u00f4nes pourriez-vous associer une fonction claire?<\/span><\/p>\n

\u00a0<\/p>\n

<\/div>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

<\/span><\/p>\n
<\/div>\n","protected":false},"excerpt":{"rendered":"

Alors que la communication par l’image prend de plus en plus de place en ligne (Pinterest et Instagram en sont de bons exemples), des recherches r\u00e9centes continuent d’indiquer qu’il faut \u00eatre tr\u00e8s prudent dans l’utilisation des ic\u00f4nes. Autrement, on risque de nuire \u00e0 la compr\u00e9hension de ses utilisateurs m\u00eame si elles existent\u00a0dans le but d’am\u00e9liorer […]<\/p>\n

<\/span>
<\/div>","protected":false},"author":2,"featured_media":8399,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[137,1],"tags":[206,233],"_links":{"self":[{"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/posts\/8398"}],"collection":[{"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/comments?post=8398"}],"version-history":[{"count":7,"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/posts\/8398\/revisions"}],"predecessor-version":[{"id":8406,"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/posts\/8398\/revisions\/8406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/media\/8399"}],"wp:attachment":[{"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/media?parent=8398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/categories?post=8398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/isarta.com\/infos\/wp-json\/wp\/v2\/tags?post=8398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}