Discussion :

[Michaeljackfan]

Salut,

J'aimerai que vous m'aidiez principalement pour deux choses: des conseils pour les couleurs (je suis daltonien) et pour l'utilisation.
Mais bien sûr, toute critique/conseil est la bienvenue !


Alors voilà, pour l'instant je pensais à des couleurs dans ce style:


Pour les pop-up, j'ai déjà fait un test, que vous pouvez voir ici. Pour le tester: copiez tout (ctrl+A) et mettez tout dans un fichier texte que vous renommerez "page.html".
A vrai dire j'ai fait quelques changement de style depuis ce test, mais ce qui m'intéresse c'est surtout de savoir s'il y a des bugs javascript (c'est un script "maison").
(Inutile d'essayer de cliquer sur "changer mon mot de passe", ça appel une requête Ajax qui évidemment ne fonctionne pas)

Le pop-up devrai apparaitre en fondu, vous devriez pouvoir le déplacer, puis le faire "fondre" en appuyant sur "Fermer". Si vous avez un bug, n'hésitez surtout pas à me le dire !


Encore une question: lorsqu'on ouvre un profil, vaut-il mieux qu'il s'ouvre dans un cadre intégré à la fenêtre, comme pour le changement de mot de passe; ou bien l'ouvrir dans une nouvelle fenêtre ?
En sachant qu'il y aura plusieurs onglets: informations de base (photo, âge, taille, sexe, ville...), plus sur moi (loisirs, religion, régime...), partenaire idéal, mes photos etc.
C'est donc un gros profil complet qui s'ouvrira.


Je remercie celles et ceux qui prendront le temps de me répondre

[Michaeljackfan]

Pour la section "contacts", je pensais mettre des smileys pour annoncer les bonnes et les mauvaises nouvelles, ainsi qu'un cadre de conseils aléatoires. C'est trop?

[Tony_]

Bonjour.
Je vais répondre d'une manière alternative à ce sujet. En espérant que cela apporte un feedback constructif.

A mon avis une pré-étape consisterais à définir votre projet.
Est-ce que vous avez défini sur papier ce que vous vouliez faire?
Est-ce que les fonctionnalités du sites sont connus?
Quel sera la plus-valus par rapport aux concurrents? (parce qu'il y a de nombreux sites du genre sur le web)

Puis la première étape avant le graphisme est le design. Le design dans le sens "conception". Définir la hiérarchie des pages. Le nom des catégories, des sous-catégorie, etc ...

(peut-être que ces étapes ont déjà été faites, mais je tenais à les repréciser)

Deuxième étape, dessiner au papier le prototype du site. L'apparence d'une page. Essayer de respecter les conventions du web (logo en haut à gauche, tagline, emplacement du menu ...).
Essayer de respecter quelques bonnes pratiques d'utilisabilité (cf. ergonomie d'utilisation du site web).

Une fois ces étapes effectuées, je pense que le projet sera un peu plus clair et la mise en place des couleurs et autres fioritures graphiques sera beaucoup plus facile et moins "à la volée".
Mon point de vue: votre daltonisme peut vous aider à faire un site accessible visuellement aux utilisateurs dans le même cas que vous. Utiliser des bons contrastes sans vouloir trop en faire. Par exemple, du contenu en noir sur fond blanc ça peut passer très bien.


Pour votre boite pour changer le mot de passe, ma première question est: pourquoi utiliser une boite en AJAX? Pourquoi ne pas utiliser une boite plein texte pour ça?
Pourquoi faire en sorte que la boite se déplace sur la page? Quel intérêt pour l'utilisateur de la bouger la boite à gauche, en bas, dans un coin ou autre part? Et s'il le fait, ne s'éloigne-t-il pas de sa tâche qui consiste à remplir le formulaire pour modifier son mot de passe?
Personnellement je pense qu'il faudrait mettre un vrai bouton d'envoi <input> pour valider la boite. Les utilisateurs ont l'habitude de voir et reconnaitre ce type de bouton d'envoi.
Je pense aussi qu'il faut éviter de mettre le bouton "fermer" juste à côté du bouton d'envoi. Un faux pas, une lecture trop rapide et pouf la boite se ferme. Le visiteur attendra peut-être devant sa boite email inutilement et dans tous les cas il devra retaper les informations.
Je pense que la troisième personne du singulier est un choix plus pro et homogène (plutôt que d'utiliser tantôt "mon", parfois "votre").
Je pense qu'il y a trop d'information redondante. Le titre "changement de votre mot de passe", les intitulés de champs qui répète encore qu'il y a un changement de mot de passe et le bouton d'envoi qui stipule encore cela. Arriver en bas du formulaire je pense que l'utilisateur à compris qu'il s'agissait de modifier le mot de passe, un simple bouton intitulé "Modifier" ou "Envoyer" ou "Sauvegarder" serait probablement suffisant.
Je ne comprend pas le but du code en bas. Pourquoi marquer "en attente d'une action". Qu'est-ce que ce code apporte? Pourquoi le placer en bas? Est-il vraiment utile? Ne met-il pas le visiteur dans un état de confusion? Le visiteur ne sait-il pas qu'il doit remplir les formulaires qui viennent de s'ouvrir?
Et pour finir, je pense qu'il serait judicieux de "noircir" le fond d'écran si vous souhaitez vraiment conserver cette boite AJAX. De cette manière le visiteur regardera uniquement la boite et ne fera pas autre chose.


J'espère que ce retour d'information aidera.
Excellente continuation.

Bien cordialement.

[Michaeljackfan]

Bonjour et merci pour cette réponse détaillée.

Est-ce que vous avez défini sur papier ce que vous vouliez faire?
Est-ce que les fonctionnalités du sites sont connus?
Quel sera la plus-valus par rapport aux concurrents? (parce qu'il y a de nombreux sites du genre sur le web)

Je n'ai pas définit sous papier, mais sous "Xara".
Les fonctionnalités sont connues, mais certaines devront attendre (par exemple j'aimerai y ajouter un annuaire de restaurants, hôtels etc. Mais d'abord il doit y avoir beaucoup de membres, sinon qui voudrait payer pour s'inscrire dans l'annuaire ?).
La plus-value: la gratuité pour les membres et la possibilité de créer des blogs privés. C'est-à-dire qu'ils pourront créer des "blogs" sur lesquelles ils pourront mettre des photos d'eux nus ou des messages d'amour etc. Et choisir parmi leurs contacts lesquels auront le droit d'y accéder.

Pour faire vivre le site: l'annuaire et, si nécessaire, de la pub ou des fonctionnalités payantes (tchat, création d'un blog, profil en tête de liste...)


Pour la hierarchie, je mets des dossiers généraux contenant chacun un dossier pour chaque page du site, qui contient les divers pages de la sous-catégories.
Normalement ça devrait me permettre de m'y retrouver.
Si je veux le script php du changement de mot de passe: scripts_php/account/pop_up/change_password.php

Quand au prototype, j'utilise "Xara Xtreme" qui me permet de pouvoir facilement essayer d'autres couleurs et d'autres formes.

Pour votre boite pour changer le mot de passe, ma première question est: pourquoi utiliser une boite en AJAX? Pourquoi ne pas utiliser une boite plein texte pour ça?
Pourquoi faire en sorte que la boite se déplace sur la page? Quel intérêt pour l'utilisateur de la bouger la boite à gauche, en bas, dans un coin ou autre part? Et s'il le fait, ne s'éloigne-t-il pas de sa tâche qui consiste à remplir le formulaire pour modifier son mot de passe?
Personnellement je pense qu'il faudrait mettre un vrai bouton d'envoi <input> pour valider la boite. Les utilisateurs ont l'habitude de voir et reconnaitre ce type de bouton d'envoi.

J'ai fait de cette façon car je pensais donner la possibilité de modifier le mot de passe sur la page "mon compte/informations de bases".
Sur cette page, il y a d'autres options que l'on peut modifier, elle se présente sous ce schéma:

Pseudo: unPseudo
Mot de passe: Changer mon mot de passe
E-mail: unemail@quelquechose.com
Taille (cm): 100

En gris: des champs "input"; et en bleu: le lien pour ouvrir le pop_up.
De cette façon le membre peut changer son mot de passe en restant sur la même page, afin de changer d'autres infos.
Il aurait été possible de mettre 3 champs pour le mot de passe, mais j'ai pensé que ça gâchait l'harmonie de la page. Je suis le seul à le penser ?

Et le bouton <input type="submit">, je trouve qu'il s'intègre mal au design. Et je tente d'être clair en écrivant "changer mon mot de passe". De cette façon l'utilisateur sait ce qui va se passe lorsqu'il cliquera sur le lien.


Pour les fonctionnalités (bouger, effet de fondu etc.) c'est en fait pour tous les pop_up. Car il y en aura d'autres sur le site qu'il sera utile de déplacer, si on veut par exemple l'avoir plus à droite pour pouvoir cliquer sur l'image d'un autre membre (ce qui aura pour effet de "rafraîchir" la photo ou le profil affiché en pop_up).
Alors je me suis dit que puisque les scripts existent et que les utilisateurs devront les charger, autant permettre de déplacer tous les pop_up, ça donne du dynamisme au site.

Pour le bouton "fermer" tu as raison: il est trop proche. Je vais le remplacer par une croix en haut à droite

Le visiteur attendra peut-être devant sa boite email inutilement et dans tous les cas il devra retaper les informations.

Non non, et c'est là l'utilité de la barre au fond.
ça ne se voit pas sur l'exemple, mais en version finale elle informera l'utilisateur sur ce qui se passe:
"en attente d'une action", "vérification des données envoyées"
-> "Votre mot de passe a été changé avec succès !"
-> "Mot de passe non-changé. Raison: mot de passe invalide"

Je pense qu'il y a trop d'information redondante. Le titre "changement de votre mot de passe", les intitulés de champs qui répète encore qu'il y a un changement de mot de passe et le bouton d'envoi qui stipule encore cela.

Et bien en fait, le titre du pop_up indique sur quelle "page" on se trouve: "changement du mot de passe".
Les champs indiquent ce qu'il faut y mettre: "mot de passe actuel", "nouveau mot de passe" etc.
Et le bouton indique l'action qu'il va faire: "changer le mot de passe"

Á la limite je peux changer le lien, mais pas les labels: il n'est pas forcément évident pour tout le monde que la première ligne est pour le mot de passe actuel et les deux suivantes pour entrer et re-entre le nouveau.

[Michaeljackfan]

Petite nouveauté, je commence les tests sur loveandmeet.net

La page la plus intéressante est "test pop_up à onglets". à noter que pour l'instant seuls les onglets "Profile de base" et "Ses photos" fonctionnent.

Le design est parfait sous Google Chrome, mozilla etc. sauf: IE.
Je pense faire un design alternatif pour lui, quand le site sera fini. En attendant les visiteurs auront un avertissement et seront verrons conseillés de télécharger un autre navigateur.

J'ai tenu compte de certaines remarques, notamment pour le lien "fermer" trop proche de l'autre.


Je sais que pour l'instant c'est léger, mais malgré-tout n'hésitez pas à me faire part de vos remarques

[Michaeljackfan]

Les tests pop_up sont terminés. Et si il y a des détails à corriger, je le ferai le moment venu.

J'ai terminé l'architecture pour mySQL et je sais comment organiser mes dossiers. Maintenant je vais faire le design du site.
D'ailleurs ça m'a donné une idée: je vais faire un espace membre d'exemple sans fonctionnalité, pour que les visiteurs puissent voir ce qu'il en sera d'une fois inscrits.
En plus je peux ré-utiliser mes tests pour le design (car l'espace membre d'exemple sera très complet).

Pour l'instant je n'ai fait que la page d'accueil (donc aucun lien ne fonctionne).
Mais n'hésitez pas à me faire part de vos remarques/suggestions.

loveandmeet.net

[Michaeljackfan]

bonjour,

ça faisait longtemps que je l'avais laissé en stand-by, à cause de la reprise des cours et du manque de motivation qui l'accompagne.

Mais je reprends le développement de mon site,
pour le moment la section exemple est en développement, je pense que tout ce qui se trouve sous "Compte" est terminé, je commence la partie "Recherche". J'aimerais avoir vos avis sur l'interface (autant de "compte" que de "recherche").

Comme je l'ai dit, il ne s'agit que d'une section d'exemple, aucune fonctionnalité n'est encore faite.

http://loveandmeet.net/pages/sample/account/


PS: ça fonctionne mal sous internet explorer. D'ailleurs si vous retournez à l'index (cliquez sur "Déconnexion (quitter l'exemple)"), je vous indique comment naviguer en toute tranquilité

[jayfaze]

Bon t'es daltonien ca se vois. Moi aussi, mais moi je le suis, mais moi c'est tres leger, et c'est surtout quand il fait sombre

Enfin mes remarques sur ton sites.

- Le fond est trop bleue et "sombre". La plupart des sites de rencontres sont assez claires (meetic, edarling)

- Il manque des icones et des bouttons colorés qui rendra ton design plus "moderne". La pour le moment ca fait un peu "vieux site". Mais je pense que c'est que provisoire

- Utilise plutot des bouttons que des liens pour les actions. Un boutton submit peu tres bien etre customisés pour pour aller avec le design de ta page

- Les messages genre "status : en attente d'une action" n'apporte rien,vaut mieux les virer

- La consultation d'un profil est ok, sauf pour le design, meme remarque que plus haut.


N'hesite pas a t'inspirer des sites concurrents pour le design.

Voila,

[Michaeljackfan]

- Le fond est trop bleue et "sombre". La plupart des sites de rencontres sont assez claires (meetic, edarling)

Qu'il soit bleu c'est voulu
Par contre je ne le trouve pas sombre, chez moi il est plutôt clair. Peut-être les propriétés d'écran réglés différemment.
On m'avais déjà fait la remarque, parfois dans l'autre sens. Donc je compte proposer plusieurs couleurs au site, de même que plusieurs langues. Donc si des personnes trouvent ce design trop sombre elles pourront le changer sans problème, quitte à mettre un design plus clair comme design par défaut (il me suffira de changer le nom du dossier).

Mais les couleurs c'est vite changé, pour l'instant je me concentre sur la disposition des éléments.

- Il manque des icones et des bouttons colorés qui rendra ton design plus "moderne". La pour le moment ca fait un peu "vieux site". Mais je pense que c'est que provisoire

C'est bien que tu relèves ça, justement je me demandais si les icônes étaient une bonne idée. C'est plus "design", mais c'est moins clair (il faut laisser la souris dessus pour avoir un "bubble" et l'explication du lien).
Bon, au pire je peux laisser le choix entre les icônes et le texte, je vais voir si c'est simple à faire (un cookie qui retient s'il faut afficher le texte ou les icônes). Autrement je passe aux icônes avec un bubble, ils n'auront qu'à se montrer curieux

- Utilise plutot des bouttons que des liens pour les actions. Un boutton submit peu tres bien etre customisés pour pour aller avec le design de ta page

ça aussi on me l'avait déjà dit. Je pensais que les boutons faisaient "vieillots", mais si tout le monde est unanime, alors va pour le bouton

- Les messages genre "status : en attente d'une action" n'apporte rien,vaut mieux les virer

Ok, on me l'avait déjà dit aussi. En plus c'est chiant à faire

- La consultation d'un profil est ok, sauf pour le design, meme remarque que plus haut.

Ok, ben comme plus haut, quand on pourra changer le design de la page, on pourra changer le design du profil.


Merci pour tes remarques



NOUVEAUTÉ

J'ai amélioré le design en prenant en compte les remarques précédentes. Est-ce bien ce que tu pensais ?
http://loveandmeet.net/pages/sample/account/index.php

[Michaeljackfan]

Ok, j'ai amélioré le design en prenant en compte vos remarques, terminé la page "recherche" (de l'exemple) et la page "contacts".

Il me reste à faire la messagerie et le tchat. (Je prévois aussi un forum et un livre d'or, mais pour l'heure ce n'est pas une priorité)

http://loveandmeet.net/ (cliquez sur "exemple d'espace membre" en haut à droite, le reste n'est pas encore disponible)