Depuis quelques années déjà, le carrousel s’est imposé comme une excellente solution pour mettre en avant les actualités principales d’un site web. Le principe est le suivant : afficher des sujets en grand format qui « tournent » en alternance, l’un après l’autre. Une bonne manière de gérer l’espace limité de l’écran et d’en augmenter l’impact. C’est prouvé : un grand format attire davantage l’attention qu’un puzzle d’informations qui se font concurrence. Cependant, la qualité des carrousels que vous rencontrerez sur le web apparaît très variable. Certaines critiques régulièrement entendues, l’expérience de tests utilisateurs et le bon sens m’amènent à proposer 10 recommandations.

1. Le rythme

C’est la critique la plus fréquemment exprimée. « Le carrousel tourne trop vite ! ». Rarement l’inverse. Très souvent, l’utilisateur n’a même pas le temps de lire le quart du texte affiché que le diaporama l’entraîne ailleurs. Un carrousel qui tourne trop vite gêne également la lecture des autres éléments de la page. Les utilisateurs détestent le mouvement nerveux et les effets d’animation extravagants, qui sonnent trop publicitaires. Veillez à ce que le carrousel tourne calmement. 8 à 10 secondes d’affichage s’avèrent souvent nécessaires. Testez le rythme du carrousel dans plusieurs environnements, afin d’en jauger la fiabilité.

2. La transition

Dans certains cas, l’utilisateur n’aura même pas remarqué que l’affichage a changé. Un effet de transition explicite, sous la forme d’un fondu enchaîné par exemple, marquera plus clairement le mouvement de carrousel. La fluidité de la transition a de l’importance. Pour cette raison, le fondu enchaîné a ma préférence : il permet de quitter un sujet avec douceur et de glisser vers le sujet suivant. Un bref passage au noir peut également convenir. Évitez par contre les effets folkloriques, du genre « spirale » ou « bienvenue à la foire ».

3. Le contrôle utilisateur

Le mouvement imposé à l’utilisateur reste une attitude « offensive » susceptible de générer des frustrations. La seule manière de le compenser est de redonner ce contrôle à l’utilisateur sous la forme d’éléments d’interaction intuitifs et explicites.

L’utilisateur doit pouvoir :

• Stopper l’animation. Y mettre une pause.
• Revenir en arrière.
• Parcourir le diaporama à son rythme et à sa manière.

Plusieurs solutions existent…

Ci-dessous, la barre de contrôle indique clairement le nombre de sujets disponibles et propose un contrôle sur la navigation. Le bouton « pause » est particulièrement précieux.

Les petites flèches latérales restent également un moyen de contrôler le défilement.

Les petits ronds sont devenus presqu’un standard. Je dis « presque », car ils restent moins explicites. Si vous en faites usage, veillez à les rendre suffisamment présents.

Ci-dessous, la barre de contrôle proposée sur Arte.tv présente le désavantage de dépendre de la couleur de fond. Sur fond clair, les petits ronds deviennent quasi invisibles.

Lorsque l’utilisateur fait le choix d’afficher un sujet, le carrousel devrait s’arrêter. De nombreux sites web relancent l’animation après quelques secondes, à la grande frustration des utilisateurs.

Un passage de la souris sur le sujet affiché devrait en stabiliser l’affichage. La plupart du temps, un utilisateur bouge sa souris sur un élément parce qu’il s’y intéresse.

4. Le nombre de sujets en alternance

Si les sujets sont trop nombreux, la navigation devient compliquée. Les sujets en fin de liste se retrouvent très déforcés et le cycle, trop espacé. Ci-dessous, le choix se disperse et les petits ronds en viennent à mordre le contenu du carrousel.

En-dessous de trois sujets, le carrousel perd son sens. Il m’est arrivé de voir des carrousels à un seul sujet, tournant sur eux-mêmes. Absurde.

Derrière un carrousel, il y a donc une ligne éditoriale.

Dans la plupart des cas, optez pour 3 à 5 sujets.

