OnFaitDuWeb.com, http://www.onfaitduweb.com/ Conception Web, applications sur mesure, Respect des standards, Open Source, Design, Web 2.0 Thu, 28 Jan 2010 00:00:00 -0500 Quarnet fr Des petites modifications qui ont beaucoup d'impact. http://www.onfaitduweb.com/484-des-petites-modifications-qui-ont-beaucoup-d-impact-.html http://www.onfaitduweb.com/484-des-petites-modifications-qui-ont-beaucoup-d-impact-.html#comments Thu, 28 Jan 2010 00:00:00 -0500 Pierre Paul Lefebvre http://www.onfaitduweb.com/484-des-petites-modifications-qui-ont-beaucoup-d-impact-.html Parfois les gens ne réalisent pas qu'un petit changement, aussi stupide qu'il semble être, peut devenir très compliqué et peut amener des bogues avec des conséquences graves. Le groupe Crédit Suisse a récemment fait un petit changement à leur interface leur permettant de faire des transferts d'action en lot. La petite modification était d'ajouter une flèche en haut et en bas, pour pouvoir modifier certains paramètres d'un lot. Une fois les flèches pesées, une instruction était envoyée pour annuler le dernier lot et envoyer le nouveau avec les nouvelles instructions.Le programmeur n'avait pas pensé que l'utilisateur double-cliquerait sur les flèches plutôt que de faire de simples cliques. Le programme envoyait donc les instructions en double et parfois les serveurs recevaient des demandes d'annulation de lot pour des lots qui n'étaient même pas encore arrivés.Le groupe Crédit Suisse a écopé d'une amende de 150 000$ par le NYSE (New York Stock Exchange) pour ne pas avoir supervisé adéquatement le développement de leur application.C'est un double-clique qui coute cher...Source : Ars Technica Parfois les gens ne réalisent pas qu'un petit changement, aussi stupide qu'il semble être, peut devenir très compliqué et peut amener des bogues avec des conséquences graves.

Le groupe Crédit Suisse a récemment fait un petit changement à leur interface leur permettant de faire des transferts d'action en lot.

La petite modification était d'ajouter une flèche en haut et en bas, pour pouvoir modifier certains paramètres d'un lot.

Une fois les flèches pesées, une instruction était envoyée pour annuler le dernier lot et envoyer le nouveau avec les nouvelles instructions.

Le programmeur n'avait pas pensé que l'utilisateur double-cliquerait sur les flèches plutôt que de faire de simples cliques. Le programme envoyait donc les instructions en double et parfois les serveurs recevaient des demandes d'annulation de lot pour des lots qui n'étaient même pas encore arrivés.

Le groupe Crédit Suisse a écopé d'une amende de 150 000$ par le NYSE (New York Stock Exchange) pour ne pas avoir supervisé adéquatement le développement de leur application.

C'est un double-clique qui coute cher...

Source : Ars Technica

]]> Les contribuables économisent grâce à Google Transit http://www.onfaitduweb.com/483-les-contribuables-economisent-grace-a-google-transit.html http://www.onfaitduweb.com/483-les-contribuables-economisent-grace-a-google-transit.html#comments Mon, 25 Jan 2010 00:00:00 -0500 Luc Plamondon http://www.onfaitduweb.com/483-les-contribuables-economisent-grace-a-google-transit.html Quelle surprise ai-je eue quand j'ai découvert que je pouvais demander à Google Maps de me suggérer un itinéraire en transport en commun. Ici même, à Longueuil! Il suffit, quand vous entrez votre point de départ et votre point d'arrivée sur Google Maps / Itinéraire, de sélectionner l'option "En transport en commun". Vous obtenez les directions pour vous rendre à l'arrêt à pied, la ligne d'autobus à prendre, son trajet et les heures des prochains passages.Le système marche même mieux que celui du site du Réseau de transport de Longueuil (RTL). Pour obtenir le trajet du bureau jusqu'au Terminus Longueuil, j'ai entré l'adresse du bureau et le mot "Terminus Longueuil", puis un seul clic a suffi pour obtenir l'heure du prochain départ. Sur le calculateur de trajet de la RTL, j'ai passé par 2 pages pour entrer l'adresse du bureau, puis par 3 pages pour trouver le Terminus Longueuil dans la liste des lieux jugés intéressants par les administrateurs de la RTL. Au total, c'est 8 pages qu'il faut visiter pour obtenir l'heure du prochain départ!!!Je m'étais dit qu'un jour je devrais me plaindre au RTL de l'ergonomie de leur site. Mais au final, je sais bien que c'est moi qui va devoir débourser s'ils touchent au site: de la poche gauche en tant qu'acheteur de la passe mensuelle, et de la poche droite en tant que contribuable de ma Ville. Maintenant, c'est réglé. Google s'en charge... et ne charge rien. Quelle surprise ai-je eue quand j'ai découvert que je pouvais demander à Google Maps de me suggérer un itinéraire en transport en commun. Ici même, à Longueuil! Il suffit, quand vous entrez votre point de départ et votre point d'arrivée sur Google Maps / Itinéraire, de sélectionner l'option "En transport en commun". Vous obtenez les directions pour vous rendre à l'arrêt à pied, la ligne d'autobus à prendre, son trajet et les heures des prochains passages.

