L’avènement des terminaux mobiles a changé beaucoup de choses dans le quotidien des concepteurs d’interfaces. Si les meilleures pratiques de conception d’interfaces mobiles pour iPhone ou iPad étaient facilement appréhendables il y a encore deux ans, la situation s’est considérablement complexifiée ces derniers mois avec la multiplication des formats et des technologies d’écran. Les concepteurs d’interfaces mobiles doivent maintenant jongler avec différents types de smartphones et tablettes, mais ils doivent de plus prendre en compte des résolutions d’écran très disparates (cinema display, HD…). Bref, c’est un authentique calvaire, et nous n’avons plus réellement de repères pour nous y retrouver.

Ce n’est pas la première fois que j’aborde le sujet de la conception d’interfaces mobiles (Des mises en page adaptives aux systèmes de navigation adaptatifs) et ce sujet est régulièrement abordé par d’autres blogs spécialisés dont le très sérieux UXmatters (Designing for Users and Their Devices et Mobile Input Methods). Ils ont justement publié la semaine dernière un très bon article abordant la problématique de résolution d’écran : Common Misconceptions About Touch.

Le point de départ de l’article est que la taille “standard” définie par Apple pour les éléments d’interaction (44 pixels) n’est plus pertinente dans la mesure où  avec ces grandes disparités de résolution d’écran (le dernier smartphone Samsung a un écran full HD). Plutôt que de résonner en pixels, il est ainsi plus rigoureux de se baser sur des dimensions en mm. Nokia et Microsoft préconisent ainsi des éléments d’une largeur minimale de 7 mm, avec un espacement minimal de 2 mm. Le problème est que ces tailles minimales sont plus adaptées à une manipulation au stylet qu’avec nos gros doigts. Le principal argument avancé par l’auteur de l’article est que nous manipulons principalement nos smartphones avec nos pouces, cachant ainsi une bonne partie de l’écran (d’où un grand manque de précision).

De plus, nous n’avons pas le nez sur notre smartphone ou tablette, surtout quand nous sommes en position debout :

D’après l’auteur, ces différents facteurs combinés font que la taille minimum devrait être de 2 mm pour du texte et de 2,8 mm pour une icône. Il fait également fort justement remarqué que le mode d’usage décrit plus haut rend complexe la lecture du texte ou l’identification d’un bouton, mais qu’il perturbe également la précision. L’auteur recommande donc d’élargir la zone d’interaction autour d’un bouton ou d’un lien pour compenser un contexte d’usage problématique (reflet sur l’écran…) et un manque de précision dû à une tenue à une main.

Une solution élégante, mais qui induit un autre problème : celui des zones de recouvrement. Les boutons sont ainsi généralement regroupés en haut ou en bas d’une interface, si l’on utilise une zone d’interaction (touch target) plus large que la zone d’affichage (visual target), les éléments se font concurrence.

Certains navigateurs mobiles comme Chrome anticipent ce problème en affichant un zoom contextuel en cas de pression sur une zone de recouvrement (ici, deux liens l’un au dessus de l’autre) :

Comme vous l’aurez compris, augmenter la taille des boutons permet de faciliter le repérage, mais dans une certaine limite sinon on ne peut pas tout faire rentrer, d’autant plus si vous prévoyez d’étendre la zone d’interaction de quelques pixels. Ceci étant dit, il est tout de même primordial de privilégier le repérage et la prévention des fausses manipulation. L’auteur précise enfin qu’au-delà d’une certaine taille, un champ ou un bouton ne sont plus interprétés en tant que tels par les utilisateurs qui les confondent avec des bannières.

Au final, l’article se termine par des recommandations précises sur le formatage des éléments d’interface :

• hauteur minimum des textes et icônes respectivement de 1,4 et 2,1 mm pour un feature phone ; 2,1 et 2,8 mm pour un smartphone ; 2,8 et 3,5 pour une tablette ;
• hauteur recommandée de 8 mm pour une zone d’interaction sur un bouton (minimum 6 mm et maximum 15 mm) ;
• espacement recommandé de 10 mm entre deux éléments (minimum 8 mm).

