Bonjour à tous,

Je viens de finir ce site: http://fabuleuxfilmsformidables.fr

"Société de production audiovisuelle installée à Paris (19ème), Les Fabuleux Films Formidables filment et montent pour vous des films dont vous êtes le héros."

Qu'en pensez vous ? (ergonomie, design, accessibilité, ...)

Merci d'avance !
Bonjour

J'ai un tit bug graphique sur le bloc "votre film de vacance" qui est plus petit que celui du dessus.

On sent de la SEO mal faite dans les heading :
<h2><img src="images/votre_film_mariage.png" alt="Film de Mariage, cérémonie de mariage, vidéo de mariage | Les Films Formidables"></h2>

Alors que l'image ne porte QUE "votre film de mariage". L'utilité du contenu du alt c'est d'abord pour faciliter la navigation de ceux qui utiliser un lecteur d'écran (ou console braille, où navigateur text-only...) pas pour attirer le robot, là c'est particulièrement gavant.

Sur la page de contact les label sont mal utilisés :
<label>Votre Nom:</label>
<input type="text" name="name">

Devrait être :
<label for="name">Votre Nom:</label>
<input type="text" name="name" id="name">

La position des champs est d'ailleurs un peu perturbante. En règle générale on trouve les champs mail et nom avant le champs message.
Le message d'erreur renvoyé par le formulaire en cas d'erreur n'est très clair :
a écrit :
Veuillez remplir correctement tous les champs!

Il vaudrait mieux indiquer quel(s) est(sont) le(s) champs mal(s) rempli(s) (et pas uniquement avec une mise en couleur). Préciser la nature du problème serait également un plus. Et ajouter un espace avant le point d'exclamation.

Dans la section portfolio, la police utilisée sur les images n'est pas facile à lire.
Bonjour,
graphiquement ça manque de pertinence et de cohérence même si la mise en page est assez claire dans l'ensemble.

> Je doute que la typo du logotype aux accents festifs et cartoon soit le meilleurs choix à faire s'agissant de cette société de production audiovisuelle. D'autre part le typo de l'entreprise et de la tagline (des films fait pour vous) ne s'associent pas bien et le placement de cette dernière est un peu trop hasardeux.

> Il y a des incohérences dans la gestion de la tailles des silhouettes de droite, ce qui donne un aspect brouillon mais l'idée est intéressante Smiley cligne

> Le léger dégradé gris du fond n'apporte rien et l'association du gris et d'un brun délavé n'est pas très heureuse, c'est un peu fade.

> La séparation des onglets par une espace d'environ 10px n'est pas nécessaire.

> Le texte d'intro est un peu trop gros.

> Même remarque pour les titres que celles que j'ai faites sur le logotype.

> Il faudrait augmenter l'interligne de tes paragraphe à 1.4em (1em=100%) minimum équilibrer d'avantage les blancs (espaces intermot et interlignes).