Certaines formules d’affichage des sujets à la verticale, comme ici sur Yahoo! Health, permettent de lister une dizaine de sujets.

5. La position du carrousel dans la page

Le carrousel, comme élément de l’interface, s’est imposé au centre de l’écran, dans la partie haute.

Lorsque le carrousel est positionné sous la ligne de flottaison, ou encore dans une zone latérale, il perd énormément de son impact et provoquera une expérience utilisateur déroutante.

Le but du carrousel est de focaliser le centre de l’attention.

6. La quantité de texte

En dix secondes, vos visiteurs liront 20 à 30 mots.

Ci-dessous, la quantité de texte moyenne affichée sur le carrousel d’Arte TV, pendant environ 10 secondes. Le texte peut être lu de bout en bout par un utilisateur attentif. Mais il ne faudrait pas faire plus long.

Ci-dessous, quel est le carrousel le plus lisible ?

« Wrath of Heroes » n’accroche pas aussi bien que « Truth About Beer ».
Car trop de texte induit aussi une police de caractère trop petite.
Notez aussi la redondance : « Wrath of Heroes » apparaît deux fois, dans le texte et dans la partie graphique. Une telle redondance ne devrait pas être permise dans l’espace limité du carrousel.

7. Le visuel

Mieux vaut un seul visuel impactant qu’un effet de montage.

Privilégiez les visuels concrets qui représentent le contenu plutôt que les effets de style.

Ci-dessous, sur le site officiel de la présidence française, le choix d’un visuel unique nous semble plus porteur que la tentation de réaliser un patchwork. Une mise en page en puzzle va à contre-sens de l’intérêt du carrousel qui consiste précisément à exploiter un large format.

8. La clarté de l’interaction proposée

En dehors de la possibilité d’interagir avec la navigation au sein du carrousel (voir point 3 ci-dessus), l’utilisateur peut généralement cliquer dans la zone de contenu pour accéder au détail de l’information.

Nous recommandons :

• Une seule zone de clic de préférence
• Visuellement présente (suffisamment grande et contrastée)
• Offrant une interaction explicite (par exemple un bouton, une flèche,…)
• Positionnée de préférence en bas à droite

Ci-dessous, le bouton « Play video » répond aux bonnes pratiques : contrasté, bien positionné dans le flux de lecture, libellé explicitement, invitant au clic.

Ci-dessous, le carrousel d’Umicore ne laisse pas apparaître la possibilité d’une interaction. Peu d’utilisateurs seront enclins à cliquer. Ce type de présentation avec du texte fondu dans le visuel et aucune zone de clic explicite sera reçu comme un placard publicitaire, même si le contenu mène en réalité vers de l’information.

9. La cohérence

D’un sujet à l’autre, mais aussi d’un jour ou d’une semaine à l’autre, il importe de respecter une cohérence pour créer des repères et la sensation d’un environnement éditorial maîtrisé.

La cohérence se vérifie à différents niveaux :

• Cohérence graphique (typographie, coloris, traitement des photos,…)
• Cohérence fonctionnelle (zones d’interaction, zones de clic,…)
• Cohérence éditoriale (nature des contenus abordés, ton utilisé,…)

Ci-dessous, dans son carrousel, Arte TV fait varier la position de son descriptif texte, mais la typographie ainsi que le volume de texte restent cohérents. Une bonne manière de créer un fil rouge tout en s’accordant des variations visuelles qui relancent l’attention.

10. L’accessibilité de la technologie adoptée

Plusieurs moyens existent de créer un carrousel : Flash, CSS, Javascript,… Le choix de la technologie influencera plusieurs facteurs :

• Accessibilité du contenu par les environnements les plus variés (mon iPad ne supporte pas Flash, par exemple)
• Indexation par les moteurs de recherche (de nombreux carrousels présentent le désavantage d’intégrer du texte non reconnu comme tel, non indexable)
• Facilité d’édition par le client (un carrousel en Flash avec des transitions méga fluides, c’est très bien, mais si les contributeurs de contenu sont incapables de l’alimenter, on perd en réactivité)

