La liste des nommés pour la nouvelle édition des Webby Awards à été annoncée la semaine dernière : The 17th Annual Webby Nominess Unveiled. Pour celles et ceux qui ne connaissent pas, ces Awards récompensent les meilleures créations digitales au travers du vote du public. Un rendez-vous annuel prestigieux pour tous les acteurs de l’industrie.

Une étude publiée l’année dernière nous apprenait que l’utilisabilité des sites avait globalement stagné ces 12 dernières années, mais ce n’est visiblement pas le cas du design des sites. Pour s’en rendre compte, les organisateurs viennent justement de mettre en ligne les archives des 17 dernières années : The Webby Awards Create Groundbreaking Winners Gallery And Archive.

Du coup, je n’ai pas pu résister à l’envie de me plonger dans ces archives et de vous remonter quelques pépites qui ont marqué l’histoire du web :

• Edmund’s, une antiquité de 1997 dans la catégorie Money ;
  

  

• Amazon, LE grand gagnant de l’année 1999 dans les catégories Commerce et Technical Achievement ;

  

• Google en 2000 dans la catégorie Technical Achievement (vous noterez que cette page d’accueil a été simplifiée entre temps);

  

• Graigslist en 2001 dans la catégorie Community (vous constaterez que le site n’a quasiment pas changé d’un pixel) ;

  

• ZoomZoom en 2002 dans la catégorie Fashion avec un magazine en ligne en plein écran ;

  

• CarStuckGirls en 2004 dans la catégorie Weird (j’en avais déjà parlé à l’époque) ;

  

• FreedomOfTheSeas en 2006 dans la catégorie Best Use of Video avec une très impressionnante visite guidée vidéo ;

  

• Milk en 2008 dans la catégorie Food & Beverage, qui avait beaucoup impressionné par son usage du rich media ;

  

• Twitter en 2009 dans la catégorie Breakout ;

  

• Pinterest en 2012 dans la catégorie Social Media.

  

Cette plongée dans les archives est particulièrement amusante, un peu comme de parcourir de vieux albums photo et de rire des fringues et coupes de cheveux désuètes. Je regrette par contre que l’on ne retrouve pas dans ces archives les sites de 2Advanced et le FutureVision de Vodafone (Votez pour le meilleur site Flash de la décennie).

Sinon je vous encourage à jeter un oeil à la sélection 2013, j’ai un faible pour les suites suivants : SquareSpace, Hipmunk, Marshall Headphones, Fab et le nouveau SoundCloud. Et vous ?

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 !

Depuis que le web existe, les acteurs de la presse et autres éditeurs de magazines s’arrachent les cheveux pour reproduire une expérience de lecture enrichissante à l’écran. Problème : personne ne lit à l’écran ! Si l’on commence à y voir un peu plus clair dans la meilleure façon de porter un journal sur le web (le NYTimes est un très bon exemple), la tâche est beaucoup par contre beaucoup plus ardue pour les magazines. Certains ont déjà proposé des solutions innovantes comme MSN Glo (cf. MSN expérimente des nouveaux formats pour ses magazines en ligne), mais ça reste marginal.

Ceci étant dit, les choses sont en train de changer avec notamment la montée en puissance de HTML5 (Dopez votre narration interactive avec HTML5) et des tablettes (2013 sera l’année du tablet first). Nous avons ainsi pu voir des choses tout à fait intéressantes chez USA Today ou Quatrz avec des interfaces adaptées pour la lecture à l’écran sur ordinateur ou tablette.

Outre le problème de la mise en page, il y a surtout un gros défi à relever en ce qui concerne le positionnement du magazine en lui-même. Certains magazines “haut de gamme” proposent ainsi des interfaces incroyablement froides, censées correspondre à l’univers du luxe (ex : Vogue, Dujour ou Variety).

Vous conviendrez que ce n’est pas avec ces mises en page glaciale que l’on va révolutionner la lecture à l’écran…

