Le pied de page st un emplacement de votre site web, c’est le dernier élément visualisé lorsque l’on parcoure la page de haut en bas et c’est aussi le filet de sauvetage pour les utilisateurs perdus qui ne savent plus où cliquer (cf. Soignez vos extrémités  - menu et pied de page et Un plan du site dans votre pied de page).

Bref, le footer est un élément essentiel de la construction de votre site à ne négliger sous aucun prétexte. Je vous propose donc de découvrir deux articles qui en parlent. Tout d’abord 10 Techniques for a Fantastic Footer où l’auteur énumère ses règles de construction pour un pied de page : Inclure un plan du site, un retour en haut de page ainsi que des liens vers les plateformes sociales. De ce point de vue là le site Sushi & Robots est un bel exemple :

Il préconise également de le truffer de liens pour faciliter le rebond sur une page intérieure, comme sur le site RailsTrip (vous noterez au passage l’histogramme du nombre de billets publiés par jour) :

Il est également précisé que l’on peut y mettre du contenu (encore une fois pour les visiteurs perdus qui n’ont pas trouvé ce qu’ils cherchaient en parcourant rapidement la page de haut en bas) comme sur WPBeginner :

Autre article très bine documenté : Informative And Usable Footers In Web Design. Les conseils prodigués y sont à peut près les mêmes, ils citent en prime le très bel exemple d’Apple qui fournit à la fois un fil d’Ariane et un plan du site :

Si vous cherchez d’autres sources d’inspiration, je vous recommanderais également cet article avec des exemples plus “exotiques” : 25 Creative Website Footers. Bon… je sais ce qu’il me reste à faire…

Les fils d’Ariane (“breadcrumbs” en anglais) sont des éléments de navigation permettant aux internautes de se repérer dans l’arborescence d’un site et de remonter facilement d’un ou plusieurs niveaux. Même s’ils ne sont pas toujours bien vus par les internautes lambda, ils ne prennent pas beaucoup de place et sont utiles pour le référencement. Inutile de vous refaire l’article, sinon il y a Breadcrumb Navigation, Breadcrumb Navigation Increasingly Useful et Breadcrumbs In Web Design: Examples And Best Practices.

Donc en théorie c’est une bonne pratique de conception, sauf que dans certains cas, notamment pour les sites avec une arborescence très profonde, les fils d’Ariane ne tiennent pas sur une seule ligne car les intitulés sont trop longs. La seule solution est alors de faire un affreux retour à la ligne. À moins que vous ne puissiez cacher les niveaux intermédiaires et ne les déplier qu’au survol de la souris. C’est ce que propose ce site : CompareNetworks jQuery’d Bread Crumb.

Plusieurs configuration sont possibles en fonction de la place dont vous disposez : tout cacher, ne pas plier le premier et/ou l’avant dernier niveau… Il y a en prime une petite animation au survol de la souris pour déplier le niveau (il faut pour cela utiliser la librairie javascript jQuery, cf. Getting Started with jQuery).

Le résultat est propre, mais terriblement perturbant (surtout avec cette animation). Le mieux serait encore de réduire la taille des intitulés de navigation ou de simplifier l’arborescence (exemple dans les pieds de page du site d’Apple). Sinon il y a toujours la solution par défaut de faire un retour à la ligne…

(via Escargot)

Voilà plus de 10 ans que je conçois des sites web et plus de 10 ans que les formulaires sont une source de discussions sans fin pour savoir comment les optimiser (j’avais même publier un tutoriel en 2004). Alors que je pensais avoir trouvé LE formulaire parfait (j’hésite encore entre Remember The Milk et Ballpark), voici que l’Apple Store nous propose un formulaire d’achat qui risque bien de faire date : The Apple Store’s Checkout Form Redesign.

L’idée de génie est de proposer un formulaire où les intitulés sont directement dans les champs :

Cette solution permet de gagner beaucoup de place et d’afficher toutes les étapes du processus d’achat en une seule page (grâce à un principe d’accordéon). Le principe n’est pas nouveau mais c’est la première fois que je le vois mis en application sur un formulaire entier et sur une boutique en ligne à très forte fréquentation.

Il y a d’autres exemples de ce type de mise en page, notamment chez FoodSpotting :

Une solution particulièrement efficace mais qui n’est pas forcément meilleure que d’afficher les intitulés à gauche (ou au dessus) des champs, comme ici un très bel exemple chez LaunchMind :

Bref, ça m’embête de vous dire ça, mais il n’y a toujours pas de solution “ultime”, tout reste une question de contexte, d’ambiance, de place disponible et d’intégration dans votre charte graphique. Plus d’exemples ici : Interface Design Inspiration | 30 Impressive Ways to Design Sign-Up Page/Form.

Vous connaissiez déjà les champ texte associés à un menu déroulant pour filtrer la recherche comme sur le site du Guardian :

Vous connaissiez déjà les intitulés-filtre de champ texte en forme de menu déroulant comme sur LinkedIn :

Vous connaissiez déjà les filtres de recherche inclus dans le champ texte comme sur Kontain :

