Design sur http://www.planetswars.com

Bonjour,

Développeur de formation, j'ai crée un jeu de stratégie en ligne, mon problème étant le design. Après avoir refait 4 ou 5 fois une charte de taille fixe, je me suis finalement tourné vers les tableaux avec images de fond. Ce qui fait que tout se goupille mieux en fonction de la résolution de l'ecran.
J'aimerais avoir vos avis et pourquoi pas des propositions.
Le site : http://www.planetswars.com

Merci d'avance

Bonjou,
Je n'ai jamais joué un jeu de ce type, ca doit etre assez marrant.

Pour la résolution 800x600, ca ne va pas car apparemment c'est adapté pour un 1024x768.

Pour le design c'est un peu trop gros les details autour des 3 blocs principaux.

Je pense que pour le design, si tu veux des propositions, regarde déjà ce qu'il se fait en matiere de design dans les sites traitant de jeu de roles puis regarde aussi certains sites que raphael a donné comme galerie de sites(css et mise en forme tout en haut du forum) css comme celui ci :ici

Mais la navigation m'a l'air claire, je ne pense pas qu'il faut toucher a cela.

Ergonomie
La lisibilité est plutôt bonne, sauf sur un écran un peu large (au dessus de 1024px de large), où la longueur de la ligne de texte dans le bloc principal est vraiment trop importante. Utiliser une largeur maximale serait un plus.

Les blocs (en-tête, bloc principal, menu) sont collés entre eux, et ne se distinguent pas directement au premier regard. Un peu d'espace serait appréciable.

Graphisme
Effectivement, c'est très basique. Le logo du jeu manque d'un visuel qui tienne la route, et la charte graphique, globalement, est assez simpliste. Peut mieux faire (comme vous en êtes conscient, je pense).

Code et accessibilité
Hum, zéro pointé ?
Plus sérieusement, et comme vous le savez sans doute déjà, les pages composées de tableaux (et surtout de tableaux imbriqués) posent de sérieux problèmes d'accessibilité. Or, c'est bien simple, vous avez utilisé des tableaux pour tout et n'importe quoi, sans doute par ignorance de ce qu'il est possible de faire par d'autres moyens.

Utiliser un tableau de mise en forme pour séparer dans l'en-tête le logo du blocs des statistiques, pourquoi pas. Un autre tableau pour séparer le menu du bloc de contenu, admettons.

Utiliser un tableau à neuf cellules (dont une seule accueille vraiment du contenu !) pour dessiner des jolies bordures et des coins arrondis pour les blocs, c'est hélas une pratique courante, même s'il existe d'autres solutions :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html
(À noter que la gestion des bordures décorées et autres coins arrondis d'une boîte de largeur fluide est assez compliquée, tandis que le cas d'une boîte de largeur fixe est bien plus simple.)

Mais utiliser un tableau à l'intérieur d'un bloc de contenu pour séparer des lignes de texte, c'est une erreur de conception flagrante !
Non seulement c'est très mauvais pour l'accessibilité, mais en plus cela donne un code très difficile à maintenir/mettre à jour.
Pourquoi ne pas utiliser tout simplement des éléments HTML tels que les titres de niveau (éléments h1 à h6), des paragraphes (élément HTML p), des listes non ordonnées ou ordonnées (ul et ol), etc. ?

Sur ce sujet, on peut se reporter à différents tutoriels sur Alsacréations :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/


Pour finir, on peut signaler plusieurs erreurs de syntaxe, relevées par le validateur de syntaxe HTML du W3C :
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.planetswars.com

La plus importante de ces erreurs est l'omission d'une déclaration de type de document (doctype), qui n'est pas accessoire, loin de là !

merci pour vos remarques, c'est ce dont j'avais besoin, des avis (avertis ) extérieurs.
On dirait que j'ai encore du boulot !!!
Je vais essayer de le faire evoluer dans le sens de vos suggestions.
Merci pour les liens, je crois qu'ils vont mettre très utile et je vais faire des recherches en parallèles pour approfondir.
Je crois que je reviendrais sur ce forum régulièrement pour avoir d'autres bons conseils.

Bonjour à tous

Voila, j'ai changé complétement le site, j'en ai profité pour changer les régles et apporter qques améliorations.
Donc j'aimerais avoir de nouveaux votre avis car j'ai bcp appréciés les conseils et remarques que j'ai eu précédements.
D'avance merci
http://www.planetswars.com

