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.

Vous ne vous en êtes sans doute pas rendu compte, mais une terrible bataille se livre en ce moment dans votre poche. Je fais référence à l’implacable compétition entre les éditeurs d’applications météo pour smartphone. Ça n’a l’air de rien, après tout il existe une application qui le fait gratuitement et qui est pré-installée, mais les gros et petits éditeurs rivalisent d’ingéniosité pour faire ressortir leur application du lot. Je vous propose donc une petite sélection, très instructive,  des tendances en la matière.

Commençons tout d’abord avec les acteurs légitimes du secteur comme Météo France ou The Weather Channel qui tentent de faire des efforts, mais ont bien du mal à proposer quelque chose de convaincant :

Comme vous pouvez le constater, ces applications ne sont pas très belles, mais elles essayent de compenser cette faiblesse par des données plus complètes. Le problème est que ces données sont moins complètes que d’autres applications “pro” ou “semi-pro” comme My-Cast ou Weather Underground :

Là encore, ces applications sont très riches en données météorologiques, mais ne sont pas très agréables à regarder et utiliser. Pourtant, il existe des références en la matière comme la très belle application de l’institut météorologique finlandais (The Finnish Meteorological Institute’s Weather) :

Dans un style encore plus minimaliste, mais haut en couleur, la marque de fringues japonaise Uniqlo propose une application surprenante qui vous réveille avec une musique adaptée au temps :

Pour chercher des choses plus intéressantes, il faut définitivement aller du côté des éditeurs indépendants. Et puisque nous sommes dans le registre du minimalisme, admirez le travail de l’application WTHR qui propose une interface d’une simplicité et d’une élégance remarquable :

Il y a également des applications remarquables qui jouent sur les animations et les effets de transition comme le superbe eWeather HD avec ces incroyables interfaces de prévisions (forecast en anglais) :

La palme revient très certainement à Weatherwise qui propose une sublime application avec de magnifiques visuels animés en fonction des conditions (soleil, pluie…), de l’heure (jour, nuit) ou du vent (les éléments suspendus se balancent) :

Au final, que faut-il retenir de ces différentes applications ? Que ceux qui disposent des données les plus complètes / précises ne sont pas forcément capables de proposer des applications utiles et agréables. Par contre, je constate que les applications proposant la meilleure expérience sont proposées par des éditeurs de jeux mobiles. Comme quoi, les dimensions ludiques et artistiques ne peuvent être maitrisées que par ceux qui les pratiquent de longue date.

À méditer…

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…) !

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

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

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

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

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

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

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

J’ai déjà plusieurs occasions de vous parler des design pattern library (Vive les librairies de modèles de conception d’interfaces et Et on reparle des bibliothèques de modèles de conception), par contre je n’avais jamais abordé les librairies qui concernent les interfaces mobiles. Un manquement impardonnable tant le sujet est chaud (Pourquoi iOS est plus disruptif que vous ne le pensez) et le besoin est pressant (2011, l’année du point de bascule).

Je vous propose donc ce matin de découvrir plusieurs sources d’inspiration pour concevoir vos interfaces mobiles, principalement des interfaces d’applications pour smartphones. Commençons avec Mobile Patterns, une collection d’interfaces mobiles réparties dans une quinzaine de catégories :

Il y a ensuite Pttrns qui propose un équivalent, mais avec une trentaine de catégories :

Il y a enfin LovelyUI qui propose moins de catégories, mais un système de tags bien pratique :

Il existe d’autres sources, mais ces trois bibliothèques devraient vous fournir tout ce dont vous avez besoin pour avoir une vue synthétique des meilleurs pratiques de conception d’interfaces mobiles. Ces bibliothèques présentent l’avantage de classer les interfaces dans des catégories, par contre elles sont très loin d’être exhaustives. C’est pourquoi je vous recommande également Cocoa Controls, une base de référence de l’ensemble des éléments d’interfaces des interfaces Mac (avec une section pour les contrôles iOS). Dans le même style, je peux également vous recommander Android Patterns qui propose une sélection d’éléments d’interface propres au système d’exploitation mobile de Google.

Si vous ne cherchez pas particulièrement des exemples de composants d’interface, simplement l’inspiration, je peux enfin vous proposer quelques collections d’interfaces : CSS iPhone, Make Better Apps, Tap Fency, Refined Mobile Design, Dribbble ou Ember.

