Le Web social ne reste plus en dehors des sites institutionnels, il y pénètre discrètement pour certains, en masse pour d’autres. Outil marketing de choix, il lance de nouveaux défis, tant aux cyber-stratèges qu’aux webdesigners. Tout l’enjeu consiste ici à maintenir l’identité du site tout en y intégrant des éléments fonctionnels dont les usages et les signatures visuelles se sont imposés hors de l’entreprise. Les maîtres mots sont « simplicité », « intégration » et « adaptation ». Tour d’horizon de bonnes et moins bonnes solutions.

Faciliter le signalement d’une information sur les réseaux sociaux (pollinisation)

Très répandue dans l’univers des services du Web 2.0, des blogs et des sites de presse, la possibilité de signaler une information sur les réseaux sociaux fait une entrée massive au cœur des sites institutionnels où l’intérêt de la « pollinisation » est bien compris : ouvrir à la dissémination de l’information corporate, organiser le buzz et s’appuyer sur des habitudes désormais bien ancrées chez les utilisateurs.

GDF Suez joue la carte de la discrétion en intégrant l’appel à la pollinisation dans sa charte graphique, au risque de passer inaperçu. Mais cet appel se situe juste au dessous du titre majeur de la page, comme cela se pratique couramment au sein des sites des grands quotidiens d‘information. L’objectif est bien de pousser l’internaute à penser qu’il peut déclencher ici une action ayant un rapport intime avec le contenu de cette page. La qualité de l’icône joue alors un rôle capital dans l’identification de l’action.

Le laboratoire pharmaceutique GlaxoSmithKline utilise quant à lui un module très répandu, proposé par AddThis, mais laissé ici dans sa version originale en anglais.

BASF emploie le même module, mais intégré à sa charte graphique et placé systématiquement en bas d’article et non pas en haut.

Le Crédit Agricole a préféré recourir au module concurrent de ShareThis, dont icône d’appel est plus discrète et le contenu, francisé.

Zara, joue une carte minimaliste en implantant un seul bouton, celui de Facebook, évitant ainsi la surcharge visuelle.

Préconisations

- Intégrer au mieux ces « appels à la pollinisation » dans la charte graphique (pour en savoir plus : Usabilis : réalisation de charte graphique)

- Placer les icônes en haut des pages, mais sous les titres principaux

- Travailler la qualité d’évocation de l’icône, renforcée éventuellement par du texte

- Franciser les modules issus de tierces parties

Emmener les visiteurs sur les comptes Twitter, Facebook ou YouTube de l’entreprise

Les sites institutionnels s’habituent à orienter les visiteurs vers les comptes corporates implantés sur des plateformes sociales comme Twitter, Facebook, YouTube, Flickr, etc. Il s’agit là de montrer l’ouverture de l’entreprise vers ces nouveaux médias… au risque de perdre l’internaute une fois sorti du cadre institutionnel et entré dans un océan de partage, de sérendipité et de « distraction » (au sens premier du terme).

Diesel dispose ces appels sociaux tout en bas de sa page d’accueil, sans autre indication que les logos des plateformes.

Ford est plus explicite sur son site américain. Il explique que l’on peut également trouver l’entreprise sur six plateformes, dont Scribd (partage de fichiers bureautiques) et Delicious (partage de favoris).

DoMyJeans a également choisi le bas de sa page d’accueil pour diriger le visiteur vers ses espaces Facebook, Twitter et vers on blog.

Préconisations

- Implanter les points d’appel sociaux dès la page d’accueil

- Être explicite sur la fonction des icônes quitte à nommer les plateformes sociales concernées

Agréger la communication sociale de la marque

A l’inverse de la tendance précédente, certaines entreprises affichent au sein même de leur site institutionnel des modules reprenant les contenus émis sur les réseaux sociaux. Le visiteur reste alors à demeure tout en pouvant s’inscrire sur le compte Facebook ou Twitter de la marque.

Whole Foods a, par exemple, créé deux pages spécifiques reprenant son activité sur Facebook et les messages de ses comptes Twitter.

Préconisation

- Si le design du site et l’activité de l’entreprise le permettent, boucler la communication sociale en la faisant apparaître sur le site.

Implanter le bouton « J’aime » de Facebook

Malgré la polémique liée à la non-remontée de données statistiques, les entreprises se sont ruées sur le bouton « J’aime » (I Like) proposé par Facebook. Il permet à la fois au visiteur de s‘abonner directement sur la page Facebook de l’entreprise et au site d’afficher le nombre de personnes qui ont effectué l’opération.

Outback Steakhouse peut ainsi fièrement placarder en bas de sa page d’accueil le compteur qui témoigne de « l’amour » de 700000 clients.

Préconisations

- Implanter un bouton « J’aime » de Facebook lorsque la clientèle de l’entreprise se recrute dans un large public (pour mieux connaitre votre public : Usabilis : enquête utilisateur)

- Faire apparaître le nombre d’abonnés… lorsque le jeu en vaut la chandelle.

Proposer une identification « sociale »

Les sites qui veulent éviter la phase d’inscription à leur service, parfois perçue comme rebutante par les internautes ont aujourd’hui la possibilité d’utiliser les systèmes d’identification ayant recours à un compte déjà créé sur Facebook, Twitter, Google, etc.

Diigo propose ainsi de se connecter à son site via Facebook, Twitter, Google et Yahoo!. Après avoir cliqué sur l’icône, il suffit de saisir son identifiant et son mot de passe pour accéder au service.

Le label Interscope Records dispose du même dispositif, bien en vue sur sa page d’accueil, en insistant sur le gain de temps réalisé par le visiteur.