Pour l’entreprise qui ne dispose pas d’un graphiste sous la main, certaines solutions plus sobres ou plus formatées peuvent s’avérer intéressantes. Ci-dessous, Google Analytics propose un carrousel quasi full text.

Tenez, par rapport à ce dernier point (les solutions techniques), je suis preneur de vos avis et réactions !

Pour en savoir plus (en Anglais) :

• Carousels: 83 examples

• Carousel Usability

• 5 Big Usability Mistakes Designers Make on Carousels

Et si vous désirez établir une ligne éditoriale pour alimenter votre carrousel en contenus efficaces, contactez-moi !

Jean-François Nogier, épaulé par Thierry Bouillot et Jules Leclerc, signent une cinquième édition de l’ouvrage « Ergonomie des interfaces » chez notre éditeur conjoint, les éditions DUNOD.

J’ai lu cette nouvelle édition, et je la conseille pour les raisons suivantes :

• Elle est enrichie d’exemples actuels, notamment issus de l’évolution des téléphones mobiles et des tablettes numériques, qui font naître de nouvelles interactions.
• Elle est très didactique, concise, centrée sur l’essentiel, sans la boulimie à laquelle nous habituent même certains ergonomes.
• La table des matières est pragmatique et didactique : que des verbes d’action. Une belle manière d’appliquer au livre l’approche orientée utilisateur chère à notre métier.

Ci-dessous, une des contraintes ergonomiques nouvelles qui apparaissent avec les interfaces tactiles, c’est la gêne occasionnée par la présence des doigts sur la surface. Dans certains cas, la main occulte, au mauvais moment, une partie critique de l’écran. Par l’exemple si vous désirez faire apparaître une infobulle ou tout autre complément d’information lors d’un clic sur un objet de l’interface, il est important de positionner cette infobulle au-dessus et non en-dessous de l’objet. Autrement, le pouce ou l’index de l’utilisateur masquera l’effet visuel.

L’écriture a également toute sa place dans l’ergonomie d’un site web, d’un bouton, d’un menu ou d’une application. Ci-dessous, un tableau des différentes règles de construction des abréviations. Histoire d’assurer la concision dans la cohérence. Je trouvais la démarche intéressante.

L’ergonome averti réagira à certains passages délicats, comme la fameuse règle des trois clics, autant véhiculée que contestée, ou le parcours de l’œil en Z, très schématique face à la variabilité des comportements. Mais Jean-François Nogier y ajoute immédiatement d’intéressants bémols et reste didactique de bout en bout, quitte à gommer certaines nuances à des fins de clarté pédagogique.

Pour plus détails :

Ergonomie des interfaces
Guide pratique pour la conception des applications web, logicielles, mobiles et tactiles
Jean-François Nogier, Thierry Bouillot, Jules Leclerc
5e édition, octobre 2011, DUNOD, Paris
Broché: 320 pages
ISBN-10: 2100557920
ISBN-13: 978-2100557929

En vente chez Amazon

Le livre, présenté par ses auteurs

Dans la foulée de notre récente publication "30 outils pour vos contenus web", Isabelle Canivet et moi-même proposons une toute nouvelle formation. J'ai le plaisir de vous en dévoiler le programme.

En deux jours, vous vivrez 10 mises en situation concrètes pour assimiler les meilleures techniques au service du contenu web :

1. Identifiez les forces et faiblesses de votre site par un focus groupe ludique
Idéal pour briser la glace et réveiller l'esprit critique, notre focus groupe sera rythmé par une succession de techniques ludiques que vous pourrez appliquer ensuite sur vos propres projets : le jeu de l'accusation et de la défense, le jeu de l'argent, le jeu des autocollants et le jeu du portrait chinois.