Il ne vous reste plus qu’à sortir votre règle pour vérifier si vous respectez ces recommandations !

En ce moment la communauté des concepteurs est en ébullition à propos des interfaces mobiles. Nous pensions avoir trouvé une solution à la multiplication des formats d’écran (ordinateur + smartphone + tablette) avec les mises en page en responsive design, mais c’était sans compter l’imagination des constructeurs. Pour éviter la concurrence directe avec l’iPhone et l’iPad, les constructeurs ont commencé à sortir des formats intermédiaires (phablets de 5 pouces, mini-tablettes de 7 pouces…). En conséquence de quoi les concepteurs doivent maintenant jongler avec un éventail très large d’écrans et de terminaux.

Si la question de la mise en page est à peu près réglée avec les techniques de responsive design, cette multiplication des formats est problématique pour les systèmes de navigation (lire à ce sujet : Les tablettes méritent des interfaces dédiées). La façon dont l’utilisateur tient son terminal a un impact sur la facilité d’accéder aux menus de navigation qui ne doivent pas nécessairement se trouver en haut de page, comme c’est de rigueur avec une page web affichée sur un ordinateur. Les smartphones tout comme les tablettes sont ainsi généralement tenus par le bas, les pouces étant alors les seuls doigts disponibles pour manipuler l’interface.

Partant de ce constat, Luke Wroblewsky et Jason Weaver se sont penchés sur le problème et proposent une solution tout à fait convaincante : Responsive Navigation: Optimizing for Touch Across Devices. Leur idée est de proposer un système de navigation adaptatif qui se positionne en bas de l’écran pour les smartphones et qui est même divisé en deux pour les tablettes.

Je vous invite à constater le résultat sur ces pages : Off Canvas with Navigation Fixed Bottom et Off Canvas with Split Navigation Fixed Bottom.

Le résultat est très convaincant et apporte un plus indéniable en confort d’usage, l’auteur donne un peu plus de détails ici : Exploring Touch Navigation.

Signalons que ce n’est pas la première fois que ces deux personnes collaborent, car elles avaient déjà proposé une solution de mise en page adaptative : Off Canvas Multi-Device Layouts et A Multi-Device Web Layout Pattern. Cette technique permet ainsi d’afficher une mise en page et un menu de navigation différents en fonction du terminal :

Vous pourriez me dire que tout ceci est un peu complexe à maintenir, mais je vos répondrait qu’avec des techniques avancées comme RESS vous pouvez vous simplifier la vie : Améliorez la performance de vos interfaces mobiles avec RESS.

Je pense ne pas me tromper en disant que plus nous avançons dans le temps et plus la situation se complique avec la multiplication des formats de terminaux. Heureusement les techniques de développement gagnent en sophistication tous les ans et permettent de contourner ces difficultés. Reste encore à gérer LE gros point faible des ces astuces : les systèmes de gestion de contenu dont les gabarits de page ne facilitent pas la travail d’intégration.

Voilà un petit moment que je parle de conception d’interfaces mobiles. S’il existe largement assez de documentation sur l’utilisabilité des smartphones (Pour bien démarrer dans la conception d’interfaces mobiles), le cas des tablettes commence à devenir problématique. Si Apple a révolutionné le monde de la mobilité avec l’iPhone et son interface tactile, force est de constater qu’ils se sont contentés du minimum avec la sortie de l’iPad (puisque c’est le même système d’exploitation). Du côté de Google, c’est le même son de cloche avec un Android proposé pour smartphones et tablettes. Le problème est que les smartphones sont maintenant de plus en plus grands (>4,5 pouces) et des tablettes de plus en plus petites (7 pouces pour le Nexus et le Kindle Fire). Il en résulte des interfaces pas forcément adaptées à la taille de l’écran. Jusqu’à présent ceci était géré par l’intermédiaire de versions HD des applications (généralement vendues plus cher, allez savoir pourquoi…), mais cette rustine a des limites.

