Comment trouvez-vous le nouveau design de www.codeur.com ?

Bonjour

Nous avons mis en place une nouvelle charte graphique sur www.codeur.com depuis hier . Par rapport à l'ancienne charte, les couleurs sont plus en harmonie avec le bleu de notre logo et l'ensemble évoque mieux la thématique de la mise en relation. Au niveau du code, même si le code n'est pas encore parfaitement w3c compliant , un effort a été fait pour mieux respecter les normes en vigueur.

Cela étant, j'aimerais avoir votre avis de graphistes éclairés.

Ce graphisme vous parait-il réussi ?

Merci d'avance pour vos retours constructifs qui nous permettent de nous améliorer.

Sébastien PELTEY

Salut,

j'ai découvert codeur.com hier (en cliquant sur la pub en haut de ce forum) et j'ai trouvé ç a pas mal du tout. Pas de mauvaises surprise dans la navigabilité... le design est agréable même si je trouve certains titres un peu gros (mais néanmoins bien lisibles et j'ai souvent tendances à trouver certains titres un peu gros...). On sait de quoi traite le site et on va tout de suite à l'essentiel avec la liste des projets en page d'accueil.

Quelques petites remarques (qui relèvent de mon gout perso ):

- la barre avec

a écrit :
1. Publiez un projet 2. Obtenez des devis 3. Choisissez un prestataire 4. Managez votre projet

est amha inutile, troublante, fait un peu redondant avec le cadre du dessous et donc repousse le contenu de quelques pixels vers le bas inutilement.

- de meme que pour "se connecter", j'aurais essayé de faire tenir "publier un projet" sur une ligne.

- les "..." dans le champ de recherche sont inutiles et font executer du javascript juste pour ça (de plus, javascript désactivé -> il faut effacer les "..." ) d'autant qu'on voit bien que c'est le champ de recherche...

- 362 erreurs de validation HTML sur la page d'accueil, ça sonne mal avec "un effort a été fait pour mieux respecter les normes en vigueur".

- 2 erreurs de vaildation CSS qui ressemblent à des fautes de frappe ou d'etourderie.

... et peut etre encore d'autres trucs (du genre les flux rss ne valident pas non plus et il manque quelques attributs "alt" sur des images,...)

bref j'ai essayé d'etre un peu critique mais je trouve l'ensemble visuellement très cohérents, et parlants, pratique, et j'aime bien le concept du site alors bon courage pour la suite
Modifié par skywalk3r (19 Feb 2008 - 17:07)

Merci pour tes réponses qui sont critiques certes mais objectives. Pour ce qui est des erreurs de validation, je m'etais pas rendu compte qu'il en restait autant. On va se ressaisir pour que ce soit plus correct.

Pour les '...' dans le champ recherche, je sais pas encore si je les vire ou si je les garde. Ils sont pas essentiels mais ils ne me paraissent pas gênants non plus.

En tout cas, je note bien toutes remarques.

D'autres personnes sont du même avis sinon ?

Salut,

Pas trop mal, c'est léger, lisible et assez agréable.

Les petits triangles qui marquent les blocs titres bleus ou qui pointent à la verticale dans la bannière sont à mon avis inutiles et peuvent être supprimés sans dénaturer le tout. La simplicité est toujours mieux.

Je trouve cependant que la mise en forme textuelle des projets pourrait être affinée (sur la page d'accueil).
Les titres sont trop collés à gauche, ça manque d'air. Et au final toute l'information en prend un coup est devient difficile à décrypter sans effort.

Il faudrait qu'au niveau des interlignes, les catégories soient rattachés au projet et ne soient pas flottantes entre deux titres comme maintenant. Ou ajouter des séparateurs discrets.

Les colonnes Offres Offre Moy. Début Fin sont peu larges et rendent confuse la lecture.

Personnellement, je trouve le bleu turquoise de fond des titres un peu triste, et j'aurais repris le bleu foncé utilisé pour la typo .com du logo ou à droite de la bulle du smiley. Avec toujours ce léger petit dégradé virant vers le violet comme dans la bulle.

Sinon je trouve ce concept de site pas mal, mais je suis un peu surpris de certaines demandes dont les prix indicatifs sont à la limite du foutage de gueule. Enfin ca tu n'y peux rien, c'est le dur monde du travail. En tout cas ceux là je prendrais jamais la peine de leur répondre, ils seraient déja hors budget...
Modifié par Mikachu (19 Feb 2008 - 19:27)

Merci mikachu pour ton retour. Je note plus particulièrement ta remarque sur la hauteur des interlignes entre les titres et les categories qui pourrait être réduite.

Quand tu parles des "petits triangles bleus", ce sont les ">>" devant les liens du menu de droite ou bien les petites images qu'on retrouve devant les titres des formulaire (par exp: devant "titre du projet" sur ce formulaire ) ?

Bonjour codeur,

J'ai voulu redimensionner la police sous Internet Explorer et cela n'est pas possible.

Une police en "%" ou en "em" permets de palier à ce petit problème.

Mettre également dans la css :

html{font-size:100%} 

Cela permet d'éviter un agrandissement anarchique de la police pour ce navigateur.

Si je désactive les images, je perds le nom du site étant donné que l'image du logo est placée via Css. Cela ne permet pas de mettre un texte alternatif donc ne pas hésiter à mettre l'image en dur dans le code avec le texte alternatif qui va bien.

Si je désactive le javascript, je perds tous le menu.

Je n'ai pas non plus réussi à l'atteindre en naviguant au clavier.

Il manque un petit label sur la recherche ça ne mange pas de pain et cela peut être utile.

Avec pourquoi pas :

label{cursor:pointer;}

qui permet de signifier une zone cliquable.

En plus si les images ne sont pas chargées on perd l'encadrement de l'input et le premier reflexe est de cliquer sur recherche et rien ne se passe avec un label et la déclaration css on limite la casse car l'action abouti tout de même à quelquechose la découverte d'un champs de saisie invisible sans les images .

Des chevauchements et des perte d'informations dans la partie haute en cas de redimensionnement de la police sous Firefox et désactivation de la taille de la police sous Internet Explorer.

Dans la partie haute à droite j'ai mis du temps à trouver la partie cliquable correspondant à "Go" au final j'ai cru que c'était juste un décor il faut vraiment se décaler sur la droite de la photo pour touver le lien.

La plupart des liens survolés sur la première page ne se diffèrent que par la couleur.
Un soulignement ou un non soulignement en fonction de la nature du lien au repos, cela peut rendre service sans pour autant dénaturer le design.

Dans la partie droite, ces liens ont une puce qui signale le hover mais si je n'ai pas d'images je perds cette information, je n'ai plus que la couleur.

Les liens visités ne sont pas différenciés.
Vu le nombre important, cela peut être apréciable de savoir quel projet à déjà été vu.

Le focus pourrait également être différencier pour faciliter la prise d'information de situation dans la page en cas de navigation au clavier.

Sur le formulaire d'inscription, il n'existe aucun label.

L'explication de l'astérisque n'arrive qu'à la fin c'est à dire une fois que le formulaire a fini d'être rempli, pourquoi ne pas informer l'utilisateur dès le début du formulaire ou spécifier textuellement que le champ est obligatoire.

Sinon, pour la charte graphique j'aime bien

Cordialement knarf.

Merci pour ton analyse knarf, c'est très pro.

Tu as mis en avant le point faible de notre design : l'accessibilité. Nous nous sommes concentrés avant tout sur le rendu esthétique et bon heureusement, sur ce point là c'est ok si j'en crois ton commentaire

a écrit :
Sinon, pour la charte graphique j'aime bien lol

mais pour le reste, on a encore des progrès à faire .

Je prends en considération tes remarques et je vais faire les modifs qui me paraissent les moins contraignantes rapidement. Pour le reste je vais voir avec notre graphiste comment pallier les différentes lacunes au fur et à mesure que nous ferons évoluer le design.

En tout cas, un grand merci à vous 3 pour vos commentaires de qualité .

Si d'autres veulent bien nous donner leur avis, qu'il soit esthétique ou technique, n'hésitez pas

codeur a écrit :
Tu as mis en avant le point faible de notre design : l'accessibilité.

(...)

Si d'autres veulent bien nous donner leur avis, qu'il soit esthétique ou technique, n'hésitez pas

Afin qu'il n'y ait pas de malentendu: je ne pense pas que Knarf ait voulu donner à penser que son message était une évaluation d'accessibilité. Ce sont des conseils de cosmétiques judicieux, mais l'accessibilité de ce site pose des problèmes autrement plus importants. De manière immédiate et évidente: les alternatives textuelles, javascript, les tableaux, et ce n'est qu'une petite partie du problème.

Si le sujet vous intéresse, passez par les méthodes d'application des normes d'accessibilité: Accessiweb, RGAA, etc.
Modifié par Laurent Denis (20 Feb 2008 - 09:17)

Je parlais des petits triangles blancs qui servent de puces au titres sur fond turquoise tels que "Les derniers projets", "en savoir plus", etc. sur la page d'accueil.

Ainsi que le petit triangle vert au dessus de la barre verte, et le petit triangle blanc de la barre blanche au dessus de la verte.

a écrit :
je ne pense pas que Knarf ait voulu donner à penser que son message était une évaluation d'accessibilité. Ce sont des conseils de cosmétiques judicieux, mais l'accessibilité de ce site pose des problèmes autrement plus importants.
...
Si le sujet vous intéresse, passez par les méthodes d'application des normes d'accessibilité: Accessiweb, RGAA, etc.

Ah ok, vous faites bien de préciser Laurent. Merci pour les méthodes conseillées. J'arrive à voir quelques solutions assez simples pour améliorer l'accessibilité (ajout d'un menu supérieur textuel, ajout de balises alt et title), mais je ne suis pas certain de bien évaluer l'ampleur des modifs à apporter .

Pensez-vous qu'on puisse améliorer l'accéssibilité avec des solutions pas trop contraignantes (qui ne nécessitent pas une remise en cause de l'ensemble du design) ?

a écrit :
Je parlais des petits triangles blancs qui servent de puces au titres sur fond turquoise tels que "Les derniers projets"

Ah ceux-là. C'est vrai qu'on a pas mal de petits triangles mais perso, j'en suis assez satisfait

Laurent Denis a écrit :
Afin qu'il n'y ait pas de malentendu: je ne pense pas que Knarf ait voulu donner à penser que son message était une évaluation d'accessibilité. Ce sont des conseils de cosmétiques judicieux (...)

Tu as tout à fait raison de préciser que ce n'est pas une évaluation d'accessibilité et que si un travail sur celle-ci doit être engagé il est préférable de suivre les méthodes d'application que tu as nommé. Elles permettront de soulever bien des problèmes non évoqués dans le rapide survol que j'ai pu faire sur 2 pages.

De là à dire que ce sont uniquement des "conseils de cosmétiques judicieux". Je trouve cette remarque un peu réductrice et injuste.

Si tester avec javascript désactivé, mettre des labels, des textes alternatifs, utiliser une taille de police adéquate, tester sans images, tester la navigation au clavier..., ne sont que de la "cosmétique", il y a quelquechose que je n'ai pas du capter quelquepart.
Modifié par knarf (20 Feb 2008 - 16:34)

Relax

"Cosmétique" renvoyait simplement au fait qu'une prise en compte partielle et localisée à quelques aspects, sans évaluation systématique selon une méthode d'application, ne pourrait produire qu'un ravalement de façade, en laissant intacts des problèmes fortement obstructifs.

Rien de réducteur ni d'injuste quand à la valeur des conseils que tu as donnés, qui sont, je le répète, tout à fait judicieux par ailleurs.

<edit>Quoique... On ne se refait pas: je chipoterai bien le bout de gras sur le label{cursor:pointer;}, qui me semble un peu confusant

Pour me racheter, par contre, je plussoie lourdement le:

a écrit :
L'explication de l'astérisque n'arrive qu'à la fin c'est à dire une fois que le formulaire a fini d'être rempli, pourquoi ne pas informer l'utilisateur dès le début du formulaire ou spécifier textuellement que le champ est obligatoire.

ça n'est rattachable à aucun critère WCAG de manière évidente, mais c'est tellement vrai...

</>
Modifié par Laurent Denis (20 Feb 2008 - 19:09)

Pas de problème

En ce qui concerne le {cursor:pointer;} du label je me suis toujours dis que cela pouvait aider une certaine catégorie d'internautes sans pour cela en géner d'autres, je pense plus particulièrement aux personnes atteintes de difficultés motrices et ne sachant pas qu'un label est cliquable. Cela donne une information supplémentaire.

Tu pense que cela peut en dérouter certains?

Laurent Denis a écrit :
Pour me racheter, par contre, je plussoie lourdement le:

L'explication de l'astérisque n'arrive qu'à la fin c'est à dire une fois que le formulaire a fini d'être rempli, pourquoi ne pas informer l'utilisateur dès le début du formulaire ou spécifier textuellement que le champ est obligatoire.

ça n'est rattachable à aucun critère WCAG de manière évidente, mais c'est tellement vrai...

Donc vous verriez mieux le texte expliquant le petit astérisque en debut de form... C'est pas un peu frustrant d'avoir ce texte d'emblée ? A tout hasard auriez-vous un exemple de form qui présente bien celà ?

Bonjour codeur,

Concernant ton formulaire, il s'agit juste, je pense, d'indiquer le plus clairement possible et dès le début de celui-ci que la réponse est obligatoire/requise pour les champs munis d'un astérisque, par exemple dans ton cadre "Inscription" (class="cadre")
Un exemple...Au hasard alors... celui-ci ? (Accepte pour de rire si tu veux voir le formulaire)
Avec peut-être une mise en exergue plus accentuée pour l'explication de l'* ?

Concernant ton site, effectivement graphiquement c'est plaisant, assez agréable dans l'ensemble

Je ne suis pas non plus, à l'instar de Mikachu, très fan de ces triangles, les commentaires que je pourrais faire ressembleraient peu ou prou à ceux de mes prédécesseurs, juste peut-être rajouter une couche pour "l'aération générale" (marges à gauche du conteneur, interlignage/espaces supplémentaires) je trouve cela un peu "touffu"...
Peut-être réhausser le tout avec d'autres choix de polices ? (ce n'est sans doute pas essentiel...)

La partie "derniers projets" manque "de peps", cela me donne peu envie d'aller y faire un tour, je trouve qu'elle prend réellement beaucoup de place par rapport au reste de ta page (par rapport à l'introduction de ton site, du projet) et puis effectivement, il reste un peu de travail sur la partie accessibilité du tableau (si tu le gardes biensûr... )

Pour finir, je ne goûte pas plus que cela le menu/js (je suis le seul à avoir un bug d'affichage sous IE7 ? La liste déroulante est blanche alors qu'il est fonctionnel sous IE6, Firefox, Opera ) outre le fait que je le trouve mal placé (c'est une affaire de goût, rien de méchant, hein ? ) il peut effectivement poser problème si js est desactivé.

Je ne sais pas ce à quoi ressemblait l'ancien site mais celui-ci est plutôt sympa
Bon courage et bonne continuation.

Cdt,
Sylvain