<?xml version="1.0" encoding="UTF-8"?><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/"
	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/"
	>

<channel>
	<title>Pepito Ergo Sum &#187; ux</title>
	<atom:link href="http://www.nrblog.fr/pepito/tag/ux/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.nrblog.fr/pepito</link>
	<description>Pepito Ergo Sum : le web en boîte le temps d&#039;un Pépito</description>
	<lastBuildDate>Wed, 01 Sep 2021 14:10:39 +0000</lastBuildDate>
	<language>fr-FR</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=4.0.1</generator>
	<item>
		<title>Les tablettes changent la face du web</title>
		<link>http://www.nrblog.fr/pepito/2012/09/18/les-tablettes-changent-la-face-du-web/</link>
		<comments>http://www.nrblog.fr/pepito/2012/09/18/les-tablettes-changent-la-face-du-web/#comments</comments>
		<pubDate>Tue, 18 Sep 2012 13:56:00 +0000</pubDate>
		<dc:creator><![CDATA[Thierry Picard]]></dc:creator>
				<category><![CDATA[Tempête de cerveau]]></category>
		<category><![CDATA[Tendances]]></category>
		<category><![CDATA[ergonomie]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://www.nrblog.fr/pepito/?p=794</guid>
		<description><![CDATA[Les interfaces utilisateurs se nourrissent de &#171;&#160;standards&#160;&#187;, de bonnes pratiques, de créativité, de parti-pris ergonomiques, de convictions, etc. de toute une série de critères qui forment in-fine un &#171;&#160;style&#160;&#187; ancré dans son époque. Ces styles s&#8217;imposent d&#8217;eux mêmes de par &#8230; <a href="http://www.nrblog.fr/pepito/2012/09/18/les-tablettes-changent-la-face-du-web/">Lire la suite <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<dl id="">
<dt><img class="alignleft colorbox-794" title="UX" src="http://www.chrislabrooy.com/project/UX_design_dot_net/UX_Final_high_950px2.jpg" alt="UX" width="342" height="250" /></dt>
</dl>
<p>Les interfaces utilisateurs se nourrissent de &laquo;&nbsp;standards&nbsp;&raquo;, de bonnes pratiques, de créativité, de parti-pris ergonomiques, de convictions, etc. de toute une série de critères qui forment in-fine un &laquo;&nbsp;style&nbsp;&raquo; ancré dans son époque.</p>
<p>Ces styles s&rsquo;imposent d&rsquo;eux mêmes de par leur praticité ergonomique ou sont imposés par des sites référents.</p>
<p>Un style peut s&rsquo;imposer pour quelques mois aux sites internet qui sont créés ou refondus. C&rsquo;est ainsi que voyant apparaitre tel module sur un site internet, l&rsquo;ensemble des sites du même secteur l&rsquo;applique en quelques mois. Que ce soit la navigation par fil d&rsquo;Ariane &laquo;&nbsp;dynamique&nbsp;&raquo; inspirée par le Guardian à divers sites de la presse française dont le Monde, les menus &laquo;&nbsp;riches&nbsp;&raquo; ou &laquo;&nbsp;étendus&nbsp;&raquo; présents sur divers sites comme celui de Slate ou de Darty ou le coverflow largement utilisé sur les sites media, inspirés par Apple. Par le passé on se souvient aussi de la vague des tag clouds, des fils d&rsquo;ariane, des roll overs, etc. mais aujourd&rsquo;hui un nouveau composant semble changer la donne.</p>
<p><span id="more-794"></span></p>
<p>&nbsp;</p>
<p>Rarement un terminal a influencé la création ou l&rsquo;ergonomie autant que les tablettes aujourd&rsquo;hui. Cette influence n&rsquo;est pas naïve puisque ce terminal ouvre l&rsquo;internet à de nouvelles pratiques &#8211; [le second screen] nous en parlions <a href="http://www.nrblog.fr/pepito/2012/04/26/le-second-screen-la-social-tv-le-marche-explose/" target="_blank">ici</a> &#8211; ou de nouveaux modes de consommation &#8211; [le couchcommerce] nous l&rsquo;évoquions <a href="http://www.nrblog.fr/pepito/2012/07/10/le-couch-commerce/" target="_blank">là</a> -.</p>
<p>Selon le cabinet le cabinet <a href="http://www.isuppli.com/Display-Materials-and-Systems/News/Pages/Global-Tablet-Display-Shipments-to-Soar-by-56-Percent-in-2012.aspx" target="_blank">IHS</a> près de 130 millions de tablettes se seraient écoulées avec une écrasante domination de l&rsquo;ipad &#8211; environ 60% de part de marché -. Le segment des grands écrans &#8211; autour de 9 pouces &#8211; étant le plus développé c&rsquo;est aussi celui qui a eu le plus mauvais taux de pénétration ces six derniers mois. En effet, le nombre de tablettes avec un écran de 7 pouces a cru plus vite au premier semestre 2012 que celui de ses grandes soeurs.</p>
<p>Les tablettes influencent actuellement l&rsquo;ergonomie des sites internet. Deux sites récemment refondus illustrent cette tendance.</p>
<p>Celui de <a href="http://beta.usatoday.com/" target="_blank">USA today</a> en version bêta (via @benoitraphael).</p>
<p><a href="http://www.nrblog.fr/pepito/files/usa_today1.png" rel="lightbox[794]" title="usa_today"><img class="aligncenter size-large wp-image-785 colorbox-794" title="usa_today" src="http://www.nrblog.fr/pepito/files/usa_today1-1024x576.png" alt="" width="610" height="343" /></a></p>
<p>Ou celui de <a title="V2" href="http://cinemur.fr/" target="_blank">Cinemur</a></p>
<p><a href="http://www.nrblog.fr/pepito/files/cinemur.png" rel="lightbox[794]" title="cinemur"><img class="aligncenter size-large wp-image-786 colorbox-794" title="cinemur" src="http://www.nrblog.fr/pepito/files/cinemur-1024x576.png" alt="" width="610" height="343" /></a></p>
<p><strong>Quels sont ces codes ?</strong></p>
<ol>
<li>Une surface utile &laquo;&nbsp;plus large&nbsp;&raquo; adaptée au tablettes en mode paysage voire au format 16/9. Pour information les résolutions des écrans de mobiles et de tablettes dans un tableau très utile trouvé sur le site blocnotes.iergo.fr :<br />
<table width="500">
<tbody>
<tr>
<th scope="col" width="200">Modéle</th>
<th scope="col">Définition (pixels)</th>
<th scope="col">Taille de l’écran (pouce)</th>
<th scope="col">Résolution (ppp)</th>
</tr>
<tr>
<td>iPhone 3GS</td>
<td>320×480</td>
<td>3,5</td>
<td>164</td>
</tr>
<tr>
<td>HTC Hero</td>
<td>320×480</td>
<td>3,2</td>
<td>180</td>
</tr>
<tr>
<td>Nokia N900</td>
<td>800×480</td>
<td>3,5</td>
<td>266</td>
</tr>
<tr>
<td>iPhone 4s</td>
<td>960×640</td>
<td>3,5</td>
<td>326</td>
</tr>
<tr>
<td>Galaxy Notes</td>
<td>1280×800</td>
<td>5,3</td>
<td>285</td>
</tr>
<tr>
<td>iPad 2</td>
<td>1024×768</td>
<td>9,7</td>
<td>132</td>
</tr>
<tr>
<td>Galaxy Tab 10,1</td>
<td>1280×800</td>
<td>10,1</td>
<td>150</td>
</tr>
<tr>
<td>Playbook</td>
<td>1024×600</td>
<td>7</td>
<td>170</td>
</tr>
<tr>
<td>Galaxy Tab 8,9</td>
<td>1280×800</td>
<td>8,9</td>
<td>170</td>
</tr>
<tr>
<td>iPad 3</td>
<td>2048×1536</td>
<td>9,7</td>
<td>264</td>
</tr>
<tr>
<td>Macbook Air</td>
<td>1440×900</td>
<td>13,3</td>
<td>128</td>
</tr>
<tr>
<td>iMac</td>
<td>2560×1440</td>
<td>27</td>
<td>109</td>
</tr>
<tr>
<td>Macbook pro Retina</td>
<td>2880×1800</td>
<td>15,4</td>
<td>220</td>
</tr>
</tbody>
</table>
</li>
<li>Une ligne de &laquo;&nbsp;flottaison&nbsp;&raquo; &#8211; correspondant à la hauteur disponible de la première zone écran sans scroll vertical &#8211; plus haute :
<div style="width: 499px" class="wp-caption aligncenter"><img class="colorbox-794"  title="Taille écran" src="http://www.ergonomie-interface.com/wp-content/uploads/2012/05/responsive-tailles-ecrans.png" alt="Taille écran" width="489" height="244" /><p class="wp-caption-text">Taille écran source : ergonomie-interface.com</p></div>
<p>&nbsp;</li>
<li>Un scroll vertical &laquo;&nbsp;système&nbsp;&raquo; (ndr : traditionnel) et des boutons de navigation horizontaux pour simuler un scroll horizontal à la façon d&rsquo;un écran tactile;</li>
<li>Une mise en scène de l&rsquo;information plus graphique avec des murs d&rsquo;images;</li>
<li>Des menus de navigation plus &laquo;&nbsp;accessibles&nbsp;&raquo; avec la disparition des javascript ou la mise en oeuvre de code alternatif pour les terminaux n&rsquo;interprétant pas les javascript;</li>
<li>Des css V3 et du html 5 adaptés au multitouch;</li>
<li>Des pages de contenu plus courtes plus aérées;</li>
<li>Des media photo et vidéo de meilleure définition;</li>
<li>Moins voire plus de flash;</li>
<li>Des fonctionnalités permettant de maitriser les critères d&rsquo;affichage (nombre d&rsquo;occurrences, liste ou mosaïque pour les plus fréquentes).</li>
</ol>
<p><strong>Quel$$$ effet$$$ pour ces sites ?</strong></p>
<p>Des interfaces plus &laquo;&nbsp;légères&nbsp;&raquo;, plus accessibles/usability donc un meilleur référencement naturel. Un taux de rebond sur la home plus faible car des temps de chargement plus faible. Un nombre de pages vues par visite plus élevé&#8230; je suis certain que nous sommes au début de cette tendance de fond dans la conception des interfaces.</p>
<p>Je salue au passage <a href="http://fr.linkedin.com/pub/christophe-gonzalez/8/261/973" target="_blank">Christophe Gonzalez</a> qui a m&rsquo;a sensibilisé le premier à cette tendance voila plusieurs mois, presque un an.</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.nrblog.fr/pepito/2012/09/18/les-tablettes-changent-la-face-du-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
