048 - Les barres d’outils
(1/2)
Plus une fonctionnalité qu’un modèle de navigation. Ces outils qui font agir.
Une barre d’outil standard !
Une barre d’outils rassemble dans une page de détails un ensemble de fonctionnalités pratiques. Elle imite les barres d’outils des logiciels communément utilisés. Chaque fonctionnalité est accessible via un minuscule pictogramme.
La plus petite possible, elle est toujours placée au même endroit dans la page. Affichez légende et pictogramme dans la page. Ce n’est pas possible ? Faîtes apparaître la légende au moins au survol du picto. Associer image et mots-clé permet de faire fonctionner simultanément cerveau droit et cerveau gauche, ce qui facilite la compréhension.Il n’existe pas de standard pour les pictogrammes. Ils se dessinent au fur et à mesure.
Les internautes réapprennent à chaque site ce que les icônes signifient.
Exemple de pictogrammes sur www.lefigaro.fr.
Exemple de pictogrammes sur www.nexint.fr, www.lemonde.fr, www.wired.com .
Les fonctionnalités les plus implémentées des barres d’outils sont :
vers la page. Cliquer sur le bouton ouvre un formulaire demandant à l’internaute son email, l’email du ou des destinataires, éventuellement les noms et des champs permettant d’écrire un sujet et un message. Si votre contenu s’y prête, comme pour les biens immobiliers, le système renseigne automatiquement le contenu du
formulaire déjà renseigné une fois grâce à un cookie. Ceci fera gagner du temps à l’internaute.De manière générale, renseignez automatiquement le plus de champs possible.Si vos produits s’y prêtent, location de grandes maisons de vacances, voyages à plus de 2, donnez la possibilité de renseigner plusieurs destinataires. Votre site utilise des cookies ? Assurez-vous que le site fonctionne si l’internaute les refuse. Insérez dans votre page d’Aide ce qu’il gagne à accepter les cookies ainsi que leur durée de validité. Rassurez l’internaute : insérez dans votre formulaire un lien vers votre politique de confidentialité ou un message stipulant que vous ne réutiliserez jamais ses emails pour faire de la promotion, ni les revendrez à une société tierce.
Combien coûte un picto ?
Tout designer n’est pas « pictoman ». Vous trouverez des planches de pictos (en anglais Stock Icons) entre 50 et 500 US $. Faire faire un picto pour un besoin spécifique peut coûter le même prix.
Où placer la barre d’outils ?
À la verticale ou à l’horizontale, une barre d’outils doit être placée au plus près du contenu principal de la page. Elle doit être affichée en haut de page. Elle peut être répétée en pied du contenu.
- imprimer la page. Cliquer sur le lien ouvre le contenu dans un gabarit adapté à l’impression et tente de lancer une impression.
Avec les feuilles de styles, vous pouvez associer à votre page une feuille de style adaptée à l’impression (media : print).
Par exemple : les éléments de navigation sont cachés. Le lancement de l’impression automatique ne fonctionne pas avec toutes les configurations utilisateurs (sans javascript) et certains scripts sur Mac. Mon conseil est donc de laisser l’internaute utiliser le bouton de son navigateur. Attention à ce que vos gabarits d’impression contiennent votre logo, l’adresse de la page et la date de publication du contenu.
- augmenter/diminuer la taille du texte. Augmente la taille du texte de la page si le site est intégré avec des tailles de polices proportionnelles de type pixel, em ou pourcentage. L’utilisateur peut grâce au menu « affichage >Taille du texte >Plus grande » augmenter pour tous les sites qui le supportent la taille du texte.Si la taille de police est en pixels, sur Internet Explorer 6 le texte n’augmentera pas car Microsoft n’a pas interprété la notion de pixel de la même manière. Préférez des em pour définir la taille des textes de votre site. Assurez-vous qu’une fois paramétrée l’internaute garde la même taille de police s’il change de page. Ce bouton revient à manipuler la configuration de l’internaute. Ainsi lorsqu’il changera de site, le texte sera aussi modifié.Ce qui risque de le perturber car pour lui la modification ne devait être que dans votre site.
- augmenter / diminuer la taille du site : une variante de l’option ci-dessus permet d’augmenter la taille du texte et la largeur du site. Cette fonctionnalité n’est pas offerte par les navigateurs mais par le système d’exploitation. La résolution de son écran est celle qui lui est confortable. L’intégration html de la page doit être extrêmement soigneuse. Les images sont redimensionnées;elles perdent en qualité à l’agrandissement.
- ajouter cette page à mes favoris : cette option permet aux internautes d’enregistrer le lien vers cette page dans ses signets aussi appelés favoris, en anglais bookmark. Il peut dans son navigateur créer des catégories de contenus. Il semblerait qu’il y ait deux types d’internautes, les bookmarkeurs et les nonbookmarkeurs.
Certaines applications savent utiliser ces informations pour donner à l’internaute des liens similaires à leurs favoris.Voir fiche 054 navigation sociale.
- mettre en page d’accueil : permet à l’internaute d’afficher votre site par défaut à chaque fois qu’il ouvre son navigateur.Plus vos profils utilisateurs sont experts dans l’utilisation du web moins cette fonctionnalité est importante. Ils sauront changer leur page de démarrage. Les fournisseurs d’accès internet arrivent dans la plupart des cas à afficher leur portail d’information en page d’accueil de leurs abonnés. Un utilisateur qui vient d’installer Firefox sur Mac ou PC aura le moteur de recherche Google en page d’accueil habillé aux couleurs de Firefox. Un utilisateur Mac a par défaut sur le navigateur Safari Apple.com. Le script qui permet d’ajouter un site en page d’accueil fonctionne sur Internet Explorer. Sur Firefox et Safari le système l’ informe sur ce comment changer sa page de démarrage. Si l’internaute ne suit pas les indications, la page de démarrage ne change pas.Un utilisateur sans javascript ne profite pas de la fonctionnalité.
Certains sites ajoutent des fonctionnalités qui leur sont spécifiques de type :
- Archiver, ajouter à mes dossiers,
- Afficher dans un gabarit différent.
(2/2) Web 2.0
Ces outils qui nous font réagir et surtout agir socialement.
Une barre d’outil très… web 2.0 !
Enrichissez vos barres d’outils de fonctionnalités orientées Web 2.0 :
l’agrégation de contenus. Voir navigation 058, la non navigation. Une confusion
apparaît souvent avec les icônes de flux RSS. L’internaute ne sait pas à quoi il s’inscrit :
- le flux RSS du site entier ? Toute nouvelle actualité est visible dans le flux.
- à celui de la rubrique uniquement ?
- ou au flux RSS des commentaires de ce contenu en particulier ?
Dans une barre d’outils contextuelle, ce dernier est approprié. Un utilisateur qui laisse
un commentaire sur un billet peut alors suivre le fil de la discussion.
Exemples de quelques boutons de bookmark social
Exemple de barre d’outils sur www.answers.com.
l’avis des internautes sur un contenu. Demandez par exemple aux internautes de « voter » pour un contenu et, ailleurs dans le site, affichez la liste des contenus recommandés par la communauté des internautes. Il y a actuellement confusion entre favoris et recommander un contenu. Certains éditeurs utilisent l’étoile ou le coeur pour inclure cette fonctionnalité. Ces icônes sont utilisées par d’autres pour illustrer la fonctionnalité
« ajouter aux favoris ». Une alternative intéressante est le pouce en l’air. Certains éditeurs forcent les internautes à avoir un compte et à se connecter pour pouvoir voter, d’autres non. Chez moi 10% des mes internautes sont « actifs », plus le processus est long moins votre communauté sera active. Si votre objectif est d’animer une communauté d’experts, il semble justifié de forcer l’internaute à se connecter au site pour
voter. L’important est d’arriver à faire comprendre à vos utilisateurs en quoi ils sont importants et comment ils peuvent influencer les choses.
Capture d’écran d’un Captcha plutôt très lisible..
Concrètement le captcha anti-spam affiche une image contenant des lettres. Voir exemple. L’utilisateur, pour prouver qu’il n’est pas une machine, doit retaper ce qu’il voit sur l’image. Et oui,les machines sont aveugles du cerveau droit ce qui ne leur permet pas de reconnaître les lettres. Ceci signifie aussi que les personnes déficientes visuelles n’auront pas accès à cette fonctionnalité.
Une alternative auditive ou une question mathématique peut être installée.Si vous proposez des alternatives affichez-les avant le champ de réponse. Les internautes déficients visuels consultent la page de manière linéaire. Les technologies des spammeurs avancent, les captchas deviennent de moins en moins lisibles. Nous n’avons pas la solution parfaite pour le moment, affaire à suivre ! Quoi qu’il en soit gardez bien en tête vos internautes. Chercher à trop vouloir fermer la porte aux machines peut fermer la porte aux internautes.
Capture d’écran de la solutions Additious.com ressemblant un grand nombre de Digg-likes. La solution Addthis.com vous permet d’afficher en popup les options.
La popularité de vos contenus peut aisément venir de blogueurs.Les internautes n’ont plus besoin d’être des techniciens pour publier des billets, des commentaires…On retrouve cette philosophie d’aider les blogueurs sur YouTube.com ou Dailymotion.com qui permettent de mettre en ligne des vidéos et ensuite d’intégrer ces vidéos dans nos pages web en insérant simplement le code html qu’ils nous communiquent. Toutes les barrières techniques s’évaporent ! Plus de problème d’espace disque, de streaming, de format de fichier. Scribd.com permet de mettre en ligne des documents textes. Les documents au format.doc, .pdf, .txt, .ppt, .xls, .ps,.lit peuvent être insérés facilement sur un site.
Prix TTC, 
