Souvenez-vous, il y  quelques années je me réjouissais de la simplification de la procédure d’identification avec Open ID : La création de compte simplifiée avec OpenID. Depuis, les choses ont bien changé avec l’avènement des réseaux sociaux et leurs mécanismes de social login. Je veux bien croire que le fait de s’appuyer sur les profils des internautes permet de gagner du temps et d’augmenter le taux de conversion, mais de là à ne proposer que cette option comme Klout, c’est extrêmement gênant.

Ce type de mécanisme d’identification fonctionne bien pour ceux qui ont un compte Facebook ou un profil Twitter, mais pour ceux qui en ont plusieurs, cela  engendre des conflits insolubles (j’ai dû avoir recours au support technique pour me dépatouiller de ce bazar). Il n’est pourtant pas très compliqué de proposer deux systèmes d’identification : délégué (avec Facebook ou Twitter) et internalisé. C’est ce que proposent des services comme Spotify ou Storenvy, et ça fonctionne très bien. De plus, ce double système permet de rendre l’éditeur du service moins dépendant des réseaux sociaux qui fournissent le profil (Astuce : Utiliser Facebook Connect pour de la pré-inscription).

Sinon dans le même genre il y a aussi Asana qui restreint le choix à Google Account et le met en première position :

On trouve aussi la même chose chez Pinterest avec un formulaire minimaliste, mais soigné :

Vous remarquerez que dans les deux cas, une fine ligne de séparation permet de faire comprendre que le bouton « Login » n’est à utiliser que si l’on rentre un nom d’utilisateur et un mot de passe.

De tous les écrans d’identification que j’ai pu croiser, je pense que la palme revient à 500px avec un formulaire très bien proportionné, explicite (« No account yet?« , « Can’t access your account?« ) et surtout qui lève toute ambiguïté concernant l’utilisation de l’une ou l’autre technique (« or login using your username or email« ) :

Une authentique référence en matière de simplicité, de guidage et de pédagogie. Dans un registre plus formel, nous avons aussi le formulaire de Forbes, propulsé par le widget de social login de Gigya :

Ce formulaire est d’une efficacité redoutable, propose une panoplie complète de mode d’identification, mais véhicule une sensation glaciale (froid et rigide). Bref, comme vous avez pu le voir au travers de ces différents exemples, il y a des choses à faire et des choses à éviter. Notez que je ne me suis concentré que sur les intitulés et la mise en page, mais il existe d’autres leviers d’améliorations : Innovative Techniques To Simplify Sign-Ups and Log-Ins.

Comme toujours, si vous avez de bons exemples, merci de les mentionner dans les commentaires.

Je n’ai eu de cesse ces deux dernières années de vous mettre en garde contre la spécificité des interfaces mobiles : smartphones, feature phones et tablettes ne s’utilisent pas dans le même contexte qu’un ordinateur et correspondent à des contraintes bien particulières. Si vous souhaitez vous lancer dans la conception d’une application ou interface mobile, il va donc vous falloir prendre le temps de vous familiariser avec ces terminaux et surtout de vous documenter sans modération. Ne pensez pas être prêt à concevoir votre première application mobile parce que vous êtes un utilisateur de la première de l’iPhone. L’important n’est pas l’expérience en tant qu’utilisateur, mais l’approche en tant que concepteur.

Heureusement pour vous, que l’on vous demande de concevoir, d’encadrer ou de valider le travail d’un autre, il existe quantité de ressources (articles, livres, référentiels, outils…) pour vous aider dans cette tâche et vous éviter de faire fausse route. Je vous propose donc une petite compilation de sources pour bien démarrer dans la conception d’interfaces mobiles, testées et approuvées par votre serviteur. Cette liste n’est pas complète, n’hésitez pas à rajouter vos sources dans les commentaires.

Dans un premier temps, je peux vous proposer une série d’articles à imprimer, lire et annoter :

