Le bloc-notes ; ergonomie & UX

Flupa UX Day, résumé et lightning talks.

Raphaël — Sat, 12 May 2012 15:25:16 +0000

Hier, au Flupa Ux Day, j’ai présenté un lightning talks sur le thème « Les moines copistes utilisaient l’oculométrie » dont vous pouvez retrouver les slides ci-dessous.

(...)
Lire la suite de "Flupa UX Day, résumé et lightning talks." (497 mots)

Quantifying the User Experience

Raphaël — Thu, 03 May 2012 20:41:31 +0000

Personnellement, j’ai une formation universitaire en psychologie où j’ai appris l’importance de la validité interne et externe des données recueillies notamment lors des tests. J’ai fait quelques bonds et poussé quelques profs de marketing dans leurs retranchements quand ils m’expliquaient « qu’on valide le quanti avec le quali » ou l’inverse (ça changeait suivant les profs). Tout cela pour vous dire que Jeff Sauro vient de publier un livre disponible en France : Quantifying the User Experience: Practical Statistics for User Research. Bien sur là, ça ne laisse plus la place à l’improvisation et pif au mètre !

Pour vous faire une idée du travail de Jeff Sauro, vous pouvez lire son blog et retrouver, sur son site, des outils statistiques bien pratiques.(...)
Lire la suite de "Quantifying the User Experience" (744 mots)

Bref, je suis ergonome

Raphaël — Fri, 13 Apr 2012 07:05:13 +0000

Excellente vidéo twetter par Pierre Lannes et faites par heu… (si les auteurs passent par là, faites signes que je mette un lien) à Bordeaux !

[MAJ] Pour les 5 carrés l’explication est par là sur le site de Pierre.

A la découverte d’un « boilerplate »

Raphaël — Wed, 11 Apr 2012 07:17:29 +0000

Découverte du Week-end, je suis tombé sur un article parlant de l’utilisation de « boilerplate ». Pour faire simple c’est un modèle HTML, CSS, Javascript permettant de prototyper rapidement des pages web.

Le terme « boilerplate » était initialement utilisé par les juristes pour les contrats ou les courriers types qu’ils pouvaient rédiger et qui reprenaient toujours la même structure et un contenu proche qu’il suffisait de personnaliser. Dans la conception de services web, c’est un peu la même chose, les éléments de bases sont toujours les même, c’est leur agencement qui changent.

Le principe d’un boilerplate est donc simple. Il faut concevoir la ou les pages HTML avec le contenu, puis ajouter un certain nombre de « class », de balises, etc… qui appellent soit des feuilles styles, soit des javascripts déjà existants. Avec un peu de pratique et des connaissances en HTML/CSS on arrive vite un résultat très correct.

Quelques boilerplates :

Foundation
Twitter Bootstrap
HTML KickStart(...)
Lire la suite de "A la découverte d’un « boilerplate »" (407 mots)

© Raphaël pour Le bloc-notes ; ergonomie & UX, 2012. | Permalink | 2 commentaires |

A toi, l’enseignant de fac qui demande des entretiens à tes étudiants !

Raphaël — Wed, 04 Apr 2012 07:03:17 +0000

C’est la troisième demande que je reçois en quelques jours d’étudiants en licence ou master pour réaliser un entretien sur le métier d’ergonome. Il se trouve que j’ai répondu au premier, le deuxième avait des questions bateaux, et le troisième a reçu une réponse qui a inspiré ce billet.

A toi l’étudiant,

Les réponses que tu cherches se trouvent dans cet article qui date un peu, mais ça suffira largement pour ton enseignant. Tu pourras éventuellement le compléter avec cet article plus récent.

