Objectifs du responsive webdesign

Pour commencer, rien de tel qu'une démonstration. Voici comment le site ART=WORK se transforme en fonction de la taille du navigateur grâce au responsive webdesign :

Entrons dans le vif du sujet. Chaque appareil est utilisé de manière différente : smartphone dans les transports en rentrant du travail, ordinateur au bureau durant la journée, tablette sur son canapé, e-reader dans son lit… L’usage qui est fait d’un site Web peut donc varier selon le terminal utilisé. En effet l’utilisateur n’aura pas le même temps à consacrer au site, les mêmes priorités ou les mêmes besoins. À chaque appareil correspond aussi des contraintes d’utilisabilité : tactile, débit Internet lent, écran sans couleur etc. Les écrans sont certainement la variante majeure : différents par leur taille, leur densité ou le rapport largeur/longueur : entre 2,8 pouces et 34 pouces, le rendu d’un site n’a rien a voir.

Les sites Web sont aujourd'hui consultés sur une multitude d'appareils ayant des résolutions différentes

Ces dizaines de contextes différents constituent un défi pour l’ergonomie : comment proposer une expérience utilisateur satisfaisante en fonction des particularités des terminaux utilisés ? Comment un internaute peut-il consulter tout aussi confortablement un site sur son ordinateur que sur son smartphone ?

Proposer une seule version du site Web censée s’adapter à tous ces terminaux est utopique. Cela revient à faire des compromis qui ne seront pas satisfaisants pour l’utilisateur. Il est en effet difficile d’envisager une interface Web unique confortable à la fois sur les petits et grands écrans : soit le site sera étriqué sur grand écran avec des boutons surdimensionnés, soit il faudra sans cesse zoomer dans la page pour pouvoir lire le contenu sur un petit écran.

Le site ifttt n'est pas adaptable. Il semble que le gabarit soit prévu pour l'ordinateur comme le mobile. Or l'utilisabilité n'est optimale sur aucun de ces deux terminaux : tout semble grand sur ordinateur et certains éléments sont trop petits sur mobile.

Le responsive design permet de répondre à cette problématique. Plutôt que de concevoir un gabarit unique faisant le grand écart pour convenir aux différents contextes, le responsive design permet de construire un site caméléon qui change de forme selon le contexte, selon la taille de l’écran.

Le site City Crawlers est un exemple de responsive webdesign : l'interface s'adapte automatiquement à la résolution de l'appareil

La méthode principalement utilisée est de modifier la mise en forme CSS de la page en fonction de la taille du navigateur. Le plus simple pour comprendre ce fonctionnement est d’ouvrir un site comme 3200 tigres sur un ordinateur et de réduire progressivement la taille de la fenêtre du navigateur.

Le site du WWF 3200 tigres s'adapte lorsqu'on modifie la taille du navigateur

Le site se métamorphose pour s’adapter à la taille d’affichage disponible. On voit les différents paliers de mise en forme : ordinateur, tablette orientée en portrait et mobile. Le contenu de la page reste identique mais la disposition est modifiée pour prendre en compte la spécificité de chaque terminal.

En fonction de la taille de l’écran, certaines images sont recadrée, redimensionnées, la taille des titres change et certains contenus disparaissent même (c’est le cas de la photo du tigre sur mobile).

Comme on peut le voir cette technique est très puissante et présente beaucoup d’avantages. Néanmoins, si le résultat semble couler de source, le choix du responsive design implique des conséquences ergonomiques et techniques qu’il faut évaluer avant de se lancer. En fonction du projet il est important d’envisager une autre option : des versions séparées.

Responsive ou versions séparées ?

Si on met de coté toutes contraintes de coûts et délais, l’idéal pour l’utilisateur serait une expérience sur mesure pour chaque terminal. Cela impose de développer une palette de différentes versions de sites ou d’applications prenant finement en compte les contraintes et atouts techniques ainsi que le contexte d’usage de chaque appareil.

Netflix a fait ce choix : une version mobile, tv et tablette

Il faut bien avoir à l’esprit qu’avec le responsive design, l’utilisateur sur mobile consulte exactement le même site que sur un PC, c’est l’agencement de la page qui change. Cela restreint donc les marges de manœuvre pour proposer une expérience utilisateur différente, avec différentes fonctionnalités selon l’appareil. Avec le responsive les fonctionnalités restent globalement similaires.

Si l’utilisation du service varie selon le terminal – usages différents sur mobile que sur ordinateur par exemple (géolocalisation, utilisation de l’appareil photo…) – on préfèrera créer des versions distinctes qui répondent au mieux à l’utilisateur. Voire une ou plusieurs applications qui optimiseront encore l’expérience utilisateur (utilisation offline, animations, gestuelles, possibilités hardware…).

C’est le choix qu’a fait Google en préférant proposer une version distincte sur mobile et tablette plutôt qu’une adaptation en responsive design de la version classique.

Google : version classique et mobile

On voit que sur mobile l’emphase est mise sur la recherche locale (restaurants, distributeurs…) ce qui n’est pas le cas de la version classique. La problématique d’usage a été prise en compte : éviter la saisie clavier en mobilité pour trouver un distributeur. Sur la version pour tablettes de Google le bouton de recherche est plus marqué, mieux adapté au tactile.

Google : version tablette

Au-delà de la spécificité de la géolocalisation, les sites qui proposent une interaction riche se prêtent difficilement au responsive. C’est le cas pour les longs formulaires à remplir, les multi-sélections, les processus par étapes. Il est ainsi préférable d’éclater certains écrans optimisés pour l’ordinateur sur plusieurs pages pour le mobile. De même, alors que sur ordinateur une bulle permet d’afficher un calendrier, sur mobile on préfèrera une page entière de séléction. Ici ce sont donc les versions séparées qui proposeront la meilleure expérience utilisateur.

Le site Kayak a aussi créé deux expériences distinctes sur ordinateur et mobile. La sélection d’un billet d’avion sur mobile est une manipulation avancée qui impose une conception sur mesure plutôt qu’une adaptation de la version classique. Ici aussi il est possible pour l’utilisateur d’utiliser la fonction de localisation du téléphone pour éviter de saisir le nom de l’aéroport proche. Cependant, Kayak n’a visiblement pas créé de version du site pour tablette. L’utilisation du site classique en orientation portrait n’est pas idéale, mais étant donné qu’une application iPad existe, il s’agit sûrement d’un choix stratégique.

La version mobile du site de Kayak offre une expérience optimisée pour le tactile

Réaliser des versions séparées ne doit pas pour autant empêcher des ajustements fins avec un gabarit en partie responsive : la version mobile s’adapte alors aux différents téléphones selon leur résolution iPhone, Samsung, BlackBerry… Il est même important de détécter l’appareil de l’utilisateur à l’arrivée sur le site. En effet si quelqu’un envoie le lien d’un site consulté en version mobile l’affichage sera assez surprenant s’il est ouvert sur un ordinateur de bureau.

Développer un écosystème de diverses versions de sites ou applications est lourd à mettre en œuvre et toutes les sociétés ne peuvent pas se le permettre. Il faut aussi garder à l’esprit qu’avec des versions séparées, toutes modifications sur un support demandera un effort de réplication sur les autres. Le coût de maintenance est donc à prendre en compte.

Avec le responsive, la même base HTML permet de couvrir tous les périphériques Web, c’est le CSS et Javascript qui permettent l’adaptation. Cela permet de réduire considérablement le temps de maintenance, d'ajustement ou d’écriture du contenu. Attention tout de même, cette solution qui semble simple peut être techniquement complexe à mettre en œuvre. Les codes HTML et CSS sont en effet plus poussés que pour une version unique et la comptabilité avec les différents navigateurs est un point sensible. Il faut donc compter plus de temps d’intégration que pour un site classique (parfois le double).

Pour choisir entre le responsive ou les versions séparées, tout dépend donc du nombre de terminaux visés, du type de contenu et d’interaction que le site propose (donc de l’effort de maintenance) ainsi que de la compétence HTML/CSS des équipes. Une analyse fine doit être faite au départ du projet.

Avec sa nouvelle version 100% responsive, le Boston Globe propose un site unique consultable sur tout support.

Si les sites fortement interactifs se prêtent à des versions séparées, les sites informationnels et plus statiques seront des candidats idéals au responsive design. Ils proposent principalement un contenu éditorial à consulter et lire et quelques formulaires simples. C’est le cas du Boston Globe qui a fait un travail très fin de responsive design.

Recommandations

• Construire des versions séparées si les interactions sur le site sont riches ou si le besoin est fortement contextuel en version mobile
• Attention à ne pas oublier les tablettes : soit en rendant compatible la version classique soit en réalisant une version sur mesure
• Préférer le responsive design pour le site majoritairement informatif

Constituer des familles de résolutions