• Avant toute chose, il convient de bien appréhender la particularité des terminaux mobiles (UX Concerns Across Mobile Platforms et A Framework for Designing for Multiple Devices), à prendre en compte toutes les contraintes (Speed, Dimensions et Behavior) et à repenser votre façon de travailler (Stop Designing Pages And Start Designing Flows et Mobile-First Responsive Web Design) ;
• Il faut dans un second temps s’intéresser aux terminaux cibles, c’est-à-dire aux spécificités du format (7 Limitations When Designing For Mobile et Ten Things To Think About When Designing Your iPad App) et aux directives fournies par les constructeurs / éditeurs (Apple, Android, BlackBerry, Nokia) ;
• Enfin, regardez de près les aspects techniques (How to Design a Mobile Responsive Website) et les meilleures pratiques (Mobile Design Strategy: Home Page Tips, Mobile Commerce: Category Page Design Tips et Mobile Cart Page Design and Testing Tips).

Dans un second temps, je vous recommande cette série de livres :

• Tapworthy, Designing Great iPhone Apps où il y est principalement question d’applications iPhone, mais le livre est très bien argumenté et illustré ;
• Mobile Design Pattern Gallery, un ouvrage moins verbeux, mais extrêmement riche ;
• Designing Mobile Interfaces, qui s’intéresse à de nombreux formats de terminaux mobiles et alternatifs ;
• Mobile First, le livre de référence de Luke Wroblewski.

Ensuite il sera temps de passer de la théorie à la pratique avec cette série d’outils :

• Consultez autant de bibliothèques de composants d’interfaces mobiles que vous pouvez pour trouver de l’inspiration ;
• Exercez-vous sur du papier, notamment avec les formidables kits de chez UI Stencils ;
• Concevez vos premières interfaces avec des outils de prototypage rapide en ligne comme Proto.io ou Wireframe Sketcher (cf. 12 Best Website & Mobile Wireframe Tools) ;
• Passez aux choses sérieuses avec des outils de prototypage plus puissants comme Balsamiq et Axure, avec des frameworks comme Sencha Architect ou PhoneGap, ou directement en HTML (Rapid Prototyping For Any Device With Foundation).

En respectant toutes ces étapes, surtout les deux premières, vous serez bien mieux préparé à la lourde tâche de concevoir (et optimiser) une interface ou application mobile. Certes, cela demande un minimum de temps et d’attention, mais la compétition est tellement rude que vous ne pouvez pas vous permettre de déléguer à l’aveugle.

Prochaines étapes : appliquez les méthodes du web aux supports mobiles (SEO, tests utilisateurs, mesure d’audience…).

Loin de moi l’idée de jouer les vieux brisquards, mais je travaillais déjà sur l’utilisabilité des sites web au siècle dernier. À cette époque (lointaine), le web était encore considéré comme un média immature et instable. Il était donc normal que l’ergonomie moyenne des sites soit plutôt basse (par manque de connaissances, compétences, ressources…). Nous sommes maintenant en 2012, et je n’ai pas l’impression que la simplicité d’usage a globalement progressé sur la décennie passée. Nous ne sommes pas ici dans l’affirmation, mais dans le ressenti, voire l’impression que me donnent les sites que je consulte au quotidien (institutionnels, d’information, boutiques en ligne, portails…). Peut-être est-ce parce que mes exigences s’accroissent plus vite que le rythme d’amélioration des sites, toujours est-il qu’il y a encore BEAUCOUP de travail.

Ceci étant dit, le cabinet Forrester a publié ce mois-ci un rapport venant accréditer mon ressenti : Lessons Learned From 1,500 Website User Experience Reviews. Les conclusions du rapport sont accablantes : sur 1.500 sites testés, seuls 45 (3%) sont considérés comme satisfaisants d’un point de vue ergonomique. C’est peu… très peu, d’autant plus que l’évolution est très lente : s’il n’y a pratiquement plus de mauvais élèves, la grande majorité des sites se contentent d’un score faible / moyen (le rapport repose sur une méthode quantitative avec 25 critères de pondération).