Le système marche même mieux que celui du site du Réseau de transport de Longueuil (RTL). Pour obtenir le trajet du bureau jusqu'au Terminus Longueuil, j'ai entré l'adresse du bureau et le mot "Terminus Longueuil", puis un seul clic a suffi pour obtenir l'heure du prochain départ. Sur le calculateur de trajet de la RTL, j'ai passé par 2 pages pour entrer l'adresse du bureau, puis par 3 pages pour trouver le Terminus Longueuil dans la liste des lieux jugés intéressants par les administrateurs de la RTL. Au total, c'est 8 pages qu'il faut visiter pour obtenir l'heure du prochain départ!!!

Je m'étais dit qu'un jour je devrais me plaindre au RTL de l'ergonomie de leur site. Mais au final, je sais bien que c'est moi qui va devoir débourser s'ils touchent au site: de la poche gauche en tant qu'acheteur de la passe mensuelle, et de la poche droite en tant que contribuable de ma Ville. Maintenant, c'est réglé. Google s'en charge... et ne charge rien. 

]]> Le Cégep de Saint-Laurent met en ligne le système de gestion des inscriptions de Quiboweb http://www.onfaitduweb.com/482-le-cegep-de-saint-laurent-met-en-ligne-le-systeme-de-gestion-des-inscriptions-de-quiboweb.html http://www.onfaitduweb.com/482-le-cegep-de-saint-laurent-met-en-ligne-le-systeme-de-gestion-des-inscriptions-de-quiboweb.html#comments Thu, 14 Jan 2010 00:00:00 -0500 Luc Plamondon http://www.onfaitduweb.com/482-le-cegep-de-saint-laurent-met-en-ligne-le-systeme-de-gestion-des-inscriptions-de-quiboweb.html C'est toujours un plaisir quand nos clients sont satisfaits et le disent. Le Cégep de Saint-Laurent a récemment mis en ligne le système de gestion d'inscriptions que nous avons développé et voici ce qu'en dit sur son blogue Marc-Olivier Ouellet, le maître d'oeuvre du projet au Cégep:"Le module d’inscription de Quiboweb fonctionne tel que promis. Il offre des fonctionnalités uniques au cégep de Saint-Laurent, à faire envier les autres cégeps. Le module permet de gérer quasiment de A à Z le processus d’inscription pour les ateliers de perfectionnement et les formations aux municipalités (ATPA), y compris le traitement pour les tarifs réduits admissibles pour Emploi-Québec, le paiement en ligne, la génération de PDFs spéciaux, le publipostage, etc. Donc un gros merci à l’équipe de Quiboweb [...]"

C'est toujours un plaisir quand nos clients sont satisfaits et le disent. Le Cégep de Saint-Laurent a récemment mis en ligne le système de gestion d'inscriptions que nous avons développé et voici ce qu'en dit sur son blogue Marc-Olivier Ouellet, le maître d'oeuvre du projet au Cégep:

