Ergonomie web » Brèves

Vive le mobile, même quand on n’a pas d’appareil mobile

pixeline — Sat, 20 Nov 2010 22:42:58 +0000

Je me surprends à surfer de plus en plus sur la version mobile des articles qui m’intéressent depuis mon ordinateur portable voire mon ordinateur de bureau. Pourquoi?

« reduced noise ». Beaucoup moins de bruit graphique, pas (souvent) de pub, navigation plus simple et donc page chargeant plus rapidement.

Tiens? C’est la même raison qui m’avait fait passer de Yahoo à Altavista puis à Google il y a 8 ans: l’efficacité de l’interface. L’homme évolue moins vite que la technologie…

Exemple sur mobile.slate.com et m.lesoir.be :

Oculométrie (eye tracking study) pas chère, peuchère !

pixeline — Thu, 12 Aug 2010 18:10:36 +0000

L’oculométrie (je dois toujours réprimer un sourire obscène lorsque j’écris ce terme) est, me semble-t-il, mieux connue sous son nom anglais: eye-tracking study, et désigne une méthode de capture de la position du regard d’un utilisateur visionnant et/ou interagissant avec un contenu affiché sur écran. En gros, elle se base sur un logiciel enregistrant via une caméra rétinienne la direction du regard visionnant une interface afin d’en analyser les trajectoires, ce qu’il regarde en premier, puis en second, etc. Le résultat est formalisé en cartes de chaleur (également mieux connues sous leur appellation anglaise: heatmap). Cette technique est très utile pour tester des interfaces ou effectuer des tests A/B, tests comparant 2 positions possibles pour un bouton de conversion (« call to action » my friends).

Bon, cela coûte très cher. Je rêvais l’année dernière de créer au sein de l’école un petit laboratoire réalisant des oculométries mais le montant nécessaire pour acquérir le matériel et le logiciel (somme variant entre 10 et 15000 EUR) m’en a dissuadé. Après avoir brièvement contemplé la possibilité de développer quelque chose à partir d’une simple webcam, mais découragé par le temps que cela me prendrais j’ai finalement laissé tomber, et j’ai eu raison, car avec internet, l’impayable n’est qu’une question de temps.

Fournisseurs de services d’oculométrie

Voici donc deux sites qui proposent des enregistrements en eyetracking de votre site/application/interface pour 30 à 50 USD par utilisateur test.

Si ce genre de service vous intéresse pour votre entreprise, vérifiez notamment que le service permette bien de spécifier les caractéristiques du public cible, et notamment sa localisation géographique: en effet, si un cow-boy américain évalue votre site de vente de véritables pipes d’Ardenne, je ne suis pas certain que la trajectoire de son regard va forcément refléter celui de votre public-cible.
Vu sous cet angle, et si l’on tient également compte du prix, usertesting.com me semble bien plus intéressant que GazeHawk, mais je ne les ai pas encore testés ni l’un ni l’autre.

D’ici à ce qu’une occasion se présente, je les ~~outil dans ma boite à conserve~~ conserve dans ma boîte à outil! Et vous, avez-vous déjà fait appel à ce genre de service? En connaissez-vous de valable en francophonie?

10/GUI – bureau tactile (concept)

pixeline — Wed, 14 Oct 2009 10:41:14 +0000