Là où ce rapport est intéressant, c’est qu’il met en lumière le fait que l’on retrouve au fil des ans toujours les mêmes lacunes :

• Des textes pas très lisibles ;
• Une facilité de complétion des tâches perfectible ;
• Des mentions de sécurité et confidentialité difficiles à trouver ;
• Une mise en page qui n’exploite pas bien l’espace disponible ;
• Des contenus pas évidents à trouver.

Bref, malgré plus d’une décennie de pratique, les fondamentaux ne sont toujours pas maitrisés : lisibilité, repérage, orientation, simplicité de prise en main… Quel dommage, pourtant en dix ans chaque site a forcément dû connaitre au moins deux refontes. Comment se fait-il que le niveau moyen ne progresse pas ? Je serais incapable de vous l’expliquer. Pourtant il suffit de réserver un billet de train, acheter un objet, chercher de l’information ou compléter une tâche en ligne pour s’en rendre compte. N’est-il pas aberrant de constater que même sur des choses extrêmement simples (page de texte, formulaire, tableau…), la plupart des sites en 2012 sont encore incapables de proposer une expérience satisfaisante ?

Pourtant il existe des outils simples pour assurer les fondamentaux : les checklists et référentiels. Il existe ainsi quantité de checklists pour vous aider à adopter les bons réflexes, des listes très simples (Website Usability Checklist and Usability Guide) ou des choses plus sophistiquées (25 Incredibly Useful Usability Cheat Sheets & Checklists).

Mais je pense qu’en matière de référentiel, le projet Opquast est, selon moi, ce qui se fait de mieux, et en plus il est en français : Liste des bonnes pratiques.

De plus, je vous signale qu’il existe au format Memento. Vous n’avez donc plus aucune excuse !

Voilà presque 15 ans que je travaille dans l’internet et dans le domaine informatique d’une certaine mesure. Au cours de ces 15 dernières années, jamais je n’ai ressenti autant d’enthousiasme face aux transformations et innovations induites par les terminaux mobiles. Les smartphones et tablettes sont en effet en train de stimuler l’innovation en matière de conception d’interface comme aucune autre innovation technologique ne l’avait fait avant (si l’on met de côté Flash pour les interfaces web).

D’après la définition qu’en donne Wikipedia, un logiciel est un ensemble d’informations relatives à des traitements effectués automatiquement par un appareil informatique. Dans l’absolu, cette définition s’applique aux applications traditionnelles comme aux applications mobiles, sauf qu’entre Outlook et Sparrow, il y a un gigantesque fossé. L’explication de cet écart tient du contexte d’usage :

• Les applications traditionnelles sont conçues dans une optique de productivité, les utilisateurs sont censés les exploiter toute la journée, à leur bureau dans un environnement calme où ils peuvent se concentrer.
• Les applications mobiles sont conçues dans le but de rendre service à des utilisateurs en situation de mobilité (dans la rue ou dans les transports en commun) où ils sont distraits par l’environnement, sont limités dans leurs gestes (ils n’ont souvent qu’une main de libre) et dans le temps qu’ils peuvent consacrer à la complétion d’une tâche (créer un RDV, relever ses messages, vérifier une information ou une donnée).

De par le contexte d’usage, l’approche de conception d’une application mobile est complètement différente de celle d’une application traditionnelle. Au final, les applications mobiles sont plus proches de widgets que des logiciels. Nous sommes vraiment dans une logique de fractionnement : l’idée n’est pas de fournir un outil à tout faire, mais de répondre à un besoin spécifique avec le maximum d’efficacité et de confort. Les applications mobiles sont ainsi naturellement beaucoup moins ambitieuses en terme de couverture fonctionnelle (hormis les jeux) et doivent donc compenser par une expérience d’utilisation plus enrichissante.