Préconisations

- Lorsque l’identification sur le site est nécessaire ; et le visiteur, connu comme volage, implanter un système d’identification rapide.

- Implanter ce système très haut sur la page d’accueil en  insistant sur sa qualité première : la rapidité.

Faciliter les commentaires et les évaluations

L’ouverture de l’entreprise au social passe à un moment donné par la possibilité donnée aux visiteurs de commenter les informations et surtout les produits proposés sur le site de l’entreprise. C’est un engagement qui n’a rien d’innocent et qui nécessite la présence de ce que l’on appelle aujourd’hui un Gestionnaire de communauté (community manager), pour animer ces espaces… et veiller au grain.

BNP Paribas est l’une des rares entreprises françaises de premier plan à avoir franchi le pas en s’appuyant d’ailleurs sur Facebook.

Sephora se permet également de laisser ouverts les commentaires sous les produis vendus dans ses rayons.

Préconisations

- Lorsqu’une marque est solidement implantée dans le grand public, étudier l’intérêt de positionner des espaces de commentaires sous les  fiches produits.

- Faire appel à un gestionnaire de communauté.

- L’expression libre des utilisateurs doit être encadrée par une « charte », fixant les limites à ne pas dépasser dans les commentaires.

Proposer un espace de suggestion

L’entreprise peut faire appel à La Sagesse des foules en ouvrant un espace de suggestion permettant à chacun de déposer une nouvelle idée (amélioration d’un produit existant, nouveaux services…), mais aussi de voter pour les propositions des autres.

Dell avec son IdeaStorm a été parmi les premiers à se doter d’un tel espace de suggestion. Excellente initiative puisque l’entreprise a ainsi pris la mesure de la demande concernant des ordinateurs équipés de Linux ou la volonté des clients de disposer de câbles électriques standardisés.

La chaîne Starbucks a opté pour un système similaire pour gérer les multiples attentes de ses clients. Une boîte à idée utile à plus d’un titre puisqu’elle améliore l’implication du client vis-à-vis de la marque, gage parmi d’autres de sa fidélisation.

Préconisation

- Quand la politique de relation client est suffisamment mûre pour gérer les suggestions des clients, implanter un espace spécifique  sur le site.

Conclusion

Effrayées par la non-maitrise des opinions exprimées par les internautes, les plus grandes sociétés ont longtemps été réfractaires à intégrer le Web social sur leur site. Mais finalement, les bénéfices des réseaux sociaux leurs sont apparus comme évidents… à condition que cette intégration soit correctement réalisée.

S’il fallait retenir quelques recommandations, rappelons qu’il est capital de voir apparaitre les fonctions sociales dès la page d’accueil, éventuellement enrichies par des liens vers la communication « sociale » de la marque. De plus, la possibilité de s’identifier sur le site corporate via son compte Facebook ou Twitter fait gagner un temps considérable à l’utilisateur, et permet à l’entreprise de lui proposer des fonctions de partage mieux intégrées. Enfin, les commentaires et espaces de suggestion, s’ils sont bien modérés et encadrés, permettent d’accroitre l’engagement, la confiance (pour en savoir plus: Usabilis : Le rôle de la confiance dans la performance collective) et la fidélisation des utilisateurs.

Depuis quelques années, le stress au travail est devenu un véritable sujet de préoccupation pour les entreprises comme pour les pouvoir publics. Si les médias cristallisent leur attention sur des cas extrêmes (ex : France Télécom ou Foxconn), il s’agit bien d’une problématique qui peut tous nous concerner au quotidien.

Bien évidemment, le stress au travail n’est pas uniquement lié à l’outil informatique et à son ergonomie ; la problématique est complexe et les causes du stress multiples. Pourtant, l’ordinateur qui occupe une place centrale dans notre vie peut être source d’un stress qui finit par coûter cher à l’entreprise.

Par des exemples concrets, nous allons montrer combien ergonomie des interfaces et stress sont intimement liés, et comment l’approche ergonomique peut résoudre sinon améliorer cette cohabitation homme-machine.

Ces interfaces utilisateur qui nous stressent

Pour de nombreux professionnels, l’ordinateur est devenu l’outil principal de travail. Une étude du Chief Marketing Officer Council a notamment montré que dans l’année écoulée, 64% des utilisateurs américains ont subi une période de stress à cause de leur ordinateur.

Les raisons sont multiples (ex : pannes, ralentissements et virus, problèmes de connexion, perte de données) mais toutes conduisent au même constat : une perte de temps, de calme et d’efficacité. Si ces problèmes techniques ne relèvent pas directement de l’ergonomie a priori, une interface mal conçue peut créer ou accroitre la frustration voire l’anxiété. Les résultats de l’étude étonnent également par le même sentiment d’appréhension à l’égard de l’informatique que ce soit pour les utilisateurs peu aguerris ou pour les plus chevronnés.

Les messages d’erreur

Erreur lors de l’installation du logiciel de Content Management SiteFinity

Qu’un programme se bloque ou qu’un processus inattendu survienne, un message nous alerte – dans le meilleur des cas, sur la nature de la situation. Au-delà des fautes d’orthographe ou du vocabulaire expert, les informations censées éclairer l’utilisateur ne permettent pas toujours de le guider dans ces choix. Pire encore, certaines boites de dialogue (exemple ci-contre) se contentent de proclamer une suite de chiffres et d’instruction, sans proposer d’alternative ou de résolution du problème.

Les messages d’information

Installation d’un add-on (Subclipse) sur Adobe FlexBuilder (1 : Traduction en fin de post)

