prologin / concours-site

Source code of the Prologin contest website
https://gitlab.com/prologin/concours/site
GNU General Public License v3.0
10 stars 6 forks source link

Suggestions for improvement #374

Closed pioupia closed 2 years ago

pioupia commented 2 years ago

Après quelques longues minutes pour trouver les fichiers HTML intéressants, afin que mon commentaire soit le plus constructif possible, je vous décris ci-dessous quelques modifications qui je pense pourraient accroître la compréhension globale du site.

Attention tout de même ! Je ne suis ni graphiste, ni web designer, ni UI/UX designer. N'étant en aucun cas qualifié d'une quelconque manière dans ces domaines-là, certains propos peuvent être faux, et certaines propositions à revoir.

  1. Première chose, je pense qu'au niveau du menu (prologin/prologin/templates/prologin/main-menu.html), il faudrait modifier la taille des liens (des boutons). Appliquer une taille de 1.1em au lieu de 1em. Par exemple sur l'élément nav navbar-nav pull-right. De plus, sur la page principale, n'ayant pas de séparation nette de couleur, il est difficile de saisir directement le menu, et de le comprendre. La lisibilité est fortement compliquée. Pour l'améliorer, je propose ici d'agrandir le padding de l'élément section home-jumbo jumbotron, en passant la propriété de :
    .home-jumbo{
    ...
    padding: 0 0 3em;
    ...
    }

    à :

    .home-jumbo{
    ...
    padding: 2em 0 3em;
    ...
    }

    Permettant ainsi un design, je trouve plus aéré, et plus compréhensible. On a un vrai détachement avec le contenu, et on peut lire plus facilement le menu.

Après, le bouton "Découvrir" pourrait être modifié par "À propos", ou alors "Comment ça marche ?" "Qu'est-ce que c'est ?" (Même si c'est un peu long en effet) évidemment, garder découvrir n'est pas un problème du tout. Néanmoins, je vous conseille de mettre des explications plus détaillées sur le fonctionnement général du site. Hors-mis le fait que le style ne soit pas forcément présent sur cette page-ci, et donne une envie toute pressée de partir en courant, les informations sont incomplètes. Déjà sur cette page : https://prologin.org/about/contest, mettre les informations suivantes en plus : Une section avec un tutoriel d'utilisation du site (pour les régionales), car honnêtement, en plus d'être très peu clair, on s'y perd, fin ce n'est pas terrible. Au pire, rajouter cette page tutoriel ailleurs, mais mettez là dans la navbar, et en lien sur chaque exercice pour indiquer clairement l'utilisation de vos outils.

Ensuite, n'étant pas connecté, je ne peux pas donner du code à modifier pour la suite. Néanmoins, au niveau des codes à soumettre dans les épreuves (dans "Proposez votre solution" tout en bas), ce n'est ni clair, ni pratique. Résumé des actions à faire par un utilisateur lambda qui ne s'y connaît pas :

Alors, vous me direz "oui, mais on a mis un bouton "code à compléter"". Honnêtement, on ne comprend pas ce qu'il veut dire. Et par peur, on ne clique pas dessus. Je pense donc que quand on sélectionne le langage, le code à compléter s'ajoute automatiquement. Et aussi un rename du bouton serait une bonne idée, car "code à compléter", ce n'est pas forcément très explicite. Et pour le bouton "envoyer", je verrais plutôt "soumettre".

En espérant avoir été suffisamment dans le détail (même si le travail se retrouve bâclé, et trop peu détaillé à mon goût). Si des détails supplémentaires doivent être ajoutés, n'hésitez pas à me demander.

Je vous remercie pour votre lecture, et votre compréhension, et vous souhaite une agréable journée.