J’ai déjà abordé le sujet de la conception multi-écran en 2010 et 2011, mais le débat risque de prendre une autre tournure avec l’arrivée de l’iPad Mini. S’il n’est pour le moment pas du tout prévu de scinder iOS en fonction du support (l’interface reste parfaitement homogène sur iPhone ou iPad), des différences commencent à émerger sur Android où les équipes de Google ont la bonne idée d’encourager les développeurs à concevoir des interfaces spécifiques pour tablettes : Google Wants Developers To Build Better Tablet Apps.

Ils viennent ainsi de publier une liste des points à surveiller pour exploiter les points forts des tablettes : Tablet App Quality Checklist. Plusieurs points de vigilance sont ainsi passés en revue avant de lancer une application dédiée aux tablettes :

• Tester la conformité de l’application avec les Core App Quality Guidelines (une sorte de charte de qualité) ;
• Optimiser la mise en page pour éviter l’étirement disgracieux de l’interface ;

  

• Retravailler l’agencement des blocs pour bien exploiter la surface d’affichage ;

  

• Utilisation d’icônes, de polices de caractères et de widgets adaptés aux grands écrans des tablettes ;
• Ne pas rendre obligatoire l’utilisation de matériel non disponible sur certaines tablettes (ex : puce GPS ou APN dorsal) ;
• Déclarer la compatibilité de l’application avec tel ou tel format (ex : 7″, 9″, 11″…).

Toutes ces recommandations sont assorties de belles études de cas de Mint, Instapaper et TinyCo : Developer Stories, The Opportunity of Android Tablets.

Je ne peux qu’approuver cette démarche : les tablettes proposent en effet une surface d’affichage, des modalités d’interaction et des capacités matérielles bien différentes des smartphones. Pire : il existe des différences importantes au sein même du créneau des tablettes avec des produits haut de gamme comme l’iPad 3 et des tablettes chinoises à 100$.

La question que cette initiative soulève est maintenant la suivante : puisqu’ils sont si prompts à donner des conseils aux autres, pourquoi ne montrent-ils pas l’exemple ? La place de marché Google Play n’est ainsi pas très explicite quant à la destination des applications. Autant sur l’App Store il y a un distinguo entre iPhone et iPad, autant sur Google Play ils pourraient appliquer un filtre en fonction de la machine associée à l’utilisateur. Certes, il y a bien une mention “cette application est compatible avec votre xxx”, mais c’est un peu léger.

Attendons de voir ce qu’Apple va annoncer ce soir, notamment une nouvelle version majeure d’iTunes, mais selon moi il est indispensable d’envisager une scission plus marquée au niveau du système d’exploitation : un même Os, mais des interfaces et applications adaptées aux machines : 4″, 5″, 7″, 9″…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Le web est constitué d’une infinité de sites, plus ou moins jeunes. Certains sites changent régulièrement, d’autres sont tellement connus qu’ils se contentent d’une refonte tous les 10 ans (W3C, IMDB, MSDN… quand les dinosaures se font une jeunesse), d’autres doivent se faire forcer la main (Propositions de refonte pour Wikipedia et Craigslist). Même s’il n’existe pas réellement de règle sur la fréquence idéale de mise à jour ni sur l’obligation de coller aux “tendances” graphiques, il y a toujours des irréductibles pour traîner des pieds. De façon surprenante, les dernières refontes majeures d’Amazon et Ebay datent d’il y a 4 ans, à moins d’un mois d’intervalle (Une nouvelle version pour eBay et Une nouvelle version pour Amazon). Ils se sont visiblement donnés le mot, car les deux ancêtres de l’internet se en train de déployer quasi simultanément une nouvelle version.