Avant de se lancer dans la conception d’un site responsive, il faut d’abord identifier les familles de périphériques visées et les tailles d’écrans qui vont avec. Dans cette première phase on regroupe les appareils par taille d’écran pour créer les gabarits de pages pour chacun d’eux. Selon les projets Web il est possible de cibler une grande variété d’appareils et donc de résolutions : ordinateur de bureau, téléviseur, netbook, smartphone, tablettes, e-readers.

Généralement on va maquetter 3 types de gabarits : ordinateur (environ de 900 à 1500 pixels), tablette orientée portrait (de 900px à 600px) et smartphone (en dessous de 600px). Attention aux nouveaux écrans qui proposent une haute définition, comme l’iPhone 4 ou le Nouvel iPad (écran Retina). Ceux-ci affichent beaucoup plus de pixels pour la même taille d’écran. Alors qu’un smartphone « classique » a une résolution de 320 pixels de large en portrait, l’iPhone 4 en affiche lui 640. Les CSS ou javascripts doivent donc prendre en compte ce cas spécifique.

Morten Hjerde a identifié par statistique ces familles d’écrans :

Bien sûr ces regroupements sont à définir en fonction de l’usage proposé par le site, mais ce graphique représente bien la variété des résolutions.

Il est possible de pousser assez loin l’adaptation à l’intérieur même de ces familles. Cela demandera encore une conception plus fine, mais le diable est dans les détails. Il faut garder à l’esprit qu’il existe une grande variété de tailles d’écrans au sein de la famille des Smartphones ou des tablettes. Il serait dommage que la page soit parfaitement conçue pour s’afficher sur un iPhone mais que son rendu soit bancal sur un Samsung.

Le site Food Sense propose des variations très fines et un résultat final de grande qualité :

Food Sense une belle réalisation en responsive Webdesign

Recommandations

• Identifier des familles de résolutions selon les utilisateurs et contextes visés
• Prévoir des adaptations fines au sein même des familles de résolutions

Concevoir les gabarits

Une fois les groupes d’appareils identifiés, il faut prévoir comment les pages s’agenceront pour chacun d’eux.

Premier conseil : débuter par la version mobile. En se placant dans un premier lieu dans ce contexte, la conception se focalisera sur l'ésentiel car il n'y a pas suffisement de place pour le superflux. Les versions plus spacieuses bénéficieront des choix opérées pour la version mobile. Cette philosophie "Mobile First" a été proposée en 2009 par LukeW, expert étasunien en conception d'interface.

Il est impératif de concevoir le site avec une grille et des blocs. Cette conception modulaire qui peut s’apparenter à du Lego permet de recomposer la page selon la largeur de l’écran. Le maquettage papier de l’interface ce prête bien à cette exercice : on manipule librement les contenus pour les repositionner ou les laisser de coté. Consultez notre présentation de la démarche de conception d'interface à ce propos.

Les blocs doivent être cohérents en terme de contenu. Cela évitera d’éclater l’information en passant d’un appareil à un autre. Une fois constitués, ces blocs (header, navigation, contenu, fonctions secondaires, barre sociale…) seront déplacés, allégés ou même supprimés selon la résolution.

Voyez comment le site Think Vitamin se recompose entre la version classique et mobile :

La barre d’inscription à la newsletter et la colonne de droite (tags, réseaux sociaux, publicité et recherche) disparaissent, le header se compacte. Néanmoins, les images sont comprimées au lieu d’être redimensionnées, le rendu n’est donc pas très heureux.

La hiérarchie de l’information joue ici un rôle important. Il est nécessaire d’identifier les contenus qui seront prioritaires en fonction des appareils : la barre latérale a-t-elle toujours un rôle sur mobile ? Le header peut-il être minimisé, voire disparaître ? Faut-il mieux arriver sur la page par le contenu et proposer une navigation secondaire en fin de page ? Il ne s’agit pas simplement d’empiler ces boîtes les unes au dessus des autres dans une colonne unique pour les résolutions mobiles, mais d’évaluer la pertinence du contenu en fonction du contexte.

Il peut paraître difficile de faire disparaître des contenus. Pourtant, sur mobile, les utilisateurs n’auront pas le même comportement que sur un ordinateur. Il faut donc se placer dans ce contexte et ne pas vouloir absolument faire entrer trop de choses à l’écran. Par exemple pour le mobile il faut minimiser ou supprimer les blocs purement illustratifs : ils monopolisent l’espace et alourdiront le chargement de la page. Dans cette logique, il faut simplifier la navigation, alléger le contenu, minimiser les images. Le e-reader avec affichage en niveaux de gris doit aussi offrir une restitution convenable du site. Le responsive design doit donc être appliqué dans cette idée.

Voici comment le site information Architects a modifié sa navigation en dessous de 600px :

Sur mobile, la navigation sous forme de menu déroulant exploite la fonctionnalité de sélection de l’appareil, ce qui facilite la sélection.

Une autre composante est à prendre en compte pour les résolutions tablette et mobile : le tactile. Pour ces résolutions (portrait et paysage) le boutons, liens etc. doivent être adaptés en taille et aspect au monde du tactile. L’interface doit inciter au touché. Je vous renvoie vers notre article sur la conception et ergonomie de l’interface pour iPad à propos de ce sujet.

Clean Air Works adapte son menu de navigation sous forme de boutons adaptés au tactile (on regrettera tout de même ce contraste blanc/jaune peu lisible) :

Recommandations

• Commencer par la version mobile pour se concentrer sur l'essentiel
• Concevoir les pages avec une grille et des blocs modulables
• Supprimer des blocs selon l’appareil et le contexte induit
• Éviter d’alourdir les pages avec des images pour les résolutions mobiles
• Reconsidérer la hiérarchisation de l’information selon les gabarits
• Adapter les patterns d’interface pour les appareils (mobile/tactile)

Considérations techniques

Même si notre angle de vue est avant tout ergonomique, la technique joue un rôle important dans le responsive design comme pour tout projet informatique.

Le point le plus sensible est souvent celui des images. Il est possible de redimensionner,  recadrer ou faire disparaître certaines images en fonctions de la taille du navigateur. Certains scripts (Javascript / PHP) permettent même de charger une image plus ou moins grande en fonction du périphérique utilisé : cela réduit le temps de chargement sur mobile et donc améliore l’expérience utilisateur. Cette technique est cruciale pour les sites à fort contenu visuel. Malgré tout, la question de l’adaptation des images reste un point technique délicat.

Les éléments interactifs ou animés sont ceux qui prendront le plus de temps à s'adapter aux petites résolutions (Javascript) : carrousels, diaporamas, feuilletage tactile… Dans certains cas il sera préférable de les faire disparaître sur mobile.

Pour trouver davantage de précisions sur les aspects techniques du responsive, nous vous invitons à consulter les liens proposés en fin d’article.

Conclusion

Le responsive webdesign est une véritable opportunité pour proposer aux internautes une expérience utilisateur adaptée à leur situation d’usage. Avant de s’y lancer il est important de jauger si le site s’y prête et de prendre en compte la charge supplémentaire d’intégration. Pour les concepteurs le responsive design est une nouvelle opportunité de création et un nouveau chalenge ergonomique.

Nous aborderons le responsive design lors de notre future formation sur l'ergonomie pour les interfaces mobiles et tactiles. N'hésitez pas à laisser votre e-mail pour être tenu informé !

Note : Vous le constatez sûrement, le gabarit de notre blog n’est pas responsive. Il a même tendance à subir quelques altérations sur mobile… Les cordonniers sont toujours les plus mal chaussés. Nous avons comme objectif de refondre le blog en responsive design, mais nos missions pour nos clients passent avant… à suivre !

Ressources

L’ouvrage de référence sur la question (disponible en français) :
Responsive Web design – Ethan Marcotte

La conception en grille :
http://960.gs/
Article de Smashing Magazine

50 exemples de sites responsive :
Article de Design Modo

Liste d’un grand nombre de ressources et outils :
Article de Smashing Magazine

Image fluide ou responsive :
http://unstoppablerobotninja.com/entry/fluid-images/
http://blog.cloudfour.com/responsive-imgs/

Chargement de différentes taille d’images selon la résolution :
http://filamentgroup.com/examples/responsive-images/
http://adaptive-images.com/

Conversion des unités de taille de texte (em, px) :
http://pxtoem.com/
 

Twitter aujourd’hui

Impossible de passer à côté, Twitter tout le monde en parle ! La presse plébiscite ce média social et les entreprises s’en emparent également progressivement.

Twitter est attirant car il donne accès à de l’information « libre », non formatée. Sa capacité à annoncer en avant-première la mort de Ben Laden, son implication dans les révolutions arabes, sa possibilité, lors de l’affaire DSK, de rendre compte de ce qui se passe dans un tribunal où les caméras ne sont pas invitées sont autant de raison qui font que ce média social fait parler de lui et éveille la curiosité des non initiés.

