Pourquoi Twitter change à nouveau sa page d’accueil

Les auteurs du célèbre service Twitter ont dévoilé cette semaine qu’ils allaient refondre leur page d’accueil. J’ai eu l’info via un article d’Eric Dupin sur son blog Presse-Citron (excellent blog que je vous recommande au passage).

Capture de la page d'accueil de Twitter qui va être remplacée

Capture de la nouvelle page d'accueil de Twitter

Dans son article, Eric rapporte d’amblé l’objectif  principal de cette refonte, telle que l’explique Twitter :

[Twitter va devenir] davantage un réseau d’information continue et non plus un lieu où l’on publie son statut personnel.

Ce n’est pourtant pas la première fois que Twitter refond sa page d’accueil. Une précédente mise à jour avait déjà eu lieu cet été et avait déjà pour but de montrer Twitter comme un média et non plus simplement comme un service d’ajout de statut. Benoit Descary expliquait à l’époque que cette refonte s’adressait non-pas aux utilisateurs de Twitter, mais justement à ceux qui ne sont pas encore inscrits :

En revanche, la nouvelle page d’accueil permet à ceux qui n’utilisent pas Twitter ou qui désirent découvrir les conversations sur ce service de facilement créer une recherche. Pour les non-initiés, cette refonte aide à mieux comprendre l’utilité de ce service. Twitter.com pourrait bien devenir la destination pour faire une recherche sur Twitter. Même si plusieurs services similaires sont de loin supérieurs, uniquement le nom Twitter attirera sans doute un grand nombre de visiteurs sur cette page.

C’est donc via la fonction de recherche que Twitter souhaite séduire ses nouveaux utilisateurs, en leur montrant qu’on peut découvrir ce que les gens racontent dans le monde sur un sujet, en temps réel. L’argument avancé pour inciter l’utilisateur à s’inscrire n’est même plus tellement le fait de pouvoir partager son statut, mais surtout de pouvoir lire celui des autres.

Ainsi, on constate que Twitter change de cible au rythme de l’augmentation de sa masse d’utilisateurs inscrits, pour finir par l’inverser totalement. En fait, c’est un point commun à tous les réseaux sociaux : au début ils essayent d’attirer et de séduire essentiellement des contributeurs puis, une fois la taille critique atteinte, ils basculent pour séduire les utilisateurs passifs qui se « contenteront » de consulter le contenu des autres (en contribuant un peu quand même de temps en temps). Cette seconde catégorie d’utilisateur a bien-sûr le mérite d’être très fortement majoritaire…

La nouvelle mouture de la page d’accueil du service à l’oiseau bleu s’inscrit donc dans cette stratégie visant à attirer un nouveau type d’utilisateur (but premier de toute page d’accueil de service Web). Le passage d’un service de contribution à un service de recherche était une première étape. Maintenant Twitter nous montre qu’il veut être reconnu comme un véritable média à part entière, en mettant beaucoup plus en avant son contenu.

En terme de marketing produit, le fait de montrer très tôt le contenu à l’acheteur potentiel est une technique vieille comme le monde et qui a fait ses preuves. On retrouve ce principe notamment sur les jouets : il est inconcevable aujourd’hui de vendre un jouet dont le packaging ne permet pas de voir (et même souvent d’essayer) ce qu’il y a à l’intérieur. Pour les services Web c’est pareil : une page d’accueil efficace doit permettre à l’utilisateur de constater par lui-même la valeur que va lui apporter le site. L’explication ne suffit pas, il faut montrer, prouver la valeur. Les internautes sont de plus en plus exigeants…

La morale de tout cela du point de vue du Web(Product)Designer, c’est que derrière la conception d’une page il y toujours des considérations d’efficacité. Une page d’accueil de service Web est faite pour « transformer » les visiteurs anonymes en membres inscrits (ou au moins collecter leurs coordonnées, mais c’est une autre histoire) et c’est cette problématique qui en dicte la conception, même (et surtout) pour Twitter.

iPad est le nouveau meilleur ami du webdesigner

Quelques ressources inattendues pour le wireframing

Un tutoriel sur le wireframing sous Illustrator

Moi qui pensait être le seul à faire mes wireframes et mes maquettes sous Illustrator, Adobe me démontre le contraire en sortant carrément une vidéo dédiée sur le sujet.

A l’occasion je ferai probablement un article avec mes propres astuces pour faire des maquettes et des wireframes efficacement sous Illustrator…

Un blog dédié au wireframing

Découvert il y a déjà quelques temps, grâce à Frédéric : un blog complètement dédié au wireframing

On y trouve à la fois des exemples, des logiciels, des templates et autres librairies de composants. Comme d’habitude d’ailleurs, beaucoup de modèles existent uniquement pour Omnigraffle. Ce logiciel renommé pour faire des wireframes, entre autres, n’existe malheureusement que sur Mac.

