Avis pour rendre ce site de blindtest plus fun mais professionnel

[JulesBlindtest]

Bonjour à tous,

Je développe sur mon temps libre un site de blind test en ligne (quizz musicaux).

Comme tout bon développeur, je suis assez mauvais en design :') et je dois reconnaître que le design de mon site dégage une certaine impression d’amateurisme.
L’interface est globalement intuitive, mais le rendu général ne semble pas très pro ou abouti. Plusieurs amis m’ont même dit : « Quand j’arrive sur le site, je m’attends à ce que rien ne fonctionne quand je clique », et je comprends ce qu’ils veulent dire. Ce n’est pas une question de bugs, mais plutôt de perception : le design actuel ne donne pas confiance ni envie d’aller plus loin.
J'ai essayé de l'améliorer plusieurs fois mais sans succès, je n'arrive visiblement pas à mettre le doigt sur ce qui dégage cette impression globale. Est-ce à cause d'un design trop plat ? Les illustrations/icones sont-elles de mauvais(e) qualité/goût ? Est-ce l'agencement global de mes éléments ? Manque de cohérence ? etc ...

J'aurais donc aimé avoir des avis de connaisseurs pour m'aider à définir comment rendre mon site plus professionnel tout en gardant un côté fun (cela reste un jeu).
Le site est très jeune et je n'ai que récemment travaillé sur le SEO, je pense qu'il est correct sans être incroyable. Je suis preneur de tous conseils à ce niveau également.

Voici le lien du site : Blindtest.gg

Et voici quelques captures d'écrans :

Page Accueil (non-authentifié. Ceci est ma landing page, elle contient une présentation du site au scroll vertical) :


Page Accueil (authentifié) :


Page Profil :


Page In-Game :


Merci beaucoup de votre attention,
Bonne journée,
Jules

 

[emualliug]

Je suis assez surpris, parce que je trouve l'interface plutôt soignée, tant UX que UI.

À l'inverse de ce qui t'a été rapporté, il me semble que ce qui constitue un bouton est clair, il y a un effet de hoover qui confirme que c'est un élément classique.

L'UI est globalement propre (quelques alignements, c'est pas la mort), il y a une cohérence globale avec une approche qui fait sens avec la thématique ; l'aspect néon marcherait moins bien pour souscrire une assurance décès, mais là c'est raccord. Le wording m'a également semblé cohérent.

Peut-être que je correspond pas à la cible et que mes conseils ne sont du coup pas les plus opportuns.

Si je devais relever quelques points de la homepage (mais qui me semblent relever du détail) :

• l'icône en forme d'avion pour valider le pseudo n'est pas idéale, ça colle pour envoyer quelque chose (un message, un courriel), pas pour "lancer" une partie
• les icônes des styles musicaux ne sont pas raccord : 2 drapeaux, 2 pictogrammes couleur, 2 picto n&b
• l'effet d'un input sélectionné devrait être plus raccord avec le style, là on a l'assez classique liseré bleu bootstrap, peut-être le mettre en raccord avec le violet, ce qui amène à se demander comment mieux distinguer le style musical sélectionné

J'ai un peu de mal avec la modale penché. Peut-être est-ce le principe même, peut-être est-ce le fait que c'est très léger (et que du coup ça créé un malaise), peut-être est-ce aussi lié au fait que le bouton est lui de niveau.

Par contre il y a un réel problème avec la hauteur de la modale, il faudrait qu'elle soit défilable. Là si le texte est trop long (ou la fenêtre trop courte), il est caché par le bouton, voir déborde.

Sur une page partie :

• le chat fait un peu tâche, pas le même style (ça pourrait encore s'expliquer), mais pas alignée (et déborde même sur le footer)
• y'a deux trois trucs qui dénotent, par exemple le bouton "Copier le lien" pour partager avec le texte "copié !"
• et de façon générale, les éléments de formulaire font moins raccord, je pense au bouton à cocher pour le mot de passe et au contenu de ce champ qui n'a pas le même padding horizontal que les autres

Ce sont toujours des points de détail.

 

[JulesBlindtest]

Merci beaucoup pour ces retours !!
Je prends bonne note de toutes les indications.