Trois types d’activités sont possibles sur Twitter : Rédaction, Diffusion et Consultation de l’information. « Twitter est un forum public de partage de contenus », tranche Jean-Claude Domenget, auteur d’une étude sur les usages de Twitter chez les pros du web.

Jean-Claude Domenget, enseignant-chercheur en sciences de l’information et de la communication à l’IUT de Belfort-Montbéliard

Twitter permet de s’informer rapidement, sur tout et n’importe quoi. Sur Twitter, nulle obligation d’être invité pour suivre un compte qui nous intéresse : on peut alors lire les tweets de Lady Gaga, de Barack Obama ou d’un thésard sur la physique moléculaire ! Si un compte n’est finalement pas si intéressant, en un clic on peut se désinscrire. Tout est possible et accessible. Ainsi, en suivant des comptes qui parlent de sujets qui nous intéressent, on s’assure de dénicher des informations souvent inédites.

Twitter est très utilisé dans le domaine professionnel. « Le principal intérêt de Twitter est la veille », résume Flavien Chantrel, auteur de deux e-books sur Twitter. Ainsi grâce à Twitter il est possible de se tenir informé des dernières actualités parut dans son domaine d’expertise.

Flavien Chantrel, Community Manager chez RegionsJob

Mais Twitter, c’est également un reflet de la vraie vie. On parle beaucoup, et surtout pour ne rien dire !

Sur Twitter, on parle aussi de soi, de ce qu’on fait et de ce qu’on aime

Tweeter c’est dans l’air !

Le nombre d’abonnés sur Twitter en France a totalement explosé en un an en connaissant une augmentation de 126% (étude Semiocast). Pour Paul Guyot, cofondateur et président de Semiocast, « il y de plus en plus d’utilisateurs qui commencent à tweeter parce que c’est dans l’air. Il y a clairement une adhésion, une massification d’usage ».

Le nombre de comptes Twitter ne cesse de croître depuis sont lancement en 2006. Cependant, seul 24% des comptes Twitter sont actifs avec au moins un tweet posté, activité mesurée sur une large période de trois mois de septembre à novembre 2011 (étude Semiocast). Il semblerait que les premiers pas sur Twitter peuvent donner envie aux utilisateurs de rebrousser chemins rapidement.

En France, seul 24% des comptes Twitter recense une activité avec au moins un tweet émis sur une période de trois mois

Pourquoi la sauce Twitter ne prend t’elle pas ? Ergonomie de l’activité et de l’IHM

76% de comptes « inactifs », pourquoi autant de personnes n’ont pas d’activité mesurable sur Twitter après leurs inscriptions ? Ces abonnées ont-ils déserté Twitter après une première tentative non concluante de prise en main de l’interface ou sont-ils des « twittos » passifs avec une activité unique de consultation ? Quelque soit la répartition de ce pourcentage, il semblerait qu’il y ait un problème d’appropriation de l’outil Twitter par ses utilisateurs.

Twitter nécessite une première phase d’appropriation par l’utilisateur

En interrogeant notre entourage, nous avons recueilli beaucoup de témoignages semblables à celui-ci : « j’ai un compte, j’ai tweeté une seule fois, j’ai deux amis qui l’utilisent à tout casser et finalement je ne vois pas l’intérêt ».

Twitter est exigent, il demande un investissement de la part de l’utilisateur

L’intérêt de Twitter est difficilement perceptible pour un grand nombre d’utilisateur, « j’ai la parole mais je n’ai rien à dire ». Twitter peut être intimidant. Rédiger un tweet nécessite d’avoir des choses à dire, des choses percutantes afin de se créer un public. Twitter serait donc destiné en priorité aux bloggeurs, aux passionnés du web, aux journalistes, aux célébrités et de plus en plus aux politiciens.
Alors à notre niveau, que dire pour que l’on se mette à nous suivre ? « Construire son audience est un frein quand on arrive sur Twitter, reconnaît Jean-Claude Domenget. Et il peut être long de se trouver les bonnes sources ».

Twitter demande une part d’investissement de la part de ses utilisateurs. Twitter ça se construit. Il faut passer du temps à chercher les comptes que l’on veut suivre, se trouver une ou deux thématiques qui nous intéresse et sur lesquelles ont a envie de créer ou de relayer du contenu. Ce sont les utilisateurs de Twitter qui sont à la base de la création de son contenu et de sa diffusion. Les utilisateurs alimentent et font vivre Twitter. L’intérêt est donc que tous les utilisateurs tweetent ! Le retweet (RT) sert à propager des informations jugées intéressantes et à ne pas manquer. Plus l’information sera tweetée, plus elle sera lue par un grand nombre d’abonnées. L’intérêt du service est donc de faire participer tous ces membres. Il faut d’abord se sentir concerné pour s’approprier Twitter.

Vie privée, vie public : l’envie de ne pas tout mélanger

L’adhésion non réciproque pour suivre quelqu’un et le côté public des comptes Twitter par défaut, amène à un mélange de vie privée et de vie public, de vie personnelle et de vie professionnelle, qui peut être au premier abord troublant pour les utilisateurs. Ce concept de réseau professionnel à visage humain, est très anglophone. Sur Twitter, on suit une personne et non une entreprise. En France, la barrière entre le professionnel et le personnel est encore bien présente, une personne sur onze protège son compte afin de ne rendre visibles leurs tweets qu’aux personnes de leurs choix (étude Semiocast). Suivre quelqu’un qu’on ne connait pas, mais expert dans notre domaine et qui tweet de temps en temps des photos de vie quotidienne, c’est surprenant, mais après tout on y prend vite gout. Twitter, c’est une nouvelle façon de voir le monde de l’entreprise. Il y a encore une fois ce concept d’accessibilité et de proximité.

Le Twitter de la start-up @Podio illustre bien se mélange d’information. Les photos de vie quotidienne publiées, humanisent le monde de l’entreprise.

L’interface de Twitter perd l’utilisateur

Épurée, soignée et bien agencée l’ergonomie de l’interface Twitter ne semble pas problématique en soi. Alors qu’est ce qui fait défaut à Twitter ? Comment expliquer le fait qu’à leurs arrivées, beaucoup d’utilisateurs se sentent perdus et perçoivent l’IHM comme étant assez « brut de décoffrage » et pas vraiment « user friendly ». Un des problèmes actuels c’est l‘absence de hiérarchisation entre les tweets qui n’aide pas à se repérer dans ce flux de messages. Une nouvelle utilisatrice confie à ce sujet « Ce n’est pas facile pour trouver les gens, répondre, etc ». Il semble que les utilisateurs aient des difficultés à saisir les discussions : Qu’est ce qui se dit ? Qui parle ? À qui ?

Les tweets sont représentés comme un flux d’information et il n’existe aucun principe de hiérarchisation entre eux

Le langage Twitter : un monde pour les geeks

Les tweets séduisent-ils seulement les geeks ? La culture geek semble s’être imposée sur Twitter. En effet, les geeks ont été les premiers à s’emparer de l’outil. Ils ont mis en place un certain nombre de codes pour communiquer, c’est le cas du « hashtag ».

Première utilisation du hashtag par Chris Messina, développeur chez Google

Du coup, les tweets s’apparentent aujourd’hui un peu à des lignes de codes ! Il y a des @texte, des #texte, des RT@texte, des liens tronqués qui s’affichent à la pèle. Les messages de 140 caractères sont dits « facile à lire », pourtant, à première vu, il est difficile d’attraper le contenu parmi tous ces symboles qui viennent parasiter la lecture lorsque l’on ne les maitrise pas. Rien ne prépare le nouvel utilisateur à ce mode de langage. Lire un tweet c’est un peu comme lire un sms pour la première fois, ça s’apprend ! Malgré ses fonctionnalités basiques, son mode de communication déroutant pénalise Twitter au niveau de l’accessibilité avec un risque élevé de perdre un certain nombre d’utilisateurs fraîchement débarqués.

@egadenne un abonné Twitter friand de l’usage des codes de communication Twitter

Comprendre Twitter pour en devenir adepte

Twitter c’est un flux d’information dans lequel il ne faut pas chercher de hiérarchisation. Il sert à piocher l’information qui nous intéresse, et lorsque l’on suit un certain nombre de personnes, on pourra facilement repérer les informations à ne pas louper qui seront amplement retweetées par la communauté. Les personnes persévérantes y trouveront sans aucun doute leur bonheur. Pour apprécier Twitter, il faut savoir pousser la curiosité et déchiffrer ses codes afin de pouvoir le prendre en main. Une petite illustration permettra de vous réconfortez si vous êtes en train de faire vos premiers pas sur Twitter. Vous êtes dépité car vous ne comprenez rien à l’outil ? Vous vous trouvez au premier stade, pas de panique, avec un peu de persévérance vous allez gravir les échelons et doucement l’appropriation de Twitter va se faire progressivement jusqu’à l’addiction.

