Communiquer auprès de ses clients c’est bien, mais communiquer efficacement c’est encore mieux.

Les emaillings marketing de fidélisation ou de conquêtes demeurent pour la plupart des fichiers HTML. Les envois de messages marketing en texte pur ou en multipart alternative (envoie HTML + txt) restent très peu utilisés. Pourtant, si vous désirez être certain de toucher chacun des destinataires, l’envoi en multipart alternative reste encore la meilleure solution : le webmail du destinataire affichera la version texte ou HTML selon les préférences de l’utilisateur.

Une communication par mail efficace, qui donnera des résultats taux d’ouverture + taux clic importants, doit passer par l’utilisation de certaines règles essentielles. La première étant la suivante : Plus vos créa. sont simple, plus vos chances d’être efficace / d’avoir des bons taux d’ouverture seront fortes.

Outre les règles marketing à connaître pour faire passer un message, la touche technique que vous allez employer reste l’opération la plus délicate mais aussi la plus importante.

Pour vos créations HTML, je recommande de créer des fichiers HTML simples démunis de code exotique afin qu’ils soient facilement lisibles par l’ensemble des webmails utilisés.

Évitez donc :

• les feuille de style (CSS), qui ne sont pas forcément interprétées par les webmail ;
• le flash, dont les balises peuvent être supprimées par certains webmail ;
• le javascript qui est purement banni des webmails ;
• les formulaires, dont les balises sont bannies pour cause de sécurité ;
• le XML ;
• les balises MAP sur vos images, dont l’utilisation doit être bannie tout simplement ;
• les balises HTML exotiques pas forcément reconnus par tous les navigateurs web les plus courants (blink, …) ;
• les underscore (_) dans la dénomination des répertoires, de la page HTML ou des fichiers d’images. Ces caractères posent encore des soucis chez certains webmails.

Enfin, vous savez que la plupart des clients de messagerie et webmails n’affichent pas les images d’un mail par défaut pour éviter les virus. Si vous envoyez un message HTML dont le corps est une image, vous aurez encore moins de chance de toucher le destinataire pour la raison citée précédemment. En revanche, si vous remplacez les images par du texte pur dans vos créa HTML, ou si vous placez un attribut “alt” dans vos balises “img”, le message aura encore plus de chance d’être lu.

exemple email Ebay : avant l’affichage des images, aucun texte n’est disponible

exemple email MySpace : avant l’affichage des images, il est déjà possible de visualiser le texte.

Pour résumé, vos créations HTML peuvent rester sexy, mais doivent être simples tant par l’utilisation du code HTML que dans la façon de présenter le message. Préférez donc l’utilisation :

• des images pour “les visuels” ;
• des attributs “alt” dans vos balises “img” ;
• du texte pur pour tout l’ensemble des messages à faire passer ;
• des tableaux HTML pour la structure de la création.

La règle fonctionne également pour les pages HTML / XHMTL que vous concevez sur votre site web : plus vos créa seront simples, mieux elle fonctionneront dans le navigateur de votre lecteur.

L’architecture Web, l’ergonomie Web et la rédaction Web sont à considérer pour la création d’un formulaire en ligne. Afin de proposer une bonne expérience utilisateur, le formulaire doit proposer un contenu clair et précis et efficace. L’internaute doit également pouvoir y vivre une expérience utilisateur sans y perdre de temps.

Les principes de conception d’un formulaire en ligne

Afin de concevoir un formulaire en ligne à la fois claire, efficace et navigable, il faut marier adéquatement architecture Web et rédaction Web.

Voici quelques principes importants :

• Déterminer le public cible du formulaire en ligne;
• Déterminer la fonction du formulaire en ligne;
• Énumérer les informations présentées à l’utilisateur;
• Catégoriser les informations et effectuer un tri;
• Rédiger de façon claire et compréhensible;
• Dessiner une architecture Web pour le formulaire en ligne.

L’ergonomie Web d’un formulaire en ligne

L’ergonomie Web est essentielle pour une conception efficace et navigable d’un formulaire en ligne. L’ergonomie Web permet notamment à l’utilisateur de remplir facilement les champs de saisies.

Voici quelques règles à retenir :

• Créer un visuel efficace pour le formulaire en ligne;
• Faciliter la saisie de données en adaptant la longueur de la ligne;
• Si le formulaire est long, le présenter en plusieurs étapes (pages);
• Soigner la présentation des libellés;
• Permettre de revenir en arrière pour modifier ses informations;
• Résumer les informations saisies lors de la dernière étape;
• Afficher un message de confirmation à la toute fin du formulaire en ligne;
• Envoyer une confirmation finale à l’utilisateur par courriel.

Des tests utilisateurs sont conseillés, et ce, qu’il s’agisse de l’architecture Web, de l’ergonomie Web ou de la rédaction Web. Les tests utilisateurs permettront d’améliorer notamment la gestion des erreurs. En bref, des tests utilisateurs permettront de se rapprocher d’une expérience utilisateur réussie.

Pour conclure