"Le module d’inscription de Quiboweb fonctionne tel que promis.  Il offre des fonctionnalités uniques au cégep de Saint-Laurent, à faire envier les autres cégeps.  Le module permet de gérer quasiment de A à Z le processus d’inscription pour les ateliers de perfectionnement et les formations aux municipalités (ATPA), y compris le traitement pour les tarifs réduits admissibles pour Emploi-Québec, le paiement en ligne, la génération de PDFs spéciaux, le publipostage, etc.  Donc un gros merci à l’équipe de Quiboweb [...]"

]]> L'Ordre des informaticiens du Québec http://www.onfaitduweb.com/481-l-ordre-des-informaticiens-du-quebec.html http://www.onfaitduweb.com/481-l-ordre-des-informaticiens-du-quebec.html#comments Thu, 07 Jan 2010 00:00:00 -0500 Luc Plamondon http://www.onfaitduweb.com/481-l-ordre-des-informaticiens-du-quebec.html Dans le cadre de son objectif de valorisation des TI, le Réseau Action TI remet à l'ordre du jour cette question: devrait-on créer un ordre des informaticiens?Je ne pense pas que ce soit LA façon de faire.Les différents ordres professionnels ont été créés dans le but de protéger le public. Les actes mettant directement en cause la sécurité du public, comme signer des plans d'édifice ou prescrire des médicaments, sont réservés aux membres de l'Ordre des architectes ou du Collège des médecins. Est-ce vraiment pour protéger le public que les informaticiens réclament un ordre?Je crois plutôt que c'est pour le titre. À mon avis, un titre officiel n'aura pas l'influence espérée. Il existe un ordre des conseillers en ressources humaines et en relations industrielles agréés et cela ne change rien à ma perception de la valeur de ces professionnels. De plus, comme le montre un sondage mené sur LinkedIn, plus les répondants sont âgés, plus ils sont contre la création d'un ordre. Je dirais que c'est parce que les jeunes veulent compenser leur manque d'expérience aux yeux des employeurs et qu'à l'inverse, les gens d'expérience voient bien que dans l'industrie, ce ne sont pas le titre ni les diplômes qui font la réputation. De plus, le titre ne vient pas gratuitement. Il faut d'abord payer chaque année une cotisation qui est typiquement d'au moins 200 $. Ensuite, avec le titre vient l'obligation de respecter un code d'éthique dans son travail de tous les jours. Par exemple, si votre employeur vous demande de mentir à votre client, vous devrez lui tenir tête même si vous risquez votre emploi. Si vous contrevenez à votre code d'éthique, plus question de refiler la responsabilité à la compagnie qui vous emploie: vous serez poursuivi personnellement, vous aurez une amende à payer, vous serez blâmé publiquement et vous serez possiblement privé de votre titre.Je pense plutôt que ce que nous voulons, en tant qu'informaticiens au Québec, c'est une association forte qui utilisera la force du nombre pour défendre nos intérêts, faire des interventions dans les médias pour valoriser la profession et offrir des services à ses membres. Les ingénieurs ont la leur: le Réseau des ingénieurs sert ouvertement les intérêts des ingénieurs, et non les intérêts du public, et il le fait sans exiger de cotisation car il se finance avec la publicité des entreprises désireuses de rejoindre ce bassin de 50000 membres financièrement à l'aise. Les informaticiens ont quelque chose qui s'en rapproche, le Réseau Action TI, et si l'adhésion était gratuite nous excéderions peut-être les 50000 membres!Voir les résultats du sondage mené sur LinkedIn, avec une discussion:http://www.linkedin.com/osview/canvas?_ch_page_id=1&_ch_panel_id=1&_ch_app_id=7231830&_applicationId=1900&_ownerId=0&appParams={%22uri%22:%22/answers/show/68256%22}Participer à un des nombreux fils de discussion:http://hr4us.wordpress.com/2010/01/04/synthese-et-analyse-de-etes-vous-pour-ou-contre-un-ordre-des-ti-au-quebec-premiere-partie/Remplir le sondage du Réseau Action TI sur la valorisation de la profession (attention, les questions sont orientées pro-ordre!):http://www.actionti.com/sondageprofession Dans le cadre de son objectif de valorisation des TI, le Réseau Action TI remet à l'ordre du jour cette question: devrait-on créer un ordre des informaticiens?

Je ne pense pas que ce soit LA façon de faire.

Les différents ordres professionnels ont été créés dans le but de protéger le public. Les actes mettant directement en cause la sécurité du public, comme signer des plans d'édifice ou prescrire des médicaments, sont réservés aux membres de l'Ordre des architectes ou du Collège des médecins. Est-ce vraiment pour protéger le public que les informaticiens réclament un ordre?

Je crois plutôt que c'est pour le titre. À mon avis, un titre officiel n'aura pas l'influence espérée. Il existe un ordre des conseillers en ressources humaines et en relations industrielles agréés et cela ne change rien à ma perception de la valeur de ces professionnels. De plus, comme le montre un sondage mené sur LinkedIn, plus les répondants sont âgés, plus ils sont contre la création d'un ordre. Je dirais que c'est parce que les jeunes veulent compenser leur manque d'expérience aux yeux des employeurs et qu'à l'inverse, les gens d'expérience voient bien que dans l'industrie, ce ne sont pas le titre ni les diplômes qui font la réputation.

De plus, le titre ne vient pas gratuitement. Il faut d'abord payer chaque année une cotisation qui est typiquement d'au moins 200 $. Ensuite, avec le titre vient l'obligation de respecter un code d'éthique dans son travail de tous les jours. Par exemple, si votre employeur vous demande de mentir à votre client, vous devrez lui tenir tête même si vous risquez votre emploi. Si vous contrevenez à votre code d'éthique, plus question de refiler la responsabilité à la compagnie qui vous emploie: vous serez poursuivi personnellement, vous aurez une amende à payer, vous serez blâmé publiquement et vous serez possiblement privé de votre titre.

Je pense plutôt que ce que nous voulons, en tant qu'informaticiens au Québec, c'est une association forte qui utilisera la force du nombre pour défendre nos intérêts, faire des interventions dans les médias pour valoriser la profession et offrir des services à ses membres. Les ingénieurs ont la leur: le Réseau des ingénieurs sert ouvertement les intérêts des ingénieurs, et non les intérêts du public, et il le fait sans exiger de cotisation car il se finance avec la publicité des entreprises désireuses de rejoindre ce bassin de 50000 membres financièrement à l'aise. Les informaticiens ont quelque chose qui s'en rapproche, le Réseau Action TI, et si l'adhésion était gratuite nous excéderions peut-être les 50000 membres!

Voir les résultats du sondage mené sur LinkedIn, avec une discussion:
http://www.linkedin.com/osview/canvas?_ch_page_id=1&_ch_panel_id=1&_ch_app_id=7231830&_applicationId=1900&_ownerId=0&appParams={%22uri%22:%22/answers/show/68256%22}