Les quatres étapes à gravir afin d’arriver au stade ultime : devenir un vrai « Twittos » addict

Recommandations

• L’intérêt de Twitter n’est pas toujours identifier par les utilisateurs, une vidéo sur la page d’accueil expliquant le concept et présentant les différents usages qu’il est possible d’avoir serait un plus. Twitter in plain English, vidéo créée par Commocraft est une belle illustration d’une explication ludique de Twitter.
  

  
  
  Vidéo de Twitter in plain English par Commoncraft

• Ce qu’on aime, c’est arriver sur une interface en comprenant directement ce qu’on peut y faire et comment le faire. Twitter gagnerait à présenter un tutoriel dès l’inscription de l’utilisateur, comme le font de plus en plus de site, c’est le cas de Google plus , qui après l’inscription, présente l’interface à l’utilisateur avant de le laisser faire ses premier pas.

  
  Google+ guide l’utilisateur dans la découverte de son interface

• Ce tutoriel doit comprendre un glossaire pour s’approprier le langage Twitter. Aujourd’hui ce glossaire existe mais n’est pas mis en avant sur l’interface, il est pourtant essentiel à la prise en main du service. Ce manque est facilement observable par la création de nombreux blog de passionnées de l’outil Twitter (exemple du blog de @Jchristopheanna  et du glob de bargeo) ou même d’entreprises, c’est le cas de Netissime ou bien encore d’Europe 1 qui fournissent des guide à la compréhension et à l’utilisation de Twitter.

  
  Extrait de l’article « Twitter on vous donne les clés » d’Europe 1 à l’intention de ses internautes

Pour conclure

Twitter est un outil difficile à s’approprier et seul les plus curieux finiront par en devenir adepte, tandis que les autres lui tourneront le dos sans chercher à comprendre ce qui a bien pu leur échapper. On peut se demander si le langage Twitter restera un frein à son appropriation et son utilisation d’un large public. Si vous êtes persévérant, apprenez à faire connaissance avec Twitter puis il finira par vous suivre partout : au boulot, dans les transports, devant la télé et même jusqu’aux toilettes…

#jeudiconfession : Tous les jeudis, la communauté Twitter a comme rituel de se confesser

Ne pas réinventer la roue

Les applications interactives n'ont pas seulement investi le champ de la mobilité, elles ont également permis de simplifier leur usage en proposant une interaction plus directe avec l'utilisateur grace au tactile. Si tout est encore possible, car l'iPad en est encore à ses débuts, la règle n°1 à respecter est la simplicité : « Il ne faut pas aller trop loin et ne pas proposer quelque chose de trop compliqué, avertit Jean-Luc Gemo expert mobilité chez Forecomm. L'utilisation doit rester simple : feuilleter, faire glisser, cliquer… ». Jeff Raskin, expert interfaces pour Apple dans les années 70-80, expliquait quant à lui qu'une application informatique est réussie si son interface fonctionne comme l'utilisateur s'y attend, si son intuition lui permet de facilement l'utiliser (source : Intuitive equals familiar). Elle sera alors intuitive si ses éléments et son fonctionnement ressemblent à ce que connait déjà l'utilisateur, à ce qu'il a appris. « Intuitif » est donc pour lui synonyme de « familier ». Concevoir une interface iPad en réinventant fortement ses éléments constitutifs risque donc d'aboutir à une application moins intuitive : les utilisateurs auront plus de difficulté à la prendre en main, l'apprentissage en sera plus long et les erreurs plus fréquentes. Il ne faut donc pas réinventer la roue mais utiliser le même vocabulaire d'interaction qu'Apple définit dans ses standards pour l'iPad. Conventions qui se sont par ailleurs largement répandu sur les autres plateformes. Cela ne veut pas dire que l'originalité est interdite, mais celle-ci ne doit pas aller à contre-courant des habitudes des utilisateurs d'iPad (sauf si votre objectif est la perdition). On évitera par exemple d'inverser la place des fonctionnalités principales. Dailymotion a placé la barre de progression de la vidéo en bas de l'écran alors que sur l'application native iPad celle-ci est en haut et c'est la barre de réglage du volume qui est en bas (que Dailymotion a d'ailleurs supprimé).

Dailymotion a placé la barre de progression à l'opposé du standard iPad

Cette modification semble anodine, mais elle diminue la fluidité d'usage de l'application et n'apporte rien fonctionnellement. Même problème avec l'application iPhone de Spotify (lecture de musique) : le curseur de volume est cette fois présent mais la place des barres est inversée par rapport au lecteur de musique iPhone. À coup sûr, certains utilisateurs vont avancer dans la lecture du morceau alors qu'ils voulaient augmenter le volume (c'est du vécu). De plus Spotify a positionné le bouton « retour » en haut à droite de l'écran alors que le standard iPhone et iPad est de le placer à gauche. Autant de grains de sable qui viennent altérer l'expérience utilisateur.

Spotify sur iPhone a joué au jeu des inversions… pour être original ?

Une autre erreur à éviter est de réinventer les composants de base de l'interaction sur iPad. Vous pouvez voir ci-dessous que l'application Motion X GPS a fait preuve d'imagination en proposant sa propre interprétation du bouton ON/OFF de l'iPad.

Le bouton ON/OFF d'iPad a été dénaturé. Dans quel but ?

Au-delà d'inverser le positionnement habituel libellé/bouton, le composant est relooké à tel point qu'on n'identifie pas immédiatement son fonctionnement à l'inverse de celui de l'iPad : une lumière verte a été ajoutée pour signifier que l'option est activée. Sur le modèle standard cette information est directement visible sur le bouton lui même (couleur bleu). Cette interface est donc incohérente avec les autres applications iPad que l'utilisateur manipule et une fois de plus sans apport fonctionnel. Les concepteurs de cette application ont certainement voulu donner leur identité, leur look à cette application. C'est tout a fait naturel de vouloir se distinguer de la concurrence et sortir du lot, mais pas au détriment des utilisateurs. Il faut trouver le juste milieu. Flipboard pour iPad propose un bon équilibre. L'application a une identité graphique marquée, mais l'utilisateur retrouve ses repères sans difficulté.

L'application iPad Flipboard : un bon compromis entre identité graphique et respect des standards

Sur cet écran le bouton retour est positionné en haut à gauche avec sa forme habituelle, la recherche est accessible en haut à droite là où on l'attend, le curseur du bas qui permet de naviguer dans les pages rappelle celui du diaporama photo iPad, l'icône de rédaction en bas à droite est légèrement modifiée, mais prend la forme habituelle. En résumé, l'application Flipboard est majoritairement cohérente avec les standards iPad mais a créé un univers graphique identifiable.

Recommandations

• Respecter les habitudes de l'utilisateur pour faciliter l'apprentissage
• Réutiliser les conventions iPad pour les fonctionnalités que l'utilisateur rencontre souvent dans les applications
• Appliquer l'identité visuelle de l'application tout en permettant à l'utilisateur de reconnaître facilement les fonctionnalités

Une application iPad n'est pas un couteau-suisse

Une application doit proposer une fonctionnalité principale facilement identifiable. Si elle propose une profusion de services et d'options, elle ne ressortira pas sur l'App store et son but sera mal compris par les utilisateurs. Chaque application devrait pouvoir se résumer en quelques mots : Shazam permet de reconnaitre la musique, Kindle permet de lire des livres, RATP Pure permet de faire un itinéraire… Cela n'empêche pas d'ajouter quelques fonctionnalités secondaires, mais elles ne doivent pas être au même niveau que la fonction principale. Certains éditeurs qui souhaitent proposer plusieurs services n'hésitent pas à multiplier les applications. SNCF propose par exemple SNCF Direct qui permet de suivre le trafic des trains en temps réel, Horaires & Résa pour acheter des billets ou encore Gare360 pour visiter virtuellement les gares. La SNCF propose encore 2 ou 3 applications supplémentaires sur iPhone. Si toutes ces fonctionnalités avaient intégrées une unique application, celle-ci aurait été plus lourde à installer et sa navigation plus complexe.

SNCF a réalisé une famille d'applications iPad et iPhone plutôt qu'une application unique trop dense.

Lors de la définition de l'application, il faut minimiser le nombre de fonctionnalités et supprimer tout ce qui n'est pas réellement utile pour accomplir la tâche principale de l'utilisateur. Rien n'empêchera par la suite d'enrichir l'application en fonction des retours des utilisateurs. Questionner les utilisateurs et faire des tests d'utilisabilité permet d'améliorer les applications.

Recommandations

• Viser une fonction principale par application iPad
• Préférer faire plusieurs applications plutôt qu'un fourre-tout numérique
• Organiser des tests utilisateur pour vérifier la pertinence des fonctionnalités et l'utilisabilité de l'interface