Commençons par Ebay qui semble avoir lancé son chantier légèrement en avance avec une mise en page à étages :

Cette nouvelle page d’accueil privilégie visiblement la sobriété, car elle suprime la couleur jaune historiquement utilisée dans le menu de navigation. Pour cette nouvelle version, nous avons donc droit à une hiérarchisation très formelle des unités d’information : la recherche, la navigation, la réassurance (Welcome, Shop safely) et la communauté (Popular). Une large place est encore réservée à la publicité et à l’auto-promotion (le gigantesque carrousel au centre de la page).

Concernant la page intérieure, un gros effort a été fait pour simplifier la compréhension des différentes versions d’un même produit (New, Refurbished, Used, Bundles…) et une présentation beaucoup plus proche de ce que l’on trouve sur des sites marchands traditionnels :

Avec cette refonte, Ebay souhaite donc développer la performance marchande de sa plateforme, au détriment peut-être de ses contenus ou de la communauté.

Pour Amazon la refonte est plus radicale avec un objectif d’interopérabilité : Amazon is testing a slick new site design, built with tablets in mind. Le haut de page est donc réduit au minimum avec un menu de navigation replié par défaut et un gigantesque moteur de recherche :

Visiblement cette refonte n’est que partielle, car elle ne concerne que le header. Vous constatez de plus que sur la version ci-dessus ce dernier est utilisé à des fins d’auto-promo, mais que dans sa version standard, le traitement graphique du header est d’une sobriété à toute épreuve :

Nous avons donc confirmation que le coeur de page ne change pas et que la refonte se concentre sur une réorchestration du header et principalement du menu de navigation. La raison de cette refonte est très simple : Le menu de navigation actuel fonctionne très bien sur un ordinateur, mais est très problématique sur une tablette où il n’est pas possible de survoler un item avec la souris.

Outre une plus grande sobriété pour donner plus d’importance aux produits, la motivation première d’Amazon semble donc être d’anticiper la montée en puissance des tablettes avec une conception orientée multi-écran. Pour le moment cette nouvelle version n’est pas encore déployée en Europe, et j’attends avec impatiente de pouvoir la tester sur différents terminaux mobiles.

MàJ (21/09/2011) : Visiblement l’approche d’Amazon fiat des émules car la BBC s’y met également : The BBC debuts new touchscreen-inspired homepage design.

Rétrospectivement, les questions que nous nous posions il y a 5 ans quand il était question de concevoir une interface étaient plutôt triviales : “Quelle largeur d’écran ?“, “Faut-il souligner les liens ou non ?“… Il faut dire qu’à l’époque, le web se consommait quasiment exclusivement au travers d’un ordinateur. Nous sommes maintenant en 2011 et la situation s’est nettement complexifiée avec la montée en puissance des smartphones et des touchbooks. Et comme si ça n’était pas assez, certains commencent déjà à anticiper l’arrivée des TV connectées.

La conception multi-écran est donc de nouveau sur le devant de la scène avec la dernière Alertbox : Transmedia Design for the 3 Screens. Le Dr Nielsen nous y explique que si les smartphones sont en train de dominer les usages, les tâches à valeur ajoutée seront toujours réalisées sur un ordinateur (achat en ligne, déclaration d’impôts, choix d’une voiture…). Il convient donc de ne négliger aucun de ces deux formats (ordinateur et smartphone), voir de commencer à réfléchir aux prochains formats (touchbooks, TV connectées…). La recommandation du Dr est comme toujours très consensuelle : Développer des interfaces distinctes, mais conserver la même expérience utilisateur (mêmes codes visuels, fonctionnalités et contenus similaires…). Précisions que cette Alertbox fait écho à un précédent article publié dans UX Magazine : UX Concerns Across Mobile Platforms.