Participer à un des nombreux fils de discussion:
http://hr4us.wordpress.com/2010/01/04/synthese-et-analyse-de-etes-vous-pour-ou-contre-un-ordre-des-ti-au-quebec-premiere-partie/

Remplir le sondage du Réseau Action TI sur la valorisation de la profession (attention, les questions sont orientées pro-ordre!):
http://www.actionti.com/sondageprofession

]]> Des concepts de validation de formulaires bien pensés http://www.onfaitduweb.com/480-des-concepts-de-validation-de-formulaires-bien-penses.html http://www.onfaitduweb.com/480-des-concepts-de-validation-de-formulaires-bien-penses.html#comments Tue, 22 Dec 2009 00:00:00 -0500 Marie-Andrée Lacroix http://www.onfaitduweb.com/480-des-concepts-de-validation-de-formulaires-bien-penses.html Je n'ai pas pu m'empêcher de bloguer sur ce sujet qui me tient tant à coeur. La validation, c'est très important! Voici quelques exemples qui, à mon avis, sont efficaces et vraiment bien faits.https://secure.livestream.com/myaccount/loginIl y a un indicateur (assez évident merci) qui valide au fur et à mesure. Notez que le bouton submit est innactif tant et aussi longtemps que les champs ne sont pas remplis correctement. Winner!http://www.bigcartel.com/signup/diamondLes erreurs sont affichées en rose en haut. Les labels erronés deviennent rose. L'essentiel quoi.http://gowalla.com/users/newLook original! Les champs erronés et valides sont différenciés de façon clair.http://www.launchmind.com/signup/Intéressant. Étant donné que le formulaire est long, le message d'erreur s'affiche en bas, en-dessous du bouton « create account ». J'aime l'idée.http://www.popscreen.com/joinOn peut facilement différencier le champs valide et celui qui ne l'est pas. De plus, on a une petite note qui donne de l'information supplémentaire sur le champs actif. Bien pensé.http://thumbslap.com/signup/Classique, mais assez évident.https://wwws.mint.com/login.event?task=SJ'aime le fait que la validation se fait au fur et à mesure. Il est facile de savoir ce qui est bon de ce qui ne l'est pas. Thumbs up!https://www.squarespace.com/process/CreateSquarespaceAccountUn formulaire horizontal... c'est la première fois que j'en vois un. Pas mauvais comme validation.https://secure.wufoo.com/signup/1/Classique, mais original en même temps. Vive l'évidence!

Je n'ai pas pu m'empêcher de bloguer sur ce sujet qui me tient tant à coeur. La validation, c'est très important! Voici quelques exemples qui, à mon avis, sont efficaces et vraiment bien faits.


https://secure.livestream.com/myaccount/login
Il y a un indicateur (assez évident merci) qui valide au fur et à mesure. Notez que le bouton submit est innactif tant et aussi longtemps que les champs ne sont pas remplis correctement. Winner!


http://www.bigcartel.com/signup/diamond
Les erreurs sont affichées en rose en haut. Les labels erronés deviennent rose. L'essentiel quoi.


http://gowalla.com/users/new
Look original! Les champs erronés et valides sont différenciés de façon clair.


http://www.launchmind.com/signup/
Intéressant. Étant donné que le formulaire est long, le message d'erreur s'affiche en bas, en-dessous du bouton « create account ». J'aime l'idée.


http://www.popscreen.com/join
On peut facilement différencier le champs valide et celui qui ne l'est pas. De plus, on a une petite note qui donne de l'information supplémentaire sur le champs actif. Bien pensé.


http://thumbslap.com/signup/
Classique, mais assez évident.


https://wwws.mint.com/login.event?task=S
J'aime le fait que la validation se fait au fur et à mesure. Il est facile de savoir ce qui est bon de ce qui ne l'est pas. Thumbs up!


https://www.squarespace.com/process/CreateSquarespaceAccount
Un formulaire horizontal... c'est la première fois que j'en vois un. Pas mauvais comme validation.


