Who's the Art Director? » Portfolio

Review de l’application iPad de la Tribune de Genève

mc casal — Thu, 17 Mar 2011 22:54:12 +0000

Et voilà, le printemps approche et la saison des applications iPad commence à battre son plein.

Avec la sortie du iPad2 (que je n’achèterai pas, mais toute généreuse contribution serait accueillie avec joie), voici l’occasion de mettre à contribution l’utilisateur un peu lambda, moi en l’occurrence, pour faire une petite review de la Tribune de Genève HD, sortie il y a quelques jours.

Comme vous le savez déjà, je passe une heure tous les matins à lire RSS et autres… etc. Le temps que j’ai à consacrer à cette foultitude d’information est inversement proportionnelle à la qualité de la plateforme sur laquelle je la lirais… Vous suivez ? Bref, c’est un aparté.

Revenons à nos moutons digitaux et voici mes commentaires et recommandations pour cette application encore toute chaude sortie de l’AppStore.

Aucun doute, nous sommes dans la Tribune de Genève. Corporate clair, screen d’entrée court et arrivée sur une page d’accueil plutôt complète, presque un peu trop complète. Certes, on appréciera le menu latéral donnant un accès rapide aux différentes rubriques, mais la zone dévolue à l’information proprement dite mériterait un léger défrichage. Je m’explique.

Publicité Femina

Elle est très colorée, prend un espace non-négligeable et attire par conséquent l’œil. C’est le propos d’une publicité me direz-vous, mais le propos de l’application TdG est de fournir de l’actualité.
La question est donc toujours « qu’est-ce que l’utilisateur s’attend à voir en téléchargeant une application de news ? Des news ».

La publicité Femina est bien sûr nécessaire (on ne vit pas d’amour et d’eau fraîche), mais devrait être intégrée par exemple sous forme de bandeau qui apparaîtrait en bas de screen avec la possibilité de le fermer. Faciliter la lisibilité et l’utilisateur en sera reconnaissant.
Cette remarque sur la publicité Femina vaut pour toutes les autres pages de l’application. La capacité d’attention sur un device comme le iPad est très réduite en comparaison avec un support papier. Moins on donnera de portes d’accès vers une autre plateforme ou une autre tâche ou action, plus l’utilisateur concentrera son attention sur le contenu sur lequel il se trouve. C’est une expérience que l’on doit offrir et une expérience plaisante se prolonge et sera renouvelée.

Typographie

On oublie trop souvent que macro-typographie et micro-typographie jouent un rôle fondamental dans l’expérience de lecture sur des plateformes digitales.
Mes recommandations sur l’ensemble du site seraient de laisser tous les titres en sans-serif et de passer le corps des articles en serif. Il ne faut pas hésiter à ne garder que les titres dans les accroches et à les aggrandir vu le gain d’espace. Globalement sur l’ensemble de l’application, la taille des typos est trop petite et fatigue rapidement la vue.

Bandeaux

J’ai des petits doigts, boudinés certes, mais petits. Malgré cela, je trouve les bandeaux de blocs trops fins. N’ayons pas peur de mettre de l’espace, de l’air pour que le doigt touche en toute liberté !

Scrolls

Un scroll sur un device touch est question d’amplitude. On accompagne le plus souvent notre geste avec un mouvement large. Les zones de scrolls doivent donc donner suffisament d’espace pour que le doigt ne doive pas faire dans la mécanique de précision. Si vous touchez votre écran avec votre doigt, je vous mets au défi de donner l’exact pixel que vous activez. On travaille donc par zones de contact, cette zone doit donner suffisament de marge de manœuvre à des doigts de tailles diverses.
Je mettrais mon doigt à couper que personne ne lira le programme TV ou l’horoscope directement sur cette page d’accueil.

Je recommande donc de revoir la présentation des 2 blocs Programme TV et Horoscope en augmentant la taille ou mieux de n’en faire que des boutons qui renvoient sur les rubriques correspondantes.

.
Vous voyez comment magiquement cette page d’accueil vient de gagner un espace non négligeable qui permettrait d’augmenter l’espace entre les blocs d’information, de rééquilibrer la hiérarchie de la page et d’augmenter la lisibilité ? Ce pourquoi cette application existe : délivrer une expérience de lecture de news.

