Bon je continue mon exploration de slideshare (d'ailleurs, il y a vraiment des pépites) en vous soumettant cette fois-ci la présentation "le cycle de vie d'un wireframe" (traduit de l'anglais "The Life Cycle of a Wireframe").

Concernant l'auteur Nick Finck, (fondateur de Blue Flavor), je vous invite à le suivre sur son compte Twitter. Il est assez actif dans le domaine de l'expérience utilisateur, et ne demande qu'à être un peu plus populaire.

Dans cette présentation, il constate que tout travail d'architecture de l'information se décompose en 3 étapes :

1. 1/ Comprendre le problème
2. 2/ Trouver une solution
3. 3/ Présenter cette solution

Ce dernier point demande un certain savoir-faire propre à ce métier. En effet, pour présenter la solution, on s'appuiera sur des livrables tel que des wireframes.

Pour aboutir à ce résultat,  Nick Finck nous explique quelles sont les entrées ( contenu/utilisateur/principe de la Gestalt), et la façon de les orchestrer.

Je vous remets en évidence le cheminement des livrables (que vous avez sans doute déjà croisé) :

Comme vous pouvez le constater la profession est en train de se structurer en standardisant les processus de conception.

Cependant il ne faut pas perdre de vue que :

• ces documents (ainsi que leurs mises à jour) demandent du temps  et des ressources ! Ainsi si vous voyez que tel ou tel livrables n'est pas adapté au projet, ne perdez pas de temps à le formaliser !
• un livrable n'a une vraie utilité que s'il apporte du sens (aussi bien au client qu'en interne),
• les livrables ne sont que la matérialisation de vos idées/pensées/concepts, et non le point de départ.

A bon entendeur ...

Alors je débute ce billet express en vous précisant que ce titre est celui d'une présentation donnée par Anastasia Simitsis au Webcom Montréal 2009 (et mis en forme par w.illi.am)

A travers ces 70 slides, j'ai été bluffé par la profondeur et la densité de l'info qui est synthétisée et allégée de manière remarquable.  Vraiment un bon travail qui enchaine toutes les notions de l'UX (Expérience Utilisateur).

Ma seule "déception" réside sur le titre de la présentation, pas assez incitatif ... oui oui je chipote !

D'ailleurs, je profite de ce post pour vous annoncer qu'un glossaire est en train de voir le jour sur ce blog. Si vous avez des idées ou des remarques,  je suis à dispo !

70 % de mon travail consiste à concevoir et réaliser les prototypes pour des sites web, intranets, applications, ...

Concrètement, je modélise les wireframes, je les anime (scénario + storyboard) et je les spécifie. Tout ceci dans un seul et même logiciel : Axure. (Je ne rentrerai pas dans la gueguerre des logiciels à utiliser ou pas. Ce n'est pas le but de cet article).

Au final, nous obtenons un prototype, c'est à dire une maquette cliquable à destination du :

-  client, pour qu'il valide le parcours utilisateur, le système de navigation, les zones  d'interaction, ...

-  graphiste, pour qu'il représente les templates, les éléments graphiques, ...

-  développeur, pour qu'il comprenne les particularités du projet, les fonctionnalités, ...

-  chef de projet, pour qu'il ait un document référent surlequel s'appuyer,

Bref le bonheur parfait : un document unique et fédérateur qui sert de base à tous les intervenants du projet. Enfin ça c'est ce que je pensais en débutant dans ce secteur.

Après avoir lu un article de Superfiction sur les 3 raisons de ne pas utiliser un outil de prototypage, et plusieurs expériences douloureuses, je vous présente les principaux risques de ces logiciels/outils :

- on passe beaucoup trop de temps à modéliser des pages. Au final, notre wireframe se transforme quasiment en une création

- De ce fait, on risque de tromper le client, et de frustrer les graphistes/DA.

- En plus, on se concentrant trop sur la forme, on en oublie le fond... Or vous savez tous qu'un bon projet se focalise sur ses utilisateurs finaux, et sur le contenu/service à proposer.  Par conséquent, on a trop souvent tendance à créer des pages pleines de lorem ipsum, qui n'apportent aucune information, et laissent les développeurs dans le flou complet sur le type de contenu à afficher.

- ces outils reposent sur des bibliothèques de patterns qui (même si on optimise en factorisant) orientent fatalement la technique,

- Ensuite, comme on le voit dans l'article de Superfiction, ces outils ne sont pas adaptés aux nouveautés (RIA/RDA),

- et surtout on oublie de passer par l'étape papier/crayon (appelée "le paper prototyping") qui permet d'être créatif, collaboratif, et de bien poser à plat toutes les aspérités du projet.

Il s'agît bien sûr d'un liste de risques ! N'allez pas croire que je n'aime pas ce genre d'outils ! Bien au contraire, on augmente clairement la productivité si on les utilise à bon escient.

D'ailleurs, ça me permet de vous annoncer l'arrivée du livre de Todd Zaki Warfel dédié au prototypage chez Rosenfeld Média.

Qui n'a jamais eu affaire à cette question durant de longs repas familiaux ?!?

L'hiver arrive à grand pas. Pour m'occuper durant mes longues soirées,  je vous prépare des petites fiches de lecture.(Rassurez-vous je mangerais aussi quelques raclettes).

Oui oui, vous avez bien lu : des fiches de lectures ! Un peu , comme celles que l'on faisait en CM1. Grosso modo,  le but sera de vous présenter un livre, de le synthétiser très sommairement, d'en extraire les points forts, mais aussi les points faibles. Je dois aussi vous avouer qu'avec cette démarche, je souhaite conserver quelques traces de mes différentes lectures.

Je pourrais vous présenter le dernier "Martine à la plage", mais comme vous le savez, ce n'est malheureusement pas le thème de ce blog...

Du coup, vous aurez droit aux œuvres suivantes :

- Ergonomie Web : Pour des sites web efficaces, d'Amélie Boucher.

- Architecture de l'information pour le Web, de Peter Morville. (appelé aussi le Polar Bear)

- Je ne veux pas chercher ! , de Steve Krug.  (Traduction de Don't Make me think)

- Ergonomie du logiciel et design web : Le manuel des interfaces utilisateur, de Jean-François Nogier.

- Smashing book, de Smashing Magazine. (Pas encore reçu)

Pour le moment, j'ai un peu d'avance, puisque j'ai lu tous ces ouvrages (hors mis le smashing book), mais si vous en avez à me conseiller, je suis preneur !

Pas besoin de vous faire un dessin ...vous vous en êtes rendu compte : ce blog a été déserté depuis déjà un bon moment.
Et pour tous ces posts débutants par "links for ....", je n'en suis même pas l'auteur... En fait, il s'agit de la récupération automatique de mes bookmarks delicious par Wordpress. Je trouve ce système très pratique pour le référencement, et la publication continue, mais assez indigeste d'un point de vue utilisateur. Plus d'infos dans ce tuto.

Là n'est pas la question. Je vous annonce que je reprend du service. Enfin du moins que je vais me réorganiser. C'est à dire revenir à l'essence même d'un blog à savoir publier du contenu qualitatif et original. Donc grosso modo, éviter la reprise de contenu, ou la publication à la va-vite d'une vidéo. Cette décision a été prise suite à la lecture de l'article de Yohan.

Je vous rassure, la publication de billets ne sera pas forcément très soutenue... le temps de trouver un article et de le rédiger

La ligne éditoriale sera résolument orientée architecture de l'information, design d'interface, ergonomie web, utilisabilité, expérience utilisateur, ...

Si vous souhaitez avoir plus de fraicheur, je demeure un peu plus actif sur mes comptes Twitter et Delicious.

Donc bon, je vais essayer de tenir le cap.
A bientôt.

• newsletter_eyetracking.pdf (Objet application/pdf)
  Etude d'eye-tracking sur les newsletters
  (tags: newsletter eye-tracking ergonomie ia)

• Mind Mapping (carte heuristique) des logiciels liés à la 3D | Shadows.fr
  (tags: 3d outils logiciel mind-mapping)

• 14 sites qui proposent des interfaces ou navigations vraiment originales
  (tags: navigation inspiration UX)

• Wall of Deliverables
  Site partageant l'ensemble des livrables nécessaires pour la conception web
  (tags: persona documentation wireframes ressources)
• Mockups To Go - A user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups.
  Des ressources pour Balsamiq Mockup, logiciel de wireframing.
  (tags: balsamiq_mockup wireframes prototype patterns)