L'originalité à bon escient

L'iPad propose un nouveau mode d'interaction, il faut donc en profiter pour proposer de nouvelles interfaces. L'objectif ne doit pas simplement être de faire une application « cool ». L'application sera réussie si elle allie service utile et convivialité d'usage. Si elle ne propose qu'une interaction amusante mais sans rendre de service, elle sera rapidement oubliée par les utilisateurs. L'application SNCF Horaires/Résa propose par exemple une interaction ludique pour définir un itinéraire de train. L'utilisateur touche d'abord la ville de départ puis celle de l'arrivée. Les champs de saisie des villes sont ainsi remplis. L'utilisateur qui préfère interagir de manière plus classique pourra saisir le nom des villes au clavier dans la partie de gauche. Une fois les 2 villes renseignées, la carte se recentre sur le trajet sélectionné. L'application utilise donc l'apport du tactile pour éviter la saisie clavier qui reste fastidieuse. L'interaction n'est donc pas seulement « cool » mais aussi efficace. Acheter un billet de train devient (presque) un jeu.

Ludique et efficace l'application iPad de la SNCF permet de définir son itinéraire sans le clavier

Recommandation

• Utiliser le tactile comme un nouveau contexte de création qui permet de simplifier les interactions
• Éviter de tomber dans le piège de l'effet pour l'effet, les utilisateurs se lasseront vite

Une navigation simple

Pour la navigation sur iPad on n'appliquera pas les vieilles habitudes du web classique ou du logiciel. Même si l'écran est de taille confortable, l'iPad a hérité de l'iPhone sa logique de navigation simple. D'autre part l'interaction tactile change le rapport à la navigation : taille des éléments, feuilletage… La navigation par « glissement de carte » est un bon procédé qui aide au guidage. Les différents écrans successifs de l'application s'empilent comme des cartes et il est facile de revenir aux différents niveaux de navigation. Cette mise en forme permet aussi d'avoir une bonne vision du parcours fait. Twitter pour iPad propose un bon exemple de cette navigation :

Avec l'application iPad Twitter, les différents niveaux de profondeur de la navigation sont toujours visible à gauche et sont directement touchables.

L'animation va aider à accompagner cette navigation : l'écrans se déplace de droite à gauche pour remplacer l'écran courant. On évitera de montrer trop de niveaux de navigation à la fois. En général un seul niveau est suffisant, puis l'utilisateur « creusera » progressivement dans le contenu. L'application Zinio a la bonne idée de mixer dans le haut de l'écran standard iPad avec la flèche de retour en haut à gauche et le fil d'Ariane du web classique qui permet d'accéder directement aux niveaux intermédiaires. C'est notamment utile quand l'application ne se prête pas à l'empilement de cartes.

Zinio sur iPad propose une navigation simple qui respecte à la fois le standard Apple et un classique du web

À l'inverse, CNBC RT présente un contenu d'écran et une navigation trop dense. Le menu de niveau 2 est constitué de panel agrandissables et scrollable. De plus, la barre du bas « breaking news » et celle des valeurs boursières en dessous sont animées et ajoutent à la confusion de l'écran. Ici, on a voulu densifier le contenu de l'écran, une mauvaise pratique héritée du Web.

Une interface trop dense et animée

Recommandation

• Ne pas calquer les habitudes de conception Web sur l'iPad. C'est un nouvel environnement avec de nouveaux codes
• Proposer une navigation simple et fluide
• Accompagner les changements d'écrans avec des animations qui permettent de comprendre la navigation
• Comme pour toute interface, éviter les animations en boucle à l'écran, elles perturbent la lecture

Le tactile : atouts et contraintes

L'utilisation tactile de l'iPad permet de supprimer l'intermédiaire de la souris et (en partie) du clavier pour interagir directement avec l'interface. La distance entre l'interface est l'utilisateur est réduite. L'avantage de cette interaction directe est la simplicité et l'intuitivité : les manipulations de l'interface rappellent celles du monde physique (tourner des pages, déplacer des éléments au doigt, enfoncé des boutons…). Différentes gestuelles existent pour interagir avec l'iPad, elles sont parfois complexes. Pour faciliter l'apprentissage et l'utilisation de l'application il est préférable d'utiliser les gestuelles simples du tactile.

Gestuelles simples sur iPad

Des gestuelles plus avancées mettant en œuvre des mouvements complexes ou l'usage de 3 à 5 doigts peuvent être utilisés pour des fonctions secondaires qui ne sont pas essentielles à l'usage de l'application. Certaines applications ayant des fonctionnalités très riches, comme par exemple la peinture sur iPad, peuvent nécessiter une gestuelle avancée, mais il faudra alors accompagner l'utilisateur avec des messages lui expliquant comment manipuler l'interface. L'application de dessin SketchBook le fait très bien : quand on lance pour la première fois l'application, une douzaine de pages expliquent à l'utilisateur comment manipuler l'interface pour dessiner.

Explication de la gestuelle sur l'application iPad SketchBook

Il est d'autant plus important d'expliquer à l'utilisateur comment fonctionne l'application qu'il n'y a pas de survol en tactile. Quand en web classique une petite bulle permet de savoir à quoi sert tel ou tel composant, pour l'iPad c'est le guidage directement sur l'interface qui permet d'expliquer son fonctionnement. Les éléments de l'interface doivent donc être facilement identifiés comme « touchables » : n'hésitez pas à démarquer visuellement ce qui est interactif du reste. Pour être facilement touchés les composants de l'interface doivent aussi être de taille suffisante et être positionnés à des emplacements accessibles sur l'interface. Sur iPad 1 et 2 il est préconisé d'avoir des éléments touchables non-contigus au minimum de 25 pixels (5mm) de hauteur par 38 pixels (7,6mm) de largeur. Entre ces éléments il sera nécessaire de laisser un espace d'au moins 10 pixels (2mm). Si les éléments sont contigus (comme une liste), la hauteur minimale passe à 42 pixels (8,4mm). On utilisera des dimensions plus importantes pour les zones fréquemment utilisées et les actions principales.

iTunes sur iPad : la hauteur des zones contiguës ou non est suffisante pour la manipulation tactile

À l'inverse, les actions engageantes, comme par exemple la validation d'un formulaire de virement bancaire, doivent être présentées sur des plus petits éléments (liens, petits boutons). Il serait en effet mal venu qu'une fausse manipulation entraine une dépense non souhaitée. Pour les actions irréversibles, comme la suppression définitive d'un élément, il est important de renforcer le contrôle de l'utilisateur par un message de confirmation. Ainsi, si l'utilisateur appuie par mégarde sur une zone de l'écran, ce qui arrive souvent en tactile, il aura toujours la possibilité d'annuler son geste.

L'application Photos d'iPad demande à l'utilisateur de confirmer son appui sur la corbeille : un bouton rouge « supprimer » apparaît.

Sur un écran tactile, les différentes zones de l'interface ne sont pas atteignables avec la même facilité. L'accessibilité des objets est à la fois relative à la taille de l'écran et à l'utilisation d'une ou deux mains. Comme le montre le schéma suivant, les éléments situés en bas de l'écran sont facilement atteignables alors que l'accès aux informations situées aux extrémités supérieures et notamment à gauche est plus contraignant.

Les zones facilement accessibles sur iPad

En tactile l'idéal est donc de placer les actions récurrentes ou principales dans la partie basse de l'écran. À l'inverse les actions occasionnelles ou engageantes seront plutôt à positionner dans la partie haute. La position des éléments a aussi un impact sur la fatigue qui n'est pas négligeable en tactile. On évitera d'obliger l'utilisateur à faire des mouvements longs de manière répété. D'autant plus que sur écran tactile la main de l'utilisateur masque toujours une partie de l'interface. En effet, pour aller appuyer sur la partie haute de l'écran l'utilisateur occulte une bonne partie de l'application. Il faut donc veiller à ce que les éléments tactiles soient disposés de telle sorte que les interactions tactiles puissent être effectuées sans nuire à la visibilité de l'écran. Comme on peut le voir avec l'exemple qui suit, l'application du Parisien.fr oblige l'utilisateur à interagir en haut de l'écran ce qui est plus fastidieux et masque l'interface. L'Expansion.com propose une navigation basse plus aisément manipulable et avec un masquage réduit.

 Lors de la conception pour iPad il est primordial de prendre en compte la fatigue engendrée par le mouvement du bras et l'effet de masquage de l'interface. D'autre part il ne faut pas oublier que l'utilisateur voudra utiliser l'application en position portait ou paysage. Il faut donc proposer l'agencement le plus optimal dans les deux orientations et profiter de ces 2 formats d'interface pour enrichir l'expérience utilisateur. Par exemple l'application Notes attribut toute la surface de l'écran à la rédaction en mode portrait et fait apparaître la liste des notes quand l'iPad est basculé en paysage. Le corps du texte reste identique dans les deux orientations pour permettre une bonne lisibilité. Si le texte filait sur toute la largeur de l'écran en mode paysage les lignes seraient trop longues pour offrir un confort de lecture convenable.