Détail d’article

La lecture se fait de façon plutôt naturelle. Le scroll intra article est vertical et le scroll inter article horizontal.
Mais comment rendre cette lecture encore plus agréable ? Oublier le scroll dans le scroll. C’est, je dois avouer, la chose qui m’a le plus déplus dans cette application. Si votre doigt scrolle depuis la zone image et titre, toute la page monte ou descend. Si vous scrollez depuis la zone texte de l’article, vous n’avez que cette zone qui bouge. Pour ceux qui savent ce qu’est un iframe, c’est l’iframe dans l’iframe et soudain vous avez des frissons dans le dos.

Simplifions. Imaginons une seule page, sans intra-scrolls, sans colonnage dans le texte (la pagination verticale plus le colonnage rendent la lecture très confuse)… Toute de suite nous gagnons en lisibilité.
Imaginons maintenant le bloc « Dans cette rubrique » prendre la place du menu latéral encore présent. Une jolie liste avec les autres articles et des titres bien gros pour les myopes comme moi. Un bonheur. Le menu latéral vous le réduisez et vous y donnez accès par une simple flèche qui se déploierait sur demande. Ça mange pas de pain, ce n’est pas une révolution sur la structure actuelle, mais je vois déjà le bonheur se lire sur le visage de l’utilisateur lambda.

Header

Le header est grand, il est tout vide. Pourquoi les boutons relaod, aA et share sont-ils si proches ? Mais qui a volé ma Météo ?

Images

Cette rubrique est décevante pour plusieurs raisons.
La taille des images : les gens aiment voir des grosses images. Cela vous semble une évidence et pourtant sur l’application Tribune de Genève, les images pourraient être maximisées sans détruire la structure actuelle.
La navigation entre les galeries : elle ne devrait pas être reléguée au bas de page. Elle devient quasi invisible et les titres sont cachés.
Dans ce type de rubriques, il ne faut pas hésiter à travailler sur l’ampleur et l’impact des images en occupant le maximum d’espace.

Conclusions

La base n’est pas mauvaise et des modifications ciblées permettraient de rendre cette application plaisante. Je ne vous cache pas que je l’ai décortiquée avec attention et que beaucoup d’autres points mériteraient une nouvelle réflexion. Quoi qu’il en soit, laissons à la Tribune de Genève HD le temps de mûrir avec ses utilisateurs. Les forces et les faiblesses feront surface naturellement.
Je ne crois pas au produit fini que l’on pose sur l’étalage du supermarché pour ne plus jamais changer. L’intelligence d’un créateur d’interfaces est de se remettre en question, de monitorer, d’adapter son panel d’utilisateurs test et dans la mesure de ses moyens, de corriger son cap.

Refonte de l’application pour iPad de 20mn

mc casal — Tue, 04 Jan 2011 18:39:10 +0000

Quel est le propos de la refonte d’un outil ou d’une plateforme qui doit être utilisé de façon journalière, simple et rapide? Tout designer ayant une bonne appréhension des problématiques utilisateur, vous dira: de le rendre encore plus simple et rapide d’utilisation.

Dans les habitudes d’adoption des outils online et tout particulièrement des applications mobiles, plus l’adéquation entre leur utilité au quotidien et leur simplicité est forte, plus leur utilisation sera grande. J’exclus bien sûr Angry Birds de cette réflexion.

Tous les matins, je passe environ 1 heure sur mon iPad à lire journaux, flux RSS, murs Twitter et Facebook et j’en passe et des meilleurs.
J’avoue lire dans la liste de mes quotidiens, le racoleur 20mn édition suisse romande.
Leur application iPad étant depuis quelques temps (voire mois) buggée, ce fut avec plaisir que j’ai vu la mise à jour disponible dans l’App Store.

Mise à jour? Que nenni, c’est une refonte à laquelle nous avons eu droit. Et je suis fort courroucée de constater que les principes premiers qui disent « Less is more », « Ne réfléchis pas ton journal iPad comme un journal papier » et « Don’t make me think » sont partis avec l’eau du bain.
Changement de paradigme et de logique. Nous passons d’une application au départ somme toute basique, pas parfaite, ayant les défauts de sa jeunesse, mais utilisant les codes d’usability adoptés par le plus grand nombre, à une application beaucoup plus complexe, réfléchie comme un support papier, avec une navigation hybride et confusante.

