<?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>monkey#6 &#187; buone idee</title>
	<atom:link href="http://www.lghinelli.it/blog/category/buone-idee/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.lghinelli.it/blog</link>
	<description>anca la prescia la vo e su témp</description>
	<lastBuildDate>Mon, 28 Nov 2011 13:41:05 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>prendetelo più SEOriamente</title>
		<link>http://www.lghinelli.it/blog/2009/prendetelo-piu-seoriamente/</link>
		<comments>http://www.lghinelli.it/blog/2009/prendetelo-piu-seoriamente/#comments</comments>
		<pubDate>Wed, 11 Nov 2009 13:19:27 +0000</pubDate>
		<dc:creator>lghinelli</dc:creator>
				<category><![CDATA[buone idee]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[puffo con gli occhiali]]></category>

		<guid isPermaLink="false">http://www.lghinelli.it/blog/?p=472</guid>
		<description><![CDATA[Andrea Vit senza saperlo ha scritto una perfetta integrazione al mio articolo &#8220;Non prendetemi SEOriamente&#8220;. Nel mio articolo parlavo di come secondo me l&#8217;evoluzione dei motori di ricerca modificherà il ruolo del SEO, ma avevo tralasciato completamente i colleghi di lavoro del summenzionato SEO, ma dimenticavo che &#8220;l&#8217;altra faccia della medaglia&#8221; ci insegna che è [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.andreavit.com/blog/information-architecture-e-seo/il-seo-e-inutile-forse-o-forse-cambiera-soltanto.html">Andrea Vit</a> senza saperlo ha scritto una <strong>perfetta integrazione</strong> al mio articolo &#8220;<a href="http://www.lghinelli.it/blog/2009/non-prendetemi-seoriamente/">Non prendetemi SEOriamente</a>&#8220;.</p>
<p>Nel mio articolo parlavo di come secondo me l&#8217;<strong>evoluzione dei motori di ricerca</strong> modificherà il ruolo del SEO, ma avevo tralasciato completamente i colleghi di lavoro del summenzionato SEO, ma dimenticavo che &#8220;<a href="http://www.lghinelli.it/blog/2009/laltra-faccia-della-medaglia/">l&#8217;altra faccia della medaglia</a>&#8221; ci insegna che è <strong>sempre un errore</strong> tralasciare le altre prospettive.</p>
<p>Nel leggere le descrizioni del team di sviluppo nell&#8217;articolo di Andrea (posso darti del tu vero?) ho ritrovato proprio quello che mi aspetto che un <strong>buon team</strong> faccia e sappia fare, quindi vi rimando al suo post &#8220;<a href="http://www.andreavit.com/blog/information-architecture-e-seo/il-seo-e-inutile-forse-o-forse-cambiera-soltanto.html">Il SEO è inutile. Forse. O forse cambierà soltanto…</a>&#8221; sapendo bene che le mie aspettative nei confronti di chi fa il mio stesso lavoro (ed anche verso me stesso) sono alte, ma del resto secondo me <strong>non esiste</strong> <a href="http://www.lghinelli.it/blog/2009/la-terza-regola-di-internet/">codice biologico</a>, ma solo errori di management e la voglia di migliorarsi.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lghinelli.it/blog/2009/prendetelo-piu-seoriamente/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>enlarge your elementis</title>
		<link>http://www.lghinelli.it/blog/2009/enlarge-your-elementis/</link>
		<comments>http://www.lghinelli.it/blog/2009/enlarge-your-elementis/#comments</comments>
		<pubDate>Thu, 29 Oct 2009 14:23:05 +0000</pubDate>
		<dc:creator>lghinelli</dc:creator>
				<category><![CDATA[buone idee]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[managing projects]]></category>

		<guid isPermaLink="false">http://www.lghinelli.it/blog/?p=452</guid>
		<description><![CDATA[Leggilo in italiano (che è meglio) In this article I&#8217;m talking about The Ugly Prototyper a concept idea for a prototyping functionality. When I start a web project sometimes I need to think about the size of the element on a page. You are saying &#8220;never heard about photoshop/fireworks/flair builder/other prototyping software?&#8221; yes, I&#8217;ve done [...]]]></description>
			<content:encoded><![CDATA[<p><a href="#italiano">Leggilo in italiano (che è meglio)</a></p>
<p>In this article I&#8217;m talking about <a href="http://www.lghinelli.it/the-ugly-prototyper" target="_blank">The Ugly Prototyper</a> a concept idea for a prototyping functionality.</p>
<p>When I start a web project sometimes I need to think about the <span class="evidence">size of the element on a page</span>.<br />
You are saying &#8220;never heard about photoshop/fireworks/flair builder/other prototyping software?&#8221; yes, I&#8217;ve done my homework, tryed lot of them and discovered that <strong>none</strong> give me the possibility to <span class="evidence">input a percent of the father</span> element and get a new object of the proper size.</p>
<p>Practically we have to rely <strong>only</strong> on us eyes to decide if the logo (or content area) is big enough.<br />
We put elements on page, size them and only then mathematically calculate their encumbrance (when this happens).<br />
It&#8217;s a <span class="evidence"><strong>trials and errors</strong> method</span>.<br />
I don&#8217;t like at all.</p>
<p>If you are designing with a content-driven method you <strong>have to</strong> decide the right priority of the page elements, I think that a good starting point is to say:&#8221;the content area cannot be less than the 33% of the page, the header must be no bigger than 25%, ads will be 25%&#8221;, visually see it, modify and then (only then) start with the real prototyping and design.</p>
<p>So I developed my tool.<br />
I made it in few nightly hours, sorry, it lacks of functionality and usability.<br />
You have to reload a page if you change the working area size after creating some child and a lots of others problem.<br />
In my excuse: <strong>this is not a release!</strong><br />
<a href="http://www.lghinelli.it/the-ugly-prototyper/" target="_blank">The Ugly Prototyper</a> is on line just to be showed to my friends and to gather opinions</p>
<p><a name="italiano">Italiano:</a><br />
In questo articolo parlo di <a href="http://www.lghinelli.it/the-ugly-prototyper">The Ugly Prototyper</a>, un concept per uno strumento di prototipizzazione.</p>
<p>Ho provato diversi <span class="evidence">software per la prototipizzazione</span> delle pagine web (e più genericamente delle interfacce) e non ho trovato <strong>nessuno</strong> che mi fornisse la possibilità di <span class="evidence">inserire una percentuale</span> ed ottenere in cambio un oggetto della dimensione giusta.<br />
Lo trovo strano, perchè in questo modo per il posizionamento <strong>contiamo solo</strong> sul nostro occhio che potrebbe non essere abbastanza allenato.<br />
Penso che in fase di progettazione, specie se usiamo un <strong>approccio content-driven</strong>, sarebbe un buon punto di partenza poter decidere che l&#8217;header non debba essere più grande del 25%, i contenuti non più piccoli del 33% visualizzandone gli ingombri per <strong>poi</strong> partire con la prototipizzazione ed il design reali.</p>
<p>Nessuno me lo faceva e così ho creato il mio tool.<br />
è stato sviluppato in poche ore notturne, quindi ha parecchi problemi, tra cui che non ha un sacco di funzionalità comode e necessarie, che bisogna ricaricare la pagina se si cambiano le dimensioni dell&#8217;area di lavoro dopo aver già creato almeno un oggetto ed un sacco di altre cose.</p>
<p>A mia discolpa posso dire che <strong>questa non è una release</strong> (e forse non ci sarà mai una release).<br />
<a href="http://www.lghinelli.it/the-ugly-prototyper/" target="_blank">The Ugly Prototyper</a> è messa on line per farsi vedere dagli interessati e raccogliere qualche opinione.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lghinelli.it/blog/2009/enlarge-your-elementis/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>La terza faccia della medaglia</title>
		<link>http://www.lghinelli.it/blog/2009/la-terza-faccia-della-medaglia/</link>
		<comments>http://www.lghinelli.it/blog/2009/la-terza-faccia-della-medaglia/#comments</comments>
		<pubDate>Wed, 21 Oct 2009 13:30:49 +0000</pubDate>
		<dc:creator>lghinelli</dc:creator>
				<category><![CDATA[buone idee]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[bSEM]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web writing]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.lghinelli.it/blog/?p=398</guid>
		<description><![CDATA[Finalmente ci siamo. L&#8217;idea descritta in questi due post: Una faccia della medaglia L&#8217;altra faccia della medaglia è diventata un&#8217;estensione per wordpress. La pagina che la descrive e permette lo scaricamento si chiama: bSEM &#8211; Un grassetto per domarli tutti. L&#8217;idea è esaurientemente spiegata nei due post e nella pagina dedicata, quindi non la riassumerò [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Finalmente ci siamo</strong>.<br />
L&#8217;idea descritta in questi due post:</p>
<ul>
<li><a href="http://www.lghinelli.it/blog/2009/una-faccia-della-medaglia/">Una faccia della medaglia</a></li>
<li><a href="http://www.lghinelli.it/blog/2009/laltra-faccia-della-medaglia/">L&#8217;altra faccia della medaglia</a></li>
</ul>
<p>è diventata un&#8217;estensione per wordpress.<br />
La pagina che la descrive e permette lo scaricamento si chiama: <a href="http://bsem.lghinelli.it">bSEM &#8211; Un grassetto per domarli tutti</a>.</p>
<p><span class="evidence">L&#8217;idea è esaurientemente spiegata</span> nei due post e nella pagina dedicata, quindi <strong>non</strong> la riassumerò nuovamente.</p>
<p>Vorrei però ribadire qualche punto saliente e l&#8217;importanza dell&#8217;estensione.<br />
Il nostro modo di <strong>vivere il testo scritto</strong> è cambiato profondamente.<br />
Mentre <span class="evidence">la pagina stampata era un media fisso</span>, immutabile nel tempo fruire i contenuti scritti sul web (e sui computer in generale) ci permette di <strong>cambiare l&#8217;aspetto del testo al cambiare delle nostre esigenze</strong>.</p>
<p><span class="evidence">Le nostre necessità cambiano</span> tra il momento in cui apriamo la pagina ed il momento in cui effettivamente incameriamo le informazioni<br />
Quindi è giusto che anche la pagina, <strong>per aiutarci</strong>, cambi con noi.<br />
L&#8217;estensione si occupa di <strong>rendere coerente</strong> l&#8217;uso del grassetto con il <span class="evidence">tipo di lettura che stiamo facendo</span>.</p>
<p>Ho scritto anche troppo.<br />
L&#8217;estensione <strong>è attiva</strong> su questo blog.<br />
L&#8217;estensione <strong>è scaricabile</strong> a questo indirizzo: <a href="http://bsem.lghinelli.it">bsem.lghinelli.it</a><br />
L&#8217;estensione è per wordpress, ma <strong>è integrabile</strong> con qualsiasi pagina, basta includere il js, i css e seguire le regole.</p>
<p>Per il momento in attesa che wordpress accetti di ospitare l&#8217;estensione nella directory dei plugin per <strong name="segnalare">segnalare i bug e proporre modifiche</strong> avete a disposizione:</p>
<ul>
<li>i commenti di questo post</li>
<li>email: info@lghinelli.it</li>
<li>wave: lghinelli@googlewave.com</li>
</ul>
<p>Posso <strong>sognare di implementare</strong> una feature?<br />
In un mondo bello, bello in modo assurdo (cit.) l&#8217;estensione assegnerebbe i bSEM alle parole/frasi più significative in base alla provenienza dell&#8217;utente offrendo non solo una lettura più facile, ma anche personalizzata.<br />
Ok, ho esagerato, ma <strong>io nel web semantico ci spero molto</strong>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lghinelli.it/blog/2009/la-terza-faccia-della-medaglia/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Ma te a casa leggi i papiri?</title>
		<link>http://www.lghinelli.it/blog/2009/ma-te-a-casa-leggi-i-papiri/</link>
		<comments>http://www.lghinelli.it/blog/2009/ma-te-a-casa-leggi-i-papiri/#comments</comments>
		<pubDate>Sat, 17 Oct 2009 18:13:11 +0000</pubDate>
		<dc:creator>lghinelli</dc:creator>
				<category><![CDATA[buone idee]]></category>

		<guid isPermaLink="false">http://www.lghinelli.it/blog/?p=407</guid>
		<description><![CDATA[Scopro grazie a questo post Luisa Carrada su Il mestiere di Scrivere che il New York Times ha raccolto alcuni pareri autorevoli sul tema della lettura su schermo. Il tema mi è caro perchè ritengo che sia uno dei campi in cui ancora c&#8217;è molta innovazione da vedere e che vada affrontato in fretta e [...]]]></description>
			<content:encoded><![CDATA[<p>Scopro grazie a questo post Luisa Carrada su <a href="http://mestierediscrivere.splinder.com/post/21505583/Does+the+brain+like+e-books%3F">Il mestiere di Scrivere</a> che il New York Times  ha raccolto alcuni <strong>pareri autorevoli</strong> sul tema della <span class="evidence">lettura su schermo</span>.</p>
<p>Il tema mi è caro perchè ritengo che sia uno dei campi in cui ancora c&#8217;è <span class="evidence">molta innovazione da vedere</span> e che vada affrontato in fretta e di petto liberandoci da alcune <strong>vecchie ragnatele di pensiero</strong> che ci portiamo dietro.</p>
<p>Ho già affrontato un aspetto della questione nei post &#8220;<a href="http://www.lghinelli.it/blog/2009/una-faccia-della-medaglia/">una faccia della medaglia</a>&#8221; e &#8220;<a href="http://www.lghinelli.it/blog/2009/laltra-faccia-della-medaglia/">l&#8217;altra faccia della medaglia</a>&#8221; in cui introduco <strong>il tempo</strong> come variabile da tenere in considerazione per aiutare la lettura di una pagina.</p>
<p>Un altro parametro (di cui ho imparato solo recentemente il nome) è il <span class="evidence">mantenimento degli indici spaziali</span>.<br />
Uno dei <strong>problemi più importanti</strong> quando leggiamo su monitor è lo scroll.<br />
Ogni volta che usiamo la rotella del mouse scorriamo la pagina di un numero arbitrario di righe (su windows e linux il default è 3, ma è impostabile, io uso 2) e questo ci costringe ogni volta a percorrere il testo per <span class="evidence">ritrovare il punto in cui rileggere</span>.</p>
<p>Da qualche anno ormai cerco di costruire un sito che abbia esclusivamente uno scorrimento orizzontale.<br />
Perchè?<br />
Perchè io a casa non ho una collezione di papiri, ma di libri e i libri hanno uno sviluppo orizzontale piuttosto che verticale.<br />
L&#8217;intuizione (non originale, tutte le metafore informatiche sono nate così) è stata di copiare l&#8217;analogico che abbiamo intorno.<br />
Approfondendo l&#8217;intuizione per trasformarla in idea e poi in pratica i punti che ho reputato <strong>minimi ed indispensabili</strong> sono diventati questi:</p>
<ol>
<li>Mantenere le righe di testo ad una lunghezza accettabile (75 caratteri più o meno)</li>
<li>Occupare <strong>tutto</strong> lo spazio verticale possibile</li>
<li>Eliminare <strong>in ogni caso</strong> lo scroll verticale</li>
<li>Fare in modo che lo <strong>scroll orizzontale</strong> non fosse fluido, ma a scatti, di blocco di testo in blocco di testo</li>
</ol>
<p>Il punto forte è il n°4, infatti quello che ci consente una <span class="evidence">lettura più fluida</span> non è la direzione di scorrimento, ma <span class="evidence">facilitare il lavoro dell&#8217;occhio</span>, spostandoci di un blocco di testo l&#8217;occhio va <strong>automaticamente</strong> alla prima lettera della prima riga del nuovo blocco, nessuna confusione, nessun ritardo, <strong>vita più facile</strong>.</p>
<p>Altro punto fondamentale è il n°3, esistendo una <span class="evidence">molteplicità di device e risoluzioni</span> <strong>non possiamo decidere</strong> arbitrariamente di limitare l&#8217;altezza di un blocco di testo a nostro piacimento, farlo provocherebbe <strong>frustrazione</strong> in chi ha un monitor più alto e costringerebbe i monitor minori (cellulari in primis) ad avere uno scroll in due direzioni, cosa che i nostri device di puntamento non ci consentono facilmente.</p>
<p>Un esempio di &#8220;orizzontalizzazione&#8221; dei contenuti è <a href="http://www.thehorizontalway.com/">the horizontal way</a> e come si può vedere nel tentativo di rispettare il punto n°2 rende fissa l&#8217;altezza (da bravo sito web rispetta una risoluzione minima di 1024&#215;768) e non prende in cosiderazione il punto n°4 portando i difetti dello scroll verticale nel &#8220;mondo orizzontale&#8221;.<br />
Sia chiaro che prendo &#8220;The Horizontal Way&#8221; come esempio in quanto uno dei siti che a suo tempo analizzai con più cura e <strong>non certo per criticare</strong> l&#8217;ottimo lavoro Marco Rosella.</p>
<p>Recentemente ho rivisto l&#8217;idea e ho scoperto che <span class="evidence">l&#8217;orizzontale non è necessario</span>, il punto fondamentale è il n°4 e può essere usato in <strong>qualunque direzione</strong>, l&#8217;importante è spostarsi seguendo dei blocchi di testo, meglio se i blocchi hanno anche un <strong>significato semantico</strong>.</p>
<p>La mia idea risale ad ormai anni fa e periodicamente la riprendo in mano, nell&#8217;ultima (recente) rianalisi della questione <strong>ho eliminato</strong>  dai requisiti il punto n°2, il monitor non è una pagina, abbiamo <strong>spazio in tutte le direzioni</strong>, usiamolo. ma questa è un&#8217;altra storia ed un altro post.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lghinelli.it/blog/2009/ma-te-a-casa-leggi-i-papiri/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>L&#8217;altra faccia della medaglia</title>
		<link>http://www.lghinelli.it/blog/2009/laltra-faccia-della-medaglia/</link>
		<comments>http://www.lghinelli.it/blog/2009/laltra-faccia-della-medaglia/#comments</comments>
		<pubDate>Fri, 09 Oct 2009 12:57:22 +0000</pubDate>
		<dc:creator>vandicla</dc:creator>
				<category><![CDATA[buone idee]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web writing]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.lghinelli.it/blog/?p=317</guid>
		<description><![CDATA[In occidente ogni giorno decine di lemuri vengono maltrattati senza ragione questo post è dedicato alla difesa di questi sciacalli. Si, c&#8217;è un errore. Un problema banale di coerenza nel testo: un&#8217;anafora che non funziona come dovrebbe. Talmente banale che non vi sorprenderà sapere che non vincerete un premio per averlo scoperto. Quello che dovrebbe [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>In occidente ogni giorno<br />
decine di lemuri<br />
vengono maltrattati senza ragione<br />
questo post è dedicato alla difesa<br />
di questi sciacalli.</p></blockquote>
<p>Si, c&#8217;è un <strong>errore</strong>. Un problema banale di <span class="evidence"><strong>coerenza</strong></span> nel testo: un&#8217;<a title="Wikipedia &quot;anafora&quot;" href="http://it.wikipedia.org/wiki/Anafora_%28retorica%29" target="_blank">anafora</a> che non funziona come dovrebbe. Talmente banale che non vi sorprenderà sapere che non vincerete un premio per averlo scoperto. Quello che dovrebbe sorprendervi è invece la <span class="evidence">facilità e la precisione</span> con la quale appena letta la parola &#8220;sciacalli&#8221; siete tornati a leggere la parola &#8220;lemuri&#8221;. Se tutto è andato come dovrebbe, non avete riletto il testo per ricercare la parola sbagliata, ma siete direttamente <strong>saltati</strong> alla sua posizione.</p>
<p>Nella frase che segue invece tutto è coerente dal punto di vista semantico:<br />
<!-- p style="padding-left: 30px;" --></p>
<blockquote><p>In occidente ogni giorno<br />
decine di <strong>lemuri</strong> <em>italiani</em><br />
vengono maltrattati senza ragione.<br />
La stessa sorte spetta agli<br />
<strong>sciacalli</strong> <em>francesi</em>.<br />
Un&#8217;altra categoria a rischio sono i <em>falchi</em> <strong>turchi</strong>.</p></blockquote>
<p>Nessun problema semantico in questo caso, eppure anche qui c&#8217;è qualcosa che non va. Questa volta si tratta di <span class="evidence"><strong>coerenza grafica</strong></span>: nelle prime due frasi i nomi di animali (lemuri e sciacalli) sono in grassetto e la loro provenienza (italiani, francesi) è in corsivo. Nella terza questo <strong>codice</strong> è ribaltato.</p>
<p>Dietro a questi due esempi sta buona parte della progettazione dell&#8217;estensione che avete incontrato in un post precedente: «<a href="http://www.lghinelli.it/blog/2009/una-faccia-della-medaglia/" target="_blank">Una faccia della medaglia</a>» e che serve a tenere insieme in una pagina web i <strong>grassetti</strong> che servono ad aiutare la lettura (scelti dal redattore) e i <span class="evidence">grassetti</span> che servono ad ancorare il lettore alle parole chiave di un testo (scelti dal <a href="http://it.wikipedia.org/wiki/Search_Engine_Marketing">SEM</a>) distinguendoli da un punto di vista grafico e temporale. <strong>I grassetti di lettura</strong> servono  a comprendere meglio il testo, i <span class="evidence"><strong>grassetti SEM</strong></span> servono invece a individuare le parole chiave del testo durante una prima <span class="evidence">lettura rapida</span>, per capire se il contenuto ci interessa o no.<br />
C&#8217;è una descrizione più precisa nel <a href="http://www.lghinelli.it/blog/2009/una-faccia-della-medaglia/">post originale</a> a cui vi rimando.</p>
<p>Quello che faremo è invece condividere alcune delle riflessioni sulla <em><a title="Bibliografia sulla User Experience" href="http://whitneyhess.com/blog/2009/06/30/so-you-wanna-be-a-user-experience-designer-step-1-resources/">User Experience</a></em> che hanno animato la fase di design dell&#8217;estensione e che potrebbero servire a dare qualche indicazione sul design di applicazioni web più in generale. Cosa c&#8217;entrino lemuri, sciacalli e falchi lo capirete a breve.</p>
<p>Se avete letto il post precedente capirete di cosa parliamo. Se non l&#8217;avete fatto siete ancora in tempo per <a href="http://www.lghinelli.it/blog/2009/una-faccia-della-medaglia/">farlo</a>.</p>
<p>Fatto? Bene.</p>
<p>La versione che vedete ora (anche in questo post) è solo l&#8217;ultima di una serie di prove, in gergo <span class="evidence">iterazioni</span> che abbiamo testato per decidere quale fosse la maniera migliore di distinguere <strong>graficamente</strong> (<em>come</em>) e <strong>temporalmente</strong> (<em>quanto</em>) ha richiesto lo scambio di un buon numero di mail.<br />
Se vi capitasse di sviluppare qualcosa di simile sappiate che <span class="evidence">un modo sbagliato di ragionare</span> è quello di considerare ogni elemento separatamente:</p>
<ol>
<li>Decidiamo quale sia lo stile migliore da attribuire al grassetto SEM « acceso » per renderlo rapidamente reperibile a una prima lettura;</li>
<li>Poi quale sia lo stile migliore da attribuire al grassetto SEM « spento » per renderlo leggibile a una seconda lettura;</li>
<li>Infine decidere dopo quanto tempo il grassetto SEM deve spegnersi;</li>
</ol>
<p>É quello che abbiamo fatto in un primo momento, rendendoci poi conto che le nostre soluzioni <strong>non potevano funzionare</strong>. Ripercorriamo le <span class="evidence">fasi del design</span>.</p>
<p><strong>Fase 1: </strong>grassetti evidenziati, e testo normale</p>
<p>In un primo momento i grassetti SEM accesi erano evidenziati in rosso: <span style="background-color:#460103; color:#FFF; padding:0 3px 0 3px;">così</span> e quando si disattivavano apparivano come testo normale: cosi.<br />
Soluzione che soddisfaceva pienamente il nostro desiderio di fornire il miglior layout alle due fasi della lettura:<br />
massima <strong>leggibilità</strong> nella prima, minima <strong>distrazione</strong> nella seconda.</p>
<p>Il problema è però che per quanto riguarda <span class="evidence"><strong>l&#8217;Esperienza dell&#8217;Utente </strong></span><strong></strong>queste due fasi di lettura non sono affatto indipendenti: l&#8217;utente coglie informazioni di un certo tipo nella <strong>prima</strong> lettura che poi utilizzerà nella <strong>seconda</strong>, ma non vive una pausa tra le due. Inoltre, come i due esempi di lemuri sciacalli e falchi ci hanno dimostrato, quando leggiamo un testo non ci interessiamo solo al suo contenuto <span class="evidence"><strong>semantico</strong></span>, ma ci serviamo anche della sua <span class="evidence"><strong>posizione</strong></span> e del suo <span class="evidence"><strong>aspetto di superficie</strong></span>: usiamo degli <strong>indici spaziali e grafici</strong> per identificare un contenuto con l&#8217;aspetto che questo ha all&#8217;interno della pagina, in modo da poterlo ritrovare quando diventerà per noi interessante. Il primo esempio ci ha dimostrato quanto possa essere preciso questo meccanismo, e spiega ad esempio perchè fatichiamo cosi tanto a  leggere dei pdf a monitor: ogni volta che facciamo uno scroll perdiamo quegli indici spaziali la cui stabilità costituisce la struttura di superficie del testo che è fondamentale alla sua comprensione.</p>
<p>Da questo punto di vista <strong>la nostra soluzione poneva due problemi</strong>:</p>
<ol>
<li> Il <strong>primo problema</strong> riguarda l&#8217;<span style="background-color:#460103; color:#FFF; padding:0 3px 0 3px;">evidenziazione</span> dei grassetti SEM, che catturavano troppo la nostra attenzione: Lo sfondo rendeva molto &#8220;grafici&#8221; i grassetti e portava a dare poca <span class="evidence">attenzione al testo</span>. Proprio perchè diamo molta importanza alla <strong>struttura di superficie</strong> del testo in questo caso gli occhi rimbalzavano sui blocchi rossi senza fermarsi sul loro contenuto. Per capire quale sia la struttura di superficie del vostro testo e quali elementi attirino maggiormente l&#8217;attenzione potete <span class="evidence"><strong>testare</strong></span> la vostra interfaccia con delle tecniche di <span class="evidence">eye tracking</span>.<br />
Un modo <span class="evidence"><strong>low cost</strong></span> per averne comunque un&#8217;idea approssimativa è quello di sfocare (con Photoshop) un&#8217;immagine della vostra pagina e vedere quali sono le strutture che restano <strong>salienti</strong>. Molto probabilmente l&#8217;occhio seguirà queste strutture.</li>
<li>Il <strong>secondo problema</strong> che avevamo riguardava il passaggio dal <span style="background-color:#460103; color:#FFF; padding:0 3px 0 3px;">grassetto evidenziato</span> al testo normale. Anche in questo caso il problema era dato dal fatto che la struttura con cui l&#8217;utente diventava familiare durante la prima lettura scompariva nella seconda. E questo perchè avevamo considerato la prima e la seconda lettura come due eventi <strong>indipendenti</strong>, mentre in realtà sono <strong>strettamente collegati</strong>: giustamente l&#8217;evidenziazione creava una <span class="evidence">struttura visiva</span> di superficie (delle etichette rosse) che doveva servire a scorrere il testo a una prima lettura. Ma avevamo dimenticato che <strong>aiutare la prima lettura significa fornire le basi per la seconda!</strong><br />
Nel nostro caso la differenza grafica tra grassetti SEM attivi e non attivi era troppo grande, e l&#8217;utente non aveva alcun modo di servirsi nella seconda lettura di quegli indici grafici che aveva incontrato nella prima.</li>
</ol>
<p>La <strong>prima soluzione</strong> è stata quella di sostituire le evidenziazioni con dei  dei grassetti normali. Non abbiamo scelto di adottare un&#8217;evidenziazione meno forte perchè l&#8217;evidenziazione rappresenta un problema in sè: crea degli spigoli. E siccome i nostri occhi sono <strong>attirati</strong> dalle strutture salienti e discontinue come gli spigoli, c&#8217;erano molte meno probabilità che gli occhi cadessero anche sulle parole che si trovano prima o dopo il grassetto. E questo era un male perchè il grassetto dovrebbe si <span class="evidence">attirare lo sguardo</span> sulla parola importante, ma all&#8217;interno di una frase che dovrebbe comunque essere percepita per intero, anche se rapidamente.</p>
<p>Come <strong>seconda soluzione</strong> cosa abbiamo deciso di trasformare i grassetti disattivi in grassetti più &#8220;magri&#8221;, graficamente vicini al testo normale, ma ancora distinguibili. Questo per evitare il problema di <span class="evidence">coerenza</span> visto nel secondo esempio di lemuri, sciacalli e falchi: leggo dei grassetti molto marcati, imparo a distinguerli semanticamente dal testo normale finchè ad un tratto la distinzione scompare e le caratteristiche grafiche che avevo imparato a distinguere si fondono con il testo normale. Rendendoli meno intensi, ma ancora distinguibili dal testo standard, introduciamo non una forte variazione grafica, ma una <strong>modulazione</strong> che permette all&#8217;utente di passare alla seconda lettura mantenendo però gli indici grafici e spaziali che aveva appreso nella prima.</p>
<p><strong>Fase 2: Gestione del tempo</strong><br />
In una seconda fase ci siamo invece occupati del tempo. Per quanto tempo i <span class="evidence">grassetti SEM</span> devono restare attivi ? In un primo momento avevamo deciso di far sparire l&#8217;evidenziazione dopo un numero di secondi pari a quello delle parole evidenziate presenti nella pagina. Ad esempio: 20 parole, 20 secondi. Un ottimo criterio quantitativo, ma che si basa su un&#8217;interpretazione sbagliata delle azioni e delle <span class="evidence"><strong>intenzioni dell&#8217;utente</strong></span>. Questo criterio <strong>funziona solo se</strong> l&#8217;utente durante la prima lettura arriva direttamente in fondo alla pagina subito dopo averla aperta. Ci eravamo dimenticati una possibilità: quella che la pagina fosse aperta, ma letta solo dopo un certo tempo. Una possibilità resa molto probabile dall&#8217;<span class="evidence"><strong>uso dei TAB</strong></span>.</p>
<p>Quante volte vi capita di aprire un nuovo tab e poi leggere la pagina molto tempo più tardi?. Nel tempo che passa tra l&#8217;apertura del tab e l&#8217;effettiva lettura della pagina le nostre evidenziazioni sarebbero sparite, e ci saremmo ritrovati con un gran numero di utenti che non le avrebbe mai viste.<br />
La <strong>soluzione</strong> adottata in questo caso è stata quella di far cominciare il conto alla rovescia solo dopo un periodo di attività del mouse sulla pagine, il che ci garantisce che l&#8217;utente stia scorrendo la pagina quando inizia il conteggio.</p>
<p>Queste modifiche ci lasciano con l&#8217;<span class="evidence"><strong>estensione WordPress</strong></span> che verrà ufficialmente rilasciata nei prossimi giorni (siamo ancora in trattativa per l&#8217;esclusiva con Wired). Ci lasciano anche qualche saggio insegnamento sul <span class="evidence">webdesign</span>: volete costruire una buona User Experience? Prendetevi cura della <strong>coerenza</strong> e  della <strong>continuità</strong>:</p>
<ol>
<li> Gestite in maniera coerente gli <strong>indici grafici e spaziali</strong> che servono all&#8217;utente per <span class="evidence">orientarsi nella semantica</span> del testo. Fate attenzione alla struttura di superficie della vostra pagina.</li>
<li>Prendete in considerazione che l&#8217;utente vive anche <strong>al di fuori della vostra pagina</strong>. Chiedetevi sempre da dove venga, <span class="evidence">cosa voglia fare</span> quando agisce in un certo modo, dove vorrebbe andare poi;</li>
<li>Rendeveti conto che non esiste una sola <strong>categoria di utenti</strong>, ma che il nostro design deve cercare di soddisfarne il più possibile. Non ci sono solo diverse <strong>versioni di browser</strong>, ma diverse pratiche d&#8217;uso del browser: ad esempio c&#8217;è chi legge tutto subito e chi apre tab che leggerà solo in seguito. Pensateci, se progettate <span class="evidence">un&#8217;applicazione che evolve nel tempo</span>.</li>
</ol>
<p><em>Alcuni di voi si staranno ancora chiedendo il senso degli esempi su lemuri, sciacalli e falchi in apertura di post. Ci sono tre risposte:</em></p>
<p><em>la <strong>prima</strong> è che se avessimo voluto inserirli solo per spiegare l&#8217;importanza di indici non semantici e della coerenza superficiale saremmo stati costretti a introdurli con « ora leggete questa frase ». Voi avreste capito che c&#8217;era qualcosa sotto e l&#8217;esempio non avrebbe funzionato cosi bene (mica bello farsi fregare cosi in un post in cui si scrive di User Experience).</em></p>
<p><em>La <strong>seconda</strong> ragione è che certe volte la curiosità di capire dove il post andrà a parare può motivare la lettura più di un buon riassunto.</em></p>
<p><em>La <strong>terza</strong> è che è molto divertente iniziare un post scrivendo di lemuri, sciacalli e falchi.</em></p>
<hr /><a href="http://www.lghinelli.it/blog/author/lghinelli/">lghinelli</a>:<br />
Questo post è il frutto di molte iterazioni tra me e Claudio.<br />
Io avevo cominciato a sviluppare l&#8217;idea e ne ho parlato con lui per avere un feedback.<br />
Il risvolto inaspettato è che l&#8217;idea lo ha interessato molto ed ho quindi potuto accedere al suo specifico corpus di conoscenze imparando molte cose e rendendo l&#8217;estensione di gran lunga migliore rispetto a quanto avrei mai immaginato.</p>
<p><a href="http://www.google.com/profiles/claudio.vandi">Claudio</a> è stato completo e chiaro (ma del resto ne ero sicuro), spero che la lettura sia stata per voi interessante tanto quanto lo è stato per noi il processo che ci ha portato qua.<br />
Mi limito solo a ringraziare di nuovo anche le altre persone che hanno collaborato all&#8217;idea:</p>
<p><a href="http://www.twitter.com/dplastino">dplastino</a> che mi ha spiegato tutto quello che dovevo sapere sul dove e come posizionare correttamente i grassetti per entrambi i tipi di lettura.</p>
<p>Diego (formaldeide) Ricci che per primo ha notato che per gli spider &lt;span class=&#8221;qualcosa&#8221;&gt; non ha lo stesso peso di &lt;strong&gt;è</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lghinelli.it/blog/2009/laltra-faccia-della-medaglia/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Una faccia della medaglia</title>
		<link>http://www.lghinelli.it/blog/2009/una-faccia-della-medaglia/</link>
		<comments>http://www.lghinelli.it/blog/2009/una-faccia-della-medaglia/#comments</comments>
		<pubDate>Thu, 01 Oct 2009 10:20:14 +0000</pubDate>
		<dc:creator>lghinelli</dc:creator>
				<category><![CDATA[buone idee]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web writing]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.lghinelli.it/blog/?p=234</guid>
		<description><![CDATA[Ci siamo evoluti, quando leggiamo sul grande web applichiamo due stili di lettura molto diversi. Il primo è valutativo, una scorsa veloce per decidere se i contenuti meritano la seconda lettura più approfondita. I SEM dicono che i grassetti devono aiutare a catturare l&#8217;utente e quindi devono formare un &#8220;sommario&#8221; del testo che fermi il [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Ci siamo evoluti</strong>, quando leggiamo sul grande web applichiamo <span class="evidence">due stili di lettura</span> molto diversi.<br />
Il primo è <span class="evidence">valutativo</span>, una <strong>scorsa veloce</strong> per decidere se i contenuti meritano la seconda lettura <strong>più <span class="evidence">approfondita</span></strong>.</p>
<p>I SEM dicono che i grassetti devono <span class="evidence">aiutare a <strong>catturare l&#8217;utente</strong></span> e quindi devono formare un &#8220;sommario&#8221; del testo che fermi il lettore sulla pagina, la mia analogica professoressa di italiano, a suo tempo, mi diceva che il grassetto deve fornire un  <strong>appiglio visivo</strong> a quelle parti del testo che sono anche <span class="evidence">semanticamente rilevanti</span>.<br />
Le due cose anche se si assomigliano non sono affatto equivalenti, chi scrive di mestiere <strong>distingue immediatamente</strong> un testo ottimizzato per &#8220;fermare&#8221; il lettore da uno scritto per la lettura approfondita, il lettore passivo invece probabilmente non riesce a razionalizzare la differenza, ma <strong>la sente</strong> come un retrogusto.</p>
<p>Al momento siamo <strong>costretti ad una scelta</strong>, <span class="evidence">un testo deve essere ottimizzato</span> in un modo o nell&#8217;altro, abbiamo solo un tag &lt;strong&gt; e dobbiamo conviverci.</p>
<p>Siccome entrambi i tipi di lettura sono <strong>utili al nostro scopo</strong> di divulgazione/marketing dover scegliere quale adottare oltre ad essere insulso (perchè rinunciamo ad una cosa in cambio di un&#8217;altra di pari valore) ci porta anche ad effettuare una scelta &#8220;artigianale&#8221; di quale <span class="evidence">tipo di lettura sia la più adatta</span> per il nostro testo.<br />
Definisco questa scelta artigianale perchè si basa su <strong>variabili non conoscibili</strong> tramite strumenti tecnici, ma solo sulla percezione che supponiamo il lettore avrà del testo, ponendo quindi l&#8217;effettiva efficacia dell&#8217;articolo al di  fuori del nostro controllo.</p>
<p>Le soluzioni sono due, continuare ad usare la <strong>sensibilità</strong> del nostro editor per decidere che stile usare oppure non accettare <strong>nessun compromesso</strong> e <span class="evidence">distinguere nettamente le due cose</span>.<br />
Un&#8217;aspetto per gli analogici grassetti del professore d&#8217;italiano ed un&#8217;altro per il digitalissimo sommario del SEM.</p>
<p>Il problema è che in questo modo <strong>molta parte</strong> del testo risulterà evidenziata, come può dirvi chiunque <span class="evidence">&#8220;tutto importante = niente importante&#8221;</span> e questo non ci piace per niente.<br />
Ci viene però in aiuto il fatto che i due tipi di lettura sono <strong>temporalmente non contemporanei</strong>, il grassetto SEM compie il grosso del suo scopo nei primi secondi, nel tempo di scorrere la pagina da cima a fondo per decidere se vale la pena leggere tutto, poi passa in secondo piano.<br />
Questo ci suggerisce che il primo tipo di grassetto non è necessariamente permanente sul testo, ma che può scomparire dopo un tempo congruo alla valutazione del testo stesso.</p>
<p>Quindi con due intonacate di javascript e qualche pennellata di css potremmo ottenere un <strong>nuovo strumento</strong> che funzioni all&#8217;incirca così:</p>
<ul>
<li>evidenziazione di tutti i tag &#8220;SEM&#8221; della pagina</li>
<li>calcolo della durata dell&#8217;evidenziazione (in sperimentazione 1 secondo per ogni tag)</li>
<li>scomparsa dell&#8217;evidenziazione &#8220;SEM&#8221; dopo un periodo di inattività del mouse pari alla durata dell&#8217;evidenziazione</li>
</ul>
<p>A riprova che il web non è più il &#8220;one man show&#8221; di qualche anno fa vi informo che anche questa semplice idea è estremamente interdisciplinare, infatti la mia idea iniziale non avrebbe raggiunto un livello soddisfacenze senza:</p>
<p><a href="http://www.twitter.com/dplastino">dplastino</a> che mi ha spiegato tutto quello che dovevo sapere sul dove e come posizionare correttamente i grassetti per entrambi i tipi di lettura.</p>
<p><a href="http://www.google.com/profiles/claudio.vandi">Claudio Vandi</a> che ha rivisto l&#8217;intera idea in un&#8217;ottica di usabilità ed UX oltre ad aver fornito una tonnellata di altri spunti e nuove idee.</p>
<p>Diego (formaldeide) Ricci che per primo ha notato che per gli spider &lt;span class=&#8221;qualcosa&#8221;&gt; non ha lo stesso peso di &lt;strong&gt;</p>
<p>Se notate qualche &#8220;movimento&#8221; strano sulla pagina è perchè sto già sperimentando l&#8217;estensione cercando il giusto equilibrio tra i vari parametri da tenere in considerazione in vista della prima release.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lghinelli.it/blog/2009/una-faccia-della-medaglia/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>non prendetemi SEOriamente</title>
		<link>http://www.lghinelli.it/blog/2009/non-prendetemi-seoriamente/</link>
		<comments>http://www.lghinelli.it/blog/2009/non-prendetemi-seoriamente/#comments</comments>
		<pubDate>Thu, 09 Jul 2009 09:38:06 +0000</pubDate>
		<dc:creator>lghinelli</dc:creator>
				<category><![CDATA[buone idee]]></category>
		<category><![CDATA[puffo con gli occhiali]]></category>
		<category><![CDATA[profezie]]></category>
		<category><![CDATA[seo]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.lghinelli.it/blog/?p=177</guid>
		<description><![CDATA[Io do al massimo 10 anni di vita alla professione di SEO (ma quando mi accaloro dico 5). L&#8217;ottimizzazione per i motori di ricerca consiste nella strenua lotta per far comparire un sito tra i primi posti in un elenco di link ordinato per importanza in base a criteri complicati e pseudopubblici, praticamente qualcosa di [...]]]></description>
			<content:encoded><![CDATA[<p>Io do al massimo <strong>10 anni di vita</strong> alla professione di SEO (ma quando mi accaloro dico 5).<br />
L&#8217;<span class="evidence">ottimizzazione per i motori di ricerca</span> consiste nella strenua lotta per far comparire un sito tra i primi posti in un <strong>elenco di link ordinato per importanza</strong> in base a criteri complicati e pseudopubblici, praticamente qualcosa di simile alla stregoneria.</p>
<p>Il Seo però è una <strong>stregoneria che funziona</strong>, infatti i siti nelle mani di persone capaci salgono di reputazione e valore all&#8217;interno di un elenco di link ordinato e pertanto è una figura essenziale nella progettazione e nel rinnovamento dei siti web.<br />
Un motore di ricerca considera un sito &#8220;meritevole&#8221; sulla base di parecchi parametri, i link entranti, i link uscenti, l&#8217;indicizzabilità dei testi etc etc etc etc etc (<em>ad libitum</em>), per i più comuni parametri esistono delle linee guida rilasciate dai motori di ricerca stessi, per il resto esiste un sottobosco di trucchetti che il seo conserva più o meno gelosamente e che si coltiva con l&#8217;esperienza.</p>
<p>Il trucchetto nascosto in piena vista naturalmente è che il sito sia <strong>sul serio di qualità</strong> , ovvero ricco di contenuti aggiornati spesso e che interessino davvero gli utenti.<br />
Ed ecco quindi il motivo per cui il SEO è un <strong>mestiere solo temporaneo</strong>:<br />
finchè i risultati dei motori di ricerca saranno un elenco di link la valigia dei trucchetti (aka l&#8217;esperienza)  farà la differenza a parità di contenuti, ma nel momento in cui i motori di ricerca daranno dei <strong>risultati in base alla semantica</strong> della richiesta e delle possibili risposte sarà la qualità dei contenuti a comandare senza opposizione.<br />
In quel momento la figura professionale più richiesta per <em>&#8220;migliorare il ritorno del mio investimento su internet&#8221;</em> sarà un <strong>semplice, banale, vecchio tizio</strong> che sceglie la notizia più interessante tra quelle che gli hanno girato i collaboratori oppure se la scrive da solo, in una sola parola: il redattore.</p>
<p>In conclusione il seo è una figura <strong>assolutamente essenziale</strong> in questo periodo storico del web, ma che è fortemente vincolato alla struttura odierna dei motori di ricerca, che però è ormai decisamente pronta per un balzo in avanti (tutte le interfacce sono pronte per un balzo in avanti, si vedano gli schermi sempre più touch ed il fermento attorno al -semantico e il cloud computing).<br />
Sicuramente la professione SEO si evolverà di pari passo con i motori, ma io scommetto diventerà così simile ad un redattore da non vederne la differenza.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lghinelli.it/blog/2009/non-prendetemi-seoriamente/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

