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

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

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

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

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

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 :

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 :

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 :

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 :

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

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.

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

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

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.

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.

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.

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 ?