Heureusement, d’autres pistes sont explorées, avec de belles innovations à la clé :

• Des sites de contenu minimalistes qui s’inscrivent dans le mouvement du slow web (Suit-up or Die, The Great Discontent, Edits Quarterly) ;

  

• Des mises en page très sophistiquées, comme chez Polygon (cf. The Rise of Barcade et Tomb Raider Review) ;

  

• Une scénarisation de la narration comme chez Google (How Search Works).

  

Ces trois exemples sont, à mon sens, les plus représentatifs des transformations en cours dans le milieu de la création de contenus en ligne. Ils ne sont pas anondins, car rappelez-vous que l’information est gratuite et abondante sur le web. À partir de ce constat, trois leviers me semblent intéressants à travailler pour se démarquer :

1. La curation du contenu pour lutter contre l’infobésité (la nouvelle version de Digg illustre bien ce retour en arrière) ;
2. Le confort de lecture avec des mises en page beaucoup plus légères, adoptées par tous les gros blogs high-tech (TNW, Mashable…) ;
3. Une narration enrichit comme le très remarqué Snow Fall (Le NY Times innove avec Snow Fall, mais illustre les limites de la narration multimédia).

Nous avons donc de belles pistes à explorer pour réenchanter les internautes et leur donner envie de lire à l’écran. Reste à trouver les leviers de monétisation pour financer ça, mais c’est une autre histoire…

Aviez-vous remarqué qu’en quelques années les carrousels avaient envahi quasiment l’ensemble des sites de média et des boutiques en ligne ? Les carrousels sont ces énormes blocs où des extraits de contenus défilent, comme un ruban horizontal. S’ils sont bien pratiques pour faire rentrer toute l’actualité et les promos, leur principal intérêt est de pouvoir “donner vie” à un site. Je ne savais qu’il y avait des sites vivants et d’autres morts. Je ne savais pas non plus que les internautes refusaient de visiter les sites statiques où “il n’y a pas de vie”. Bref, j’ai comme l’impression que la profession a adopté les carrousels sans trop se poser de question. Pourtant, ces éléments d’interface soulèvent de nombreuses questions :

• Le principe de défilement horizontal est-il simple à utiliser ?
• Les différents panneaux qui se succèdent fournissent-ils une information précise sur le contenu du site ?
• Les couleurs vives, titres racoleurs et animations ne font-ils pas trop ressembler les carrousels à des bannières ?

Bref, la question est de savoir si l’énorme place attribuée aux carrousels en page d’accueil, au détriment des autres éléments, est justifiée. Et visiblement la réponse est : Non ! Il y a en premier lieu le gros problème d’utilisabilité de ces panneaux qui défilent : le temps que les internautes lisent le message affiché et prennent la décision de cliquer, c’est un autre panneau qui s’affiche (The Unstoppable Carousel).

Ceci étant dit, les principaux points de vigilance de l’utilisabilité des carrousels ont déjà été identifiés : 5 Big Usability Mistakes Designers Make on Carousels. Si vous êtes à la recherche d’un bon exemple, le portail de la BBC semble avoir respecté tous ces points :

Le carrousel est parfaitement identifié en tant que tel (“Top News Story“), le point orange indique le nombre de panneaux ainsi que le panneau actif, des flèches permettent de basculer plus rapidement sur les autres panneaux. Le survol avec la souris permet de mieux comprendre son fonctionnement :

Le bouton Play/Stop afficher un plein milieu permet d’arrêter le défilement et les vignettes sur les flèchent servent à anticiper les prochains contenus. Ce carrousel est donc un modèle du genre, qui fonctionne parfaitement sur un site média, mais qui n’a pas forcément sa place sur une boutique en ligne.

Très largement utilisés sur la page d’accueil des boutiques en ligne, les carrousels se révèlent pourtant très encombrants et pas forcément efficaces : Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad. Les différents tests réalisés sont sans appel : les carrousels sont soit ignorés, car confondus avec des bannières, soit ils monopolisent l’attention d’utilisateurs hypnotisés par le mouvement des panneaux sans réellement retenir les messages. Des observations confirmées par cette discussion entre professionnels : Are carousels effective?.