Dans la pratique, vous vous doutez bien que la mise en oeuvre est plus complexe. Je vous propose pour celà d’étudier deux approches. Il y a tout d’abord celle d’Amazon qui fait le pari d’une nouvelle version de son site web qui soit adaptée au format touchbooks : Amazon is testing a slick new site design, built with tablets in mind.

Un choix de conception plutôt audacieux, même si le risque est minimisé par l’ancienneté des clients qui de toute façon retrouveront leurs marques. Il n’empêche que c’est à ma connaissance la première initiative de ce genre pour un site à très large audience. Précisons qu’Amazon édite également d’autres interfaces comme Windowshop, une version mobile ainsi que des applications mobiles.

Deuxième exemple avec Google qui propose des versions mobiles “universelles” de ses sites, mais également une toute nouvelle application iPad marchande : Google Catalogs.

De même, ils avaient lancé l’année dernière une version minimaliste de YouTube (Leanback) pour rendre la consultation plus agréable sur touchbook (ou sur TV) : YouTube Leanback offers effortless viewing.

En étudiant ces différents exemples, il apparait donc comme évident que l’interface universelle est une arlésienne, surtout avec la multiplication des formats (cf. Panorama des terminaux alternatifs). Ceci étant dit, il faut tout de même trouver une solution. Je préconise donc un compromis avec une interface web adaptable (cf. 4 feuilles de styles pour 4 expériences de lecture) et des interfaces spécifiques à chaque format / terminal pour une meilleure expérience (des applications payantes ou avec un accès par abonnement).

Dans tous les cas de figure, le plus important n’est pas de se focaliser sur les interfaces (car les formats vont se multiplier et évoluer), mais sur ce qu’il y a derrière : Le middle-office permettant de délivrer le contenu et les fonctionnalités. À partir du moment où vous avez une architecture “propre” qui dissocie le fond de la forme, vous pouvez petit à petit déployer des interfaces en fonction de l’évolution du marché.

Le Dr Nielsen et son équipe viennent de publier la nouvelle édition de leur étude sur l’utilisabilité de l’iPad : iPad Usability, Year One. Non seulement cette étude est exhaustive et rigoureuse, mais en plus elle est gratuite ! Pour rédiger cette seconde édition, ils ont recueilli les impressions de 16 utilisateurs sur 26 applications et 6 sites web : Usability of iPad Apps and Websites, 2 Reports With Research Findings.

Au travers de cette étude, ce n’est pas tant l’iPad que les touchbooks qui sont le sujet d’étude. Les conclusions de l’étude sont assez proches de celle publiée l’année dernière, mais de nombreuses petites améliorations ont pu être constatées du fait de l’année d’expérience accumulée par les concepteurs d’applications.

Les principales difficultés rencontrées par les utilisateurs sont les suivantes :

• Les liens affichés à l’écran sont suffisamment gros pour être lus, mais pas assez pour être cliqués avec précision ;
• Les zones cliquables sont en règle générale trop petites et pas suffisamment faciles à identifier ;
• La saisie reste très laborieuse (surtout les formulaires) ;
• Les sites web peuvent être consultés dans de très bonne conditions mais les interactions sont limitées (du fait de l’impossibilité de faire des clics avec le bouton droit de la souris ou d’afficher des infos au survol d’un élément) ;
• Les écrans d’accueil (splash screen) génèrent de l’impatience et devraient pouvoir être sautés ;
• Il y a par fois trop de zones à balayer à l’écran (ex : un cadre à défilement vertical et un carrousel à défilement horizontal dans une page qui peut être tournée) ;
• La densité des éléments de navigation est trop forte (chaque clic sur un élément mène à une nouvelle page) ;
• Les concepteurs ne tiennent pas compte du fait que les touchbooks sont généralement partagés entre plusieurs membres de la famille.

À partir de ces enseignements, nous pouvons donc formuler un certain nombre de recommandations :