Stéphane

Bonjour,

C'est très froid et austère, cela manque d'un peu de visuel pour égayer le site.
En l'état, ces quatres pavés de textes denses titrés de manière ultra discrète sans accompagnements graphiques ne me donnent pas envie de lire. Cela vaut pour toutes les pages du site, qui se ressemblent toutes. Aucune identification de la page par un quelconque titre bien visible ou un au minimum un marqueur dans le menu qui indiquerait la page active.

Le système de connexion utilisateur laisse totalement à désirer. Aucune présence de champs de saisie, il faut deviner qu'il faut cliquer sur le nom correspondant pour avoir le curseur de saisie. De la même manière, le bouton connexion n'est pas plus explicite et ne ressemble en rien à un bouton. L'interface utilisée pour les champs de saisie et pour le bouton est EXACTEMENT identique, alors qu'il s'agit de deux éléments totalements différents. De plus, il faut deviner que les ****** correspondent à la zone pour saisir le code, car cela n'est pas clairement identifié. De quoi perdre l'utilisateur, à qui tu impose de deviner le fonctionnement. Rester dans le traditionnel avec deux champs, un pour le nom et un pour le code, ainsi qu'un bouton visualisé comme tel pour se connecter serait bien plus efficace. La seule chose claire, car elle respecte une certaine norme établie, c'est la case à cocher pour mémoriser l'information. Encore faut-il avoir compris comment la saisir auparavant...

Si ton site a pour vocation d'inciter des gens à s'inscrire et à jouer, il serait peut être bon de leur donner envie... Quand j'arrive sur le site, je vois planet wars, et sans lire le contenu, je sais pas ce que c'est, et je n'ai aucun visuel qui peut m'aider à comprendre... "Jeu de stratégie gratuit en ligne" devrait être mis en accroche dans la bannière, histoire de présenter de quoi parle le site. Présenter une bannière qui donne du rêve et attire l'utilisateur, serait bien plus attractif, et lui donnerait certainement plus envie de rester et à fortiori de s'inscrire pour jouer dans ces conditions. En l'état, si je tombais sur le site, j'aurais tendance à refermer sans même avoir lu l'intégralité de la page d'accueil.
Tu auras beau avoir le meilleur produit du monde, si tu ne le mets pas en avant il ne sera jamais le meilleur produit du monde. Garde cela en mémoire.

D'autre avis ?
Modifié par neoblack2006 (26 Jul 2007 - 00:20)

Bonjour,

Personnellement, je trouves que l'écriture bleue sur un fond bleu plus foncé fait mal aux yeux au bout d'un moment.
Pour le champ de saisie du pseudo, effectivement, c'est déroutant de ne pas voir le cadre. On ne voit pas au premier coup d'oeil qu'il faut remplir à cet endroit. De plus, ca m'a donné envie de cliquer à côté de "connexion" pour voir s'il n'y avait pas de box.
Je n'aime pas trop le moyen que tu as choisit pour mettre en évidence la rubrique du menu sur laquelle le curseur se trouve. Je pense que changer de couleur attirerais plus l'attention.
Au niveau des couleurs du site, je trouves que c'est plutôt froid et que ca ne varie pas assez. Tout semble construit par rapport à un mélange de bleu et de vert et, donc, rien ne ressort.

Comme tu l'auras remarqué, mes commentaires sont assez généralistes, mais j'éspère néanmoins qu'ils te seront profitables.

RedOx

salut ...

j'avais déjà vu le site lors de ton premier post , et au niveau graphique c'est toujours pas terrible ... bien dommage lorsque l'on voit tes screenshoot et son approche "Goblin Commander " pour "l'eclairage" des territoires gagnés .

On pourrait penser que "planets War" a un problème d'appesenteur .... tout se retrouve en haut .
Comme déjà signaler , tout "se ressemble" et donc on s'y perd un peu ...

Comme par exemple la page "des règles du jeu" , ou rien ne ressort comme par exemple les mots "attaque , défense vie .." du chapitre "les combattants ".

Ce sont bien des mots importants pour le jeu non !?

Cette utilisation des zones rectangulaires ( une trop forte accoutumance aux cadres !? ) renforcées par les bordures claires sur ce fond omniprésents " du ciel étoilé ( franchement à virer pour moi ..ca fait trop guerre des étoiles ...statique ) ne sont pas non plus du meilleur effet ..

