SimpleWeb.fr

Avec la vague du tout social, chaque site (ou presque) propose une couche sociale, donc des comptes pour les utilisateur. Il en résulte l’omniprésence des formulaires d’identification que l’on retrouve un peu partout. Oui mais voilà, l’espace se fait rare et il ne reste plus beaucoup de place pour ce type de formulaire. Qu’à cela ne tienne, il existe différentes astuces pour palier à cette contrainte.

Le site Design Reviver nous propose ainsi une très belle collection de formulaires d’identification : 100 Outstanding Login Forms. De cette collection je retiens trois tendances :

• Les sites qui affichent le formulaire directement sur la page d’accueil ;
• Les sites qui affichent un lien ouvrant un panneau flottant avec le formulaire ;
• Les sites qui affichent un lien menant vers une page spécialement prévu à cet effet.

Afficher les deux champs d’identifiant et de mot de passe sur la page d’accueil est la solution idéale, mais ça prend de la place là où vous en avez désespérément besoin. Utiliser un lien ouvrant un panneau est une très bonne solution de replie, mais cela pénalise les utilisateurs qui ont désactivé le javascript sur leur navigateur. Utiliser une page spécifique est encore mieux car cela ne pénalise personne et peut être combiné avec le formulaire de création de compte et les éléments de réassurance / incitation qui vont avec.

Des formulaires présentés, je retiens celui de Wordpress (simple et efficace) :

Le formulaire d'identification de Wordpress

Dans le même style mais avec un peu plus de… style il y a celui de Tumblr (minimaliste mais cordial) :

Le formulaire d'identification de Tumblr

Signalons aussi celui de Facebook (très faible encombrement) :

Le formulaire d'identification de Facebook

Notez au passage qu’avec des intitulés en français c’est tout de suite plus laborieux comme chez Ning :

Le formulaire d'identification de Ning

Enfin mon préféré est celui de RedBrick Health avec un mélange de compacité et de sophistication :

Le formulaire d'identification de RedBrick

Je serais bien incapable de vous sortir une règle d’or sur l’emplacement des intitulés de champs car il existe plusieures possibilités :

• Au-dessus des champs ;
• À gauche des champs aligné à gauche ;
• À gauche des champs aligné à droite ;
• Dans le champ.

Ces quatre solutions fonctionnent bien, c’est juste une question de place disponible.

Par contre je peux vous recommander les bonnes pratiques suivantes :

• Localiser le formulaire ou le lien vers le formulaire en haut à droite de la page (là où se trouvera le nom de l’utilisateur une fois identifié) ;
• Afficher un lien vers l’oubli de mot de passe ET d’identifiant ;
• Prévoir un lien vers la création de compte ;
• Proposer de retenir le mot de passe pour une durée fixe (2 semaines semble une convention) ;
• Utiliser un cadenas pour symboliser la connexion sécurisée.

Voilà, si vous en avez d’autres, n’hésitez pas.

Aujourd’hui je vous propose un voyage dans le temps pour comparer l’évolution des pages d’accueil des gros sites web sur ces 10 dernières années. En fait c’est l’article suivant qui m’a inspiré : The Evolution of Websites: How 10 Popular Websites Have (And Have Not) Changed. L’idée n’étant pas de se moquer mais plutôt d’analyser ces évolutions et d’en déduire des courants ou tendances.

Commençons dans l’ordre alphabétique avec Adobe :

La page d'accueil d'Adobe.com en 2000

La page d'accueil d'Adobe.com en 2005

La page d'accueil d'Adobe.com en 2010

Vous noterez que le look & feel n’a pas beaucoup bougé en 10 ans : Toujours ce bandeau noir en haut de page, toujours les mêmes couleurs (rouge, noir, blanc et gris foncé), une mise en page carrée et une forte concentration de liens sur la bas de la page.

Poursuivons avec Amazon :

La page d'accueil d'Amazon.com en 2000

La page d'accueil d'Amazon.com en 2006

La page d'accueil d'Amazon.com en 2010

Outre l’abandon de la navigation par onglets en 2007 (au profit d’un bloc dépliable), le look & feel est d’une constance exemplaire avec une palette de couleurs et un logo quasi identiques, des blocs et un coeur de page toujours très épurés pour bien faire ressortir les produits. Notez que c’est quasiment le seul “gros” site web au monde à ne pas modifier le traitement graphique des liens.