> Veillez à obtenir un contraste minimum (le texte du bouton contactez-nous manque de contraste avec son fond jaune

Il y aurait encore autre chose à améliorer dire mais je crois que j'en ai déjà assez dis Smiley cligne
Modifié par Hermann (09 Feb 2009 - 11:20)
Un grand merci pour ces retours très constructifs. Ça me permet de progresser et de prendre conscience de certaines erreur.

@Laurie-Anne :

Sur le bloc « votre film de vacances » / Ce n'est pas un bug, le bloc est plus petit car son contenu est plus petit, c'est voulu. D'ailleurs ce bloc à les même dimensions que tous les autres, il n'y a que le bloc « CV vidéo » qui est plus grand.

SEO mal faite / OK entièrement d'accord avec vous / j'ai rectifié. Ces derniers jours j'ai lu beaucoup de choses sur le référencement. Je serait intéressée par quelques conseils concret par rapport au cas de ce site.

Label mal utilisé / Ok / je vais y remédier.

Position des champs perturbante. Je ne suis pas tout à fait d'accord. Certes la position des champs n'est pas tout à fait habituel. Mais pourquoi ce conformer à « l'habituel ». Puisque finalement c'est juste une question d'habitude, le formulaire n'en reste pas moins clair et la zone textarea est mise en valeur par sa position, c'est quand même ça le plus important.

Validation pas très clair / je suis plus ou moins d'accord / Personnellement je trouve la validation des champs assez claire, certes le fait de rajouter le type d'erreur serait un plus. Quand on regarde la validation des formulaires en général, mise à part ceux validés côté client en Javascript (encore trop complexe à mettre en place pour un débutant comme moi) je trouve que dans la moyenne peu d'efforts sont faits. (j'ai testé plusieurs formulaire sur pas mal de site, très peu renvoi un avertissement en cas d'oubli ou d'erreur, d'ailleurs la plupart vous font même croire que votre message à bien était transmis).

Police pas facile à lire / Ok, je suis d'accord. J'ai du me plier au exigences de la personne pour qui j'ai réalisé le site.


@Hermann :

« graphiquement ça manque de pertinence et de cohérence même si la mise en page est assez claire dans l'ensemble. »
Pourriez_vous me soumettre quelques liens de sites que vous trouvés graphiquement pertinents et cohérents ? (attention pas de mal entendu, je ne dis pas que je ne suis pas d'accord avec votre remarque, si vous pouviez me montrer quelques exemples en détaillant un peu je pourrait surement progresser).

Pour la typo / Je suis d'accord avec toi, j'ai du me plier à la volonté de la personne pour qui j'ai réaliser le site.

Pour les incohérences dans la gestion des silhouettes (c'est le seul élément du site que je n'est pas réalisé). J'ai du l'intégrer tel quel. N'étant pas graphiste je ne sais pas trop quoi en penser. (mais je ne trouve pas ça choquant, je penses que c'est le plus important non ?

« La séparation des onglets par une espace d'environ 10px n'est pas nécessaire. » / N'est pas nécessaire dans le sens ou les 10px devraient être réduit de moitié ou dans le sens ou les onglets devait être collés ? Personnellement je trouves que légèrement espacés les onglets sont plus lisibles.

Texte d'intro un peu trop gros / Je suis d'accord, je vais y remédier, cependant je ne souhaite pas qu'il se confonde avec le reste du texte dans les pages.

Pour les titres, je me suis également plier aux exigences de la personne pour qui j'ai réaliser le site.

« Il faudrait augmenter l'interligne de tes paragraphe à 1.4em (1em=100%) minimum équilibrer d'avantage les blancs (espaces inter-mot et interlignes). »
Je vais prendre en compte cet remarque.

Pour le contraste entre texte et bouton je suis d'accord, je vais forcer un peu la couleur du texte.

Encore merci pour vos remarques, n'hésiter pas à me donner d'autres conseils, ça m'aide beaucoup.
Remay a écrit :

Pourriez_vous me soumettre quelques liens de sites que vous trouvés graphiquement pertinents et cohérents ? (attention pas de mal entendu, je ne dis pas que je ne suis pas d'accord avec votre remarque, si vous pouviez me montrer quelques exemples en détaillant un peu je pourrait surement progresser).

Pour commencer tu peux me tutoyer Smiley cligne
Désolé pas trop le temps pour ça, en disant cela je voulais essentiellement faire référence aux différentes remarques que je t'ai faites.

Remay a écrit :

Pour les incohérences dans la gestion des silhouettes (c'est le seul élément du site que je n'est pas réalisé). J'ai du l'intégrer tel quel. N'étant pas graphiste je ne sais pas trop quoi en penser. (mais je ne trouve pas ça choquant, je penses que c'est le plus important non ?

Non effectivement ce n'est pas le plus important, c'est juste que ça la rendrait plus crédible dans son ensemble Smiley cligne

Remay a écrit :

« La séparation des onglets par une espace d'environ 10px n'est pas nécessaire. » / N'est pas nécessaire dans le sens ou les 10px devraient être réduit de moitié ou dans le sens ou les onglets devait être collés ?

Collés, voire très légèrement espacés, l'effet dentelé que cela provoque n'étant pas des plus esthétique.

Remay a écrit :

Texte d'intro un peu trop gros / Je suis d'accord, je vais y remédier, cependant je ne souhaite pas qu'il se confonde avec le reste du texte dans les pages.

Non en effet c'est préférable, attention à ne pas avoir des lignes trop longues.
Remay a écrit :
Sur le bloc « votre film de vacances » / Ce n'est pas un bug, le bloc est plus petit car son contenu est plus petit, c'est voulu. D'ailleurs ce bloc à les même dimensions que tous les autres, il n'y a que le bloc « CV vidéo » qui est plus grand.


Je parlais en fait de la largeur du bloc. Les trois autres blocs, sont clairement alignés (les deux du haut horizontalement, et les deux de droite verticalement), il a donc quelquechose qui chose (j'utilise IE6).

Remay a écrit :
SEO mal faite / OK entièrement d'accord avec vous / j'ai rectifié. Ces derniers jours j'ai lu beaucoup de choses sur le référencement. Je serait intéressée par quelques conseils concret par rapport au cas de ce site.

En fait ce n'était pas tant un problème de SEO, mais d'accessibilité (et ce n'est pas corrigé, du moins en ligne). Le but des attribut alt c'est de fournir un contenu IDENTIQUE à celui portée par une image donc rajouter le titre du site dans tous les "alt" c'est stupide et énervant pour ceux qui en ont besoin. Je parlais de SEO, car c'est une erreur courrante que de mettre des mots clés "cachés" dans une page alors qu'ils n'ont pas de raison d'être (et qu'ils gênent plus qu'ils n'apportent).

Remay a écrit :
Position des champs perturbante. Je ne suis pas tout à fait d'accord. Certes la position des champs n'est pas tout à fait habituel. Mais pourquoi ce conformer à « l'habituel ». Puisque finalement c'est juste une question d'habitude.

Je dirais, justement parce que c'est une question d'habitude. Les utilisateurs ne vont pas apprendre un fonctionnement particulier juste pour un site, il s'en détourneront. Ici ce n'est pas tellement choquant, mais c'est un peu perturbant tout de même, ce n'est pas exactement ce à quoi on s'attend.

Remay a écrit :
Validation pas très clair / je suis plus ou moins d'accord / Personnellement je trouve la validation des champs assez claire, certes le fait de rajouter le type d'erreur serait un plus. Quand on regarde la validation des formulaires en général, mise à part ceux validés côté client en Javascript (encore trop complexe à mettre en place pour un débutant comme moi) je trouve que dans la moyenne peu d'efforts sont faits. (j'ai testé plusieurs formulaire sur pas mal de site, très peu renvoi un avertissement en cas d'oubli ou d'erreur, d'ailleurs la plupart vous font même croire que votre message à bien était transmis).

Pour la validation, il y a deux problèmes :
1. Le message d'erreur n'est pas clair
2. les couleurs seules sont insuffisante pour signaler l'origine d'un problème.
Que ce soit en PHP ou JS (un script de validation en JS, doit toujours être doublée de la même validation en PHP), ce n'est pas si difficile à coder, il suffit juste de faire la validation par étape et de signaler à chaque étape de validation non passé qu'il y a un problème (par exemple en générant une chaine de caractères $erreur et en lui ajoutant à chaque erreur rencontrer, le message d'erreur associé).

Attention au "les autres font moins bien, alors c'est pas la peine que je fasse mieux". Ce n'est pas parce que beaucoup font mal les chose qu'il faut faire comme eux.
Salut. Juste un message pour dire que ton titre fait un peu pléonasme : "formidables" et "fabuleux"... Smiley ohwell Smiley ohwell