De la clarté des messages et de leur formulation dépend la qualité de l’expérience utilisateur. La formulation du message ci-contre, ainsi que les trois choix proposés auront pour effet de décontenancer l’utilisateur, voire de générer un affolement si celui-ci est peu familier avec l’informatique. Dans ce cas précis, l’utilisateur ne devrait pas avoir à faire ce type de choix. Le logiciel devrait simplement lui demander s’il veut redémarrer son poste maintenant, ou plus tard. En somme, il est préférable de proposer des messages avec une syntaxe simple et un vocabulaire adapté à l’utilisateur.

Les menus de configuration

Menu « Options » de IsoBuster, logiciel de sauvegarde et récupération de données

Même peu familier avec l’informatique, tout utilisateur a un jour besoin de faire appel aux menus de configuration d’un logiciel. Ce sont parfois des menus très complexes, qui noient l’utilisateur dans une trop grande masse d’informations. Dans l’exemple ci-dessus, deux problèmes se posent :

• un menu à onglets avec trois niveaux hiérarchiques rend la présentation illisible ;
• les titres des onglets ne sont pas clairs, obligeant l’utilisateur à cliquer sur chacun d’eux afin de trouver la fonction recherchée.

Si les quelques exemples ci-dessus sont extrêmes, ils sont pourtant symptomatiques du stress qui peut être généré par une interface mal conçue. Quelles solutions ergonomiques mettre en avant pour ne pas tomber dans ce type de piège ?

Lutter contre le stress informatique par l’ergonomie

Bien qu’il ne soit pas uniquement dû à la mauvaise conception des systèmes d’information, le stress informatique a des conséquences lourdes pour l’entreprise.

Pour l’INRS (Institut National de Recherche et de Sécurité), le coût du stress d’origine professionnelle est estimé à environ 20 milliards d’euros par an au niveau européen (l’INRS part du postulat qu’au moins 10 % des coûts des problèmes de santé au travail ont un rapport avec le stress). Si ce chiffre est difficilement vérifiable, il demeure évident que le stress au travail a un impact direct sur la productivité de l’entreprise. Pour la part de ce stress qui est liée à l’utilisation de l’informatique, une approche ergonomique permet de résoudre certains problèmes. Dans certains domaines d’activité comme le commerce ou la distribution, on peut penser que le ROI (Retour Sur Investissement) de l’ergonomie apportera son lot de bénéfices : la prise en compte des besoins des clients, une qualité de service adaptée, etc.

Quelques conseils afin de prévenir ou de guérir des situations de stress liées à l’informatique :

Définir les besoins : l’enquête utilisateur

Trop d’entreprises ont tendance à lancer le développement d’un logiciel (ou autre système d’information) avant d’avoir posé au préalable les questions relatives aux usages :

• Par quels profils d’utilisateurs et dans quelles conditions l’outil sera-t-il utilisé ?
• Quelles sont les fonctions principales et secondaires nécessaires et attendues par les utilisateurs finaux ? (et quels usages ne seront pas remplis par l’outil ?)

Ces questions qui peuvent paraitre évidentes sont pourtant souvent sous-estimées ou traitées a posteriori. De fait, elles vont ressurgir lorsque les incohérences en termes d’ergonomie et d’utilisabilité seront avérées. En voici un exemple :

A partir de 2008, les tribunaux français ont amorcé une transition vers un nouvel outil informatique : « Cassiopée ». Dès les premiers déploiements, les fonctionnaires de Justice ont pointé du doigt les nombreux défauts de conception du logiciel (cf. lettre de la CFDT au Ministère de la Justice). Un bon nombre de procédures légales et de règles de gestion métier n’avaient pas été prises en compte et les risques d’erreur potentiellement nombreux. Cette mauvaise conception a généré des situations de blocage – et une grève à Bordeaux, qui auraient pu être évitées par la conduite en amont d’une enquête utilisateur.

L’enquête utilisateur de même que les questions des usages sont à la base de la Conception Centrée Utilisateur, démarche qui prédomine aujourd’hui dans la conception ergonomique et le design d’interface.

Optimiser l’ergonomie par un audit et/ou un test utilisateurs

Dans le cas de Cassiopée comme dans beaucoup d’autres, l’aspect ergonomique a semble-t-il été sous-estimé. Toutefois, il n’est jamais trop tard pour bien faire.

Ce type de situation peut être résolu par deux actions complémentaires. D’une part, l’audit ergonomique afin d’identifier et de catégoriser les problèmes d’utilisabilité et les points d’améliorations critiques ; d’autre part, le test utilisateurs, qui permet de confronter la conception de l’interface avec les besoins et usages réels des utilisateurs finaux.

Ne pas négliger la formation

L’ergonomie est cruciale dans la capacité d’un salarié à appréhender son outil, mais elle n’est pas suffisante. Si certains férus d’informatique n’auront aucun mal à s’approprier l’outil, d’autres (souvent la majorité) auront besoin d’une formation. Or, les progrès en informatique ont été fulgurants ces dernières années, mais les formations n’ont pas suivi.

La formation des salariés est un véritable travail : un mail ne suffit pas à expliquer le fonctionnement d’un outil ! Des séminaires, présentations, et ateliers pédagogiques sont donc nécessaires.

Dans le processus de formation, l’implication des salariés est également importante. Ce sont eux qui sont confrontés aux difficultés d’utilisation d’un logiciel, et donc aux situations de stress. Par exemple, un wiki d’entreprise a toute sa place dans ce cadre, afin de laisser certains salariés participer – avec leurs mots et leur expérience terrain – à la rédaction du document.