2. Développez votre stratégie "mots clés" à l'aide d'outils adaptés
Les mots clés que vous allez utiliser contribueront à votre visibilité sur Internet au travers des moteurs de recherche. Comment définir votre territoire sémantique ? Quels sont les mots clés à fort potentiel de trafic ? Où se situe la concurrence ? Quelles sont les tendances de recherche ? Nous vous proposons une méthodologie pour définir votre stratégie "mots clés".

3. Détectez les problèmes d'interface grâce au test utilisateur
Vous aurez l'occasion de vivre, sous forme de jeu de rôles, un véritable test utilisateur. La salle sera équipée d'un matériel d'enregistrement des mouvements de souris ainsi que des commentaires à voix haute des participants. Par la pratique, nous identifierons les précautions à prendre lors de la préparation, de l'animation et de l'interprétation d'un test utilisateur.

4. Validez votre architecture de contenu grâce au tri de cartes
Le test du tri de cartes permet de construire une architecture de contenu intuitive pour les utilisateurs. Nous le pratiquerons en mode collectif et en mode individuel. Quelques trucs et astuces seront partagés, qui vous permettront de tirer un maximum de profit de la séance. Les meilleurs logiciels de tri de cartes vous seront présentés.

5. Distribuez votre budget et vos ressources au départ de l'arborescence
Nous enrichirons l'arborescence de votre site web en y greffant des informations fondamentales à la gestion réaliste du projet : Qui est responsable de chaque rubrique ? De quel budget-temps dispose-t-on pour alimenter chacune d'elle ? A quel rythme ? Quels sont les mots clés à développer à chaque étage ? Vous ne verrez plus votre arborescence avec les mêmes yeux.

6. Dessinez vos maquettes fonctionnelles grâce à un outil en ligne
De très bons outils existent en ligne, qui vous permettent de dessiner vos pages web. Une quantité impressionnante d'éléments d'interface peuvent être glissés et déposés : fil d'Ariane, menus, graphiques, vidéos, texte "lorem ipsum", etc. Cet exercice sera l'occasion de discuter toute une série de notions d'ergonomie web.

7. Domptez votre CMS face aux exigences de l'ergonomie et du référencement
Les outils de gestion de contenu sont parfois de véritables usines à gaz du point de vue de la propreté du code source et de leur impact sur le référencement. L'ergonomie des interfaces d'administration contribue grandement au dynamisme éditorial. Nous jetterons un regard impitoyable sur les CMS et identifierons les points de blocage.

8. Soulevez le capot du moteur avec la boîte à outils du référenceur
Découvrez les Google Webmaster Tools, votre salle de réunion avec Google, mais également de nombreux autres outils destinés à mesurer et améliorer votre référencement. Auditez vos balises HTML. Détectez les freins au référencement et le contenu dupliqué. Auditez vos liens. De nombreux outils existent dans le domaine du SEO, gratuits ou payants. Nous dévoilerons les meilleurs d'entre eux.

9. Plongez dans les profondeurs Google Analytics
Ces derniers mois, Google Analytics s'est considérablement enrichi. Ne restez pas à la surface, vous n'y verrez pas grand chose. Apprenez à pêcher, avec un harpon aiguisé, dans les profondeurs de vos statistiques. Vous vérifierez le succès de vos campagnes, la qualité de vos visiteurs, les points de fuite du trafic, et plein d'autres choses encore.

10. Testez l'impact de micro-changements à l'aide de l'AB/testing
Très peu d'entreprises effectuent du AB/Testing, c'est-à-dire des comparaisons de performance entre différentes variantes d'interfaces. Pourtant, rien n'est plus concret et objectif que ce type de test. Changez la position ou la couleur d'un bouton, faites varier le libellé, et mesurez les variations du taux de clic en fonction des différents paramètres.

Détails et inscriptions

J’aime l’ergonomie inventive. Les petits détails qui augmentent le confort sans perturber les habitudes. La barre des tâches de Windows s’est ainsi améliorée… il n’est plus nécessaire de cliquer sur l’icône de l’application concernée pour en observer le niveau de téléchargement. Désormais, la jauge apparaît directement dans la barre des tâches (voir les 36% ci-dessous).