Je vous livre là quelques points clés après 3 minutes d’utilisation.

Page d’accueil

Trop d’informations, une structure confuse, des éléments trop petits ou quasi invisibles et des doublons de navigation.

Le moins que l’on puisse dire c’est que cette première page ne remplit pas sa fonction première qui est d’amener naturellement l’utilisateur vers une vue d’ensemble claire des éléments importants.
Nous avons effectivement un article mis en exergue, mais les articles secondaires sont répartis de façon confuse sur la page.
La hiérarchie des éléments n’est pas logique. Les articles secondaires répartis à droite et à gauche sont coupés par deux blocs dont l’information est très petite.

L’un des blocs est titré Live ticker. Cela m’a semblé peu adapté puisqu’un ticker est bandeau de news qui défilent de la droite vers la gauche, alors que là rien ne bouge. Ce n’est rien d’autre qu’une liste de titres d’articles.
Le second bloc est titré News les plus lues. J’ai du mal à saisir l’intérêt des news les plus lues puisque par définition, un journal doit délivrer des nouvelles fraiches. Quel intérêt de vouloir recommander les nouvelles les plus lues, au risque de mettre en avant une nouvelle dont la fraicheur serait douteuse? C’est plutôt au journal de « pusher » les informations les plus récentes ou les plus intéressantes selon l’état de l’actualité.
Sur le bord droit en haut de ces deux bloc, on voit des pictogrammes que j’ai cru cliquables. Il n’en est rien. Leur but était probablement de signifier que l’utilisateur peut scroller dans cette liste de titres. Cela aurait du être signifié d’une autre façon voire pas du tout. Mon premier réflexe, avant même d’avoir vu ces pictogrammes, ayant été de scroller avec le doigt.

Toolbar

Sur la toolbar du haut, tous les boutons sont trop petits et proches. Cela oblige l’utilisateur a être très précis lorsqu’il touche l’écran avec son doigt pour ne pas activer le lien voisin. N’oublions pas que nous sommes sur une interface tactile et que cela implique de devoir s’adapter à diverses tailles de doigts.
Vu l’espace encore disponible, il aurait fallu donner plus d’air et probablement aggrandir cette toolbar de quelques pixels pour rendre la navigation plus aisée.

Météo

Parlons maintenant du bloc Météo. Il est le dernier élément à se charger, il attire par conséquent plus l’oeil lorsque ses images s’affichent.
Il aurait été plus adapté de l’intégrer dans la top toolbar comme dans leur iPhone app et de le rendre cliquable pour plus d’infos.
J’attire également l’attention sur lien Choisir le lieu de ce bloc météo. Minuscule et collé trop près de la toolbar. Vous risquez d’activer un autre lien que celui désiré.

Topics

Il y a maintenant 3 façons sur cette page d’accéder à une même information: le changement de topic.
1) Sur la toolbar en haut à gauche
2) En bas de page avec l’onglet qui dépasse (qui permet aussi d’accéder aux articles des topics)
3) Avec la petite flèche en bas de page à droite.
Je vous avoue que je n’ai vu l’onglet en pied de page qu’en arrivant à l’intérieur d’un article. Il était jusque là resté invisible.
Quant à la flèche en bas à droite, elle me semblerait plus adaptée à une navigation au sein des articles et pas des topics.

Rentrons dans un article

Il n’est pas évident de comprendre où on se trouve. La notion de topic (Suisse, Monde, Economie etc) est peu visible et surtout nous n’avons toujours pas de vue d’ensemble sur tous les articles.
Un lecteur de journal cherche avant tout à lire les titres dans leur intégralité. Cela lui permet de savoir ce qu’il a déja lu et de sélectionner rapidement ce qu’il veut lire sans devoir faire une navigation à l’aveugle ou linéaire.
Dans cette version actuelle de l’application, il y a un fort risque que vous passiez à côté d’un article.

A l’intérieur des articles, la petite flèche en bas à droite devient maintenant la navigation intra topic…
Et l’onglet Home en bas de page n’est pas le retour à la Home, mais l’accès à une navigation directe dans les topics et leurs articles. Très confusant. Pourquoi appeler un topic Home et pas Actualité? Les articles répertoriés dans ce topic se retrouvent peut-être sur la Home, mais leur thématique est l’actualité la plus récente!