Cet impératif d’enrichissement de l’expérience pousse ainsi les éditeurs de systèmes d’exploitation mobiles à publier des chartes de conception pour éviter les aberrations et capitaliser sur une signature visuelle (cf. les Design Guidelines de Apple, Android et Windows Phone).

Dans la mesure où les contraintes d’affichage et de manipulation sont très fortes sur les terminaux mobiles, les éditeurs d’OS ont même poussé la logique de standardisation jusqu’à fournir des éléments d’interface standardisés pour l’affichage (liste, carte, calendrier…) et pour la manipulation (glissière, navigation par onglets, saisie d’une date…). Mais rien ne vous empêche d’aller outre ces standards et d’en faire votre propre interprétation.

Autant le dire tout de suite : les tentatives de reproduction des interfaces de logiciels traditionnels sont vouées à l’échec. Il vous reste par contre un champ d’expérimentation extrêmement large pour reproduire des interfaces naturelles ou pour faire de la pure innovation.

C’est très certainement dans l’innovation pure que l’on trouve les exemples les plus intéressants avec des interfaces expérimentales (cf. Pourquoi les interfaces tactiles peuvent révolutionner l’industrie musicale) et des interfaces qui repoussent toujours plus loin les limites de la simplification (à l’image de Clear). Mais il est également possible de trouver de très belles interfaces mobiles qui ne sont ni naturelles ni minimalistes comme celle de Path. si vous cherchez de l’inspiration, je vous recommande des sites comme TappGala, Inspired UI, TapFancy ou Mobile UI Patterns.

Bref, tout ça pour dire que je savoure cette période, car elle est d’une incroyable richesse en terme de créativité pour les interfaces mobiles, et j’espère que vous la savourez aussi, car il reste encore de belles années devant nous, d’autant plus avec la multiplication des formats (tablettes, TV connectées, voitures connectées…) !

J’ai déjà eu l’occasion de vous parler de services en ligne exploitant une interface minimaliste comme Minutes.io, Billable.me ou Scri.ch (Deux applications en ligne sans interface). Il semblerait que ce type d’interface a fait des émules, je vous propose ainsi de découvrir deux applications exploitant des interfaces (quasi) transparentes.

Il y a tout d’abord Clear, une application iPhone de gestion de tâches qui a fait grand bruit lors de sa sortie : No More Buttons, Clear Demonstrates the Power of a Purely Gesture-Based Interface.

Force est de constater qu’ils sont allés très loin dans la rationalisation de l’interface puisqu’il n’y a ni menu, ni boutons. Et pourtant, la manipulation reste intuitive et performante :

Précisons au passage qu’il existe une version HTML5 (non-officielle) de cette application réalisée par un étudiant : Looking for work, this student built Clear in HTML5 and it isn’t half bad.

Autre exemple : CheckThis, une plateforme de publication avec une interface quasi-transparente. Le principe de ce service est de vous donner l’opportunité de créer une page pour publier un article, vendre un produit, recruter quelqu’un ou faire un peu tout ce que vous voulez : CheckThis, Getting Creative With a Single Web Page.

Comme vous pouvez le constater, l’interface est d’une extrême simplicité puisqu’elle se concentre sur l’essentiel : le contenu. Là où ça devient intéressant, c’est que ce contenu est structuré selon les trois modèles proposés (publier, vendre et engager) :

Les options de présentation et de paramétrage ne sont proposées qu’en périphérie de page, tout comme la création de compte. Face à des plateformes de publication ou de e-commerce toujours plus sophistiquées (WordPress, Prestashop…), ce service me semble être une alternative tout à fait crédible pour ceux qui ont des besoins très ponctuels : publier un seul article, vendre un seul produit ou recruter une seule personne. Je suis de plus en admiration devant le travail d’épuration de l’interface qui est une merveille de minimalisme et d’intuitivité. Du grand art !

Sommes-nous en présence d’une tendance de fond avec ces interfaces transparentes ? Je l’espère, car je suis un fan inconditionnel.