L'interface de l'iPad doit s'adapter à l'orientation de lecture

 Recommandations

• Il n'y a pas de survol en tactile : veiller à rendre l'interface explicite et ne pas bloquer l'usage. Attention notamment sur le Web (menus au survol…)
• Proposer des gestuelles simples. Les gestuelles complexes peuvent être utilisées pour les fonctions annexes
• Expliquer à l'utilisateur comment manipuler l'interface
• Concevoir des objets de taille suffisante pour le tactile
• Le zoning est primordial : les erreurs de manipulations sont plus fréquentes avec la main qu'avec une souris
• Prendre en compte la fatigue qu'impliquent les mouvements du bras et de la main
• Enrichir l'expérience utilisateur en optimisant les modes portrait ET paysage

Conclusion

Comme cet article le montre, l'iPad révolutionne le marché de l'informatique en proposant une nouvelle interaction qui vient progressivement grignoter des part de marché à l'ordinateur domestique. S'adapter à ce nouvel outil ne s'arrête pas à transposer simplement les interfaces Web classique ou logicielle sur iPad. La simplicité d'interaction, les nouvelles conventions issues du mobile et la dimension tactile en font un tout nouveau contexte à apprivoiser. Note : Nous préparons une formation sur l'ergonomie pour les interfaces mobiles et tactiles. N'hésitez pas à laisser votre e-mail pour être tenu informé !

La production de contenu web en 30 leçons

Ces deux spécialistes du contenu décrivent dans cet eBook 30 principes qui couvrent les grands thèmes de la production de contenu pour le web :

• La mesure de l’efficacité du site web
• L’audit qualité
• La construction de la stratégie de contenu
• La conception de la structure du site
• L’organisation de la production du contenu

Chaque principe est expliqué dans une “fiche pratique” qui décrit succinctement la technique abordé et présente les étapes à suivre pour la réaliser. Les avantages et inconvénients sont ensuite analysés et quelques astuces sont données pour mieux utiliser l’outil.

La fiche sur la technique du « Tri de cartes »  pour organiser le contenu d’un site web en phase de conception.

Les descriptions et les étapes à suivre sont parfois succinctes, mais elles donnent un bon aperçu de chacun des outils ce qui est le but visé. De nombreux mots-clefs et des noms de logiciels gratuits sont également donnés. Charge au lecteur d’aller approfondir les techniques qui lui semblent intéressantes grâce à des ouvrages dédiés, comme par exemple Ergonomie des Interfaces (notre livre ;) pour la phase conception.

L’audience

Nous recommandons cet ouvrage à toute personne souhaitant un tour d’horizon des techniques disponibles pour améliorer la qualité d’un site web. Cet eBook pourra également intéresser les autres acteurs du web (ergonomes, développeurs, graphistes…) car la structure des fiches est très abordable et permet d’aller droit au but.

Pour aller plus loin

Le site dédié à l’ouvrage : www.tools4webcontent.com

Initier l'interaction

Avant même de concevoir l'interaction de drag and drop, il faut faire comprendre à l’utilisateur qu’il peut faire glisser des éléments. Lorsque les premières pages personnalisables, comme Netvibes ou iGoogle, ont été déployées, beaucoup d'internautes se sont sûrement demandés comment les utiliser. Pendant longtemps, Netvibes n’a fourni aucune explication sur le déplacement des modules sur la page. La seule indication était un changement de forme du curseur lorsque la souris survolait un module. La modification du curseur est un comportement standard pour indiquer qu'une action est possible à l’endroit pointé. Cependant ce n'est pas un guidage suffisant et il est nécessaire d'ajouter d'autres indications.

Sur le site Netvibes, seule la modification du curseur indiquait le drag and drop.

Depuis, Netvibes a intégré un tutoriel d’initiation qui apparaît lors de l’inscription au site. Il explique pas à pas la marche à suivre au nouvel utilisateur. Le principe du tutoriel vidéo est aussi souvent utilisé pour pallier à un guidage trop faible au sein de l'application elle-même : la vidéo est une bonne pratique, mais ce n'est pas suffisant. Un standard s'est imposé pour indiquer le drag and drop, il consiste à matérialiser clairement la zone de réception par des pointillés (là où on glisse un élément). Faire apparaitre des instructions directement dans cette zone améliore le guidage. On suppose qu'une fois que l'utilisateur a effectué une première interaction de drag and drop, il a compris le principe et les instructions n'ont alors plus besoin d'être affichées.

Picasa affiche clairement la zone de réception des fichiers et donne les instructions dans cette zone. Une fois qu’une photo a été glissée, les instructions disparaissent. Remarquons qu'une alternative plus classique est proposée par un bouton.

Recommandations

• Reprendre autant que possible les standards que les utilisateurs connaissent déjà
• Proposer un tutoriel comme une vidéo de démonstration lors de la première utilisation et consultable par la suite au besoin
• Matérialiser la zone de réception avant que l'utilisateur ait débuté le glissement
• Donner des instructions directement dans la zone de réception lorsqu’elle est vide
• Dans la mesure du possible, afficher un texte d'aide en permanence pour expliquer l'interaction de drag and drop
• Afficher un retour visuel au survol de la souris pour faire comprendre que l'objet est déplaçable (changement de forme du curseur, bulle d'aide, etc.)
• En complément du drag and drop, proposer une alternative plus conventionnelle pour réaliser l’action (boutons, menus)

Guider le déplacement

Une fois que l’utilisateur a compris qu’il peut glisser certains objets de la page, il faut continuer de le guider tout au long de l'interaction. Il est important de donner un retour à l'utilisateur sur la prise en compte de son action de drag and drop. Il faut lui permettre de suivre le déplacement de l’objet. Netvibes matérialise ce comportement en plaçant au bout de la souris une miniature de l'objet. L'emplacement de départ est lui rendu plus pâle pour rappeler à l’utilisateur ce qu’il est en train de manipuler.

Sur Netvibes, au cours du déplacement la page est réduite à une vignette

 Les applications de gestion d’email en ligne les plus populaires permettent de gérer les messages grâce au drag and drop (pour les placer dans un dossier par exemple). Cependant, il est rare de voir des incitations quant à cette possibilité. En conséquence, le drag and drop est perçu comme étant réservé aux utilisateurs expérimentés alors qu’il se veut justement plus “intuitif”. L'interface doit aussi montrer à l’utilisateur ce qu’il peut faire ou non. Néanmoins, il faut être vigilant car cela peut être contre-productif : dans une ancienne version de Yahoo! Mail, lorsque l’utilisateur commençait à glisser un message, un icône « sens interdit » apparaissait. Plutôt inquiétant. C'est seulement lors du survol d'un dossier que le sens interdit se changeait en feu vert. Nous retiendrons pour le drag and drop, que le retour visuel doit être renforcé sur ce que l’utilisateur peut faire plutôt que sur ce qu’il ne peut pas faire.

Chez Yahoo! Mail, déplacer un message faisait d’abord apparaître… un sens interdit !

Dans la nouvelle version de Yahoo! Mail, au lieu du sens interdit, c’est le nombre de messages glissés qui apparaît : cela porte moins à confusion. Cependant, il manque une indication montrant au survol où il est possible de déposer le message.

Lorsque plusieurs messages sont sélectionnés pour un drag and drop, Hotmail attache une étiquette indiquant le nombre de messages en train d’être déplacés, ce qui conforte l’utilisateur dans la prise en compte de son action.

Recommandations

• Modifier l'aspect de l'emplacement de départ dès que le drag and drop commence
• Donner une apparence particulière à l'objet déplacé (miniature, transparence, étiquette de résumé, etc.)
• Guider d’avantage l’utilisateur sur ce qu’il peut faire plutôt que sur ce qu’il ne peut pas faire

​Valider l'action

L’action de drag and drop est finalisée par un "lâché" de l'élément dans la zone de réception. Ceci à pour conséquence de valider l’action de l’utilisateur. Il faut lui permettre d’anticiper les effets de cette validation. iGoogle, qui permet de personnaliser la page d’accueil Google, donne à l’utilisateur un moyen de se projeter en modifiant dynamiquement l’agencement des différents blocs lorsque l’utilisateur glisse un module. L'utilisateur a ainsi un aperçu de la disposition qu'il s’apprête à créer : cela lui fournit une aide à la décision.

Sur iGoogle l’utilisateur déplace les modules sous la forme d'un "fantôme" et adapte dynamiquement l’agencement de la page pour que l’utilisateur ait un aperçu du résultat final.