Les carrousels ne méritent donc pas la place qu’on leur accorde. Mais alors pourquoi les retrouve-t-on partout ? La réponse semble se trouver dans cet article : Carousels on ecommerce sites, are they worth bothering with?. La raison pour laquelle les carrousels sont si populaires est qu’ils permettent de faire rentrer autant de promotions que possible et d’éviter ainsi des conflits internes sur la priorité à donner à telle ou telle opération.Cette raison peut vous décevoir, mais en tout cas elle ne me surprend pas réellement. De nombreux choix de conception sont ainsi guidés par l’ego ou sont le fruit de compromis pour éviter des gue-guerres internes.

Ce qu’il faut retenir de ces différents écrits et discussions est que des blocs de promotion ou de mise en avant statiques sont bien plus efficaces qu’un carrousel. Il va donc falloir vous armer de courage pour convaincre vos collègues d’abandonner cette “norme”, au même titre que la règle des 3 clics. Pour se faire, le meilleur moyen est de vous appuyer sur des statistiques : placez un marqueur sur le carrousel suffira à démontrer un taux de clic très faible. Sinon vous pouvez également argumenter sur le fait que les gros sites de commerce en ligne comme Soap, Zalendo ou MisterGoodDeal n’utilisent plus les carrousels.

Voilà plus de 15 ans que travaille dans le milieu de l’internet, et presque autant d’années à concevoir des sites web.  S’il y a bien une leçon que j’ai retenue au cours de ces années, c’est que la conception d’une page d’accueil est un exercice très périlleux, et pourtant, c’est ce que les clients demandent à voir en premier. C’est un peu comme si vous demandiez à un l’architecte qui va construire votre maison si vous pouviez rentrer dans le salon avant même d’avoir vu les plans. Pour en avoir discuté longuement autour de moi, je sais que je ne suis pas le seul à éprouver de la frustration à ce sujet.

La frustration vient du fait que la page d’accueil d’un site est la résultante d’un long travail de conception, généralement séquentiel. Une page d’accueil ne s’invente pas, elle est fonction de ce que le site va proposer en matière de contenus et fonctionnalités. Commencer le travail de conception par la page d’accueil est à mon avis un non-sens, c’est clairement mettre la charrue avant les boeufs.

Il y a ainsi un certain nombre de tâches à réaliser en amont et des livrables à produire :

• Une liste priorisée des objectifs et des besoins ;
• Un cahier d’exigences et de contraintes ;
• Une description des utilisateurs types (personnas) ;
• Un inventaire des contenus et fonctionnalités nécessaires (comparé à ce l’existant) ;
• Un plan du site et des flux de navigation ;
• Des cas .

Cette liste n’est pas exhaustive, mais elle vous donne une bonne vision du travail préparatoire nécessaire AVANT de se lancer dans le travail de conception. Sans vouloir rentrer dans une polémique sur les méthodologies de conception / gestion de projet web, il y a selon moi trois aspects de la phase de conception :

• La conception fonctionnelle avec notamment les cas d’utilisation pour les fonctionnalités complexes ;
• La conception ergonomique portant sur le système de navigation (plan du site, parcours clients) et les interfaces (storyboards) ;
• La conception graphique qui passe par la création d’une charte.

C’est bien l’empilement de ces trois couches (la logique “métier”, l’interface et la présentation) qui compose les écrans de votre site ou application en ligne. Ces couches nécessitent un minimum de travail et font appel à des compétences et profils très différents. Par expérience, présenter une interprétation graphique de la page d’accueil de façon prématurée peut avoir des conséquences très graves pour la suite du projet, surtout sur la valeur perçue de ce travail de conception (“pourquoi payer le reste alors que l’essentiel du boulot est fait, en plus je n’aime pas les couleurs…“).