Connaissez-vous la toute nouvelle boutique lancée par Amazon pour le marché indien ? Elle s’appelle Junglee et pourrait bien présager de ce que seront les sites web dans quelques années : Amazon Launches New Website for India. La particularité de cette nouvelle boutique est de proposer une sélection correspondant aux attentes du marché indien, mais également de se conformer à une spécificité locale : du fait d’infrastructures défaillantes, plus de la moitié des accès internet s’effectue via des téléphones mobiles (In India, 40% of search and 67% of e-commerce is mobile).

Le fait que la majorité des internautes indiens se connectent via un terminal mobile ne pouvait pas être ignoré par Amazon. Même si la nouvelle version en cours de déploiement prend en compte les smartphones et tablettes, ils devaient aller plus loin… surtout plus loin que Flipkart, leur principal concurrent. Ils ont donc décidé de prendre le problème à l’inverse et de concevoir une boutique pour les terminaux mobiles qui s’affichent bien sur un écran d’ordinateur.

Vous pourriez me dire qu’avec des techniques comme le responsive design ce n’est pas nécessaire, car il suffit simplement d’optimiser le code pour que la mise en page s’adapte. Certes, mais ça c’est la théorie. En pratique le responsive design est une technique de code (ou plutôt une approche) qui exige une sacrée gymnastique et qui est tout de même contraignante. Je parle d’expérience, car le blog que vous lisez en ce moment est codé selon ce principe et ça n’a pas été une mince affaire (Nouveau thème graphique en HTML5 et responsive design). Ce n’est ainsi pas un hasard si l’on ne trouve que très peu de sites à fort trafic en responsive design (à part le Boston Globe).

La solution est donc de concevoir votre site pour les terminaux mobiles, puis de l’enrichir pour qu’il soit plus performant sur les écrans d’ordinateurs. L’approche du Mobile First n’est pas nouvelle, car en parlait déjà en 2009 (il y a même un livre à ce sujet). La solution ultime consiste donc à coupler ces deux approches : mobile-first responsive web design.

Vous noterez que ce couple Mobile First + Responsive Design est la synthèse de nombreuses années de discussions et théories et qu’il représente la technique de conception la plus efficace et pragmatique. La boutique Junglee est ainsi un bel exemple de pragmatisme en matière de commerce en ligne : pas de fioritures, l’accès rapide aux produits est privilégié sur tout le reste. Ceci étant dit, je ne peux que vous mettre en garde contre les complications et contraintes inhérentes à cette philosophie, elles sont nombreuses et je ne suis pas le seul à le dire : Where are the Mobile First Responsive Web Designs?.

Au final, l’approche utilisée pour Junglee est-elle l’avenir de la conception web ? Je ne saurais le dire, en tout cas de la conception web multi-écran. Je n’ai eu de cesse de dire et répéter sur mes différents blogs que beaucoup de choses allaient changer avec l’avènement de la mobilité et de HTML5, Junglee est là pour nous rappeler que l’horloge tourne…

Afficher une grande quantité d’information à l’écran est un sacré challenge, mais ce n’est pas une raison pour faire n’importe quoi ! Illustration avec la version française du HuffingtonPost qui a été lancée hier matin à grand coup de ramdam médiatique. Il n’y a pourtant pas de quoi être fier tant le site est… (je préfère m’abstenir de le qualifier pour ne pas verser dans la vulgarité et je me range derrière l’avis de Geoffrey : Y’a-t-il un designer pour sauver le Huffington Post ?).

Même si je ne souhaite pas prendre la défense des personnes responsables de cette infamie, je constate qu’en règle générale le secteur ne brille pas par son originalité. En témoignent des sites d’actualité français qui se ressemblent tous : Le Monde, Libération, Le Parisien et Le Figaro… Mais ce ne sont pas les pires, car d’autres s’illustrent par leur mise en page complètement déstructurée (20 Minutes) ou très tassée (L’équipe).