L'ensemble donne une impression "non-dynamique" ... (alors que le boulot réalisé pour la conception du jeu doit etre énorme , l'apparence de l'ensemble pourrait faire penser le contraire ) ..

bon courage
++

nouveau design sur http://www.planetswars.com

Merci pour vos remarques.

A la relecture de mes précédentes remarques, ça ne me donne toujours pas envie de dépasser la page d'accueil, pour à peu près les même remarques que la dernière fois... certes, avec un "design" différent.

C'est très froid et austère, cela manque d'un peu de visuel pour égayer le site.
> Pas les memes couleurs et animations en flash, où est le côté austére ???

En l'état, ces quatres pavés de textes denses titrés de manière ultra discrète sans accompagnements graphiques ne me donnent pas envie de lire.
> Il n 'y a plus 4 pavés...

Cela vaut pour toutes les pages du site, qui se ressemblent toutes. Aucune identification de la page par un quelconque titre bien visible ou un au minimum un marqueur dans le menu qui indiquerait la page active.
> Le premier titre de chaque page est je pense assez explicite pour s'y retrouver, pas besoin d'etre einstein pour savoir ou on est a mon avis

Le système de connexion utilisateur laisse totalement à désirer. Aucune présence de champs de saisie, il faut deviner qu'il faut cliquer sur le nom correspondant pour avoir le curseur de saisie. De la même manière, le bouton connexion n'est pas plus explicite et ne ressemble en rien à un bouton. L'interface utilisée pour les champs de saisie et pour le bouton est EXACTEMENT identique, alors qu'il s'agit de deux éléments totalements différents. De plus, il faut deviner que les ****** correspondent à la zone pour saisir le code, car cela n'est pas clairement identifié. De quoi perdre l'utilisateur, à qui tu impose de deviner le fonctionnement. Rester dans le traditionnel avec deux champs, un pour le nom et un pour le code, ainsi qu'un bouton visualisé comme tel pour se connecter serait bien plus efficace. La seule chose claire, car elle respecte une certaine norme établie, c'est la case à cocher pour mémoriser l'information. Encore faut-il avoir compris comment la saisir auparavant...
>Il y a une zone a part rien que pour la connexion, en + en vert. Le titre c'est "Connexion au jeu", pas explicite ??? Pour le pseudo c'est ecrit "Entrer votre pseudo" je pe difficilement faire mieux, il faut juste deviner qu'il faut saisir son mot de passe a coté, mais c'est comme ca pour quasiment tout les sites, et a l'inscription les joueurs savent trés bien qu'il faut saisir un mot de passe. Le bouton connexion est juste à coté ainsi que la zone à mémoriser. Ca fait assez d'élément pour comprendre comment se connecter je pense.


Si ton site a pour vocation d'inciter des gens à s'inscrire et à jouer, il serait peut être bon de leur donner envie... Quand j'arrive sur le site, je vois planet wars, et sans lire le contenu, je sais pas ce que c'est, et je n'ai aucun visuel qui peut m'aider à comprendre... "Jeu de stratégie gratuit en ligne" devrait être mis en accroche dans la bannière, histoire de présenter de quoi parle le site. Présenter une bannière qui donne du rêve et attire l'utilisateur, serait bien plus attractif, et lui donnerait certainement plus envie de rester et à fortiori de s'inscrire pour jouer dans ces conditions. En l'état, si je tombais sur le site, j'aurais tendance à refermer sans même avoir lu l'intégralité de la page d'accueil.
Tu auras beau avoir le meilleur produit du monde, si tu ne le mets pas en avant il ne sera jamais le meilleur produit du monde. Garde cela en mémoire.
> C'est justement le but de la page d'accueil d'expliquer le contenu du site. "Simplement grâce à votre navigateur internet, vous pouvez jouer à Planets Wars gratuitement et défier les joueurs en ligne."
"Planets wars est un jeu de stratégie gratuit..."
But du jeu : "Devenir le maître du jeu en contrôlant les 26 planètes du système."
Pas assez explicite ???
Modifié par neoblack2006 (26 Jul 2007 - 00:46)

D'un point de vue ergonomique, il manque le curseur "main" sur les liens du menu lors de leur survol (avant d'avoir cliqué une première fois, ensuite celà est bon)
testé sous Opera 9.22