• Si la lisibilité des contenus est bonne, ne négligez pas la simplicité d’utilisation en prévoyant de larges zones d’interactions (avec suffisamment d’espace neutre autour pour éviter le parasitage), en aérant les écrans (avec une distribution verticale plutôt que de tout condenser en un seul écran) et en rendant plus explicite le repérage des items de navigation ou les éléments interactifs.
• Facilitez la découverte et la compréhension de l’interface (tutoriels, indices visuels…) sans néanmoins l’imposer aux utilisateurs réguliers ;
• Adaptez vos sites web aux contraintes et contextes d’usage des tablettes (mise en page, densité d’information…).

Cette étude nous révèle également que les tablettes sont principalement utilisées dans un contexte de divertissement pour consommer des contenus (infos, magazines…) et des jeux.

Hasard du calendrier, l’institut Nielsen vient également de publier une étude sur les contextes d’usage des terminaux connectés : In the U.S., Tablets are TV Buddies while eReaders Make Great Bedfellows. Cette étude menée auprès de 12.000 participants nous donne ainsi des statistiques précises sur l’endroit ou le contexte dans lequel les utilisateurs exploitent leurs terminaux :

• Les 2/3 des possesseurs de tablettes l’utilisent en regardant la TV, la moitié au lit et 40% avec des amis ou en attendant quelque chose ;
• 61% des possesseurs de ereader l’utilisent au lit, seulement 1/3 en regardant la TV ou en situation d’attente ;
• Les propriétaires de smartphone en font un usage très diversifié (devant la TV, au lit, dans les transports, en faisant du shopping, avec des amis, en situation d’attente).

Ces données illustrent bien le fait que les smartphones sont de loin les terminaux les plus versatiles, alors que les ereaders, conçus pour la lecture de ebooks, ne sont pas exploités pour grand-chose d’autre (logique). Les tablettes semblent être par contre le compagnon idéal des téléspectateurs qui doivent y trouver un parfait complément pour trouver de l’info ou faire des interactions sociales.

Tout ceci est confirmé par une seconde série de chiffres sur la répartition du temps d’utilisation :

De cette seconde étude, nous pouvons tirer deux enseignements :

• Les chaines de TV ont du souci à se faire car l’attention des téléspectateurs est partagée ente l’écran et leur terminal, d’où un impact certainement plus faible des spots publicitaires (cf. iPads Are Mingling With TVs, While Kindles Get Busy In The Bedroom) ;
• 1/5 du temps d’utilisation des tablettes se fait au lit donc en position allongée, les concepteurs d’applications devront donc en tenir compte et proposer des modalités d’interaction à une seule main (l’autre servant à tenir le terminal).

Deux études fortement intéressantes et gratuites en quelques jours, c’est définitivement un très bon mois !

Voilà maintenant 4 ans qu’Apple a lancé son iPhone sur le marché. Quatre années intenses qui ont complètement bouleversé le secteur de la téléphonie mobile, mais pas seulement ! Avec le lancement de l’iPad l’année dernière, Apple à initié un mouvement plus profond de transformation des usages qui vont modeler notre façon de consommer les contenus et services en ligne.

Salué pour sa stabilité et sa simplicité de prise en main, le système d’exploitation D’apple est en fait bien plus disruptif qu’il n’y parait, car iOS rend obsolète les éléments d’interface et modalités d’interaction que nous avons côtoyés ces dernières décennies (lire à ce sujet : Quelle interface pour le système d’exploitation de demain ?).

La fin de la souris

Avec iOs, Apple a su populariser les interfaces tactiles signant ainsi la fin de la souris. Inventée dans les années 70 au PARC, la souris a rendu de fièrs services à l’humanité (si si !), mais montre maintenant ses limites face à ce que l’iPhone et surtout l’iPad nous permet de faire avec nos doigts. L’air de rien, la charte graphique et ergonomique d’iOS a permis d’assurer la cohérence des applications et d’éduquer ainsi les utilisateurs à une interface sans souris. Certes, nous y perdons le clic droit et le survol, mais nous gagnons les gestuelles à plusieurs doigts (cf. Vers une standardisation des interfaces tactiles).