Ceci étant dit, les grands titres US souffrent également d’une très forte densité d’information. Ils sont, certes, très sobres (une qualité que j’apprécie), mais pas non plus très inspirés comme le NY Times, Washington Post, le LA Times ou le Boston Globe.

Vous noterez que certains titres ont fait des efforts comme USA Today ou NPR. Les concurrents outre-Atlantique proposent, eux, une mise en page plus aérée et surtout plus de couleurs comme le site du Guardian ou celui de la BBC.

Dans la même lancée, les sites de magazines américains comme Newsweek, Salon ou encore The New Yorker proposent plus d’espace et d’originalité (une typographie spécifique et même un petit papillon qui virevolte au-dessus du logo).

Bref, tout ça pour dire que la solution miracle n’existe pas… ou qu’ils ne l’ont pas trouvé ! Un constat affligeant également partagé par d’autres : Designing a big news site is about more than beauty. Le designer Andy Rutledge propose d’ailleurs un nettoyage très réussi du site du NY Times :

Vous pourriez me dire qu’une mise en page aussi épurée relève du fantasme tant les contraintes que l’éditeur doit prendre sont nombreuses (bannières, offres de partenaires, confits éditoriaux…), mais pourtant d’autres ont fait ce choix de clarté et de minimalisme avec brio comme le très bon site de Inc.

Je ne peux pas terminer ce passage en revue des sites d’information sans mentionner la très réussie maquette du site d’Owni qui tranche avec tout ce que l’on connait :

La page d’accueil est ainsi coupée en deux par la frise de photos et propose une imbrication de bloc-articles dans sa moitié basse :

Au final, nous sommes bien d’accord pour dire que l’important est la qualité du contenu et non la présentation. Ceci étant dit, je ne me risquerais pas à dire que le site d’Owni est mieux que celui du Huffington Post dans la mesure où tout est affaire de goût. Mais bon… j’ai quand même une forte préférence !

Normalement une nouvelle version du site de L’Express (auquel j’avais contribué il y a quelques années) devrait sortir la semaine prochaine, peut-être apporteront-ils des solutions en terme de lisibilité / densité…

L’année dernière je constatais un regain d’intérêt des éditeurs de site pour proposer de nouvelles expériences d’achat et de consultation. Pourquoi chercher à réinventer la roue alors que le commerce en ligne tourne à plein régime ? Justement parce qu’il tourne à plein d-régime et que la compétition n’a jamais été aussi forte (marges ridiculement basse, livraison gratuite, satisfait ou remboursé pendant un an…). Pour se démarquer, il ne reste plus beaucoup de leviers à activer : les prix sont déjà au plus bas, les performances au plus haut et les interfaces simplifiées à l’extrême. La seule solution pour sortir du lot consiste alors à proposer une expérience différenciante.

Prenez par exemple le secteur du tourisme :

• Google préempte le bas du marché avec deux interfaces de recherche verticales ultra-optimisées (Flights et Hotel Finder) ;

  

• Hipmunk s’est imposé comme La référence en matière d’interface de recherche sur le web et sur terminaux mobiles (Hipmunk, la nouvelle référence de la recherche de vol et Hipmunk Launches Hotel Search For iOS And Android) ;

  

• Kayak a même récemment lancé une application marchandesur le Mac App Store.

  

Face à une telle débauche de créativité, plusieurs chaines hôtelières (Hilton, Hyatt, InterContinental, Marriott et Wyndham) se sont fédérées pour proposer leur propre moteur de recherche : Big Chains Launch “Hulu For Hotels”. Pourquoi cette comparaison avec Hulu ? Car Hulu est LA référence en matière d’expérience utilisateur, surtout face à des concurrents très puissants (Vidéo en ligne, Hulu vainqueur par K.O.).

Bref, ces chaines hôtelières ne pouvant pas se battre sur l’argument du prix ou de la simplicité d’usage ont tout misé sur la qualité de l’expérience utilisateur avec Roomkey. Le moins que l’on puisse dire, c’est que le résultat est à la hauteur de la concurrence avec une interface de recherche tout simplement splendide.

