[Intermédiaire] Avis sur MaSecretaireEnLigne.fr

Bonjour à tous, je suis sur le point de finir un projet que je souhaite vous soumettre.

Ma Secretaire En Ligne

Les objectifs principaux sont :
- sobriété,
- visibilité du contenu,
- validation html/css.

Pour l'instant j'ai testé le site sur :

- Windows : Firefox 3.6 8 et 9, Chrome, Safari, Opera, IE 8 et 9 (version 6 et 7 via IeTester).
- Linux : Firefox 8, Konqueror, Epiphany.
- Android : Firefox, Opera-mini.

Pour le moment le contenu du site est accessible sur l'ensemble de ces navigateurs.

Il me reste encore quelques babioles à faire :

- liens vers les réseaux sociaux,
- un css dédié pour les navigateurs mobiles (Media Queries)
- quelques fix IE 6 et 7.

Je suis preneur de toutes remarques positives ou négatives.
Merci d'avance
Modifié par G3ronim0 (03 Jan 2012 - 20:22)

Mauvais aiguillage...
Modifié par jmlapam (03 Jan 2012 - 21:39)

@jmlapam

Je crois que t'as pas cliqué sur mon lien....

Je me serais pas permis de poster un truc avec un free template et 88 erreurs au validateur....

Le site que tu as vu (masecretaireenligne.sitew.com) n'est pas le mien
Modifié par Laurie-Anne (04 Jan 2012 - 09:35)

J'ai regardé rapidement.

Euh, le logo ? franchement l'effet est pas terrible (question de goût) et bon, le logo en lui-même n'est pas florichon mais pourquoi pas. Et surtout non cliquable ... (non pardonnable ça).

Ensuite pour les onglets, je n'ai rien contre les effets de dégradé en hover, mais soit il faut que ce soit plus rapide, soit tu le fais une fois que la souris a quitté le logo. Là je trouve ça énervant. De plus, quand on fait des onglets, on le rend cliquable sur toute la zone (et non le texte uniquement), bon là dessus, même alsa fait "cette erreur" (c'est un avis perso).

"Tout est SIMPLICITE :" ? ça se dit ça ?

Dans l'ensemble c'est assez froid et old school comme design, mais pourquoi pas, c'est peut-être un choix.

Le champ "message" de la page "contact" me parait drolement ridicule, même si c'est pour un premier contact, difficile d'expliquer ses besoins dans un espace si petit (même si il est possible de l'agrandir, je peux t'assurer que peu de monde savent que ça existe). Un petit padding sur les input/textarea ne feraient pas de mal également.

Le code source n'est pas moche dans l'ensemble.

Pourquoi <meta content="Ma Secretaire En Ligne" name="author"> et non Sadler christine ?
Sinon je ne décortique pas plus de ce côté là

Un dernier truc qui m'a interpellé, mais c'est peut-etre normal. Tu mets en valeur "Accueil téléphonique du lundi au vendredi de 9h30 à 18h30." mais je ne vois pas le numéro de téléphone ? C'est voulu ? (probablement réservé aux clients, je ne sais pas, mais ça m'intrigue )

Bah t'as modifié ton mess à 20h22 soit plus d'une heure après mon post.
Je vois mal comment j'aurais pu atterrir ailleurs à moins que l'on nous espionne


Désolé de cette confusion, je regarderai donc le site en question.

a écrit :
Bah t'as modifié ton mess à 20h22 soit plus d'une heure après mon post

J'ai pas touché au lien...je connais le site sur lequel t'es tombé...mais pour y arrivé tu serais pas passé par une recherche google...enfin bref

a écrit :
Désolé de cette confusion, je regarderai donc le site en question.

Merci

@kenor merci pour tes remarques

Pour le style "old-school" en effet c'est un choix, on voulait éviter le cliché de la télé secrétaire avec un casque micro... Par exemple la bannière c'est le bureau de ma femme.

Pour le logo non-cliquable, c'est vrai que c'est courant (j'avoue j'en raffole pas). J'ai voulu joué avec les transition css.