Intéressons-nous à Apple :

La page d'accueil d'Apple.com en 2000

La page d'accueil d'Apple.com en 2005

La page d'accueil d'Apple.com en 2010

Là encore je ne peux qu’être admiratif devant la cohérence de la mise en page qui n’a pas bougée depuis 10 ans : Une barre de navigation, un visuel en pleine largeur, un bandeau pour les news et 3 ou 4 blocs de mise en avant. Vous noterez également l’absence du nom de la marque écrit en toutes lettres (juste le logo dans le premier item de navigation). Je trouve personnellement que les visuels détourés avec un léger ombrage n’ont pas pris une seule ride.

Voyons maintenant le site de Microsoft :

La page d'accueil de Microsoft.com en 2000

La page d'accueil de Microsoft.com en 2005

La page d'accueil de Microsoft.com en 2010

Alors que ce site a longtemps conservé son aspect très sobre qui fonctionnait plutôt bien (beaucoup de liens, très peu d’illustrations), ils ont récemment décidé d’adopter une intention graphique plus soignée et une navigation locale par onglets verticaux dans la moitié inférieure de la page (la mise en page est très déroutante). Vous pouvez néanmoins constater qu’ils conservent toujours une forte densité de liens pour faciliter l’accès aux contenus importants.

Finissons avec Yahoo! :

La page d'accueil de Yahoo.com en 2000

La page d'accueil de Yahoo.com en 2006

La page d'accueil de Yahoo.com en 2010

Tout comme Microsoft, Yahoo a longtemps été fidèle à sa mise en page : Le logo entouré de raccourcis vers les services principaux, la barre de recherche, la colonne centrale réservée aux liens et la colonne de droite un peu plus éditorialisée. Depuis peu cette mise en page a été complètement revue avec un système de navigation latérale dépliable et une zone centrale façon “Une”. Même si cette dernière version présente une bonne lisibilité et une densité d’information bien répartie, je ne peux que regretter les anciennes versions qui symbolisait l’attachement de Yahoo! à son héritage historique (l’annuaire).

Même s’il n’est pas réellement possible d’en tirer des tendances, cette belle collection de pages d’accueil permet de mettre en valeur un élément essentiel : la constance. Adobe, Amazon et Apple ont ainsi su capitaliser sur leur propre signature graphique (jeu de couleurs, mise en page…) alors que Microsoft et Yahoo! semblent avoir rompu avec le passé en opérant une réorientation dans leur univers graphique / ergonomique.

Notez que ces réorientations graphiques coïncide avec un changement de stratégie pour ces deux derniers qui souhaitent changer d’image. Dommage car les internautes y perdent leurs habitudes. Faut-il en déduire qu’une refonte est une opération délicate ? Oui et non : Oui car une refonte n’est pas une opération anodine (perte de repères) mais permet de corriger d’un coup de nombreuses faiblesses ergonomiques ; Non car il est tout à fait possible de conserver des couleurs, formes ou tonalités de l’ancienne version.

Pour finir je conclurais là-dessus : Changer n’est pas un problème (surtout si c’est pour améliorer) mais changer en douceur est encore mieux car cela évite de perturber les utilisateurs (et par la même Google qui pénalise durement les modifications dans l’arborescence). Je ne répèterais jamais assez qu’un site web n’est pas une application informatique, il ne faut donc pas raisonner en évolutions majeures (une nouvelle version tous les 2 ou 3 ans) mais plutôt en micro-évolution permanentes.

Je pense ne rien vous apprendre en déclarant que 2010 sera l’année des touchbooks : Présentation de nombreux modèles au CES 2010, lancement de l’iPad, concepts très intéressants de Google Tablet, rumeurs sur un iPad XL… Autant dire que le marché est en ébullition et que les éditeurs placent de gros espoirs dans les touchbooks.

Consultation de sites web sur l'iPad d'Apple