Sinon, quand tu t’adresses à moi évite de commencer par « Madame, Monsieur, » moi c’est que Monsieur, il n’y a pas de doutes possibles, si en plus tu fais un mailing, fait le bien !
« Toutes informations recueillies restera anonymes. » Ce n’est pas questionnaire c’est un entretien, si je te dis quelque chose, je l’assume !
« En vous remerciant de votre participation, mon étude s’achève dans quelques jours, je vous prie d’envoyer vos réponses par mails le plus rapidement possible. » Ce n’est pas parce que tu t’y ai pris au dernier moment que je vais faire ton boulot pour hier.

Ce n’est pas que tu m’es désagréable mais voilà, ce n’est pas avec tes questions que je vais faire vivre ma famille. Passons à ton enseignant.(...)
Lire la suite de "A toi, l’enseignant de fac qui demande des entretiens à tes étudiants !" (420 mots)

Résolution, tablettes & smartphones

Raphaël — Mon, 26 Mar 2012 10:25:04 +0000

Avec une troisième génération d’iPad, Apple a semé le trouble dans les résolutions d’écrans. En effet l’iPad 3 présente un nombre plus élevé de pixels que la majorité des PC avec une taille d’écran divisé par deux.

Je propose donc un petit tableau pour essayer de faire le point sur le parc des résolutions d’écrans.

Modéle	Définition (pixels)	Taille de l’écran (pouce)	Résolution (ppp)
iPhone 3GS	320×480	3,5	164
HTC Hero	320×480	3,2	180
Nokia N900	800×480	3,5	266
iPhone 4s	960×640	3,5	326
Galaxy Notes	1280×800	5,3	285

iPad 2	1024×768	9,7	132
Galaxy Tab 10,1	1280×800	10,1	150
Playbook	1024×600	7	170
Galaxy Tab 8,9	1280×800	8,9	170
iPad 3	2048×1536	9,7	264

Macbook Air	1440×900	13,3	128
iMac	2560×1440	27	109

Qu’est ce qu’il faut retenir ?

Les smartphones convergent vers une taille physique de l’écran de 3,5 pouces. Cela correspond simplement à la taille d’un objet que peu saisir la main d’un adulte. La paume de la main d’un adulte faisant entre 9,4 et 11,9 cm. Ce constat est présent depuis plus de 10 ans, les premiers Palm, par exemple, correspondaient aussi à ces normes.

Les tablettes convergent aussi vers un format « livre » entre 7 et 10 pouces, avec une bordure autour de l’écran permettant de le tenir, pendant qu’on le manipule de l’autre mains.

Il est probable que les prochains supports à bénéficier d’un écran « rétina » soit les ordinateurs portables avec des écrans de 11 à 15 pouces et une distance d’usage un peu supérieur à 40 cm. La résolution de l’écran devra être supérieur à 200 ppp à 50 cm ou 250 ppp à 40 cm pour que l’utilisateur ne perçoivent plus les pixels. Cela donnera par exemple un écran 2880×1800 pixels sur un écran 13,3 pouces et donc résolution de 256 ppp. Il faudra par contre que l’OS prenne en compte la résolution.

Quelques ressources pour se dépatouiller avec la technique

Comme il y a des gens plus compétent que moi dans le domaine, je vous propose quelques liens :

Le blog de Raphaël Goetter qui n’a pas seulement un excellent prénom, mais aussi plein d’idée pour faire des CSS et du HTML bien comme il faut.
Les notes de Luke Wroblewski, avec de nombreux articles sur la présentation de l’information sur smartphone et tablette.

Design for All, Smartphone et tablette

Raphaël — Wed, 14 Mar 2012 17:08:19 +0000

Vous trouverez ci-dessous la présentation que j’ai réalisé lors du petit déjeuner FLUPA, su 13 mars 2012 sur le thème de l’accessibilité appliqué aux tablettes et aux smartphones.

La présentation

Le détail de la présentation avec les notes.(...)
Lire la suite de "Design for All, Smartphone et tablette" (1,095 mots)

© Raphaël pour Le bloc-notes ; ergonomie & UX, 2012. | Permalink | Pas de commentaire |