Article

Je suis abasourdie par ce qui a été fait lorsqu’un article dépasse une certaine longueur. Une pagination…
Je ne croyais pas devoir revivre le cauchemar de la pagination dans une application iPad. C’est sans aucun doute la plus grossière erreur d’usability de cette plateforme. Alors même que le principe de pagination a pratiquement disparu des sites internet, il est absurde, vu la nature du média, de le retrouver sur une application iPad. J’ai un sentiment de retour en arrière plus que d’évolution dans l’expérience utilisateur.

Ce système de pagination nous met face à des absurdités comme celles de cette page et d’une zone médias sociaux flottant sur un énorme espace blanc. Heureusement que ce n’est pas du papier, on risquerait d’avoir les écolos sur le dos…

Vous savez quoi? Je ne sais même pas quels articles j’ai déjà consultés. L’ancienne application offrait cela: les articles lus étaient marqués et étaient donc filtrés par l’oeil lors du scans visuel de la liste des articles.

Bouton Fermer en haut à droite

Pour les utilisateurs de l’ancienne application, ils se souviendront, que ce même bouton (exact même design et même emplacement) était utilisé pour fermer les pleines pages de publicité (fort intrusives d’ailleurs) avant d’accéder aux articles.
Dans la nouvelle version, ce bouton est utilisé pour fermer l’article sur lequel vous vous trouvez et retourner à la Home du Topic en cours.
Lorsque votre plateforme a utilisé un code bien précis pour une tâche très précise, c’est un non-sense de reprendre le même élément graphique pour une tâche totalement différente.

Qu’en penser?

Ma conclusion n’est globalement pas du tout positive et cela est fâcheux. C’est probablement un signe qui me dit: arrête de lire le 20mn et contente-toi de la TDG sur iPhone et du full site de Rue89.

Je voudrais cependant faire une recommandation au 20mn. Au cas où vous ne l’auriez pas encore fait, téléchargez l’application pour iPad de NPR. Ensuite ouvrez la vôtre. Si rien ne vous choque, il serait alors temps d’envisager une reconversion professionnelle.

Sur ce, une très bonne nouvelle année 2011.

VIDEO ET ANIMATION AU SERVICE DES POLITIQUES

mc casal — Sun, 25 Apr 2010 10:18:23 +0000

PS: entre temps, j’ai appris avec effroi et consternation sur Rue89 que Soleil Noir aurait fait le design du site et Nexint l’architecture. Faut-il que les agences ne travaillant habituellement qu’en full Flash abandonnent l’idée de travailler en html? La question se pose quand on constate l’ampleur de la polémique autour du site de l’Elysée et le plagiat évident.

QUAND ON AIME, ON RE-DESIGNE… FOURSQUARE

mc casal — Sun, 28 Mar 2010 13:20:00 +0000

Au mois de février, j’ai passé une semaine à New York City pour mon anniversaire. Je ne vous cache pas que j’avais aussi le secret espoir de gagner quelques nouveaux badges sur Foursquare en usant et abusant de l’application iPhone.

Un cauchemar. Je suis partie avant le relooking et la mise à jour de l’application. Bugs, plantages, impossibilité la plupart du temps de faire le checkin, enfin bref, que du malheur (surtout au prix du pack méga Swisscom depuis l’étranger – même avec l’option World Option Flex).

Vu le froid à cette période de l’année et les problèmes de connection, nous avons passé pas mal de temps dans les quatre Apple Store (wonderful) de la ville. Wifi gratuit, accès illimité aux ordinateurs, accueil de qualité, toilettes, formations gratuites… et possibilité de mettre à jour les tips et tags des lieux où nous avions réussi à foursquarer. Pour pouvoir gagner certains badges, et surtout pouvoir partager mes tips sans devoir passer par l’application (et dépenser encore des centaines de francs en roaming), je suis passée par le site Foursquare, le tout au chaud, les fesses posées sur un confortable tabouret devant un Mac rutilant.
C’est quand vous devez sérieusement utiliser un outil, qu’il arrive que l’on passe de l’enthousiasme total au plus grand désespoir. Je ne sais pas si vous avez passé un peu de temps sur le site Foursquare avant son petit relooking de début mars, mais je l’ai fait et j’en suis encore au bord de la crise de nerfs. Liens mal placés, informations peu claires, arborescence sans grande logique, login-logout en footer, etc… tout pour vous coller une migraine carabinée. Et malgré le « relooking », il y a encore des incohérences qui peuvent dérouter une bonne partie des utilisateurs.