Comme j’ai plus d’expérience sur la conception des interfaces, je complète mon argumentation en me concentrant sur ce point. En règle générale, la création de storyboards s’effectue dans cet ordre :

1. Lister et positionner les éléments devant être affichés dans le header et le footer ;
2. Définir un système de navigation clair, robuste et qui ne prenne pas trop de place ;
3. Concevoir les pages de second niveau (ex : page de contenu) ;
4. Concevoir les fonctionnalités complexes (ex : configurateur…) ;
5. Concevoir les pages d’orientation (ex : page de catégorie) ;
6. Concevoir la page d’accueil.

Le travail de création des storyboards est donc un processus séquentiel qui démarre par les pages de second niveau. Les pages d’orientation ou la page d’accueil ne servent qu’à orienter les visiteurs vers la bonne partie du site (sauf dans le cas bien précis des sites mono-page). Commencer la conception par la page d’accueil est selon moi une grosse perte de temps, car cela revient à travailler à l’aveugle.

De même, la conception graphique est un processus créatif qui nécessite de mener à bien une réflexion, d’explorer des pistes et surtout de se conformer aux contraintes fonctionnelles et ergonomiques. Je ne vois pas bien comment il est possible de livrer une charte graphique réaliste avant d’avoir stabilisé les spécifications fonctionnelles et le storyboard.

Bref, tout ça pour dire que même après 15 ans, je suis toujours surpris que l’on me demande “juste” de voir à quoi ressemble la page d’accueil avant de lancer un projet de création ou de refonte d’un site web. C’est comme si vous demandiez à un chef de vous faire goûter avant qu’il n’ait commencé à préparer son plat.

Ceci étant dit, rien n’empêche de montrer des intentions graphiques au commanditaire du projet. Le but de l’opération sera de satisfaire sa curiosité (et/ou son impatiente) avec des illustrations, mais qui ne garantissent en rien une conformité avec le résultat final. Par expérience, je suis très réticent sur ce genre de pratique, car 9 fois sur 10 ça se termine par un “je préférais ce que vous m’aviez montré au début“.

Mais peut-être suis-je devenu grincheux avec l’âge… N’hésitez pas à donner votre opinion et à décrire votre façon de travailler dans les commentaires.

Saviez-vous qu’en moyenne la dyslexie touche 10% de la population ? Si ce handicap ne touche que 5% de la population en France (7% pour les enfants scolarisés), il est responsable de  problèmes d’assimilation des textes et de retard dans l’apprentissage. Sans trop rentrer dans les détails, les personnes atteintes de dyslexie ont tendance à inverser les lettres (comme illustré plus bas) et donc à changer la signification des mots.

Souffrant moi-même de légère dyslexie depuis mon enfance (je ne crois pas que ça se soigne d’ailleurs), je suis particulièrement sensible à ce sujet. Non pas que je souffre d’un gros handicap, mais j’ai tout de même conscience de faire beaucoup de fautes d’orthographe dans mes écrits, maintenant vous en connaissez la cause.

Pour pallier à ce problème d’inversion, un graphiste néerlandais souffrant de dyslexie, Christian Boer, a conçu une police de caractères permettant de mieux identifier les lettres : Une police d’écriture pour les dyslexiques. L’essentiel de son travail concerne les barres et les queues des lettres. Par exemple, la barre du “h” a été allongée pour ne pas le confondre avec un “n”. De même, l’ouverture du “c” a été agrandie pour le différencier du “e”.

Le principe est donc d’augmenter l’épaisseur des lettres à leur base pour leur donner plus de “poids” et éviter que le cerveau ne les retourne. Cette police de caractères a été testée à l’université de Twente aux Pays-Bas auprès d’une vingtaine d’étudiants pendant un an et demi. Le bénéfice constaté de cette police a suffi à convaincre l’auteur de commercialiser sa police. Elle est disponible en France au travers de la société Auxilidys.

