<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>SimpleWeb.fr</title>
	
	<link>http://www.simpleweb.fr</link>
	<description>Simplifions l'internet</description>
	<lastBuildDate>Thu, 03 May 2012 19:50:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/Simpleweb" /><feedburner:info uri="simpleweb" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>Simpleweb</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>Bonnes pratiques pour les écrans d’identification</title>
		<link>http://feedproxy.google.com/~r/Simpleweb/~3/6H-Y72psGao/</link>
		<comments>http://www.simpleweb.fr/2012/05/03/bonnes-pratiques-pour-les-ecrans-didentification/#comments</comments>
		<pubDate>Thu, 03 May 2012 19:50:19 +0000</pubDate>
		<dc:creator>Frédéric CAVAZZA</dc:creator>
				<category><![CDATA[Analyse]]></category>
		<category><![CDATA[authentification]]></category>
		<category><![CDATA[formulaire]]></category>

		<guid isPermaLink="false">http://www.simpleweb.fr/?p=1218</guid>
		<description><![CDATA[Souvenez-vous, il y  quelques années je me réjouissais de la simplification de la procédure d&#8217;identification avec Open ID : La création de compte simplifiée avec... <a href="http://www.simpleweb.fr/2012/05/03/bonnes-pratiques-pour-les-ecrans-didentification/" title="Lire la suite - Bonnes pratiques pour les écrans d&#8217;identification">Lire la suite</a>]]></description>
			<content:encoded><![CDATA[<p>Souvenez-vous, il y  quelques années je me réjouissais de la simplification de la procédure d&#8217;identification avec Open ID : <a href="http://www.simpleweb.fr/2008/11/19/la-creation-de-compte-simplifiee-avec-openid/">La création de compte simplifiée avec OpenID</a>. Depuis, les choses ont bien changé avec l&#8217;avènement des réseaux sociaux et leurs mécanismes de <em>social login</em>. Je veux bien croire que le fait de s&#8217;appuyer sur les profils des internautes permet de gagner du temps et d&#8217;augmenter le taux de conversion, mais de là à ne proposer que cette option comme <a href="http://klout.com/home">Klout</a>, c&#8217;est extrêmement gênant.</p>
<figure id="attachment_1222" class="alignnone"><img class="size-full wp-image-1222" title="Klout_SignUp" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/05/Klout_SignUp-lowsrc.jpg" alt="" width="550" height="230"/>
<figcaption>L&#39;écran d&#39;identification de Klout</figcaption></figure>
<p><strong>Ce type de mécanisme d&#8217;identification fonctionne bien pour ceux qui ont un compte Facebook ou un profil Twitter, mais pour ceux qui en ont plusieurs, cela  engendre des conflits insolubles</strong> (j&#8217;ai dû avoir recours au support technique pour me dépatouiller de ce bazar). Il n&#8217;est pourtant pas très compliqué de proposer deux systèmes d&#8217;identification : délégué (avec Facebook ou Twitter) et internalisé. C&#8217;est ce que proposent des services comme <a href="http://www.spotify.com/fr/">Spotify</a> ou <a href="https://www.storenvy.com/login">Storenvy</a>, et ça fonctionne très bien. De plus, ce double système permet de rendre l&#8217;éditeur du service moins dépendant des réseaux sociaux qui fournissent le profil (<a href="http://www.mediassociaux.fr/2010/01/26/astuce-utiliser-facebook-connect-pour-de-la-pre-inscription/">Astuce : Utiliser Facebook Connect pour de la pré-inscription</a>).</p>
<figure id="attachment_1224" class="alignnone"><img class="size-full wp-image-1224" title="SignIn_Storenvy" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/05/SignIn_Storenvy-lowsrc.jpg" alt="" width="526" height="439"/>
<figcaption>L&#39;écran d&#39;identification de Storenvy</figcaption></figure>
<p>Sinon dans le même genre il y a aussi <a href="https://app.asana.com/">Asana</a> qui restreint le choix à Google Account et le met en première position :</p>
<figure id="attachment_1220" class="alignnone"><img class="size-full wp-image-1220" title="Asana_LogIn" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/05/Asana_LogIn-lowsrc.jpg" alt="" width="541" height="328"/>
<figcaption>L&#39;écran d&#39;identification d&#39;Asana</figcaption></figure>
<p>On trouve aussi la même chose chez <a href="https://pinterest.com/login/">Pinterest</a> avec un formulaire minimaliste, mais soigné :</p>
<figure id="attachment_1223" class="alignnone"><img class="size-full wp-image-1223" title="Pinterest_Login" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/05/Pinterest_Login-lowsrc.jpg" alt="" width="506" height="353"/>
<figcaption>L&#39;écran d&#39;identification de Pinterest</figcaption></figure>
<p>Vous remarquerez que dans les deux cas, une fine ligne de séparation permet de faire comprendre que le bouton &laquo;&nbsp;<em>Login</em>&nbsp;&raquo; n&#8217;est à utiliser que si l&#8217;on rentre un nom d&#8217;utilisateur et un mot de passe.</p>
<p>De tous les écrans d&#8217;identification que j&#8217;ai pu croiser, je pense que <strong>la palme revient à <a href="https://500px.com/login">500px</a></strong> avec un formulaire très bien proportionné, explicite (&laquo;&nbsp;<em>No account yet?</em>&laquo;&nbsp;, &laquo;&nbsp;<em>Can&#8217;t access your account?</em>&laquo;&nbsp;) et surtout qui lève toute ambiguïté concernant l&#8217;utilisation de l&#8217;une ou l&#8217;autre technique (&laquo;&nbsp;<em>or login using your username or email</em>&laquo;&nbsp;) :</p>
<figure id="attachment_1219" class="alignnone"><img class="size-full wp-image-1219" title="500px_Login" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/05/500px_Login-lowsrc.jpg" alt="" width="550" height="287"/>
<figcaption>L&#39;écran d&#39;identification de 500px</figcaption></figure>
<p>Une authentique référence en matière de simplicité, de guidage et de pédagogie. Dans un registre plus formel, nous avons aussi le formulaire de <a href="http://www.forbes.com/">Forbes</a>, propulsé par le widget de <em>social login</em> de <a href="http://www.gigya.com/social-login/">Gigya</a> :</p>
<figure id="attachment_1221" class="alignnone"><img class="size-full wp-image-1221" title="Forbes_Login" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/05/Forbes_Login-lowsrc.jpg" alt="" width="550" height="317"/>
<figcaption>L&#39;écran d&#39;identification de Forbes</figcaption></figure>
<p>Ce formulaire est d&#8217;une efficacité redoutable, propose une panoplie complète de mode d&#8217;identification, mais véhicule une sensation glaciale (froid et rigide). Bref, comme vous avez pu le voir au travers de ces différents exemples, il y a des choses à faire et des choses à éviter. Notez que je ne me suis concentré que sur les intitulés et la mise en page, mais il existe d&#8217;autres leviers d&#8217;améliorations : <a href="http://uxdesign.smashingmagazine.com/2011/05/05/innovative-techniques-to-simplify-signups-and-logins/">Innovative Techniques To Simplify Sign-Ups and Log-Ins</a>.</p>
<p>Comme toujours, si vous avez de bons exemples, merci de les mentionner dans les commentaires.</p>
<p>&nbsp;</p>
<img src="http://feeds.feedburner.com/~r/Simpleweb/~4/6H-Y72psGao" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.simpleweb.fr/2012/05/03/bonnes-pratiques-pour-les-ecrans-didentification/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.simpleweb.fr/2012/05/03/bonnes-pratiques-pour-les-ecrans-didentification/</feedburner:origLink></item>
		<item>
		<title>Pour bien démarrer dans la conception d’interfaces mobiles</title>
		<link>http://feedproxy.google.com/~r/Simpleweb/~3/0xU6tduBDg0/</link>
		<comments>http://www.simpleweb.fr/2012/04/24/pour-bien-demarrer-dans-la-conception-dinterfaces-mobiles/#comments</comments>
		<pubDate>Tue, 24 Apr 2012 16:39:47 +0000</pubDate>
		<dc:creator>Frédéric CAVAZZA</dc:creator>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[smartphone]]></category>
		<category><![CDATA[touchbook]]></category>

		<guid isPermaLink="false">http://www.simpleweb.fr/?p=1213</guid>
		<description><![CDATA[Je n&#8217;ai eu de cesse ces deux dernières années de vous mettre en garde contre la spécificité des interfaces mobiles : smartphones, feature phones et tablettes ne s&#8217;utilisent pas... <a href="http://www.simpleweb.fr/2012/04/24/pour-bien-demarrer-dans-la-conception-dinterfaces-mobiles/" title="Lire la suite - Pour bien démarrer dans la conception d&#8217;interfaces mobiles">Lire la suite</a>]]></description>
			<content:encoded><![CDATA[<p>Je n&#8217;ai eu de cesse ces deux dernières années de vous mettre en garde contre la spécificité des interfaces mobiles : smartphones, feature phones et tablettes ne s&#8217;utilisent pas dans le même contexte qu&#8217;un ordinateur et correspondent à des contraintes bien particulières. Si vous souhaitez vous lancer dans la conception d&#8217;une application ou interface mobile, il va donc vous falloir prendre le temps de vous familiariser avec ces terminaux et surtout de vous documenter sans modération. <strong>Ne pensez pas être prêt à concevoir votre première application mobile parce que vous êtes un utilisateur de la première de l&#8217;iPhone</strong>. L&#8217;important n&#8217;est pas l&#8217;expérience en tant qu&#8217;utilisateur, mais l&#8217;approche en tant que concepteur.</p>
<p>Heureusement pour vous, que l&#8217;on vous demande de concevoir, d&#8217;encadrer ou de valider le travail d&#8217;un autre, il existe quantité de ressources (articles, livres, référentiels, outils&#8230;) pour vous aider dans cette tâche et vous éviter de faire fausse route. Je vous propose donc une petite compilation de sources pour bien démarrer dans la conception d&#8217;interfaces mobiles, testées et approuvées par votre serviteur. Cette liste n&#8217;est pas complète, n&#8217;hésitez pas à rajouter vos sources dans les commentaires.</p>
<p>Dans un premier temps, je peux vous proposer <strong>une série d&#8217;articles à imprimer, lire et annoter</strong> :</p>
<ul>
<li>Avant toute chose, il convient de bien appréhender la particularité des terminaux mobiles (<a href="http://uxmag.com/articles/ux-concerns-across-mobile-platforms">UX Concerns Across Mobile Platforms</a> et <a href="http://uxmag.com/articles/framework-for-designing-for-multiple-devices">A Framework for Designing for Multiple Devices</a>), à prendre en compte toutes les contraintes (<a href="http://www.uxbooth.com/blog/considerations-for-mobile-design-part-1-speed/">Speed</a>, <a href="http://www.uxbooth.com/blog/considerations-for-mobile-design-part-2-dimensions/">Dimensions</a> et <a href="http://www.uxbooth.com/blog/considerations-for-mobile-design-part-3-behavior/">Behavior</a>) et à repenser votre façon de travailler (<a href="http://uxdesign.smashingmagazine.com/2012/01/04/stop-designing-pages-start-designing-flows/">Stop Designing Pages And Start Designing Flows</a> et <a href="http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/">Mobile-First Responsive Web Design</a>) ;</li>
<li>Il faut dans un second temps s&#8217;intéresser aux terminaux cibles, c&#8217;est-à-dire aux spécificités du format (<a href="http://baymard.com/blog/mobile-design-limitations">7 Limitations When Designing For Mobile</a> et <a href="http://uxdesign.smashingmagazine.com/2012/01/31/ten-things-think-about-designing-ipad-app/">Ten Things To Think About When Designing Your iPad App</a>) et aux directives fournies par les constructeurs / éditeurs (<a href="http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html">Apple</a>, <a href="http://developer.android.com/design/index.html">Android</a>, <a href="http://docs.blackberry.com/en/developers/deliverables/36511/afo1327343057071.jsp#afo1327343057071">BlackBerry</a>, <a href="http://www.developer.nokia.com/Community/Wiki/Category:Mobile_Design_Patterns">Nokia</a>) ;</li>
<li>Enfin, regardez de près les aspects techniques (<a href="http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/">How to Design a Mobile Responsive Website</a>) et les meilleures pratiques (<a href="http://www.getelastic.com/mobile-design-strategy-home-page-tips/">Mobile Design Strategy: Home Page Tips</a>, <a href="http://www.getelastic.com/mobile-design-strategy-part-2-category-pages/">Mobile Commerce: Category Page Design Tips</a> et <a href="http://www.getelastic.com/mobile-product-page/">Mobile Cart Page Design and Testing Tips</a>).</li>
</ul>
<p>Dans un second temps, je vous recommande <strong>cette série de livres</strong> :</p>
<ul>
<li><a href="http://shop.oreilly.com/product/0636920001133.do">Tapworthy, Designing Great iPhone Apps</a> où il y est principalement question d&#8217;applications iPhone, mais le livre est très bien argumenté et illustré ;</li>
<li><a href="http://www.mobiledesignpatterngallery.com/">Mobile Design Pattern Gallery</a>, un ouvrage moins verbeux, mais extrêmement riche ;</li>
<li><a href="http://4ourth.com/">Designing Mobile Interfaces</a>, qui s&#8217;intéresse à de nombreux formats de terminaux mobiles et alternatifs ;</li>
<li><a href="http://www.lukew.com/resources/mobile_first.asp">Mobile First</a>, le livre de référence de Luke Wroblewski.</li>
</ul>
<p>Ensuite il sera temps de <strong>passer de la théorie à la pratique avec cette série d&#8217;outils</strong> :</p>
<ul>
<li>Consultez autant de <a href="http://www.simpleweb.fr/2011/06/27/des-bibliotheques-de-composants-dinterfaces-mobiles/">bibliothèques de composants d’interfaces mobiles</a> que vous pouvez pour trouver de l&#8217;inspiration ;</li>
<li>Exercez-vous sur du papier, notamment avec les formidables kits de chez <a href="http://www.uistencils.com/products/iphone-stencil-kit">UI Stencils</a> ;</li>
<li>Concevez vos premières interfaces avec des outils de prototypage rapide en ligne comme <a href="http://proto.io/">Proto.io</a> ou <a href="http://wireframesketcher.com/">Wireframe Sketcher</a> (cf. <a href="http://idesignow.com/tool-2/12-best-website-mobile-wireframe-tools.html">12 Best Website &amp; Mobile Wireframe Tools</a>) ;</li>
<li>Passez aux choses sérieuses avec des outils de prototypage plus puissants comme <a href="http://www.balsamiq.com/">Balsamiq</a> et <a href="http://www.axure.com/">Axure</a>, avec des frameworks comme <a href="http://www.sencha.com/products/architect">Sencha Architect</a> ou <a href="http://phonegap.com/">PhoneGap</a>, ou directement en HTML (<a href="http://coding.smashingmagazine.com/2011/10/25/rapid-prototyping-for-any-device-with-foundation/">Rapid Prototyping For Any Device With Foundation</a>).</li>
</ul>
<p>En respectant toutes ces étapes, surtout les deux premières, vous serez bien mieux préparé à la lourde tâche de concevoir (et optimiser) une interface ou application mobile. Certes, cela demande un minimum de temps et d&#8217;attention, mais <strong>la compétition est tellement rude que vous ne pouvez pas vous permettre de déléguer à l&#8217;aveugle</strong>.</p>
<p>Prochaines étapes : appliquez les méthodes du web aux supports mobiles (SEO, tests utilisateurs, mesure d&#8217;audience&#8230;).</p>
<img src="http://feeds.feedburner.com/~r/Simpleweb/~4/0xU6tduBDg0" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.simpleweb.fr/2012/04/24/pour-bien-demarrer-dans-la-conception-dinterfaces-mobiles/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://www.simpleweb.fr/2012/04/24/pour-bien-demarrer-dans-la-conception-dinterfaces-mobiles/</feedburner:origLink></item>
		<item>
		<title>L’utilisabilité des sites a-t-elle progressé en 12 ans ? Non !</title>
		<link>http://feedproxy.google.com/~r/Simpleweb/~3/SucORLi07ic/</link>
		<comments>http://www.simpleweb.fr/2012/03/29/lutilisabilite-des-sites-a-t-elle-progresse-en-12-ans-non/#comments</comments>
		<pubDate>Thu, 29 Mar 2012 08:30:39 +0000</pubDate>
		<dc:creator>Frédéric CAVAZZA</dc:creator>
				<category><![CDATA[Analyse]]></category>
		<category><![CDATA[Bonnes pratiques]]></category>
		<category><![CDATA[référentiel]]></category>

		<guid isPermaLink="false">http://www.simpleweb.fr/?p=1208</guid>
		<description><![CDATA[Loin de moi l&#8217;idée de jouer les vieux brisquards, mais je travaillais déjà sur l&#8217;utilisabilité des sites web au siècle dernier. À cette époque (lointaine),... <a href="http://www.simpleweb.fr/2012/03/29/lutilisabilite-des-sites-a-t-elle-progresse-en-12-ans-non/" title="Lire la suite - L&#8217;utilisabilité des sites a-t-elle progressé en 12 ans ? Non !">Lire la suite</a>]]></description>
			<content:encoded><![CDATA[<p>Loin de moi l&#8217;idée de jouer les vieux brisquards, mais je travaillais déjà sur l&#8217;utilisabilité des sites web au siècle dernier. À cette époque (lointaine), le web était encore considéré comme un média immature et instable. Il était donc normal que l&#8217;ergonomie moyenne des sites soit plutôt basse (par manque de connaissances, compétences, ressources&#8230;). Nous sommes maintenant en 2012, et <strong>je n&#8217;ai pas l&#8217;impression que la simplicité d&#8217;usage a globalement progressé sur la décennie passée</strong>. Nous ne sommes pas ici dans l&#8217;affirmation, mais dans le ressenti, voire l&#8217;impression que me donnent les sites que je consulte au quotidien (institutionnels, d&#8217;information, boutiques en ligne, portails&#8230;). Peut-être est-ce parce que mes exigences s&#8217;accroissent plus vite que le rythme d&#8217;amélioration des sites, toujours est-il qu&#8217;il y a encore BEAUCOUP de travail.</p>
<p>Ceci étant dit, le cabinet Forrester a publié ce mois-ci un rapport venant accréditer mon ressenti : <a href="http://blogs.forrester.com/adele_sage/12-03-15-lessons_learned_from_1500_website_user_experience_reviews">Lessons Learned From 1,500 Website User Experience Reviews</a>. Les conclusions du rapport sont accablantes : <strong>sur 1.500 sites testés, seuls 45 (3%) sont considérés comme satisfaisants d&#8217;un point de vue ergonomique</strong>. C&#8217;est peu&#8230; très peu, d&#8217;autant plus que l&#8217;évolution est très lente : s&#8217;il n&#8217;y a pratiquement plus de mauvais élèves, la grande majorité des sites se contentent d&#8217;un score faible / moyen (le rapport repose sur une méthode quantitative avec 25 critères de pondération).</p>
<figure id="attachment_1210" class="alignnone"><img class="size-full wp-image-1210" title="UX_Stats" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/03/UX_Stats-lowsrc.jpg" alt="" width="550" height="352"/>
<figcaption>Évolution de l&#39;utilisabilité des sites web</figcaption></figure>
<p>Là où ce rapport est intéressant, c&#8217;est qu&#8217;il met en lumière le fait que l&#8217;<strong>on retrouve au fil des ans toujours les mêmes lacunes</strong> :</p>
<ul>
<li>Des textes pas très lisibles ;</li>
<li>Une facilité de complétion des tâches perfectible ;</li>
<li>Des mentions de sécurité et confidentialité difficiles à trouver ;</li>
<li>Une mise en page qui n&#8217;exploite pas bien l&#8217;espace disponible ;</li>
<li>Des contenus pas évidents à trouver.</li>
</ul>
<p>Bref, <strong>malgré plus d&#8217;une décennie de pratique, les fondamentaux ne sont toujours pas maitrisés</strong> : lisibilité, repérage, orientation, simplicité de prise en main&#8230; Quel dommage, pourtant en dix ans chaque site a forcément dû connaitre au moins deux refontes. Comment se fait-il que le niveau moyen ne progresse pas ? Je serais incapable de vous l&#8217;expliquer. Pourtant il suffit de réserver un billet de train, acheter un objet, chercher de l&#8217;information ou compléter une tâche en ligne pour s&#8217;en rendre compte. N&#8217;est-il pas aberrant de constater que même sur des choses extrêmement simples (page de texte, formulaire, tableau&#8230;), la plupart des sites en 2012 sont encore incapables de proposer une expérience satisfaisante ?</p>
<p>Pourtant <strong>il existe des outils simples pour assurer les fondamentaux : les checklists et référentiels</strong>. Il existe ainsi quantité de checklists pour vous aider à adopter les bons réflexes, des listes très simples (<a href="http://www.expertusability.com/website-usability-checklist-and-usability-guide/">Website Usability Checklist and Usability Guide</a>) ou des choses plus sophistiquées (<a href="http://bestwebdesignschools.com/2009/usabilityedu-25-incredibly-useful-usability-cheat-sheets-checklists/">25 Incredibly Useful Usability Cheat Sheets &amp; Checklists</a>).</p>
<p>Mais je pense qu&#8217;en matière de référentiel, <strong>le projet <a href="http://www.opquast.com/">Opquast</a> est, selon moi, ce qui se fait de mieux, et en plus il est en français : <a href="https://checklists.opquast.com/opquastv2">Liste des bonnes pratiques</a></strong>.</p>
<figure id="attachment_1209" class="alignnone"><img class="size-full wp-image-1209" title="Opquast" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/03/Opquast-lowsrc.jpg" alt="" width="550" height="554"/>
<figcaption>Le référentiel de bonnes pratiques Opquast</figcaption></figure>
<p>De plus, je vous signale qu&#8217;il existe au format <a href="http://www.eyrolles.com/Informatique/Livre/memento-sites-web-les-bonnes-pratiques-9782212124569">Memento</a>. Vous n&#8217;avez donc plus aucune excuse !</p>
<img src="http://feeds.feedburner.com/~r/Simpleweb/~4/SucORLi07ic" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.simpleweb.fr/2012/03/29/lutilisabilite-des-sites-a-t-elle-progresse-en-12-ans-non/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		<feedburner:origLink>http://www.simpleweb.fr/2012/03/29/lutilisabilite-des-sites-a-t-elle-progresse-en-12-ans-non/</feedburner:origLink></item>
		<item>
		<title>Un nouvel âge d’or pour la conception d’interfaces grâces aux applications mobiles</title>
		<link>http://feedproxy.google.com/~r/Simpleweb/~3/czNZq5mNPx8/</link>
		<comments>http://www.simpleweb.fr/2012/03/20/un-nouvel-age-dor-pour-la-conception-dinterfaces-graces-aux-applications-mobiles/#comments</comments>
		<pubDate>Tue, 20 Mar 2012 15:09:11 +0000</pubDate>
		<dc:creator>Frédéric CAVAZZA</dc:creator>
				<category><![CDATA[Tendances]]></category>
		<category><![CDATA[smartphone]]></category>
		<category><![CDATA[touchbook]]></category>

		<guid isPermaLink="false">http://www.simpleweb.fr/?p=1200</guid>
		<description><![CDATA[Voilà presque 15 ans que je travaille dans l&#8217;internet et dans le domaine informatique d&#8217;une certaine mesure. Au cours de ces 15 dernières années, jamais... <a href="http://www.simpleweb.fr/2012/03/20/un-nouvel-age-dor-pour-la-conception-dinterfaces-graces-aux-applications-mobiles/" title="Lire la suite - Un nouvel âge d&#8217;or pour la conception d&#8217;interfaces grâces aux applications mobiles">Lire la suite</a>]]></description>
			<content:encoded><![CDATA[<p>Voilà presque 15 ans que je travaille dans l&#8217;internet et dans le domaine informatique d&#8217;une certaine mesure. Au cours de ces 15 dernières années, jamais je n&#8217;ai ressenti autant d&#8217;enthousiasme face aux transformations et innovations induites par les terminaux mobiles. <strong>Les smartphones et tablettes sont en effet en train de stimuler l&#8217;innovation en matière de conception d&#8217;interface comme aucune autre innovation technologique ne l&#8217;avait fait avant</strong> (si l&#8217;on met de côté Flash pour les interfaces web).</p>
<p>D&#8217;après la définition qu&#8217;en donne <a href="http://fr.wikipedia.org/wiki/Logiciel">Wikipedia</a>, un logiciel est un ensemble d&#8217;informations relatives à des traitements effectués automatiquement par un appareil informatique. Dans l&#8217;absolu, cette définition s&#8217;applique aux applications traditionnelles comme aux applications mobiles, sauf qu&#8217;entre <a href="http://office.microsoft.com/fr-fr/outlook/">Outlook</a> et <a href="http://sparrowmailapp.com/iphone.php">Sparrow</a>, il y a un gigantesque fossé. L&#8217;explication de cet écart tient du contexte d&#8217;usage :</p>
<ul>
<li>Les applications traditionnelles sont conçues dans une optique de productivité, les utilisateurs sont censés les exploiter toute la journée, à leur bureau dans un environnement calme où ils peuvent se concentrer.</li>
<li>Les applications mobiles sont conçues dans le but de rendre service à des utilisateurs en situation de mobilité (dans la rue ou dans les transports en commun) où ils sont distraits par l&#8217;environnement, sont limités dans leurs gestes (ils n&#8217;ont souvent qu&#8217;une main de libre) et dans le temps qu&#8217;ils peuvent consacrer à la complétion d&#8217;une tâche (créer un RDV, relever ses messages, vérifier une information ou une donnée).</li>
</ul>
<p>De par le contexte d&#8217;usage, l&#8217;approche de conception d&#8217;une application mobile est complètement différente de celle d&#8217;une application traditionnelle. Au final, les applications mobiles sont plus proches de widgets que des logiciels. Nous sommes vraiment dans une logique de fractionnement : <strong>l&#8217;idée n&#8217;est pas de fournir un outil à tout faire, mais de répondre à un besoin spécifique avec le maximum d&#8217;efficacité et de confort</strong>. Les applications mobiles sont ainsi naturellement beaucoup moins ambitieuses en terme de couverture fonctionnelle (hormis les jeux) et doivent donc compenser par une expérience d&#8217;utilisation plus enrichissante.</p>
<p>Cet impératif d&#8217;enrichissement de l&#8217;expérience pousse ainsi les éditeurs de systèmes d&#8217;exploitation mobiles à publier des chartes de conception pour éviter les aberrations et capitaliser sur une signature visuelle (cf. les <em>Design Guidelines</em> de <a href="http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html">Apple</a>, <a href="http://developer.android.com/design/get-started/ui-overview.html">Android</a> et <a href="http://msdn.microsoft.com/en-us/library/hh202915(v=vs.92).aspx">Windows Phone</a>).</p>
<figure id="attachment_1203" class="alignnone"><img class="size-full wp-image-1203" title="Mobile-UI" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/03/Mobile-UI-lowsrc.jpg" alt="" width="506" height="275"/>
<figcaption>Les styles graphiques des trois principaux OS mobiles</figcaption></figure>
<p>Dans la mesure où les contraintes d&#8217;affichage et de manipulation sont très fortes sur les terminaux mobiles, les éditeurs d&#8217;OS ont même poussé la logique de standardisation jusqu&#8217;à fournir des éléments d&#8217;interface standardisés pour l&#8217;affichage (liste, carte, calendrier&#8230;) et pour la manipulation (glissière, navigation par onglets, saisie d&#8217;une date&#8230;). Mais rien ne vous empêche d&#8217;aller outre ces standards et d&#8217;en faire votre propre interprétation.</p>
<p>Autant le dire tout de suite : les tentatives de reproduction des interfaces de logiciels traditionnels sont vouées à l&#8217;échec. Il vous reste par contre <strong>un champ d&#8217;expérimentation extrêmement large pour reproduire des interfaces naturelles</strong> ou pour faire de la pure innovation.</p>
<figure id="attachment_1202" class="alignnone"><img class="size-full wp-image-1202" title="Mobile-App-Natural" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/03/Mobile-App-Natural-lowsrc.jpg" alt="" width="550" height="275"/>
<figcaption>Exemples d&#39;interfaces tangibles sous iOS</figcaption></figure>
<p>C&#8217;est très certainement dans l&#8217;innovation pure que l&#8217;on trouve les exemples les plus intéressants avec des interfaces expérimentales (cf. <a href="http://www.interfacesriches.fr/2011/10/19/pourquoi-les-interfaces-tactiles-peuvent-revolutionner-lindustrie-musicale/">Pourquoi les interfaces tactiles peuvent révolutionner l’industrie musicale</a>) et des interfaces qui repoussent toujours plus loin les limites de la simplification (à l&#8217;image de <a href="http://www.realmacsoftware.com/clear/">Clear</a>). Mais il est également possible de trouver de très belles interfaces mobiles qui ne sont ni naturelles ni minimalistes comme celle de <a href="https://path.com/">Path</a>. si vous cherchez de l&#8217;inspiration, je vous recommande des sites comme <a href="http://www.tappgala.com/">TappGala</a>, <a href="http://inspired-ui.com/">Inspired UI</a>, <a href="http://tapfancy.com/">TapFancy</a> ou <a href="http://mobile-patterns.com/">Mobile UI Patterns</a>.</p>
<p>Bref, tout ça pour dire que <strong>je savoure cette période, car elle est d&#8217;une incroyable richesse en terme de créativité pour les interfaces mobiles</strong>, et j&#8217;espère que vous la savourez aussi, car il reste encore de belles années devant nous, d&#8217;autant plus avec la multiplication des formats (tablettes, TV connectées, voitures connectées&#8230;) !</p>
<img src="http://feeds.feedburner.com/~r/Simpleweb/~4/czNZq5mNPx8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.simpleweb.fr/2012/03/20/un-nouvel-age-dor-pour-la-conception-dinterfaces-graces-aux-applications-mobiles/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://www.simpleweb.fr/2012/03/20/un-nouvel-age-dor-pour-la-conception-dinterfaces-graces-aux-applications-mobiles/</feedburner:origLink></item>
		<item>
		<title>Est-ce la mode des interfaces transparentes ?</title>
		<link>http://feedproxy.google.com/~r/Simpleweb/~3/ork6zOfjZuQ/</link>
		<comments>http://www.simpleweb.fr/2012/02/23/est-ce-la-mode-des-interfaces-transparentes/#comments</comments>
		<pubDate>Thu, 23 Feb 2012 10:50:38 +0000</pubDate>
		<dc:creator>Frédéric CAVAZZA</dc:creator>
				<category><![CDATA[Tendances]]></category>
		<category><![CDATA[minimalisme]]></category>

		<guid isPermaLink="false">http://www.simpleweb.fr/?p=1192</guid>
		<description><![CDATA[J&#8217;ai déjà eu l&#8217;occasion de vous parler de services en ligne exploitant une interface minimaliste comme Minutes.io, Billable.me ou Scri.ch (Deux applications en ligne sans... <a href="http://www.simpleweb.fr/2012/02/23/est-ce-la-mode-des-interfaces-transparentes/" title="Lire la suite - Est-ce la mode des interfaces transparentes ?">Lire la suite</a>]]></description>
			<content:encoded><![CDATA[<p>J&#8217;ai déjà eu l&#8217;occasion de vous parler de services en ligne exploitant une interface minimaliste comme <a href="https://www.minutes.io/">Minutes.io</a>, <a href="http://billable.me/">Billable.me</a> ou <a href="http://scri.ch/">Scri.ch</a> (<a href="http://www.simpleweb.fr/2011/03/11/deux-applications-en-ligne-sans-interface/">Deux applications en ligne sans interface</a>). Il semblerait que ce type d&#8217;interface a fait des émules, je vous propose ainsi de découvrir deux applications exploitant des interfaces (quasi) transparentes.</p>
<p>Il y a tout d&#8217;abord <strong><a href="http://www.realmacsoftware.com/clear/">Clear</a>, une application iPhone de gestion de tâches</strong> qui a fait grand bruit lors de sa sortie : <a href="http://siliconfilter.com/no-more-buttons-clear-demonstrates-the-power-of-a-purely-gesture-based-interface/">No More Buttons, Clear Demonstrates the Power of a Purely Gesture-Based Interface</a>.</p>
<figure id="attachment_1195" class="alignnone"><img class="size-full wp-image-1195" title="clear_iphone" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/02/clear_iphone-lowsrc.jpg" alt="" width="550" height="323"/>
<figcaption>L&#39;interface de l&#39;application Clear pour iPhone</figcaption></figure>
<p>Force est de constater qu&#8217;ils sont allés très loin dans la rationalisation de l&#8217;interface puisqu&#8217;il n&#8217;y a ni menu, ni boutons. Et pourtant, la manipulation reste intuitive et performante :</p>
<p><iframe src="http://player.vimeo.com/video/35693267?title=0&amp;byline=0&amp;portrait=0" frameborder="0" width="549" height="309"></iframe></p>
<p>Précisons au passage qu&#8217;il existe une version HTML5 (non-officielle) de cette application réalisée par un étudiant : <a href="http://thenextweb.com/apps/2012/02/22/looking-for-work-this-student-put-clear-in-html5-and-it-isnt-half-bad/">Looking for work, this student built Clear in HTML5 and it isn’t half bad</a>.</p>
<p>Autre exemple : <strong><a href="http://checkthis.com/">CheckThis</a>, une plateforme de publication avec une interface quasi-transparente</strong>. Le principe de ce service est de vous donner l&#8217;opportunité de créer une page pour publier un article, vendre un produit, recruter quelqu&#8217;un ou faire un peu tout ce que vous voulez : <a href="http://web.appstorm.net/reviews/blogging-reviews/checkthis-getting-creative-with-a-single-web-page/">CheckThis, Getting Creative With a Single Web Page</a>.</p>
<figure id="attachment_1194" class="alignnone"><img class="size-full wp-image-1194" title="Checkthis_Tell" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/02/Checkthis_Tell-lowsrc.jpg" alt="" width="550" height="462"/>
<figcaption>L&#39;interface de publication d&#39;article de CHeckThis</figcaption></figure>
<p>Comme vous pouvez le constater, l&#8217;interface est d&#8217;une extrême simplicité puisqu&#8217;elle se concentre sur l&#8217;essentiel : le contenu. Là où ça devient intéressant, c&#8217;est que ce contenu est structuré selon les trois modèles proposés (publier, vendre et engager) :</p>
<figure id="attachment_1193" class="alignnone"><img class="size-full wp-image-1193" title="Checkthis_Sell" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/02/Checkthis_Sell-lowsrc.jpg" alt="" width="550" height="455"/>
<figcaption>L&#39;interface de publication d&#39;un produit sur CheckThis</figcaption></figure>
<p>Les options de présentation et de paramétrage ne sont proposées qu&#8217;en périphérie de page, tout comme la création de compte. Face à des plateformes de publication ou de e-commerce toujours plus sophistiquées (WordPress, Prestashop&#8230;), <strong>ce service me semble être une alternative tout à fait crédible pour ceux qui ont des besoins très ponctuels</strong> : publier un seul article, vendre un seul produit ou recruter une seule personne. Je suis de plus en admiration devant le travail d&#8217;épuration de l&#8217;interface qui est une merveille de minimalisme et d&#8217;intuitivité. Du grand art !</p>
<p>Sommes-nous en présence d&#8217;une tendance de fond avec ces interfaces transparentes ? Je l&#8217;espère, car je suis un fan inconditionnel.</p>
<img src="http://feeds.feedburner.com/~r/Simpleweb/~4/ork6zOfjZuQ" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.simpleweb.fr/2012/02/23/est-ce-la-mode-des-interfaces-transparentes/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://www.simpleweb.fr/2012/02/23/est-ce-la-mode-des-interfaces-transparentes/</feedburner:origLink></item>
		<item>
		<title>L’approche ‘Mobile First’ adoptée par Amazon en Inde</title>
		<link>http://feedproxy.google.com/~r/Simpleweb/~3/7yQsYWuW0jE/</link>
		<comments>http://www.simpleweb.fr/2012/02/10/lapproche-mobile-first-adoptee-par-amazon-en-inde/#comments</comments>
		<pubDate>Fri, 10 Feb 2012 15:20:12 +0000</pubDate>
		<dc:creator>Frédéric CAVAZZA</dc:creator>
				<category><![CDATA[Analyse]]></category>
		<category><![CDATA[amazon]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[smartphone]]></category>

		<guid isPermaLink="false">http://www.simpleweb.fr/?p=1185</guid>
		<description><![CDATA[Connaissez-vous la toute nouvelle boutique lancée par Amazon pour le marché indien ? Elle s&#8217;appelle Junglee et pourrait bien présager de ce que seront les sites web... <a href="http://www.simpleweb.fr/2012/02/10/lapproche-mobile-first-adoptee-par-amazon-en-inde/" title="Lire la suite - L&#8217;approche &#8216;Mobile First&#8217; adoptée par Amazon en Inde">Lire la suite</a>]]></description>
			<content:encoded><![CDATA[<p>Connaissez-vous la toute nouvelle boutique lancée par Amazon pour le marché indien ? Elle s&#8217;appelle <strong><a href="http://www.junglee.com/">Junglee</a> et pourrait bien présager de ce que seront les sites web dans quelques années</strong> : <a href="http://online.wsj.com/article/SB10001424052970203889904577198731348201266.html">Amazon Launches New Website for India</a>. La particularité de cette nouvelle boutique est de proposer une sélection correspondant aux attentes du marché indien, mais également de se conformer à une spécificité locale : du fait d&#8217;infrastructures défaillantes, <strong>plus de la moitié des accès internet s&#8217;effectue via des téléphones mobiles</strong> (<a href="http://thenextweb.com/in/2011/11/28/in-india-40-of-search-and-67-of-e-commerce-is-mobile-says-google/">In India, 40% of search and 67% of e-commerce is mobile</a>).</p>
<figure id="attachment_1186" class="alignnone"><img class="size-full wp-image-1186" title="Junglee" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/02/Junglee-lowsrc.jpg" alt="" width="550" height="461"/>
<figcaption>La page d&#39;accueil du site indien d&#39;Amazon (optimisée pour les smartphones)</figcaption></figure>
<p>Le fait que la majorité des internautes indiens se connectent via un terminal mobile ne pouvait pas être ignoré par Amazon. Même si la <a href="http://www.simpleweb.fr/2011/09/19/amazon-et-ebay-changent-enfin-de-sites-web/">nouvelle version</a> en cours de déploiement prend en compte les smartphones et tablettes, ils devaient aller plus loin&#8230; surtout plus loin que <a href="http://www.flipkart.com/">Flipkart</a>, leur principal concurrent. <strong>Ils ont donc décidé de prendre le problème à l&#8217;inverse et de concevoir une boutique pour les terminaux mobiles qui s&#8217;affichent bien sur un écran d&#8217;ordinateur</strong>.</p>
<p>Vous pourriez me dire qu&#8217;avec des techniques comme le <em>responsive design</em> ce n&#8217;est pas nécessaire, car il suffit simplement d&#8217;optimiser le code pour que la mise en page s&#8217;adapte. Certes, mais ça c&#8217;est la théorie. En pratique le <em>responsive design</em> est une technique de code (ou plutôt une approche) qui exige une sacrée gymnastique et qui est tout de même contraignante. Je parle d&#8217;expérience, car le blog que vous lisez en ce moment est codé selon ce principe et ça n&#8217;a pas été une mince affaire (<a href="http://www.simpleweb.fr/2011/10/19/nouveau-theme-graphique-en-html5-et-responsive-design/">Nouveau thème graphique en HTML5 et <em>responsive design</em></a>). Ce n&#8217;est ainsi pas un hasard si l&#8217;on ne trouve que très peu de sites à fort trafic en <em>responsive design</em> (à part le <a href="http://www.bostonglobe.com/">Boston Globe</a>).</p>
<p>La solution est donc de concevoir votre site pour les terminaux mobiles, puis de l&#8217;enrichir pour qu&#8217;il soit plus performant sur les écrans d&#8217;ordinateurs. L&#8217;approche du <em><a href="http://www.lukew.com/ff/entry.asp?933">Mobile First</a></em> n&#8217;est pas nouvelle, car en parlait déjà en 2009 (il y a même un <a href="http://www.lukew.com/resources/mobile_first.asp">livre</a> à ce sujet). <strong>La solution ultime consiste donc à coupler ces deux approches : <a href="http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/">mobile-first responsive web design</a></strong>.</p>
<figure id="attachment_1187" class="alignnone"><img class="size-full wp-image-1187" title="progressive_enhancement" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/02/progressive_enhancement-lowsrc.jpg" alt="" width="550" height="359"/>
<figcaption>La différence entre dégradation élégante et amélioration progressive</figcaption></figure>
<p>Vous noterez que ce couple <em>Mobile First + Responsive Design</em> est la synthèse de nombreuses années de discussions et théories et qu&#8217;il représente <strong>la technique de conception la plus efficace et pragmatique</strong>. La boutique Junglee est ainsi un bel exemple de pragmatisme en matière de commerce en ligne : pas de fioritures, l&#8217;accès rapide aux produits est privilégié sur tout le reste. Ceci étant dit, je ne peux que vous mettre en garde contre les complications et contraintes inhérentes à cette philosophie, elles sont nombreuses et je ne suis pas le seul à le dire : <a href="http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/">Where are the Mobile First Responsive Web Designs?</a>.</p>
<p>Au final, l&#8217;approche utilisée pour Junglee est-elle l&#8217;avenir de la conception web ? Je ne saurais le dire, en tout cas de la conception web multi-écran. Je n&#8217;ai eu de cesse de dire et répéter sur mes différents blogs que beaucoup de choses allaient changer avec l&#8217;avènement de la mobilité et de HTML5, Junglee est là pour nous rappeler que l&#8217;horloge tourne&#8230;</p>
<img src="http://feeds.feedburner.com/~r/Simpleweb/~4/7yQsYWuW0jE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.simpleweb.fr/2012/02/10/lapproche-mobile-first-adoptee-par-amazon-en-inde/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		<feedburner:origLink>http://www.simpleweb.fr/2012/02/10/lapproche-mobile-first-adoptee-par-amazon-en-inde/</feedburner:origLink></item>
		<item>
		<title>Les sites d’actualité ont encore des progrès à faire</title>
		<link>http://feedproxy.google.com/~r/Simpleweb/~3/lejNgh54t4M/</link>
		<comments>http://www.simpleweb.fr/2012/01/24/les-sites-dactualite-ont-encore-des-progres-a-faire/#comments</comments>
		<pubDate>Tue, 24 Jan 2012 08:15:43 +0000</pubDate>
		<dc:creator>Frédéric CAVAZZA</dc:creator>
				<category><![CDATA[Analyse]]></category>
		<category><![CDATA[lisibilité]]></category>

		<guid isPermaLink="false">http://www.simpleweb.fr/?p=1167</guid>
		<description><![CDATA[Afficher une grande quantité d&#8217;information à l&#8217;écran est un sacré challenge, mais ce n&#8217;est pas une raison pour faire n&#8217;importe quoi ! Illustration avec la... <a href="http://www.simpleweb.fr/2012/01/24/les-sites-dactualite-ont-encore-des-progres-a-faire/" title="Lire la suite - Les sites d&#8217;actualité ont encore des progrès à faire">Lire la suite</a>]]></description>
			<content:encoded><![CDATA[<p>Afficher une grande quantité d&#8217;information à l&#8217;écran est un sacré challenge, mais ce n&#8217;est pas une raison pour faire n&#8217;importe quoi ! Illustration avec la version française du <a href="http://www.huffingtonpost.fr/">HuffingtonPost</a> qui a été lancée hier matin à grand coup de ramdam médiatique. Il n&#8217;y a pourtant pas de quoi être fier tant le site est&#8230; (je préfère m&#8217;abstenir de le qualifier pour ne pas verser dans la vulgarité et je me range derrière l&#8217;avis de Geoffrey : <a href="http://graphism.fr/yatil-designer-pour-sauver-le-huffington-post-design-graphiste-graphisme-journal">Y’a-t-il un designer pour sauver le Huffington Post ?</a>).</p>
<figure id="attachment_1169" class="alignnone"><img class="size-full wp-image-1169" title="HuffPo" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/HuffPo-lowsrc.jpg" alt="" width="550" height="584"/>
<figcaption>La catastrophique site du Huffington Post en français</figcaption></figure>
<p>Même si je ne souhaite pas prendre la défense des personnes responsables de cette infamie, je constate qu&#8217;en règle générale <strong>le secteur ne brille pas par son originalité. En témoignent des sites d&#8217;actualité français qui se ressemblent tous</strong> : <a href="http://www.lemonde.fr/">Le Monde</a>, <a href="http://www.liberation.fr/">Libération</a>, <a href="http://www.leparisien.fr/">Le Parisien</a> et <a href="http://www.lefigaro.fr/">Le Figaro</a>&#8230; Mais ce ne sont pas les pires, car d&#8217;autres s&#8217;illustrent par leur mise en page complètement déstructurée (<a href="http://www.20minutes.fr/">20 Minutes</a>) ou très tassée (<a href="http://www.lequipe.fr/">L&#8217;équipe</a>).</p>
<p>Ceci étant dit, les grands titres US souffrent également d&#8217;une très forte densité d&#8217;information. Ils sont, certes, très sobres (une qualité que j&#8217;apprécie), mais pas non plus très inspirés comme le <a href="http://www.nytimes.com/">NY Times</a>, <a href="http://www.washingtonpost.com/">Washington Post</a>, le <a href="http://www.latimes.com/">LA Times</a> ou le <a href="http://bostonglobe.com/">Boston Globe</a>.</p>
<figure id="attachment_1172" class="alignnone"><img class="size-full wp-image-1172" title="NYT" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/NYT-lowsrc.jpg" alt="" width="550" height="527"/>
<figcaption>La page d&#39;accueil du NY Times</figcaption></figure>
<p>Vous noterez que certains titres ont fait des efforts comme <a href="http://www.usatoday.com/">USA Today</a> ou <a href="http://www.npr.org/">NPR</a>. Les concurrents outre-Atlantique proposent, eux, une mise en page plus aérée et surtout plus de couleurs comme le site du <a href="http://www.guardian.co.uk/">Guardian</a> ou celui de la <a href="http://www.bbc.com/news/">BBC</a>.</p>
<figure id="attachment_1178" class="alignnone"><img class="size-full wp-image-1178" title="BBC" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/BBC-lowsrc.jpg" alt="" width="550" height="565"/>
<figcaption>La page d&#39;accueil du site de la BBC</figcaption></figure>
<p>Dans la même lancée, les sites de magazines américains comme <a href="http://www.thedailybeast.com/newsweek.html">Newsweek</a>, <a href="http://www.salon.com/">Salon</a> ou encore <a href="http://www.newyorker.com/">The New Yorker</a> proposent plus d&#8217;espace et d&#8217;originalité (une typographie spécifique et même un petit papillon qui virevolte au-dessus du logo).</p>
<figure id="attachment_1179" class="alignnone"><img class="size-full wp-image-1179" title="TheNewYorker" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/TheNewYorker-lowsrc.jpg" alt="" width="550" height="503"/>
<figcaption>La page d&#39;accueil de The New Yorker</figcaption></figure>
<p>Bref, tout ça pour dire que la solution miracle n&#8217;existe pas&#8230; ou qu&#8217;ils ne l&#8217;ont pas trouvé ! Un constat affligeant également partagé par d&#8217;autres : <a href="http://www.niemanlab.org/2011/07/designing-a-big-news-site-is-about-more-than-beauty/">Designing a big news site is about more than beauty</a>. Le designer <a href="http://andyrutledge.com/news-redux.php">Andy Rutledge</a> propose d&#8217;ailleurs un nettoyage très réussi du site du NY Times :</p>
<figure id="attachment_1171" class="alignnone"><img class="size-full wp-image-1171" title="nyt_prop" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/nyt_prop-lowsrc.jpg" alt="" width="550" height="623"/>
<figcaption>Proposition minimaliste pour le site du NY Times</figcaption></figure>
<p>Vous pourriez me dire qu&#8217;une mise en page aussi épurée relève du fantasme tant les contraintes que l&#8217;éditeur doit prendre sont nombreuses (bannières, offres de partenaires, confits éditoriaux&#8230;), mais pourtant d&#8217;autres ont fait ce <strong>choix de clarté et de minimalisme avec brio comme le très bon site de <a href="http://www.inc.com/">Inc</a></strong>.</p>
<figure id="attachment_1170" class="alignnone"><img class="size-full wp-image-1170" title="INC" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/INC-lowsrc.jpg" alt="" width="550" height="609"/>
<figcaption>La très belle page d&#39;accueil du magazine Inc.</figcaption></figure>
<p>Je ne peux pas terminer ce passage en revue des sites d&#8217;information sans mentionner la très réussie maquette du site d&#8217;<a href="http://owni.fr/">Owni</a> qui tranche avec tout ce que l&#8217;on connait :</p>
<figure id="attachment_1173" class="alignnone"><img class="size-full wp-image-1173" title="OWNI1" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/OWNI1-lowsrc.jpg" alt="" width="550" height="610"/>
<figcaption>Le haut de la page d&#39;accueil de Owni</figcaption></figure>
<p>La page d&#8217;accueil est ainsi coupée en deux par la frise de photos et propose une imbrication de bloc-articles dans sa moitié basse :</p>
<figure id="attachment_1174" class="alignnone"><img class="size-full wp-image-1174" title="OWNI2" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/OWNI2-lowsrc.jpg" alt="" width="550" height="590"/>
<figcaption>La partie basse du site de Owni</figcaption></figure>
<p>Au final, nous sommes bien d&#8217;accord pour dire que l&#8217;important est la qualité du contenu et non la présentation. Ceci étant dit, je ne me risquerais pas à dire que le site d&#8217;Owni est mieux que celui du Huffington Post dans la mesure où tout est affaire de goût. Mais bon&#8230; j&#8217;ai quand même une forte préférence !</p>
<p>Normalement une nouvelle version du site de <a href="http://www.lexpress.fr/">L&#8217;Express</a> (auquel j&#8217;avais contribué il y a quelques années) devrait sortir la semaine prochaine, peut-être apporteront-ils des solutions en terme de lisibilité / densité&#8230;</p>
<img src="http://feeds.feedburner.com/~r/Simpleweb/~4/lejNgh54t4M" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.simpleweb.fr/2012/01/24/les-sites-dactualite-ont-encore-des-progres-a-faire/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		<feedburner:origLink>http://www.simpleweb.fr/2012/01/24/les-sites-dactualite-ont-encore-des-progres-a-faire/</feedburner:origLink></item>
		<item>
		<title>La bataille du commerce en ligne se gagnera sur l’expérience utilisateur</title>
		<link>http://feedproxy.google.com/~r/Simpleweb/~3/fEzuGUT5ciQ/</link>
		<comments>http://www.simpleweb.fr/2012/01/12/la-bataille-du-commerce-en-ligne-se-gagnera-sur-lexperience-utilisateur/#comments</comments>
		<pubDate>Thu, 12 Jan 2012 20:26:34 +0000</pubDate>
		<dc:creator>Frédéric CAVAZZA</dc:creator>
				<category><![CDATA[Analyse]]></category>
		<category><![CDATA[e-commerce]]></category>
		<category><![CDATA[expérience utilisateur]]></category>

		<guid isPermaLink="false">http://www.simpleweb.fr/?p=1155</guid>
		<description><![CDATA[L&#8217;année dernière je constatais un regain d&#8217;intérêt des éditeurs de site pour proposer de nouvelles expériences d&#8217;achat et de consultation. Pourquoi chercher à réinventer la... <a href="http://www.simpleweb.fr/2012/01/12/la-bataille-du-commerce-en-ligne-se-gagnera-sur-lexperience-utilisateur/" title="Lire la suite - La bataille du commerce en ligne se gagnera sur l&#8217;expérience utilisateur">Lire la suite</a>]]></description>
			<content:encoded><![CDATA[<p>L&#8217;année dernière je constatais un regain d&#8217;intérêt des éditeurs de site pour proposer de <a href="http://www.fredcavazza.net/2011/09/27/vers-de-nouvelles-experiences-dachat-et-de-consultation/">nouvelles expériences d&#8217;achat et de consultation</a>. Pourquoi chercher à réinventer la roue alors que le commerce en ligne tourne à plein régime ? Justement parce qu&#8217;il tourne à plein d-régime et que la compétition n&#8217;a jamais été aussi forte (marges ridiculement basse, livraison gratuite, satisfait ou remboursé pendant un an&#8230;). <strong>Pour se démarquer, il ne reste plus beaucoup de leviers à activer</strong> : les prix sont déjà au plus bas, les performances au plus haut et les interfaces simplifiées à l&#8217;extrême. La seule solution pour sortir du lot consiste alors à proposer une expérience différenciante.</p>
<p>Prenez par exemple le secteur du tourisme :</p>
<ul>
<li>Google préempte le bas du marché avec deux interfaces de recherche verticales ultra-optimisées (<a href="http://google.com/flights/">Flights</a> et <a href="http://www.google.com/hotelfinder/">Hotel Finder</a>) ;
<p><figure id="attachment_1156" class="alignnone"><img class="size-full wp-image-1156" title="GoogleHotelFinder" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/GoogleHotelFinder-lowsrc.jpg" alt="" width="540" height="378"/>
<figcaption>L&#39;interface de recherche d&#39;hôtels de Google</figcaption></figure></li>
<li><a href="http://www.hipmunk.com/">Hipmunk</a> s&#8217;est imposé comme La référence en matière d&#8217;interface de recherche sur le web et sur terminaux mobiles (<a href="http://www.simpleweb.fr/2010/12/16/hipmunk-la-nouvelle-reference-de-la-recherche-de-vol/">Hipmunk, la nouvelle référence de la recherche de vol</a> et <a href="http://techcrunch.com/2012/01/09/hipmunk-checks-in-launches-hotel-search-for-iphone-and-android/">Hipmunk Launches Hotel Search For iOS And Android</a>) ;
<p><figure id="attachment_1157" class="alignnone"><img class="size-full wp-image-1157" title="Hipmunk-hotel-filter" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/Hipmunk-hotel-filter-lowsrc.jpg" alt="" width="540" height="394"/>
<figcaption>L&#39;interface de recherche d&#39;hôtels de Hipmunk sur iPad</figcaption></figure></li>
<li>Kayak a même récemment lancé une <a href="http://www.richcommerce.fr/2011/12/22/kayak-lance-une-application-marchande-pour-mac/">application marchande</a>sur le Mac App Store.
<p><figure id="attachment_1158" class="alignnone"><img class="size-full wp-image-1158 " title="KayakExplorer2" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/KayakExplorer2-lowsrc.jpg" alt="" width="495" height="334"/>
<figcaption>L&#39;application marchande de Kayak</figcaption></figure></li>
</ul>
<p>Face à une telle débauche de créativité, plusieurs chaines hôtelières (Hilton, Hyatt, InterContinental, Marriott et Wyndham) se sont fédérées pour proposer leur propre moteur de recherche : <a href="http://searchengineland.com/big-chains-launch-hulu-for-hotels-107797">Big Chains Launch “Hulu For Hotels”</a>. Pourquoi cette comparaison avec Hulu ? Car <a href="http://www.hulu.com/">Hulu</a> est LA référence en matière d&#8217;expérience utilisateur, surtout face à des concurrents très puissants (<a href="http://www.simpleweb.fr/2009/01/12/video-en-ligne-hulu-vainqueur-par-ko/">Vidéo en ligne, Hulu vainqueur par K.O.</a>).</p>
<p>Bref, ces chaines hôtelières <strong>ne pouvant pas se battre sur l&#8217;argument du prix ou de la simplicité d&#8217;usage ont tout misé sur la qualité de l&#8217;expérience utilisateur avec <a href="http://www.roomkey.com/">Roomkey</a></strong>. Le moins que l&#8217;on puisse dire, c&#8217;est que le résultat est à la hauteur de la concurrence avec une interface de recherche tout simplement splendide.</p>
<p>La magie commence dès la page d&#8217;accueil avec des couleurs et visuels très chaleureux :<br />
<figure id="attachment_1162" class="alignnone"><img class="size-full wp-image-1162" title="RoomKey" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/RoomKey-lowsrc.jpg" alt="" width="550" height="388"/>
<figcaption>La page d&#39;accueil de Roomkey</figcaption></figure></p>
<p>Une fois les critères saisis, le bandeau de recherche remonte en douceur et la liste de résultat s&#8217;affiche dans une parfaite transition :<br />
<figure id="attachment_1161" class="alignnone"><img class="size-full wp-image-1161" title="RoomKey_Results" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/RoomKey_Results-lowsrc.jpg" alt="" width="550" height="574"/>
<figcaption>La liste de résultats de Roomkey</figcaption></figure></p>
<p><strong>Tout a été soigné dans le moindre détail</strong> sur cette liste : le choix des typos, l&#8217;arrondi des cartouches, les pictos et éléments d&#8217;interface&#8230; Le résultat est un mélange de simplicité, de sobriété et de raffinement, un modèle du genre !</p>
<p>Le basculement d&#8217;un mode d&#8217;affichage à un autre se fait avec une très belle transition. Cerise sur le gâteau : lorsque vous descendez vers le base de la page,  la carte reste verrouillée en haut de l&#8217;écran pour que vous puissiez localiser les hôtels du bas de la liste.</p>
<figure id="attachment_1160" class="alignnone"><img class="size-full wp-image-1160" title="RoomKey_Map" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2012/01/RoomKey_Map-lowsrc.jpg" alt="" width="550" height="542"/>
<figcaption>L&#39;interface cartographique de Roomkey</figcaption></figure>
<p>De mémoire, j&#8217;ai rarement vu une aussi belle interface. Autant vous dire que je suis plus qu&#8217;enthousiaste à l&#8217;idée d&#8217;une lutte entre les concurrents sur le terrain de l&#8217;expérience utilisateur. J&#8217;ai vraiment hâte que ce type de compétition se déporte sur d&#8217;autres secteurs comme la distribution ou la banque. Quoi que&#8230; ça a déjà commencé avec des nouveaux entrants comme <a href="https://simple.com/">SimpleBank</a> et <a href="http://www.yoyo.com/">Yoyo</a>.</p>
<img src="http://feeds.feedburner.com/~r/Simpleweb/~4/fEzuGUT5ciQ" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.simpleweb.fr/2012/01/12/la-bataille-du-commerce-en-ligne-se-gagnera-sur-lexperience-utilisateur/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		<feedburner:origLink>http://www.simpleweb.fr/2012/01/12/la-bataille-du-commerce-en-ligne-se-gagnera-sur-lexperience-utilisateur/</feedburner:origLink></item>
		<item>
		<title>Et on reparle de la limite de visibilité</title>
		<link>http://feedproxy.google.com/~r/Simpleweb/~3/1qZMDSEsuGI/</link>
		<comments>http://www.simpleweb.fr/2011/12/16/et-on-reparle-de-la-limite-de-visibilite/#comments</comments>
		<pubDate>Fri, 16 Dec 2011 09:41:13 +0000</pubDate>
		<dc:creator>Frédéric CAVAZZA</dc:creator>
				<category><![CDATA[Analyse]]></category>
		<category><![CDATA[conception]]></category>

		<guid isPermaLink="false">http://www.simpleweb.fr/?p=1150</guid>
		<description><![CDATA[Il est amusant de constater qu&#8217;en matière de conception web, certains mythes ont la peau sacrément dure. Autant nous n&#8217;abordons plus les mythes de la... <a href="http://www.simpleweb.fr/2011/12/16/et-on-reparle-de-la-limite-de-visibilite/" title="Lire la suite - Et on reparle de la limite de visibilité">Lire la suite</a>]]></description>
			<content:encoded><![CDATA[<p>Il est amusant de constater qu&#8217;en matière de conception web, certains mythes ont la peau sacrément dure. Autant nous n&#8217;abordons plus les mythes de la <a href="http://www.simpleweb.fr/2003/11/28/en-finir-avec-la-regle-des-3-clics/">règle des trois clics</a> ou de la <a href="http://www.simpleweb.fr/2010/07/12/de-laberrante-derive-du-poids-des-pages-daccueil/">page d&#8217;accueil de moins de 60 Ko</a>, autant celui de la limite de visibilité revient régulièrement. Le dernier article que j&#8217;avais rédigé à ce sujet remonte à deux ans (<a href="http://www.simpleweb.fr/2009/10/31/en-finir-avec-le-mythe-de-la-limite-de-visibilite/">En finir avec le mythe de la limite de visibilité</a>), mais je pense devoir m&#8217;y coller à nouveau pour définitivement clore le sujet.</p>
<p>Malgré les nombreux articles déjà parus sur le sujet, les discussions persistent, de même que les publications : <a href="http://iampaddy.com/lifebelow600/">Life below 600px</a>, <a href="http://www.practicalecommerce.com/articles/3108-Designing-Above-the-Fold-Necessary-">Designing &#8216;Above the Fold&#8217; Necessary?</a>, <a href="http://www.nmk.co.uk/articles/1815">Is there life below the fold?</a>. Le point de départ de ce mythe est pourtant bien fondé : les contenus au-dessus de la limite de visibilité sont plus lus, de même que les boutons qui sont plus cliqués. Ceci étant dit, les contre-arguments sont également toujours les mêmes :</p>
<ul>
<li>L&#8217;équipement des internautes évolue et la limite des 600px est repoussée vers le bas avec des écrans toujours plus grands ;</li>
<li>Depuis 15 ans que le web existe, les internautes ont appris à se servir de la barre de défilement et de la molette de leur souris ;</li>
<li>L&#8217;important n&#8217;est pas de faire rentrer tout le contenu au dessus de la limite, mais de faire comprendre aux internautes qu&#8217;il y a du contenu supplémentaire en dessous ;</li>
<li>Même s&#8217;il est largement en dessous de la limite de visibilité, un contenu associé à un point d&#8217;intérêt (photo, vidéo, illustration&#8230;) sera lu.</li>
</ul>
<p>J&#8217;imagine que vous devez en avoir raz-le-bol que l&#8217;on vous sorte toujours les mêmes exemples (page produit d&#8217;Amazon et page d&#8217;accueil de Basecamp), alors pour illustrer mon propos je choisit un autre exemple (la page d&#8217;accueil de <a href="http://backpackit.com/">Backpack</a>) qui démontre bien l&#8217;intérêt d&#8217;utiliser toute la hauteur de page pour bien valoriser le contenu.</p>
<figure id="attachment_1152" class="alignnone"><img class="size-full wp-image-1152" title="Backpack" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2011/12/Backpack-lowsrc.jpg" alt="" width="514" height="1105"/>
<figcaption>La page d&#39;accueil tout en hauteur de backpack</figcaption></figure>
<p>Nous sommes maintenant (presque) en 2012, il faut savoir vivre avec son époque et <strong>prendre en compte plusieurs facteurs qui rendent cette limite des 600px encore plus caduque</strong> :</p>
<ul>
<li>Le volume de contenu disponible a considérablement augmenté ces dernières années avec les médias sociaux et les contenus multimédia, de ce fait, vous aurez besoin de plus de contenus pour attirer l&#8217;attention et convaincre les internautes, donc de plus de place ;</li>
<li>La montée en puissance des terminaux alternatifs (smartphones, tablettes, TV connectées, netbooks/cloudbooks&#8230;) brouille complètement les statistiques de taille d&#8217;écran.</li>
</ul>
<p>Ces deux facteurs, dont nous commençons réellement à prendre la mesure à l&#8217;aube de cette nouvelle année, remettent en question les règles de conception des sites web (<a href="http://www.simpleweb.fr/2009/06/16/vers-des-sites-adaptes-aux-netbooks/">Vers des sites adaptés aux netbooks ?</a>, <a href="http://www.simpleweb.fr/2010/07/29/faut-il-reinventer-le-web-pour-les-touchbooks/">Faut-il réinventer le web pour les touchbooks ?</a> et <a href="http://www.fredcavazza.net/2011/11/09/quel-va-etre-impact-de-la-fin-de-lordinateur-individuel/">Quel va être l’impact de la fin de l’ordinateur individuel ?</a>). De ce fait, de nouvelles pratiques émergent et apportent une solution à ce phénomène de diversification des modes de consultation et d&#8217;achat en ligne : <a href="http://www.simpleweb.fr/2011/01/05/4-feuilles-de-styles-pour-4-experiences-de-lecture/">4 feuilles de styles pour 4 expériences de lecture</a>, <a href="http://www.simpleweb.fr/2011/03/23/le-responsive-design-a-lassaut-des-terminaux-mobiles/">Le responsive design à l’assaut des terminaux mobiles</a> et <a href="http://www.simpleweb.fr/2011/08/30/et-on-reparle-de-la-conception-multi-ecran/">Et on reparle de la conception multi-écran</a>.</p>
<p>Donc au final, la limite de visibilité a-t-elle encore une importance ? Non, plus réellement. <strong>Certes, les contenus en haut de page bénéficieront toujours d&#8217;une meilleure exposition, mais la notion de <em>haut de page</em> devient de plus en plus floue</strong> : non seulement les formats d&#8217;écrans se diversifient, mais les applications prennent de plus en plus de place dans les modes de consultation (<a href="http://www.interfacesriches.fr/2011/12/09/le-choix-se-complique-entre-application-mobile-et-application-html5/">Le choix se complique entre application mobile et application HTML5</a>).</p>
<p>Moralité : les concepteurs sont aujourd&#8217;hui confrontés à des défis bien plus complexes que l&#8217;identification d&#8217;une surface d&#8217;affichage optimale. Le débat ne porte plus réellement sur l&#8217;emplacement de la limite de visibilité, mais sur les priorités à attribuer aux interfaces web, mobiles, tactiles, aux applications&#8230; <em>Mobile First</em> ! (et <em>Content First</em> !) (et <em>Touch is the New Click!</em>) (et <em>Web is Dead!</em>) (et <em>HTML5 Rules!</em>) (bref, il n&#8217;y a plus de règles).</p>
<img src="http://feeds.feedburner.com/~r/Simpleweb/~4/1qZMDSEsuGI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.simpleweb.fr/2011/12/16/et-on-reparle-de-la-limite-de-visibilite/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		<feedburner:origLink>http://www.simpleweb.fr/2011/12/16/et-on-reparle-de-la-limite-de-visibilite/</feedburner:origLink></item>
		<item>
		<title>Plusieurs études d’oculométrie sur les réseaux sociaux</title>
		<link>http://feedproxy.google.com/~r/Simpleweb/~3/dbgAwyv37vk/</link>
		<comments>http://www.simpleweb.fr/2011/11/30/plusieurs-etudes-doculometrie-sur-les-reseaux-sociaux/#comments</comments>
		<pubDate>Wed, 30 Nov 2011 10:02:50 +0000</pubDate>
		<dc:creator>Frédéric CAVAZZA</dc:creator>
				<category><![CDATA[Analyse]]></category>
		<category><![CDATA[eye-tracking]]></category>
		<category><![CDATA[médias sociaux]]></category>

		<guid isPermaLink="false">http://www.simpleweb.fr/?p=1139</guid>
		<description><![CDATA[Les médias sociaux ont beau accaparer l&#8217;audience de l&#8217;internet, il n&#8217;existe que peu d&#8217;études sur l&#8217;ergonomie des interfaces de ces plateformes. Il faut dire que les interfaces... <a href="http://www.simpleweb.fr/2011/11/30/plusieurs-etudes-doculometrie-sur-les-reseaux-sociaux/" title="Lire la suite - Plusieurs études d&#8217;oculométrie sur les réseaux sociaux">Lire la suite</a>]]></description>
			<content:encoded><![CDATA[<p>Les médias sociaux ont beau accaparer l&#8217;audience de l&#8217;internet, il n&#8217;existe que peu d&#8217;études sur l&#8217;ergonomie des interfaces de ces plateformes. Il faut dire que les interfaces changent souvent (<a href="http://baymard.com/blog/facebook-timeline-design">Thoughts on the New Facebook Timeline Design</a>), et que de toute façon, les utilisateurs sont avant motivés par la possibilité de développer des interactions sociales avec leurs amis.</p>
<p>Un récent article publié sur Mashable nous donne néanmoins <strong>des informations intéressantes sur la façon dont les internautes décryptent les interfaces des principaux médias sociaux : <a href="http://mashable.com/2011/11/30/social-profile-eye-tracking/#view_as_one_page-gallery_box3273">Here’s How People Look at Your Facebook Profile, Literally</a></strong>. L&#8217;étude est intéressante car exhaustive, mais elle vient surtout corroborer les observations d&#8217;oculométrie précédemment observées, notamment en 2009 par <em>OneUpWeb</em> (<a href="http://www.yangiz.fr/marketing/une-etude-de-eye-tracking-pour-facebook-twitter-et-youtube/">Une étude de Eye Tracking pour Facebook, Twitter et Youtube</a>) : l&#8217;attention est concentrée sur le haut de page et le regard suit la mise en page en deux colonnes.</p>
<figure id="attachment_1141" class="alignnone"><img class="size-full wp-image-1141" title="facebook_eyetracking_2009" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2011/12/facebook_eyetracking_2009-lowsrc.jpg" alt="" width="550" height="544"/>
<figcaption>Résultat d&#39;oculométrie de l&#39;interface de Facebook en 2009</figcaption></figure>
<p>Cette étude de eye-tracking avait été complétée en 2010 par le Catalyst Group avec un examen plus approfondi de la page de liste de contacts : <a href="http://eyetrackingupdate.com/2010/02/19/eye-tracking-facebook-linkedin-usability/">Eye Tracking: Facebook and LinkedIn Usability</a>.</p>
<p>Plus intéressant, le <em>EyeTrackShop</em> avait publié en milieu d&#8217;année les résultats d&#8217;<strong>une étude portant sur Facebook et Google+ : <a href="http://allthingsd.com/20110811/eye-tracking-study-shows-users-perceive-google-and-facebook-virtually-identically/">Eye-Tracking Study Shows Users Perceive Google+ and Facebook Virtually Identically</a></strong>. Cette étude démontrait que l&#8217;oeil suivait le même parcours critique sur les deux interfaces.</p>
<figure id="attachment_1142" class="alignnone"><img class="size-full wp-image-1142" title="FB-GP_EyeTracking_2011" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2011/12/FB-GP_EyeTracking_2011-lowsrc.jpg" alt="" width="550" height="566"/>
<figcaption>Résultats d&#39;oculométrie sur Facebook et Google+</figcaption></figure>
<p>Ces résultats ne sont pas très surprenants dans la mesure où les deux interfaces sont très proches.</p>
<p>Nous en revenons donc à l&#8217;article que je mentionnais en haut de page et la comparaison des zones de fixation entre les différents médias sociaux. Premier constat : <strong>le parcours de l&#8217;oeil est avant tout guidé par les photos</strong>. Ceci est particulièrement flagrant avec Facebook, Twitter, Google+ et surtout YouTube :</p>
<figure id="attachment_1140" class="alignnone"><img class="size-full wp-image-1140" title="facebook_ET" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2011/12/facebook_ET-lowsrc.jpg" alt="" width="550" height="377"/>
<figcaption>Points de fixation de l&#39;interface de Facebook en 2011</figcaption></figure>
<figure id="attachment_1143" class="alignnone"><img class="size-full wp-image-1143" title="googleP_ET" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2011/12/googleP_ET-lowsrc.jpg" alt="" width="550" height="373"/>
<figcaption>Points de fixation de l&#39;interface de Google+</figcaption></figure>
<figure id="attachment_1145" class="alignnone"><img class="size-full wp-image-1145" title="twitter_ET" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2011/12/twitter_ET-lowsrc.jpg" alt="" width="550" height="373"/>
<figcaption>Points de fixation de l&#39;interface de Twitter</figcaption></figure>
<figure id="attachment_1146" class="alignnone"><img class="size-full wp-image-1146" title="youtube_ET" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2011/12/youtube_ET-lowsrc.jpg" alt="" width="550" height="373"/>
<figcaption>Points de fixation de l&#39;interface de YouTube</figcaption></figure>
<p><strong>Autres enseignements : les photos des amis sont particulièrement appréciées, de même que les titres des contenus en haut de page</strong>. Rien de très surprenant, ceci est conforme à ce que l&#8217;on peut constater sur d&#8217;autres sites.</p>
<p>Il y a donc une uniformisation dans la façon dont les internautes décryptent les interfaces des réseaux sociaux, sauf pour LinkedIn où le comportement de l&#8217;oeil est très différent :</p>
<figure id="attachment_1144" class="alignnone"><img class="size-full wp-image-1144" title="linkedin_ET" src="http://www.simpleweb.fr/wp-content/blogs.dir/12/files/2011/12/linkedin_ET-lowsrc.jpg" alt="" width="550" height="373"/>
<figcaption>Points de fixation pour l&#39;interface de LinkedIn</figcaption></figure>
<p>Certes, l&#8217;interface ne propose pas la même mise en page ni le même nombre de photos, mais l&#8217;on constate que le regard est avant tout attiré par l&#8217;intitulé du poste et les expériences (du moins la première).</p>
<p>Tout ceci est donc très intéressant, car il n&#8217;existait que peu de publications dans ce domaine. Par contre, quel dommage que nous ne disposions pas de plus de données sur la future Timeline de Facebook, sur le nouveau YouTube ou sur la façon dont les utilisateurs lisent les tweets sur l&#8217;écran d&#8217;un smartphone&#8230; Si vous avez des infos, je suis preneur.</p>
<img src="http://feeds.feedburner.com/~r/Simpleweb/~4/dbgAwyv37vk" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.simpleweb.fr/2011/11/30/plusieurs-etudes-doculometrie-sur-les-reseaux-sociaux/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		<feedburner:origLink>http://www.simpleweb.fr/2011/11/30/plusieurs-etudes-doculometrie-sur-les-reseaux-sociaux/</feedburner:origLink></item>
	</channel>
</rss><!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Served from: www.simpleweb.fr @ 2012-05-03 21:00:52 -->