Concevoir pour la TV, Présentation FLUPA

Raphaël — Wed, 07 Mar 2012 07:37:24 +0000

Cette présentation a été faites dans le cadre d’un afterwork FLUPA, Soirée « Ergonomie et Télévision du futur », le 6 mars 2012. Je reprend ici les diapositives ainsi que les notes. Donc dans un premier temps la présentation, puis le détail des diapositives avec les notes.

Cette présentation a pour objectif de faire un point sur la conception d’IHM pour la Télévision.(...)
Lire la suite de "Concevoir pour la TV, Présentation FLUPA" (1,211 mots)

Je veux télétravailler

Raphaël — Tue, 28 Feb 2012 08:30:50 +0000

A voir et revoir sur le blog de Jcfrog :

Pour rappel sur le télétravail

Design for all et catachrèse.

Raphaël — Tue, 21 Feb 2012 07:54:19 +0000

Aujourd’hui je vous propose une petite catachrèse, qui utilise une fonction d’accessibilité en l’occurrence « VoiceOver » pour lire un livre numérique.

Pour rappel une catachrèse est le détournement d’un outil pour une utilisation autre que celle prévue initialement.

Je cherchais un moyen d’écouter un livre au format numérique en même temps que je travaillais sur mon ordinateur. Dans mon cas c’est un livre technique. Certains passages ont moins d’importances et je m’attache juste à retenir les informations pertinentes avec la possibilité de retrouver le reste si-besoin.

Mac OS X propose en standard une fonction d’accessibilité qui est VoiceOver et qui est une synthèse vocale permant de lire le contenu affiché à l’écran. Cette fonction est aussi disponible sur iOS donc iPhone et sur iPad. Dans mon cas, comme je souhaitais aussi travailler sur mon ordinateur, il n’était donc pas pertinent de l’activé sur mon Mac. J’ai donc activé la fonction sur mon iPad (sur un iPhone c’est pareil).(...)
Lire la suite de "Design for all et catachrèse." (211 mots)

La probabilité que j’abandonne ma commande ?

Raphaël — Wed, 08 Feb 2012 10:14:52 +0000

Un achat en ligne ce matin sur un site qui utilise le système d’une banque dont le nom commence et fini par un C avec un I au milieu.

Interface de paiement incitant l'abandon.

A votre avis quelle est la probabilité que j’abandonne, soit par erreur, soit parce que l’on me dit 3 fois dans l’écran d’annuler/abandonner. Le top étant quand même « l’aide » qui incite à annuler. Vous allez me dire c’est des banquiers, pas des commerçants.

Pour bien faire, il faut simplement supprimer cette pseudo aide, supprimer le bouton « Abandonner » et mettre en avant le bouton « Valider » afin d’inciter à l’action. Le moyen le plus simple pour abandonner étant de fermer le navigateur ou de faire « précédent ».

Solution pour l'écran de paiement.

Tout de suite, on se pose moins de questions !

Globalement, les systèmes de paiements proposés par les banques sont déplorables en termes d’ergonomie et de graphisme, même si on observe une légère progression ces deux dernières années, avec toujours 10 ans de retards.

Bilan du bloc-notes, 2 ans de statistiques

Raphaël — Wed, 01 Feb 2012 11:28:24 +0000

Statistique du bloc-notes de janvier 2010 à 2012

Une progression continue de la fréquentation sur 2 ans, avec des pics et creux. La progression s’explique pour plusieurs raisons :

Le nombre d’articles présent est toujours plus important donc les sujets traités aussi. Les moteurs de recherche, notamment Google, proposent donc plus souvent des liens vers le bloc-notes.
Le nombre de lecteurs suivant le bloc-notes par divers moyens (RSS, Twitter, etc…) est aussi en progression constante.

