The Coder's Breakfast - Ergonomie & Webdesign2022-11-22T14:44:11+01:00Olivier Croisierurn:md5:7bccc57fa40daaa0bbb47c16f3d66529DotclearDesign for developersurn:md5:74651c24d4426470e2d3e172b754bc862010-12-27T14:14:00+01:002011-10-02T13:50:58+02:00Olivier CroisierErgonomie & Webdesign <p>A must-see for every user-experience concerned developer.... <a href="http://thecodersbreakfast.net/index.php?post/2010/12/27/Design-for-developers"><em>Lire</em> Design for developers</a></p>http://thecodersbreakfast.net/index.php?post/2010/12/27/Design-for-developers#comment-formhttp://thecodersbreakfast.net/index.php?feed/atom/comments/275Moo.com : un modèle d'expérience utilisateururn:md5:89ad501883cd063d4eabde5c0d29be012009-10-29T22:50:00+01:002009-10-30T00:38:12+01:00Olivier CroisierErgonomie & Webdesignergonomieinternetux<p>J'ai récemment commandé des mini-cartes de visite pour ce blog, ayant épuisé les précédentes.<br />
Après avoir comparé les différentes boutiques d'impression en ligne, je me suis décidé pour <a href="http://uk.moo.com/fr/">Moo</a>. Leur site est clair et sympa, et j'ai bien aimé leur motto "we love to print" - simple, efficace, humoristique. <br />
Vous verrez que tout le reste est à l'avenant - un vrai modèle d'expérience utilisateur.</p> <p>Le site
Tout d'abord, le site. S'il ne paie pas de mine, c'est pourtant un modèle d'ergonomie :
Identification claire du site ("Nous imprimons des Cartes de Visite et bien plus encore !")
Présentation détaillée du service rendu au client ("Ce que vous pouvez faire avec Moo"), avec une représentation visuelle des différents supports d'impression... <a href="http://thecodersbreakfast.net/index.php?post/2009/10/29/Moo.com-%3A-un-mod%C3%A8le-d-exp%C3%A9rience-utilisateur"><em>Lire</em> Moo.com : un modèle d'expérience utilisateur</a></p>http://thecodersbreakfast.net/index.php?post/2009/10/29/Moo.com-%3A-un-mod%C3%A8le-d-exp%C3%A9rience-utilisateur#comment-formhttp://thecodersbreakfast.net/index.php?feed/atom/comments/218Evolution du design des plans de métrosurn:md5:f31fe8cb7bd42cdd1970f7e05fa56cac2009-03-26T14:31:00+01:002009-03-26T14:31:05+01:00Olivier CroisierErgonomie & Webdesigndesign <p>Le blog Creative Review propose un article intéressant retraçant un siècle d'évolution dans le design des plans des métros européens (français, anglais, allemand).
Si les premiers plans restaient fidèles à la topologie réelle des lignes, les travaux de George Dow et de Harry Beck, au début du 20° siècle, ont popularisé un style graphique épuré,... <a href="http://thecodersbreakfast.net/index.php?post/2009/03/26/Evolution-du-design-des-plans-de-m%C3%A9tros"><em>Lire</em> Evolution du design des plans de métros</a></p>http://thecodersbreakfast.net/index.php?post/2009/03/26/Evolution-du-design-des-plans-de-m%C3%A9tros#comment-formhttp://thecodersbreakfast.net/index.php?feed/atom/comments/171Ergonomie : certains symboles ont la vie dureurn:md5:90d296a25cd069b37d6783b4a833fa532009-02-25T10:24:00+01:002009-02-25T10:24:08+01:00Olivier CroisierErgonomie & Webdesignergonomie<p>Faites le test.<br />
<img src="http://thecodersbreakfast.net/public/166/SaveFloppy3.jpg" alt="SaveFloppy3.jpg" style="float:right; margin: 0 0 1em 1em;" />Ouvrez une application permettant d'éditer du contenu, comme un traitement de texte ou un éditeur d'images. Maintenant, regardez l'icône de la barre d'outils permettant de sauvegarder le document. Oui, celle en forme de... disquette. <br />
Une disquette ? En 2009 ?</p> <p>Cela fait maintenant 10 ans que les disquettes sont obsolètes.
Dès 1998, Apple proposait un iMac dépourvu de lecteur 3.5", pariant sur l'amélioration de la capacité des disques durs pour la sauvegarde des données personnelles, et sur la montée en puissance d'Internet pour assurer leur transmission. L'évolution informatique leur a donné raison...... <a href="http://thecodersbreakfast.net/index.php?post/2009/02/24/Les-symboles-ont-la-vie-dure"><em>Lire</em> Ergonomie : certains symboles ont la vie dure</a></p>http://thecodersbreakfast.net/index.php?post/2009/02/24/Les-symboles-ont-la-vie-dure#comment-formhttp://thecodersbreakfast.net/index.php?feed/atom/comments/161Inspiration graphique : le plein de listesurn:md5:a067dd1cd8463bb58c3e6bab557696b22009-02-07T01:29:00+01:002009-02-07T02:44:29+01:00Olivier CroisierErgonomie & Webdesigndesign<p>Ce week-end, je vous propose de faire le plein d'inspiration graphique, au travers d'un ensemble de listes :</p>
<ul>
<li>50 re-designs réussis</li>
<li>50 menus de navigation insolites</li>
<li>70 ressources graphiques artisanales</li>
<li>30 ans de design Apple</li>
</ul> <p>50 re-designs réussis
On commence par un panorama de 50 logos, objets ou sites re-designés avec succès, proposé par le site web de design Function.
On notera que pour les textes, les polices sans sérif et les minuscules sont à la mode, à cause de leur sobriété et de leur lisibilité. Pour les graphismes, les courbes et les couleurs vives sont à... <a href="http://thecodersbreakfast.net/index.php?post/2009/02/07/Inspiration-graphique-%3A-le-plein-de-listes"><em>Lire</em> Inspiration graphique : le plein de listes</a></p>http://thecodersbreakfast.net/index.php?post/2009/02/07/Inspiration-graphique-%3A-le-plein-de-listes#comment-formhttp://thecodersbreakfast.net/index.php?feed/atom/comments/149Pagination : un petit tour d'horizonurn:md5:a8e156503ad3ef58508020ac0276abb92008-11-27T19:03:00+01:002008-11-27T19:03:05+01:00Olivier CroisierErgonomie & Webdesignergonomieinternet<p>Voici un petit tour d'horizon des systèmes de pagination mis en place sur différents sites à forte audience.<br />
On y retrouve du bon et du mauvais, et parfois même des idées assez surprenantes.</p> <p>Tout d'abord, une petite remarque : certaines captures d'écran insérées dans ce billet sont réduites pour des raisons de mise en page. Les images originales, toutes à la même échelle 1:1, sont accessibles en cliquant sur les miniatures, afin que vous puissiez comparer correctement les tailles des systèmes de pagination.
Les moteurs de recherche... <a href="http://thecodersbreakfast.net/index.php?post/2008/11/27/Pagination-%3A-un-petit-tour-d-horizon"><em>Lire</em> Pagination : un petit tour d'horizon</a></p>http://thecodersbreakfast.net/index.php?post/2008/11/27/Pagination-%3A-un-petit-tour-d-horizon#comment-formhttp://thecodersbreakfast.net/index.php?feed/atom/comments/110Opera : HTML5, SVG & SMILurn:md5:ead36ff617aad9d05e4b25e8044562342008-10-20T22:19:36+00:002011-02-20T16:36:07+00:00Olivier CroisierErgonomie & Webdesignhtml-cssinternet <p>Je vous invite à visionner cette courte démonstration des technologies HTML5, SVG et SMIL réalisée par Opera Software.
Amusant de voir les derniers soubresauts des standards de rendu et d'animation pour le web, qui tentent vainement de rattraper leur retard sur Flash / Flex (Adobe) et Silverlight (Microsoft).
Car de toute façon, au vu des parts... <a href="http://thecodersbreakfast.net/index.php?post/2008/10/20/105-opera-html5-svg-smil"><em>Lire</em> Opera : HTML5, SVG & SMIL</a></p>http://thecodersbreakfast.net/index.php?post/2008/10/20/105-opera-html5-svg-smil#comment-formhttp://thecodersbreakfast.net/index.php?feed/atom/comments/87De l'importance des messages d'erreururn:md5:87b69efca3ce03c06713e85839d79c272008-09-24T22:42:37+00:002008-09-24T22:43:03+00:00Olivier CroisierErgonomie & Webdesignergonomie<p>Les systèmes informatiques sont devenus si complexes qu'il n'est plus question de savoir <em>si</em> une erreur va se produire, mais <em>quand</em>.<br />
Il est donc vital de proposer des messages d'erreur simples et informatifs : pour l'utilisateur d'une part, afin de le rassurer et de lui indiquer les mesures à prendre pour contourner le problème ; et pour les développeurs ou les équipes de support d'autre part, afin qu'ils puissent établir rapidement un diagnostique fiable et corriger l'anomalie.</p>
<p>Mais les messages d'erreur sont souvent rédigés par les programmeurs eux-mêmes, et il arrive qu'ils se laissent aller à quelques facéties...</p> <p>Entre références ésotériques et messages cryptés, Technologizer a établi une liste de 13 messages d'erreur pour le moins... intéressants.
A titre d'exercice, comparons le #1 et le #7.
Le premier ("Blue screen of death" sous Windows) est un message d'erreur purement technique. L'utilisateur n'est pas renseigné sur la cause de l'erreur, et n'est... <a href="http://thecodersbreakfast.net/index.php?post/2008/09/24/84-messages-d-erreurs-exemples-et-contre-exemples"><em>Lire</em> De l'importance des messages d'erreur</a></p>http://thecodersbreakfast.net/index.php?post/2008/09/24/84-messages-d-erreurs-exemples-et-contre-exemples#comment-formhttp://thecodersbreakfast.net/index.php?feed/atom/comments/74Interfaces et Ergonomie : quelques référencesurn:md5:61a79ae39eadc9fb2f52a6bbd7e561e62008-08-01T20:52:30+00:002008-08-01T20:52:30+00:00Olivier CroisierErgonomie & Webdesignergonomiemacos <p>Voici quelques liens intéressants pour alimenter votre réflexion sur l'ergonomie des interfaces homme-machine :
Magic Ink: Information Software and the Graphical Interface
Les indispensables Human Interface Guidelines chez Apple
Silverback, un logiciel pour Mac permettant d'organiser facilement des séances de "usability testing".
PS : j'en... <a href="http://thecodersbreakfast.net/index.php?post/2008/08/01/79-interfaces-et-ergonomie-un-peu-de-lecture-utile"><em>Lire</em> Interfaces et Ergonomie : quelques références</a></p>http://thecodersbreakfast.net/index.php?post/2008/08/01/79-interfaces-et-ergonomie-un-peu-de-lecture-utile#comment-formhttp://thecodersbreakfast.net/index.php?feed/atom/comments/70Vista : l'UAC conçu pour embêter les utilisateursurn:md5:d587e4e763f2d96064ebe8eb5e59c7152008-04-12T13:22:58+00:002008-07-31T00:11:39+00:00Olivier CroisierErgonomie & Webdesignergonomiesécuritéwindows<p>L'un des arguments de vente de Vista, le dernier système d'exploitation de Microsoft, est sa sécurité améliorée. En particulier, le simple utilisateur n'est plus censé posséder les droits d'administrateur par défaut. Seul hic : les éditeurs logiciels, forts de 15 ans d'expérience (ou plutôt de mauvaises habitudes) sur cet OS, tiennent ces droits pour acquis, et la plupart de leurs produits ne peuvent fonctionner sans.</p>
<p>Que faire ? Impossible de révoquer totalement ces droits sous peine de réduire la logithèque compatible à quelques titres seulement ; et hors de question de conserver l'ancien système, porte ouverte à toutes les erreurs et aubaine pour tous les virus et pirates informatiques.</p> <p>Microsoft a donc opté pour une solution hybride : autoriser l'utilisateur à obtenir ponctuellement les privilèges d'administration, mais après avoir été alerté des risques ; c'est le système UAC (User Access Control). Ainsi, à chaque interaction avec le système d'exploitation - que ce soit une action potentiellement dangereuse comme le remplacement... <a href="http://thecodersbreakfast.net/index.php?post/2008/04/12/50-vista-l-uac-concu-pour-embeter-les-utilisateurs"><em>Lire</em> Vista : l'UAC conçu pour embêter les utilisateurs</a></p>http://thecodersbreakfast.net/index.php?post/2008/04/12/50-vista-l-uac-concu-pour-embeter-les-utilisateurs#comment-formhttp://thecodersbreakfast.net/index.php?feed/atom/comments/47