Les onglets en hover, je vais testé de faire l'effet que quand on quitte le survol.

a écrit :
on le rend cliquable sur toute la zone (et non le texte uniquement), bon là dessus, même alsa fait "cette erreur" (c'est un avis perso).

Là dessus je suis plutôt à la mode alsa...choix très perso .

Pour la page de contect en effet, y a du boulot : padding sur les input et même les agrandir un peu tout comme le textarea.

Pour le téléphone c'est bien vu, il n'apparait que sur la page contact. A rajouter.
Modifié par G3ronim0 (03 Jan 2012 - 22:57)

Bonne année 2012 (change le pied de page),

pourquoi utilises-tu des tirets bas dans la page liste_des_articles.html alors qu’ailleurs ce sont des tirets ?

Tu utilises des doctypes différents suivants les pages, cela peut se justifier dans certains cas, mais ici je ne vois pas pourquoi.

La meta keywords est-elle utile ?

Dans la page liste_des_articles.html tes images base_button_search.png ressemblent trop à des boutons. Tout le monde va cliquer.

Dans la page de contact la largeur des messages d’erreur empiète sur la colonne de gauche.

L’astérisque signifie-t-il que le champ est obligatoire, ce n’est pas indiqué. Si c’est le cas, il y a une erreur car le formulaire est valide si le message est vide.

Séparer les pages prestations et tarifs n’est peut-être pas une bonne idée.

À propos du logo MSEL dommage qu’il utilise une police oblique, du coup une partie du M et du S est coupée.

Mettre peut-être une favicon.

Au point de vue typographique on peut remplacer les «'» par des «’», les «...» par des «…», «1ère» par «1^ère», mettre des accents sur les majuscules «SIMPLICITÉ, Économies».

pourquoi utiliser l’encodage utf-8 et continuer à utiliser des &eacute; ? Si tu y tiens vraiment, code alors en us-ascii.

Dans la page d’accueil rajoute un point à «Pas de contrat, ni de formalités administratives» ou un «;» pour séparer les éléments d’une liste.

Pour les vieux navigateurs, n’oublie pas d’entourer de commentaires l’intérieur de tes <script>. Exemple :

<script type="text/javascript"><!--
writeInConsole("Hello World ! Voici mon code javascript");
//-->
</script>

Supprime les lignes 175 et 176 du fichier page-1-Bienvenue-sur-MaSecretaireEnligne.html

</script>
<script type="text/javascript">

, mais le mieux reste d’externaliser ton javascript ainsi que ta css.

Ta bannière est une photo préfère dans ce cas le jpg au png.

Dommage d’avoir un ascenseur horizontal. Je verrais bien ton site liquide (largeur qui s’adapte à la fenêtre).

Quand tu mets «Le travail est effectué». C’est bien de rassurer le futur client

Dans la page charte, utiliser la troisième personne avec «Ma Secrétaire En Ligne fait ceci fait cela…» donne l’impression de parler à une machine ou à Alain Delon.

G3ronim0 a écrit :
Bah t'as modifié ton mess à 20h22 soit plus d'une heure après mon post

fin mot de l'histoire qui n'en est pas une, effectivement comme je navigue sous chrome la barre d'adresse est aussi le moteur de recherche...

Franchement en visitant ton site, je suis rassuré parce que quand on voyait l'autre, c'était juste pas possible. Le site tient mieux la route, c'est évident.
Maintenant quelques pistes d'améliorations possibles :

- la page des mentions légales est rédigée étrangement, attention surtout à

a écrit :
SIRET : en attente d'immatriculation

, c'est pas top.
- dans la page des conditions de ventes, attention à la manière dont tu nommes le site dans la partie responsabilité parce que

a écrit :
Ma Secrétaire En Ligne respecte...

n'est pas équivalent à MaSecretaireEnligne.fr respecte...

- le design est peut-être old school mais l'objectif de sobriété est atteint donc mais tu as tort de négliger la typographie.

- les micro-formats sont appréciables, les labels sur le formulaire également, les alt aussi, l'accessibilité semble avoir été prise en compte, en revanche je ne suis pas sûr que les contrastes soient top dans cette perspective. De plus la navigation clavier est presque inexistante.

- la bannière est peu convaincante
- la performance peut-être améliorée d'autant que les scripts servant à la petite animation sur la bannière peuvent être enlevés m'enfin ça c'est très subjectif: je ne trouve pas que l'animation soit particulièrement justifiée.

Voilà pour mon point de vue sur le VRAI site
Modifié par jmlapam (04 Jan 2012 - 00:11)

kenor a écrit :
Tout est SIMPLICITE ? ça se dit ça ?

Oui ça se dit ("tout est beauté", "tout est chaos", "tout est confusion", etc). Mais c'est pas une formulation qui s'emploie tous les 4 matins et, effectivement, ça peut fracturer l'œil (surtout avec des majuscules sans accents...).
Modifié par jb_gfx (04 Jan 2012 - 00:14)

Bonjour,

J'ai un peu de mal avec ce détail :

a écrit :
» Pas de contrat, ni de formalités administratives

jb_gfx a écrit :


Oui ça se dit (&quot;tout est beauté&quot;, &quot;tout est chaos&quot;, &quot;tout est confusion&quot;, etc). Mais c'est pas une formulation qui s'emploie tous les 4 matins et, effectivement, ça peut fracturer l'œil (surtout avec des majuscules sans accents...).

Oui je crois que c'est l'accent en moins qui m'a perturbé.

Laurie-Anne a écrit :
J'ai un peu de mal avec ce détail :
» Pas de contrat, ni de formalités administratives

http://www.cesu.urssaf.fr peut-être.
Mais dans tous les cas ça ne nous regarde pas...

Yvan L. a écrit :
Mais dans tous les cas ça ne nous regarde pas...

Si c'est une formulation hasardeuse, si ça nous regade

Laurie-Anne a écrit :
Si c'est une formulation hasardeuse, si ça nous regade

L'art de toujours retomber sur ses pattes...

Merci pour toutes ces remarques, je m'applique déjà à faire des modifications.

@Adrien881

a écrit :
pourquoi utilises-tu des tirets bas dans la page liste_des_articles.html alors qu’ailleurs ce sont des tirets ?

- J'ai encore des blagues avec l'URL Rewriting, j'ai des formats d'URL différents du coup plusieurs règles à appliquer j'arrive à faire mes deux premières mais pas la troisième...

a écrit :
La meta keywords est-elle utile ?

- Oui je me suis posé la question, il parait qu'elle est devenue obsolète depuis la mise en route de Panda...Mais bon y a encore pas mal qui l'utilisent ex : alsacreations.com et.fr par exemple

- Le logo va être modifié en simple titre cliquable, le favicon est au programme. Pour la bannière en png, j'ai zappé je vais la basculer en jpg.

- Pour l'encodage des caractères bonne question, je suis pas du tout pro sur le sujet du coup j'utilise l'UTF8 par habitude.

- Pour le scroll horizontal, t'as du testé avec une résolution en dessous de 1024px, donc pas encore gérer...je compte faire un style adapté au petites résolutions via Media Queries.

@jmlapam

Je sentais bien le coup de chrome.

- Pour le SIRET, c'est juste la vérité on attend le retour de la déclaration.
- La typo est à revoir en effet.
- La navigation clavier, j'avais pas testé en effet c'est la misère je vais améliorer ça.

@Laurie-Anne

a écrit :
J'ai un peu de mal avec ce détail

- Je viens de modifier peut être que cela est plus parlant. Le fonctionnement est : devis -> facture, il n'y a ni contrat de travail ni contrat commercial.

Mais la remarque est pertinente, on a en débattu avec ma cliente (ma femme). Ce soir une soupe et au lit .
Modifié par G3ronim0 (04 Jan 2012 - 20:47)

Salut salut,

kenor a écrit :
De plus, quand on fait des onglets, on le rend cliquable sur toute la zone (et non le texte uniquement), bon là dessus, même alsa fait "cette erreur" (c'est un avis perso).

G3ronim0 a écrit :
Là dessus je suis plutôt à la mode alsa...choix très perso langue .

Je pense aussi que c'est une erreur (malgré tout le respect que j'ai pour Alsa ). Augmenter la surface cliquable d'un élément c'est une des bases en ergonomie web. Imagine un utilisateur clique un peu au dessus (dans la surface du li) boum il va croire que ton lien ne fonctionne pas et peut être qu'il ne retestera même pas, ou pire qu'il retestera au même endroit et que ça ne fonctionnera pas une deuxième fois.

Sinon pourquoi dans la page devis quand on survol un tr la couleur de fond change ? Mon expérience utilisateur me dit que quand un élément réagis au survol c'est qu'il est cliquable, il m'incite à l’interaction. Ici rien ne se passe quand j'essaye de cliquer. Peut être as-tu mis ça en plus pour que l'ont puisse distinguer la ligne que l'on lit ? Pourquoi ne pas avoir opté pour une ligne sur deux dans une couleurs différentes dans ce cas (le plus sobrement possible bien sur) ? Ça se fais souvent et ne dénature pas le design, bien du contraire ça rend le tableau plus lisible et moins rébarbatif, et au moins ça n'incite pas à l’interaction comme le hover qui est mis en place en ce moment. Enfin il n'y a peut être que moi que ça frustre quand on me proposer un élément contre affordant ^^.

J'aime beaucoup la façon dont tu as traité le focus de tes inputs dans ton formulaire de contact mais ils gagneraient à être un peu aéré, ici on ne sait pas trop (visuellement) quel label est associé à quel input. Genre mettre un margin-bottom sur tes inputs pour bien dissocier les couples labels/inputs. D'ailleurs dans ce formulaire tu as des class avec aucune valeurs.

Sinon globalement je trouve ça plutôt réussi, il y a quelques raté au niveau de l'alignement des block notamment dans la page prestations où leurs dispositions semble un peu hasardeuses.

À bientôt ^^

Hello,

Gili a écrit :
Je pense aussi que c'est une erreur (malgré tout le respect que j'ai pour Alsa ). Augmenter la surface cliquable d'un élément c'est une des bases en ergonomie web. Imagine un utilisateur clique un peu au dessus (dans la surface du li) boum il va croire que ton lien ne fonctionne pas et peut être qu'il ne retestera même pas, ou pire qu'il retestera au même endroit et que ça ne fonctionnera pas une deuxième fois.