Dans la vie du couple utilisateur-informatique, un aspect central se dégage à l’issue de ces quelques recommandations que nous proposons : il est nécessaire de replacer l’utilisateur au centre de la conception et de l’amélioration de son outil de travail. C’est le rôle de l’approche ergonomique, c’est ce qui permet d’éviter au salarié certains situations de stress, et à l’entreprise de gagner en productivité.

Traduction 1 : « Il est recommandé de redémarrer le workbench pour que les changements prennent effet, mais il est possible d’appliquer les changements à la configuration actuelle sans redémarrer. Voulez-vous redémarrer maintenant ? : Oui – Non – Appliquer les changements »

Les outils de maquettage et de prototypage font souvent la part belle au monde PC. Ils permettent de définir l’agencement de l’information et des fonctionnalités d’une interface, en faisant vivre dynamiquement l’interface avant son développement effectif. Après Justinmind et surtout Omnigraffle « l’historique », Axure rejoint à son tour le monde de la pomme.
Outre que la même licence est utilisable sur les versions PC et Mac, quelques nouveautés en matière d’ergonomie font leur apparition avec de réels bénéfices pour l’expérience utilisateur des concepteurs.

Étape cruciale dans la définition d’une interface web ou logiciel, le maquettage (en savoir plus) permet de visualiser le rendu de l’application et de valider rapidement les enchaînements d’écrans avant de démarrer le développement.

Le portage pour Mac d’Axure, l’un des logiciels les plus populaires dans le domaine de la conception d’interface centrée utilisateur, arrive avec de sérieuses améliorations.

Parmi les nouveautés :

Les barres d’outils ont été repensées (par rapport à leur version PC) afin de se fondre dans l’esprit des interfaces classiques sur Macos X.

L’ensemble des icônes profite d’un relookage assez agréable. Elles sont pour la plupart un peu plus explicite que dans la version PC et surtout un peu plus grande, ce qui n’est pas négligeable pour les mieux les reconnaitre et les choisir au clic.

Les palettes d’outils d’annotation, d’édition de comportement (case editor) et de formatage ont été fusionnées avec 3 onglets pour passer de l’une à l’autre. Ce principe n’est pas négligeable puisqu’il permet de voir l’intégralité des propriétés de chaque palette d’outils (i.e. dans la version pc, ces 3 palettes sont superposées sur la hauteur de l’écran, obligeant soit à naviguer dedans avec une barre de défilement, soit à les rendre détachées du bord de l’écran).

L‘éditeur de script (Case editor) ou de comportement profite de la navigation par colonne inspirée du Finder (l’explorateur de fichier sur Mac), ce qui permet de voir et configurer les comportements par une seule fenêtre. L’ordonnancement des comportements est modifiable par drag and drop. Là encore, l’amélioration de l’interface n’est pas anodine puisque la version PC utilise une nouvelle fenêtre pop-up à chaque étape de configuration d’un comportement (parfois jusqu’à 4-5 successives). Dans cette version, toutes les étapes sont dans une même fenêtre.

Pour conclure, ce portage pour Mac d’Axure semble contenir un précieux petit lot de nouveautés. Ces améliorations ergonomiques satisferont sans aucun doute les concepteurs d’interface afin que leurs maquettes et prototypes gagnent eux-mêmes en utilisabilité. Un petit hic s’il en est un, cette version ne propose pas l’export au format chm (html compilé dans un seul fichier), format natif sur Windows uniquement.

Pour en savoir plus, je vous rappelle notre article sur les outils de maquettage : Outils de prototypage d’interface

Dans une première partie, nous avons traité des éléments nécessaires à la démarche d’appel aux dons en ligne (visibilité du bouton de don, clarté des objectifs de la collecte, de l’utilisation du don…). Pour approfondir le sujet, nous allons aborder les éléments « opérationnels » c’est-à-dire la collecte à proprement parler

Le don en ligne est une action provoquée par une émotion. Or, pour qu’elle se transforme en don celle-ci doit être accompagnée afin d’éviter qu’elle ne s’effrite et que le donateur abandonne. Il convient donc de limiter aux maximums les freins aux travers d’interfaces simples, sécurisantes et informatives.

Impliquez le donateur ..

Par son action, le donateur devient acteur de la cause, mais également acteur de l’association à qui il a fait ce don. Il importe alors non seulement de l’informer de la portée de son action, mais également de l’impliquer dans l’activité de l’association.

… dans l’utilisation qui sera faite du don…

L’un des moyens les plus simples est de montrer ce qu’il reste à donner pour réaliser une action (construire un orphelinat, ou autres projets …) et de pérenniser des actions .
C’est la manière qu’a choisi la fondation Wikipédia pour montrer aux internautes l’avancée de la collecte de dons, permettant au site de continuer d’exister. Il s’agit concrètement d’une jauge permettant de visualiser tout de suite : le besoin, les moyens nécessaires et le reste à combler. Positionnée à proximité du texte présentant le projet, cette jauge poussera à l’action.

Jauge des dons sur Wikipédia

Cette technique est aussi un bon moyen pour développer le bouche à oreille autour d’une cause. Un donateur pourra évoquer le fait qu’il manque telle somme d’argent et ainsi inciter un ami à faire un don.

…et dans le processus de collecte…

Une autre technique est de proposer au donateur d’être un acteur clé de la collecte de don. L’idée n’est pas seulement originale, elle est bien pensée :  plutôt que de donner de l’argent, vous donnez de votre personne en collectant ! Groupe SOS propose par exemple de devenir « collecteur » au profit d’une cause ou d’un événement de votre choix. Un espace de collecte est mis à disposition et c’est vous qui en faite la promotion. Bien que la réussite de cette collecte dépende de votre implication, votre engagement crée un lien personnel et affectif avec les personnes vers lesquels vous vous tournez.