Le formulaire en ligne demande une conception minutieuse. Étant souvent présenté dans un contexte transactionnel, il doit susciter la confiance de l’utilisateur. Sa conception doit être effectuée dans le respect des normes imposées par l’architecture Web, l’ergonomie Web et la rédaction Web. Un savant mélange des 3 augmentera ses chances de succès.

Afin d’en apprendre plus sur la conception d’un formulaire en ligne, nous vous invitons à consulter les billets de Frédéric Cavazza, Luke Wroblewski (fichier .PDF) et Jean-Claude Grosjean.

Billet initialement publié sur Mikimya

Dans 95% des cas, concevoir une interface reviens à assembler des briques “standards”. Dans mon jargon on appelle ça des modèles de conception (“design patterns” en anglais). Ces modèles sont à la fois issus de la façon dont le HTML traite les éléments d’interfaces basiques (champs, boutons…) mais également de l’accumulation de bonnes pratiques.

Et justement, quand il est question d’accumulation de bonnes pratiques, rien de telle que les librairies de modèles de conception d’interfaces. Je vous propose de partager avec vous ma liste de librairies. Certaines sont très complètes et actives, d’autres n’ont quasiment pas évoluées mais elles présentent toutes un intérêt.

Mes préférées :

• Welie, de loin la plus complète ;
• Yahoo! Design Pattern Library, de loin la mieux documentée ;
• UI Patterns, une librairie de plus en plus riche et très agréable à parcourir ;
• Pattern Tape, qui est une compilation de captures d’écrans.

Celles qui concernent les interfaces d’applications :

• Designing Interfaces, qui est issue du livre ;
• User Interface Design Patterns, qui est un peu limitée.

Celles qui concernent le E-commerce :

• Web Design Practices, qui n’est malheureusement plus alimentée mais apportent des stats très intéressantes ;
• Ecommr, une toute nouvelle librairie avec des tonnes d’exemples.

Voilà de quoi vous donner des nombreuses sources d’inspiration.

(via Use Design Blog)

La création d’un compte a toujours été une étape pénible pour les utilisateurs et problématique pour les concepteurs. Pénible car il faut nécessairement remplir de nombreux champs et passer par diverse étapes de validation de l’inscription (via Email de confirmation et tout le bazar).

Heureusement est arrivé OpenID, un système d’authentification décentralisé. Pour faire simple : vous créez une compte OpenID qui va vous servir d’identifiant unique sur les services compatibles. Résultat : le processus de création de compte est grandement simplifié et raccourci.

Illustration avec Tarpipe, un service de mashup sociale (dont je parle ici : Ping.fm + Yahoo! Pipes = Tarpipe).

Première étape, vous arrivez sur l’écran de création de compte (1 champ, 1 bouton) :

Deuxième étape, vous cliquez dans le champ et un panneau s’ouvre juste en dessous avec la liste des principaux fournisseurs d’identité (vous pouvez aussi cliquer sur “Other OpenID” pour saisir l’URL de votre propre service ou sur “Get OpenID” pour vous créer une identité) :

En cliquant sur un service, un champ “My username” apparait en dessous avec votre curseur dedans, le champ principal est pré-renseigné :

Vous saisissez directement votre nom d’utilisateur (sans avoir à cliquer) et le champ principal est également renseigné :

Vous tapez la touche “Return” et le panneau disparait. Ne restent plus que le champ (renseigné) et le bouton “Create account” :

Rien à redire, le processus est simple (très peu de clic) et intuitif (le curseur est positionné au bon endroit), le picto en forme de cadenas est là pour rassurer, il y a un minimum de bruit sur l’écran.

En cliquant sur le lien “Help” vous êtes redirigé vers la page d’aide d’OpenID (qui est également très claire) :

Inutile de vous dire que je trouve cette solution particulièrement bien adaptée pour faciliter l’inscription à un service. Bien évidement il faut posséder un compte OpenID mais cette solution facilite tellement al vie des internautes.

Alors que la World Usability Day 2008 est encore en cours, il est déjà l’heure pour moi de vous faire un rapide compte-rendu de la conférence qui s’est déroulée hier soir.

Près de 200 inscrits et une centaine de participants se sont donc retrouvés dans le centre de conférences de Microsoft pour écouter les différents intervenants parler de l’utilisabilité appliquée aux interfaces riches. Un grand merci aux orateurs : Patricia, Mathieu et Emmanuel, Toufik, Sam – Michael – Thibault et Dick.

Un grand merci également aux équipes de Microsoft qui nous ont réservé un très bon accueil.

Reste pour moi maintenant la laborieuse tâche de récupérer les différents diaporamas, photos et vidéos pour les publier sur ce site…

J’adorerais également partager avec vous votre ressenti sur cette quatrième édition : le format, les interventions… N’hésitez pas à mettre vos remarques / remerciements / encouragements dans les commentaires.

Le 13 novembre approche à grand pas, mais c’est bien demain (le 12 novembre) que va se dérouler la quatrième édition de la Journée Mondiale de l’Utilisabilité à Paris.

Toutes les inscriptions enregistrées ont été validées, nous vous attendons donc demain à partir de 18H30 au Microsoft Business Center 148 rue de l’Université, 75007 Paris (Voir le plan).

