Bonjour,

Je suis ergonome de formation et j'ai plutôt un profil junior. C'est pourquoi j'ai décidé de créer mon propre site afin de mettre mes compétences en avant et, surtout, approfondir mes compétences en design et en développement.

Ce site est en quelque sorte ma carte de visite et il doit donc être P-A-R-F-A-I-T Smiley langue
Notez que je n'ai pas encore implémenté certaines règles d'ergonomie (e.g. page d'erreur 404 personnalisée).

Tout remarque sera fortement appréciée. Merci pour votre aide Smiley smile

==>
Modifié par SuperPickle (24 Oct 2012 - 12:35)
Bonjour,

Très rapidement, je repasserai plus tard :
<h10>Restez simple</h10>
*3...
6l20 a écrit :
Bonjour,

Très rapidement, je repasserai plus tard :
&lt;h10&gt;Restez simple&lt;/h10&gt;
*3...

Merci pour ta réponse.

Pourrais-tu, s'il te plaît, être plus clair ?
Je ne suis pas développeur Smiley cligne
Bonjour,

tout simplement la balise html h10 n'existe pas. Les balises h vont de h1 à h6.
Nev a écrit :
Bonjour,

tout simplement la balise html h10 n'existe pas. Les balises h vont de h1 à h6.

Ok. Je modifie la hiérarchisation de mes titres tout de suite. Merci.
a écrit :
Une interface simple est prise en main
rapidement sans avoir besoin d'une
longue formation.


tu parles de quoi ?
Nev a écrit :
Bonjour,

tout simplement la balise html h10 n'existe pas. Les balises h vont de h1 à h6.

C'est corrigé. Merci.


SuperMerguez a écrit :
tu parles de quoi ?


Je vais essayer de reformuler : en gros, si on lance un nouveau produit (site Internet, application, logiciel) en ayant une approche centrée sur la population cible, le produit sera adapté à cette population et les utilisateurs pourront apprendre à se servir du produit en question de manière intuitive (en l'utilisant).


SuperMerguez a écrit :
En 3 diapo, t'as fait énormément de redondance.

Tu fais référence aux termes "utilisateur" et "efficace" ?
Modifié par SuperPickle (18 Oct 2012 - 13:59)
Ouai tu as deviné de quoi je parlais Smiley smile

je pense que tes phrases concises devraient être plus explicites

sinan tu pourras eventuellement regoupé tes fichiers css en 1 seul pour gagner un peu plus en performance (ça te fera qu'une seule requête), tu peux utiliser une compression gzip par exemple Smiley cligne
SuperMerguez a écrit :
Ouai tu as deviné de quoi je parlais Smiley smile

je pense que tes phrases concises devraient être plus explicites

sinan tu pourras eventuellement regoupé tes fichiers css en 1 seul pour gagner un peu plus en performance (ça te fera qu'une seule requête), tu peux utiliser une compression gzip par exemple Smiley cligne

Merci pour ta remarque. Je vais tâcher de retravailler le contenu français. Dans l'immédiat, c'est le contenu anglais qui est le plus important car je suis à l'étranger.

Concernant les feuilles de style, je comptais les regrouper en un seul fichier à terme. Je trouve juste que c'est plus facile de séparer les différents styles lors du développement.


thierry a écrit :
Bonjour,

Le positionnement de ton site ne me paraît pas clair. Est-ce un site de présentation ou un site où tu offres tes services ? Si c'est la seconde alternative, ce n'est pas clair.

Un lien : http://blog.60questions.net/2009/02/ergonomie-des-sites-web-l-enquete-du-benchmark-group/

Bonne continuation.

Merci.
Il s'agit d'un site de présentation. Mon public cible regroupe les recruteurs (spécialisés en UX) et les professionnels du domaine.
Dans le cas d'une proposition de services, j'aurais utilisé un autre vocabulaire.


Je n'ai pas eu beaucoup de retour concernant le design. Est-ce que ça vous parait homogène, sobre ou tout simplement moche?
Certes, c'est toujours une question de goût, mais je serais vivement intéressé par vos différents avis.
Modifié par SuperPickle (18 Oct 2012 - 15:48)
Rebonjour,

Tu as des textes justifiés en colonne étroite, d'où des espaces intermots hétérogènes.

Je te conseille la déclaration CSS hyphens: auto (avec préfixes navigateurs) pour activer la césure et résoudre ce problème.

Ça ne marche que dans les versions récentes de certains navigateurs (Firefox, Safari - mais pas Google Chrome), mais c'est déjà ça.

Bonne continuation.
Bonjour,

1/ En regardant un peu ton code, je me pose la question de la sémantique sur l'utilisation "importante" des listes

Exemple :
    <div id="logo">
        <ul>
            <li>
                <a href="index.php">
                    <h1>DavidChapon<span id="logo-com">.com</span></h1>
                </a>
            </li>
            <li>
                <span id="logo-job">Ergonome IHM</span>
            </li>
        </ul>
    </div>


Etant donné que tu fais du html5, il existe la balise hgroup pour grouper un titre et un sous titre par exemple.

2/ Pour ton formulaire de contact, pas mal le coup des controles de champs en temps réel sauf que le script de controle du mail est eronné, tu valides le champ pour un mail sans extension, exemple : "toto@tata" = valide.
Bonjour,

Pour le design... On voit que tu n'es pas designer ; ce n'est pas moche, mais ce n'est pas vraiment joli non plus - ça passe.

Pour les répétitions:
a écrit :
Adopter une démarche de conception centrée sur l'utilisateur garantira la satisfaction des utilisateurs.
En remplaçant "des utilisateurs" par "ceux-ci", ce serait moins lourd.

Attention que la notion de "copyright" n'est pas applicable au droit français. Il vaut mieux indiquer "Tout droits réservés".

Sinon, pour le code :
* La meta keyword ne sert plus vraiment aujourd'hui (à part pour aider google à placer ses pub contextuelles, que tu n'utilises pas) et peux donc être oubliée.

* Il faut te limiter à une seule feuille CSS ! 11 c'est tout simplement aberrant. Que tu ai plusieurs feuilles en "dev" chez toi, pour t'organiser est ton choix ; mais en "prod" il faut les combiner, comme l'a déjà signalé SuperMerguez.

* Même chose pour les scripts JS, qu'il est d'ailleurs préférable de placer en bas de page (sauf chargement asynchrone).

* Attention à bien indiquer la langue du document et les changement de langue (lang="fr" sur html et sur lang="en" tout élément contenant du texte en anglais).

* Title n'est pas un attribut obligatoire des liens. Au contraire, il est rarement nécessaire et peut être gênant. Title ne doit être utilisé sur les liens que s'il apporte une information suplémentaire à l'intitulé du lien ET nécessaire à la navigation du visiteur. Sur tes liens de changement de langue, le alt de l'image est l'intitulé ; le title est donc de trop.

* Il serait bien de détailler l'acronyme IHM ailleurs que dans ta meta description. Ce n'est pas parlant pour tout le monde (surtout pour ceux habitués à la terminologie anglaise).

* Les br dans ton slideshow n'ont pas lien d'être (donner une largeur à ton <p> serait aussi efficace) et peuvent être gênant pour une navigation "sans écran".

* Les alt sur les image du slideshow n'apporte rien, au contraire. Alt est un attribut obligatoire, mais il peut rester vide.

* Ce code sert à quelquechose ?
<div class="slidetabs">
        <a href="#" class="">&nbsp;</a>
        <a href="#" class="">&nbsp;</a>
        <a href="#" class="">&nbsp;</a>
    </div>


* Pour ton menu contextuel, dans "compétences", si tu places les "side-title" dans des li, alors, il est inutile de créer deux listes, une seule suffit.

* Ta hiérarchie des titres n'est pas correcte, tu passe de h1 à h3 (page "Maquettage") ou de h2 à h6 (page "Portfolio"). La hiérarchie des titres ne doit pas comporter de "sauts" descendants.

* Tes <p><span class="green-arrow">...</span><br /> sont des titres de sections.

* Un <a> vide est un lien inopérant (pour certains) : <a target="_blank" title="Profil LinkedIn" id="linkedin" href="http://www.linkedin.com/pub/david-chapon/2b/743/3b8"><div></div></a> Une image porteuse de lien doit TOUJOURS se trouver dans le code HTML et non en image de fond !

* Le target blank, c'est une bonne technique pour perdre des visiteurs (et ce n'est pas ergonomique)

* Protège ton formulaire de contact. Ce n'est pas normal qu'on puisse envoyer un message vide Smiley eek



Pour l'ergonomie :

* Tiens, la navigation au clavier est impossible (la faute à outline: none)... C'est je pense une des pires erreurs d'ergonomie possible !

* Attention, même si la plupart de tes visiteurs comprendront, les drapeaux de la France et du Royaume-Uni pour représenter le français et l'anglais ne sont pas forcément un bon choix.

* Ton menu "Compétence" pointe sur une section "l'ergonomie, c'est quoi", personnellement, je m'attendais à un aperçu de tes compétences, de leur niveau de maitrise (un bout de CV, en gros).

* Dans ton portfolio, les légendes des maquettes présentées sont illisibles. Il serait plus judicieux de les placer sous les images.



En gros, une base en HTML correcte, mais à améliorer. Pour l'ergonomie, ton site ne prend pas beaucoup de risques, mais tu arrives quand même à tomber dans des pièges, fais-y attention !

Bonne continuation.
jbcordina a écrit :
Etant donné que tu fais du html5, il existe la balise hgroup pour grouper un titre et un sous titre par exemple.
En fait, la liste incluant le logo ne sert plus à rien. Corrigé.

jbcordina a écrit :
Pour ton formulaire de contact, pas mal le coup des controles de champs en temps réel sauf que le script de controle du mail est eronné, tu valides le champ pour un mail sans extension, exemple : &quot;toto@tata&quot; = valide.
En fait, ce n'est pas un script, c'est du pure html5 & css3, mais je dois le retravailler, ça ne fonctionne pas sous IE, je pense plutôt passer par un script jQuery.

Laurie-Anne a écrit :
Pour le design... On voit que tu n'es pas designer ; ce n'est pas moche, mais ce n'est pas vraiment joli non plus - ça passe.
Aurais-tu éventuellement des suggestions ou des conseils pour l'améliorer? Je ne souhaite pas faire quelque chose de "flashy" dans tout les cas.

Laurie-Anne a écrit :
* La meta keyword ne sert plus vraiment aujourd'hui (à part pour aider google à placer ses pub contextuelles, que tu n'utilises pas) et peux donc être oubliée.
Corrigé.

Laurie-Anne a écrit :
* Il faut te limiter à une seule feuille CSS ! 11 c'est tout simplement aberrant. Que tu ai plusieurs feuilles en "dev" chez toi, pour t'organiser est ton choix ; mais en "prod" il faut les combiner, comme l'a déjà signalé SuperMerguez.
Corrigé.

Laurie-Anne a écrit :
* Même chose pour les scripts JS, qu'il est d'ailleurs préférable de placer en bas de page (sauf chargement asynchrone).
J'ai regroupé 3 scrips en 1 seul fichier. Ces derniers doivent rester dans le header car j'appelle des fonctions dans le contenu.

Laurie-Anne a écrit :
* Attention à bien indiquer la langue du document et les changement de langue (lang="fr" sur html et sur lang="en" tout élément contenant du texte en anglais).
Tu veux dire qu'il faut que j'ajoute ce tag dans les balises <html>, <p>, <span>, etc ?

Laurie-Anne a écrit :
* Title n'est pas un attribut obligatoire des liens. Au contraire, il est rarement nécessaire et peut être gênant. Title ne doit être utilisé sur les liens que s'il apporte une information suplémentaire à l'intitulé du lien ET nécessaire à la navigation du visiteur. Sur tes liens de changement de langue, le alt de l'image est l'intitulé ; le title est donc de trop.
Corrigé.

Laurie-Anne a écrit :
* Il serait bien de détailler l'acronyme IHM ailleurs que dans ta meta description. Ce n'est pas parlant pour tout le monde (surtout pour ceux habitués à la terminologie anglaise).
Comme je l'ai dit plus haut, mon public cible est composé uniquement de personnes expertes du domaine. Si je décide de travailler en freelance un jour, mon vocabulaire sera évidemment différent.

Laurie-Anne a écrit :
* Les br dans ton slideshow n'ont pas lien d'être (donner une largeur à ton <p> serait aussi efficace) et peuvent être gênant pour une navigation "sans écran".
Corrigé.

Laurie-Anne a écrit :
* Les alt sur les image du slideshow n'apporte rien, au contraire. Alt est un attribut obligatoire, mais il peut rester vide.
Je ne savais pas qu'il pouvait rester vide. Corrigé.

Laurie-Anne a écrit :
* Ce code sert à quelquechose ?
Oui. Il est associé aux scripts du slideshow, ce sont les petits boutons en dessous des slides.

Laurie-Anne a écrit :
* Tes <p><span class="green-arrow">...</span><br /> sont des titres de sections.
Faut-il vraiment que ça soit dans une balise <h4>? Il s'agit d'une portion de texte que je veux simplement mettre en avant.

Laurie-Anne a écrit :
* Ta hiérarchie des titres n'est pas correcte, tu passe de h1 à h3 (page "Maquettage") ou de h2 à h6 (page "Portfolio"). La hiérarchie des titres ne doit pas comporter de "sauts" descendants.
Corrigé.

Laurie-Anne a écrit :
* Un <a> vide est un lien inopérant (pour certains) : <a target="_blank" title="Profil LinkedIn" id="linkedin" href="http://www.linkedin.com/pub/david-chapon/2b/743/3b8"><div></div></a> Une image porteuse de lien doit TOUJOURS se trouver dans le code HTML et non en image de fond !
Corrigé.

Laurie-Anne a écrit :
* Le target blank, c'est une bonne technique pour perdre des visiteurs (et ce n'est pas ergonomique)
Quelles solutions s'offrent à moi pour les liens externes? J'allais lu que je pouvais ajouter un petit icône à côté de chaque lien pointant vers l'extérieur de mon site.