Devenir un « collecteur » sur le site Acteurs de la Solidarité

Les médias sociaux peuvent aussi être très utiles. Facebook propose notamment une rubrique « Causes » où l’internaute peut mettre en exergue les causes qu’il défend et les partager avec ses amis voire même de recruter d’autres personnes. Comme précédemment, ce qui va donner de la force à la collecte, c’est l’implication personnelle dans un échange entre deux ou plusieurs personnes.

Les « Causes » sur Facebook

… sans le brider dans son don

Rendre le mode de paiement transparent

- le micro don via SMS : il permet de profiter de la simplicité de l’action. C’est le cas par exemple lors d’une campagne exceptionnelle (Haïti) ou récurrente (Sidaction);
– le don par carte : bien évidemment – mais ça n’est pas toujours le cas, il convient d’être compatible avec tout type de carte, que ce soit American Express, Visa , Mastercard , etc. . pour éviter qu’un porteur de carte ne puisse faire son don;
– le don via Paypal : même si cette plateforme n’est pas utilisée par tout le monde, Paypal profite d’une grande notoriété autant auprès des acheteurs et vendeurs d’Ebay, mais également du grand public soucieux de la sécurité des paiement. Plutôt facile d’utilisation, vous n’avez pas besoin de sortir votre carte de crédit.

Éviter les montants trop élevés

Des paliers de paiement trop élevés empêcheront de dons de faible montant.  En effet,  beaucoup de sites proposent un don minimum de 30 €, une somme souvent trop importante pour un don impulsif. A l’inverse, 10 € semble un seuil psychologique bien plus acceptable. Le principe de micro-dons a  par exemple permis de collecter des sommes très importantes lors de la campagne de Barack Obama pour les présidentielles américaines(1).

Rien n’empêche toutefois de proposer des dons préétablis car ils permettent de guider les personnes ne sachant pas vraiment ce qu’elles doivent donner,  ou ceux qui n’ont pas de limites en termes de don.
L’exemple d’Action Contre la Faim est particulièrement probant puisqu’il propose tous ces modes de paiement (sauf Paypal).

Page de saisie des dons sur le site d’Action Contre la Faim

…en mettant en avant les déductions d’impôt

Même si  la déduction d’impôt suite à un don ne se pratique pas dans tous les pays, pour le cas français il est primordial de montrer que le coût global d’un don est finalement relativement  faible compte tenu des déductions fiscales. Un  don de 120 € à une association reconnue d’utilité publique ne coûtera au final que 30 €. Il est donc important de mettre ces informations en avant afin de réduire l’empreinte financière d’un don sur son compte bancaire.

Déduction des impôts sur le site de l’AMF (Téléthon)

Rassurez-le par un environnement sécurisé …

Comme il est ici question de paiement et de transmission de données bancaires ; il est nécessaire de tout mettre en œuvre pour que la personne puisse se sentir en sécurité. Cela passe par une interface permettant de voir que l’organisme est affilié à une banque connue, ou encore que le paiement se fait avec un certificat de sécurité valide .
Un certificat de sécurité périmé est presque rédhibitoire puisque les internautes sont devenus méfiants suites aux arnaques par Phishing (2).
Le choix d’un organisme tiers dans la méthode de collecte doit être dicté par la notoriété et la fiabilité de celui-ci.

Le formulaire de saisie des données personnelles devra aussi faciliter la saisie. L’utilisation des tabulations pour passer d’un champ à un autre est important. Il doit respecter l’ordre logique de la saisie, ne pas passer de l’adresse au pays puis revenir au code postal. Il convient de « typer » les champs de saisie (un champ de code postal ne devra permettre la saisie que de 5 chiffres par exemple). De même, en cas d’erreur de saisie, il est important de mettre en exergue par une couleur vive les erreurs. Pour éviter un « épuisement » de l’internaute en cas d’erreurs successives, il est aussi important de garder les données que la personne a saisie (sauf les coordonnées bancaires) pour éviter à celle-ci de ressaisir tous les champs à chaque fois.
Si le processus de saisie des données se déroulent en plusieurs étapes, il est important de mentionner l’étape en cours pour montrer à l’internaute à quel stade il se trouve.

Pour conclure, il n’existe pas réellement de schéma type pour la collecte de don en ligne, les problématiques et les publics visés étant différents.
Reste qu’une réflexion en terme d’ergonomie et d’utilisabilité permet de se poser les bonnes questions et de lever ainsi les nombreux freins entourant la collecte.
En mettant à disposition des interfaces faciles d’accès, utiles en termes d’informations et sécurisantes pour l’internaute, les ONG pourront accentuer la transformation de cette fameuse « émotion » en don.

Sources :

1- What Non-Profits Can Learn from the Obama Fundraising Campaign.
2- Définition du Phishing sur Wikipédia

De nouvelles sources

Designing Social Interfaces Patterns Wiki

Une belle librairie de patterns toujours bien documentée. Les auteurs s’appuient sur leur expérience chez Yahoo! et leur ouvrage sur les pratiques de la conception d’interfaces sociaux.

Blink Design Library

Un blog qui a l’œil sur les usages abusifs de certains patterns. Les mauvaises pratiques sont illustrées et évaluées de manière pertinente.

Pattern Tap

Une galerie très riche d’exemples de mise en forme et agencement pour de nombreux patterns. Plutôt orientée design, la galerie a plus vocation à proposer des exemples que des recommandations d’usage.