Là où ça devient intéressant, c’est qu’en nous passant de la souris, nous pouvons également nous passer des barres de défilement horizontales ou verticales : iOS, OS X and The Death of the Scrollbar.

La question que l’on se pose maintenant est la suivante : comment bénéficier des apports des interfaces tactiles avec les ordinateurs traditionnels ? Facile, vous pouvez soit utiliser le Magic Trackpad, soit utiliser les ordinateurs de bureau avec écran tactile. Finalement peut-être est-ce là le secret : utiliser une combinaison de souris, écran tactile et pourquoi pas trackpad géant (10/GUI réinvente le pavé tactile pour remplacer la souris).

La fin du clavier

Apple a également introduit pas mal d’innovations pour son clavier virtuel. Il y a tout d’abord le système de correction avec son principe d’auto-apprentissage, mais il y a surtout l‘adaptation du clavier au contenu que vous devez saisir :

Une innovation bien pratique qui compense la perte de rendement (vitesse de frappe) et qui trouve par ailleurs un écho auprès des fabricants de claviers comme l’Optimus Maximus. Certes, le clavier virtuel n’est pas une solution envisageable pour ceux qui doivent saisir une grande quantité de texte, mais pour les autres…

La fin des logiciels

Autre approche disruptive d’Apple : remplacer les logiciels par des mini-applications. Un coup de génie pour Apple qui a ainsi pu verrouiller son système de distribution, mais également une nouvelle approche de la consommation des services en ligne.

En adoptant une approche fragmentée de l’outil informatique (une multitude d’applications monotâches par opposition aux suites logicielles), Apple a mis en place un système lui permettant de nourrir tout un écosystème par le biais de micro-transactions, mais également un moyen de contourner les limitations du navigateur embarqué. Les sites web sont ainsi remplacés par des applications connectées qui permettent de mieux tracker et encadrer les utilisateurs.

Autre conséquence d’une approche fondée sur les mini-applications : la disparition du navigateur de fichiers (cf. Observed, The Death of the File System). Là encore, on se dit qu’un système d’exploitation comme Mac OS pourrait bénéficier de cette approche avec une gestion semi-automatisée des fichiers : tout comme iTunes se charge d’organiser vos fichiers musicaux, nous pouvons tout à fait envisager des applications qui se chargent elles-mêmes de ranger et d’accéder à vos fichiers de travail. Une aberration ? Pas tant que ça si l’on envisage un système automatique débrayable.

Notez que ça fonctionne aussi pour les photos avec iPhoto ou Picasa qui propose un navigateur intégré.

La fin de l’ordinateur ?

Plus de souris, plus de clavier, plus de logiciels ou de navigateur de fichiers, ça en fait des changements ! Pour autant peut-on dire qu’iOS est le système d’exploitation qui va remplacer ceux des ordinateurs traditionnels ? Non absolument pas, ça serait faire un raccourci abusif. Par contre je pense ne pas me tromper en disant qu’iOS couplé à l’iPad a su montrer au grand public qu’une partie de ses besoins quotidiens ne nécessitaient pas forcément un ordinateur traditionnel.

L’adoption par le grand public de l’iPad a eu ainsi un impact immédiat sur les ventes de netbooks. Nous pouvons également constater une modification plus profonde des habitudes de consommation : Tablets Starting to Replace Other Traditional Devices. iOS et l’iPad ont donc initié un mouvement de transformation des habitudes des utilisateurs de l’outil informatique, Apple a réussi là où les constructeurs de netbooks ont échoués. Mais la partie n’est pas pour autant terminée car Google mise beaucoup sur son système d’exploitation Android et surtout sur son Chrome OS et le principe du cloudbook.

