<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/rss2full.xsl" type="text/xsl" media="screen"?><?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/itemcontent.css" type="text/css" media="screen"?><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:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>interface/interaction</title>
	
	<link>http://www.interfaceinteraction.com</link>
	<description>Réflexions sur le design d'interface</description>
	<pubDate>Thu, 11 Sep 2008 13:56:27 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.5.1</generator>
	<language>en</language>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://feeds.feedburner.com/Interface/interaction" type="application/rss+xml" /><item>
		<title>De l’hypertexte à l’hypervidéo, nouveau paradigme et nouvelles métaphores</title>
		<link>http://feeds.feedburner.com/~r/Interface/interaction/~3/389677111/</link>
		<comments>http://www.interfaceinteraction.com/interactions/de-lhypertexte-a-lhypervideo-nouveau-paradigme-et-nouvelles-metaphores/#comments</comments>
		<pubDate>Thu, 11 Sep 2008 13:56:27 +0000</pubDate>
		<dc:creator>Benoît Drouillat</dc:creator>
		
		<category><![CDATA[Interfaces web]]></category>

		<guid isPermaLink="false">http://www.interfaceinteraction.com/?p=133</guid>
		<description><![CDATA[Le concept de vidéo interactive, ou hypervidéo, inventé en 1988 au MIT Media Lab, n&#8217;est pas fondamentalement nouveau, mais rares sont ses applications réussies ou visibles. Plusieurs campagnes publicitaires interactives l&#8217;ont exploité en 2005, notamment General Motors. En 2006, &#8221;The Economist&#8221; s&#8217;en fait l&#8217;écho. Depuis, plus grand chose. Il y a quelques mois, le clip [...]]]></description>
			<content:encoded><![CDATA[<p>Le concept de vidéo interactive, ou <a hreflang="en" href="http://en.wikipedia.org/wiki/Hypervideo">hypervidéo</a>, inventé en 1988 au MIT Media Lab, n&#8217;est pas fondamentalement nouveau, mais rares sont ses applications réussies ou visibles. Plusieurs campagnes publicitaires interactives l&#8217;ont exploité en 2005, notamment <a hreflang="fr" href="http://advisor.fjordinteractif.net/press_fr.html">General Motors</a>. En 2006, <a hreflang="en" href="http://www.economist.com/science/tq/displayStory.cfm?story_id=7904166">&#8221;The Economist&#8221;</a> s&#8217;en fait l&#8217;écho. Depuis, plus grand chose. Il y a quelques mois, le <a hreflang="en" href="http://www.beonlineb.com/click_around.html">clip Neon Bible</a> des canadiens d&#8217;Arcade Fire a beaucoup impressionné. Il s&#8217;agit d&#8217;une vidéo en noir et blanc dans laquelle l&#8217;internaute est gestuellement impliqué, guidé dans l&#8217;interaction. L&#8217;auteur de ce clip est <a hreflang="en" href="http://www.vincentmorisset.com/">Vincent Morisset</a>. L&#8217;hypervidéo tendance en 2009 ?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.interfaceinteraction.com/interactions/de-lhypertexte-a-lhypervideo-nouveau-paradigme-et-nouvelles-metaphores/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.interfaceinteraction.com/interactions/de-lhypertexte-a-lhypervideo-nouveau-paradigme-et-nouvelles-metaphores/</feedburner:origLink></item>
		<item>
		<title>Aurora, une vision prospective du Web</title>
		<link>http://feeds.feedburner.com/~r/Interface/interaction/~3/359407278/</link>
		<comments>http://www.interfaceinteraction.com/interfaces-innovantes/aurora-une-vision-prospective-du-web/#comments</comments>
		<pubDate>Fri, 08 Aug 2008 12:47:11 +0000</pubDate>
		<dc:creator>Benoît Drouillat</dc:creator>
		
		<category><![CDATA[Interfaces innovantes]]></category>

		<guid isPermaLink="false">http://www.interfaceinteraction.com/?p=154</guid>
		<description><![CDATA[L&#8217;agence Adaptive Path, sous l&#8217;impulsion de son lead designer Jesse James Garrett, a travaillé en partenariat avec Mozilla Labs sur une vision prospective du web, Aurora, transcrite par une série de vidéos relatant des expériences autour du navigateur et des usages innovants dans leur contexte. Elle s&#8217;articule autour de 4 thèmes principaux :

la capacité du [...]]]></description>
			<content:encoded><![CDATA[<p>L&#8217;agence <a href="http://www.adaptivepath.com">Adaptive Path</a>, sous l&#8217;impulsion de son <em>lead designer</em> Jesse James Garrett, a travaillé en partenariat avec <a href="http://labs.mozilla.com/">Mozilla Labs</a> sur une vision prospective du web, <a href="http://www.adaptivepath.com/aurora/">Aurora</a>, transcrite par une série de vidéos relatant des expériences autour du navigateur et des usages innovants dans leur contexte. Elle s&#8217;articule autour de 4 thèmes principaux :</p>
<ul>
<li>la capacité du navigateur enrichir l&#8217;expérience utilisateur grâce à sa prise en compte du <strong>contexte d&#8217;usage</strong>,</li>
<li><strong>l&#8217;interaction naturelle</strong> : la plupart des interactions que nous établissons avec la technologies induisent un niveau d&#8217;abstraction élevé. Les idiomes d&#8217;interface (fenêtres, barres d&#8217;outils, menus etc.) n&#8217;ont pas de correspondance dans le monde physique et requièrent un apprentissage considérable pour l&#8217;acquisition d&#8217;un usage courant.</li>
<li><strong>La continuité de l&#8217;expérience de navigation</strong> : l&#8217;idée est de développer un modèle d&#8217;interaction cohérent à travers tous les terminaux existant (web, mobile, bureau etc.).</li>
<li><strong>Des applications multi-utilisateurs</strong> : le navigation est historiquement une application uni-utilisateur. Alors que les usages collaboratifs se développent (wiki, navigation sociale, partage d&#8217;information, mash-ups etc.), il faut réinventer un navigateur capaple de soutenir une véritable plateforme de collaboration multi-utilisateurs</li>
</ul>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="225" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.vimeo.com/moogaloop.swf?clip_id=1450211&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="400" height="225" src="http://www.vimeo.com/moogaloop.swf?clip_id=1450211&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object><br />
<a href="http://www.vimeo.com/1450211?pg=embed&amp;sec=1450211">Aurora (Part 1)</a> from <a href="http://www.vimeo.com/user524591?pg=embed&amp;sec=1450211">Adaptive Path</a> on <a href="http://vimeo.com?pg=embed&amp;sec=1450211">Vimeo</a>.</p>
<p>Cette première vidéo montre l&#8217;interface du site web du <em>New York Times</em> telle qu&#8217;elle pourrait être en 2018 (<a href="http://www.andyrutledge.com/times-new-omen.php#">Voir le détail de l&#8217;interface</a> et plus d&#8217;explication&#8230;). On perçoit dans cette session multi-utilisateur, un menu radial et des objets manipulables, des widgets dans lesquels évoluent les avatars flottants d&#8217;utilisateurs en conversation, l&#8217;interface d&#8217;un bureau doté d&#8217;un dock-carrousel surprenant, des nuages 3D de pages web, des Head-Up Displays et enfin la transition du navigateur vers un terminal mobile.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="225" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.vimeo.com/moogaloop.swf?clip_id=1476338&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="400" height="225" src="http://www.vimeo.com/moogaloop.swf?clip_id=1476338&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object><br />
<a href="http://www.vimeo.com/1476338?pg=embed&amp;sec=1476338">Aurora (Part 2)</a> from <a href="http://www.vimeo.com/user524591?pg=embed&amp;sec=1476338">Adaptive Path</a> on <a href="http://vimeo.com?pg=embed&amp;sec=1476338">Vimeo</a>.</p>
<p>Dans cette 2ème vidéo, consacrée à une interface mobile du futur, on assiste à un scénario d&#8217;usage avec un navigateur mobile. L&#8217;interface illustrée est tactile et permet la manipulation directe d&#8217;informations. Il s&#8217;agit d&#8217;une vision miniaturisée de l&#8217;interface du bureau vue dans la 1ère vidéo.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="225" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.vimeo.com/moogaloop.swf?clip_id=1481810&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="400" height="225" src="http://www.vimeo.com/moogaloop.swf?clip_id=1481810&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object><br />
<a href="http://www.vimeo.com/1481810?pg=embed&amp;sec=1481810">Aurora (Part 3)</a> from <a href="http://www.vimeo.com/user524591?pg=embed&amp;sec=1481810">Adaptive Path</a> on <a href="http://vimeo.com?pg=embed&amp;sec=1481810">Vimeo</a>.</p>
<p>Dans la 3ème vidéo, il s&#8217;agit d&#8217;intégrer le web avec l&#8217;environnement physique. Le scénario d&#8217;usage proposé permet à deux personnes réalisant l&#8217;achat d&#8217;un cadeau d&#8217;anniversaire de partager des informations de leur environnement physique avec le web. Elles se connectent également avec d&#8217;autres utilisateurs.</p>
<p>Deux des thèmes cités semblent entrer en contradiction avec les modèles actuellement admis, et cela soulève des problématiques intéressantes. <strong>L&#8217;interaction naturelle</strong>, qui voudrait que les éléments d&#8217;interface soient des transpositions du monde réel à travers des métaphores, est à l&#8217;encontre du modèle proposé par Alan Cooper, dans son ouvrage <em>About Face</em>. Ce dernier défend en effet une position dans laquelle les idiomes jouent un rôle central au détriment des métaphores :</p>
<p>&#8221; Mechanical-Age processes and representations tend to degrade user interactions in Information-Age products.&#8221; (<em>About Face</em>, p37)</p>
<p>Plus loin, au chapitre 13 de l&#8217;ouvrage :</p>
<p>&#8220;We find this very literal approach to be limiting and potentially problematic. Strict adherence to metaphors ties interfaces unnecessarily to the workings of the physical world. [...] (metaphors) don&#8217;t scale well [...]&#8221; (p269)</p>
<p>La seconde problématique est celle de la continuité des principes d&#8217;interaction à travers les terminaux. Barbara Ballard soutient dans son ouvrage sur les interfaces mobiles une thèse opposée à celle de Garrett, <em>Designing the Mobile User Experience</em> :</p>
<p>&#8220;First and foremost, simply transferring a full-sized computer application to the mobile environment almost always results in suboptimal mobile experience. Attempting to construct an application that works the same on both platforms will reduce its quality in both places. [...] Desktop users are primarily interacting with the computer; mobile user may primarily be interacting with the world, both through a mobile device and in person.&#8221; (p70-71)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.interfaceinteraction.com/interfaces-innovantes/aurora-une-vision-prospective-du-web/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.interfaceinteraction.com/interfaces-innovantes/aurora-une-vision-prospective-du-web/</feedburner:origLink></item>
		<item>
		<title>Interfaces et publicité interactive</title>
		<link>http://feeds.feedburner.com/~r/Interface/interaction/~3/358390204/</link>
		<comments>http://www.interfaceinteraction.com/interactions/interfaces-et-publicite-interactive/#comments</comments>
		<pubDate>Thu, 07 Aug 2008 12:57:44 +0000</pubDate>
		<dc:creator>Benoît Drouillat</dc:creator>
		
		<category><![CDATA[Interfaces web]]></category>

		<guid isPermaLink="false">http://www.interfaceinteraction.com/?p=81</guid>
		<description><![CDATA[La publicité interactive est souvent attaquée tant pour son intrusivité que pour son manque d&#8217;innovation sur les formats. L&#8217;ère de la bannière 468*60 est terminée depuis longtemps, mais elle a installé un complexe dans l&#8217;industrie qui commence tout juste à se résorber. Le phénomène de banner invisibility a aussi contribué à la mauvaise image de [...]]]></description>
			<content:encoded><![CDATA[<p>La publicité interactive est souvent attaquée tant pour son <em>intrusivité </em>que pour son manque d&#8217;innovation sur les formats. L&#8217;ère de la bannière 468*60 est terminée depuis longtemps, mais elle a installé un complexe dans l&#8217;industrie qui commence tout juste à se résorber. Le phénomène de <a href="http://www.poynterextra.org/EYETRACK2004/advertising.htm"><em>banner invisibility</em></a> a aussi contribué à la mauvaise image de la publicité en ligne. Pourtant, en Europe et de l&#8217;autre côté de l&#8217;Atlantique ont éclos ces derniers mois des campagnes dans lesquelles des propositions d&#8217;interfaces témoignent d&#8217;un renouveau intéressant.</p>
<p><strong>Tendance n°1 : les campagnes qui jouent avec le support formel de l&#8217;interface</strong></p>
<p>J&#8217;ai cité beaucoup de ces exemples dans le livre blanc sur la publicité interactive que j&#8217;ai rédigé entre 2007 et 2008 comme la campagne <a href="http://thegoodfoodfight.com/">The Food Fight</a>. Le site <a href="http://creativezone.eyeblaster.com">Eyeblaster Creative</a> regorge d&#8217;exemples de ces campagnes qui prennent le pas, plus ou moins intrusivement, sur le site support pour &#8220;sortir&#8221; littéralement de leur format, avec le recours au flash transparent. Ce genre est, comme on le voit à la prolifération d&#8217;exemples, parfaitement codifié.</p>
<ul>
<li><a href="http://creativezone.eyeblaster.com/?ItemId=4111">Campagne Colorado</a>. Cette campagne est l&#8217;exemple canonique d&#8217;une bannière dont le contenu est poussé hors des limites du format.</li>
</ul>
<p><a href="http://creativezone.eyeblaster.com/?ItemId=4111"><img class="alignnone size-medium wp-image-149" title="colorado" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/colorado.jpg" alt="" width="500" height="335" /></a></p>
<ul>
<li><a href="http://www.bannerblog.com.au/2008/08/tac_road.php">Campagne pour la sécurité routière</a> (Expand banner, Australie), via BannerBlog. La révélation s&#8217;effectue par le survol avec la souris.</li>
</ul>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/securite-routiere1.jpg"><img class="alignnone size-medium wp-image-150" title="securite-routiere1" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/securite-routiere1.jpg" alt="" width="500" height="62" /></a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/securite-routiere2.jpg"><img class="alignnone size-medium wp-image-151" title="securite-routiere2" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/securite-routiere2.jpg" alt="" width="500" height="196" /></a></p>
<ul>
<li>Campagne <a href="http://www.bannerblog.com.au/2008/07/ea_bad_company_jacuzzi.php">Electronic Art</a>, via BannerBlog. L&#8217;intérêt de cette campagne est le dialogue qui se joue entre les trois différents formats de bannière. En liant les formats par une scénarisation astucieuse, les concepteurs de la campagne posent une mise en scène humoristique du produit (un jeu vidéo).</li>
</ul>
<p><a href="http://www.bannerblog.com.au/2008/07/ea_bad_company_jacuzzi.php"><img class="alignnone size-medium wp-image-153" title="Campagne Electronic Art" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/ea1.jpg" alt="Campagne Electronic Art" width="500" height="408" /></a></p>
<p><a href="http://www.bannerblog.com.au/2008/07/ea_bad_company_jacuzzi.php"><img class="alignnone size-medium wp-image-152" title="Campagne Electronic Art" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/ea2.jpg" alt="Campagne Electronic Art" width="500" height="406" /></a></p>
<p><strong>Tendance n°2 : la widgetisation des bannières</strong></p>
<p>Les bannières ressemblent de plus en plus à des interfaces permettant de développer un parcours de navigation plus ou moins complexe, plus ou moins adapté à leur format et aux usages. Cette étape représente une évolution et le pendant (souvent) utilitaire de l&#8217;implication gestuelle de l&#8217;internaute.</p>
<p>Directement dans la lignée de la &#8220;publicité bookmarkable&#8221; (<a href="http://adverlab.blogspot.com/2008/05/bookmarkable-advertising.html">bookmarkable advertising</a>), la <a href="http://creativezone.eyeblaster.com/#ItemName=NIKE%20widget">campagne Nike Football</a> par AKQA UK, offre un accès direct aux plateformes sociales où est présente la marque (3ème écran). Ici on trouve un dispositif de navigation à l&#8217;intérieur de la bannière, pour accéder à une liste de vidéo.</p>
<p><a href="http://creativezone.eyeblaster.com/#ItemName=NIKE%20widget"><img class="alignnone size-medium wp-image-141" title="Nike Widget" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/image-22.png" alt="Nike Widget" width="300" height="251" /></a></p>
<p><a href="http://creativezone.eyeblaster.com/#ItemName=NIKE%20widget"><img class="alignnone size-medium wp-image-142" title="Campagne Nike Football, liste des vidéos" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/image-23.png" alt="Campagne Nike Football, liste des vidéos" width="298" height="249" /></a></p>
<p><a href="http://creativezone.eyeblaster.com/#ItemName=NIKE%20widget"><img class="alignnone size-medium wp-image-143" title="Campagne Nike Football, partage \" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/image-24.png" alt="Campagne Nike Football, partage \" width="300" height="250" /></a></p>
<p>Adlab a cité un exemple de concept de bannière utilisant de manière standardisée ces outils sociaux, <a href="http://ads.spongecell.com/">Spongecellads</a>, dans une perspective davantage utilitaire. Par exemple, pour une bannière faisant la promotion d&#8217;un événement, son interface propose un boutton &#8220;Ajouter au calendrier&#8221;, et trois fonctionnalités virales pour Facebook, l&#8217;envoi à un ami, et une alerte e-mail.</p>
<p><a href="http://ads.spongecell.com/"><img class="alignnone size-medium wp-image-144" title="Spongecelladd" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/image-25.png" alt="Spongecelladd" width="303" height="252" /></a></p>
<p>Autre exemple, les bannières d&#8217;Adpinion, qui permettent à l&#8217;internaute de donner un feedback positif ou négatif aux publicités dotées du dispositif (sur la gauche de la bannière) ; le fonctionnement est proche d&#8217;un moteur de recommandation.</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/image-26.png"><img class="alignnone size-medium wp-image-145" title="Dispositif de vote Adpinion" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/image-26.png" alt="Dispositif de vote Adpinion" width="747" height="91" /></a></p>
<p>Un autre exemple de publicité en ligne dotée d&#8217;une interface que j&#8217;aime souvent citer est celle de <a href="http://advisor.fjordinteractif.net/press_fr.html">General Motors</a>. Elle propose un réseau de choix narratifs auxquels l&#8217;internaute accède via un système de navigation intégré dans la vidéo. Il s&#8217;agit d&#8217;une application intéressante du concept d&#8217;hypervidéo. Cette fois, on entre davantage dans une conception &#8220;goal directed&#8221; où se joue l&#8217;implication.</p>
<p><a href="http://advisor.fjordinteractif.net/press_en.html"><img class="alignnone size-medium wp-image-146" title="Campagne General Motors" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/gm_3.jpg" alt="Campagne General Motors" width="500" height="299" /></a></p>
<p>Avec une interface plus sophistiquée, la <a href="http://creativezone.eyeblaster.com/#ItemName=TouchSmart%20HP">campagne Touch Smart HP</a> pousse à la fois les limites de la représentation de la navigation (en 3D, réalisée avec Paper Vision) et le jeu du support formel avec le site support.</p>
<p><a href="http://creativezone.eyeblaster.com/#ItemName=TouchSmart%20HP"><img class="alignnone size-medium wp-image-147" title="Campagne HP Smart Touch" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/hpsmart-touch1.jpg" alt="Campagne HP Smart Touch" width="500" height="278" /></a></p>
<p><a href="http://creativezone.eyeblaster.com/#ItemName=TouchSmart%20HP"><img class="alignnone size-medium wp-image-148" title="Campagne HP Smart Touch" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/hpsmart-touch2.jpg" alt="Campagne HP Smart Touch" width="500" height="356" /></a></p>
<p>Ces quelques exemples témoignent du chemin effectué par la publicité interactive qui s&#8217;approprie de nouveaux usages (sociaux) et dont l&#8217;innovation semble liée à la réinvention du format et des styles d&#8217;interaction plus riches (participation gestuelle, expériences de navigation empruntées aux sites, logiques narratives).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.interfaceinteraction.com/interactions/interfaces-et-publicite-interactive/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.interfaceinteraction.com/interactions/interfaces-et-publicite-interactive/</feedburner:origLink></item>
		<item>
		<title>Interfaces de formule 1</title>
		<link>http://feeds.feedburner.com/~r/Interface/interaction/~3/356719886/</link>
		<comments>http://www.interfaceinteraction.com/interfaces-mobiles/interfaces-de-formule-1/#comments</comments>
		<pubDate>Tue, 05 Aug 2008 20:33:52 +0000</pubDate>
		<dc:creator>Benoît Drouillat</dc:creator>
		
		<category><![CDATA[Interfaces mobiles]]></category>

		<guid isPermaLink="false">http://www.interfaceinteraction.com/?p=138</guid>
		<description><![CDATA[Oobject a publié un surprenant benchmark des interfaces des véhicules de formule 1. Il souligne l&#8217;importance des contraintes dans ce contexte si codifié et particulier et rappelle que jusqu&#8217;en 1992, les volants des F1 ne disposaient que de 3 boutons (neutre, ravitaillement en eau, et radio).  Cette évolution vers la complexité de l&#8217;interface (jusqu&#8217;à [...]]]></description>
			<content:encoded><![CDATA[<p>Oobject a publié <a href="http://oobject.com/category/formula-1-user-interfaces">un surprenant benchmark des interfaces des véhicules de formule 1</a>. Il souligne l&#8217;importance des contraintes dans ce contexte si codifié et particulier et rappelle que jusqu&#8217;en 1992, les volants des F1 ne disposaient que de 3 boutons (neutre, ravitaillement en eau, et radio).  Cette évolution vers la complexité de l&#8217;interface (jusqu&#8217;à une vingtaine de boutons émaillent désormais le centre du volant), grâce à l&#8217;avènement des contrôles électroniques, si standardisée soit-elle, n&#8217;est pas sans poser souci. Ainsi, Lewis Hamilton aurait perdu un grand prix en 2007 à cause d&#8217;une erreur de manipulation sur l&#8217;interface de son volant, pressant le bouton &#8220;neutre&#8221;. Une telle interface offre peu d&#8217;éléments de repérages (couleurs, hiérarchie visuelle), le seul indicateur vraiment explicite étant la position des boutons. D&#8217;une certaine manière, les interfaces de F1 sont plus proches de l&#8217;usage et de l&#8217;ergonomie d&#8217;une interface mobile (car le volant est tenu par les deux mains) que du pilotage d&#8217;un avion, même si leur style d&#8217;interface comporte certaines similitudes. Un exemple  intéressant d&#8217;ingénierie d&#8217;interface, où le design semble être le chaînon manquant entre la technologie et l&#8217;utilisateur final.</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/formule1-interface.jpg"><img class="alignnone size-full wp-image-139" title="Interfaces de formules 1" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/08/formule1-interface.jpg" alt="Interfaces de formules 1" width="500" height="570" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.interfaceinteraction.com/interfaces-mobiles/interfaces-de-formule-1/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.interfaceinteraction.com/interfaces-mobiles/interfaces-de-formule-1/</feedburner:origLink></item>
		<item>
		<title>Le futur des interfaces vu par Microsoft 3/4 (Looking Forward)</title>
		<link>http://feeds.feedburner.com/~r/Interface/interaction/~3/356167158/</link>
		<comments>http://www.interfaceinteraction.com/interfaces-innovantes/le-futur-des-interfaces-vu-par-microsoft-34-looking-forward/#comments</comments>
		<pubDate>Tue, 05 Aug 2008 08:47:42 +0000</pubDate>
		<dc:creator>Benoît Drouillat</dc:creator>
		
		<category><![CDATA[Interfaces innovantes]]></category>

		<guid isPermaLink="false">http://www.interfaceinteraction.com/?p=136</guid>
		<description><![CDATA[Tout en s&#8217;appuyant sur les valeurs humaines, le design d&#8217;interface va devoir dans le futur établir des partenariats avec d&#8217;autres disciplines. Parallèlement, les notions d&#8217;utilisateur, d&#8217;ordinateur et d&#8217;interaction deviendront insuffisantes pour rendre compte des problématiques soulevées par les interfaces futures.
Jusqu&#8217;à présent le design d&#8217;interface consistait essentiellement à en faciliter l&#8217;usage. D&#8217;ici à 2020, l&#8217;omniprésence de [...]]]></description>
			<content:encoded><![CDATA[<p>Tout en s&#8217;appuyant sur les valeurs humaines, le design d&#8217;interface va devoir dans le futur établir des partenariats avec d&#8217;autres disciplines. Parallèlement, les notions d&#8217;utilisateur, d&#8217;ordinateur et d&#8217;interaction deviendront insuffisantes pour rendre compte des problématiques soulevées par les interfaces futures.</p>
<p>Jusqu&#8217;à présent le design d&#8217;interface consistait essentiellement à en faciliter l&#8217;usage. D&#8217;ici à 2020, l&#8217;omniprésence de la technologie changera radicalement notre rapport et notre usage des ordinateurs, avec des questionnements éthiques à résoudre devant les possibilités de contrôle et d&#8217;observation qu&#8217;ils offriront. Cela au-delà de la compréhension de leur capacité technique. Un état d&#8217;esprit différent nous sera demandé pour mesurer les conséquences de nos choix de design. Par exemple, un terminal mobile qui permettra la localisation de ses utilisateurs dans l&#8217;espace posera la question de ce qu&#8217;il faut rendre visible ou cacher dans l&#8217;interface, de ce qu&#8217;il sera acceptable de dévoiler. Comment les enjeux sociétaux et éthiques peuvent-ils être résolus à travers le design d&#8217;interaction ? La première piste est d&#8217;étendre systématiquement le design et la recherche utilisateur en y incluant ces problématiques. La deuxième piste est de développer une collaboration avec d&#8217;autres disciplines ayant l&#8217;habitude de traiter des enjeux éthiques et sociétaux. Enfin, la troisième piste est de rédéfinir les concepts fondamentaux de l&#8217;interaction homme-machine, afin de mieux rendre compte de l&#8217;évolution de la discipline, de recherche de nouvelles métaphores et de nouveaux concepts plus à même de rendre compte des transformations émergentes. La discipline doit être en mesure d&#8217;apporter de nouvelles réponses aux souhaits, aux besoins et aux intérêts humains à travers la technologie, cela aux niveaux individuel, social, culturel, et éthique.</p>
<p>La technologie modifie nos systèmes de valeurs, en nous offrant de nouvelles formes de contrôle et d&#8217;interaction sociale. Le téléphone mobile peut ainsi être vu comme un encouragement à l&#8217;addiction du contact social. Les technologies ne sont pas neutres et dans un monde multi-culturel les usages peuvent susciter des conflits entre les systèmes de valeurs.</p>
<p>La conception centrée utilisateur est un cycle itératif composé de 4 étapes : étude, design, développement, et évaluation. Le rapport suggère d&#8217;ajouter une nouvelle étape initiale à ce cycle, &#8220;comprendre&#8221;, qui permettra de rendre plus explicite la phase d&#8217;exploration des valeurs, et d&#8217;engager un dialogue avec des professionnels d&#8217;autres disciplines. Elle appelle ainsi dans son processus des disciplines comme la philosophie, la psychologie, la sociologie, l&#8217;anthropologie&#8230;</p>
<p>Le rapport détaille 3 études de cas dans lesquelles les enjeux éthiques et les valeurs humaines sont mis en lumière :  mise au point de contenus mobiles,  d&#8217;un système de tracking/de surveillance pour une famille, et enfin une technologie pour &#8220;augmenter&#8221; la mémoire humaine. Chacune des études de cas était montrée à la fois sous son prisme positif et négatif.</p>
<p>Dans un monde où les mouvements et les échanges de données peuvent être suivis, et dans lequel les gens peuvent déclencher des interactions à leur insu, comme se trouver à un certain endroit à un certain moment, la notion d&#8217;interaction elle-même est transformée. Si les formes d&#8217;interaction délibérées vont persister, d&#8217;autres formes vont donner naissance à de nouveaux types d&#8217;implication et de nouvelles relations sociales. De nouveaux concepts et de nouvelles théories devront les encadrer. Les notions d&#8217;utilisateur et de designer vont devenir difficiles à distinguer dans l&#8217;avenir. Ces nouvelles relations - entre les ordinateurs et les utilisateurs - soulèvent des questions de processus, de potentiel, et d&#8217;évolution plutôt que de caractéristiques.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.interfaceinteraction.com/interfaces-innovantes/le-futur-des-interfaces-vu-par-microsoft-34-looking-forward/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.interfaceinteraction.com/interfaces-innovantes/le-futur-des-interfaces-vu-par-microsoft-34-looking-forward/</feedburner:origLink></item>
		<item>
		<title>Interfaces d’interrupteurs et capacités domotiques</title>
		<link>http://feeds.feedburner.com/~r/Interface/interaction/~3/338044606/</link>
		<comments>http://www.interfaceinteraction.com/interactions/interfaces-dinterrupteurs-et-capacites-domotiques/#comments</comments>
		<pubDate>Thu, 17 Jul 2008 13:17:38 +0000</pubDate>
		<dc:creator>Benoît Drouillat</dc:creator>
		
		<category><![CDATA[Interfaces web]]></category>

		<guid isPermaLink="false">http://www.interfaceinteraction.com/?p=120</guid>
		<description><![CDATA[La domotique (lat. domus, maison) nécessite des interfaces de commande pour piloter les fonctions automatisées des maisons. En quelques années, les interrupteurs sont passés de simples boutons à des objets de design complexes, dotés d&#8217;une expérience à part entière. Leurs points de contacts sont capables de paramétrer non plus seulement la lumière mais la consommation [...]]]></description>
			<content:encoded><![CDATA[<p>La domotique (lat. <em>domus</em>, maison) nécessite des interfaces de commande pour piloter les fonctions automatisées des maisons. En quelques années, les interrupteurs sont passés de simples boutons à des objets de design complexes, dotés d&#8217;une expérience à part entière. Leurs points de contacts sont capables de paramétrer non plus seulement la lumière mais la consommation d&#8217;énergie et de véritables scénarios d&#8217;usage comme chez Legrand (<a href="http://www.legrand.fr/part/legrand-le-gestionnaire-de-scenarios-cpl-celiane-avec-ecran-tactile_13_1300.html">Le gestionnaire de scénario Céliane</a> dispose d&#8217;une interface tactile). Pour le constructeur, ils offrent &#8220;<span class="TexteBold">un territoire infini de jeux sensoriels&#8221;, une &#8220;nouvelle gestuelle&#8221;</span> et &#8220;<span class="Texte"><span class="Texte">un retour d’information enrichi par des leds et des écrans de supervision&#8221;</span></span>.</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/legrand-celiane2.jpg"><img class="alignnone size-full wp-image-121" title="legrand-celiane2" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/legrand-celiane2.jpg" alt="Interrupteur Legrand de la gamme Céliane" width="500" height="280" /></a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/legrand-celiane.jpg"><img class="alignnone size-full wp-image-122" title="legrand-celiane" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/legrand-celiane.jpg" alt="Interrupteur Legrand de la gamme Céliane" width="500" height="320" /></a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/legrand-gestionnaire-scenario.jpg"><img class="alignnone size-full wp-image-128" title="legrand-gestionnaire-scenario" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/legrand-gestionnaire-scenario.jpg" alt="Le gestionnaire de scénario Céliane de Legrand" width="500" height="360" /></a></p>
<p>D&#8217;autres constructeurs de matériel électronique ont tout comme Legrand intégré la domotique depuis une vingtaine d&#8217;année. D&#8217;autres interfaces d&#8217;interrupteurs domotiques :</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hager-kallysta.jpg"><img class="alignnone size-full wp-image-129" title="hager-kallysta" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hager-kallysta.jpg" alt="Interface de l\'interrupteur Kallysta, de Hager" width="500" height="300" /></a></p>
<p>Voir la page dédié à cet <a href="http://www.hagerpourvous.fr/menu/infos-techniques/materiel-electrique-hager/systeme-domotique-tebis/kallysta-tebis/1024-764.htm">interrupteur domotique Kallysta</a> chez Hager</p>
<p>Ou encore le dispositif <a href="http://www.axolute.it/eng/index.html">Axolute</a> de BTicino, récemment cité dans <a href="http://www.intramuros.fr"><em>Intramuros</em></a><em> </em>et positionné comme un produit de luxe :</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/axolute.jpg"><img class="alignnone size-full wp-image-130" title="axolute" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/axolute.jpg" alt="Axolute Black" width="500" height="390" /></a></p>
<p>Dans sa version écran tactile + icônes, toujours chez BTicino :</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/axolute-2.jpg"><img class="alignnone size-full wp-image-131" title="axolute-2" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/axolute-2.jpg" alt="Interrupteur tactile Axolute" width="430" height="279" /></a></p>
<p>Une autre entreprise française, <a href="http://www.sensitiveobject.fr">Sensitive Object</a>, a développé un panneau de commande doté d&#8217;une interface évolutive, le <a href="http://www.sensitiveobject.fr/-CP60-Panneaux-de-commande-">CP60</a>. Il permet de créer 40 à 60 boutons virtuels et peut être aisément intégré à tout système.</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/cp60-panneaux-de-commande.jpg"><img class="alignnone size-full wp-image-132" title="cp60-panneaux-de-commande" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/cp60-panneaux-de-commande.jpg" alt="CP60, panneau de commande" width="500" height="280" /></a></p>
<p><strong>Bibliographie sélective sur la domotique<br />
</strong></p>
<ul>
<li><em>La Maison Communicante</em>, François-Xavier Jeuland, Editions Eyrolles, 2007</li>
<li><em>Domotique un jeu d&#8217;enfant</em>, coll., Editions Promotelec, 2007</li>
<li><em>Habitat communicant</em>, coll., Editions Promotelec, 2006</li>
<li><em>Designing Smart Homes: The Role of Artificial Intelligence</em>, Juan Carlos Augusto, Chris D. Nugent, Springer, 2006</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.interfaceinteraction.com/interactions/interfaces-dinterrupteurs-et-capacites-domotiques/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.interfaceinteraction.com/interactions/interfaces-dinterrupteurs-et-capacites-domotiques/</feedburner:origLink></item>
		<item>
		<title>Le futur des interfaces vu par Microsoft 2/4 (5 évolutions majeures des interfaces)</title>
		<link>http://feeds.feedburner.com/~r/Interface/interaction/~3/336438434/</link>
		<comments>http://www.interfaceinteraction.com/interfaces-innovantes/le-futur-des-interfaces-vu-par-microsoft-24-5-evolutions-majeures-des-interfaces/#comments</comments>
		<pubDate>Tue, 15 Jul 2008 21:00:35 +0000</pubDate>
		<dc:creator>Benoît Drouillat</dc:creator>
		
		<category><![CDATA[Interfaces innovantes]]></category>

		<guid isPermaLink="false">http://www.interfaceinteraction.com/?p=115</guid>
		<description><![CDATA[La première partie du rapport de Microsoft décrivait plusieurs aspects de notre relation avec les ordinateurs et leur évolution jusqu&#8217;à aujourd&#8217;hui. Cette seconde partie propose 5 évolutions majeures des interfaces jusque 2020.
Le fil directeur de cette seconde partie met en perspective valeurs humaines et rapport à la technologie. Les interfaces se multipliant dans leur nombre [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.interfaceinteraction.com/interfaces-innovantes/le-futur-des-interfaces-vu-par-microsoft-14-le-passe-et-le-present/">La première partie</a> du rapport de Microsoft décrivait plusieurs aspects de notre relation avec les ordinateurs et leur évolution jusqu&#8217;à aujourd&#8217;hui. Cette seconde partie propose 5 évolutions majeures des interfaces jusque 2020.</p>
<p><strong>Le fil directeur de cette seconde partie met en perspective valeurs humaines et rapport à la technologie.</strong> Les interfaces se multipliant dans leur nombre et leur nature, elles recouvrent une forme de moins en moins conventionnelle (la <strong>&#8220;fin de la stabilité des interfaces&#8221;</strong>). L&#8217;informatique ambiante se diffuse autant dans le corps humain que dans l&#8217;environnement. <strong>Les frontières entre les humains et les ordinateurs s&#8217;amenuisent</strong> de plus en plus (aujourd&#8217;hui déjà nombreux sont les &#8220;points de contacts&#8221; que nous portons sur nous : iPods, téléphones mobiles et demain des bio-services qui surveilleront notre rythme cardiaque). Ce nouveau paradigme modifie notre rapport à la corporalité, avec de nouveaux modes d&#8217;interactions. La sphère des interactions privées/publique  fait évoluer notre conception de l&#8217;espace intime et de ce qui peut être partagé. A titre d&#8217;exemple, il est courant aujourd&#8217;hui dans les grandes villes qu&#8217;un panneau publicitaire détecte via Bluetooth notre téléphone mobile et nous propose le téléchargement d&#8217;une vidéo. Voulons-nous ainsi que les ordinateurs fassent partie de notre identité ? Jusqu&#8217;où abandonner (ou pas) le contrôle de nos données privées ? Le concept même d&#8217;interface deviendra-t-il obsolète tant la technologie nous sera intégrée ?</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="src" value="http://www.youtube.com/v/UWgIswo3lV4&amp;hl=fr&amp;fs=1" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/UWgIswo3lV4&amp;hl=fr&amp;fs=1" allowfullscreen="true"></embed></object></p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="src" value="http://www.youtube.com/v/B5mwzhUCqkA&amp;hl=fr&amp;fs=1" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/B5mwzhUCqkA&amp;hl=fr&amp;fs=1" allowfullscreen="true"></embed></object><br />
Les objets et notre environnement vont devenir les vecteurs augmentés par une technologie invisible, banalisée. Cette interaction &#8220;naturelle&#8221; va devoir définir de nouvelles métaphores, de nouveaux idiomes pour formaliser ses modalités d&#8217;échange. Le questionnement est le suivant : comment établirons-nous le lien entre l&#8217;usage de nos objets quotidiens et leurs capacités augmentées ? Comment saurons-nous que nous disposons du contrôle des interactions lorsque l&#8217;environnent réagira à notre comportement ? Pourrons-nous décider de mettre un terme à ces interactions si elles nous dérangent ?<strong> L</strong>es scénarios d&#8217;usage vont de fait se complexifier encore davantage. Cela préfigure sans doute également l&#8217;ouverture à un comportement des interfaces moins prévisible pour les humains.  Perdrons-nous ainsi, à un moment donné, confiance dans ces processus qui dépasseront notre compréhension ?  (voir l&#8217;ouvrage d&#8217;Adam Greenfield, <em>Everyware</em>) Comment pourrons-nous gérer les erreurs de ces systèmes ?</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="src" value="http://www.youtube.com/v/RMXox8IJvmE&amp;hl=fr&amp;fs=1" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/RMXox8IJvmE&amp;hl=fr&amp;fs=1" allowfullscreen="true"></embed></object></p>
<p><strong>Notre façon de vivre au quotidien est de plus en plus dépendante de la technologie</strong> alors que les ordinateurs sont de plus en plus autonomes (intelligence artificielle). Cette dépendance permet de se rendre compte des capacités que nous abandonnons au fil des générations (taper sur une machine méchanique par exemple ou le calcul mental) et des nouvelles qu&#8217;il nous faut acquérir (envoyer des e-mails, utiliser une calculatrice scientifique) et qui sont au fil du temps tenues pour acquises. Cela induit une confiance de plus en plus grande envers la technologie. La compréhension même du monde peut s&#8217;effacer au profit d&#8217;une dépendance totale aux technologies qui nous supportent. Nos attentes continueront-elles de grandir ? Quelles seront les capacités tenues pour acquises en 2020 ? La technologie sera-t-rendue responsable des accidents ou bien seront-ce les designers et les ingénieurs ? Parallèlement, l&#8217;autonomie accrue des ordinateurs et des interfaces lèvera de nombreuses questions sur ce qui est acceptable socialement, sur le style d&#8217;interaction approprié avec elles, sur la répartition des tâches humain/machine, etc. Bref, quelle part de responsabilité ?</p>
<p><strong>L&#8217;hyper-connectivité caractérise cette nouvelle ère de la communication.</strong> Hyper-connectivité de nous-même mais aussi hyper-connectivité des ordinateurs entre eux, pour notre bénéfice ou à notre détriment. Il est aujourd&#8217;hui parfaitement admis de jouer en ligne avec des personnes que nous ne pourrions rencontrer dans le quotidien. Les conventions sociales évoluent avec les usages. L&#8217;hyperconnectivité efface les frontières entre le travail et la sphère privée. Jusqu&#8217;où cette nouvelle faculté portera-t-elle l&#8217;intrusion dans notre intimité ? Notre &#8220;disponibilité&#8221; permanente suscitera de nouveaux codes de communication pour réguler les intrusions possibles de la sphère sociale dans la sphère intime. Enfin, cette connectivité rend chaque événement du monde plus synchrone : célérité extrême de la diffusion de l&#8217;information, smart mobs (mobilisation de la foule de manière simultanée) etc.</p>
<p><strong>L&#8217;évolution des interfaces préfigure la fin du temps éphémère.</strong> Nous pouvons stocker de plus en plus de données sur notre vécu (cf. le concept émergent de <a href="http://www.fredcavazza.net/2008/04/05/lifecast-podcast-20-et-plus-si-affinite/">life logging</a> qui consiste à filmer chacun des instants de sa vie). Si les caméras de surveillance ont leur rôle, l&#8217;archivage des réseaux sociaux, l&#8217;indexation des données personnelles sont tout aussi redoutables : notre empreinte digitale est de plus en plus marquée. Les enjeux éthiques soulevées par cette question sont lourds d&#8217;implication.</p>
<p>Enfin, <strong>L&#8217;engagement des utilisateurs devient de plus en plus <em>créatif</em></strong> (cf. le concept de crowdsourcing).  Le web est passé en mode <em>écriture. </em>Des interfaces comme celle de la Wii, avec un feedback haptique, permettent de révolutionner non seulement la façon de jouer mais d&#8217;apprendre. Cette participation physique s&#8217;inscrit au coeur du style d&#8217;interaction des interfaces déjà aujourd&#8217;hui. L&#8217;information devient un objet manipulable et configurable (dans Google Analytics ou Netvibes).</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="src" value="http://www.youtube.com/v/NwVBzx0LMNQ&amp;hl=fr&amp;fs=1" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/NwVBzx0LMNQ&amp;hl=fr&amp;fs=1" allowfullscreen="true"></embed></object></p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="src" value="http://www.youtube.com/v/rP5y7yp06n0&amp;hl=fr&amp;fs=1" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/rP5y7yp06n0&amp;hl=fr&amp;fs=1" allowfullscreen="true"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://www.interfaceinteraction.com/interfaces-innovantes/le-futur-des-interfaces-vu-par-microsoft-24-5-evolutions-majeures-des-interfaces/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.interfaceinteraction.com/interfaces-innovantes/le-futur-des-interfaces-vu-par-microsoft-24-5-evolutions-majeures-des-interfaces/</feedburner:origLink></item>
		<item>
		<title>Le design d’interface mobile</title>
		<link>http://feeds.feedburner.com/~r/Interface/interaction/~3/334368079/</link>
		<comments>http://www.interfaceinteraction.com/interfaces-mobiles/le-design-dinterface-mobile/#comments</comments>
		<pubDate>Sun, 13 Jul 2008 16:54:23 +0000</pubDate>
		<dc:creator>Benoît Drouillat</dc:creator>
		
		<category><![CDATA[Interfaces mobiles]]></category>

		<guid isPermaLink="false">http://www.interfaceinteraction.com/?p=23</guid>
		<description><![CDATA[Comme l&#8217;écrit Barbara Ballard dans la préface de son ouvrage Designing the mobile experience, il existe des centaines de terminaux mobiles, autant de technologies à implémenter différemment, et de situations d&#8217;usages. Les interfaces mobiles ne sont pas une miniaturisation des interfaces des ordinateurs personnels. Ainsi, écrit-elle, l&#8217;espace mobile est-il complexe mais navigable.
Il faut distinguer ici [...]]]></description>
			<content:encoded><![CDATA[<p>Comme l&#8217;écrit Barbara Ballard dans la préface de son ouvrage <em>Designing the mobile experience</em>, il existe des centaines de terminaux mobiles, autant de technologies à implémenter différemment, et de situations d&#8217;usages. Les interfaces mobiles ne sont pas une miniaturisation des interfaces des ordinateurs personnels. Ainsi, écrit-elle, l&#8217;espace mobile est-il complexe mais navigable.</p>
<p>Il faut distinguer ici 2 types d&#8217;interfaces mobiles : les interfaces <strong>web</strong> mobiles, et les interfaces du <strong>système opératif</strong> du mobile (encore plus étroitement lié au design du produit). La tendance actuelle est de réaliser des interfaces web mobiles optimisées pour l&#8217;iphone, tandis que le design d&#8217;interface web mobile est sensiblement différent et a depuis plusieurs années développé une culture et des conventions spécifiques. A titre d&#8217;information, dans Google, la requête inurl:&#8221;http://m.&#8221; fait ressortir presque 2 millions de pages de sites mobiles ayant dans leur url &#8220;m&#8221; (exemple : m.flickr.com) versus 199 000 pour les sites optimisés iphone ayant dans leur url &#8220;iphone&#8221; (requête  inurl:&#8221;http iphone&#8221;). Les concepteurs de sites optimisés pour l&#8217;iphone disposent donc d&#8217;un recul relativement faible.</p>
<p>Je poste ici une sélection de références utiles pour approfondir plus tard les principes de conception des interfaces web mobiles, et avant tout observer pour comprendre. Tout cela en gardant à l&#8217;esprit que ce domaine bénéficie d&#8217;une grande expansion actuellement.</p>
<p><strong>Sélection d&#8217;interfaces de sites optimisés pour l&#8217;iPhone<br />
</strong></p>
<p><a href="http://apnews.com">http://apnews.com</a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-associated-press.jpg"><img class="alignnone size-full wp-image-114" title="interface-iphone-associated-press" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-associated-press.jpg" alt="Interface iPhone d\'Associated Press (AP)" width="320" height="480" /></a><br />
<a href="http://reportage-video-iphone.geomagazine.fr">http://reportage-video-iphone.geomagazine.fr</a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-geo.jpg"><img class="alignnone size-full wp-image-113" title="interface-iphone-geo" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-geo.jpg" alt="Interface iPhone du magazine Géo" width="320" height="480" /></a><br />
<a href="http://iphone.foxnews.com/">http://iphone.foxnews.com</a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-fox-news.jpg"><img class="alignnone size-full wp-image-111" title="interface-iphone-fox-news" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-fox-news.jpg" alt="Interface iPhone de Fox News" width="320" height="480" /></a><br />
<a href="http://www.renaultsport.ch/iphone">http://www.renaultsport.ch/iphone</a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-renault-f1.jpg"><img class="alignnone size-full wp-image-112" title="interface-iphone-renault-f1" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-renault-f1.jpg" alt="Interface iPhone de Renault F1" width="320" height="480" /></a><br />
<a href="http://iphone.citroen.fr">http://iphone.citroen.fr</a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-citroen-c5.jpg"><img class="alignnone size-full wp-image-110" title="interface-iphone-citroen-c5" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-citroen-c5.jpg" alt="Interface iPhone de la Citroën C5" width="320" height="480" /></a><br />
<a href="http://iphone.iht.com">http://iphone.iht.com</a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-international-herald-tribune.jpg"><img class="alignnone size-full wp-image-105" title="interface-iphone-international-herald-tribune" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-international-herald-tribune.jpg" alt="Interface iPhone de l\'International Herald Tribune" width="320" height="480" /></a></p>
<p><a href="http://iphone.lorealparis.com">http://iphone.lorealparis.com</a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-loreal.jpg"><img class="alignnone size-full wp-image-109" title="interface-iphone-loreal" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-loreal.jpg" alt="Interface iPhone de L\'Oréal" width="320" height="480" /></a><br />
<a href="http://iphone.boursier.com">http://iphone.boursier.com</a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-boursier.jpg"><img class="alignnone size-full wp-image-108" title="interface-iphone-boursier" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-boursier.jpg" alt="Interface iPhone de Boursier" width="320" height="480" /></a><br />
<a href="http://iphone.lci.fr">http://iphone.lci.fr</a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-lci.jpg"><img class="alignnone size-full wp-image-107" title="interface-iphone-lci" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-lci.jpg" alt="Interface iPhone de LCI" width="320" height="480" /></a><br />
<a href="http://m.nbc.com/iphone">http://m.nbc.com/iphone</a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-nbc.jpg"><img class="alignnone size-full wp-image-106" title="interface-iphone-nbc" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/interface-iphone-nbc.jpg" alt="Interface iPhone du site de NBC" width="320" height="480" /></a></p>
<p><strong>Sites optimisés pour les terminaux mobiles</strong></p>
<ul>
<li><a href="http://cantoni.mobi/">Une liste de sites mobiles</a></li>
<li><a href="http://www.webbyawards.com/webbys/current_honorees.php?media_id=127&amp;season=12">La catégorie &#8220;Mobile&#8221; des Webby Awards</a></li>
</ul>
<p><strong>Sélection de blogs</strong></p>
<ul>
<li><a href="http://www.smallsurfaces.com">Small Surfaces</a></li>
<li><a href="http://sender11.typepad.com/">Sender 11</a></li>
<li><a href="http://www.servicesmobiles.fr/services_mobiles/">Services Mobiles</a></li>
<li><a href="http://www.iphon.fr/">Iphon.fr</a></li>
<li><a href="http://idlemode.com/">Idlemode</a></li>
<li><a href="http://www.engadgetmobile.com/">Engadget Mobile</a></li>
<li><a href="http://mobilecrunch.com/">MobileCrunch</a></li>
</ul>
<p><strong>Ressources sur le design d&#8217;interface mobile<br />
</strong></p>
<ul>
<li><a href="http://www.littlespringsdesign.com/posts/">Little Spring</a></li>
<li><a href="http://forum.nokia.com/main/technical_services/usability/index.html">Nokia Usability Resources</a></li>
<li><a href="http://patterns.littlespringsdesign.com/index.php/Main_Page">Mobile UI design resources</a></li>
<li><a href="http://mobilecommunitydesign.com/">Mobile Community Design</a></li>
<li><a href="http://developer.yahoo.com/ypatterns/wireframes/">Yahoo! Design Stencil</a></li>
</ul>
<p><strong>Références bibliographiques</strong></p>
<ul>
<li><a href="http://astore.amazon.fr/networkintera-21/detail/2940373078/171-4197085-8713817"><em>Designing for Small Screens</em></a>, Carola Zwick, Burkhard Schmitz, Studio 7.5, AVA Publishing, 2006</li>
<li><a href="http://astore.amazon.fr/networkintera-21/detail/0470090898/171-4197085-8713817"><em>Mobile Interaction Design</em></a>, Matt Ones, Gary Marsden, Wiley, 2006</li>
<li><a href="http://astore.amazon.fr/networkintera-21/detail/0071385142/171-4197085-8713817"><em>Mobile Usability: How Nokia Changed the Face of the Mobile Phone</em></a>, Christian Lindholm, Turkka Keinonen, Harri Kiljander, McGraw-Hill Professional, 2003</li>
<li><a href="http://astore.amazon.fr/networkintera-21/detail/0470844469/171-4197085-8713817"><em>Handheld Usability</em></a>, Scott Weiss, Wiley, 2002</li>
<li><a href="http://astore.amazon.fr/networkintera-21/detail/0750663529/171-4197085-8713817"><em>Understanding Mobile Human-Computer Interaction</em></a>, Steve Love, Butterworth-Heinemann, 2005</li>
<li><a href="http://astore.amazon.fr/networkintera-21/detail/1558606009/171-4197085-8713817"><em>Information Appliances and Beyond</em></a>, Eric Bergman, Morgan Kaufmann, 2000</li>
<li><a href="http://astore.amazon.fr/networkintera-21/detail/0470033614/171-4197085-8713817"><em>Designing the Mobile User Experience</em>,</a> Barbara Ballard, Wiley, 2007</li>
<li><em>Mobile Internet For Dummies</em>, Michael J. O&#8217;Farrell, John R. Levine, Jostein Algroy, James Pearce, Daniel Appelquist, Wiley, 2008</li>
<li><span class="pagetitle"><a href="http://astore.amazon.fr/networkintera-21/detail/0262113120/171-4197085-8713817"><em>Handbook of Mobile Communication Studies</em></a>, </span>James E. Katz, The MIT Press, 2008</li>
<li><a href="http://astore.amazon.fr/networkintera-21/detail/1852337850/171-4197085-8713817"><em>Designing Software for the Mobile Context: A Practitioner&#8217;s Guide</em></a>, Roman Longoria, Springer, 2004</li>
<li><a href="http://dotmobi.typepad.com/dotmobi/2007/03/dotmobi_mobile_.html"><em>Mobile Web Developer&#8217;s Guide</em></a><em>, </em>Brian Fling, E-book</li>
<li><a href="http://mobilewebbook.com/"><em>Mobile Web Book</em></a>,  Cameron Moll, E-book</li>
</ul>
<p><a href="http://www.webbyawards.com/webbys/current_honorees.php?media_id=127&amp;season=12"> </a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.interfaceinteraction.com/interfaces-mobiles/le-design-dinterface-mobile/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.interfaceinteraction.com/interfaces-mobiles/le-design-dinterface-mobile/</feedburner:origLink></item>
		<item>
		<title>Le futur des interfaces vu par Microsoft 1/4 (le passé et le présent)</title>
		<link>http://feeds.feedburner.com/~r/Interface/interaction/~3/329203267/</link>
		<comments>http://www.interfaceinteraction.com/interfaces-innovantes/le-futur-des-interfaces-vu-par-microsoft-14-le-passe-et-le-present/#comments</comments>
		<pubDate>Mon, 07 Jul 2008 20:46:07 +0000</pubDate>
		<dc:creator>Benoît Drouillat</dc:creator>
		
		<category><![CDATA[Interfaces innovantes]]></category>

		<guid isPermaLink="false">http://www.interfaceinteraction.com/?p=40</guid>
		<description><![CDATA[Une équipe de chercheurs de Microsoft a publié en avril dernier un remarquable document prospectif sur le futur des interfaces, à la suite d&#8217;un forum intitulé Human Computer Interaction in the Year 2020. A travers cette publication, le collectif souhaite mettre en lumière non seulement la mécanique de l&#8217;interface et le basculement de paradigme qui [...]]]></description>
			<content:encoded><![CDATA[<p>Une équipe de chercheurs de Microsoft a publié en avril dernier un remarquable <a href="http://research.microsoft.com/hci2020/reading.html">document prospectif sur le futur des interfaces</a>, à la suite d&#8217;un forum intitulé <em>Human Computer Interaction in the Year 2020</em>. A travers cette publication, le collectif souhaite mettre en lumière non seulement la mécanique de l&#8217;interface et le basculement de paradigme qui s&#8217;opère actuellement avec l&#8217;informatique pervasive, mais aussi la place des valeurs humaines dans ce futur, la maturation de la discipline et l&#8217;extension de son champ.</p>
<p>L&#8217;ambition du rapport est de montrer comment le design aide à faire émerger un <em>nouveau paysage socio-digital</em> et d&#8217;offrir de nouvelles perspectives pour la discipline. En voici une synthèse en français, que j&#8217;ai découpée en 4 parties (le document s&#8217;étend sur une centaine de pages).</p>
<p><strong>La première partie du document revient sur les évolutions des 20 dernières années. </strong>On distingue actuellement 4 périodes charnières dans l&#8217;usage des interfaces : l&#8217;ère des ordinateurs centraux (1 ordinateur pour plusieurs utilisateurs, dans les années 1960), l&#8217;ère des ordinateurs personnels (1 ordinateur = 1 utilisateur, dans les années 80 et 90), l&#8217;ère de la mobilité (Plusieurs ordinateurs par utilisateur, dans les années 2000), et l&#8217;ère de l&#8217;informatique ambiante (Plusieurs milliers d&#8217;ordinateurs par utilisateur).</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/cambridge-differential-analyser.jpg"><img class="alignnone size-full wp-image-96" title="cambridge-differential-analyser" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/cambridge-differential-analyser.jpg" alt="Cambridge differential analyzer, 1938" width="500" height="365" /></a><em><br />
Cambridge differential analyzer, 1938, un exemple d&#8217;ordinateur central.<br />
</em></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/windows-311.jpg"><img class="alignnone size-full wp-image-95" title="windows-311" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/windows-311.jpg" alt="Windows 3.11" width="500" height="375" /></a><em><br />
L&#8217;interface du bureau de Windows 3.11</em></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/windows-visa.jpg"><img class="alignnone size-full wp-image-94" title="windows-vista" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/windows-visa.jpg" alt="Windows Vista" width="500" height="400" /></a><em><br />
L&#8217;interface du bureau de Windows Vista</em></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/minority-report.jpg"><img class="alignnone size-full wp-image-97" title="minority-report" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/minority-report.jpg" alt="Minority Report, 2002" width="500" height="210" /></a><br />
Minority Report <em>: une expression futuriste de l&#8217;informatique ambiante</em></p>
<p><em></em><br />
Les interfaces graphiques et le paradigme du bureau tels que nous les connaissons actuellement proposent des styles d&#8217;interaction de moins en moins adaptés aux usages émergents. Depuis quelques années, de nouvelles techniques d&#8217;input, alternatives à la souris, sont développées. En fonction des usages auxquels elles sont adaptées, elles diversifient l&#8217;interaction. Les interfaces tangible en font partie, à travers des produits emblématiques comme la <a href="http://fr.wikipedia.org/wiki/Nintendo_Wii">Wii</a>, <a href="http://fr.wikipedia.org/wiki/Dance_Dance_Revolution">Dance Revolution</a> ou <a href="http://www.eyetoy.com">Eye Toy</a>. Une autre tendance est illustrée par les interfaces dans lesquelles il n&#8217;y a pas de participation physique de la part de l&#8217;utilisateur. Ces interfaces, qui exploitent le mouvement des yeux ou les connexions neurales, permettent aux personnes atteintes de handicaps physiques d&#8217;interagir avec leur environnement.</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/wii-mote.jpg"><img class="alignnone size-full wp-image-98" title="wii-mote" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/wii-mote.jpg" alt="Wii remote" width="500" height="335" /></a><em><br />
La Wii remote, le périphérique d&#8217;entrée &#8220;équipé de plusieurs capteurs lui permettant de se repérer dans l&#8217;espace et de retranscrire des mouvements à l&#8217;écran.</em></p>
<p>Les surfaces d&#8217;affichage traditionnelles laissent progressivement place à des support flexibles, de taille parfois très réduite, voire des supports organiques, intégrés dans les vêtements (<a href="http://subtela.hexagram.ca/blog/?page_id=5">Animated textiles</a>) ou le papier. Ces dispositifs qui fonctionnent aussi bien en entrée qu&#8217;en sortie sont sensibles au toucher, aux mouvements du corps, ou à l&#8217;environnement. Ces <em>devices</em> intègrent désormais couramment des puces RFID (<a href="http://www.apple.com/fr/ipod/nike/">Nike+</a>). Nous porterons également des implants dans lesquels les matériaux (silicon) et l&#8217;organique (nerfs, tissus) seront liés de manière intime.</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/animated-textile.jpg"><img class="alignnone size-full wp-image-99" title="animated-textile" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/animated-textile.jpg" alt="Animated Textile" width="500" height="374" /></a><em><br />
Animated textile : une interface &#8220;portable&#8221;</em><br />
L&#8217;explosion actuelle des terminaux mobiles (téléphones, mais aussi iPods, etc.) n&#8217;est que le prélude à de nouvelles formes d&#8217;interactions mobiles. Les enjeux associés à la mobilité sont l&#8217;accès à l&#8217;information dans l&#8217;environnement (au même titre que sur un PC), de nouveaux modes de connexion(s) entre les utilisateurs, etc.</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/android-screenshot.jpg"><img class="alignnone size-full wp-image-100" title="android-screenshot" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/android-screenshot.jpg" alt="Interface d\'Androïd, le système opératif mobile de Google" width="500" height="362" /></a><em><br />
Interface d&#8217;Androïd, le système opératif mobile de Google</em><br />
Le rôle des robots domestiques connectés, au-delà de l&#8217;échéance de 2020, relèvera de l&#8217;intelligence artificielle et offrira un support considérable aux humains. Grâce à la banalisation du stockage des données personnelles, l&#8217;empreinte digitale des gens va être de plus en plus marquée, que cela concerne leurs transactions bancaires, leurs conversations téléphoniques ou des vidéos de surveillance.<br />
L&#8217;information est entrée dans l&#8217;ère des mash-up, qui agrègent toutes les formes de communications que nous utilisons : vidéos, blogs, contenus générés par les utilisateurs (UGC). Le développement des applications est décentralisé.<br />
Depuis le répondeur téléphonique, de nouveaux modes de communication (E-mails, SMS, Twitter) ont émergé et permettent une réactivité de réponse sans précédent. Le &#8220;filtrage&#8221; des communications devient important devant l&#8217;intrusion de plus en plus importante des dispositifs.<br />
Les modes d&#8217;apprentissage changent radicalement et incorporent de nouveaux modes de lecture (<em>cf.</em> actuellement les débuts du livre électronique), tout en appeler à une pédagogie davantage centrée sur les progrès de l&#8217;élève. De même les interfaces accompagnent l&#8217;évolution de la société (vieillissement de la population, mais aussi de leurs modèles). Le taux de pénétration des interfaces mobiles en font le premier objet informatisé répandu à travers toutes les cultures, toutes les couches sociales, et tous les niveaux d&#8217;expérience.</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/kindle.jpg"><img class="alignnone size-full wp-image-101" title="kindle" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/kindle.jpg" alt="Un livre électronique : le kindle" width="500" height="497" /></a></p>
<p><em>Le Kindle est un livre électronique connecté en Wifi qui permet de télécharger des livres et des périodiques vendus en ligne par Amazon.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.interfaceinteraction.com/interfaces-innovantes/le-futur-des-interfaces-vu-par-microsoft-14-le-passe-et-le-present/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.interfaceinteraction.com/interfaces-innovantes/le-futur-des-interfaces-vu-par-microsoft-14-le-passe-et-le-present/</feedburner:origLink></item>
		<item>
		<title>Les Head-Up Displays (HUD)</title>
		<link>http://feeds.feedburner.com/~r/Interface/interaction/~3/326431951/</link>
		<comments>http://www.interfaceinteraction.com/interactions/les-head-up-displays-hud/#comments</comments>
		<pubDate>Fri, 04 Jul 2008 06:47:06 +0000</pubDate>
		<dc:creator>Benoît Drouillat</dc:creator>
		
		<category><![CDATA[Interfaces innovantes]]></category>

		<category><![CDATA[Interfaces jouables]]></category>

		<category><![CDATA[Interfaces web]]></category>

		<guid isPermaLink="false">http://www.interfaceinteraction.com/?p=80</guid>
		<description><![CDATA[Les Head-Up Displays (HUD, affichage tête haute en français) sont des éléments d&#8217;interface transparents qui permettent l&#8217;affichage d&#8217;information sans occulter la surface d&#8217;un écran. Ils ont été initialement développés pour l&#8217;aviation militaire comme une évolution du viseur d&#8217;une arme (le viseur servant à pointer une arme sur une cible) et trouvent aujourd&#8217;hui une diversité d&#8217;applications [...]]]></description>
			<content:encoded><![CDATA[<p>Les Head-Up Displays (HUD, <em>affichage tête haute</em> en français) sont des éléments d&#8217;interface transparents qui permettent l&#8217;affichage d&#8217;information sans occulter la surface d&#8217;un écran. Ils ont été initialement développés pour l&#8217;aviation militaire comme une évolution du viseur d&#8217;une arme (le viseur servant à pointer une arme sur une cible) et trouvent aujourd&#8217;hui une diversité d&#8217;applications : avions commerciaux, tableaux de bord automobiles, et interfaces interactives&#8230;</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-airbus-a350.jpg"><img class="alignnone size-full wp-image-82" title="hud-airbus-a350" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-airbus-a350.jpg" alt="Head-Up Display d\'un Airbus A 350" width="500" height="298" /></a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/head-up-display-car.jpg"><img class="alignnone size-full wp-image-83" title="head-up-display-car" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/head-up-display-car.jpg" alt="Head Up Display Corvet Chevrolet" width="500" height="345" /></a></p>
<p>Grâce aux indications contextuelles qu&#8217;il fournit, le Heap Up Display permet d&#8217;accroître la précision d&#8217;un tir puis par extension celle du pilotage. Son avantage est de réduire la surcharge informationnelle de l&#8217;interface. Il comporte tout une symbolique liée aux éléments d&#8217;information à afficher. Les HUD peuvent être portés également, sur des lunettes, voire dans des applications expérimentales projetés directement sur la rétine de l&#8217;oeil. Microvision, une société américaine, <a href="http://www.microvision.com/wearable_displays/wearable_application_gallery.html">développe des applications en ce sens</a> (à l&#8217;état encore expérimental).</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/wearable-hud.jpg"><img class="alignnone size-full wp-image-84" title="wearable-hud" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/wearable-hud.jpg" alt="HUD portable : lunettes intégrant un Head Up display de Pico" width="500" height="331" /></a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-casque.jpg"><img class="alignnone size-full wp-image-85" title="hud-casque" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-casque.jpg" alt="Casque HUD" width="500" height="333" /></a></p>
<p>Dans les jeux vidéos, la culture des HUD est extrêmement répandue. Ils y servent à afficher divers indicateurs (niveau de vie, armes, progression du jeu etc.), peuvent être personnalisés et s&#8217;intègrent parfois comme des métaphores d&#8217;interface (tableau de bord d&#8217;un véhicule).</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-war-of-warcraft.jpg"><img class="alignnone size-full wp-image-86" title="hud-war-of-warcraft" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-war-of-warcraft.jpg" alt="HUD War of War of Warcraft" width="500" height="300" /></a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-startrek.jpg"><img class="alignnone size-full wp-image-87" title="hud-startrek" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-startrek.jpg" alt="HUD jeu Star Trek" width="500" height="375" /></a></p>
<p>Cette culture des Head-Up Displays bascule progressivement dans les interfaces web. Second Life, l&#8217;univers virtuel connecté, en a familiarisé l&#8217;usage, qui a eu beaucoup de résonance auprès des marques. Les HUD y renforcent le sentiment d&#8217;immersion pour jouer, lire des flux d&#8217;information, configurer les propriétés d&#8217;un objet (couleurs etc.) voire comme support de navigation sociale (Sanpellegrino a expérimenté un HUD permettant de naviguer de lieu en lieu selon les suggestions des utilisateurs).</p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-pontiac.jpg"><img class="alignnone size-full wp-image-88" title="hud-pontiac" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-pontiac.jpg" alt="HUD de Pontiac dans Second Life" width="500" height="327" /></a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-reuters.jpg"><img class="alignnone size-full wp-image-90" title="hud-reuters" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-reuters.jpg" alt="HUD de Reuters dans Second Life" width="500" height="378" /></a></p>
<p><a href="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-mercedes.jpg"><img class="alignnone size-full wp-image-93" title="hud-mercedes" src="http://www.interfaceinteraction.com/wp-content/uploads/2008/07/hud-mercedes.jpg" alt="HUD de Mercedes-Benz dans Second Life" width="500" height="225" /></a></p>
<p>Dans les interfaces riches, une méthode nouvelle d&#8217;afficher les messages système est apparu : les <em>transparent messages</em> (messages transparents). Leur avantage est de conserver le contexte dans l&#8217;interface, et de ne plus être interruptives. Ils sont très utiles pour les messages de validation. La difficulté est en revanche que les messages transparents disparaissent après un cours laps de temps. Aza Raskin propose alors qu&#8217;un historique des derniers messages système soit intégrée à l&#8217;interface. Ci-dessous une démo vidéo d&#8217;Aza Raskin d&#8217;Humanized :</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/XcHjA5uwHM8" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/XcHjA5uwHM8" wmode="transparent"></embed></object></p>
<p><strong>Sources :</strong></p>
<ul>
<li><a href="http://en.wikipedia.org/wiki/HUD_%28computer_gaming%29">HUD (Gaming)</a></li>
<li><a href="http://en.wikipedia.org/wiki/Head-up_display">Head-up display</a></li>
<li><a href="http://www.gamasutra.com/features/20060203/wilson_01.shtml">Off With Their HUDs!: Rethinking the Heads-Up Display in Console Game Design</a></li>
<li><a href="http://hdrlying.com/2007/03/07/clean-and-simple-whats-the-future-of-the-heads-up-display/">Clean and Simple: What’s the future of the Heads-Up Display?</a></li>
<li><a href="http://humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages/">&#8220;Messages transparents&#8221;</a> (Humanized) : explication et démonstration du procédé</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.interfaceinteraction.com/interactions/les-head-up-displays-hud/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.interfaceinteraction.com/interactions/les-head-up-displays-hud/</feedburner:origLink></item>
	</channel>
</rss>