Elements of Design
Une autre grosse galerie d’exemples pour de nombreux patterns. La densité de copies d’écran est impressionnante et plutôt diversifiée, bien que des recommandations soient un réel manque pour éviter les mauvaises pratiques de certains exemples.

Bien que les dons en ligne ne représentent encore qu’une part minime du total des dons collectés par les ONG, ce moyen présente l’avantage d’être plus économique que les autres formes de collecte. La collecte de dons sur internet est donc de plus en plus utilisée par les ONG pour accroître leurs ressources financières.

Dans cet article, nous abordons la place du bouton de don et sa visibilité, la communication sur les objectifs de la collecte ainsi que de la manière de les présenter. En somme, comment faciliter la transformation du visiteur curieux et exigeant en un donateur confiant.

L’actualité récente nous a montré l’importance de la collecte des dons en ligne au travers du séisme en Haïti. En 2005, avec le Tsunami, les dons en ligne ne représentaient qu’un quart des dons (1), et ceci était déjà exceptionnel puisqu’auparavant ils ne représentaient globalement que 2% en 2008. Lors du séisme en Haïti, les dons en ligne ont littéralement explosé permettant aux ONG de récolter 1 million d’euros par jour (2) , et surtout trois fois plus de dons en ligne que de chèques. Cette méthode présente l’avantage d’être plus économique que les autres formes de collecte et par ailleurs, les dons moyens réalisés sont plus importants : 10% supérieurs en moyenne.

Reste que, contrairement à l’acte d’achat sur internet, le don est le plus souvent dicté par l’émotion, lié à la vision d’une tragédie à la télévision, ou encore dans les journaux. L’objectif pour ces ONG est donc de transformer cette émotion en un acte de don.

Afin de faciliter cette transformation, il est nécessaire de se poser quelques questions d’ergonomie pour bien communiquer et encourager les visiteurs au don.

Votre bouton de don est-il bien visible ?

Pour une ONG, un site web est une vitrine sur ses actions, mais également un outil de collecte de dons à moindre coûts. Ainsi, le bouton de don joue-t-il un rôle primordial dans la capacité d’une organisation à récolter des fonds en ligne. C’est en quelque sorte le point d’accroche qui déclenchera, ou non, le don du visiteur. Pour cela, une pratique intéressante consiste à utiliser une couleur qui contraste avec le reste de l’identité du site. C’est le cas de la Fondation Abbé Pierre, ou des Enfants de Don Quichotte, avec l’utilisation d’une couleur rouge qui attire immédiatement l’attention.

Fondation Abbé Pierre – Exemple de don en ligne

Un grand bouton est-il plus efficace ? Pas systématiquement : sur le site de la Fondation Abbé Pierre, la couleur suffit à mettre en valeur la fonctionnalité. En revanche, lors d’appels aux dons plus temporaires, comme le séisme en Haïti, la taille du bouton permet de témoigner de l’urgence de la situation (Partners in Health ci-dessous). Ainsi, certains sites mettent l’accent sur le rôle informatif, là où d’autres l’utilisent prioritairement comme plateforme de don.

Dons en ligne – Partners in Health

Qu’en est-il de la place de ce bouton ? (dans le header, dans les menus de navigation…) En réalité, le menu de navigation peut être une place de choix. Ainsi, le bouton d’Oxfam America par exemple est totalement intégré à la navigation, mais fort bien distingué par sa couleur. A l’inverse, vous aurez bien des difficultés à situer celui du Secours Catholique… Reste que l’une des principales recommandations que nous pourrions faire est que ce bouton puisse être visible dès la page d’accueil sans avoir à naviguer verticalement pour le voir.

Page d’accueil du Secours Catholique

Soyez clairs sur les objectifs de votre collecte

Trop souvent, les sites d’associations pèchent par manque d’information au sujet des objectifs et prérogatives de l’organisme. Or, un donateur doit impérativement avoir le sentiment de connaître vos missions avant de donner. Votre crédibilité dépendra donc de votre capacité à convaincre que vos missions sont nécessaires. Le site britannique de WWF est à ce titre un exemple de clarté.

Page d’accueil du WWF UK

Avec ce menu simplement organisé en : « Ce que nous faisons » et « comment aider ? », l’attention du visiteur n’est pas détournée, mais immédiatement attirée par les deux fonctions principales du site. Un autre écueil à éviter consiste à vouloir décrire de façon exhaustive l’ensemble de vos missions. Or, l’internaute est réfractaire à lire des textes trop longs ; préférez donc de petits paragraphes, illustrés par des images qui facilitent la lecture.

Page d’accueil de Charity Water

La page de présentation de Charity Water est également un exemple de clarté, présentant une quantité limitée de texte, illustrée par une vidéo, des photos ainsi que des graphiques. A l’inverse, le site du Secours Catholique ne parvient pas à synthétiser son message et oblige donc l’utilisateur à naviguer dans les menus pour avoir une vision d’ensemble des missions de l’association.

…mais aussi sur l’utilisation qui sera faite des dons !

Expliciter vos missions n’est pas suffisant, le donateur a besoin d’être rassuré sur l’utilisation qui sera faite de son don. Si les réductions d’impôt sont souvent mises en avant (plus de détails dans un prochain post), d’autres informations (la répartition concrète des dons, la part des frais de fonctionnement, les autres postes de dépenses…) sont très rarement présentés de façon claire. Sur la page de dons, un simple graphique et quelques lignes explicatives permettraient de rassurer le donateur et d’apporter du crédit à la collecte.

Il y a en revanche de bonnes idées chez certaines associations comme le GROUPE SOS (groupement d’associations) qui propose au donateur de choisir à quelle cause son don sera attribué, ou encore à quelle association, ou bien de laisser le groupe choisir d’affecter lui-même ce don.

