<?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>360 eMedia &#187; outil</title>
	<atom:link href="http://www.360emedia.fr/tag/outil/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.360emedia.fr</link>
	<description>Nouveaux médias, nouvelles plateformes</description>
	<lastBuildDate>Mon, 26 Dec 2011 13:09:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Outil multi-usages</title>
		<link>http://www.360emedia.fr/2009/11/26/outil-multi-usages/</link>
		<comments>http://www.360emedia.fr/2009/11/26/outil-multi-usages/#comments</comments>
		<pubDate>Thu, 26 Nov 2009 14:42:29 +0000</pubDate>
		<dc:creator>jd</dc:creator>
				<category><![CDATA[Observatoire d'IHM]]></category>
		<category><![CDATA[ihm]]></category>
		<category><![CDATA[outil]]></category>
		<category><![CDATA[prezi]]></category>

		<guid isPermaLink="false">http://www.360emedia.fr/?p=673</guid>
		<description><![CDATA[Problématique : parvenir à mettre en place un outil intuitif permettant à la fois : de déplacer un élément dans un espace 2D de modifier sa taille de modifier son orientation Dans les outils classiques style Photoshop, ces trois manipulations nécessitent autant d&#8217;outils différents, souvent peu intuitifs, ou des manipulations pas très simples jouant sur [...]]]></description>
			<content:encoded><![CDATA[<p>Problématique : parvenir à mettre en place un outil intuitif permettant à la fois :</p>
<ul>
<li>de déplacer un élément dans un espace 2D</li>
<li>de modifier sa taille</li>
<li>de modifier son orientation</li>
</ul>
<p>Dans les outils classiques style Photoshop, ces trois manipulations nécessitent autant d&#8217;outils différents, souvent peu intuitifs, ou des manipulations pas très simples jouant sur la position du curseur de la souris, son apparence, la position des &laquo;&nbsp;ancres&nbsp;&raquo;, etc&#8230;</p>
<p><a href="http://www.prezi.com" target="_blank">Prezi.com</a> (ne pas confondre avec l&#8217;autre&#8230;) est un éditeur 100% online permettant des présentations spectaculaires (j&#8217;en reparlerai sans doute plus tard). Mais l&#8217;éditeur inclus est lui aussi innovant. Parfois déroutant, parfois assez magique. Et l&#8217;on trouve en particulier cette &laquo;&nbsp;roue&nbsp;&raquo;, rebutante d&#8217;accès, et pourtant extrêmement pratique&#8230;</p>
<p><img class="alignright size-full wp-image-674" title="prezi" src="http://www.360emedia.fr/wp-content/uploads/2009/11/prezi.png" alt="prezi" width="267" height="254" /></p>
<p>Cette roue est en fait constituée de trois cercles, représentant chacun un outil différent :</p>
<ul>
<li>Placer la souris dans le cercle le plus au centre, avec les bandes verticales, permet de bouger l&#8217;objet.</li>
<li>Utiliser les &laquo;&nbsp;cercles&nbsp;&raquo; au milieu va permettre de changer la taille de l&#8217;objet, le rétrécir ou l&#8217;agrandir.</li>
<li>Le cercle le plus à l&#8217;extérieur permet quant à lui d&#8217;effectuer une rotation.</li>
</ul>
<p>Au début, c&#8217;est perturbant. Au bout de 30 secondes d&#8217;exercice, c&#8217;est génial ! C&#8217;est complètement intuitif, et on se prend à avoir presque la sensation de &laquo;&nbsp;toucher&nbsp;&raquo; l&#8217;outil, d&#8217;imaginer un outil équivalent en dur.</p>
<p>Cet exemple est l&#8217;exemple parfait à mon sens d&#8217;un élément d&#8217;interface osé, très &laquo;&nbsp;disruptive&nbsp;&raquo; et qui nécessite un apprentissage, qui peut perturber, mais qui améliore vraiment l&#8217;usage du logiciel. A méditer !</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-shr">
<ul class="socials">
		<li class="shr-comfeed">
			<a href="http://www.360emedia.fr/2009/11/26/outil-multi-usages/feed" rel="nofollow" class="external" title="S'abonner aux commentaires de cet article ?">S'abonner aux commentaires de cet article ?</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://www.360emedia.fr/2009/11/26/outil-multi-usages/&amp;t=Outil+multi-usages" rel="nofollow" class="external" title="Partagez-le sur Facebook">Partagez-le sur Facebook</a>
		</li>
		<li class="shr-gmail">
			<a href="https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;su=Outil+multi-usages&amp;body=Link: http://www.360emedia.fr/2009/11/26/outil-multi-usages/ (sent via shareaholic)%0D%0A%0D%0A----%0D%0A Probl%C3%A9matique%20%3A%20parvenir%20%C3%A0%20mettre%20en%20place%20un%20outil%20intuitif%20permettant%20%C3%A0%20la%20fois%20%3A%0D%0A%0D%0A%09de%20d%C3%A9placer%20un%20%C3%A9l%C3%A9ment%20dans%20un%20espace%202D%0D%0A%09de%20modifier%20sa%20taille%0D%0A%09de%20modifier%20son%20orientation%0D%0A%0D%0ADans%20les%20outils%20classiques%20style%20Photoshop%2C%20ces%20trois%20manipulations%20n%C3%A9cessitent%20autant%20d%27outils%20diff%C3%A9rents" rel="nofollow" class="external" title="Email this via Gmail">Email this via Gmail</a>
		</li>
		<li class="shr-googlebookmarks">
			<a href="http://www.google.com/bookmarks/mark?op=add&amp;bkmk=http://www.360emedia.fr/2009/11/26/outil-multi-usages/&amp;title=Outil+multi-usages" rel="nofollow" class="external" title="Ajoutez-le à Google Bookmarks">Ajoutez-le à Google Bookmarks</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Outil+multi-usages+-+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>500 Internal Server Error</title>
</head><body>
<h1>Internal Server Error</h1>
<p>The server encountered an internal error or
misconfiguration and was unable to complete
your request.</p>
<p>Please contact the server administrator,
 webmaster@b2l.me and inform them of the time the error occurred,
and anything you might have done that may have
caused the error.</p>
<p>More information about this error may be available
in the server error log.</p>
<p>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.</p>
</body></html>&amp;source=shareaholic" rel="nofollow" class="external" title="Tweetez-le !">Tweetez-le !</a>
		</li>
		<li class="shr-wikio">
			<a href="http://www.wikio.com/sharethis?url=http://www.360emedia.fr/2009/11/26/outil-multi-usages/&amp;title=Outil+multi-usages" rel="nofollow" class="external" title="Partagez-le sur Wikio">Partagez-le sur Wikio</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://www.360emedia.fr/2009/11/26/outil-multi-usages/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