Il y a deux ans je m’interrogeais sur la nécessité d’adapter les sites web aux spécificités des netbooks. L’année dernière, j’avais une réflexion similaire pour les touchbooks : Faut-il réinventer le web pour les touchbooks ?. Au vu du succès de l’iPad et des ambitions de ses concurrents, il me semble évident que les éditeurs de contenus, services en ligne et même logiciels doivent dès maintenant tirer les leçons du succès d’iOS et commencer à faire évoluer leur offre pour mieux correspondre aux nouvelles habitudes des utilisateurs.

Conclusion : avec iOS, Apple a-t-il réinventé l’outil informatique ? Non, il l’a fait évoluer durablement, il ne tient qu’à vous d’en profiter plutôt que de la subir. La bonne nouvelle est que vous avez encore un peu de temps devant vous pour anticiper les changements qui vont en découler, mais ne tardez pas trop !

Ces derniers temps je parle de plus en plus des terminaux mobiles, et pour cause : ils prennent une place de plus en plus importante dans notre quotidien et surtout dans notre consommation de l’internet (services et contenus). Avec la multiplication des plateformes mobiles et même des formats de terminaux alternatifs, les concepteurs de sites et services en ligne s’arrachent les cheveux pour trouver des solutions à cette fragmentation.

Présentée à la communauté l’année dernière, la technique du Responsive Web Design semble apporter une réponse concrète à la prolifération des formats d’écran. Jusqu’à présent, lorsqu’un internaute visitait un site ayant plusieurs interfaces, il était redirigé vers la version du site qui correspondait le mieux à son mode d’affichage (ex : IMDB.com qui renvoie vers m.IMDB.com si vous le consultez avec un smartphone). Le principe du Responsive Web Design est de ne proposer qu’une seule URL avec une interface qui s’adapte en fonction de votre écran en exploitant différentes feuilles de styles CSS (et les media queries qui peuvent maintenant s’exprimer en largeur de page).

L’exemple ci-dessus vous permet de tester ce principe en redimensionnant la fenêtre de votre navigateur. Ce n’est donc pas qu’une question de largeur de page, mais une nouvelle façon de penser les interfaces web. L’approche de l’auteur (traduction française disponible ici : Le Web Design Réactif) est donc de prévoir à la fois une mise en page qui s’adapte (nombre et largeur des colonnes), mais également des images qui se redimensionnent et même des éléments qui sont repositionnés voir supprimés.

Ce type d’interface demande un minimum d’expertise et surtout un gros travail de préparation en amont pour “penser” une interface en plusieurs largeurs. Il existe heureusement un certain ombre d’article traitant de ce sujet :

• Responsive Web Design: What It Is and How To Use It
• Understanding the Elements of Responsive Web Design
• Les Media Queries CSS3
• The best responsive web design examples and resources

Avec la récente sortie de nouvelles versions de navigateurs (IE9, Firefox 4, Chrome 11, Opera 11…), l’utilisation de ce type de technique va devenir une réalité et évitera de devoir passer par du code javascript et des acrobaties pour assurer une t-rétro-compatibilité.

Encore une fois, c’est un sujet assez technique, mais qui concerne une approche radicalement novatrice dans la distribution de contenus et services en ligne. La plupart des réalisations déjà disponibles concernent des sites de designeurs (visibles sur MediaQueri.es), mais nous commençons à voir des sites de beaucoup plus grosse importance adopter cette technique comme la rubrique Election du Chicago Tribune :

Les exemples listés sur MediaQueri.es sont illustrés en 3 largeurs (smartphones, netbooks/tablettes et ordinateurs) mais peuvent potentiellement s’adapter à n’importe quelle interface (téléphones mobiles, TV connectées, consoles portables…). Je suis particulièrement enthousiaste quant à cette approche de la mise en page d’un site ou service en ligne. D’ailleurs une réécriture du gabarit de ce blog est en cours pour justement exploiter les medias queries. Des explications détaillées seront publiées quand ce nouveau thème sera en ligne.