Bonsoir,

je gère ce site (design et code) : Santé Globale

J'aimerais entendre des critiques de pro mais surtout j'aimerais des conseils sur les couleurs : je trouve le site en général trop blanc : comme si les éléments flottaient dans une mer de blanc les entourant.

J'ai essayé divers schèmes de couleurs en m'aidant de http://colorschemedesigner.com/ mais le rendu me déplaisait. J'ai envisagé des fonds de page (photo semi-transparente) mais ça surchargeait pas mal tout de suite...

Bref, je vous écoute Smiley smile .
Salut, Je ne suis pas le pro que tu recherche, mais je te donne quand même mon avis, tu en fera ce que bon te semble.

Alors déjà félicitation pour le design, pour un site de e-commerce tourné sur la santé, je le trouve très clair, les informations sont la où elles doivent êtres, l'interface est limpide, les typo sont jolie et lisibles, enfin bref pour moi c'est un sans fautes. (enfin si il y a quand même quelque trucs à changer Smiley cligne ).

Pour ce qui est des trucs à améliorer voici une petite liste :

- Le logo lorsque tu scroll et que ton header diminue de taille devient illisible (en tout cas la baseline, il faudrait peut être faire en sorte qu'elle disparaisse avec un overflow par exemple).
- Sur la page d'accueil, au niveau des 4 vignettes ("des consultations..., une boutique...") Je trouve un peu bizarre (incohérent) que certaines vignettes soit des photos "pleines" et d'autres soit détouré.

- Pour la partie boutique en ligne sur la page d'accueil toujours, le fait que des produits propose des options ou non déforme un peu tout ça, car les boites n'ont alors plus la même hauteur et l'agencement diffèrent. Tu pourrais améliorer cela en mettant le bouton ajouter au panier avant la div.avia_cart_buttons comme c'est le cas pour les produits nécessitant un choix d'options.
- On retrouve le même problèmes dans la liste de produits apparenté, en bas des pages produits (ex) ou l'on remarque que déjà les boutons, on ne sait pourquoi ne prennent pas toutes la largeur et encore une fois, le bouton ajouter au panier n'est pas dans le même ordres que le bouton choix d'options.

- Pour le panier si tu peux "mettre à jour" dynamiquement (en js) le panier ce serait bien (ce n'est par contre pas un point crucial).

- Dans cette page tu pourrais un peu plus aéré le texte.

- Bouton search à traduire dans ton formulaire et peut être faire en sorte que l'on comprenne mieux que c'est un input car en l'état je trouve que c'est difficilement compréhensible.

- Pour la sidebar (par exemple sur cette page) vu qu'elle est fixe (déjà elle est en superposition avec le header lui aussi fixe) et en plus on ne peut pas voir toute les information de cette sidebar dont le module de rendez vous qui une fois déployé prend une certaines hauteur). Peut être vaudrais t il mieux créer une page dédié à la prise de rendez vous (elle existe peut être en tout cas je ne les pas trouvé. Sinon fait étrange, quand je navigue sur cette page (et seulement celle ci) mon ventilateur ce met à tourner et chrome ralentit dangereusement, ce n'est peut être pas la page car mon ordi devient chaque jour un peu plus vieux, mais c'est étrange que une fois la page changé mon ventilo ce calme, utilise tu beaucoup de js sur cette page.

Voila pour ma critique, et en tout cas le blanc ne ma pas choqué au contraire, il nous met dans un environnement aseptisé, calme, en rapport avec le site.
thej8 a écrit :

Pour ce qui est des trucs à améliorer voici une petite liste :

- Le logo lorsque tu scroll et que ton header diminue de taille devient illisible (en tout cas la baseline, il faudrait peut être faire en sorte qu'elle disparaisse avec un overflow par exemple).


C'est une nouveauté récente. En fait je ne sais pas si c'est une bonne idée ce menu qui suit le défilement. Je l'ai ajouté en pensant que cela fluidifierait la nagivation, évitant à l'utilisateur de remonter en haut de la page pour trouver le menu.

Mais ça a l'inconvénient de réduire la zone de lecture et le logo ne s'adapte pas formidablement effectivement.

thej8 a écrit :

- Pour la partie boutique en ligne sur la page d'accueil toujours, le fait que des produits propose des options ou non déforme un peu tout ça, car les boites n'ont alors plus la même hauteur et l'agencement diffèrent. Tu pourrais améliorer cela en mettant le bouton ajouter au panier avant la div.avia_cart_buttons comme c'est le cas pour les produits nécessitant un choix d'options.
- On retrouve le même problèmes dans la liste de produits apparenté, en bas des pages produits (ex) ou l'on remarque que déjà les boutons, on ne sait pourquoi ne prennent pas toutes la largeur et encore une fois, le bouton ajouter au panier n'est pas dans le même ordres que le bouton choix d'options.


Pour tout vous avouer, c'est un problème que je ne suis pas arrivé à résoudre. Je n'ai aucune idée de la raison pour laquelle le premier bouton "Ajouter au panier" ou "Choix des options" de chaque liste de produit est en bas.

C'est même pire que ça, en réalité il y a deux boutons "Ajouter au panier" :

http://pix.toile-libre.org/upload/original/1400170573.png

Je voulais supprimer ce bouton vert et laisser la ligne d'au-dessus en changeant le fond (en vert) et la police (en blanc). Mais ça n'a fait que cafouiller...


thej8 a écrit :

- Pour le panier si tu peux "mettre à jour" dynamiquement (en js) le panier ce serait bien (ce n'est par contre pas un point crucial).


Il me semble que c'est le cas, sinon je ne vois pas de quoi vous parlez.

thej8 a écrit :

- Dans cette page tu pourrais un peu plus aéré le texte.


C'est fait, merci Smiley smile .

thej8 a écrit :

- Bouton search à traduire dans ton formulaire et peut être faire en sorte que l'on comprenne mieux que c'est un input car en l'état je trouve que c'est difficilement compréhensible.


Je n'ai pas compris de quel bouton il s'agit ?

thej8 a écrit :
- Pour la sidebar (par exemple sur cette page) vu qu'elle est fixe (déjà elle est en superposition avec le header lui aussi fixe) et en plus on ne peut pas voir toute les information de cette sidebar dont le module de rendez vous qui une fois déployé prend une certaines hauteur).


Corrigé merci.

thej8 a écrit :
Sinon fait étrange, quand je navigue sur cette page (et seulement celle ci) mon ventilateur ce met à tourner et chrome ralentit dangereusement, ce n'est peut être pas la page car mon ordi devient chaque jour un peu plus vieux, mais c'est étrange que une fois la page changé mon ventilo ce calme, utilise tu beaucoup de js sur cette page.


J'ai la même chose sous firefox. La page est assez chargée il faut dire, mais je soupçonne (?) le slider d'être à l'origine du problème (?).

Merci pour vos remarques !
Alors, tient un autre truc, les adresses : /?page_id=1122 , ne sont vraiment pas "SEO-friendly", et même "User-friendly" (oui parce que je suis bilingue en faite Smiley lol ). Si tu utilise un CM (ce qui à l'air d'etre le cas) tu doit pouvoir changer ça dans les paramètres.

Pour le menu, autant j'aprécie pas souvent le fait de le mettre en fixed, autant dans ce cas, ca permet d'avoir le bouton du panier à porter de main et c'est fait de maière assez fluide pour passer inapercu. Par contre, je ne suis pas sur que ton "#header.meta" doit être en fixe.

Pour les boutons ajouter au panier, si tu doit en garder qu'un (ce qui parrait logique) laisse les verts qui sont plus facile à identifier en temps que boutons.

Pour ce qui est du panier, chez moi il y a un bouton mettre à jour le panier, pour faire changer le prix si on modifie les quantités.

Pour le bouton search, c'est le boutons search du forum : http://www.sante-globale.fr/?post_type=forum

Sinon les liens de ton menu déroulant "boutique" son souligné au hover par un vert clair qui sort complètement de la charte graphique du site, pourquoi ne reprend tu pas le vert foncé qui souligne les pages active (#507210) et en passant le texte en blanc si le contraste n'est pas assez important.

Et en regardant mieux, même en position "normal" la baseline de ton logo est peu lisible (peut être la police ou la taille ou une mauvaise qualité d'image ?)

Enfin pour ton problèmes de boutons que tu c'est pas pourquoi que ca s'affiche le bouzin, tu peux nous mettre un extrait du code pour qu'on voit avec toi.
Je dois vraiment être blasée, mais en un coup d'oeil je me suis dit "tiens encore un template WP acheté".
Bon, au final les utilisateurs ne le remarqueront pas, la simplicité du design minimaliste est ici à mon avis pas forcément un mal : pour un site sur de la santé c'est propre, agréable à lire, j'aime beaucoup l'adaptation du template (qui a l'air super complet en fait, je me le met de côté merci ^^).
Quelques détails :
- au survol des sous-menus le fond vert avec texte noir est assez illisible, peut-être changer l'effet ?
- l'adaptation du menu du haut sur mobile avec les liens centré n'est pas forcément très lisible ou cliquable (on perd beaucoup l'architecture d'information avec la liste de liens)
- sous 1140 tu as le numéro de téléphone qui passe sous le menu Smiley cligne
- sous 990 c'est carrément le 2em gros menu qui passe sous le logo ^^

+1 pour les adresses, avec WordPress tu peux avoir des urls plus sympas si tu cherches du côté des permaliens

Pour la remarque de @thej8 sur le logo, effectivement il est illisible quand tu scrolles. Tu peux peut-être tout simplement retirer la baseline ? Au niveau du menu fixé, j'ai vu passer des études qui montraient effectivement que ça aide les utilisateurs à naviguer. Par contre toi tu as fixé 2 menus, je me demande si le 1er ne devrait pas ne pas être fixé. Dans l'absolu, les liens du 1er (mention légales, contacts, comment commander) sont à mon avis des liens qui ont plus leur place dans le pied de page.

En tout cas joli boulot Smiley smile
cosimo a écrit :

J'ai essayé divers schèmes de couleurs en m'aidant de http://colorschemedesigner.com/ mais le rendu me déplaisait. J'ai envisagé des fonds de page (photo semi-transparente) mais ça surchargeait pas mal tout de suite...
Bref, je vous écoute Smiley smile .

Bonjour, je ne connais pas le site que tu utilises et je n'en ai pas exploré les possibilités mais je sais qu'il existe Adobe Kuler qui est gratuit, en ligne et fonctionne très bien pour faire ce genre de choses.
https://kuler.adobe.com/
Modifié par ohweb (19 May 2014 - 10:47)
Merci pour tous ces retours.

J'ai commencé à corriger certains problèmes :
- lisibilité dans le sous-menu de "Boutique", désormais le texte est "vert" avec soulignement lors du passage du curseur.
- les mentions légales ont été envoyées dans le pied de page, le numéro de téléphone ne passe plus à la ligne lorsque la résolution est inférieure à 1140px
- le logo a été modifié (plus d'accroche) et reste lisible après réduction.

Les problèmes que je ne parviens pas à résoudre :
- je n'arrive pas à avoir uniquement le "gros menu" en positionnement fixe (sans la barre avec N° de téléphone, icônes sociales, etc.)
- *** le logo passe sous l'élément "Accueil" en dessous de 1340px, sous l'élément "Votre thérapeute" en dessous de 1140, sous les 4 premiers éléments en dessous de 990 (ça craint ça).

Concernant le dernier problème, je me vois mal passer en menu mobile dès qu'on atteint 1340...

Pour l'instant je l'ai centré au dessus du menu. Que faire d'autre ? Supprimer des éléments ? Réduire la taille du logo (limité) ? Le logo devrait rapetisser en dessous de 1340 comme il le fait lorsqu'on fait défiler.

Pour le coup, que devrais-je vous montrer pour m'aider à séparer le barre d'en-tête, lorsque l'on fait défiler, du reste du menu ?
Bonjour,

j'ai suivi vos conseils et modifié les permaliens. Désormais de la forme /%category%/%postname%/.

Je suis en train de regarder pour la mise à jour dynamique du panier en fonction de la quantité (j'ai trouvé ça : https://gist.github.com/webaware/6260468 ). Pour l'instant l'intégration ne marche pas.