Mais connaissiez-vous les champs texte intégrant un filtre déroulant ? Cette interface de recherche est ainsi disponible sur Giraffe Restaurants (une chaine de restos anglais) : Search-dropdown Hybrid Box. Soit vous saisissez directement le nom de votre ville dans le champs :

Soit vous cliquez sur la petite flèche pour faire apparaitre la liste des villes déjà sélectionnée :

Un clic sur le nom d’une ville et les résultats sont affichés :

L’idée est intéressante mais la mise en œuvre est polluée par des traitements graphiques trop lourds. Dommage car cet écran est pourtant entièrement dédié à la recherche. J’ai souvenir d’autres exemples plus sobres… mais impossible de remettre la main dessus. Si votre mémoire est meilleures que la mienne, partagez vos exemples.

Dans son dernier billet, Raphaël de Robiano, consultant en ergonomie, a effectué un test utilisateur sur un site Web. Il soulève un détail intéressant en ce qui concerne les formulaires de recherche. Je cite :

Ce test a été l’occasion d’identifier un problème sur un des formulaires de recherche du site que j’aimerais partager avec vous.

Le champ de recherche était accompagné sur la droite d’un petit bouton permettant de valider les caractères introduits et de déclencher le processus de recherche. Ce bouton représentait un petit triangle pointant vers la droite.

Or certains participants au test ont pensé qu’en cliquant dans ce champ, ils obtiendraient une liste déroulante reprenant l’ensemble des produits de la compagnie. Et, en effet, il y a une certaine similarité entre le bouton déclenchant la recherche et celui des listes déroulantes classiques (la balise SELECT  pour les familiers du HTML).

D’autres participants ont bien identifié cet élément comme un formulaire de recherche, mais se sont fait la remarque qu’un bouton « search », « go » ou « ok » serait plus approprié.

Comme quoi, la présence d’un petit élément graphique, peut parfois avoir un effet significatif dans l’interprétation de l’interface d’un site.

Voulant approfondir et échanger avec vous sur le sujet, j’ai regardé ce qu’il en était des formulaires de recherche sur d’autres sites sélectionnés au hasard : Twitter, Amazon, Facebook , Linkedin, Skype , Orange et Cyberpresse.ca

Le formulaire de recherche de Twitter :

Le formulaire de recherche de Amazon :

Le formulaire de recherche de Facebook :

Le formulaire de recherche de Linkedin :

Le formulaire de recherche de Skype :

Le formulaire de recherche du site de Orange :

Le formulaire de recherche du site Cyberpresse.ca (Google ) :

Je remarque que la mention ” Rechercher ” est celle qui est le plus utilisée. Il arrive aussi qu’on l’accompagne des mots ” OK ” ou ” GO” . À mon avis,  je crois que la mention “Rechercher”inscrite directement dans le champ de recherche avec l’ajout  icône ( loupe ) à droite est un choix intéressant.

À titre d’information, je partage avec vous un un article dont je me suis rappelée après la lecture du billet de Raphaël de Robiano. L’article en question traitait les observations de Jakob Nielsen. Je cite le passage intéressant sur le sujet :

3- Le moteur doit ressembler à un moteur !

Le moteur de recherche doit être facilement repérable par l’internaute. Mieux vaut donc éviter les libellés “amusants” ou originaux pour le bouton de recherche: “chercher” ou “rechercher” convient mieux que “trouver”, “OK”, “allons-y !” ou autres… éventuellement, “OK” ou “go !” est acceptable, à condition que le mot “recherche” (ou : “rechercher dans monsite.com”) figure avant le champ de saisie, comme suit:

la recherche sur amazon.fr

De plus, il est préférable que le bouton de recherche soit facilement identifiable comme tel: un bouton standard de formulaire, même si son esthétique est moyennement appréciée des designers, présente l’avantage d’être immédiatement reconnu. Si vous choisissez d’utiliser une image, arrangez-vous pour qu’elle ait bien l’air d’un bouton: forme allongée aux extrémités arrondies, et/ou dessin ombré suggérant le relief.

|
a priori, aucun problème d’identification pour ces boutons

Qu’en pensez-vous.

Comment concevez-vous vos formulaires de recherche ? Quelles mentions avez-vous tendance à ajouter ? :  ” Rechercher ” , ” OK “, “GO” , une loupe, une flèche, ect.  ? Intégrez-vous tout simplement le mot ” Rechercher” dans le champ de recherche ? Vous arrive-t-il de choisir un autre terme que ” Rechercher ” ?

Avec l’avènement des médias sociaux et des contenus générés par les utilisateurs, certaines plateformes sociales ou portails sont devenus si denses que l’on ne sait plus trop ce qu’ils sont ou à quoi ils servent. Voilà pourquoi il y a généralement des pages “About” (ou “À propos” quand l’interface est en français).

Le problème est que ces fameuses pages “About” ne renseigne pas réellement sur le site, sa mission, son histoire et les fonctionnalités qu’il propose. Illustration avec le site Idealist :