Mon rythme de publication c’est un peu ralenti par rapport au début. C’est normal, mais je trouve toujours intéressant de prendre le temps d’écrire. Je me pose actuellement la question de compléter la publication sous la forme de blog, par une publication sous une forme plus aboutie et plus pratique à lire d’ebooks ?

Un grand merci à ceux qui me lise et à ceux qui prennent le temps de commenter !

Design for all, quelques références.

Raphaël — Mon, 30 Jan 2012 21:06:29 +0000

Travaillant actuellement sur le sujet, voici quelques références au sujet du « Design for all », comme ça cela n’évitera de les perdre.

Pour rappel : le design for all

La Convention des Nations Unies relative aux droits des personnes handicapées définit la notion de « conception universelle » (appelée aussi « Design for All ») dans la Convention relative aux droits des personnes handicapées.

« On entend par « conception universelle » la conception de produits, d’équipements, de programmes et de services qui puissent être utilisés par tous, dans toute la mesure possible, sans nécessiter ni adaptation ni conception spéciale. La « conception universelle » n’exclut pas les appareils et accessoires fonctionnels pour des catégories particulières de personnes handicapées là où ils sont nécessaires. »

Le design for all se doit de respecter 7 grands principes :

Utilisation égalitaire : utile et commercialisable auprès de personnes ayant différentes capacités.
Flexibilité d’utilisation : conciliation à une vaste gamme de préférences et de capacités individuelles.
Utilisation simple et intuitive : compréhension facile de l’utilisation, indépendamment de l’expérience, des connaissances, des compétences linguistiques de l’utilisateur ou de son niveau de concentration au moment de l’utilisation.
Information perceptible : communication efficace de l’information néces- saire vers l’utilisateur, quelles que soient les conditions ambiantes ou les capacités sensorielles de la personne.
Tolérance pour l’erreur : réduction au minimum des dangers et des conséquences adverses des accidents ou des actions involontaires.
Effort physique minimal : utilisation efficace et confortable, générant une fatigue minimale.
Dimensions et espace libre pour l’approche et l’utilisation : une taille et un espace adéquats pour s’approcher, saisir, manipuler et utiliser le bien, quelles que soient la taille, la posture ou la mobilité de l’utilisateur.

Les références.

ONU, Convention relative aux droits des personnes handicapées et Protocole facultatif. Source : http://www.un.org/disabilities/documents/convention/convoptprot-f.pdf
Publication du Conseil de l’Europe du 11 février 2010 : http://book.coe.int/ftp/3373.pdf
Design for All Foundation : http://www.designforall.org/en/dfa/dfa.php
Un document de synthése : http://www.solidarite.gouv.fr/IMG/pdf/Fiche_ConceptionUniverselle_bd.pdf
Center for Universal design Avec un poster de synthèse in english

Et merci à Daniel.

Triplette : CSS3, HTML5, Responsive Design

Raphaël — Mon, 16 Jan 2012 20:56:20 +0000

Pour bien commencer l’année, je vous propose trois livres pour vous mettre à niveau en conception de pages Web.

CSS3 pour les web designers : Cet ouvrage décrit de manière claire et succincte la dernière évolution des spécifications CSS.
HTML5 pour les web designers : Ce manuel se lit vite et bien, et constitue une bonne entrée en matière pour aborder le HTML 5. Evoquant d’abord les versions précédentes, il précise ensuite les nouveautés du langage, notamment en matière de multimédia (audio et vidéo) et de graphisme vectoriel.
Responsive web design : L’auteur explique comment concevoir un site Web pour anticiper et répondre aux besoins de l’utilisateur.

Ces trois livres sont complémentaires car ils abordent trois aspects à prendre en compte quand on conçoit actuellement un site web : les css pour la forme, le HTML5 pour le contenu et le responsive design pour le rendre accessible sur tout les supports.

Couverture des livres, HTML5, CSS3, Responsive Design

Comment perdre un client en une seconde ?

Raphaël — Thu, 05 Jan 2012 15:11:56 +0000