La magie commence dès la page d’accueil avec des couleurs et visuels très chaleureux :

Une fois les critères saisis, le bandeau de recherche remonte en douceur et la liste de résultat s’affiche dans une parfaite transition :

Tout a été soigné dans le moindre détail sur cette liste : le choix des typos, l’arrondi des cartouches, les pictos et éléments d’interface… Le résultat est un mélange de simplicité, de sobriété et de raffinement, un modèle du genre !

Le basculement d’un mode d’affichage à un autre se fait avec une très belle transition. Cerise sur le gâteau : lorsque vous descendez vers le base de la page,  la carte reste verrouillée en haut de l’écran pour que vous puissiez localiser les hôtels du bas de la liste.

De mémoire, j’ai rarement vu une aussi belle interface. Autant vous dire que je suis plus qu’enthousiaste à l’idée d’une lutte entre les concurrents sur le terrain de l’expérience utilisateur. J’ai vraiment hâte que ce type de compétition se déporte sur d’autres secteurs comme la distribution ou la banque. Quoi que… ça a déjà commencé avec des nouveaux entrants comme SimpleBank et Yoyo.

Il est amusant de constater qu’en matière de conception web, certains mythes ont la peau sacrément dure. Autant nous n’abordons plus les mythes de la règle des trois clics ou de la page d’accueil de moins de 60 Ko, autant celui de la limite de visibilité revient régulièrement. Le dernier article que j’avais rédigé à ce sujet remonte à deux ans (En finir avec le mythe de la limite de visibilité), mais je pense devoir m’y coller à nouveau pour définitivement clore le sujet.

Malgré les nombreux articles déjà parus sur le sujet, les discussions persistent, de même que les publications : Life below 600px, Designing ‘Above the Fold’ Necessary?, Is there life below the fold?. Le point de départ de ce mythe est pourtant bien fondé : les contenus au-dessus de la limite de visibilité sont plus lus, de même que les boutons qui sont plus cliqués. Ceci étant dit, les contre-arguments sont également toujours les mêmes :

• L’équipement des internautes évolue et la limite des 600px est repoussée vers le bas avec des écrans toujours plus grands ;
• Depuis 15 ans que le web existe, les internautes ont appris à se servir de la barre de défilement et de la molette de leur souris ;
• L’important n’est pas de faire rentrer tout le contenu au dessus de la limite, mais de faire comprendre aux internautes qu’il y a du contenu supplémentaire en dessous ;
• Même s’il est largement en dessous de la limite de visibilité, un contenu associé à un point d’intérêt (photo, vidéo, illustration…) sera lu.

J’imagine que vous devez en avoir raz-le-bol que l’on vous sorte toujours les mêmes exemples (page produit d’Amazon et page d’accueil de Basecamp), alors pour illustrer mon propos je choisit un autre exemple (la page d’accueil de Backpack) qui démontre bien l’intérêt d’utiliser toute la hauteur de page pour bien valoriser le contenu.

Nous sommes maintenant (presque) en 2012, il faut savoir vivre avec son époque et prendre en compte plusieurs facteurs qui rendent cette limite des 600px encore plus caduque :

• Le volume de contenu disponible a considérablement augmenté ces dernières années avec les médias sociaux et les contenus multimédia, de ce fait, vous aurez besoin de plus de contenus pour attirer l’attention et convaincre les internautes, donc de plus de place ;
• La montée en puissance des terminaux alternatifs (smartphones, tablettes, TV connectées, netbooks/cloudbooks…) brouille complètement les statistiques de taille d’écran.