Cette amélioration nous ramène à deux principes d’ergonomie décrits par Scapin et Bastien : les actions minimales (ne pas devoir cliquer) et le feedback immédiat (l’état du système est visible en temps réel).

Autre amélioration : l’outil de capture d’écran. Bien sûr, il existait déjà des petits logiciels de capture efficaces, mais à présent, cet outil fait partie intégrante de Windows 7. Et je m’en donne à cœur joie, moi qui aime épingler des morceaux d’interfaces à travers mes audits de sites web que je veux très visuels.

P.S. Oui, je sais, vous utilisez un Mac et ça fait 10 ans que vous profitez de tout ça ;-)

Ah, ces bons vieux boîtiers, à Bruxelles ! Ils permettaient aux piétons d’activer très aisément le feu rouge afin de traverser la route.

Parmi les qualités ergonomiques de cet objet :

1. Un grand bouton pressoir, au caractère clairement activable.
2. Une grande icône, lisible et intuitive, représentant le passage piéton.
3. Une rassurante sensation de “clic” au moment de la pression.
4. Un code lumière rouge ou blanc, en fonction du statut “stop” ou “go”.
5. Un bip sonore, indiquant le moment autorisé pour la traversée.
6. Une accélération du rythme de ce bip sonore pour annoncer le passage au rouge.

Malheureusement, ces anciens boîtiers sont maintenant remplacé par de nouveaux objets, peu fonctionnels :

1. Un effet d’arrondi, très “design”, mais qui rend moins évidente la zone de pression.
2. Une icône de main, qui pourrait vouloir dire “stop” ou “arrêtez-vous”, plutôt que “poussez”.
3. Une surface sensible qui ne donne plus la sensation du clic.
4. Un message bilingue Néerlandais-Français : “Oproep opgenomen – Appel enregistré”… que les touristes japonais interpréteront comment ?
5. Un éclairage insuffisant pour compenser la luminosité extérieure en journée.

Les principes d’ergonomie sous-jacents à ces appareils sont comparables à ceux d’une page web :

1. La clarté du guidage (A quoi sert ce boîtier ?)
2. Le contrôle utilisateur (Est-ce que j’ai bien poussé sur le bouton ?)
3. L’accessibilité (le son pour les aveugles ou mal voyants)
4. Le respect des codes et des conventions (par exemple l’icône de la main tendue).
5. L’adaptation au contexte d’utilisation (par exemple la luminosité, en pleine journée).

Vous retrouverez ces bons principes formalisés par Scapin et Bastien, par exemple.

Avec les sites web, la tentation est fréquente d'esthétiser une interface... mais attention aux conséquences fonctionnelles !

Cette photo-ci, je viens de la prendre en Turquie.
Vous avez remarqué le petit “plus” ?
Belle innovation ergonomique, non ?

Et oui, les secondes qui restent à attendre avant le passage au feu vert sont décomptées. Ce qui rappelle le premier des principes heuristiques de Jakob Nielsen : indiquer le statut en cours ("visibility of system status").

De cette manière, l’utilisateur (de la route, dans ce cas-ci) gagne en contrôle, en confort, et peut par exemple décider d’effectuer une action supplémentaire pour meubler l’attente (jeter un coup d’oeil sur la carte, embrasser sa femme en fermant les yeux) sans se sentir obligé de rester le nez collé à un feu rouge susceptible de virer au vert à tout moment. Et en Turquie, si vous ne démarrez pas tout de suite, ça claxonne, je vous assure !

Dans un site web, l’équivalent de cette fonctionnalité pourrait être la barre de chargement, par exemple, qui, elle aussi, indique l’état du système et donne une idée du temps d’attente.

Bonnes vacances !

Avez-vous remarqué le petit changement du jour ?

Prise d'écran : le 29 juin 2011 à 9h20

