votre avis ux ui sur mon site

[jepstif]

bonjour à tous
toujours à essayer d'améliorer le site https://www.docteurperraudin.com
pourriez vous me donner votre avis sur le plan UX UI ?
et ce que je devrais travailler à vos yeux ?
Ce site comporte 60 pages que j'ai rédigées moi même ; je suis chirurgien
mais certains sites sur le même sujet encaissent 10000 visiteurs différents par jour alors que je tourne autour de 2500 - 3000
pourtant mon contenu est plus apprécié selon mes études feedback
merci beaucoup pour ceux qui prendront un peu de leur temps
jepsti

 

[Marie-Aude]

Bonjour,

d'un point de vue UX / UI ça fait web du début des années 2000.
Côté SEO, beaucoup plus important pour les visiteurs, il y a des erreurs à corriger, comme la structure de titres, un h1 et un seul par page


La signification des ++ et +++ est obscure.

La navigation quand on va d'une page à l'autre n'est pas intuitive.

 

[jepstif]

Bonjour et merci pour votre réponse
je vais modifier mes hn dans la page d'accueil

Par contre il me semblait avoir compris que dans un article, on peut mettre un header avec un h1
comme par exemple
<div id="pbFrequents">
<article>
<header class="pbFrequentsHeader">
<h1>Que faire si...&nbsp;?</h1>
<p>Les <strong>outils</strong>, que vous pouvez utiliser, lorsque votre genou vous importune. <br>
Ce qui ne doit pas empêcher <strong>de prendre, en parallèle, un rdv</strong> avec votre médecin ou un spécialiste.</p>
</header>
<h2> qmklfkqmkj </h2>
<p>bnvvnbvnvn</p>
<h3>
<h2> qmklfkqmkj </h2>
<p>bnvvnbvnvn</p>
</article>

A priori, j'ai donc beaucoup perdu beaucoup de temps à faire des longues pages avec plusieurs articles
mieux vaut probablement diviser mes pages tout en restant avec
Merci pour vos conseils

 

[Marie-Aude]

La longueur des pages ne pose pas de problèmes, mais effectivement "un article une page"/

 

[emualliug]

Je ne suis pas certain que l'UX / UI soient les causes du retard dans le classement, mais on peut dire en tout cas qu'il n'aide pas : il y a clairement des points d'amélioration.

UI pure : c'est en effet assez "daté" comme dirait @Marie-Aude, je dirais même que ça a un côté amateur qui rappelle les pages perso des ces années-là. C'est dommage, parce que je ne doute pas que le contenu soit de qualité, et que, au vu du CV de l'auteur, il passe les critères EAT.

Sur l'UI, une piste peut être de travailler sur les couleurs. Essayer d'être homogène, éviter les "nuances", et d'avoir des couleurs cohérentes entres elles. Je prends ce morceau comme exemple :

