http://coach-sportif-poitiers.fr/

Bonjour,
Je reviens vers la communauté d’Alsa-création pour obtenir son avis concernant ma dernière réalisation. Ce site a été réalisé pour un professionnel du sport qui nécessite une vitrine d’une partie blog.
N’hésitez pas à me faire part de vos retours concernant le graphisme le code, etc.
Le site n’est pas optimisé pour les interfaces mobiles (résolution<768px)
Merci d’avance
Bonjour,

Je vois deux gros défauts ;

- le menu du bas ; qui vient sur le contenu au passage de la souris et trop violent à mon gout ; tu commence par relever le contenu puis le faire glisser de la gauche vers la droite ; pour moi cette dernière animation est de trop.

- les pages qui contiennent les différentes prestations : ce sont des pages qui contiennent des paragraphes, du texte et du texte ; lorsque tu arrives sur ces pages (en résolution 1024*768 = la résolution la plus courante) on ne voit rien juste un logo et le titre. Il faudra que tu trouve autre chose pour remettre en valeur la fonctionnalité principal.

Personnellement je pense que le header et le menu du bas sont de tailles importante et ne laisse pas de place pour le contenu (élément majeure dans un site).

Peut être envisager de supprimer le menu du bas ? et de supprimer le diaporama sur les pages à contenu ?
Modérateur
rastaf86 a écrit :
http://coach-sportif-poitiers.fr/


Je reviens vers la communauté d’Alsa-création


http://alsacreation.com/ et puis c'est pas comme s'il y avait un concours pour ne pas oublier le s http://www.alsacreations.com/concours/lire/23-toujours-avec-un-s.html Smiley lol

Au niveau de la critique, pour un site classé en "pro" je trouve le design assez amateur: le gradient sur le haut pour masquer un bout des photos qui se termine abruptement sur le côté.

Au niveau ergonomie, je ne comprends pas la navigation au premier coup d'oeil : est-ce les "bulles" de couleur dans ces cercles au milieu de la page ? Faut-t-il utiliser le bouton "menu" en bas ? Ces bulles menu sont d'autant plus déstabilisantes sur mobile car rien n'indique qu'elles sont cliquables. Un utilisateur qui ne connait pas le site pourrait donc les prendre pour des "badges" et ne pas chercher à cliquer dessus.
L'effet de transition sur le menu du bas est d'ailleurs elle aussi très étrange, un truc qui monte, et un autre qui arrive depuis la gauche au même moment c'est "too" much.
De manière générale, je ne comprends pas cette tendance, à mon avis héritée du mobile (super) de masquer le menu derrière un bouton "menu" alors qu'il y a de la place sur l'écran. Quant à le mettre en pied de page, là encore, c'est très déstabilisant pour l'utilisateur. D'autant plus que 50% du menu répète les bulles de l'accueil, je suis donc vraiment perdu en tant qu'utilisateur pour la navigation sur le site.
C'est encore pire sur mobile où là encore, rien n'indique vraiment à l'utilisateur que le mot "menu" est cliquable. J'ai d'ailleurs l'impression que toute la partie basse "miniatures de blog" + "menu" ne sont pas stylées pour la version responsive ?
Je n'ai pas testé sur mon mobile, sur pc il s'ouvre au survol, il se passe quoi sur mobile ?

Toujours niveau ergo, même s'il n'est pas "rapide" le slider automatique c'est pas l'idéal. Celui-ci ne propose ni contrôle, ni bouton pause. On se retrouve donc piégé à subir un slider d'image.
Enfin, certains liens du bleu clair du blog manquent à mon avis de contraste quand ils sont sur un fond bleu.

Au niveau du code, ça fait un moment que j'avais pas vu
<meta name="HandheldFriendly" content="True">

Cette balise sert-elle encore à quelque chose ?
Et tu as des scripts dans le head et footer, une raison particulière ?