Ces deux facteurs, dont nous commençons réellement à prendre la mesure à l’aube de cette nouvelle année, remettent en question les règles de conception des sites web (Vers des sites adaptés aux netbooks ?, Faut-il réinventer le web pour les touchbooks ? et Quel va être l’impact de la fin de l’ordinateur individuel ?). De ce fait, de nouvelles pratiques émergent et apportent une solution à ce phénomène de diversification des modes de consultation et d’achat en ligne : 4 feuilles de styles pour 4 expériences de lecture, Le responsive design à l’assaut des terminaux mobiles et Et on reparle de la conception multi-écran.

Donc au final, la limite de visibilité a-t-elle encore une importance ? Non, plus réellement. Certes, les contenus en haut de page bénéficieront toujours d’une meilleure exposition, mais la notion de haut de page devient de plus en plus floue : non seulement les formats d’écrans se diversifient, mais les applications prennent de plus en plus de place dans les modes de consultation (Le choix se complique entre application mobile et application HTML5).

Moralité : les concepteurs sont aujourd’hui confrontés à des défis bien plus complexes que l’identification d’une surface d’affichage optimale. Le débat ne porte plus réellement sur l’emplacement de la limite de visibilité, mais sur les priorités à attribuer aux interfaces web, mobiles, tactiles, aux applications… Mobile First ! (et Content First !) (et Touch is the New Click!) (et Web is Dead!) (et HTML5 Rules!) (bref, il n’y a plus de règles).

Les médias sociaux ont beau accaparer l’audience de l’internet, il n’existe que peu d’études sur l’ergonomie des interfaces de ces plateformes. Il faut dire que les interfaces changent souvent (Thoughts on the New Facebook Timeline Design), et que de toute façon, les utilisateurs sont avant motivés par la possibilité de développer des interactions sociales avec leurs amis.

Un récent article publié sur Mashable nous donne néanmoins des informations intéressantes sur la façon dont les internautes décryptent les interfaces des principaux médias sociaux : Here’s How People Look at Your Facebook Profile, Literally. L’étude est intéressante car exhaustive, mais elle vient surtout corroborer les observations d’oculométrie précédemment observées, notamment en 2009 par OneUpWeb (Une étude de Eye Tracking pour Facebook, Twitter et Youtube) : l’attention est concentrée sur le haut de page et le regard suit la mise en page en deux colonnes.

Cette étude de eye-tracking avait été complétée en 2010 par le Catalyst Group avec un examen plus approfondi de la page de liste de contacts : Eye Tracking: Facebook and LinkedIn Usability.

Plus intéressant, le EyeTrackShop avait publié en milieu d’année les résultats d’une étude portant sur Facebook et Google+ : Eye-Tracking Study Shows Users Perceive Google+ and Facebook Virtually Identically. Cette étude démontrait que l’oeil suivait le même parcours critique sur les deux interfaces.

Ces résultats ne sont pas très surprenants dans la mesure où les deux interfaces sont très proches.

Nous en revenons donc à l’article que je mentionnais en haut de page et la comparaison des zones de fixation entre les différents médias sociaux. Premier constat : le parcours de l’oeil est avant tout guidé par les photos. Ceci est particulièrement flagrant avec Facebook, Twitter, Google+ et surtout YouTube :

Autres enseignements : les photos des amis sont particulièrement appréciées, de même que les titres des contenus en haut de page. Rien de très surprenant, ceci est conforme à ce que l’on peut constater sur d’autres sites.

Il y a donc une uniformisation dans la façon dont les internautes décryptent les interfaces des réseaux sociaux, sauf pour LinkedIn où le comportement de l’oeil est très différent :

Certes, l’interface ne propose pas la même mise en page ni le même nombre de photos, mais l’on constate que le regard est avant tout attiré par l’intitulé du poste et les expériences (du moins la première).

Tout ceci est donc très intéressant, car il n’existait que peu de publications dans ce domaine. Par contre, quel dommage que nous ne disposions pas de plus de données sur la future Timeline de Facebook, sur le nouveau YouTube ou sur la façon dont les utilisateurs lisent les tweets sur l’écran d’un smartphone… Si vous avez des infos, je suis preneur.