Le réseau social Google+ permet de trier ses contacts en les glissant dans des "cercles". Dès que le curseur survole un cercle, celui-ci change d'aspect : il grossit, change de couleur et laisse entrevoir les photos des contacts déjà présents dans ce cercle. Dans le même temps, les contacts glissés changent de couleur. Ces modifications d'interface indiquent clairement à l'utilisateur qu'il peut lâcher ses contacts à cet endroit et qu'ils vont alors rejoindre les autres contacts déjà présents dans le cercle.

Sur Google+, la phase de validation du drag and drop est explicite. Notez qu’un texte d'aide est visible en permanence pour expliquer l'interaction.

Enfin, il est bon d’animer la fin de l’interaction, une fois que l’utilisateur a lâché l’élément. En effet, l’objet déplacé est souvent repositionné lorsque l’utilisateur relâche le bouton de la souris (par soucis d’alignement par exemple). L’application web “Scrumy” déclenche une animation pour replacer les éléments à leur place lorsqu’ils sont lâchés en dehors de la zone de réception. L’utilisateur garde alors le contact visuel ce qui augmente la compréhension du comportement de l’interface.

Scrumy, une webapp de gestion permet le drang and drop de post-it. Une fois lâché, une animation replace le post-it au bon endroit .

 Il arrive aussi que l’objet déplacé change de forme ou même disparaisse après un drag and drop. C’est par exemple le cas d’un article sorti du panier sur le site de Panic. L’utilisateur peut gérer son panier par drag and drop : pour ajouter des articles, il les glisse à l’intérieur et pour les supprimer , il les glisse à l’extérieur. Remarquons que lors du déplacement une miniature du produit suit le curseur dès le début de l’interaction. La suppression est matérialisée par une animation en forme de “nuage” lors du lâché. Ceci conforte l’utilisateur en lui montrant que son action à bien été prise en compte.

Sur le site de Panic, l’utilisateur peut supprimer des articles de son panier en les glissant à l’extérieur. Une animation en forme de “nuage” confirme la suppression. Néanmoins l'indication expliquant ce mode de suppression est trop discret (texte gris à gauche).

Recommandations

• Lors du drag and drop, faire ressortir la zone où l'élément peut être déposé lorsque celle-ci est survolée.
• Montrer dynamiquement un aperçu du résultat de l'action
• Après le drag and drop, animer la fin du déplacement pour garder le contact visuel ce qui augmente la compréhension du comportement de l’interface.
• Si le drag and drop consiste à dupliquer l'objet et non le déplacer de l'emplacement initial, dupliquer l'objet sur le curseur dès le début du déplacement.
• Maximiser la taille des zones de réception et minimiser la distance entre les éléments à déplacer et la zone de réception (d’après la loi de Fitts, l’interaction sera plus rapide donc plus facilement réalisable).

Conclusion

Le drag and drop est de plus en plus fréquent sur le web. S’il est correctement mis en oeuvre, il peut améliorer l'expérience utilisateur car il simule des comportements du monde physique et permet de manipuler directement les objets. Reste qu’avant de concevoir une interface web avec drag and drop, il faut se poser la question de sa légitimité car parfois des boutons ou des cases à cocher sont plus efficaces et explicites pour l’utilisateur. Attention à l'effet de mode !

Peu d'activité sur twitter ces derniers temps de notre coté. Nous avons été très occupés par nos missions, la rédaction de notre ouvrage Ergonomie des interfaces : la 5ème édition et la sortie du nouveau site usabilis.com.
Voici donc les twitts de l'équipe Usaddict de ces 5 derniers mois. Une manière de vous faire partager autrement, tout ce qui touche à l'ergonomie des interfaces : tendance, innovation, curiosité, etc.

La voix off

La manière la plus évidente de palier l'absence d'écriture sur un site consiste à utiliser la voix off. Accueillir le jeune enfant avec une mascotte animée expliquant le contenu participe en outre à son installation immédiate et émotive dans l'univers proposé. Malheureusement, et probablement pour des raisons économiques, fort peu de sites ont recours à une telle introduction.

Sur Sesame Street une mascotte indique où cliquer

En revanche les boutons d’entrée dans les rubriques sont très souvent sonorisés au passage de la souris. Sur tfou.fr on entend ainsi « Dora », « Babar » ou « Franklin » au survol de leurs illustrations. Notons une bonne idée présente sur ce site : La possibilité de couper le son d’une boucle musicale tout en conservant ces indications de navigation.

Sur tfou il est possible de régler les effets sonores

Recommandations

• Accueillir l'enfant avec une voix off expliquant rapidement le contenu et les principaux boutons (les boutons «  Retour » et «  Quitter » n'ont pas besoin d'être expliqués
• Au passage de la souris sur un bouton, déclencher une voix off décrivant son action
• Donner la possibilité de couper les boucles musicales

Boutons d’actions

Les boutons de navigation par mascotte et par thématique sur le site Tfou

L'accès aux activités d'un site pour enfant se fait généralement via une mascotte ou une icône comme un pinceau pour le coloriage ou une pièce de puzzle pour les jeux. Les boutons doivent se démarquer et être explicites : grande taille, encadrement, couleur qui contraste avec le fond. La taille est importante, elle renforcera la présence des boutons et incitera les enfants à cliquer. Les boutons seront d’autant plus faciles à cliquer qu’ils seront grands : les enfants ne sont pas toujours très habiles avec une souris dès 3 ans ! D’autre part, si le site est utilisé sur tablette les boutons seront compatibles avec une utilisation tactile s’ils sont suffisamment gros : minimum 1cm de diamètre. Ici, comme ailleurs, la Loi de Fitts s'applique !

La signalisation des boutons d'action se doit d'être particulièrement claire dans des environnements où tout est graphique. En effet, il arrive que les boutons se confondent avec des éléments de décor. BayaM résout cette question en proposant le contenu principal dans une partie de l'écran. Tout le reste de la page est plongé dans l'ombre. Ainsi les boutons de navigation sont traités sur un mode mineur mais ils se détachent dans l'espace et s'éclairent au passage de la souris. 

Sur BayaM, les boutons de navigation sont bien séparés du contenu. Ils s'éclairent au passage de la souris.

Si l'enfant doit impérativement cliquer sur un bouton pour continuer sa visite, il est recommandé de le faire bouger et/ou clignoter. Autre astuce pour signaler les boutons d'action : les animer au passage de la souris.

Une charte d'animation (design d’interaction) est importante à mettre en place afin qu'ergonomie et esthétique ne se court-circuitent pas. On évitera par exemple d’animer des éléments qui ne sont pas directement concernés par l’activité de l’enfant, cela détournerait son attention. De même il est déconseillé de diffuser des animations en boucle, elles sont lassantes et peuvent dans certains cas créer une gêne visuelle.

Plusieurs sites soignent la lisibilité et la maniabilité sur les lecteurs vidéo. Les boutons « Lecture/Pause », « Avancer » ou « reculer » sont dessinés en très gros. La bonne idée du site Tfou consiste à proposer uniquement deux boutons : « Lecture/Pause » et « Plein écran ». Néanmoins, le site n'a pas masqué les boutons natifs de la vidéo (ici en blanc sur noir), il persiste donc une incohérence.

Tfou-3-6.fr affiche en grande taille les deux uniques boutons de son lecteur vidéo.

Recommandations

• Une fois entré dans une activité, proposer un nombre réduit de boutons
• Dessiner de grands boutons détachés du fond et distincts des éléments du décor
• Proposer de larges zones de clic qui doivent être compatibles avec le tactile
• Animer les boutons au passage de la souris
• Sur un lecteur vidéo, supprimer les boutons «  Avancer » et «  Retour » pour simplifier l’utilisation

Rubriquage et navigation

Pour les sites internet pour enfants, on évitera les menus classiques de navigation et d’autant plus les menus déroulants, ils sont trop complexes. Comment montrer alors la richesse de son contenu ? Tfou propose un double accès au contenu : l’enfant peut cliquer soit sur un personnage soit sur une activité (jeux de lettres ou de chiffres, vidéos, etc.) pour aboutir au même contenu. Cela permet la flexibilité avec les différentes perceptions que peuvent avoir les utilisateurs.

Sur certains sites, la profusion est telle que des sous-rubriquages s'imposent et il faut parfois trois ou quatre clics avant d'accéder à un contenu. À vrai dire, même un adulte s'y perd. Jakob Nielsen, expert mondial en ergonomie, aborde ce point dans son article Children's Websites: Usability Issues in Designing for Kids (en) :

« Alors qu’un excès de navigation est ennuyeux et déroutant pour les adultes, cela peut être dévastateur chez les enfants. »