Oui mais voilà, le format touchbook apporte de grosses différences dans la façon de consommer et d’interagir avec des contenus : Absence de périphériques de saisie (clavier / souris), utilisation de nombreux capteurs (écran tactile, accéléromètre, GPS). De ce fait les touchbooks induisent des modalités d’interaction complètement différentes des navigateurs (lire à ce sujet les très interessantes Form Factors Explorations de l’équipe en charge de l’interface de Chrome OS).

Répartition des types d'éléments d'interface en fonction du terminal

Prenons comme exemple le cas d’usage le plus évident : La consultation de contenus (article, livre, BD, photos…). En l’absence de clavier, l’utilisateur peut parcourir le contenu de façon laterale ou horizontale en utilisant l’écran tactile (pression sur les bords de l’écran comme sur Panelfly, drag & drop) ou l’accéléromètre (en inclinant le terminal pour faire “glisser” le contenu).

Consultation d'une bande dessinée sur un iPhone

C’est sur ce type de contenus que les touchbooks vont exceller : proposer une expérience de lecture à la fois naturelle (manipulation avec les doigts) et enrichie (utilisation d’animations, de sons, de vidéos…). Je vous conseille à ce sujet la lecture de cet article qui prédit un retour en force des contenus d’éditeurs (par opposition aux contenus générés par les utilisateurs) : The return of the LP and the future of book publishing.

Deuxième cas de figure : La recherche d’informations. Là aussi l’absence de clavier peut être palliée par l’usage d’un clavier virtuel (pour une saisie d’appoint), de nuages de tags ou de concepts pour un affinage empirique à la Quintura ou de listes de résultats sous forme de frise comme chez Cooliris.

Le clavier virtuel de l'hypothétique touchbook de Google

Autres possibilités d’interaction : Personnaliser les résultats de recherche en exploitant les senseurs (filtrage géographique à partir des données GPS) ou le profil de l’utilisateur (filtrage par affinités en fonction de l’historique d’achat iTunes).

Troisième cas de figure : Les jeux. Les jeux de type arcade pourront être exploités à l’aide d’un joystick virtuel (déjà largement éprouvé sur l’iPhone) , les jeux de conduite se serviront de l’accéléromètre et les jeux de plateau (de type Tower Defense) bénéficieront du multitouch. C’est également dans ce cas de figure que les touchbooks offriront une expérience très enrichissante pour les joueurs, d’autant plus si vous couplez ça avec le GPS comme pour les MMTRG.

Exemple de jeu de voiture sur l'iPad

Dernier cas de figure : les applications sociales. Ici il ne serait pas tant question de rédiger un billet pour un blog mais plutôt de consulter des flux d’activité. Pour cela des interfaces “aériennes” comme celle de Seesmic Look se manipuleraient très bien en faisant défiler les entrés et en cliquant à droite et à gauche sur l’écran. L’absence de clavier n’est ici pas pénalisante quand il s’agit de parcourir un flux, envoyer un poke, noter un contenu ou faire un re-tweet.

L'interface aérienne de Seesmic Look

Au final la consommation de contenus et services sur un touchbook est beaucoup plus éloignée de ce que nous pratiquons sur un ordinateur que vous ne le pensez. Je rejoins ainsi l’avis de Luke W sur la nécessité de définir une toute nouvelle expérience : iPad User Experience Guidelines.

Mais le pire dans tout ça, c’est que nous n’en sommes qu’au balbutiement de l’informatique tactile. Microsoft nous a ouvert les yeux sur les nombreuses possibilités des interface tactiles avec sa table Surface et l’on commence à voir des choses très intéressantes comme le bureau 3D de BumpTop.

Imaginez un peu ce que cela va donner avec les améliorations hardware suivantes :

• Utilisation de la webcam pour capter les gestes, la position de l’utilisateur ou encore ses expressions faciales ;
• Utilisation de gâchettes sur les tranches de la machine (comme sur les DS) ou de zones tactiles à l’arrière de l’appareil ;
• Utilisation d’écran en relief…

Tout ceci vous semble farfelu et lointain ? Vous seriez très surpris d’apprendre pourtant que ces technologies sont bien plus avancées que vous ne le pensez. Pour vous en convaincre, jetez donc un oeil à ça : Synaptics Debuts Fuse™ Next-Generation Mobile Phone Concept.

Alors ?

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 :

Le pied de page du site Sushi & Robots

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) :

Le pied de page du site RailsTrip

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 :