Ne soyez pas en retard car le programme est très chargé (6 interventions en 2 heures) et que je serais impitoyable sur les horaires (ça démarrera à 19 H 00).

À demain et n’oubliez pas vos cartes de visites (au cas où…).

Nous sommes à 2 jours de la World Usability Day 2008 et il reste encore des places. Il n’est donc pas trop tard pour vous inscrire : Inscription à la Journée Mondiale de l’Utilisabilité.

Profitez-en car il n’y a qu’un seul événement de ce type par année !

L’ergonomie Web d’une page d’accueil est essentielle pour une bonne expérience utilisateur.

La page d’accueil est la porte d’entrée par laquelle entre vos visiteurs. L’ergonomie Web est une méthodes qui vous permet de mieux les accueillir chez vous.

Il faut d’abord prendre en considération quelques points sur la page d’accueil:

1. C’est la page la plus analysée dans tout le site Web;
2. C’est la page qui donnera le ton de la visite à l’internaute;
3. C’est la page qui donnera ou non envie à l’utilisateur de rester ou de partir.

Malgré son importance dans la visite de l’internaute, la qualité de son ergonomie Web est encore négligée.

Jakob Nielsen, expert en ergonomie Web et utilisabilité, s’est souvent penché sur la question des pages d’accueil .

Il a mentionné lors d’une entrevue accordée en 2004 que les sites Web se doivent d’apprendre à accueillir des visiteurs de plus en plus pressés.

En 2008, le problème d’une mauvaise ergonomie Web sur les pages d’accueil persiste toujours.

Quelques points à savoir sur la bonne ergonomie Web d’une page d’accueil ?

Les critères d’évaluation bonne ergonomie Web pour la page d’accueil sont les mêmes que pour n’importe quels autres outils numériques:

1. Utilité
2. Accessibilité
3. Simplicité
4. Convivialité

Par quoi ça se traduit dans le contexte d’un site Web?

En insérant:

• Le nom de l’entreprise ainsi que son logo;
• Un court texte résumant le contenu du site Web;
• Un résumé des activités récentes de l’entreprise (réalisations, billets de blogue, etc.)
• Un court texte expliquant l’objectif du site Web auprès des utilisateurs;
• Les coordonnées de l’entreprise (courriel, téléphone, etc.).

De quel type de contenu s’agit-il? Est-il sur le bon site? Pourra-t-il trouver ce qu’il recherche facilement? Ce sont des questions auxquelles l’utilisateur doit trouver rapidement réponse.

Quelques points à savoir sur la mauvaise ergonomie Web d’une page d’accueil ?

S’il existe de bonnes pratiques, il en existe malheureusement aussi des mauvaises. En voici quelques exemples:

• Une introduction (clip en Flash, le choix de la langue, etc.);
• Une page en construction;
• Un lien vers un autre site.

L’utilisateur est pressé. Il n’a pas de temps de franchir des étapes inutiles au court de sa visite chez vous.

En savoir plus sur l’ergonomie Web des pages d’accueil ?

Ce sujet, tel que mentionné plus haut, a fait l’objet de nombreuses études pour bien des experts en ergonomie Web et utilisabilité. Outre Jakob Nielsen mentionné plus haut, nous pouvons également citer Daniel Lafrenière, conseiller en expérience utilisateur, qui a également soulevé des points intéressants sur le sujet.

Il y a aussi Marie Tahir, co-auteure d’un livre portant sur la question qu’elle a écrit en compagnie de Jakob Nielsen.

Même si nous sommes loin de citer ici la liste entières des ergonomes ayant pris position sur la question, tous s’entendent sur un point:

La page d’accueil est en quelque sorte le sommaire exécutif de votre entreprise. C’est donc votre chance de donnez au visiteur l’envie d’en apprendre plus sur vous. Ne la ratez pas!

Billet initialement publié sur Mikimya

Le haut de page est par définition la partie la plus visible d’une page web. Normal puisque vous n’avez pas d’autre choix que de consulter une page en commençant par le haut. Il est donc normal de soigner cette partie de l’écran.

Avoir un header efficace est un art bien maîtrisé par un grand nombre de sites web, mais quand est-il du sub-header ? Mais si enfin, ce bandeau horizontal qui vient se glisser au-dessus du header. Nous parlons bien d’un bandeau de quelques pixels de haut (entre 15 et 20) mais qui peut se révéler particulièrement efficace.

Illustration avec le New York Times qui s’en sert pour faire la promotion des nouvelles fonctionnalités :

Pour Twitter cette zone peut servir à faire de l’animation saisonnière :

Ce bandeau peut également être exploité pour diffuser des liens sponsorisés comme sur le blog du Capitaine Commerce :

Les groupes peuvent également s’en servir pour faciliter le basculement d’une marque à une autre comme chez Land’s End :

Les plus audacieux enfin s’en servent même pour faire panier commun comme GAP :

Avec ces différents exemples vous avez donc une panoplie assez large des possibilités offertes par le haut de page. J’espère surtout que ces exemples vous aurons convaincus du potentiel de cette zone de l’écran.

(via Blink)