https://secure.wufoo.com/signup/1/
Classique, mais original en même temps. Vive l'évidence!

]]> Créer une newsletter : respectez les règles! http://www.onfaitduweb.com/479-creer-une-newsletter-respectez-les-regles-.html http://www.onfaitduweb.com/479-creer-une-newsletter-respectez-les-regles-.html#comments Mon, 21 Dec 2009 00:00:00 -0500 Marie-Andrée Lacroix http://www.onfaitduweb.com/479-creer-une-newsletter-respectez-les-regles-.html Une newsletter est destinée à plusieurs boites de messagerie différentes (hotmail, yahoo, gmail, outlook, thunderbird...) et chacune réagit différemment. La simplicité et l'accessibilité est de mise! Voici quelques règles à suivre pour maximiser la compatibilité:- Ne pas excéder 600 pixels de large- Ne pas dépasser 30 Ko- Insérer le code à l'intérieur de la balise BODY (oublier le reste)- Intégrer complètement en tableaux (aucun div!)- Déclarer le CSS à l'interieur du code (CSS inline)- Lier toutes les images (et autres médias) en liens absolus- Utiliser les entités HTML- Valider le code (Validator du W3C)- Supprimer les espaces inutiles et les commentairesConseils éclairsIl semble y avoir des problèmes de compatibilité avec la couleur de background déclaré dans le HTML, BODY ou un DIV. Je vous recommande donc de créer un tableau 100% avec un BGCOLOR.Il semble aussi avoir des troubles avec les BORDER dans hotmail. Vous pouvez toujours créer des bordures artificielles à l'aide de TR et TD en spécifiant une couleur de fond et un width ou un height.Privilégiez les IMG au lieu des BACKGROUND-IMAGE. Vous constaterez que hotmail et outlook sont capricieux sur ce point.Quelques liens très utiles sur le sujet :http://www.email-standards.org/http://www.campaignmonitor.com/css/http://www.xavierfrenette.com/articles/css-support-in-webmail/

Une newsletter est destinée à plusieurs boites de messagerie différentes (hotmail, yahoo, gmail, outlook, thunderbird...) et chacune réagit différemment. La simplicité et l'accessibilité est de mise! Voici quelques règles à suivre pour maximiser la compatibilité:

- Ne pas excéder 600 pixels de large

- Ne pas dépasser 30 Ko

- Insérer le code à l'intérieur de la balise BODY (oublier le reste)

- Intégrer complètement en tableaux (aucun div!)

- Déclarer le CSS à l'interieur du code (CSS inline)

- Lier toutes les images (et autres médias) en liens absolus

- Utiliser les entités HTML

- Valider le code (Validator du W3C)

- Supprimer les espaces inutiles et les commentaires


Conseils éclairs

Il semble y avoir des problèmes de compatibilité avec la couleur de background déclaré dans le HTML, BODY ou un DIV. Je vous recommande donc de créer un tableau 100% avec un BGCOLOR.

Il semble aussi avoir des troubles avec les BORDER dans hotmail. Vous pouvez toujours créer des bordures artificielles à l'aide de TR et TD en spécifiant une couleur de fond et un width ou un height.

Privilégiez les IMG au lieu des BACKGROUND-IMAGE. Vous constaterez que hotmail et outlook sont capricieux sur ce point.

Quelques liens très utiles sur le sujet :
http://www.email-standards.org/
http://www.campaignmonitor.com/css/
http://www.xavierfrenette.com/articles/css-support-in-webmail/

]]> Mise au point sur les splash pages (Page tunnel) http://www.onfaitduweb.com/478-mise-au-point-sur-les-splash-pages-page-tunnel-.html http://www.onfaitduweb.com/478-mise-au-point-sur-les-splash-pages-page-tunnel-.html#comments Tue, 08 Dec 2009 00:00:00 -0500 Marie-Andrée Lacroix http://www.onfaitduweb.com/478-mise-au-point-sur-les-splash-pages-page-tunnel-.html Il y a 20 ans, fumer était « in » et bien vue. Maintenant, tout le monde sait que fumer n'est pas bon. Autrefois, avoir une splash page (ou page tunnel, page d'entrée, page d'introduction) était à la mode. Maintenant, il est prouvé que ce genre de pratique n'est pas recommandé (sauf pour certains cas précis). Pourquoi faire cette analogie? Parce qu'il existe encore des gens qui veulent des splash pages pour les mauvaises raisons.Une splash page peut être utile. En voici quelques exemple :1- Afficher une mise en garde2- Afficher un message important ou une nouveauté3- Choisir une langue et/ou un pays4- Choisir une version et/ou une préférence5- Présenter une image très artistique6- Afficher un mode d'emploiEn dehors de ces exemples, une splash page peut s'avérer dommageable.La splash page n'a pas très bonne réputation parce qu'elle...... offre habituellement très peu de contenu textuel et un accès limité aux autres pages du site. Par conséquent, elle diminue considérablement le référencement.... retarde d'une page l'accès à l'information. Elle oblige à cliquer pour accéder à la page d'accueil (la page la plus importante). Il y a donc un clic de trop. Let’s get to the point!... peut être longue à télécharger et du même coup, faire fuir le visiteur.... nuit à la liberté de l'usager. Il doit obligatoirement passer par cette page.... n'est pas toujours appréciée des visiteurs. La visite débute donc avec une note négative.... présente souvent une animation flash que les visiteurs s'empressent de skipper!En conclusion, une splash page devrait être évitée à moins d'avoir une bonne raison.

Il y a 20 ans, fumer était « in » et bien vue. Maintenant, tout le monde sait que fumer n'est pas bon. Autrefois, avoir une splash page (ou page tunnel, page d'entrée, page d'introduction) était à la mode. Maintenant, il est prouvé que ce genre de pratique n'est pas recommandé (sauf pour certains cas précis). Pourquoi faire cette analogie? Parce qu'il existe encore des gens qui veulent des splash pages pour les mauvaises raisons.

Une splash page peut être utile. En voici quelques exemple :