Il suffit de suivre l’exemple de Zalando.fr en ce moment. La page d’accueil est recouverte d’un formulaire et il n’y pas moyen de passer outre. Hors, je n’ai pas l’intention de donner coordonnées, j’ai été client une fois mais je n’ai pas l’intention de perdre à 5 minutes retrouver les identifiants et depuis quand on me demande ma carte d’idée pour rentrer dans un magasin ! Le formulaire étant bien fait je ne peux même pas taper 3 « qsdkfjks » vite fait pour passer. Il faut le remplir correctement.

Page d'accueil de Zalando.fr, début janvier 2012.

Je suppose qu’il y a une sombre histoire juridique de solde derrière ce formulaire ou simplement marketing à deux francs, six sous. Il fut une époque où notamment la FNAC faisait systématiquement cela, mais c’était dans les temps anciens du web que les plus jeunes n’ont pas connus.

Pour la peine, je vais aller dans un vrai magasin « en brique et mortier » comme on dit par chez nous.

Bonne année 2012 et petit bilan de 2011.

Raphaël — Thu, 05 Jan 2012 11:42:45 +0000

Pour bien commencer cette année 2012, je vous propose de revenir sur les articles publiés en 2 011 sur le bloc-notes d’iErgo. Vous trouverez, ci-dessous, le recueil des douze articles les plus lus, les plus commentés ou simplement ceux qui me paraissent les plus pertinents chaque mois. Ça parle donc d’ergonomie et d’expérience utilisateurs, mais aussi de choses plus futiles et légères.

Je vous propose deux formats pour ce recueil, en PDF avec une jolie typographie ou au format ePUB à lire sur votre tablette.

La fréquentation globale du bloc-notes est en hausse par rapport à 2010, passant de 28 559 à 68 720 en 2011 visites. Un jour de semaine, il y a environ 200 à 250 visites, un peu plus quand un article est publié, beaucoup plus (2060 visites) quand Macgénération fait un lien sur sa page d’accueil. Ce qui m’encourage bien-sur à continuer cette aventure.

Je vous souhaites à tous une bonne année 2012 !

Découvrez iTunes U !

Raphaël — Mon, 12 Dec 2011 09:36:06 +0000

Je ne sais pas si vous connaissez iTunes U et son contenu absolument exceptionnel ? C’est une des catégories disponibles sur iTunes dans le store. Le contenu proposé est gratuit dans sa grande majorité et proposé par des experts des différents domaines.

Je vous propose donc une petite sélection des présentations que j’ai trouvées. C’est loin d’être exhaustif vu le nombre et la qualité des intervenants.

En anglais

Human computer interaction.Université de Standford. C’est le lien vers la dernière session (Hiver 2011), mais vous pouvez retrouver les contenus des sessions précédentes aussi. (« Human-Computer Interaction Seminar » dans la recherche).
Développement sur iPhone et iPad.Université de Standford.

En français, au collège de France, sur la psychologie

Physiologie de l’action et de la perception. Collége de France, Alain Berthoz.
Psychologie cognitive expérimentale. Collége de France, Stanilas Dehaene.
Jean Piaget. Université Paris 5

Pour les rubriques ludiques et qui n’ont rien à voir avec l’ergonomie et les IHM.

Nationale Geographic. De nombreux photographes.

Il y a encore sans doute de nombreux trésors à trouver dans iTunes U et les contenus sont mis à jour régulièrement.

Les moines copistes utilisaient l’oculométrie.

Raphaël — Tue, 06 Dec 2011 09:52:13 +0000

Oui, il faut en arriver à cette conclusion, les moines copistes au moyen âge utilisaient l’oculométrie (eyetracking in english). La preuve ? C’est simple, ils utilisaient les même procéder que Facebook, Linkedin et compagnie pour organiser la mise en page des ouvrages.

Seconde Bible de Charles le Chauve, France, Saint-Amand, IXe siècle