La navigation en haut de page est désormais sur fond sombre.

Google reste fidèle à sa stratégie d'évolution par micro-changement.

Depuis 10 ans, le visage de la pieuvre n'a pas beaucoup changé, même si tant de choses bougent en arrière-plan.

Prise d'écran : google.com - 1999

Ce fond noir détache davantage la navigation du centre de la page. En est-elle plus ou moins visible ? La réponse n'est pas évidente et mériterait un test.

Notez que Google revient parfois en arrière : ma prédiction de juin 2010, par exemple, était bonne !

Au départ, les options de navigation alternatives à la recherche universelle (Google Images, Google Actualités,...) voisinaient de près le champ de recherche par mots clés. La première décision que Google a prise était de les décentrer. Ce qui permettait d'éviter le "bruit" autour de la fonction centrale de recherche.

Un petit trait de surlignement rouge a été rajouté ensuite pour identifier la rubrique active (il est toujours présent dans la version d'aujourd'hui).

Par ces petits changements peu perturbateurs, Google introduit tout doucement un menu de navigation digne de ce nom, qui n'existait pas aux débuts.

Je peux fort bien imaginer que tout ceci évolue vers davantage d'options périphériques. Peut-être même plus commerciales. Mais Google a l'intelligence de procéder par tout petits pas, et d'éviter ainsi toute perturbation auprès de ses très nombreux utilisateurs.

A lire aussi :

• Google : pour le meilleur et pour le pire
• Sur ce détail, je pense que Google reviendra en arrière
• Cela n'a l'air de rien, mais...

Certains vantent l'ergonomie du site web de Ryanair, comme Gerry Mc Govern, il y a quelques années. Et, c'est vrai, globalement, le site web de la compagnie irlandaise, très fonctionnel, génère une expérience utilisateur positive.

Cependant, je viens de m'arracher la tête à trouver le moyen de décocher l'option "assurance annulation", lors d'une réservation.

Après environ 10 minutes, des retours en arrière, quelques jurons, je suis enfin tombé sur l'option "pas d'assurance voyage", en plein milieu d'une longue liste de pays, sous le libellé "Choisissez votre pays de résidence" !

Le moins que l'on puisse dire, c'est que Ryanair ne facilite pas le "opt-out". Et, à ce niveau de la compétition, je ne crois plus à la maladresse.

Plus loin, après avoir donc décoché les frais d'assurance, une fenêtre surgit, qui n'a plus rien de la discrétion du menu déroulant : le site web me rappelle, en bonne mère inquiète, l'énorme risque que je prends à me priver d'une assurance.

Comme quoi, l'ergonomie, on s'en préoccupe quand ça nous arrange.

A lire aussi :

• Ces textes destinés à ne pas être lus
• Sites web de compagnies aériennes : face à face entre Brussels Airlines et Ryanair

La page web est amenée à marier le texte et la vidéo.

Ce mariage est nouveau. Tantôt harmonieux, tantôt bancal.

Ci-dessous, ARTE positionne une vidéo fort bas dans la page (sous la ligne de flottaison, en réalité). Le texte domine.

Source : ARTE

Ci-dessous, la BBC fait l'inverse. La vidéo vient en amont. Le texte apparaît plus bas. Un espace entre les deux provoque une sorte de divorce.

Source : BBC

RTL-TVI a choisi d'intégrer le texte à la vidéo. Un mariage plus étroit, qui implique un descriptif texte concis.

Source : RTL-TVI

TF1, également, opte pour un court descriptif texte, sous la vidéo.

Source : TF1

TV LUX place le texte à droite de la vidéo. Avec le risque que les lecteurs/auditeurs perçoivent ces éléments comme dissociés. Le titre échoue à chapeauter l'ensemble. La présence d'une photo fixe ajoute à la confusion.

Source : TVLux

Le webzine Interstices positionne également le texte à droite de la vidéo. Mais ici, cela fonctionne mieux. Grâce à certains codes graphiques (petite flèche, effet de pli), l'encadré texte est clairement rattaché à la vidéo.