En regardant la page d’accueil il est impossible de comprendre ou deviner l’activité de ce site. Par contre, la section “About” propose une page “First Time Users” tout à fait remarquable :

Toutes les informations utiles sont sur cette page :

• Une explication courte de ce qu’est le site, de son fondateur, avec un accès vers l’historique ;
• Une liste des grande fonctionnalités proposées avec des liens directs vers les sous-fonctionnalités ;
• Une visite guidée en vidéo pour ceux qui veulent prendre plus de temps.

Rien à redire, c’est du grand art : les phrases sont courtes et précises, sans possibilité de mauvaise interprétation. La mise en page est très sobre avec un cadre pour renforcer l’attention. La liste à puces est bien aérée pour faciliter la lecture à l’écran.

Un exemple à suivre.

L’option “Événements” de Facebook

Je me suis souvent questionnée sur l’efficacité de la présentation du bloc “Événements”, situé dans le bas de la colonne droite de facebook.

À quelques reprises j’ai pensé qu’il s’agissait de l’anniversaire plusieurs connaissances en même temps. C’est le cas aussi pour quelques connaissances qui, par erreur, ont envoyé des souhaits à leurs copains quelques jours en avance.

Les journées sont-elles assez évidentes? Qu’en pensez-vous ?

Cet article est le début d’une série de billets portant sur des erreurs ergonomiques un peu partout sur le Web. N’hésitez pas à m’envoyer vos suggestions.

Voilà un petit bout de temps que je cherche à aborder le sujet des visites guidées (“demo tour” ou “product tour” en anglais). Très utiles pour valoriser votre offre voir indispensable quand vous devez faire preuve de pédagogie pour présenter un service complexe. Les visite guidée existent depuis de nombreuses années sous différentes formes : statiques (un seule page), séquentielle (plusieurs pages), animée (format flash), vidéo… Un exercice délicat qui demande de respecter certaines règles qui sont bien résumées ici : 16 manières de designer une page de tour.

Même si j’apprécie l’article précédemment cité, je trouve qu’il y manque un petit quelque chose… une visite guidée ultime qui serve de référence. J’ai longtemps cherché et je pense avoir finalement trouvé un très bon exemple : Get Glue.

Pour faire simple, Glue est une social bar qui vous accompagne dans votre navigation quotidienne. La page d’accueil du site est un bel exemple de minimalisme et de concision : une capture d’écran, une courte explication, des témoignages et trois boutons d’action (installation, visite guidée et démonstration vidéo).

La particularité de cette visite guidée est qu’elle est directement intégrée à la page d’accueil, vous ne changer pas d’écran et l’on vous présente les différentes caractéristiques du service en les illustrant sur la capture d’écran :

Les textes sont courts et le guidage est renforcé par des flèches qui pointent les zones d’intérêt et un ombrage sur le reste de la capture :

La visite guidée se termine par la proposition d’installation de l’application :

Donc au final nous avons une visite guidée d’une redoutable efficacité : peu de texte, des bénéfices et non une liste de fonctionnalités, une cinématique limpide et rapide à dérouler. Cette visite guidée est de plus secondée par une démonstration vidéo pour ceux qui souhaitent s’attarder plus de temps.

Bref, c’est du très bon travail même si je trouve qu’il manque dans ce site une page où seraient résumées les fonctionnalités et les bénéfices. Ce que j’apprécie particulièrement est le choix de la simplicité par rapport à des solutions plus sophistiquées ayant recours à une animation Flas plus longue à charger et lourde à manipuler.

Comme toujours, si vous avez de bons exemples, n’hésitez pas à publier l’URL dans les commentaires.

Le design de la presse en ligne est un sujet dont on entend parler depuis quelques mois. Hier j’ai pris connaissance d’une présentation très intéressante sur Slideshare. Cette présentation est de Benoît Drouillat, designer interactif.  Elle fait l’objet d’un point de référence (non officiel) de la façon dont la presse en ligne (essentiellement américaine) structure ses nouvelles sur une page pour mettre en valeur ses contenus. La présentation est composée de 94 diapositives.

En savoir plus ?

Consultez les billets suivants :

Une réflexion sur le design de la presse en ligne de Benoît Drouillat

Le futur de l’édition en ligne, quelques hypothèses de Étienne Mineur

Le futur de l’édition en ligne, quelques images de Étienne Mineur

Qu’en pensez-vous ?

Source : Martin Lessard

Pour faire suite aux articles de Frédéric “Tout savoir sur les chemins de navigation (breadcrumb)” et “Peut-on se passer des menus de navigation ?” voici une découverte très intéressante que je souhaite partager avec vous.

Il s’agit de l’article 37 Examples of Unique Navigation sur inspiredology.com.

J’ai particulièrement aimé ma visite sur les trois sites suivants :

Jaymeblackmon.com pour les rolovers du menu de navigation

Porsche.com pour les gros menus présentant les modèles de Porsches.

Salinas-rio.com.br pour l’ajout des illustrations dans le menu de navigation

Et vous, quels sont vos préférés ?