Comme le montre cet article, Here’s How People Look at Your Facebook Profile — Literally, utilisant l’eyetracking sur divers sites sociaux, l’utilisateur suit la structure de la page, s’arrête sur les visuelles et les titres. C’est fantastique, c’est révolutionnaire comme découverte ! Je n’en reviens pas !

On remarque dans les ouvrages anciens, du moyen âge par exemple, l’utilisation de lettrines, d’enluminures et de visuelles pour structurer la page, conduire la lecture et agrémenter l’espace. Mais alors si les moines copistes utilisaient de telles mises en pages c’est qu’ils connaissaient l’eyetracking et qu’ils avaient réalisés de telles études ?

Par exemple cette double page pourrait rappeler furieusement l’organisation actuelle de bien des sites, ou la page d’un profil Facebook.

Anges et diables : jouer le texte, France (Nord), 1577

Je suis tombé sur cette étude par l’intermédiaire de un article de Fred Cavazza qui s’enthousiasme aux vues de tels résultats. J’ai plus le sentiment que c’est (encore) une utilisation de l’eyetracking dans un mauvais contexte, en l’absence de toutes hypothèses scientifiques qui montre des choses tautologiques.

« 100 % des utilisateurs ont tenté lire le contenu. »

Allez pour le plaisir des yeux et de la typographie !

Pentateuque avec targoum et commentaire de Rachi, Italie vers 1450

Bible latine avec la glose ordinaire : Actes des apôtres, Épîtres canoniques et Apocalypse, Paris, deuxième moitié du XIIIe siècle

Bible de étienne de Harding, Cîteaux, 1109

Les illustrations sont issues de la BNF.

Montrez moi une innovation ?

Raphaël — Thu, 01 Dec 2011 14:37:48 +0000

« Montrez-moi une innovation, un projet innovant ? » C’est la question que l’on m’a posée lors d’un entretien où je présentai mes travaux. Mais je suis resté un peu pris de court sur le sujet et je pense même avec un peu de recul que j’ai répondu à côté de la plaque. La question me turlupine depuis et je vais essayer d’y répondre !

Déjà, je ne suis pas un « créatif » dans le sens où je ne vais pas créer ex nihilo un truc méga-super innovant par un tour de magie. D’un autre coté, j’ai déjà abordé le sujet (il y a deux ans déjà), c’est peut-être intéressant en termes de création artistique, mais en termes d’ergonomie, on va rapidement dans le mur.

Pourtant, J’ai bien l’impression de travailler sur des sujets et de proposer des solutions innovantes. Mais c’est quoi une innovation d’ailleurs ? Je reprend la définition de Arnaud Groff :

« L’innovation est la capacité à créer de la valeur en apportant quelque chose de nouveau dans le domaine considéré tout en s’assurant que l’appropriation de cette nouveauté se fasse de manière optimale. »

Ah, oui, là cela correspond bien à ce que je peux proposer !(...)
Lire la suite de "Montrez moi une innovation ?" (601 mots)

Concevoir une interface avec Illustrator.

Raphaël — Tue, 29 Nov 2011 08:09:19 +0000

J’inaugure une petite série d’article sur les outils que j’utilise dans le cadre de mon travail de consultant en ergonomie et en UX. Pour commencer, je vous propose du lourd, en l’occurrence Illustrator !

Disons simplement les choses, les ergonomes ou UX utilisant cet outil sont à ma connaissance une minorité. Pour les ergonomes issus d’une filière scientifique un tel outil peu paraître assez lourd et pas très pratique, car il nécessite de connaître l’usage de la suite Adobe : calques, blocs, vecteurs & co. Pour les designers, Photoshop c’est plus beau ! C’est un peu caricatural, mais Illustrator est souvent considéré à tort comme un outil « technique » ou secondaire.(...)
Lire la suite de "Concevoir une interface avec Illustrator." (616 mots)