Fort de ce succès, d’autres personnes ont décidé de créer leur propre police sur le même principe, notamment Abelardo Gonzalez : Open Dyslexic : une police de caractères pour aider les dyslexiques. Le principe de sa police est le même que précédemment, sauf que celle-ci est distribuée en licence Creative Commons BY, donc librement utilisable et distribuable à condition de citer l’auteur (la même licence que j’utilise pour mes articles).

Le résultat est assez étrange, mais souvenez-vous que cette police a avant tout des vertus thérapeutiques plutôt qu’esthétiques, vous pouvez la tester sur DyslexicFonts.com, avec en prime une astuce avec la souris pour vous aider à ne pas vous tromper dans la ligne que vous lisez.

Nous sommes tous d’accord pour dire que c’est une très bonne chose, mais d’un intérêt limité, car personne ne lit à l’écran. Certes, mais si nous scannons les pages web, il nous arrive néanmoins de prendre le temps de lire un article en entier. Et c’est là où cette police peut se révéler très utile, notamment en étant couplée à des services de “nettoyage” des pages web comme Instapaper, Pocket ou Clearly. L’idée n’est donc pas d’imposer cette police sur toutes les pages web, mais uniquement dans un contexte de lecture intensive, sur votre ordinateur, smartphone ou tablette.

Encore plus intéressant, cette police peut également être utilisée sur les liseuses numériques. La Kobo est ainsi livrée avec une police nommée “Open Dyslexia”, mais je ne serais pas vous dire s’il s’agit de la même. Saluons donc le travail de ces personnes qui ont trouvé une solution pragmatique pour diminuer les effets de la dyslexie.

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.

Lire à l’écran n’est pas une activité naturelle. Certes, il y a la fatigue visuelle, la pollution de nombreux éléments inutiles, mais surtout la tentation d’allez voir ailleurs. Résultat : il est extrêmement difficile de se concentrer pour lire un article à l’écran. Si l’on ne tient pas compte des liseuses à encre électronique, la lecture à l’écran est donc une expérience laborieuse qui demande de la concentration, voire de l’incitation.

Contrairement aux livres papiers, les liseuses électroniques fournissent ainsi toute une série de statistiques sur les usages de lecture des propriétaires, à l’image du Reading Life de Kobo :

Jouant sur le même principe d’incitation, le logiciel de rédaction iAWriter convertit le nombre de mots en temps de lecture, ils proposent même une fonction équivalent sur leur blog quand vous repositionnez la barre de défilement verticale : Neat detail on the iA blog.

Toujours dans cette lignée, le blog de Poule Design fournit un temps de lecture estimatif pour ces articles :

Avouez que c’est quand même sacrément incitatif de se dire qu’un article ne prend que 3 à 4 minutes pour être lu, ça rassure et ça permet de ne pas être tenté de l’imprimer. De là à dire que cette fonction d’affichage du temps de lecture permet de protéger la planète… il n’y a qu’un pas !

Dans tous les cas de figure, une petite attention dont les utilisateurs réguliers raffolent (Les petits détails qui font la différence).

Croyez-le ou non, mais ça fait presque deux ans que je n’ai pas abordé le sujet des outils de prototypage rapide. À ma décharge, je pense ne pas me tromper en disant que la situation que j’avais décrite à l’époque n’a pas beaucoup changé (Wireframes : 4 styles pour 4 types d’outils). Pourtant, l’offre s’est considérablement élargie, comme en témoigne cette analyse comparative très complète : The Ultimate Wireframing Tools Guide.

Il y a plus d’une trentaine d’outils dans ce tableau, et pourtant il n’est pas complet ! J’ai ainsi repéré dernièrement 4 outils particulièrement intéressants que nous pouvons classer dans deux catégories : les ateliers de prototypage en ligne et les applications de dynamisation.

Pour celles et ceux qui veulent concevoir leurs interfaces à l’écran en misant sur la collaboration et le partage, je recommande ainsi ces deux outils :

