<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="wordpress/2.3" -->
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	>

<channel>
	<title>Innovablog &#187; Ergonomie</title>
	<link>http://innovablog.com</link>
	<description>Le Web où l’Innovation ordinaire : design, ergonomie, interfaces riches, web 2.0, eCommerce,...</description>
	<pubDate>Fri, 18 Jul 2008 13:03:20 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.3</generator>
	<language>en</language>
			<item>
		<title>Formulaires web : faut-il faire s&#8217;identifier vos clients avec leur email ?</title>
		<link>http://innovablog.com/ergonomie/formulaire-web-login-email/</link>
		<comments>http://innovablog.com/ergonomie/formulaire-web-login-email/#comments</comments>
		<pubDate>Tue, 08 Jul 2008 08:02:56 +0000</pubDate>
		<dc:creator>Olivier Favre</dc:creator>
		
		<category><![CDATA[Ergonomie]]></category>

		<category><![CDATA[Analyse]]></category>

		<category><![CDATA[authentification]]></category>

		<category><![CDATA[conversion]]></category>

		<category><![CDATA[ecommerce]]></category>
<category>analyse</category><category>authentification</category><category>conversion</category><category>ecommerce</category>
		<guid isPermaLink="false">http://innovablog.com/ergonomie/formulaire-web-login-email/</guid>
		<description><![CDATA[La question de l&#8217;authentification sur un site marchand est une problématique récurrente de l&#8217;e-commerce, mais on comprend rapidement pourquoi : le formulaire d&#8217;inscription est au cœur de bon nombre de stratégies de vente en ligne. Le rater, c&#8217;est inéluctablement faire chuter son taux de conversion. Posons notre regard sur une bonne pratique qui tend à [...]]]></description>
			<content:encoded><![CDATA[<p>La question de l&#8217;authentification sur un site marchand est une problématique récurrente de l&#8217;<a href="http://innovablog.com/tag/ecommerce/">e-commerce</a>, mais on comprend rapidement pourquoi : <strong>le <a href="http://innovablog.com/tag/formulaire/">formulaire</a> d&#8217;inscription est au cœur de bon nombre de stratégies de vente en ligne</strong>. Le rater, c&#8217;est inéluctablement faire chuter son taux de <a href="http://innovablog.com/tag/conversion/">conversion</a>. Posons notre regard sur une bonne pratique qui tend à s&#8217;imposer : le login par l&#8217;email.</p>
<p align="center"><img src="http://innovablog.com/wp-content/files/2008/07/design-form-login.jpg" alt="Design formulaire login" /></p>
<h3 align="left">S&#8217;authentifier, oui mais comment ?</h3>
<p>Nous nous étions déjà interrogés sur l&#8217;<strong>utilité d&#8217;une authentification en préalable à l&#8217;achat</strong> par opposition au &#8220;<em>checkout as a guest</em>&#8220;(<a href="http://innovablog.com/ebusiness/e-commerce-faut-il-etre-identifie-pour-acheter-en-ligne/" rel="bookmark" title="Lien permanent vers le billet E-commerce : faut-il être loggé pour acheter en ligne ?">E-commerce : faut-il être loggé pour acheter en ligne ?</a>). Si plusieurs stratégies cohabitent (on parle bien ici de stratégie commerciale et non d&#8217;un simple choix du programmeur), il en est de même concernant la clef faisant office de login (ou identifiant). <strong>Le couple login / mot de passe est jusqu&#8217;à présent la seule solution proposée par l&#8217;e-commerce pour s&#8217;authentifier</strong> et ainsi rappatrier ses informations de compte personnel (les solutions d&#8217;OpenId sont encore ultra-minoritaires dans le commerce en ligne pour un marché surement pas encore mature pour ce type de dispositifs).</p>
<h3>J&#8217;ai (encore) perdu mes identifiants !</h3>
<p>Je pense que tous les service clients et autres services de help desk du monde peuvent tous tirer le même constat. L&#8217;une des première étape de ré-engineering et d&#8217;optimisation des process dans ce type de service passe par une phase d&#8217;automatisation des tâches simples et à faible valeur ajoutée (le 80/20 : ces 20% de taches qui occupent 80% du temps des opérateurs). Or quelle question revient à fréquence régulière ? Je vous le donen en mille : <em><strong>j&#8217;ai perdu mes identifiants</strong></em> ! Voila pourquoi des dispositifs (parfois ergonomiques et astucieux) sont mis en place. En voici un : <strong>proposez comme identifiant à vos visiteurs leur email</strong> !</p>
<h3>Mon email c&#8217;est mon login</h3>
<p>Voici une liste de sites qui ont choisis d&#8217;utiliser l&#8217;email comme identifiants. L&#8217;e-commerce d&#8217;une façon générale semble avoir opté pour ce mode d&#8217;authentification. <strong>Ce qui suppose au passage que pour accéder au shopping en ligne, il faut préalablement posséder un email.</strong> C&#8217;est un pari avec très peu de risque.</p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/07/design-form-messages-mistergooddeal.png" title="Formulaire web, login = email : Mister Good Deal" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/07/design-form-messages-mistergooddeal.png" alt="Formulaire web, login = email : Mister Good Deal" width="510" /></a></p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/07/design-form-messages-amazon.png" title="Formulaire web, login = email : Amazon" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/07/design-form-messages-amazon.png" alt="Formulaire web, login = email : Amazon" width="510" /></a></p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/07/design-form-messages-ae.png" title="Formulaire web, login = email : American Eagle Outfitters" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/07/design-form-messages-ae.png" alt="Formulaire web, login = email : American Eagle Outfitters" width="510" /></a></p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/07/design-form-login-circuit-city.png" title="Formulaire web, login = email : Circuit City" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/07/design-form-login-circuit-city.png" alt="Formulaire web, login = email : Circuit City" width="510" /></a></p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/07/design-form-login-metacafe.png" title="Formulaire web, login = email : Metacafe" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/07/design-form-login-metacafe.png" alt="Formulaire web, login = email : Metacafe" width="510" /></a></p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/07/design-form-login-mint.png" title="Formulaire web, login = email : Mint" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/07/design-form-login-mint.png" alt="Formulaire web, login = email : Mint" width="510" /></a></p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/07/design-form-login-fnac.png" title="Formulaire web, login = email : FNAC" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/07/design-form-login-fnac.png" alt="Formulaire web, login = email : FNAC" width="510" /></a></p>
<h3 align="left">Possibilité de login avec username ou email </h3>
<p> <a href="http://innovablog.com/ergonomie/formulaire-web-login-email/#more-1060" class="more-link">(more&#8230;)</a></p>
<a href="http://innovablog.com/tag/analyse/" rel="tag">analyse</a>, <a href="http://innovablog.com/tag/authentification/" rel="tag">authentification</a>, <a href="http://innovablog.com/tag/conversion/" rel="tag">conversion</a>, <a href="http://innovablog.com/tag/ecommerce/" rel="tag">ecommerce</a><p><br /><br />Ces billets peuvent aussi vous intéresser :<ul><li><a href="http://innovablog.com/ebusiness/e-commerce-faut-il-etre-identifie-pour-acheter-en-ligne/">E-commerce : faut-il être loggé pour acheter en ligne ?</a></li><li><a href="http://innovablog.com/outils/a-b-split-testing-methodologie-optimisation-site-web/">Comment faire de l'A/B test sur un site à faible trafic ?</a></li><li><a href="http://innovablog.com/ebusiness/e-commerce-presentation-produit/">E-commerce : l'art de présenter son produit</a></li><li><a href="http://innovablog.com/ebusiness/e-commerce-panier-abandonne/">E-commerce : à la recherche du panier abandonné.</a></li><li><a href="http://innovablog.com/outils/zoomorama-presentation-produit-boutique-e-commerce/">La présentation du produit, la quête de l'outil idéal. Zoomorama ?</a></li></ul></p><br />]]></content:encoded>
			<wfw:commentRss>http://innovablog.com/ergonomie/formulaire-web-login-email/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Pétition pour l’accessibilité numérique des services publics</title>
		<link>http://innovablog.com/ergonomie/accessibilite-petition-services-publics/</link>
		<comments>http://innovablog.com/ergonomie/accessibilite-petition-services-publics/#comments</comments>
		<pubDate>Wed, 07 May 2008 07:49:45 +0000</pubDate>
		<dc:creator>Olivier Favre</dc:creator>
		
		<category><![CDATA[Ergonomie]]></category>

		<category><![CDATA[accessibilite]]></category>
<category>accessibilite</category><category>ergonomie</category>
		<guid isPermaLink="false">http://innovablog.com/ergonomie/accessibilite-petition-services-publics/</guid>
		<description><![CDATA[Un très bref mais néanmoins important billet pour vous annoncer cette pétition lancée pour l’accessibilité numérique des services publics. Elle a pour but de demander :

 Une validation et une publication rapide par arrêté ministériel du décret d’application de l’article 47 de la loi de février 2005.
La publication officielle en version définitive du Référentiel Général [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.web-pour-tous.org/spip.php?page=petition-accessibilite" target="_blank"><img src="http://innovablog.com/wp-content/files/2008/05/accessibilite-sites-internet.png" alt="Accessibilité" align="right" /></a>Un très bref mais néanmoins important billet pour vous annoncer cette pétition lancée pour l’accessibilité numérique des services publics. Elle a pour but de demander :</p>
<ul>
<li> Une validation et une publication rapide par arrêté ministériel du décret d’application de l’article 47 de la loi de février 2005.</li>
<li>La publication officielle en version définitive du <strong>Référentiel Général d’Accessibilité pour les Administrations</strong> (<a href="http://rgaa.referentiels.modernisation.gouv.fr/" target="_blank">RGAA</a>) contenant toutes les modalités techniques pour ce conformer au dit décret d’application.</li>
<li>L’implication des personnes handicapées dans l’application, le contrôle et la mise à jour du Référentiel Général d’Accessibilité pour les Administrations notamment par le biais des commissions communales pour l’accessibilité aux personnes handicapées pour ce qui concerne les collectivités territoriales et par le soutien au développement des formations à destination des personnes handicapées.</li>
</ul>
<p align="center"><a href="http://www.flickr.com/photos/77161041@N00/889184866/" target="_blank"><img src="http://farm2.static.flickr.com/1346/889184866_94464aac09.jpg" border="0" /></a><br />
<small><a href="http://www.photodropper.com/creative-commons/" title="creative commons" target="_blank"><img src="http://innovablog.com/wp-content/plugins/photo_dropper/images/cc.png" alt="Creative Commons License" align="absmiddle" border="0" height="16" width="16" /></a> <a href="http://www.photodropper.com/photos/" target="_blank">photo</a> credit: <a href="http://www.flickr.com/photos/77161041@N00/889184866/" title="Thanh Tung Nguyen" target="_blank">Thanh Tung Nguyen</a></small></p>
<h3>L&#8217;accessibilité ça sert à ça</h3>
<p>Rappelons que l&#8217;accessibilité des sites Internet sert au quotidien à ça :</p>
<ul class="spip">
<li class="spip">Lorsqu’un site respecte les règles d’accessibilité, les personnes âgées ne sont pas gênés par la taille des textes, elles peuvent utiliser la fonction de “grossissement des textes” de leur navigateur.</li>
<li class="spip">Lorsqu’un site respecte les règles d’accessibilité, Julien, aveugle, peut écouter le contenu de chaque page lue par son navigateur vocal, et naviguer à l’aide des indications données par celui-ci.</li>
<li class="spip">Lorsqu’un site respecte les règles d’accessibilité, Michel, handicapé moteur, peut naviguer sur les pages sans jamais utiliser de souris, avec le clavier traditionnel ou un dispositif adapté.</li>
</ul>
<h3>Signer la pétition</h3>
<p><a href="http://www.web-pour-tous.org/spip.php?page=petition-accessibilite" target="_blank">Pour signer, ça se passe <strong>ici</strong>.</a></p>
<a href="http://innovablog.com/tag/accessibilite/" rel="tag">accessibilite</a>, <a href="http://innovablog.com/tag/ergonomie/" rel="tag">ergonomie</a><p><br /><br />Ces billets peuvent aussi vous intéresser :<ul><li><a href="http://innovablog.com/design/design-resolutions-ecrans-monde-widescreen/">Enquête : les résolutions d'écran à travers le monde</a></li><li><a href="http://innovablog.com/analyse/formulaires-web-bonnes-pratiques-conception-ajax-2/">Bonnes pratiques de la conception de formulaires web (2/2)</a></li><li><a href="http://innovablog.com/analyse/formulaires-web-bonnes-pratiques-conception-ajax-1/">Bonnes pratiques de la conception de formulaires web (1/2)</a></li><li><a href="http://innovablog.com/ergonomie/accessibilite-ergonomie-et-utilisabilite-30-points-cles/">Accessibilité, ergonomie et utilisabilité : 30 points clés</a></li><li><a href="http://innovablog.com/design/design-alternatives-choix-conception/">Design / étude de cas : différentes alternatives de conception</a></li></ul></p><br />]]></content:encoded>
			<wfw:commentRss>http://innovablog.com/ergonomie/accessibilite-petition-services-publics/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Design, ergonomie : ces menus qui nous changent la vie, suite et fin</title>
		<link>http://innovablog.com/ergonomie/design-ergonomie-menus-riches-suite-fin/</link>
		<comments>http://innovablog.com/ergonomie/design-ergonomie-menus-riches-suite-fin/#comments</comments>
		<pubDate>Mon, 28 Apr 2008 15:29:24 +0000</pubDate>
		<dc:creator>Olivier Favre</dc:creator>
		
		<category><![CDATA[Ergonomie]]></category>

		<category><![CDATA[ergonomie-incitative]]></category>

		<category><![CDATA[menus]]></category>

		<category><![CDATA[navigation]]></category>

		<category><![CDATA[utilisabilite]]></category>
<category>ergonomie</category><category>ergonomie incitative</category><category>menus</category><category>navigation</category><category>utilisabilite</category>
		<guid isPermaLink="false">http://innovablog.com/ergonomie/design-ergonomie-menus-riches-suite-fin/</guid>
		<description><![CDATA[Mon précédent billet évoquait la richesse ergonomique récente de certains des menus que l&#8217;on côtoie au quotidien. Pour tout vous dire, j&#8217;ai eu l&#8217;idée de ce billet à la lecture d&#8217;un fabuleux post des créateurs de Basecamp, à savoir l&#8217;équipe de 37signals.
 
Etude de design
La vidéo est en effet consacrée à une étude de design [...]]]></description>
			<content:encoded><![CDATA[<p>Mon <a href="http://innovablog.com/ergonomie/design-ergonomie-menus-riches/" target="_blank">précédent billet</a> évoquait la richesse ergonomique récente de certains des <strong>menus</strong> que l&#8217;on côtoie au quotidien. <strong>Pour tout vous dire,</strong> j&#8217;ai eu l&#8217;idée de ce billet à la lecture d&#8217;un fabuleux post des créateurs de <a href="http://www.basecamphq.com/index" target="_blank"><strong>Basecamp</strong></a>, à savoir l&#8217;équipe de <a href="http://www.37signals.com/" target="_blank"><strong>37signals</strong></a>.</p>
<p align="center"> <img src="http://innovablog.com/wp-content/files/2008/04/menu-riche.jpg" alt="Menu riche" /></p>
<h3>Etude de design</h3>
<p>La vidéo est en effet consacrée à une étude de design : celui d&#8217;un nouveau &#8220;<strong><em>project switcher</em></strong>&#8220;, autrement dit un nouveau menu permettant de basculer d&#8217;un projet à l&#8217;autre de Basecamp.</p>
<p>On découvre dans cette vidéo comment l&#8217;équipe a travaillé de concert  (puisqu&#8217;en plus il s&#8217;agit d&#8217;un travail collaboratif) pour <strong>améliorer l&#8217;utilisabilité et l&#8217;ergonomie de cet objet</strong>.</p>
<h3>Le résultat ?</h3>
<p>Un objet tout simplement parfait.</p>
<ol>
<li>Ces gars là ont réellement du talent et</li>
<li>savent le communiquer.</li>
</ol>
<p>A vous d&#8217;en juger :</p>
<p align="center">
<embed src="http://www.viddler.com/player/4f6ed52a/" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" name="viddler_4f6ed52a" height="348" width="437"></embed>
</p>
<p><strong>&gt;&gt;&gt; Vous pouvez encore retrouver le billet sur les <a href="http://innovablog.com/ergonomie/design-ergonomie-menus-riches/" target="_blank">menus riches ici</a>.</strong></p>
<a href="http://innovablog.com/tag/ergonomie/" rel="tag">ergonomie</a>, <a href="http://innovablog.com/tag/ergonomie-incitative/" rel="tag">ergonomie incitative</a>, <a href="http://innovablog.com/tag/menus/" rel="tag">menus</a>, <a href="http://innovablog.com/tag/navigation/" rel="tag">navigation</a>, <a href="http://innovablog.com/tag/utilisabilite/" rel="tag">utilisabilite</a><p><br /><br />Ces billets peuvent aussi vous intéresser :<ul><li><a href="http://innovablog.com/ergonomie/design-ergonomie-menus-riches/">Design, ergonomie : ces menus qui nous changent la vie</a></li><li><a href="http://innovablog.com/design/design-alternatives-choix-conception/">Design / étude de cas : différentes alternatives de conception</a></li><li><a href="http://innovablog.com/design/design-web-conventions-positionnement-marque/">Le jeu des 7 différences ou l'importance du design dans votre positionnement</a></li><li><a href="http://innovablog.com/ergonomie/ergonomie-personas-developpement-ventes/">Personas : un outil pour développer les ventes</a></li><li><a href="http://innovablog.com/web-application/web-app-deisgn-ecouter-ses-utilisateurs/">Ecouter ses utilisateurs. Rêve ou réalité ?</a></li></ul></p><br />]]></content:encoded>
			<wfw:commentRss>http://innovablog.com/ergonomie/design-ergonomie-menus-riches-suite-fin/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Design, ergonomie : ces menus qui nous changent la vie</title>
		<link>http://innovablog.com/ergonomie/design-ergonomie-menus-riches/</link>
		<comments>http://innovablog.com/ergonomie/design-ergonomie-menus-riches/#comments</comments>
		<pubDate>Fri, 25 Apr 2008 15:19:19 +0000</pubDate>
		<dc:creator>Olivier Favre</dc:creator>
		
		<category><![CDATA[Ergonomie]]></category>

		<category><![CDATA[ergonomie-incitative]]></category>

		<category><![CDATA[menus]]></category>

		<category><![CDATA[navigation]]></category>
<category>ergonomie</category><category>ergonomie incitative</category><category>menus</category><category>navigation</category>
		<guid isPermaLink="false">http://innovablog.com/ergonomie/design-ergonomie-menus-riches/</guid>
		<description><![CDATA[Vous les avez certainement déjà rencontrés sur vos sites e-commerce favoris, puisqu&#8217;ils sont utilisés de plus en plus fréquemment, les menus riches fleurissent dans les arborescences. Leurs buts sont multiples :

améliorer la navigation interne du site, c&#8217;est là une fonctionnalité de base,
enrichir la présentation des produits,
rendre accessible le contenu en profondeur,
augmenter la visibilité de certains [...]]]></description>
			<content:encoded><![CDATA[<p>Vous les avez certainement déjà rencontrés sur vos sites e-commerce favoris, puisqu&#8217;ils sont utilisés de plus en plus fréquemment, <strong>les menus riches fleurissent dans les arborescences</strong>. Leurs buts sont multiples :</p>
<ul>
<li>améliorer la navigation interne du site, c&#8217;est là une fonctionnalité de base,</li>
<li>enrichir la <a href="http://innovablog.com/ebusiness/e-commerce-presentation-produit/" target="_blank">présentation des produits</a>,</li>
<li>rendre accessible le contenu en profondeur,</li>
<li>augmenter la visibilité de certains contenus pour nos amis les moteurs de recherche : objectif <a href="http://innovablog.com/moteurs-de-recherche/referencement-et-innovation/" target="_blank"><strong>SEO</strong></a>,</li>
<li>enfin, présenter une palette de fonctionnalités et améliorer l&#8217;expérience utilisateur.</li>
</ul>
<p align="center"><img src="http://innovablog.com/wp-content/files/2008/04/menu-getty-images.jpg" alt="Menus riches" /></p>
<p><a href="http://www.fredcavazza.net/2008/01/13/est-ce-la-mode-des-menus-deroulant-riches/" target="_blank">Fred Cavazza</a> nous les avait déjà évoqués pour partie. <strong>Je vous propose ici une revue de ce que l&#8217;on peut trouver aujourd&#8217;hui sur de nombreux sites.</strong></p>
<h3>Le menu déroulant façon pur <abbr title="HyperText Markup Language">Html</abbr></h3>
<p>Avant d&#8217;aller plus loin, rappelons-nous de ce qu&#8217;est un menu standard. Il s&#8217;agit de ce que l&#8217;on appelle vulgairement un menu déroulant, qui utilise la balise Html <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.6" target="_blank">&lt;select&gt;</a>, ce qui donne sans plus de mise en forme quelque chose comme cela :</p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/04/menu-classic-amazon.png" title="Menu classic : Amazon" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/04/menu-classic-amazon.png" alt="Menu classic : Amazon" /></a><br />
Un menu déroulant sur le site français d&#8217;Amazon
</p>
<p align="left">Ce qui caractérise ce type de menu, c&#8217;est donc la <strong>présence à l&#8217;extrémité droite d&#8217;une flèche pointée vers le bas</strong>, qui donne une <strong>indication <a href="http://innovablog.com/category/ergonomie/" target="_blank">ergonomique</a> à l&#8217;utilisateur</strong> : au clic, du contenu additionnel va apparaître au dessous. C&#8217;est ce que l&#8217;on appelle une convention.</p>
<p align="left">Les merveilles de la technologie, et notamment des feuilles de style, ont détourné cette convention pour l&#8217;appliquer à de nouveaux objets (on recrée l&#8217;illusion d&#8217;un select sur n&#8217;importe quel autre balise, voir sur une image). Voici un exemple sur <strong>mon profil <a href="http://linkedin.com" target="_blank">LinkedIn</a></strong> :</p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/04/menu-simple-linkedin.png" title="Menu riche : LinkedIn" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/04/menu-simple-linkedin.png" alt="Menu riche : LinkedIn" /></a></p>
<h3>Menu pour gagner du temps</h3>
<p align="left">Premier exemple, sur le site d&#8217;<a href="http://ae.com" target="_blank"><strong>American Eagle Outfitters</strong></a>. Une barre d&#8217;outil propose 4 choix. pour y accéder, deux façons : un clic direct sur le libellé OU un survol de la fameuse flèche pointée vers le bas.</p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/04/menu-american-eagle_outfitters-onmouseout.png" title="Menu riche : AE" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/04/menu-american-eagle_outfitters-onmouseout.png" alt="Menu riche : AE" /></a></p>
<p align="left">Je souhaite accéder à ma <strong>wish list</strong>. Pour cela, je passe donc ma souris sur la flèche, et le menu se déplie :</p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/04/menu-american-eagle_outfitters1.png" title="Menu riche : American Eagle Outfitters" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/04/menu-american-eagle_outfitters1.png" alt="Menu riche : American Eagle Outfitters" /></a></p>
<p align="left">Dans cet exemple, le menu propose aussi bien du texte, que des formulaires. Si j&#8217;avais directement cliqué sur l&#8217;intitulé de la rubrique, j&#8217;aurais atterri sur cette page, qui ne fait que dupliquer fonctionnellement le menu :</p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/04/menu-american-eagle_outfitters-wish-list.jpg" title="Menu riche : AE Wish List" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/04/menu-american-eagle_outfitters-wish-list.jpg" alt="Menu riche : AE Wish List" width="480" /></a></p>
<p align="left">Encore un exemple offrant une richesse fonctionnelle sur le site <strong><a href="http://fr.my.yahoo.com" target="_blank">My Yahoo</a></strong>, où un menu vous permet de sélectionner votre propre contenu :</p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/04/menu-yahoo-perso.png" title="Menu riche : My Yahoo" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/04/menu-yahoo-perso.png" alt="Menu riche : My Yahoo" width="480" /></a></p>
<h3>Un menu offrant des fonctionnalité avancées</h3>
<p align="left">On peut également utiliser des menus &#8220;riches&#8221; pour là encore gagner un clic et en ergonomie. L&#8217;exemple ci-dessous tiré du site Getty images, montre à quel point on peut offrir une réelle richesse fonctionnelle dans le menu. Il s&#8217;agit ici d&#8217;un moteur de recherche, le menu permet d&#8217;afficher ce qu&#8217;une page &#8220;<strong><em>Recherche avancée</em></strong>&#8221; aurait pu fournir.</p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2008/04/menu-getty-images.png" title="Menu riche : Getty images" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2008/04/menu-getty-images.png" alt="Menu riche : Getty images" /></a></p>
<p align="center">
<p> <a href="http://innovablog.com/ergonomie/design-ergonomie-menus-riches/#more-796" class="more-link">(more&#8230;)</a></p>
<a href="http://innovablog.com/tag/ergonomie/" rel="tag">ergonomie</a>, <a href="http://innovablog.com/tag/ergonomie-incitative/" rel="tag">ergonomie incitative</a>, <a href="http://innovablog.com/tag/menus/" rel="tag">menus</a>, <a href="http://innovablog.com/tag/navigation/" rel="tag">navigation</a><p><br /><br />Ces billets peuvent aussi vous intéresser :<ul><li><a href="http://innovablog.com/ergonomie/design-ergonomie-menus-riches-suite-fin/">Design, ergonomie : ces menus qui nous changent la vie, suite et fin</a></li><li><a href="http://innovablog.com/design/design-alternatives-choix-conception/">Design / étude de cas : différentes alternatives de conception</a></li><li><a href="http://innovablog.com/ergonomie/ergonomie-personas-developpement-ventes/">Personas : un outil pour développer les ventes</a></li><li><a href="http://innovablog.com/design/design-web-conventions-positionnement-marque/">Le jeu des 7 différences ou l'importance du design dans votre positionnement</a></li><li><a href="http://innovablog.com/moteurs-de-recherche/contenu-accessible-crawlable-indexable/">Accessibilité, ergonomie : Google donne ses précos</a></li></ul></p><br />]]></content:encoded>
			<wfw:commentRss>http://innovablog.com/ergonomie/design-ergonomie-menus-riches/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Personas : un outil pour développer les ventes</title>
		<link>http://innovablog.com/ergonomie/ergonomie-personas-developpement-ventes/</link>
		<comments>http://innovablog.com/ergonomie/ergonomie-personas-developpement-ventes/#comments</comments>
		<pubDate>Tue, 08 Apr 2008 19:57:11 +0000</pubDate>
		<dc:creator>Olivier Favre</dc:creator>
		
		<category><![CDATA[Ergonomie]]></category>

		<category><![CDATA[conversion]]></category>

		<category><![CDATA[ergonomie-incitative]]></category>

		<category><![CDATA[personas]]></category>
<category>conversion</category><category>ergonomie</category><category>ergonomie incitative</category><category>personas</category>
		<guid isPermaLink="false">http://innovablog.com/ergonomie/ergonomie-personas-developpement-ventes/</guid>
		<description><![CDATA[Vous avez absolument tous et toutes déjà été confronté à un &#8220;persona&#8221;. Le concept de personas est assez développé dans différentes disciplines : ergonomie incitative,  design visuel essentiellement mais également développement des ventes. il s&#8217;agit d&#8217;une méthode de développement centrée sur les utilisateurs.

Personas et ergonomie incitative
J&#8217;aime beaucoup la définition donné par Ergonomic Garden (SQLi [...]]]></description>
			<content:encoded><![CDATA[<p>Vous avez absolument tous et toutes déjà été confronté à un &#8220;persona&#8221;. Le concept de personas est assez développé dans différentes disciplines : <a href="http://www.qualitystreet.fr/?2008/02/22/101-ergonomie-incitative-et-personas-pour-plus-d-efficacite-et-d-efficience" target="_blank"><strong>ergonomie incitative</strong></a>,  design visuel essentiellement mais également développement des ventes. il s&#8217;agit d&#8217;une <strong>méthode de développement centrée sur les utilisateurs</strong>.</p>
<p align="center"><img src="http://innovablog.com/wp-content/files/2008/04/personas-ergonomie-incitative.jpg" alt="Personas ergonomie incitative" /></p>
<h3>Personas et ergonomie incitative</h3>
<p>J&#8217;aime beaucoup la définition donné par <a href="http://www.sqli-agency.com/blogs/ergonomicgarden/index.php?2008/02/10/105-personas-pas-seulement-pour-une-vision-partagee-des-utilisateurs" target="_blank">Ergonomic Garden (SQLi agency)</a> :</p>
<blockquote><p>Un <strong>&#8220;PERSONA&#8221;</strong> est un archétype, une représentation fictive des utilisateurs cibles, qu&#8217;on peut utiliser pour <strong>guider nos décisions</strong> concernant les fonctionnalités, la navigation, les interactions et même le <strong>design visuel</strong>.</p></blockquote>
<p>Le site <a href="http://www.grokdotcom.com/2008/04/08/bryan-eisenberg-persona-interview/" target="_blank">FutureNow</a> nous propose une interview vidéo de Bryan Eisenberg lors de la conférence <a href="http://www.searchenginestrategies.com/london/" target="_blank"><em>Search Engine Strategies</em></a> qui s&#8217;est tenu à Londres dernièrement.</p>
<p align="center">&nbsp;</p>
<p><embed src="http://www.youtube.com/v/JG-Pe6MrMdY&amp;hl=en" type="application/x-shockwave-flash" wmode="transparent" height="355" width="425"></embed></p>
<h3>Points clés à retenir</h3>
<p>Voici quelques points clés de la vidéo à retenir :</p>
<ul>
<li>Amélioration du processus de vente</li>
<li>Etablir une familiarité avec ses utilisateurs</li>
<li>Flash instantané de typologies d&#8217;utilisateurs façonnés par leurs comportements d&#8217;achats</li>
<li>Personas : représentations de modèles types de consommateurs</li>
</ul>
<p>Pour en savoir plus, je vous conseille ces deux ressources :</p>
<ul>
<li>ergonomic garden : <a href="http://www.sqli-agency.com/blogs/ergonomicgarden/index.php?2008/02/10/105-personas-pas-seulement-pour-une-vision-partagee-des-utilisateurs" target="_blank"><strong>Personas: pas seulement pour une Vision partagée des Utilisateurs&#8230;</strong></a></li>
<li><strong><a href="http://www.qualitystreet.fr/?2008/02/22/101-ergonomie-incitative-et-personas-pour-plus-d-efficacite-et-d-efficience">Ergonomie Incitative et Personas &#8230; pour plus d&#8217;efficacité et d&#8217;efficience</a></strong></li>
</ul>
<a href="http://innovablog.com/tag/conversion/" rel="tag">conversion</a>, <a href="http://innovablog.com/tag/ergonomie/" rel="tag">ergonomie</a>, <a href="http://innovablog.com/tag/ergonomie-incitative/" rel="tag">ergonomie incitative</a>, <a href="http://innovablog.com/tag/personas/" rel="tag">personas</a><p><br /><br />Ces billets peuvent aussi vous intéresser :<ul><li><a href="http://innovablog.com/design/design-alternatives-choix-conception/">Design / étude de cas : différentes alternatives de conception</a></li><li><a href="http://innovablog.com/ergonomie/design-ergonomie-menus-riches-suite-fin/">Design, ergonomie : ces menus qui nous changent la vie, suite et fin</a></li><li><a href="http://innovablog.com/ergonomie/design-ergonomie-menus-riches/">Design, ergonomie : ces menus qui nous changent la vie</a></li><li><a href="http://innovablog.com/outils/zoomorama-presentation-produit-boutique-e-commerce/">La présentation du produit, la quête de l'outil idéal. Zoomorama ?</a></li><li><a href="http://innovablog.com/ergonomie/formulaire-web-login-email/">Formulaires web : faut-il faire s'identifier vos clients avec leur email ?</a></li></ul></p><br />]]></content:encoded>
			<wfw:commentRss>http://innovablog.com/ergonomie/ergonomie-personas-developpement-ventes/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Journée Mondiale de l’Utilisabilité 2007 : les vidéos</title>
		<link>http://innovablog.com/ergonomie/journee-mondiale-utilisabilite-videos/</link>
		<comments>http://innovablog.com/ergonomie/journee-mondiale-utilisabilite-videos/#comments</comments>
		<pubDate>Sun, 25 Nov 2007 10:58:38 +0000</pubDate>
		<dc:creator>Olivier Favre</dc:creator>
		
		<category><![CDATA[Ergonomie]]></category>

		<category><![CDATA[utilisabilite]]></category>
<category>ergonomie</category><category>utilisabilite</category>
		<guid isPermaLink="false">http://innovablog.com/ergonomie/journee-mondiale-utilisabilite-videos/</guid>
		<description><![CDATA[La journée mondiale de l&#8217;utilisabilité s&#8217;est achevé et les contenu arrivent progressivement. Après le compte-rendu, voici maintenant les vidéos librement consultables sur le site officiel de l&#8217;évènement Simpleweb.fr.
A titre d&#8217;exemple : L&#8217;utilisabilité, emploi présent et perspectives d&#8217;avenir

L&#8217;utilisabilité, emploi présent et perspectives d&#8217;avenir
envoyé par synerghetic
Toutes les autres vidéos disponible sur le site Simpleweb.
ergonomie, utilisabiliteCes billets peuvent [...]]]></description>
			<content:encoded><![CDATA[<p align="left">La <strong>journée mondiale de l&#8217;utilisabilité</strong> s&#8217;est achevé et les contenu arrivent progressivement. Après le <a href="http://innovablog.com/ergonomie/journee-mondiale-de-lutilisabilite-2007-compte-rendu/" target="_blank">compte-rendu</a>, voici maintenant les <a href="http://www.simpleweb.fr/index.php?page=medias" target="_blank"><strong>vidéos</strong></a> librement consultables sur le site officiel de l&#8217;évènement <a href="http://www.simpleweb.fr" target="_blank"><strong>Simpleweb.fr</strong></a>.</p>
<p>A titre d&#8217;exemple : <strong>L&#8217;utilisabilité, emploi présent et perspectives d&#8217;avenir</strong></p>
<p align="center"><embed src="http://www.dailymotion.com/swf/1Pf0qLW5eIlF0ox14" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" height="335" width="425"></embed><br />
<strong><a href="http://www.dailymotion.com/video/x3hbeu_lutilisabilite-emploi-present-et-pe">L&#8217;utilisabilité, emploi présent et perspectives d&#8217;avenir</a></strong><br />
<em>envoyé par <a href="http://www.dailymotion.com/synerghetic">synerghetic</a></em></p>
<p>Toutes les <a href="http://www.simpleweb.fr/index.php?page=medias" target="_blank">autres vidéos</a> disponible sur le site Simpleweb.</p>
<a href="http://innovablog.com/tag/ergonomie/" rel="tag">ergonomie</a>, <a href="http://innovablog.com/tag/utilisabilite/" rel="tag">utilisabilite</a><p><br /><br />Ces billets peuvent aussi vous intéresser :<ul><li><a href="http://innovablog.com/ergonomie/design-ergonomie-menus-riches-suite-fin/">Design, ergonomie : ces menus qui nous changent la vie, suite et fin</a></li><li><a href="http://innovablog.com/web-application/web-app-deisgn-ecouter-ses-utilisateurs/">Ecouter ses utilisateurs. Rêve ou réalité ?</a></li><li><a href="http://innovablog.com/ergonomie/journee-mondiale-de-lutilisabilite-2007-compte-rendu/">Journée Mondiale de l'Utilisabilité 2007 : compte-rendu</a></li><li><a href="http://innovablog.com/ergonomie/ergonomie-design-amazon-cree-langage-visuel/">Ergonomie, Design : Amazon a créé un langage visuel</a></li><li><a href="http://innovablog.com/ergonomie/accessibilite-ergonomie-et-utilisabilite-30-points-cles/">Accessibilité, ergonomie et utilisabilité : 30 points clés</a></li></ul></p><br />]]></content:encoded>
			<wfw:commentRss>http://innovablog.com/ergonomie/journee-mondiale-utilisabilite-videos/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Ergonomie : Comment améliorer les formulaires eBay ?</title>
		<link>http://innovablog.com/ergonomie/ergonomie-ebay-formulaire-design/</link>
		<comments>http://innovablog.com/ergonomie/ergonomie-ebay-formulaire-design/#comments</comments>
		<pubDate>Tue, 13 Nov 2007 11:55:09 +0000</pubDate>
		<dc:creator>Olivier Favre</dc:creator>
		
		<category><![CDATA[Ergonomie]]></category>

		<category><![CDATA[Design]]></category>

		<category><![CDATA[ebay]]></category>

		<category><![CDATA[formulaire]]></category>
<category>design</category><category>ebay</category><category>ergonomie</category><category>formulaire</category>
		<guid isPermaLink="false">http://innovablog.com/ergonomie/ergonomie-ebay-formulaire-design/</guid>
		<description><![CDATA[Garrett Dimon nous propose une alternative au formulaire d&#8217;inscription du géant des enchères en ligne eBay. L&#8217;approche des équipes d&#8217;eBay est basée sur l&#8217;ergonomie et se base essentiellement sur le re-design afin d&#8217;améliorer l&#8217;expérience utilisateur. La conception de formulaires en ligne est l&#8217;un des aspects les plus délicats de conception de sites Web selon Garret. [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.digital-web.com/about/contributors/garrett_dimon" title="Garrett Dimon's profile"><img src="http://innovablog.com/wp-content/files/2007/11/ebay-logo.gif" alt="eBay logo" align="left" />Garrett Dimon</a> nous propose une <strong><a href="http://www.digital-web.com/articles/redesigning_ebay_registration/" target="_blank">alternative au formulaire d&#8217;inscription</a> du géant des enchères en ligne <a href="http://www.ebay.fr" target="_blank">eBay</a></strong>. <strong>L&#8217;approche des équipes d&#8217;eBay est basée sur l&#8217;ergonomie et se base essentiellement sur le re-design afin d&#8217;améliorer l&#8217;expérience utilisateur.</strong> La conception de formulaires en ligne est l&#8217;un des aspects les plus délicats de conception de sites Web selon Garret. Réalisé avec une approche utilisateur elle peut être des plus enrichissante et ainsi entraîner l&#8217;<strong>augmentation de la satisfaction des visiteurs et donc du <a href="http://www.capitaine-commerce.com/index.php/2007/11/09/384-cinq-cles-pour-optimiser-son-taux-de-conversion" target="_blank">taux de conversion</a></strong>.</p>
<p>Le formulaire d&#8217;inscription de eBay n&#8217;est pas si inutilisable que celà, mais est assez grossier pour justifier certains ajustements. <strong>Des changements simples qui peuvent améliorer l&#8217;<a href="http://innovablog.com/tag/utilisabilite/" target="_blank">utilisabilité</a> des formulaires Web les plus élémentaires.</strong></p>
<h3>Méthodologie</h3>
<p><strong>Les champs sont exactement les mêmes, et seuls quelques éléments de conception sont différents.</strong> Des changements importants dans la conception visuelle, les fonctionnalités, la rédaction et la validation seraient tous des sujets pertinents pour une refonte de ce formulaire. <strong>L&#8217;objectif du travail se portera sur la mise en forme qui permettra d&#8217;améliorer la lisibilité et la compréhension.</strong></p>
<h3>Résultat : avant-après</h3>
<p>Le résultat final du travail de Garret se présente sous forme d&#8217;un <strong>avant-après</strong> :</p>
<p align="center"> <a href="http://innovablog.com/wp-content/files/2007/11/ebay-form-inscription-before-after.gif" title="eBay formulaire d’inscription re-design : Avant-Après" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2007/11/ebay-form-inscription-before-after.thumbnail.gif" alt="eBay formulaire d’inscription re-design : Avant-Après" /></a></p>
<h3>Modifications</h3>
<p>L&#8217;essentiel des changements apportés porte sur 5 points :</p>
<ul>
<li><strong>L&#8217;introduction : unifiée et concise</strong></li>
<li><strong>Les titres de sections</strong></li>
<li><strong> Les sous-divisions</strong></li>
<li><strong>Les relations entre champs et labels</strong></li>
<li><strong> Différents réglages supplémentaires</strong></li>
</ul>
<p>Tout celà se résume très bien sur cette présentation, qui illustre parfaitement le cheminement de l&#8217;oeil de l&#8217;internaute pour compléter le formulaire (ou <a href="http://blogs.msdn.com/mwinkle/archive/2007/06/07/introducing-the-pageflow-sample.aspx" target="_blank"><strong>Page Flow</strong></a>) :</p>
<p align="center"><a href="http://innovablog.com/wp-content/files/2007/11/ebay-form-inscription-page-flow.gif" title="eBay formulaire d’inscription re-design : Page Flow" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2007/11/ebay-form-inscription-page-flow.thumbnail.gif" alt="eBay formulaire d’inscription re-design : Page Flow" /></a></p>
<p align="left"><strong>Ressources :</strong></p>
<ul>
<li><strong><a href="http://www.digital-web.com/articles/redesigning_ebay_registration/" target="_blank">Better Web Forms: Redesigning eBay&#8217;s Registration</a></strong></li>
<li>Une autre étude portant sur le design eBay : <a href="http://bokardo.com/archives/ebay-design-provide-conditions-to-cooperate/" target="_blank"><span>Ebay design: Provide Conditions to Cooperate</span></a></li>
<li><span><strong>Edit du 14/11/07 :</strong> je vous signale un excellent article du <strong>Capitaine Commerce</strong> sur les <strong><a href="http://www.capitaine-commerce.com/index.php/2007/11/14/359-retour-sur-wishlistr-et-les-formulaires-en-ajax" target="_blank">bonnes pratiques des formulaires en ligne</a></strong>.<br />
</span></li>
</ul>
<a href="http://innovablog.com/tag/design/" rel="tag">design</a>, <a href="http://innovablog.com/tag/ebay/" rel="tag">ebay</a>, <a href="http://innovablog.com/tag/ergonomie/" rel="tag">ergonomie</a>, <a href="http://innovablog.com/tag/formulaire/" rel="tag">formulaire</a><p><br /><br />Ces billets peuvent aussi vous intéresser :<ul><li><a href="http://innovablog.com/design/design-alternatives-choix-conception/">Design / étude de cas : différentes alternatives de conception</a></li><li><a href="http://innovablog.com/moteurs-de-recherche/contenu-accessible-crawlable-indexable/">Accessibilité, ergonomie : Google donne ses précos</a></li><li><a href="http://innovablog.com/web-application/web-app-deisgn-ecouter-ses-utilisateurs/">Ecouter ses utilisateurs. Rêve ou réalité ?</a></li><li><a href="http://innovablog.com/outils/zoomorama-presentation-produit-boutique-e-commerce/">La présentation du produit, la quête de l'outil idéal. Zoomorama ?</a></li><li><a href="http://innovablog.com/ebusiness/my-deco-e-commerce-design-innovation/">Découverte : MyDeco.com, le must du home made design</a></li></ul></p><br />]]></content:encoded>
			<wfw:commentRss>http://innovablog.com/ergonomie/ergonomie-ebay-formulaire-design/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Journée Mondiale de l&#8217;Utilisabilité 2007 : compte-rendu</title>
		<link>http://innovablog.com/ergonomie/journee-mondiale-de-lutilisabilite-2007-compte-rendu/</link>
		<comments>http://innovablog.com/ergonomie/journee-mondiale-de-lutilisabilite-2007-compte-rendu/#comments</comments>
		<pubDate>Sun, 11 Nov 2007 10:09:09 +0000</pubDate>
		<dc:creator>Olivier Favre</dc:creator>
		
		<category><![CDATA[Ergonomie]]></category>

		<category><![CDATA[utilisabilite]]></category>
<category>ergonomie</category><category>utilisabilite</category>
		<guid isPermaLink="false">http://innovablog.com/ergonomie/journee-mondiale-de-lutilisabilite-2007-compte-rendu/</guid>
		<description><![CDATA[Un évènement de taille s&#8217;est déroulée ce jeudi 8 Novembre de 9H à 12 H 30 dans les locaux de Microsoft France : la Journée Mondiale de l&#8217;Utilisabilité 2007.

 Cette troisième édition française s&#8217;est donc achevée.
Plutôt qu&#8217;un long discours, je vous renvoie vers le blog de l&#8217;organisateur français de cette édition, Fred Cavazza, pour un rapide compte-rendu.
Ressources [...]]]></description>
			<content:encoded><![CDATA[<p>Un évènement de taille s&#8217;est déroulée <span style="font-weight: bold">ce jeudi 8 Novembre de 9H à 12 H 30</span> dans les locaux de Microsoft France : la <strong><a target="_blank" href="http://simpleweb.fr/">Journée Mondiale de l&#8217;Utilisabilité 2007</a></strong>.</p>
<p style="text-align: center"><img width="446" src="http://www.worldusabilityday.org/images/wudLogo.gif" height="76" style="width: 437px; height: 83px" /></p>
<p> Cette troisième édition française s&#8217;est donc achevée.</p>
<p>Plutôt qu&#8217;un long discours, je vous renvoie vers le <strong>blog de l&#8217;organisateur français</strong> de cette édition, <a target="_blank" href="http://www.fredcavazza.net/2007/11/09/compte-rendu-rapide-de-la-journee-mondiale-de-lutilisabilite-2007/">Fred Cavazza</a>, pour un rapide compte-rendu.</p>
<p><strong>Ressources :</strong></p>
<ul>
<li><a target="_blank" href="http://simpleweb.fr/">Site officiel des Journées mondiales de l&#8217;Utilisabilité</a></li>
<li><a target="_blank" href="http://www.fredcavazza.net/2007/11/09/compte-rendu-rapide-de-la-journee-mondiale-de-lutilisabilite-2007/">Fred Cavazza, compte-rendu</a></li>
</ul>
<a href="http://innovablog.com/tag/ergonomie/" rel="tag">ergonomie</a>, <a href="http://innovablog.com/tag/utilisabilite/" rel="tag">utilisabilite</a><p><br /><br />Ces billets peuvent aussi vous intéresser :<ul><li><a href="http://innovablog.com/ergonomie/design-ergonomie-menus-riches-suite-fin/">Design, ergonomie : ces menus qui nous changent la vie, suite et fin</a></li><li><a href="http://innovablog.com/web-application/web-app-deisgn-ecouter-ses-utilisateurs/">Ecouter ses utilisateurs. Rêve ou réalité ?</a></li><li><a href="http://innovablog.com/ergonomie/journee-mondiale-utilisabilite-videos/">Journée Mondiale de l’Utilisabilité 2007 : les vidéos</a></li><li><a href="http://innovablog.com/ergonomie/ergonomie-design-amazon-cree-langage-visuel/">Ergonomie, Design : Amazon a créé un langage visuel</a></li><li><a href="http://innovablog.com/ergonomie/accessibilite-ergonomie-et-utilisabilite-30-points-cles/">Accessibilité, ergonomie et utilisabilité : 30 points clés</a></li></ul></p><br />]]></content:encoded>
			<wfw:commentRss>http://innovablog.com/ergonomie/journee-mondiale-de-lutilisabilite-2007-compte-rendu/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Ergonomie, Design : Amazon a créé un langage visuel</title>
		<link>http://innovablog.com/ergonomie/ergonomie-design-amazon-cree-langage-visuel/</link>
		<comments>http://innovablog.com/ergonomie/ergonomie-design-amazon-cree-langage-visuel/#comments</comments>
		<pubDate>Fri, 19 Oct 2007 16:35:34 +0000</pubDate>
		<dc:creator>Olivier Favre</dc:creator>
		
		<category><![CDATA[Ergonomie]]></category>

		<category><![CDATA[Design]]></category>

		<category><![CDATA[ecommerce]]></category>

		<category><![CDATA[utilisabilite]]></category>
<category>design</category><category>ecommerce</category><category>ergonomie</category><category>utilisabilite</category>
		<guid isPermaLink="false">http://innovablog.com/ergonomie/ergonomie-design-amazon-cree-langage-visuel/</guid>
		<description><![CDATA[Il m&#8217;étais impossible de ne pas relayer cet article de Garret Dimon, qui aborde d&#8217;un oeil réellement intéressant les problématiques de design, utilisabilité (usability).
Garret évoque l&#8217;utilisation du design au service de l&#8217;ergonomie à travers l&#8217;exemple d&#8217;Amazon. Le même Amazon au centre de la web actualité actuellement avec l&#8217;implémentation de sa nouvelle navigation à base de [...]]]></description>
			<content:encoded><![CDATA[<p>Il m&#8217;étais impossible de ne pas relayer <a href="http://garrettdimon.com/archives/2007/10/19/creating_a_visual_language/" title="Creating a Visual Language" target="_blank">cet article</a> de <a href="http://garrettdimon.com/" title="Garret Dimon" target="_blank">Garret Dimon</a>, qui aborde d&#8217;un oeil réellement intéressant les problématiques de <a href="http://innovablog.com/tags/design/" title="Design sur Innovablog">design</a>, <a href="http://innovablog.com/tags/utilisabilite/" title="Utilisabilité sur Innovablog">utilisabilité</a> (usability).</p>
<p>Garret évoque l&#8217;utilisation du design au service de l&#8217;ergonomie à travers l&#8217;exemple d&#8217;Amazon. Le même Amazon au centre de la web actualité actuellement avec l&#8217;implémentation de sa <a href="http://www.uie.com/brainsparks/2007/10/15/amazoncom-soon-to-launch-new-navigation/" title=" Amazon.com Soon To Launch New Navigation" target="_blank">nouvelle navigation</a> à base de <a href="http://fr.techcrunch.com/2007/10/10/fr-apres-la-fnac-amazon-lance-un-nouveau-design/" title="[fr] Après la FNAC, Amazon lance un nouveau design" target="_blank">menus larges</a>.</p>
<h3>Le design pour renfort</h3>
<p>L&#8217;utilisation judicieuse du design dans la création peut renforcer l&#8217;effet de certains éléments ou aider à la compréhension de la page. Exemples à l&#8217;appui.</p>
<h3>L&#8217;utilisation de la couleur</h3>
<p><img src="http://innovablog.com/wp-content/files/2007/10/garretdimon-amazon-color.jpg" alt="Garret Dimon Amazon Color" align="left" />Ici la couleurs décroit au même titre que l&#8217;intensité de l&#8217;action qui va suivre.</p>
<p>L&#8217;achat immédiat se traduit donc par la couleur la plus intense (orange), au contraire de la pré-commande (vert pâle).</p>
<h3>L&#8217;utilisation des formes</h3>
<p><img src="http://innovablog.com/wp-content/files/2007/10/garretdimon-amazon-shape.jpg" alt="Garret Dimon Amazon Flexibility" align="left" /> Autre exemple pour étayer le propos, l&#8217;utilisation des formes flexibles et là encore dépendantes de l&#8217;action à suivre. Ici si l&#8217;on ne peut pas faire la différence par les mots employés (&#8221;Add to cart&#8221;) Amazon va le faire par les variation, de formes par exemple.</p>
<p>Je ne peut donc que trop vous conseiller la lecture du <a href="http://garrettdimon.com/archives/2007/10/19/creating_a_visual_language/" title="Creating a Visual Language" target="_blank">billet original</a>.</p>
<p>Via <a href="http://www.capitaine-commerce.com/index.php/2007/10/19/368-des-boutons-qui-parlent" title="Des boutons qui parlent" target="_blank"><strong>Capitaine commerce</strong></a>.</p>
<a href="http://innovablog.com/tag/design/" rel="tag">design</a>, <a href="http://innovablog.com/tag/ecommerce/" rel="tag">ecommerce</a>, <a href="http://innovablog.com/tag/ergonomie/" rel="tag">ergonomie</a>, <a href="http://innovablog.com/tag/utilisabilite/" rel="tag">utilisabilite</a><p><br /><br />Ces billets peuvent aussi vous intéresser :<ul><li><a href="http://innovablog.com/web-application/web-app-deisgn-ecouter-ses-utilisateurs/">Ecouter ses utilisateurs. Rêve ou réalité ?</a></li><li><a href="http://innovablog.com/outils/zoomorama-presentation-produit-boutique-e-commerce/">La présentation du produit, la quête de l'outil idéal. Zoomorama ?</a></li><li><a href="http://innovablog.com/ebusiness/my-deco-e-commerce-design-innovation/">Découverte : MyDeco.com, le must du home made design</a></li><li><a href="http://innovablog.com/ergonomie/accessibilite-ergonomie-et-utilisabilite-30-points-cles/">Accessibilité, ergonomie et utilisabilité : 30 points clés</a></li><li><a href="http://innovablog.com/design/design-alternatives-choix-conception/">Design / étude de cas : différentes alternatives de conception</a></li></ul></p><br />]]></content:encoded>
			<wfw:commentRss>http://innovablog.com/ergonomie/ergonomie-design-amazon-cree-langage-visuel/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Référencement, ergonomie : De l’utilité des Splash pages</title>
		<link>http://innovablog.com/ergonomie/referencement-ergonomie-de-l%e2%80%99utilite-des-splash-pages/</link>
		<comments>http://innovablog.com/ergonomie/referencement-ergonomie-de-l%e2%80%99utilite-des-splash-pages/#comments</comments>
		<pubDate>Fri, 19 Oct 2007 13:39:09 +0000</pubDate>
		<dc:creator>Olivier Favre</dc:creator>
		
		<category><![CDATA[Ergonomie]]></category>

		<category><![CDATA[referencement]]></category>

		<category><![CDATA[seo]]></category>

		<category><![CDATA[web]]></category>
<category>ergonomie</category><category>referencement</category><category>seo</category><category>web</category>
		<guid isPermaLink="false">http://innovablog.com/ergonomie/referencement-ergonomie-de-l%e2%80%99utilite-des-splash-pages/</guid>
		<description><![CDATA[C’est un article ce jour de l’excellentissime « Ecrire pour le web » qui me fait soulever ce débat, à propos de ces « Splash pages » ou « pages tunnel ». Une petite définition s’impose.

La splash page ou page tunnel
Les pages tunnel sont ces pages d’accueil de sites, souvent assez vides, qui permettent au [...]]]></description>
			<content:encoded><![CDATA[<p>C’est <a href="http://ecrirepourleweb.wordpress.com/2007/10/19/splash-ou-tunnel-chou-vert-et-vert-chou/" title="Splash ou tunnel, chou vert et vert chou" target="_blank">un article ce jour</a> de l’excellentissime « <a href="http://ecrirepourleweb.wordpress.com" title="Ecrire pour le web" target="_blank"><em><strong>Ecrire pour le web</strong></em></a> » qui me fait soulever ce débat, à propos de ces « <em><strong>Splash pages</strong></em> » ou « <em><strong>pages tunnel</strong></em> ». Une petite définition s’impose.</p>
<p align="center"><img src="http://innovablog.com/wp-content/files/2007/10/splash-page.gif" alt="Splash pages, pages tunnel, pages d’introduction" /></p>
<h3>La splash page ou page tunnel</h3>
<p>Les pages tunnel sont ces pages d’accueil de sites, souvent assez vides, qui permettent au visiteur de choisir une langue, de lui afficher une publicité ou de par exemple choisir la version la plus appropriée de navigation en fonction de son navigateur.<br />
Or une controverse existe, quasiment aussi vieille que les splash pages elles-mêmes sur leur utilité. Qui n’a jamais détesté tel ou tel site lors de son accueil du fait de ces pages tunnel ? Pas moi en tout cas.</p>
<p>Une fois planté le décor, essayons d&#8217;avancer dans le débat.</p>
<h3>A quoi servent les splash page ?</h3>
<p>L’utilité et les bonnes raisons de les utiliser sont pour leurs utilisateurs multiples. Elles permettent donc (dans le désordre) de :</p>
<ul>
<li><strong>Diffuser des</strong> « <a href="http://en.wikipedia.org/wiki/Disclaimer" title="Disclaimer" target="_blank">disclaimer</a> » ou <strong>mises en garde</strong> sur le site, lorsqu’il est par exemple réservé à un public « averti » ou majeur.</li>
<li><strong>Envoyer un message fort</strong>, qui sera alors le seul contenu de la page, avec grand renfort d’emphase, sous former de <strong>teaser</strong> par exemple.</li>
<li>Sélectionner une <strong>version du site adaptée au visiteur</strong> en termes de bande passante, navigateur ou même de résolution d’écran (ce type de précos je vous l’accorde étaient surtout valables dans les années 90 et sont en voie d’abandon, merci les standards !).</li>
<li>Proposer une version avec ou sans les <strong>éléments sonores</strong>.</li>
<li><strong>Afficher une ou plusieurs bannières publicitaires</strong> et ainsi augmenter (de manière artificielle) le taux de transformation,</li>
</ul>
<p>Via <a href="http://www.smashingmagazine.com/2007/10/11/splash-pages-do-we-really-need-them/" title="Splash Pages: Do We Really Need Them?" target="_blank">Smashing Magazine</a>.</p>
<h3>Qu’est-ce qu’on leur reproche ?</h3>
<p align="center"><a href="http://innovablog.com/wp-content/files/2007/10/bitandsting.jpg" title="Bit and Sting" rel="lightbox"><img src="http://innovablog.com/wp-content/files/2007/10/bitandsting.jpg" alt="Bit and Sting" align="left" border="0" height="185" width="246" /></a></p>
<p>Si les pages tunnel peuvent parfois faire preuve de prouesses en matière de design…</p>
<ul>
<li><a href="http://www.biteandsting.com/" target="_blank">Bite and Sting</a></li>
<li><a href="http://www.handmadeinisa.com/" target="_blank">Hand made in ISA</a></li>
<li><a href="http://www.lesinvasionsephemeres.com/" target="_blank">Les invasions éphémères</a></li>
<li><a href="http://www.salboma.com/" target="_blank">Salboma</a></li>
</ul>
<p>…ce n’est malheureusement pas une généralité, loin de là.</p>
<p>Un exemple qui me vient en tête très rapidement, c’est un site que j’utilise périodiquement, et qui me gâche le plaisir à chaque visite, c’est <a href="http://www.allocine.fr/" title="Allociné" target="_blank">Allocine.fr</a>. <strong>Chaque page, aussi bien la home page que les pages intérieures sont devancées par une splash page</strong>.</p>
<h3> Que peut-on leur reprocher ?</h3>
<p style="text-align: center"><a href="http://innovablog.com/wp-content/files/2007/10/splash-page-allocine-fr.gif" rel="lightbox" title="Splash page Allocine.fr"><img src="http://innovablog.com/wp-content/files/2007/10/splash-page-allocine-fr.gif" alt="Splash page Allocine.fr" height="208" width="302" /></a></p>
<ul>
<li><strong>L’utilisateur se sentir « perdu ».</strong> Pour peu que l’animation, le contenu plus généralement, présenté ne soit pas en rapport direct avec ce qu’attendait le visiteur, ce dernier pourrait très bien abandonner sa visite.</li>
<li>Dans tous les cas, cet <strong>écran supplémentaire, va au minimum rajouter un clic</strong>. Et lorsque que l’on étudie le taux de déperdition pour chaque clic supplémentaire, c’est un pari risqué…</li>
<li>De cette réaction négative, <strong>l’image de la marque en sera affectée</strong>. En tant que visiteur, j’associe le site Internet de la marque à ses valeurs, sa conception de la relation client. Je ne vais pas me sentir valorisé et peut être même que j’en ferai part via mon réseau social à d’autres prospects ou clients de cette même marque.</li>
<li>Cette technique peut se révéler pénalisante du point de vue des moteurs de recherche.</li>
</ul>
<h3>Que peut-on y faire ?</h3>
<p>C’est ici que l’article d’Ecrire pour le web prend tout son sens. Plusieurs optimisations seront possibles.</p>
<ul>
<li><strong>Pour les visiteurs :</strong> dans le cas où la page d’introduction est présente pour soit des considérations techniques (résolution d’écran, version de navigateur, langue) on peut très bien à partir des <strong>variables d’environnement du navigateur, capter ces valeurs</strong> (JavaScript sait très bien faire cela, Php aussi). Cela nous donnera des valeurs par défaut, quitte à donner le choix au visiteur de corriger le tir par la suite par une barre d’outils dans le site.</li>
<li><strong>Pour les moteurs de recherche :</strong> <strong>supprimer la splash page !</strong> <span>C’est la préconisation de <a href="http://ecrirepourleweb.wordpress.com/2007/09/26/la-splash-page-de-choix-linguistique-bilan/" title="Sébastien Billard sur écrire pour le web" target="_blank">Sébastien Billard</a> et j’y adhère totalement !</span></li>
</ul>
<p><strong>Ressources :</strong></p>
<ul>
<li> <a href="http://ecrirepourleweb.wordpress.com/2007/08/29/appel-aux-experts-quand-la-splash-page-se-prend-pour-une-home-page/" rel="bookmark">Appel aux experts: quand la splash page se prend pour une home page…</a></li>
<li><a href="http://mikekujawski.wordpress.com/2007/08/02/stop-using-splash-pages/" rel="bookmark" title="Permanent Link: Stop using Splash Pages!">Stop using Splash Pages!</a></li>
<li><a href="http://www.smashingmagazine.com/2007/10/11/splash-pages-do-we-really-need-them/" rel="bookmark" title="Splash Pages: Do We Really Need Them?">Splash Pages: Do We Really Need Them?</a></li>
<li><a href="http://www.ygi.ch/blog-notes/2007/09/26/les-pages-tunnel-ou-splash-page/" title="Les pages tunnel (ou splash page)" rel="bookmark">Les pages tunnel (ou splash page)</a></li>
</ul>
<p>Et vous ? Que pensez-vous ce ces pages ? Sont-elles encore à conseiller aujourd&#8217;hui, dans notre web qui se veut &#8220;intelligent&#8221; et toujours plus &#8220;<em>seo oriented</em>&#8221; ?</p>
<a href="http://innovablog.com/tag/ergonomie/" rel="tag">ergonomie</a>, <a href="http://innovablog.com/tag/referencement/" rel="tag">referencement</a>, <a href="http://innovablog.com/tag/seo/" rel="tag">seo</a>, <a href="http://innovablog.com/tag/web/" rel="tag">web</a><p><br /><br />Ces billets peuvent aussi vous intéresser :<ul><li><a href="http://innovablog.com/moteurs-de-recherche/contenu-accessible-crawlable-indexable/">Accessibilité, ergonomie : Google donne ses précos</a></li><li><a href="http://innovablog.com/analyse/html-alt-attribut-image-alternative-text/">Html : De la bonne utilisation de l'attribut ALT</a></li><li><a href="http://innovablog.com/moteurs-de-recherche/big-google-a-encore-frappe/">Big Google a encore frappé</a></li><li><a href="http://innovablog.com/le-web/wordpress-lance-marketplace-pour-monetiser-themes-wordpress/">Wordpress lance MarketPlace pour monétiser ses thèmes</a></li><li><a href="http://innovablog.com/ergonomie/accessibilite-ergonomie-et-utilisabilite-30-points-cles/">Accessibilité, ergonomie et utilisabilité : 30 points clés</a></li></ul></p><br />]]></content:encoded>
			<wfw:commentRss>http://innovablog.com/ergonomie/referencement-ergonomie-de-l%e2%80%99utilite-des-splash-pages/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