1- Afficher une mise en garde




2- Afficher un message important ou une nouveauté




3- Choisir une langue et/ou un pays




4- Choisir une version et/ou une préférence




5- Présenter une image très artistique




6- Afficher un mode d'emploi




En dehors de ces exemples, une splash page peut s'avérer dommageable.

La splash page n'a pas très bonne réputation parce qu'elle...

... offre habituellement très peu de contenu textuel et un accès limité aux autres pages du site. Par conséquent, elle diminue considérablement le référencement.

... retarde d'une page l'accès à l'information. Elle oblige à cliquer pour accéder à la page d'accueil (la page la plus importante). Il y a donc un clic de trop. Let’s get to the point!

... peut être longue à télécharger et du même coup, faire fuir le visiteur.

... nuit à la liberté de l'usager. Il doit obligatoirement passer par cette page.

... n'est pas toujours appréciée des visiteurs. La visite débute donc avec une note négative.

... présente souvent une animation flash que les visiteurs s'empressent de skipper!

En conclusion, une splash page devrait être évitée à moins d'avoir une bonne raison.


]]> En 8 points, nous avons augmenté les ventes en ligne de 10 000% en 5 ans http://www.onfaitduweb.com/477-en-points-nous-avons-augmente-les-ventes-en-ligne-de-en-ans.html http://www.onfaitduweb.com/477-en-points-nous-avons-augmente-les-ventes-en-ligne-de-en-ans.html#comments Tue, 01 Dec 2009 00:00:00 -0500 Marie-Andrée Lacroix http://www.onfaitduweb.com/477-en-points-nous-avons-augmente-les-ventes-en-ligne-de-en-ans.html Résumé de l'article anglais http://boagworld.com/design/8-ecommerce-improvementsUne augmentation de 10 000% des ventes! Cela paraît incroyable n'est-ce pas? Surtout quand on se rend compte que leur client moyen est agé de 80 ans! Qui a dit que les personnes âgées n'utilisent pas Internet...?Une étude de cas du site Web de Wiltshire Farm Foods.1. Éviter le fouillisUn site de e-commerce doit avoir des éléments qui se démarquent des autres. Autrement dit, ils ne doivent pas avoir l'air d'un fouilli. Il faut évitez de distraire le client, mais plutot l'amener à se concentrer sur les éléments essentiels.2. Démarquer le panier d'achatUn des éléments les plus importants d'un site de e-commerce est évidemment le panier d'achat. Il doit être facile à trouver et à utiliser.3. Avoir des repères visuels évidentsDans le cadre d'un site interractif, il primordiale d'avoir des repères visuels qui aide à la compréhension et la navigation. Voici quelques exemples : - Validation de formulaire - Indication d'ajout d'un produit dans le panier d'achat- Indication de supression d'un produit dans le panier d'achat- Étapes dans le processus d'achat en ligne4. The bigger the betterUne image faut souvent mille mots. Une fonctionnalité importante que tous les sites de e-commerce devraient avoir est de pouvoir grossir les images de produits. Plus c'est gros, plus c'est clair, mieux c'est! Surtout pour les personnes agées...5. Faire des boutons et des liens évidentsLa poursuite du plus c'est gros, mieux c'est peut également être appliquée aux boutons et aux liens. 6. Avoir une aide disponible en tout tempsUne transaction en ligne soulève beaucoup de questions dans l'esprit des utilisateurs. Il existe plusieurs façon d'y remédier :- Rassembler toute l'aide en une seule section- Proposer un tutoriel- Afficher une aide contextuelle tout au long du processus d'achat7. Gérer les erreurs avec éléganceSi vous ne voulez pas perdre la vente, vous devez gérer les erreurs avec grâce et rassurer l'utilisateur en lui indiquant qu'il peut toujours continuer. Voici deux règles de bases à suivre :- Le message doit être très visible- Le message doit indiquer à l'utilisateur ce qu'il faut faire8. Communiquer la valeur ajoutéeQu'est-ce que vous avez de plus ou de mieux que votre compétiteur? Quelle est votre différenciation? Indiquez la clairement!En conclusionL'augmentation des ventes de 10 000% fait un bon titre pour un article de blog! Toutefois, le pourcentage de croissance n'est pas vraiment important... Ce qui importe est qu'en suivant ces conseils, vous serez assuré de voir une croissance dans vos ventes en ligne.Résumé de l'article anglais http://boagworld.com/design/8-ecommerce-improvements

Résumé de l'article anglais http://boagworld.com/design/8-ecommerce-improvements

Une augmentation de 10 000% des ventes! Cela paraît incroyable n'est-ce pas? Surtout quand on se rend compte que leur client moyen est agé de 80 ans! Qui a dit que les personnes âgées n'utilisent pas Internet...?

Une étude de cas du site Web de Wiltshire Farm Foods.


1. Éviter le fouillis

Un site de e-commerce doit avoir des éléments qui se démarquent des autres. Autrement dit, ils ne doivent pas avoir l'air d'un fouilli. Il faut évitez de distraire le client, mais plutot l'amener à se concentrer sur les éléments essentiels.