Le pied de page de 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 :

Le pied de page du site d'Apple

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…

Bon OK je sais le blanc n’est pas une couleur, mais pour ne pas nous perdre dans des querelles d’experts nous allons appelez ça une couleur. “Ça” ? Oui “ça“, ce non-élément graphique qui est l’élément le plus utilisé sur votre page web et à qui l’on peut faire dire de nombreuses choses. Je rebondis sur un article récemment publié chez WDL (Whitespace: The Underutilized Design Element) et qui m’a fait redécouvrir celui publié sur A List Appart (Whitespace).

Le blanc (”whitespace” en anglais) est en effet indispensable pour faire respirer une mise en page et éviter de saturer l’interface.

Exemple de mise en page saturée sans espaces blancs

Le blanc est essentiel à la fois pour structurer la grille de lecture (en mettant en évidence les colonnes verticales mais également les lignes verticales) et rythmer la page dans sa verticalité.

Le même texte avec un bon usage des espaces blancs

Les espaces blancs sont essentiels pour améliorer la lisibilité et pour concentrer l’attention. D’une part car ils facilitent le décryptage de la page (et son survol par l’oeil) et d’autre part car ils mettent en évidence les contenus qu’ils côtoient. Formulé autrement : si vous voulez mettre en évidence un bloc de contenus, oubliez les couleurs qui flashent et privilégiez plutôt de larges espaces blancs autours.

Dans l’exemple qui suit (Rikcat Industries), les espaces blancs permettent de faire ressortir les titres sans avoir recours à de la couleur :

Très belle mise en page minimaliste chez Rikcat

Les espaces blanc sont aussi très intéressants pou faire des regroupements comme ici sur le site d’Astheria ou le blanc permet d’associer les titres avec les chapô des articles :

Utilisation du blanc pour grouper des éléments sur le site d'Astheria

Enfin le blanc peut donner, s’il est bien utiliser, une impression d’élégance et de sophistication comme sur le site de Urban Outfitters :

Elégance et sophistication chez Urban Outfitters

Notez que lorsque l’on parle de blanc il peut également s’agir d’espaces vides, comme sur ce blog où le header est vide mais avec un léger dégradé.

Bref, le blanc est une couleur très puissante et un élément essentiel de l’architecture graphique de vos pages web. Je suis à la recherche d’écrits de référence sur ce sujet, si vous avez des suggestions, merci de les mettre dans les commentaires.

Comme chaque année depuis 2005, la société norvégienne Netlife Research nous propose son Bad Usability Calendar. Comme son nom ne l’indique pas il s’agit en fait d’un simple calendrier avec une bonne pratique à respecter par mois :

Bad Usability Calendar 2010

Un moyen simple de se motiver… ou d’envoyer un message fort à votre patron ! Soyez particulièrement attentifs aux mois d’avril, juin, juillet et octobre.

Pour aller plus loin vous pouvez aussi vous procurer le très bon memento Ergonomie Web.

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.

Fil d'Ariane animé grâce à javascript

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 :

Le nouveau formulaire de l'Apple Store

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 :

Le formulaire de création de compte de 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 :

Le formulaire de création de compte 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.

Je ne sais plus qui a dit : “L’interface parfaite n’est pas celle où l’on ne peut plus rien ajouter, mais celle où l’on ne peut plus rien retirer“. En tout cas pour certains c’est un dogme, et même pour certaine comme SwissMiss qui a récément participé à la conception de TeuxDeux, une application en ligne de gestion de tâches.

Particularité de cette application en ligne : une simplicité à toute épreuve.

L'interface simplissime de TeuxDeux

Je ne peux que m’incliner devant l’efficacité et la sobriété de cette interface : un champ et une colonne par jour avec des flèches pour avancer ou reculer la date, une zone de tâches sans échéances et la possibilité de rayer ou supprimer la tâche au survol de la souris.

Rien à redire, c’est du grand art.

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

L'interface de recherche du Guardian

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

L'interface de recherche de LinkedIn

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

L'interface de recherche de 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 :

L'interface de recherche de Giraffe Restaurants

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

La liste des ville sélectionnées pour la recherche du site Giraffe Restaurants

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

Les résultats de recherche sur le site Giraffe Restaurants

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.