Interface de dons en ligne du Groupe SOS

Dans ce même ordre d’idée, certaines associations donnent des exemples d’actions concrètes qui seront mises en place grâce au don. Ainsi, les Restos du Cœur présentent une équivalence en nombre de repas pour chaque don. Ce type de démarche, qui peut apparaître comme une base d’informations minimales lors d’un appel aux dons, est pourtant très souvent oubliée ou sous-estimée par les associations.

Pour conclure, il n’existe pas une seule bonne façon d’organiser son appel aux dons. Le bouton d’appel de la fonction, par exemple, dépendra du contexte (besoins ponctuels ou réguliers) et des différentes manières d’impliquer le public (dons, bénévolat, réseaux sociaux, etc.). En revanche, un certain nombre d’informations nécessaires (les actions de l’association, l’utilisation qui sera faite des dons, la fiabilité de l’association) sont trop souvent présentées de façon peu avenante ou sont même totalement absentes du site.

Pour valider les choix de conception d’interface, l’audit ergonomique est une solution simple qui permettra d’évaluer l’efficacité du processus de don.

Dans un prochain article, nous approfondirons le sujet en présentant un ensemble de fonctionnalités incitant au don sur internet, ainsi que des conseils pour l’étape cruciale du paiement.

Sources :

1- Article d’e-marketing.fr (01/04/2005): Don en ligne : Internet ne sera-t-il qu’un média d’urgence ?
2- Article des Echos.fr (27/01/2010) : Haïti : comment les ONG gèrent l’afflux de dons

Pour élaborer rapidement et concrètement l’agencement de l’information (et le zoning) et des fonctionnalités d’une future interface, le maquettage en fil de fer (wireframe) est souvent un passage obligé de l’approche ergonomique. Comme le dit Jean-François Nogier dans son ouvrage : « Le prototypage est la clé de voûte du développement itératif« .

Que l’on soit à l’aise ou non avec un crayon à papier, quand un client veut pouvoir se représenter concrètement sa future interface, l’esthétique du wireframe a tout de même son importance. De nombreux outils sont à portée de souris et tout dépend de ce que l’on veut en faire. Je vous en propose donc quelques uns, du plus basique au plus étoffé, du plus statique au plus fonctionnel (n’hésitez pas à nous en suggérer d’autres!).

Les plus populaires

Omnigraffle, une application mac très populaire, orientée plutôt à l’origine pour concevoir de jolis diagrammes et des graphismes vectoriels. Elle tire son épingle du jeu par la possibilité d’échanges avec Visio certes uniquement sur PC, mais également par une très riche bibliothèque d’icônes et de patterns sur Graffletopia.
Superfiction le vend très bien sur ce post!

Balsamiq Mockup, utilisable facilement en ligne (Flex) ou en logiciel, le rendu ressemble à du dessin bien qu’il reste très efficace (exportable au format png (et xml avec le logiciel)), question de goût.

Les valeurs montantes

Justinmind, un autre très bon compromis en termes de possibilités de prototypage statique ou fonctionnel sans connaissance de la programmation,… comme son grand frère Axure ! il a par contre quelques fonctionnalités supplémentaires tels que l’aide au positionnement des objets ou la possibilité de collaboration avec les clients (serveur dédié et ajout de commentaires en ligne).Un point fort qui le démarque également est l’interactivité avec des données sous forme de tableaux par exemple (ex: ajout, modification, suppression).

WireframeSketcher, un plugin de l’environnement Eclipse (environnement de développement multilangage et libre), dédié à la
création de prototypes. Malgré une liste de patterns assez basiques, il offre un gain de temps sans conteste pour l’intégration et le développement d’application.

Encore quelques autres

MockupScreens, un logiciel de wireframe plutôt basique et facile d’utilisation, générant une maquette fonctionnelle (rendu au format html).

Oversite, un logiciel de wireframe assez basique, permettant en particulier de définir l’architecture d’un site web et les liens entre pages, et donc une maquette fonctionnelle (rendu exportable au format html).

Gliffy, plutôt généraliste dans la manipulation d’objets, il permet néanmoins un maquettage efficace bien que basique (rendu au format html).

Protoshare, uniquement en ligne, ce logiciel permet de créer des maquettes très riches dans un espace collaboratif où les différents intervenants pourront apporter leurs contributions au projet.

Prototype Composer de Serena, un logiciel complet de la définition de l’architecture de l’information à l’interface finale (rendu exportable simplement au format Visio). Toutefois, la richesse des fonctionnalités ne fait pas forcément l’efficacité des maquettes.

Touche d’humour:

Si vous avez la possibilité d’amener votre porte de frigo en réunion, je vous conseille également guimagnets… une autre manière de faire du maquettage un jeu?!

1ère publication (3/12/2008)
1 – Mise à jour suite au commentaire de Eric-superfiction: Ajout de Gliffy et Protoshare, et ajout de notations détaillées (3/6/2009)
2 – Mise à jour suite aux commentaires de Régis sur de nouvelles fonctionnalités d’Axure et l’arrivée à maturité de Justinmind (8/9/2009)
3 – Mise à jour face à la percée de FlairBuilder et WireframeSketcher, et l’omission volontaire mais temporaire d’Omnigraffle, ainsi que quelques petits ajustements de détails (24/02/2010)

En conception d’interface, le choix des couleurs n’est pas toujours chose facile car chacun peut avoir son avis : Le client a ses préférences, l’ergonome a ses recommandations, le graphiste a son style, le marketing ses souhaits, la communication sa charte, le commercial…