Il y a une différence importante entre Alsa et le site de G3ronim0 : sur le site de G3ronim0, les onglets sont mis en valeur au survol de la souris alors que la souris ne se trouve pas sur la surface cliquable du lien, ce qui est à mon avis une grosse erreur et n'est pas le cas sur Alsa.

Julien Royer a écrit :
Il y a une différence importante entre Alsa et le site de G3ronim0 : sur le site de G3ronim0, les onglets sont mis en valeur au survol de la souris alors que la souris ne se trouve pas sur la surface cliquable du lien, ce qui est à mon avis une grosse erreur et n'est pas le cas sur Alsa.

Oui c'est tout à fait vrais. Mais cette erreur mise de côté, le problème est le même, le bouton est délimité par une certaine surface, ça semble logique que toutes cette surface soit cliquable et non pas seulement le texte qui se trouve au centre de cette surface. Sinon c'est plus un bouton/onglet c'est un texte cliquable au milieu d'un rectangle de couleur.

C'est un plus au niveau de l'utilisabilité, me semble-t-il.

Je dis me semble-t-il car je débat, mais je ne suis qu'étudiant, tout ce que je dis ne viens pas de cas pratiques mais de livres donc bon c'est à prendre avec des pincettes même si j'ai la convictions de ce que j'avance (jusqu'à ce qu'on me prouve le contraire du moins ^^)

Je viens de modifier le menu, le lien rempli complètement le <li> en effet c'est plus agréable à naviguer.

Pour le hover du tableau le but est bien de mieux visualiser la ligne en cours de lecture. Je vais tester une couleur différente une ligne sur deux.
Modifié par G3ronim0 (07 Jan 2012 - 20:33)