Cette présentation d’un concept d’ OS tactile pour ordinateur de bureau est très impressionnante. Par C. Miller (http://10gui.com/).

L’idée est simple : une main = 5 doigts. I doigt = 1 souris. Efficience = efficience x 10. Ce qui les amène à parler d’ « interaction bandwidth » que l’on pourrait définir par l’ampleur du vocabulaire interactif.

Et justement, les propositions de vocabulaire interactif du système proposé sont bigrement bien imaginées.

Wireframes everywhere : flairBuilder et hotGloo

pixeline — Sun, 27 Sep 2009 19:50:13 +0000

Cela n’arrête plus: après la fièvre du virus justine Henin, nous sommes actuellement sous le coup d’une invasion d’outils de wireframing / prototyping, tous plus prometteurs les uns que les autres.
A ce train-là, il ne faudra plus attendre longtemps avant d’en voir un disponible entièrement gratuitement, le monde du logiciel de niche sur internet étant probablement le seul marché sur lequel s’exerce une concurrence à peu près libre, globale et transparente, avec des consommateurs mobiles, bien informés et jouissant de toute l’information nécessaire.

Mais revenons à nos wireframes: deux nouveaux candidats à l’intégration de ma boîte à outils ont pointé leur nez aujourd’hui.

1. hotGloo

hotGloo crée des wireframes au look plus professionnel, plus propre que balsamiq, et semble très prometteur. Cela étant, tout votre travail est conservé sur leurs serveurs, ce qui ne me plait guère.
Par ailleurs, la gestion dynamique du menu de navigation du wireframe (voir vidéo ci dessus) est impressionnante. Je lui donnerai une chance pour mon prochain projet.

2. FlairBuilder

FlairBuilder me fait fort penser à balsamiq, en plus cher.

Et plein d’autres

Je suis également tombé sur ce sondage, qui liste encore des dizaines d’outils de wireframing / prototyping, en plus des manières classiques de faire du wireframing.

Enfin, je vous recommande la revue très fouillée de plusieurs logiciels de prototyping sur Usaddict, en français.

C’est l’overdose !

Si vous avez une expérience à partager avec ces deux outils, I’m all ears !!

Faire une référence à wikipedia sans interrompre le flux de lecture

pixeline — Sun, 20 Sep 2009 19:25:07 +0000

Je viens de tomber sur un plugin wordpress très malin, par Matthew Healy: WikiPop. Ce plugin capture les liens pointant vers wikipedia et transforme leur comportement de manière à ce que, ces liens lorsque cliqués, n’ouvrent pas un onglet ou une fenêtre, mais une fenêtre modale à la lightbox, ce qui permet de consulter les informations supplémentaires disponibles sur wikipedia sans pour autant quitter le site.

Démo

Je suppose que vous savez ce qu’est une [wikipop language="fr"]fenêtre modale[/wikipop] ? C’est un bon moyen d’afficher des [wikipop language="fr"]informations[/wikipop] supplémentaires sans craindre le blocage de pop up.

Pas mal, n’est-ce pas? Simple, mais il fallait y penser.

wireframe: iplotz

pixeline — Sat, 25 Apr 2009 11:53:43 +0000

Découverte d’un nouvel outil de production de wireframes / mock ups:

iplotz.

Après un premier essai rapide, il me semble pas mal du tout, un peu plus « propre » que balsamiq Mockups, mais nécessite peut-être un peu plus de temps pour produire un mockup, à cause de l’absence de « snap into place » présent un peu partout et sous diverses formes dans balsamiq, et fort utile pour ajuster les proportions des éléments rapidement.

iPlotz existe en version en ligne et en version desktop (75 USD).

balsamiq Mockup permet maintenant le wireframing

pixeline — Wed, 22 Apr 2009 21:40:09 +0000

Suite à mon exploration récente dans le monde des outils de prototyping, Balsamiq Mockup (desktop edition) est devenu mon outil de choix pour rapidement dessiner des schémas d’écran.

La seule chose qui lui manquait était de pouvoir créer des liens depuis un mockup vers un autre, à la manière d’un wireframe.

Comme annoncé sur leur site, c’est maintenant chose possible, et de manière très simple. N’importe quel objet relatif à une action (par exemple un lien ou bouton) a une option complémentaire « link to « , suivi d’un dropdown menu qui liste les mockups associables (concrètement, les autres mockups se trouvant dans le dossier du mockup actif).

Well done !

Pour en savoir plus, lisez l’explication complète sur le blog de balsamiq.

Atelier-conférence: Démarche utilisateur, Charleroi, 2 avril 2009

pixeline — Tue, 17 Mar 2009 08:47:52 +0000

Dans tous les métiers, et particulièrement ceux du web, la formation continue est vitale et inherente à la profession, vu l’évolution technologique constante. J’invite dès lors le lecteur à participer à l’atelier sur « la démarche centrée utilisateur » organisé dans le cadre du REWICS qui aura lieu le 2 avril prochain à Charleroi.

Judith Jassogne, responsable de communication multimédia, exposera sa démarche ergonomique dans le cadre de projets liés à la Région Wallonne. Je ne connais pas cette personne ni son travail, ce sera donc l’occasion de voir le « state of the art » de l’ergonomie web en Région Wallonne.

Information importante: l’ inscription au REWICS est gratuite.

Plus d’infos sur la page dédiée à l’atelier sur rewics.be.

Je découvre que cet événement appartient à un événement plus large, la Semaine Numérique, qui a pour objectif d’ informer, sensibiliser, accompagner le public dans l’appropriation des technologies de l’information. Malheureusement, le programme de cette Semaine Numérique souffre d’un traitement ingrat, qui se navigue selon le lieu ou la date, mais pas la thématique. Avec autant d’événements, j’ai personnellement laissé tomber. On se demande quelle est la place laissée à l’utilisateur sur leur site

Sticky "Back" Button

pixeline — Sat, 14 Mar 2009 21:44:28 +0000

Vu sur le site de Luke Wroblewski (auteur du livre « web form design: Filling in the Blanks ») Un bouton « back » qui colle à votre souris. Pourquoi pas, puisqu’il n’y a rien d’autre à faire sur cette page dédiée à la vision d’une image ?

Pour tester l’interaction, visitez LukeW: Image Viewer.

ZoomIt – le zoom intégré à Windows XP

pixeline — Tue, 10 Mar 2009 20:34:50 +0000

ZoomIt est une minuscule application sur Windows qui permet de zoomer n’importe où sur l’écran. Très amusant, et utile pour les présentations.