A mon avis, il reste encore un peu de travail pour que le site fasse "pro" mais tu es sur la bonne voie Smiley smile
Pour répondre à minitruc,
OK pour l'animation du contenu sur le menu, elle n'a pas trop d'intérêt, je travaillerai différemment sur les menus des prochains sites. Concernant les contenus, notamment ceux des pages des prestations, je vais voir pour modifier la taille du thumbnail des pages (logo des prestations) pour mettre plus en valeur le contenu qui est caché sur les écrans de petite résolution.
Je vais retenir les remarques sur les bulles et leur manque d’indication sur le faite qu’elles sont cliquables (c’est vrai qu’il faut tout faire pour faciliter l’expérience utilisateur….)
Pour rappel dans la demande de critique j’ai indiqué que le site n’était pas optimisé pour les interfaces mobiles, travaillant avec les médias queries cela correspond pour ce site aux résolutions <inférieurs à 768px. Donc désolé l’interface n’a pas été stylisée pour cette résolution… c’est comme ça, désolé.
Pour répondre à une des questions de Stéphanie W. sur l’ouverture du menu, il y a deux façons pour l’ouvrir, en mode survol comme vous l’avez remarqué. Pour les écrans tactiles, j’ai rajouté un script avec une fonction OnClick et un toggle… J’ai testé sur ma tablette et le click, fonctionne.
Concernant l’ergonomie du menu, je l’ai positionné en bas et il me semblait que l’icône de la main avec les chevrons et le mot « menu » semblait suffisante pour que l’utilisateur devine que cet élément correspondait à un menu. Sa position basse a été choisie pour que l’utilisateur s’intéresse en premier lieu au contenu de la page d’accueil avec les vignettes (les bulles) des logos des prestations de mon client (et aussi aux textes). J’ai eu plusieurs fois des remarques sur le manque d’intuitivité de ce menu, je reviendrais surement lors de mes prochains projets à une conception plus classique…
Pour le slider, je n’estime pas nécessaire de mettre à disposition des boutons de commande, à quoi bon ? Ce ne sont que des images qui illustrent l’activité du client, je pense que de rajouter ces boutons pourrait embrouiller un utilisateur. L’objectif ce ne sont pas les photos, mais le contenu. Stéphanie, penses-tu que ces boutons sont vraiment nécessaires?
Pour en revenir sur le problème de résolution, rencontré par minitruc, je vais repenser ma construction de maquette, et je commencerai par une résolution assez basse comme le 1024* 768 puis remonter. En revanche, j’avais lu que la résolution la plus utilisée maintenant n’était plus le 1024*768, mais le 1366*768, malheureusement, je n’ai plus la source de ce que j’avance… Smiley langue sujet à creuser…
Je n’ai pas répondu à toutes vos questions, car pour l’instant le temps me manque je corrigerai cela d’ici peu, ceci-dis, merci une fois de plus pour toutes vos remarques constructives cela m’apporte beaucoup, comme à chaque fois. À bientôt
rastaf86 a écrit :

Pour rappel dans la demande de critique j’ai indiqué que le site n’était pas optimisé pour les interfaces mobiles, travaillant avec les médias queries cela correspond pour ce site aux résolutions &lt;inférieurs à 768px. Donc désolé l’interface n’a pas été stylisée pour cette résolution… c’est comme ça, désolé.


1024*768 n'est pas une résolution mobile et heureusement même sinon c'est pas une poche qui nous faudra mais une sacoche PC Smiley langue de ce fait 1024*768 est une résolution PC et LA résolution PC portable la plus vendue... Si tu n'inclus pas çà ; tu n'inclus même pas tous ce qui est netbook et notebook... Enfin j'dis çà Smiley smile j'ai peut être tord de croire que les utilisateurs ne pensent pas toujours à scroller sur des site qui ne pensent pas à eux Smiley cligne
Modérateur
rastaf86 a écrit :
J’ai eu plusieurs fois des remarques sur le manque d’intuitivité de ce menu, je reviendrais surement lors de mes prochains projets à une conception plus classique…

Du coup tu laisses un menu non intuitif sur ce site ?

rastaf86 a écrit :
Pour répondre à minitruc,
Pour le slider, je n’estime pas nécessaire de mettre à disposition des boutons de commande, à quoi bon ? Ce ne sont que des images qui illustrent l’activité du client, je pense que de rajouter ces boutons pourrait embrouiller un utilisateur. L’objectif ce ne sont pas les photos, mais le contenu. Stéphanie, penses-tu que ces boutons sont vraiment nécessaires?


Oui je pense que c'est nécessaire, et même indispensable. Ton carrousel est une distraction visuelle pour l'utilisateur. Au bout d'un moment il est impossible de se concentrer sur du contenu quand il y a un truc qui bouge dans le coin de l'oeil. Fais le teste, ouvre la page avec le carrousel et une autre page et voit au bout de combien de temps tu en a marre d'avoir un truc qui bouge dans le coin de l'oeil.

Si ton but est vraiment de se concentrer sur le contenu et non les photos, ton carrousel d'image est totalement contre productif, puisque l'oeil de l'utilisateur y sera attiré à chaque fois qu'il bougera. Il vaut mieux soit ne pas avoir du tout de carrousel, soit au moins avoir une option de "pause". Les bouton image suivante/précédent sont quant à eux encore une fois une bonne pratique d'ergonomie et d'accessibilité pour que l'utilisateur ai un contrôle supplémentaire. A la rigueur ceux là pourraient être négligés, par contre un bouton pause à mon avis trouverait sa place ici.

Une bonne ressource sur le sujet : http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/ #1
Modifié par Stéphanie W. (07 Sep 2013 - 19:02)
Stéphanie W. a écrit :

Au niveau du code, ça fait un moment que j'avais pas vu :
<meta name="HandheldFriendly" content="True">
Cette balise sert-elle encore à quelque chose ?


Désolé, je réponds avec un peu de retard, voici un lien qui explique bien l'utilité de cette ligne et également des autres que j'utilise pour la compatibilité sur mobile:

http://davidbcalhoun.com/2010/viewport-metatag

Certes cette fonction n'est plus très utile, car la plupart des navigateurs mobiles interprète la ligne suivante:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>


Mais comme on dit, "qui peu le plus, peu le moins..."