Laurie-Anne a écrit :
* Protège ton formulaire de contact. Ce n'est pas normal qu'on puisse envoyer un message vide eek
Je sais, il faut que je le retravaille...

Laurie-Anne a écrit :
* Tiens, la navigation au clavier est impossible (la faute à outline: none)... C'est je pense une des pires erreurs d'ergonomie possible !
Corrigé. (+ ajout de l'évenement :focus)

Laurie-Anne a écrit :
* Attention, même si la plupart de tes visiteurs comprendront, les drapeaux de la France et du Royaume-Uni pour représenter le français et l'anglais ne sont pas forcément un bon choix.
J'y ai pensé. Je vais ajouté le nom de la langue + le drapeau.

Laurie-Anne a écrit :
* Ton menu "Compétence" pointe sur une section "l'ergonomie, c'est quoi", personnellement, je m'attendais à un aperçu de tes compétences, de leur niveau de maitrise (un bout de CV, en gros).
Ce que tu décris est disponible quand tu cliques sur "Concevoir" ou "Tester et améliorer". Tu aurais imaginé mixer ces 2 parties ?

[quote=Laurie-Anne]* Dans ton portfolio, les légendes des maquettes présentées sont illisibles. Il serait plus judicieux de les placer sous les images.
C'est ce que je pensais faire au début mais j'ai changer d'avis... Un portfolio comme sur ce site.


Merci à tous pour vos remarques, j'ai pas mal de boulot devant moi ^^
Modifié par SuperPickle (19 Oct 2012 - 14:14)