<?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>Artefact2&#039;s Blog &#187; Usability</title>
	<atom:link href="http://blog.artefact2.com/tag/usability/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.artefact2.com</link>
	<description>Mes centres d&#039;intérêts, principalement Freenet, GNU/Linux, BSD et en gros tout ce qui touche à l&#039;Opensource (plus d&#039;autres choses, qui n&#039;ont rien à voir en général...)</description>
	<lastBuildDate>Sat, 14 Aug 2010 10:39:43 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Amélioration de l&#8217;affichage des noeuds connectés (Freenet)</title>
		<link>http://blog.artefact2.com/60/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://blog.artefact2.com/60/#comments</comments>
		<pubDate>Wed, 02 Dec 2009 21:36:49 +0000</pubDate>
		<dc:creator>Artefact2</dc:creator>
				<category><![CDATA[Développement]]></category>
		<category><![CDATA[Freenet]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[Opensource]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://artefact2.no-ip.info/Blog/?p=60</guid>
		<description><![CDATA[Il y a quelques mois, j&#8217;ai implémenté une barre de statut pour Freenet, l&#8217;idée était de Toad et j&#8217;étais plûtot emballé. Le but ? Améliorer la facilité d&#8217;utilisation en concentrant des informations dans une barre. L&#8217;emplacement dépend du thème, les &#8230; <a href="http://blog.artefact2.com/60/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Il y a quelques mois, j&#8217;ai implémenté une barre de statut pour Freenet, l&#8217;idée était de Toad et j&#8217;étais plûtot emballé. Le but ? Améliorer la facilité d&#8217;utilisation en concentrant des informations dans une barre. L&#8217;emplacement dépend du thème, les thèmes bar défaut l&#8217;ont en haut alors que mon thème minimaliste la met en bas, fixe (c&#8217;est à dire qu&#8217;elle ne bouge pas même si on défile la page).</p>
<p>Voici en gros à quoi ressemble la barre :<a href="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/fn_statusbar_old.png"><img class="aligncenter size-full wp-image-61" title="fn_statusbar_old" src="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/fn_statusbar_old.png" alt="fn_statusbar_old" width="860" height="36" /></a></p>
<p>On aperçoit tout à gauche les messages divers, la couleur dépend de la gravité des messages (les erreurs sont affichées directement en haut de la page, les avertissements s&#8217;affichent avec un fond jaune dans la barre et les autres messages mineurs s&#8217;affichent en bleu dans la barre), puis le choix de la langue (le choix de placer ça ici est relativement discutable, mais Toad le voulait et ça prend pas beaucoup de place) ; après tout, pourquoi pas. Il y a ensuite bien sûr le switch mode simple/avancé qui permet d&#8217;économiser de la place en haut, les niveaux de sécurité qui sont colorés (<span style="color: #770000;">LOW</span>, <span style="color: #b66700;">NORMAL</span>, <span style="color: green;">HIGH</span>, <span style="color: #005700;">MAXIMUM</span>) avec une courte description qui s&#8217;affiche quand on passe la souris dessus, puis le nombre de noeuds connectés.</p>
<p>Ce dernier élément n&#8217;est pas très utile en soi ; l&#8217;utilisateur ne sait pas trop comment l&#8217;interpréter. Quelles sont les bonnes valeurs ? C&#8217;est pour cela qu&#8217;on a eu l&#8217;idée (enfin plutôt digger3 sur IRC) d&#8217;utiliser une barre de progression à la place. Une sorte d&#8217;« indicateur de vitesse » qui permettrait de clarifier cela. Le texte est déjà coloré en fonction du nombres de noeuds connectés, j&#8217;ai réutilisé ce système pour la barre de progression mais en scindant deux cas :</p>
<ul>
<li>Si le noeud utilise l&#8217;Opennet (cela inclut les noeuds hybrides qui sont connectés à des amis et à des inconnus), alors la barre sera colorée en fonction du pourcentage de noeuds connectés ; la limite au nombre de noeuds connectés est déterminée par la limite de bande passante configurée.</li>
<li>Si le noeud est en Darknet pur (c&#8217;est à dire qu&#8217;il ne se connecte qu&#8217;à des amis), alors la barre sera colorée en fonction du nombre brut de noeuds connectés. La notion de pourcentage n&#8217;a plus de sens car il n&#8217;y a pas de limite formelle au nombre d&#8217;amis, et il est tout à fait normal de ne pas avoir 100% des amis connectés à un instant quelconque.</li>
</ul>
<p>Voici un aperçu de la nouvelle barre de statut qui sera normalement présente dans le build 1240 de Freenet :<a href="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_red.png"><img class="aligncenter size-full wp-image-65" title="statusbar_red" src="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_red.png" alt="statusbar_red" width="788" height="39" /></a><a href="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_orange.png"><img class="aligncenter size-full wp-image-66" title="statusbar_orange" src="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_orange.png" alt="statusbar_orange" width="785" height="31" /></a><a href="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_yellowgreen.png"><img class="aligncenter size-full wp-image-64" title="statusbar_yellowgreen" src="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_yellowgreen.png" alt="statusbar_yellowgreen" width="782" height="31" /></a><a href="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_tooltip.png"><img class="aligncenter size-full wp-image-63" title="statusbar_tooltip" src="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_tooltip.png" alt="statusbar_tooltip" width="785" height="45" /></a></p>
<p>Voici un screenshot complet d&#8217;une page, avec le thème <em>Minimalist</em> :<a href="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_fullscreenshot.png"><img class="aligncenter size-thumbnail wp-image-62" title="statusbar_fullscreenshot" src="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_fullscreenshot-150x150.png" alt="statusbar_fullscreenshot" width="150" height="150" /></a></p>
<p><a href="http://artefact2.no-ip.info/Blog/wp-content/uploads/2009/12/statusbar_fullscreenshot.png"></a>Au passage, le <em>persona</em> Firefox est de moi,<a href="http://www.getpersonas.com/en-US/persona/69861"> une réalisation</a> faite à la va vite sous Inkscape en dix minutes.</p>
<p><a href="http://github.com/freenet/fred-staging/commit/7d8564fc0596df4902465992782b4cb0d6dbc66c">Le commit</a> en lui même, au cas ou vous voudriez voir à quel point je fais du mauvais code :-|</p>
<p>Voilà tout ; ce petit changement n&#8217;est pas grand chose en soi, mais l&#8217;interface doit avant tout être simple pour les utilisateurs, qui n&#8217;ont pas les mêmes connaissances techniques que nous. Cela n&#8217;est pas si simple que cela au premier coup d&#8217;oeil ; il faut par exemple éviter d&#8217;utiliser le mot <em>peer</em> et utiliser <em>friend</em> ou <em>stranger</em> à la place.</p>
<p><a href="http://www.addtoany.com/add_to/delicious?linkurl=http%3A%2F%2Fblog.artefact2.com%2F60%2F&amp;linkname=Am%C3%A9lioration%20de%20l%26%238217%3Baffichage%20des%20noeuds%20connect%C3%A9s%20%28Freenet%29" title="Delicious" rel="nofollow" target="_blank"><img src="http://blog.artefact2.com/wp-content/plugins/add-to-any/icons/delicious.png" width="16" height="16" alt="Delicious"/></a> <a href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fblog.artefact2.com%2F60%2F&amp;linkname=Am%C3%A9lioration%20de%20l%26%238217%3Baffichage%20des%20noeuds%20connect%C3%A9s%20%28Freenet%29" title="Facebook" rel="nofollow" target="_blank"><img src="http://blog.artefact2.com/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a> <a href="http://www.addtoany.com/add_to/google_reader?linkurl=http%3A%2F%2Fblog.artefact2.com%2F60%2F&amp;linkname=Am%C3%A9lioration%20de%20l%26%238217%3Baffichage%20des%20noeuds%20connect%C3%A9s%20%28Freenet%29" title="Google Reader" rel="nofollow" target="_blank"><img src="http://blog.artefact2.com/wp-content/plugins/add-to-any/icons/reader.png" width="16" height="16" alt="Google Reader"/></a> <a href="http://www.addtoany.com/add_to/google_bookmarks?linkurl=http%3A%2F%2Fblog.artefact2.com%2F60%2F&amp;linkname=Am%C3%A9lioration%20de%20l%26%238217%3Baffichage%20des%20noeuds%20connect%C3%A9s%20%28Freenet%29" title="Google Bookmarks" rel="nofollow" target="_blank"><img src="http://blog.artefact2.com/wp-content/plugins/add-to-any/icons/google.png" width="16" height="16" alt="Google Bookmarks"/></a> <a href="http://www.addtoany.com/add_to/digg?linkurl=http%3A%2F%2Fblog.artefact2.com%2F60%2F&amp;linkname=Am%C3%A9lioration%20de%20l%26%238217%3Baffichage%20des%20noeuds%20connect%C3%A9s%20%28Freenet%29" title="Digg" rel="nofollow" target="_blank"><img src="http://blog.artefact2.com/wp-content/plugins/add-to-any/icons/digg.png" width="16" height="16" alt="Digg"/></a> <a href="http://www.addtoany.com/add_to/linkedin?linkurl=http%3A%2F%2Fblog.artefact2.com%2F60%2F&amp;linkname=Am%C3%A9lioration%20de%20l%26%238217%3Baffichage%20des%20noeuds%20connect%C3%A9s%20%28Freenet%29" title="LinkedIn" rel="nofollow" target="_blank"><img src="http://blog.artefact2.com/wp-content/plugins/add-to-any/icons/linkedin.png" width="16" height="16" alt="LinkedIn"/></a> <a href="http://www.addtoany.com/add_to/netvibes_share?linkurl=http%3A%2F%2Fblog.artefact2.com%2F60%2F&amp;linkname=Am%C3%A9lioration%20de%20l%26%238217%3Baffichage%20des%20noeuds%20connect%C3%A9s%20%28Freenet%29" title="Netvibes Share" rel="nofollow" target="_blank"><img src="http://blog.artefact2.com/wp-content/plugins/add-to-any/icons/netvibes.png" width="16" height="16" alt="Netvibes Share"/></a> <a href="http://www.addtoany.com/add_to/technorati_favorites?linkurl=http%3A%2F%2Fblog.artefact2.com%2F60%2F&amp;linkname=Am%C3%A9lioration%20de%20l%26%238217%3Baffichage%20des%20noeuds%20connect%C3%A9s%20%28Freenet%29" title="Technorati Favorites" rel="nofollow" target="_blank"><img src="http://blog.artefact2.com/wp-content/plugins/add-to-any/icons/technorati.png" width="16" height="16" alt="Technorati Favorites"/></a> <a href="http://www.addtoany.com/add_to/stumbleupon?linkurl=http%3A%2F%2Fblog.artefact2.com%2F60%2F&amp;linkname=Am%C3%A9lioration%20de%20l%26%238217%3Baffichage%20des%20noeuds%20connect%C3%A9s%20%28Freenet%29" title="StumbleUpon" rel="nofollow" target="_blank"><img src="http://blog.artefact2.com/wp-content/plugins/add-to-any/icons/stumbleupon.png" width="16" height="16" alt="StumbleUpon"/></a> <a href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fblog.artefact2.com%2F60%2F&amp;linkname=Am%C3%A9lioration%20de%20l%26%238217%3Baffichage%20des%20noeuds%20connect%C3%A9s%20%28Freenet%29" title="Twitter" rel="nofollow" target="_blank"><img src="http://blog.artefact2.com/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a> <a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save">Partager/enregistrer ce post</a> </p>]]></content:encoded>
			<wfw:commentRss>http://blog.artefact2.com/60/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using apc
Page Caching using apc (user agent is rejected)
Database Caching 2/16 queries in 0.005 seconds using apc
Object Caching 336/377 objects using apc

Served from: blog.artefact2.com @ 2010-09-07 00:14:27 -->