Pour prévenir tout conflit et parce qu’Usaddict est pour la paix des équipes de conception, voici quelques outils bien utiles pour guider les choix de couleurs ergonomiques. Car ce qui compte finalement, c’est que l’utilisabilité et le confort de l’utilisateur orientent les recommandations ergonomiques et bien sûr que le client soit pleinement satisfait.

Les couleurs d’une interface participent aux sentiments de confort et d’adhésion de l’utilisateur. Elles vont valoriser l’identité visuelle du « produit » en créant un univers dans lequel l’utilisateur va évoluer. Ce travail de recherche graphique s’appuie idéalement sur une collaboration étroite entre l’ergonome et le designer pour au moins deux raisons :
– le choix des couleurs sera vraiment guidé par les attentes des utilisateurs et les valeurs du produit final;
– la palette de couleurs sera autant à visée esthétique que fonctionnelle …et Canapé rouge ne tapera plus sur son graphiste !

Voici donc quelques outils et un peu de très bonne lecture avec Smashing Magazine et Usabilis.

Des outils indispensables :

Adobe Kuler

Un superbe outil interactif d’Adobe (en flex forcément) pour définir un ton, une ambiance, ou même un esprit, grâce à un large choix de palette à partir de mots clés

Pour aller plus loin :

Smashing Magazine nous offre de formidables articles de fond abordant :
– La signification des couleurs :
Color Theory for Designers, Part 1: The Meaning of Color
– La terminologie associée aux couleurs :
Color Theory For Designers, Part 2: Understanding Concepts And Terminology
– La création de palettes de couleurs :
Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Consulter la présentation de la charte graphique par Usabilis, un document de spécifications d’interface par excellence : La charte graphique

Bonnes inspirations!

Pour commencer 2010 sous le signe de l’ergonomie, Usabilis a conçu sa carte de vœux sur la thématique du maquettage papier. Un clin d’œil, mais pas seulement…

Nous recommandons cette pratique de conception. Dans la phase de construction des écrans, elle a pour avantage de lever la barrière de l’outil informatique et de faire participer le client et même l’utilisateur final.  C’est convivial, souple et efficace.

Bonne année à tous !

Cliquez ici pour obtenir au Kit de Maquettage d’interface

Pour fermer cette fenêtre, l’internaute clique naturellement sur le bouton rouge en haut à droite de la fenêtre. Or, ce bouton l’envoie vers le site de l’annonceur ! Le détournement de la fonction attendue est original et surtout rusé.

Weborama a joué sur la ressemblance des traits utilisés pour ce bouton : un W blanc pas si loin d’un X, et la couleur rouge en fond ! (cf. Théorie d’Integration des traits). Les patterns évoluent mais restent des références en termes de confort et d’efficacité de navigation tant qu’ils sont bien employés (cf. bonnes pratiques des design patterns).

N’est-ce point une vilaine pratique ? Avez-vous rencontré d’autres détournements de ce genre ?

Le Petit dictionnaire du design numérique 2009 est arrivé ! Notre designer préféré (Jules Leclerc) y a contribué !

Pour tout savoir sur le design numérique ou parfaire votre vocabulaire en la matière, n’hésitez pas à vous procurer un exemplaire. Il contient 100 définitions des notions clés du design numérique, et est disponible via le lien suivant : www.designersinteractifs.org/dictionnaire/

Les design patterns sont des schémas de conception, c’est-à-dire des modèles de composants fonctionnels d’une interface répondant à des cas typiques d’interaction. Par exemple, comment présenter un calendrier ou un processus par étapes. Les designs patterns sont un excellent point de départ à un travail de conception.

Nous avions recensés plusieurs sites consacrés aux design patterns et une petite mise à jour s’imposait.

Yahoo! Design Pattern Library - developer.yahoo.com/ypatterns

LE catalogue de Yahoo! et ses design patterns, de quoi justifier leurs bonnes pratiques. Une petite mine d’or!

We are colorblind – wearecolorblind.com

Un génial catalogue de patterns détaillés et surtout compatibles (a priori) avec le daltonisme

Quince Infragistics -quince.infragistics.com

Un très riche et pratique catalogue en Silverlight, à découvrir très vite ! Doté d’une recherche par tags et de nombreux exemples, le dynamisme de l’interface est une expérience en elle-même.

Welie – welie.com/patterns

Une bibliothèque détaillée et riche de design patterns. Des recommandations accompagnent chaque modèle ainsi que des exemples d’interfaces (malheureusement inactif depuis 2008).

Designing Interfaces – designinginterfaces.com
Le site est très riche. Il traite à la fois des sites web et des interfaces logicielles. Il reprend en partie l’ouvrage de Jenifer Tidwell (Designing interfaces, une sacrée référence en la matière).

UI Pattern - ui-patterns.com/patterns

Un catalogue de design patterns avec de nombreux exemples variés issus du web.  Il s’enrichit en continu par la contribution de tout un chacun!

UI Pattern Factory - uipatternfactory.com

Une initiative finlandaise d’échange de patterns utilisant carrément Flickr. Les fiches sont complètes et riches.

Pattern Browser – patternbrowser.org

Un bon gros catalogue de patterns offert par l’Université de Postdam dans la suite de son prédécesseur ci-après.

Info Design Patterns – interface.fh-potsdam.de/infodesignpatterns/patterns.php

Un catalogue à la navigation originale et dynamiques, avec un contenu concis et des démonstrations interactives.

Open Design Patterns – patterns.holehan.org

Un petit catalogue orienté logiciel, basé sur une initiative d’échanges (malheureusement inactif depuis 2008).