Source : Interstices, site de vulgarisation scientifique.

En conclusion : le mariage texte-vidéo ne fait l'objet d'aucune standardisation pour le moment.

Cette standardisation est-elle souhaitable ?

Pas obligatoirement, mais la situation actuelle présente le risque, à mon avis, de compliquer la grille de lecture. Vidéo et web se concurrencent, à certains endroits, plutôt que de s'épouser.

J'encourage, en tout cas, les télévisions à tester objectivement l'efficacité de différentes variantes d'intégration du texte et de la vidéo.

A cette problématique ergonomique, s'ajoute la problématique sectorielle et juridique. Les télévisions produisent du texte. La presse écrite produit des vidéos. Des activités qui, autrefois, étaient clairement dissociées, en termes d'entreprise, mais aussi en termes de subsides et de cadre juridique. Le mariage de la vidéo et du web se produit sur un terrain miné, en tout cas en Belgique.

Sans oublier la dimension référencement. Car, sur Internet, le texte reste nécessaire à la vidéo, non seulement pour la mettre en scène, mais aussi pour l'indexer.

A lire aussi :

• Nouveau site de la RTBF : 20 arrêts sur image
• Menus déroulants enrichis sur ARTE
• Comment valoriser une vidéo en ligne : poster gratuit

NDLR: Notez que, dans ce billet, je me suis permis d'épingler des pratiques éditoriales qui ne sont pas forcément représentatives d'une stratégie globale de la part des médias en question. Les chaînes de télévision varient souvent leurs mises en page. Ce qui ne fait qu'augmenter, d'ailleurs, la variabilité des situations de lecture.

Pas mal de sites web continuent de faire cette erreur : un moteur de recherche interne au champ trop étroit. Résultat : moins de présence, moins de confort, et un plus grand risque d'erreur à l'encodage.

Mais la société Carmeuse bat tous les records :

Source : www.carmeuse.be

N'essayez pas d'y encoder "anticonstitutionnellement" ;-)

Je rebondis sur un dossier sur l'ergonomie des sites mobiles, publié aujourd'hui par le Journal du Net. Le mini-dossier en question rassemble quelques conseils et exemples pertinents. J'aime, par exemple, la notion d'accélérateurs d'interaction.

Certaines fonctionnalités, réputées pour être efficaces dans un site web classique, perdent beaucoup d'efficacité dans l'espace exigu d'un smartphone ou blackberry. Elles peuvent mêmes provoquer des dysfonctionnements.

Le fil d'Ariane en est un bel exemple. Autant cet élément d'ergonomie paraît souhaitable dans un site profond, en mode consommation Internet classique, autant il pourra venir encombrer une interface aux dimensions limitées.

Source : www.wallonie.be

Les menus déroulants, surtout lorsqu'ils comportent plusieurs niveaux, risquent d'exploser une interface trop mince. Les mobinautes pourraient s'arracher les cheveux à tenter de manipuler ces éléments d'interactions subtils à l'aide de leurs gros doigts sur un petit écran. Déjà dans un environnement plus confortable, certains se plaignent des dérapages subis lors de l'utilisation des menus dynamiques, préférant des solutions statiques.

Source : www.porsche.com

Les encadrés contextuels, tels que les numéros de téléphone utiles, fournis ici par le Ministère des Affaires étrangères, bien que fort utiles dans le scénario d'une consultation confortable, risquent de compliquer un affichage sur mobile. Le colonage, de manière générale, pose question.

Source : www.diplomatie.gouv.fr

Il existe certainement d'autres exemples de fonctionnalités intéressantes en mode web classique qui s'exportent mal vers l'Internet mobile. Faites-nous profiter de vos réflexions et expériences en commentaire de ce billet !

Sur le même sujet :

• Quelle est la taille d'écran idéale ?
• N'abusez pas des menus déroulants !
• Menus ciblés et navigation rétractile