Je ne prétends pas révolutionner le site Foursquare, mais il y a une chose qui est évidente dans une interface: on ne peut pas multiplier les points d’entrée à une même information sans causer la confusion dans l’esprit d’un utilisateur.
Le site a encore actuellement une navigation de 2e niveau (?? je l’ai du moins indentifiée comme telle ??) qui n’en est en réalité pas une (ME, HISTORY, STATS, FRIENDS). En top de site à droite, nous avons des liens qui peuvent être confondus avec une navigation de 1er niveau, mais qui est plutôt vraisemblablement une toolbar. Cette toolbar contient sur un même niveau hiérarchique:

votre buddy icon et votre nom (non cliquable !)
un lien « find friends » qui devrait logiquement se trouver sous la rubrique FRIENDS
un « add things » qui devrait plutôt être dans votre espace personnel
un « help » (qui devrait être en footer)
les « settings » qui sont bien sûr liés au ME et le logout (qui est probablement le seul à être correctement placé dans l’interface…).

LESS IS MORE (et ce n’est pas moi qui le dit)
Vous connaissez le fameux « Less is more »? Plus vous donnez de choix à votre utilisateur, plus vous avez de risques de le voir se perdre dans vos pages. Plus vous multipliez les noms des liens (Add things = Add a tip) qui pointent vers une même page, plus votre utilisateur perdra de temps et fera des erreurs. N’oubliez pas le but d’une interface user centered: less time for choice, less mental effort, less frequency of mistakes. Si vous arrivez à remplir ces trois points, vous avez réussi votre interface. Le reste c’est de la déco.

Voici donc ma version du site Foursquare, et je dis bien ma version, car je ne prétends pas qu’elle puisse être définitive ou parfaite. Pour ce faire, j’aurais dû vous présenter une version fonctionnelle de tout le site, sans design. Le but de cet exercise était juste de pouvoir mettre en avant des erreurs pour le moins faciles à éviter sur un site populaire et dont la vocation est d’être facile d’utilisation à l’image de la refonte de leur application.

…

EXERCISE DE NAVIGATION FLASH

mc casal — Sun, 29 Nov 2009 21:09:42 +0000

UN PETIT DESIGN VITE FAIT

mc casal — Sun, 29 Nov 2009 21:03:27 +0000

JE TESTE L’ERGONOMIE

mc casal — Sun, 29 Nov 2009 20:35:34 +0000

Simplicity is the key, voilà ma conclusion.

DEVELOPPEMENT ET CREATIVITE

mc casal — Sun, 29 Nov 2009 20:24:21 +0000

On place souvent les développeurs dans le panier des animaux associaux, travaillant en Courrier 12 points et tapant des milliers de lignes de codes sans se soucier du design ou des problématiques utilisateur.

Je voudrais ici rectifier cette idée qui a la vie dure, car les développeurs peuvent être votre plus grand atout en terme de créativité. Ecoutez-le, consultez-les, ce sont eux qui dépouillent ces innovations techniques que vous trouvez rébarbatives, mais qui peuvent donner à votre site ce petit souffle de génie que le design seul ne pouvait apporter.
J’ai toujours un grand plaisir à les écouter parler avec passion de leur découvertes en me disant: « de quelle façon vais-je pouvoir intégrer ça dans ma réflexion créative, dans mon design, dans l’expérience utilisateur? »

Je voudrais donc ici dire un grand merci à Bertrand (www.infobahn.ch) qui a insufflé sa propre créativité de développeur dans ces deux projets que nous avons montés ensemble. Minerva et Leadmusic

DESIGNER LA MUSIQUE

mc casal — Thu, 19 Nov 2009 13:43:00 +0000

Croyez moi ou non, designer des sites internet pour des institutions musicales est un bonheur.