texte gris (#3d3d3d) sur fond gris (#f0f0f0).
Le bleu qui entoure le cadre ne va avec rien (bleu RGB pur), le vert de l'arrière plan (#d3f6db) est aussi peu élégant. On a d'autres nuances de bleus : celui des titres au milieu du texte (#576490) et celui des liens (#0070bd).

En haut de la page :


Pour le titre, le texte orange bordé de bleu se passe de commentaire (mais quelle idée), on a encore une nuance de bleu-gris (#3f5c6e) différente de celle des inter-titres, les liens du fil d'Ariane ont un vert différent (#008000).

À tout cela s'ajoutent les annotations sur les images elles-mêmes.

Avoir un code couleur élégant n'est pas si simple. Le plus facile est de partir la palette d'un framework / thème qu'on aime bien. Je suis assez fan de celui de Bootstrap, qui est un classique, peut être un peu trop vu et manquant du coup de singularité, mais tout de même :

Les couleurs sont vives, tranchées (si ce n'est celle affectée à .bg-info un peu trop proche de .pg-primary), mais néanmoins très cohérentes entre elles (on reste globalement dans la même luminosité et la même saturation).

La police d'écriture pourrait être améliorée, le texte avec empâtement ne me paraît pas le choix le plus adapté, pas pour les titres en tout cas. De plus, lorsque tu utilises une police spécifique ("Constantia" ici), il faut en fournir les fichiers pour qu'elle s'affiche chez l'internaute (chez moi, par exemple, c'est une police de substitution).

En UI, y'a aussi le bandeau en haut de page, pourquoi ne fait-il pas toute la largeur de l'écran sur les pages intérieures.

Les images ne sont pas forcément au bon format, ce qui donne un aspect basse résolution. Par exemple https://www.docteurperraudin.com/images/foot-photo-libre.jpg fait 330px de large et est d'une qualité médiocre, et en plus elle est upscalé à 600px sur la page https://www.docteurperraudin.com/ligament-croise-anterieur-entorse-conduite-a-tenir.html où elle est utilisée.

Côté UX, pas mal de choses à redire aussi.

Quand je parcours une page, ce qui est un titre ne me saut pas aux yeux. Un h2 fait 18px, un h3 17px… De façon générale, les mises en formes des titres, sont pas top : l'encadré des h2 fait penser aux encadrés dans le texte, la ligne au-dessus des h3 fait penser à une séparation plutôt qu'à une décoration du titre.

Rester plus sobre, plus simple. Une mise en forme qui marche bien pour les titres : les lettres capitales (text-transform: uppercase;). Au passage (mais tu n'interroges que sur l'UX/UI) la sémantique est pas bonne, tu as un h1 en haut de page (ok), puis des h1 au milieu de contenu, qui sont dans un <header> !.

Beaucoup de choses ne sont pas assez constantes d'une page à l'autre, ou sur une même page. Les liens sont généralement en bleu cyan, passent en orange au hover (bof), perdent leur soulignement (pourquoi ?). Mais dans le fil d'Ariane, les liens sont en vert, et n'ont aucun effet d'hover. En pied de page, c'est du bleu cyan, non souligné.

Le bandeau d'en-tête varie suivant les pages, sur https://www.docteurperraudin.com/ligament-croise-anterieur-entorse-conduite-a-tenir.html j'ai un espèce de menu que je dois cliquer pour afficher même sur écran large, pas sur https://www.docteurperraudin.com/prothese-de-genou-index.html, sur https://www.docteurperraudin.com/arthrose-genou.html le menu est à gauche, la vignette à droite (l'inverse du premier lien), https://www.docteurperraudin.com/lesion-du-menisque.html là j'ai rien du tout…

Le menu de navigation "Sur cette page", ne sert pas à grand chose, un sticky avec un scrollspy serait plus utile. Et puis incohérent d'une page à l'autre, absent sur https://www.docteurperraudin.com/ligament-croise-anterieur.html, liens en gris sur https://www.docteurperraudin.com/lesion-du-menisque.html, en bleu ici : https://www.docteurperraudin.com/ligament-croise-anterieur-entorse-conduite-a-tenir.html, etc.

Bref, pas mal de choses à revoir.

 

[emualliug]

Pour compléter, 2500 - 3000 visiteurs uniques / jour pour un site d'une soixantaine de page, ça me paraît tout de même pas mal du tout, sur du référencement naturel en intention informative.

 

[jepstif]

Bonjour @emualliug
Formidable réponse ! merci beaucoup
je vais m'y mettre

 

[Fred]

La page d'accueil est inaccessible .... ("la page n'est pas redirigée correctement)

 

[rick38]

Marche pas.

 

[jepstif]

Marche pas.

Bonsoir Rick38
petit bug passager et réglé
merci

 

[jepstif]

La page d'accueil est inaccessible .... ("la page n'est pas redirigée correctement)

bonsoir Fred
oui effectivement mais c réparé
j'avais essayé de faire un redirect de docteurperraudin.com/index.htm vers docteurperraudin.com/ (google a choisi la seconde comme canonical et parle de pages dupliquées...

merci d'avoir regardé

 

[frenchhorn]

Le design est totalement à revoir, le mieux serait d'utiliser un joli thème wordpress, joolma ou autre CMS
de nos jour, si le design n'est pas léché, cela veut dire pour beaucoup d'internaute que c'est spammy