Un outil pour faire des wireframes volontairement « moches »

Les auteurs de ce blog sont visiblement sponsors de Balsamiq Mockups que je connais bien pour avoir travaillé avec chez Dismoioù. C’est un outil original dans la mesure où il se base sur des composants prêts à l’emploi que vous n’avez plus qu’à disposer (boutons, champs de saisie, listes déroulantes, zones de texte, images, onglets…) et qui ont tous l’air d’avoir été dessinés à main levée (et encore en étant un peu atteint de parkinson).

Le genre de wireframe que l'on peut réaliser avec Balsamiq Mockups : ça ne vous rappel rien ?...

Il existe d’autres outils délibérément contraignants qui imposent de n’utiliser que des formes préétablies et dont le rendu est volontairement peu réaliste. Cette démarche qui se généralise est intéressante car elle répond à deux besoins très courants :

• D’abord le besoin pour les décideurs non-graphistes (responsable marketing, chef de produit…) de pouvoir transmettre leurs idées sans avoir à maîtriser Photoshop ou utiliser des outils peu adaptés comme Powerpoint.
• Ensuite le besoin pour les designer eux-mêmes de pouvoir travailler sur l’ergonomie et le scénario d’usage d’une ou plusieurs pages d’un site sans que le travail soit parasité par des questions purement graphiques ou esthétiques.

Dans le second cas l’avantage pour le designer est notamment de pouvoir avancer progressivement sur un travail de conception en posant des bases solides petit à petit. Il est souvent périlleux de vouloir faire valider un design en proposant directement une maquette graphiquement aboutie, car rien ne garanti que la composition et le contenu de la page sont bons, or si ces éléments changent il est probable qu’une grande partie du travail soit à refaire…

Du papier et un crayon…

Comme certains outils essayent de vous permettre de réaliser des wireframes qui ont l’air d’avoir été fait à la main, pourquoi pas essayer de les faire directement avec un bon vieux crayon et du papier ?

On aura beau dire, même si vous dessinez très mal et que vous êtes perdu sans une souris, commencer par faire quelques essais à la main est très souvent une bonne idée. Les gens qui sont réticents à cette pratiques argumentent souvent qu’ils trouvent l’inspiration en manipulant leur logiciel favoris (Photoshop of course). Mais comme j’en ai déjà longuement parlé, c’est une fausse bonne idée, voilà pourquoi :

• un bon design de site web commence par un bon concept
• un bon concept ne nait pas dans Photoshop, mais dans le cerveau d’un être humain
• les meilleurs outils pour accoucher d’un bon concept restent (encore aujourd’hui !) un bloc de papier et un crayon

Et oui, le challenge quand on part de rien n’est pas d’avancer le plus vite possible dans un processus créatif, mais d’être sûr d’arriver !

Ebauches papier de quelques sites (très) populaires

Si vous doutez encore de l’intérêt d’utiliser un crayon, allez jeter un coup d’oeil sur cet article de Deeplinking qui montre les premières ébauches de quelques un des sites les plus populaires du Web tels que Flickr, Twiter ou Vimeo !

Comme quoi les meilleurs idées se conçoivent simplement…

Première ébauche de la page d'accueil de Twitter

Là où tout commence… Dans le néant !

Je cherchais une bonne façon de démarrer ce blog. Quel en serait le premier post ?

Dans un esprit cartésiens, j’envisageais de lister les différentes étapes d’une sorte de méthode pour partir d’un besoin et aboutir à un site fini – en fait plutôt un ensemble de règles pragmatiques que je fini par appliquer assez systématiquement. Cette idée se révélait rapidement assez foireuse… Le but du format « blog » est, pour moi, de pouvoir distiller mes idées au fil de l’eau. Si elles étaient déjà bien structurées et ordonnées j’écrirais directement un bouquin…

Ainsi, laissons tomber le côté « Grand Un, petit A : le B-A-BA de la prise de brief » et tentons une approche plus concrète. Par contre, j’aime bien quand même la tournure « contre exemple » que prennent les choses… La bonne façon de faire apparaît souvent quand on réalise qu’on s’embourbe dans la mauvaise.

C’est donc par la que je vais commencer, par la hantise du Webdesigner qui fini (ou plutôt commence) par se voir, à tort, comme un artiste : le vide ! J’entend par là le moment où il va se lancer dans l’arène et devoir prendre en main un  projet de design de site Web.

Pour ne pas parler dans le vide justement, je vais profiter d’un article sur lequel je suis tombé aujourd’hui grâce au blog SimpleEntrepreneur : Web Design is a Journey

read more