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

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 !

Je l'ai découvert très récemment, et je dois dire qu'il est rapidement devenu mon plus fidèle compagnon (du moins dans le cadre du travail).

Pour faire court et concis, Axure est un logiciel de prototypage.  Concrètement, il permet de créer des maquettes fonctionnelles animées (prototype) et de les accompagner de leurs fameuses specs.

Pour réaliser un prototype rien de plus simple :

1. 1/ Vous créez l'arborescence de votre site (modifiable à tout moment)
2. 2/ Vous modélisez des masters (équivalent d'un template/gabarit) que vous appliquez à vos pages. Ainsi une modification du master se répercutera automatiquement.  Le but étant de créer des modules/briques pour mieux factoriser votre travail.
3. 3/ Vous designez le corps propre à chacune des pages via des éléments HTML appellés widgets que vous déposer par des drag&drop.  Bien sûr, vous les relier entre elle pour suimuler un système de navigation traditionnel.
4. 4/ Vous ajoutez une structure conditionnelle. Et c'est là, le partie la plus pratique, puisque l'on peut facilement (pas besoin de savoir coder) indiquer que si l'internaute est loggé alors il accède à cette rubrique, s'il remplit mal le formulaire alors on affiche le message d'erreur, etc.
5. 5/ Après vous exporter en html l'ensemble de votre travail (fichier source au format .rp), qui est lisible sur toute plateforme, et que l'on peut mettre de plus sur un ftp, pour que votre client expérimente ce prototype.
6. 6/ Pour accompagner, cette maquette cliquable, Axure génère automatiquement les specs au format word. Même si la structure du document est en anglais, elle permet une bonne base de travail.

Bien sûr, il y a plein d'autres bons points que je ne vous ai pas mentionné :

• la possibilité de faire des projets partagés
• l'enregistrement automatique
• faire passer des variables de page en page
• une gestion très fine des différents comportements (survol/clic)
• le prix qui est de 500€ (oui malheureusement ce n'est pas donné pour un particulier )

Concernant les ressources pour apprendre, il n'y en a pas tant que ça, surtout d'un point du vue francophone !

• Eric - Superfiction a fait tout un article dessus, bien plus complet que le mien
• Vous pouvez vous documenter sur le forum officiel
• Sur le blog
• Les tutos vidéos
• Bien évidemment vous pouvez suivre le twitter d'Axure

Voilà pour les sources officielles, après pour gagner du temps lors de vos modélisations, vous pouvez récupérer :

• les librairies de widgets disponibles sur le site de l'éditeur (que pour la version 5.5)
• un fichier rempli de pattern sur le blog A clean design pour info voici le rendu en html
• le google groupe

Je pense que je serais ammené à reparler de ce logiciel, (ok j'aborderai aussi les éléments à revoir) donc si vous êtes motivés à fonder une pseudo communauté parlant la langue de molière et adepte d'Axure, je serais bien de la partie !

Je suis tombé dernièrement sur un article de Hebiflux (Interface Tactile et standardisation) qui soulève le problème du sens de défilement du contenu.

La vidéo ci-dessous va (je le pense) nous aider à trouver le système le plus efficient pour les scrolls des interfaces tactiles.

Untitled from Galdric on Vimeo.

Pour faire suite à un précédent billet, voici une 2nd question sur les bonnes pratiques et les mœurs en ergonomie.

En fait, je me demande pourquoi le scroll de nos navigateurs n'est pas dans le même sens que celui de  l'iPhone.

Concrètement sur nos ordis, si l'on souhaite scroller la page, il faut prendre son curseur et le descendre de haut en bas. Alors que pour l'iPhone, on fait un mouvement de bas en haut avec son doigt. Dans ce dernier cas, le curseur et la page se déplacent dans le même sens.

Pour ma part, celà a été plutôt instinctif comme démarche, mais d'une part je ne sais pas pourquoi les concepteurs d'Apple ont préféré ce système, et d'autre part, si cela va se généraliser dans toutes les interfaces tactiles et traditionnelles...

En y réfléchissant celà parait plus logique, mais vous pouvez surement m'éclairer !

Cela fait un petit moment que dans le cadre de mon job, je réalise des storyboards, zonings, ou autres wireframes.

Bref, et depuis le début, je suis toujours confronté à la même question : comment symboliser l’action d’enregistrement / sauvegarde ?

Pour être franc, je fais comme tout le monde, j’utilise l’icône de cette bonne vieille disquette. Oui mais voilà, la disquette n’est plus utilisée depuis belles lurettes... on est passé par la case CD, DVD, clé USB, et maintenant le stockage en ligne.

Et donc ma question est : est-ce que cette icône représente quelque chose pour les plus jeunes ? C’est tout bête, mais à titre de comparaison, sur les panneaux du code de la route, on ne voit plus trop des calèches…la signalisation s’est adaptée à nos mœurs, logique !

Du coup, si vous avez des idées ou des exemples de bonnes utilisations compréhensibles par tous, je suis preneur…

Tout d'abord, pour ceux qui ne connaissent pas le terme de "design pattern", ils découvriront la définition de ce terme sous le nom de "Patron de conception" en français.

J'ai découvert récemment cet outil présentant de nombreux cas de représentations graphiques de l'information.
En plus d'énumérer les differentes possibilités, ce site décrit les bons usages de chacun des patterns et fournit des exemples concrets.

Cet annuaire peut se réveler super pratiques pour les concepteurs de sites Web.
Seul bémol, le site est en anglais.

Les beaux jours reviennent, et mes billets aussi (enfin j'espère tenir le rythme).
Aujourd'hui, je viens de découvrir un univers Netvibes consacré à l'ergonomie, aux interfaces Homme/Machine, et à l'architecture de l'information.

Il s'agit de l'univers ErgoIHM, édité et publié par l'équipe du même nom.

Je me passionne depuis quelques temps à ce domaine, encore peu connu et je pense qu'avec l'arrivée des nouveaux produits (type iPhone, Wii, ...) révolutionnant l'expérience utilisateur, nous allons encore en entendre parler.

Bonne lecture