2. Démarquer le panier d'achat

Un des éléments les plus importants d'un site de e-commerce est évidemment le panier d'achat. Il doit être facile à trouver et à utiliser.




3. Avoir des repères visuels évidents

Dans le cadre d'un site interractif, il primordiale d'avoir des repères visuels qui aide à la compréhension et la navigation. Voici quelques exemples :

- Validation de formulaire

- Indication d'ajout d'un produit dans le panier d'achat

- Indication de supression d'un produit dans le panier d'achat

- Étapes dans le processus d'achat en ligne




4. The bigger the better

Une image faut souvent mille mots. Une fonctionnalité importante que tous les sites de e-commerce devraient avoir est de pouvoir grossir les images de produits. Plus c'est gros, plus c'est clair, mieux c'est! Surtout pour les personnes agées...


5. Faire des boutons et des liens évidents

La poursuite du plus c'est gros, mieux c'est peut également être appliquée aux boutons et aux liens.




6. Avoir une aide disponible en tout temps

Une transaction en ligne soulève beaucoup de questions dans l'esprit des utilisateurs. Il existe plusieurs façon d'y remédier :


- Rassembler toute l'aide en une seule section

- Proposer un tutoriel

- Afficher une aide contextuelle tout au long du processus d'achat


7. Gérer les erreurs avec élégance

Si vous ne voulez pas perdre la vente, vous devez gérer les erreurs avec grâce et rassurer l'utilisateur en lui indiquant qu'il peut toujours continuer. Voici deux règles de bases à suivre :

- Le message doit être très visible

- Le message doit indiquer à l'utilisateur ce qu'il faut faire


8. Communiquer la valeur ajoutée

Qu'est-ce que vous avez de plus ou de mieux que votre compétiteur? Quelle est votre différenciation? Indiquez la clairement!


En conclusion

L'augmentation des ventes de 10 000% fait un bon titre pour un article de blog! Toutefois, le pourcentage de croissance n'est pas vraiment important... Ce qui importe est qu'en suivant ces conseils, vous serez assuré de voir une croissance dans vos ventes en ligne.