BayaM a choisi la sobriété. Sur le grand arbre de l'accueil, quatre activités seulement sont proposées et mises à jour régulièrement. Sur l'écran de l'activité choisie, un bouton « + »permet d'accéder aux archives présentées sous forme de tableaux de vignettes. De chaque côté du grand arbre, des flèches jaunes permettent d'accéder à d’autres univers. Néanmoins, ces flèches se fondent avec l’arrière-plan, elles risquent de ne pas être vues par certains enfants. Il serait aussi intéressant de mener un test utilisateur avec des enfants pour vérifier la compréhension de l’icône « + » qui semble abstraite.

Les archives sur BayaM : une présentation simple

Un autre site très performant mérite qu'on s'y arrête. Il s'agit de poissonrouge.com créé et actualisé depuis dix ans par un artiste anglais et une ergonome française. L'enfant clique sur l'un des éléments de décor qui constitue le bric à brac de la Une. Certains clics déclenchent une animation amusante sans quitter l'écran, d'autres font entrer dans une activité, d'autres encore mènent vers un nouvel écran regroupant plusieurs activités. Dans tous les cas, il n'y a jamais plus de deux boutons de navigation : un bouton contextuel pour revenir sur un écran regroupant une thématique d'activités et un bouton « poisson rouge » pour revenir à l'accueil. Une telle simplicité impose évidemment de se brider sur le nombre d'activités proposées. Cette navigation minimaliste n’est pas sans rappeler celle qu’on trouve sur iOs : iPad et iPhone.

Cependant, il arrive que le bouton poisson change d’emplacement d’un écran à l’autre. La navigation perd donc en cohérence, aussi épurée soit-elle.

Aucun écran ne comporte plus de deux boutons de navigation sur Poissonrouge.com

Recommandations

• Eviter une navigation trop profonde : 2 à 3 étapes maximum
• Permettre différents moyens d’accéder aux activités
• Toujours placer les boutons de navigation (retour, accueil…) au même endroit

Le clic

Rappelons que les enfants sont novices dans l’utilisation de l’outil informatique. Pour cette raison, il est important de pouvoir jouer et naviguer en utilisant uniquement le clic gauche et éviter l’usage du scroll. La plupart des sites internet pour enfants représentent la souris par une flèche stylisée beaucoup plus grosse que le curseur classique. Cela permet de l’adapter au graphisme du site et de faciliter son utilisation. Il est également important de proposer des zones de clic suffisamment larges afin d’éviter les erreurs de manipulation. 

Comme Poissonrouge.com, il est aussi possible de proposer une interaction exploratoire : c'est en cliquant ou survolant au hasard que l'on fait danser des abeilles, chanter les poupées ou que l'on dessine la carte des étoiles. La promenade se révèle pleine de surprises et l’amusement est au rendez-vous.

Recommandations

• Utiliser uniquement le clic gauche
• Éviter l’utilisation du scroll
• Prévoir que le survol n’existe pas en tactile (iPad et autres tablettes) : selon les cas on pourra le doubler par le clic
• Une navigation exploratoire ajoutera de la surprise

Le mode plein écran 

Il n'est pas rare que les sites pour enfants s'ouvrent en plein écran. L'environnement y gagne en esthétique et cette pratique limite les clics intempestifs qui emmèneraient les enfants sur d'autres sites (favoris…). La navigation de l’enfant sécurisée et le parent rassuré.

Avec BayaM aucun navigateur n'est ouvert puisqu'il s'agit d'une application à télécharger : l'accès se fait via une icône sur le bureau. L'enfant navigue dans un environnement fermé. Les parents peuvent également paramétrer la durée de jeu de leur enfant.

BayaM s’ouvre en plein écran, il faudra appuyer sur « Echap » ou quitter l’application pour en sortir

Conclusion

Si l’ergonomie est essentielle pour toute interface informatique, elle est fondamentale pour les sites et les applications pour les jeunes enfants. Bien qu’ils apprennent vite, ceux-ci n’ont pas encore assimilé tous les standards de l’informatique et du Web. Au delà des recommandations que nous avons présentées dans cet article nous conseillons vivement le test utilisateur. Il permet de vérifier directement avec les enfants s’ils comprennent bien l’interface et s’ils s’y amusent… C’est ce qui importe, finalement !

"Ergonomie des Interfaces" est la 5ème édition de « Ergonomie du logiciel et design web ».

Cette cinquième édition a été profondément remaniée afin de prendre en compte les nouveaux dispositifs d’interaction et accompagner tous les concepteurs d’interfaces sur les différentes phases de la démarche de conception ergonomique.

Ré-édité depuis 10 ans

Délibérément pragmatique, cet ouvrage, dont la première édition a été publiée en 2001, a été lu, relu, exploité et utilisé par de nombreux chefs de projet, développeurs et concepteurs d'interface.

En 10 ans, les interfaces et l’informatique en général ont beaucoup évolué. Nous ne pouvions plus réduire la conception des interfaces aux logiciels et au web. Désormais, les interfaces se déclinent également sur d’autres dispositifs, en particulier les smartphones et les tablettes tactiles.

Les dix ans de l’ouvrage correspondent aux dix ans d’Usabilis. Dix années au cours desquelles nous avons mis en œuvre les recommandations et les méthodes de ce livre. Ces expériences partagées sur des projets variés nous ont montré l’importance et la richesse des regards croisés et de la multi-disciplinarité pour concevoir une interface réussie. Nous avons donc décidé d’écrire cette 5ème édition à trois afin que chacun puisse apporter sa propre sensibilité à l’ouvrage.

Pour cette cinquième édition, nous ne pouvions plus conserver cette dichotomie logiciel/web qui ne correspondait plus à la réalité du terrain. C’est pourquoi, nous avons choisi une présentation transversale du processus de conception, indépendamment des dispositifs d'interaction.

Les premières éditions de l’ouvrage ont été construites à partir du support des formations Usabilis et des cours de Jean-François Nogier. La cinquième édition s’est enrichie de l’expérience acquise lors de nos interventions auprès des équipes de développement et des éditeurs de logiciel.

Il était donc naturel d’introduire des exemples concrets d’applications pour lesquelles nous avons mis en œuvre la démarche ergonomique. Nous remercions nos clients qui ont accepté de dévoiler ainsi une partie de leurs « secrets de fabrique ».

Un guide pratique pour la conception des interfaces

Véritable guide de conception, les lecteurs y trouveront, chapitre par chapitre, des réponses aux questions qu'ils se posent au fur et à mesure de la réalisation de l'interface. Depuis le ciblage de l'application, jusqu'aux choix graphiques, en passant par la conception du système de navigation et les éléments d'interaction, les concepteurs d'interface sont accompagnés dans les différentes phases de leur projet.

Illustrée par de nombreux exemples, cette 5ème édition intègre désormais les interfaces mobiles ainsi que les recommandations pour le e-commerce.

L’audience

"Ergonomie des Interfaces" s'adresse à toutes les personnes impliquées dans la conception et le développement d'applications : logiciels, sites web, applications mobiles ou tactiles, en particulier les responsables de la maîtrise d'ouvrage et des spécifications de l'interface homme-machine.

>> Lire un extrait

Auteurs

Jean-François Nogier

Ce livre est le fruit du parcours professionnel de Jean-François Nogier. Tout d’abord au centre scientifique IBM France, il a mené des recherches sur la communication entre l’homme et la machine. Ensuite à Thales, il a eu l’occasion de participer au développement de centres de contrôle aérien et des postes de travail pour les aiguilleurs du ciel. Puis, comme web manager, il a coordonné les activités web de la filiale Thales ATM.

En 2002, Jean-François Nogier fonde Usabilis, qui depuis 10 ans, accompagne les maîtrises d’ouvrage dans la conception des interfaces des services en ligne et des produits logiciels.

Thierry Bouillot

Passionné par la rencontre de la psychologie cognitive et le monde multimédia, Thierry Bouillot s’est associé naturellement à cet ouvrage. Formé à la recherche fondamentale en psychologie cognitive, il a d’abord étudié les mécanismes de l’attention en laboratoire universitaire à Angers, Bruxelles et Toulouse. Lors de son doctorat, il participe à la mise au point des méthodes d’évaluation ISO pour PSA Peugeot Citroën.

Thierry a rejoint Usabilis en qualité de consultant en ergonomie informatique, spécialiste de la conception d’interfaces et de l’expérience utilisateur ; il est également chargé de l’éditorial et de l’animation du blog Usaddict.

Jules Leclerc

Designer d’interaction, Jules Leclerc est issu d’un parcours dans la conception de produits innovants et d’interfaces graphiques. Formé à l’École de design Nantes Atlantique, sa priorité est de concevoir une interaction de qualité à travers une démarche centrée sur l'utilisateur.
Il débute son parcours professionnel dans la société Violet pour laquelle il travaille sur l’interaction du lapin Nabaztag. Il intègre ensuite une agence de communication dans laquelle il est responsable de la partie numérique.
Aujourd’hui consultant en ergonomie et design chez Usabilis, il intervient sur la conception de logiciels, sites web, applications mobiles ou interfaces TV.