• Wireframe.cc, une application en ligne minimaliste pour créer des interfaces en quelques secondes (littéralement) :

  

• FluidUI, une application en ligne beaucoup plus sophistiquée qui existe aussi sous forme d’extension pour Chrome. Je vous recommande vivement de tester l’éditeur en lignepour bien juger la puissance de l’outil.

  

Pour celles et ceux qui sont attachés au papier, je recommande les applications suivantes qui permettent de créer des prototypes avec des photos :

• Pop, une application mobile minimaliste, mais parfaitement opérante ;

  

• Solidify, une application équivalente, mais bien plus sophistiquée (qui propose notamment un environnement complet de collaboration).

  

Ces quatre solutions illustrent bien selon moi l’état du marché : des approches novatrices à la fois minimalistes et très sophistiquées. Ceci étant dit, je n’ai toujours pas trouvé l’outil répondant à mes exigences : pouvoir créer une maquette fonctionnelle tout à la souris, la partager en ligne avec des collègues et avoir la possibilité de générer un squelette HTML (pour commencer le travail d’intégration) et l’exporter vers un logiciel de création graphique (pour bien respecter les proportions).

Pour le moment je reste fidèle à mes outils papier et à Balsamiq (qui vient enfin d’introduire les skins), mais ils ne répondent pas non plus à la problématique décrite ci-dessus. Ceci étant dit, je ne désespère pas de trouver la perle rare un jour…

Je vous propose ce matin de découvrir deux livres qui méritent votre attention.

Le premier traite du tri par carte et à été rédigé par Gautier Barrère et Éric Mazzone : Card Sorting : Ne perdez plus vos utilisateurs !.

Ce livre est LA bible pour tout ce qui touche au tri par cartes, il détaille les grands principes, la préparation et le déroulement des séances  l’analyse des résultats et leur interprétation pour aboutir à des solutions. Simple à lire et didactique, le livre vous accompagnera dans votre démarche de conception centrée sur les utilisateurs et apporte notamment des retours d’expérience très enrichissants.

Le second livre traite de qualité web et plus particulièrement du référentiel Opquast dont nous avons déjà parlé sur ce blog : Qualité Web : les bonnes pratiques pour améliorer vos sites.

Rédigé à plusieurs mains, ce livre passe en revue l’ensemble du référentiel de bonnes pratiques réparties en différentes catégories en fonction des éléments constitutifs d’un site (formulaires, contenus, contacts, hyperliens, identification, navigation, tableaux…), du type (commerce en ligne, sites publics…), ou du support (terminaux mobiles, newsletter, Open Data…). Le livre aborde également des sujets de fond comme les modèles de qualité web, dont le VPTCS (Visibilité, Perception, Technique, Contenu, Services), l’intégration des référentiels de qualité à vos cahiers des charges, les outils pour vous simplifier la tâche (extensions de navigateurs).

Une lecture également très enrichissante que je compléterais avec les réflexions suivantes (fournies par Élie Sloïm lors d’une discussion récente) :

• Référentiels de bonnes pratiques : industrialisons nos savoir-faire
• Conformité, validation et surqualité
• Le droit à l’erreur

Et comme à chaque fois, je salue le formidable travail effectué sur le référentiel Oquast. Rappelons à ce sujet que le référentiel est un projet collaboratif qui évolue régulièrement. Si vous êtes motivés, je lance donc un appel à contribution pour ouvrir deux nouvelles listes représentatives de ce qu’est l’internet en 2013 :

• La mobilité, avec les meilleures pratiques pour les smartphones, tablettes et feature phones ;
• Les médias sociaux avec les meilleures pratiques pour vos profils et publications ainsi que leur intégration sur votre site.

L’idée de cet appel à contribution est de faire grossir les rangs des contributeurs au référentiel et d’aider la communauté à progresser sur ces thématiques qui méritent une approche structurée. Mais j’aurais l’occasion de vous en reparler.