Pour finir, si vous avez encore un peu de temps, faites donc un détour par Landing Pad (collection d’interfaces d’applications iPad) et AppSites (collection de sites web d’applications mobiles).

(via UX Movement et Mobile GUI)

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.

Voilà maintenant près de 4 ans que l’iPhone a été présenté au grand public, et 4 ans que les concepteurs d’interfaces mobiles se creusent la tête pour pouvoir exploiter au mieux la taille réduite de l’écran. Outre cette contrainte au niveau de la surface utile d’affichage, les applications mobiles ne sont utilisées que de façon intermittente, la prise en main doit donc se faire très rapidement pour ne pas frustrer les utilisateurs (cf. iPhone Apps Need Low Starting Hurdles).

Autant sur un ordinateur et dans le cadre d’une application traditionnelle, les utilisateurs tolèrent de passer un peu de temps à apprendre les fondamentaux de l’interface et la logique de l’application (après tout vous n’installez pas si souvent de nouveaux logiciels sur votre ordinateur). Sur les smartphones, et plus particulièrement l’iPhone, le contexte est différent, car l’utilisation quotidienne est répartie sur une multitude de petites applications. Les utilisateurs d’iPhone sont également amenés à télécharger et installer plusieurs nouvelles applications par semaine (du moins pour les plus assidus). Il est donc inconcevable de leur faire lire un manuel ou de leur imposer une longue séquence d’apprentissage. Les iOS Human Interface Guidelines publiées par Apple sont d’ailleurs très explicites sur la nécessité de se concentrer sur la tâche principale et d’apporter une satisfaction immédiate.

Le blog InspireUX nous propose à ce sujet un très bon article sur les différentes façons de faciliter la compréhension d’une interface et son fonctionnement : Top 6 Help Design Patterns for iPhone Apps. L’auteur a ainsi identifié 6 design patterns :

• Les vidéos de démonstration qui présentent les fonctionnalités principales de l’application. Une solution intéressante, mais coûteuse à produire et frustrante pour les utilisateurs les plus impatients (et ils sont nombreux). Exemple avec l’application Convertbot :

  

• Les tutoriels, généralement présentés écran par écran. Une solution simple et legère, mais qui n’est pas forcément évidente à trouver une fois proposée à l’initialisation de l’application. Exemple avec l’application FLUD :

  

• L’écran aide en sur-impression qui s’affiche sur sollicitation de l’utilisateur. Une solution simple et efficace, mais qui ne convient pas aux interfaces complexes qui nécessitent de longues explications. Exemple avec l’application Pulse News :

  

• Les visites guidées qui proposent une cinématique complète des différents écrans. Une très bonne entrée en matière mais, qui condense l’apprentissage en une seule session. Exemple avec l’application Shopkick :

  

• Les écrans d’aide qui sont associés aux fonctionnalités (“Tips“). Cette solution permet de fragmenter l’aide et de proposer des explications beaucoup plus courtes et surtout directement en rapport avec l’écran en cours de consultation. Exemple avec l’application Evernote :

  

• Les aides contextuelles qui sont affichées en sur-impression lors de la première visite et disparaissent au bout de quelques secondes. C’est la solution que je préfère car elle fait un très bon usage de la contextualisation, mais ne peut pas délivrer de trop longues explications. Exemple avec l’application Instagram :

  

Voici donc une très belle collection de solutions d’aide et de prise en main pour les smartphones. Je suis intimement convaincu qu’une solution n’est pas forcément meilleure que les autres, car tout dépend de l’application en question (de la richesse de son interface et du nombre de fonctionnalités proposées). Il n’empêche que, comme toujours, le mieux est de combiner les solutions présentées plus haut :

• Une démo avec captures d’écran qui présente l’application dans les grandes lignes. Ce tutoriel est imposé lors de la première ouverture de l’application (avec la possibilité de le sauter) et est facilement accessible sur l’écran d’accueil.
• Des tutoriels qui résument en quelques étapes les fonctionnalités-clés.
• Une aide contextuelle en plein écran qui vient s’afficher en surimpression lorsque l’in clic sur l’icône d’aide (qui est présent sur chacun des écrans).

La démo ainsi que les tutoriels peuvent également servir sur le site web de l’application pour en assurer la promotion et pour nourrir la partie “Support”. Si vous avez de bons exemples d’applications qui combinent ces différentes méthodes, n’hésitez pas à les mentionner dans les commentaires.