Résumé de l'article anglais http://boagworld.com/design/8-ecommerce-improvements


]]> Firebug Lite VS. les bugs d'IE: la fin d'un cauchemar ? http://www.onfaitduweb.com/476-firebug-lite-vs-les-bugs-d-ie-la-fin-d-un-cauchemar-.html http://www.onfaitduweb.com/476-firebug-lite-vs-les-bugs-d-ie-la-fin-d-un-cauchemar-.html#comments Tue, 24 Nov 2009 00:00:00 -0500 Serge Perreault http://www.onfaitduweb.com/476-firebug-lite-vs-les-bugs-d-ie-la-fin-d-un-cauchemar-.html Tout intégrateur néophyte, a vu un jour ou l'autre son site internet, fraichement intégré sous Firefox, être complètement trucidé lorsqu'il testa ce dernier sous Internet Explorer 6-7 voire même sous la version 8. Les interprétations parfois douteuses d'IE, notamment lorsque l'on parle de float, de bordure, de background-image, de min ou max-width/height ou du comportement des images .png, peuvent amener l'intégrateur au bord du désespoir absolu.Parfois sous IE, les solutions rationnelles et logiques ne fonctionnent pas alors que les scénarios les plus loufoques donnent les résultats voulus. De plus, les outils fournis par Microsoft pour faire le "debugage" paraissent incomplet et peu efficace (exemple IE Developer Toolbar). Dans IE Tester, la DebugBar, renseigne certes sur la nature de la structure CSS, mais dû à son positionnement fixe à gauche de la fenêtre, elle vient parfois réduire le contenu de la fenêtre à un point où la page s'affiche déjà de manière tout chaotique (surtout sur les écrans à faible résolution). Or, lors du debug les utilisateurs de Firefox ont pour la plupart, adoptés un outil fort intéressant appellé Firebug. Bonne nouvelle, Firebug est désormais disponible en mode partiel sous IE, Opera, Safari.On parle ici de Firebug Lite. Un outil qui pourra mettre fin à une incessante période de traumatisme psychologique chez les intégrateurs web de ce monde? On est loin du compte...Qu'est-ce que Firebug Lite ? Firebug Lite est le petit frère de l'extension légendaire que l'on retrouve sous Firefox, en version <script> Javascript. Firebug Lite se décline en trois modes d'utilisation distincts soit :en insérant une ligne de code dans la page html, pour une utilisation en ligne, activer par la touche F12; en téléchargement, pour intégrer les fichiers .js à votre projet pour une utilisation hors-ligne; en "bookmarklet" ou pour les puristes de la loi 101, en applisignet, qui consite à faire d'un lien favoris dans votre barre de signets, un lien vers une application javascript qui s'ouvre à l'intérieur du site actuellement consulté ( voir l'image A ) Image A - Firebug Lite en bookmarkletLes comparaisons entre Firebug et Firebug Lite?Il ne faut pas rêver en couleurs 32 bits, Firebug Lite est une version fort minimaliste de l'authentique Firebug. Pour commencer, les similitudes sont:dans la possibilité d'inspecter les différentes sections du siteavec l'outil INSPECT, qui permet de voir les codes HTML, CSS, Script, DOM et XHR. dans la présence de la CONSOLE Firebug où les utilisateurs expérimentés peuvent questionner directement le site. Voir la liste complète des commandes sur http://getfirebug.com/console.html. Le positionnement de la fenêtre de Firebug Lite, dans le bas de l'écran est identique à Firebug, n'affectant pas la mise en forme du site. Il est aussi possible d'ouvrir Firebug Lite dans une fenêtre indépendante pour pouvoir voir pleinement les renseignements affichés. Comme vous le devinez déjà, il existe plusieurs différences majeures entre les deux versions de Firebug :Il est impossible d'éditer les fichiers HTML, CSS, etc, en direct de la page. Les informations affichées par Firebug Lite sont statique. La grande différence avec Firebug, c'est justement qu'il était possible de faire des modifications à même la page et de voir les résultats en direct. Firebug Lite ne donne malheureusement pas cette latitude, qui faisait toute la force de son grand frère. L'onglet excessivement pratique RÉSEAU retrouvé dans Firebug est absent dans Firebug Lite. Il y a aussi un absent de taille, surtout pour les accrocs du respect "pixelistique" du design / intégration, soit l'onglet Pixel Perfect. Sous Firefox, lorsque l'on inspectait un lien avec Firebug, ce-dernier était temporairement désactivé tant que l'on était en mode INSPECT, diffusant ainsi les informations désirés. Or, sous IE, lorsque l'on fait INSPECT sur un lien, on active ce lien, on quitte la page actuelle et Firebug se ferme, vû qu'il était ouvert comme un script javascript à même la page active. Ce bug se décline sous tous les modes d'utilisation de Firebug Lite. Firebug Lite, une faible lumière dans la grande obscurité interprétative d'IE...Pour ceux qui voyaient en Firebug Lite, une solution à biens des migraines constamment renouvelées à chaque debug de fin de projet, je n'ai aucun autre choix que d'être submergé de compassion à votre égard. J'ai aussi passé par ce stade de joie/déception en apprenant l'existence de cet outil. Je m'attendais à un jumeau identique, ou quelques peu diminué du "genuine" Firebug. Mais l'appellation Lite aurait dû me mettre sérieusement la puce à l'oreille... Somme toute, j'ai adopté avec enthousiasme cette petite application, mais je dois m'avouer un peu déçu par ses limites, qui s'approchent, outre la console, des fonctions offertes par le debugbar d'IE Tester (sans les bugs d'affichage de ce dernier) ou de la IE Developer Toolbar d'IE.Mais garder espoir, distingué(e)s collègues, Firebug Lite est en amélioration constante et nous verrons fort probablement de nouvelles versions se rapprocher de notre fidèle compagnon qu'est devenu Firebug.Les sources utilisés pour écrire cet article sont :http://remysharp.com/2007/03/13/firebug-in-ie-for-any-web-site/http://getfirebug.com/lite/ie.htmlhttp://blog.strictly-software.com/2009/02/using-firebug-lite-for-debugging.htmlhttp://blog.jaysalvat.com/articles/firebug-lite-le-firebug-cross-browser-sans-extension.phpBon debug et longue vie à Firebug Lite.

Tout intégrateur néophyte, a vu un jour ou l'autre son site internet, fraichement intégré sous Firefox, être complètement trucidé lorsqu'il testa ce dernier sous Internet Explorer 6-7 voire même sous la version 8. Les interprétations parfois douteuses d'IE, notamment lorsque l'on parle de float, de bordure, de background-image, de min ou max-width/height  ou du comportement des images .png, peuvent amener l'intégrateur au bord du désespoir absolu.

Parfois sous IE, les solutions rationnelles et logiques ne fonctionnent pas alors que les scénarios les plus loufoques donnent les résultats voulus. De plus, les outils fournis par Microsoft pour faire le "debugage" paraissent incomplet et peu efficace (exemple IE Developer Toolbar). Dans IE Tester, la DebugBar, renseigne certes sur la nature de la structure CSS, mais dû à son positionnement fixe à gauche de la fenêtre, elle vient parfois réduire le contenu de la fenêtre à un point où la page s'affiche déjà de manière tout chaotique (surtout sur les écrans à faible résolution).

Or, lors du debug les utilisateurs de Firefox ont pour la plupart, adoptés un outil fort intéressant appellé Firebug. Bonne nouvelle, Firebug est désormais disponible en mode partiel sous IE, Opera, Safari.On parle ici de Firebug Lite.

Un outil qui pourra mettre fin à une incessante période de traumatisme psychologique chez les intégrateurs web de ce monde?

On est loin du compte...


Qu'est-ce que Firebug Lite ?

Firebug Lite est le petit frère de l'extension légendaire que l'on retrouve sous Firefox, en version