<?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>WebUsabile.it  L'usabilità dei siti web &#187; Approfondimenti</title>
	<atom:link href="http://www.webusabile.it/cat/approfondimenti/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webusabile.it</link>
	<description>Approfondimenti e Novita su Usabilità e Accessibilità</description>
	<lastBuildDate>Sun, 11 Apr 2010 13:04:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>La struttura migliore per un sito web aziendale</title>
		<link>http://www.webusabile.it/la-struttura-migliore-per-un-sito-web-aziendale/</link>
		<comments>http://www.webusabile.it/la-struttura-migliore-per-un-sito-web-aziendale/#comments</comments>
		<pubDate>Sun, 11 Apr 2010 13:04:32 +0000</pubDate>
		<dc:creator>Gianpaolo Lorusso</dc:creator>
				<category><![CDATA[Approfondimenti]]></category>
		<category><![CDATA[struttura informazioni]]></category>
		<category><![CDATA[struttura informazioni web]]></category>
		<category><![CDATA[struttura sito internet]]></category>
		<category><![CDATA[struttura sito web]]></category>

		<guid isPermaLink="false">http://www.webusabile.it/?p=31</guid>
		<description><![CDATA[Come strutturare le informazioni di un sito web aziendale, raggruppare tematicamente i contenuti e offrire riferimenti certi attraverso i menù per migliorare l’esperienza di navigazione degli utenti.]]></description>
			<content:encoded><![CDATA[<p>Normalmente gli utenti navigano sul web con stati d’animo molto variabili, che influiscono in maniera determinante sulle loro capacità di trovare all’interno dei siti quello che cercano e, quindi, sull’esperienza di navigazione che ne ricavano.</p>
<p>Semplificando il concetto al massimo e limitandosi agli atteggiamenti che influiscono in maniera determinante sulla progettazione, esistono sostanzialmente due macro-modalità di esplorare il web: la <strong>navigazione di scopo</strong> e la <strong>navigazione per associazione libera</strong>.</p>
<p>Nella prima, l’utente cerca qualcosa di specifico e semplicemente ignora tutto il resto, incluse le voci di menù e qualsiasi altro elemento che non appare immediatamente connesso al suo obiettivo.</p>
<p>Nella seconda, invece, il navigatore si fa guidare dal suo personale filo logico di associazioni mentali alla ricerca di qualcosa che ritiene interessante dal suo particolare punto di vista.</p>
<p><strong>La suddivisione tra queste due macro-famiglie di “mood” di navigazione è molto labile e mutevole</strong>, e spesso una ricerca cominciata con certe premesse termina su siti che poco o nulla hanno a che fare con gli obiettivi iniziali, dopo aver attraversato parecchi passaggi intermedi e atteggiamenti di navigazione diversi.</p>
<p>Ipotizzando di avere a disposizione contenuti mediamente accettabili, s<strong>e un sito non è ben progettato e non ha una grafica professionale i suoi utenti sperimenteranno all’approfondirsi della navigazione stadi di crescente insofferenza</strong>, che con grande probabilità si tradurranno in un abbandono molto rapido (anche meno di 7 secondi dall’inizio della visita!) .</p>
<p>A parità di contenuti, se il sito invece ha una grafica molto curata ed è ben strutturato, il navigatore si sentirà progressivamente sempre più a suo agio e padrone della situazione e il giudizio finale su chi o cosa viene presentato sarà positivo, anche nel caso di abbandono in tempi brevi.</p>
<p>Per raggiungere il miglior risultato in termini di esperienza di navigazione <strong>è fondamentale strutturare i contenuti in modo che la risposta alle potenziali domande dell’utente sia sempre facilmente raggiungibile</strong>, indipendentemente dal “mood” di navigazione in cui si trova.  Ed ecco le principali regole per poter raggiungere questo obiettivo:</p>
<p><strong>Raggruppare tematicamente i contenuti secondo criteri logici comunemente utilizzati in rete</strong>.  Per poterlo fare, soprattutto in siti medio-grandi, potrebbe essere utile il cosiddetto card sorting, cioè, scrivere i titoli delle singole pagine su dei foglietti per poi farli raggruppare da persone che non hanno lavorato direttamente al progetto .</p>
<p>A queste persone verrà poi chiesto di attribuire un nome ai vari gruppi individuati e le scelte ricorrenti tra gli intervistati potranno essere utilizzate come base per la progettazione esecutiva.</p>
<p><strong>Attribuire ai menu nomi chiari ed inequivocabili </strong>utilizzando parole normalmente usate su Internet per quel tipo di contenuti (l’originalità in questo caso non paga).  Normalmente in tutti i siti Internet commerciali dovrebbero esistere almeno queste 3 sezioni principali:</p>
<p><strong>Area istituzionale</strong> (Chi sei?), in cui si parla dell’azienda e dei suoi valori aggiunti (profilo, mission, certificazioni, partnership, ecc.), si potrebbe chiamare: “chi siamo”, “l’azienda”, “il gruppo XYZ”, l’hotel, ecc.</p>
<p><strong>Area relativa all’offerta</strong> (Che vuoi? Che vendi?), in cui si descrivono i prodotti e/o i servizi promossi attraverso il sito, si può chiamare “servizi”, “prodotti”, “soluzioni”, “le camere” o con diciture note al tipo di utenti che si interessa raggiungere.  A seconda del mercato e delle scelte distributive dell’azienda possono essere integrati in questa, o in un’altra sezione, anche i riferimenti all’eventuale rete fisica di vendita.</p>
<p><strong>Area di contatto</strong> (Dove sei? Come ti contatto?), in cui si riportano le modalità di contatto (attraverso form o alti mezzi), gli indirizzi, i numeri di telefono, le mappe geolocalizzate, ecc., si potrebbe chiamare “contatti”, “contattaci”, “la nostra sede” o simili.</p>
<p>Oltre a queste sezioni base, naturalmente, sono infinite le altre aree che si possono aggiungere (e-commerce, case history, clienti principali, blog, aree riservate, domande frequenti, aree specifiche per singoli prodotti, servizi accessori, ecc.).</p>
<p><strong>Utilizzare nei menù parole chiave ricercate sul web </strong>e fortemente attinenti ai temi trattati nelle pagine di destinazione, in modo da agevolare, oltre agli utenti umani, anche i motori di ricerca. Lo strumento migliore da questo punto di vista è senz&#8217;altro il Google Adwords keyword tool.</p>
<p><strong>Offrire una doppia possibilità di navigazione tra i contenuti principali del sito</strong> (normalmente i prodotti o i servizi commercializzati), pensata sia per chi già conosce l’azienda e cerca informazioni specifiche (ad es. una scheda tecnica o le istruzioni di un prodotto), ma anche per i nuovi utenti che devono essere messi nelle condizioni di capire molto rapidamente (parliamo di meno di 5-7 secondi) di cosa si tratta e se quello che sta guardando può tornagli utile.</p>
<p><strong>I contenuti proposti dovrebbero avere una struttura “progressiva”</strong>, dovrebbero cioè partire nelle pagine più esterne da testi molto semplici, brevi e chiari (ma di richiamo), che puntino a pagine di approfondimento in specifiche sezioni del sito.  Un corollario importante a questa regola è la scelta di inserire eventuali documenti di dettaglio in PDF scaricabili (ad es. schede tecniche, istruzioni, ecc.) .</p>
<p><strong>Un menu di massimo 6-8 voci </strong>e l’uso di box “scorciatoia” e di altri elementi grafici di richiamo diretti a contenuti interni importanti  consentono di rendere intuitiva ed efficace la navigazione del 99% dei siti.</p>
<p>Se non si riesce proprio a raggruppare le pagine in meno di una decina di voci di menù, con ogni probabilità si deve cambiare logica di suddivisione dei contenuti oppure è necessario dividere il portale in più siti (ad esempio, uno per ogni divisione o azienda del gruppo) o minisiti di prodotto.</p>
<p>L&#8217;articolo continua all&#8217;indirizzo:<br />
<a href="http://www.sito-perfetto.it/nc/aggiornamenti-articoli-comunicazione-web/aggiornamenti-disponibili/articolo-selezionato/novita/la-struttura-ideale-per-un-sito-web-commerciale-42.html">http://www.sito-perfetto.it/nc/aggiornamenti-articoli-comunicazione-web/aggiornamenti-disponibili/articolo-selezionato/novita/la-struttura-ideale-per-un-sito-web-commerciale-42.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webusabile.it/la-struttura-migliore-per-un-sito-web-aziendale/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Scegliere e abbinare i colori giusti per un sito web</title>
		<link>http://www.webusabile.it/scegliere-e-abbinare-i-colori-giusti-per-un-sito-web/</link>
		<comments>http://www.webusabile.it/scegliere-e-abbinare-i-colori-giusti-per-un-sito-web/#comments</comments>
		<pubDate>Mon, 22 Feb 2010 18:43:16 +0000</pubDate>
		<dc:creator>Gianpaolo Lorusso</dc:creator>
				<category><![CDATA[Approfondimenti]]></category>
		<category><![CDATA[abbinamento colori]]></category>
		<category><![CDATA[colori sito]]></category>
		<category><![CDATA[colori web]]></category>

		<guid isPermaLink="false">http://www.webusabile.it/?p=27</guid>
		<description><![CDATA[Come si scelgono i colori per un sito web? Quali le considerazioni da fare per accostare i colori all'interno di un sito Internet in modo da migliorare l'esperienza di navigazione degli utenti?]]></description>
			<content:encoded><![CDATA[<p><strong>Il cervello umano percepisce ed elabora i colori di un sito in meno di un secondo</strong>, registrando una sensazione positiva o negativa che poi accompagnerà l’utente durante tutto il resto della navigazione.<br />
Il primo sguardo è come la presentazione di uno sconosciuto, le valutazioni iniziali si basano soprattutto su aspetti inconsci, ed i colori sono sicuramente il biglietto da visita più evidente in questo senso.</p>
<p>Sfortunatamente <strong>non esiste un “codice cromatico” univoco e condiviso in tutte le culture mondiali </strong>(ad esempio, il nero, che contraddistingue il lutto in molti paesi occidentali, è segno di ricchezza ed abbondanza in quella cinese).  Esistono però delle considerazioni di fondo universalmente valide che si dovrebbero sempre tenere presenti nella scelta e nell’abbinamento dei colori.</p>
<p>Le impostazioni grafiche di maggiore successo sono quelle che <strong>non prevedono l’uso di più di tre o quattro colori principali</strong> (uno sfondo e due, massimo tre colori per il testo e le evidenziazioni).<br />
E’ bene poi realizzare prima di tutto uno schema in bianco e nero per poi aggiungerci i colori, in modo da poter così valutare l’impatto di differenti combinazioni alternative.</p>
<p>Per quanto riguarda il testo sarà meglio <strong>evitare sia colori ad alto contrasto</strong> (il classico nero su bianco) <strong>che colori chiari su sfondo bianco o scuri/blu su sfondo scuro</strong>, infatti, entrambe le combinazioni alla lunga tendono ad essere piuttosto stressanti per gli occhi. I colori del testo devono essere utilizzati in maniera uniforme (uguale per tutta la pagina) ed intelligente, in modo da attirare e dirigere l’attenzione dell’utente sui concetti più importanti o sulle azioni di maggiore interesse per il webmaster (iscrizione alla newsletter, richiesta informazioni, acquisto, ecc.).</p>
<p>In ogni caso, <strong>il segreto di una scelta cromatica vincente più che nella selezione dei singoli colori è nel loro giusto abbinamento</strong>.</p>
<p>Esistono <strong>numerose classificazioni internazionali di colori</strong> che si differenziano principalmente perché la scala cromatica completa viene ottenuta per aggiunta di un colore ad un altro (mescolanze additive, l’esempio tipico è un supporto fisico su cui vengono passati uno dopo l’altro vari colori per ottenere quello finale), oppure per sottrazione (mescolanze sottrattive, l’esempio classico è quello di un fascio di luce il cui colore è ottenuto affievolendo uno o più dei colori di base).</p>
<p>Le classificazioni più diffuse si basano su 3 o 4 colori primari che con successive mescolanze originano poi tutti gli altri fino a costruire le cd. &#8220;<strong>ruote cromatiche</strong>&#8220;.</p>
<p><strong>La scelta tra combinazioni di colori complementari </strong>(formati cioè da solo due colori di base, e quindi vicini sulla ruota cromatica)<strong> o contrastanti </strong>(in posizioni opposte sulla ruota cromatica) <strong>dipende dalla finalità che si vuole raggiungere.</strong></p>
<p>Infatti, colori contrastanti attirano molto l’attenzione sull&#8217;area o sul testo in cui li si usa, ma alla lunga risultano stressanti per l’occhio, mentre quelli complementari sono più armoniosi, ma evidenziano meno il contenuto rappresentato.  La giusta via è come sempre quella dell’<strong>uso equilibrato di entrambi gli accostamenti</strong>, preferendo colori contrastanti se si ha necessità di dare risalto ad un certo elemento, colori complementari se invece si vuole favorire la lettura approfondita e si vuole attribuire pesi sostanzialmente equivalenti a tutte le parti dell&#8217;interfaccia.</p>
<p>Non esistono ovviamente schemi cromatici migliori in senso assoluto, tuttavia l<strong>e combinazioni di colori già normalmente presenti in natura sembrano essere le più apprezzate</strong> (si pensi ad esempio ad un tramonto o ad una foresta, paesaggi montani o marini, il cielo e le nuvole, e così via).</p>
<p>In generale è poi possibile affermare che <strong>i colori caldi</strong> (formati da combinazioni in cui prevalgono il rosso ed il giallo) <strong>devono essere utilizzati quando si vuole sottolineare in maniera decisa il testo o qualche elemento grafico</strong> particolare, in quanto tendono ad &#8220;avanzare&#8221; (cioè ad emergere dal supporto), <strong>mentre quelli freddi</strong> (in cui prevale il blu), <strong>quando si vuole sottolineare l’aspetto professionale, oppure, come sfondo </strong>(in quanto il blu tende ad essere recessivo, cioè ad &#8220;allontanarsi&#8221; e a vedersi meno in distanza).</p>
<p>Entrambe le combinazioni (quella a base calda e quella a base fredda) risultano comunque abbastanza annoianti alla lunga se non “contaminate” l’una dall’altra.</p>
<p>Esistono anche due variabili tecniche da considerare: la risoluzione e la tavolozza dei colori utilizzata dai video e dai computer dei navigatori.  Infatti, usare combinazioni di colori <strong>al di fuori dei 216 colori base sicuramente presenti nei PC/Macintosh di tutto il mondo</strong>, potrebbe comportare variazioni degli effetti cromatici riprodotti. Tuttavia i progressi tecnici in questo senso sono continui e queste limitazioni devono ormai essere considerate superate.</p>
<p>Infine è bene utilizzare combinazioni che siano formate da colori con tonalità (luminosità) diverse, perché altrimenti i nostri contenuti sarebbero illeggibili per chi soffre di cecità ai colori.</p>
<p>Da tempo il marketing ha identificato il rosso, il marrone ed il blu, in tutte le loro variazioni di tonalità, come i colori meno rischiosi e più ampiamente graditi.</p>
<p>In particolare <strong>il rosso</strong> è considerato il colore della passione, quello che più potentemente richiama l’attenzione e spinge efficacemente all’azione, tuttavia viene collegato anche a comportamenti errati o pericolosi, aggressività, errori, violenza ed eccitazione, e, quindi, è bene non eccedere nel suo uso soprattutto se si ha a che fare con utenti professionali.</p>
<p><strong>Il marrone</strong> (e tutte le tonalità comprese tra questo ed il rosso) mitiga questi aspetti negativi conferendo maggiore stabilità e credibilità. Tutte le varianti sul colore delle terrecotte sembrano essere molto gradite (soprattuto agli utenti europei), probabilmente perché richiamano colori e temi mediterranei.</p>
<p>Meno acceso del rosso, ma anche molto meno efficace nel provocare una reazione,<strong> il rosa</strong> richiama invece aspetti romantici, femminili e non violenti.</p>
<p><strong>L’arancio</strong> è il più stabile e rassicurante tra i colori della terra (in quanto combinazione del rosso, che richiama l’azione, con il giallo, che richiama allegria), spesso associato ad offerte speciali, implica energia, equilibrio, estroversione ed apertura. Nelle sue varianti associate ai colori degli agrumi è in grado di stimolare gli appetiti dell’osservatore.</p>
<p><strong>Il giallo</strong> richiama invece la brillantezza, il calore, l’originalità e la spiritualità.  Di difficile abbinamento, in quanto tende a scomparire sui colori chiari, va spesso sottolineato con colori più forti.  Le sue varianti più scure (eccettuato il color oro, legato da sempre al benessere economico) sono invece da evitare in quanto collegate a concetti negativi, come gli stati di malattia.</p>
<p>Considerato come il colore universalmente più gradito, soprattutto dagli uomini, <strong>il blu</strong>, evoca calma, professionalità, affidabilità e saggezza. E’ sicuramente tra i colori meno rischiosi da utilizzare, a meno che non si commercializzino alimenti (visto che calma la fame). Nelle sue varianti più scure rappresenta potere, conoscenza, integrità e saggezza, in quelle chiare, salute, tranquillità e delicatezza.</p>
<p><strong>Il verde</strong> invece, è uno tra i colori più riposanti e gradevoli per il cervello umano, in quanto richiama la natura, l’armonia e la stabilità. Ha anche proprietà curative ed, in opposizione al rosso, denota un procedimento o una area sicura (come per i semafori). Nella cultura nord americana le sue varianti più scure richiamano il colore del denaro.</p>
<p>I colori <strong>rosso-viola e blu-viola</strong> nelle loro varie combinazioni (tra cui anche il porpora) associano la stabilità del blu all’energia del rosso. Alcune varianti denotano nobiltà, lusso, mistero e magia, quelle più scure però richiamano i colori del lutto.</p>
<p><strong>Il bianco</strong> è considerato il colore della perfezione. Richiama concetti di purezza, innocenza, verginità pulizia e lucentezza. In opposizione al nero ha spesso un significato positivo. Può essere associato anche al freddo (in analogia con la neve), ad ospedale e medici o a prodotti dietetici.</p>
<p><strong>Il nero</strong> è invece associato all’eleganza, al potere, al male, al mistero, alla paura ed alla morte. Molto formale, denota anche prestigio ed autorità, conferisce profondità alle prospettive e diminuisce la leggibilità dei testi se usato come sfondo. Combinato con colori rosso-arancio dà vita a schemi cromatici estremamente aggressivi.</p>
<p>Autore: <a href="http://www.gplorusso.it" target="_blank">Gianpaolo Lorusso</a><br />
Articolo tratto da: <a href="http://www.sito-perfetto.it">www.sito-perfetto.it</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webusabile.it/scegliere-e-abbinare-i-colori-giusti-per-un-sito-web/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Scegliere il font giusto per un sito web</title>
		<link>http://www.webusabile.it/scegliere-il-font-giusto-per-un-sito-web/</link>
		<comments>http://www.webusabile.it/scegliere-il-font-giusto-per-un-sito-web/#comments</comments>
		<pubDate>Sat, 13 Feb 2010 15:15:45 +0000</pubDate>
		<dc:creator>Gianpaolo Lorusso</dc:creator>
				<category><![CDATA[Approfondimenti]]></category>

		<guid isPermaLink="false">http://www.webusabile.it/?p=22</guid>
		<description><![CDATA[Come scegliere i font più giusti per i siti web, la dimensione, i tipi di caratteri web safe, la scelta tra graziati o senza grazie, la formattazione dei link, le indicazioni principali per scegliere il carattere più adatto al tuo sito e per formattarlo nel modo giusto.]]></description>
			<content:encoded><![CDATA[<p>La scelta del font giusto per un sito web è argomento tutt&#8217;altro che banale e influenza in modo netto sia la sua usabilità che l&#8217;impatto emotivo del suo layout grafico.</p>
<p>Innanzitutto partiamo da una considerazione tecnica. Per qualsiasi interfaccia visualizzata su computer sarebbe meglio utilizzare caratteri cosiddetti web safe (sono chiamati così perchè installati di default  praticamente su tutti i computer del mondo).</p>
<p>Scegliendo un carattere appartenente a una di queste famiglie potremo essere ragionevolmente sicuri che il nostro lettore non vedrà testi scritti con caratteri molto diversi da quello che noi abbiamo scelto originariamente. Le famiglie di caratteri web safe sono:</p>
<ul>
<li><strong>Arial</strong><span style="font-family: Arial"><br />
Esempio di testo in Arial<br />
</span></li>
<li><strong>Courier</strong><br />
<span style="font-family: Courier">Esempio di testo in Courier<br />
</span></li>
<li><strong>Georgia</strong><br />
<span style="font-family: Georgia">Esempio di testo in Georgia<br />
</span></li>
<li><strong>Helvetica<br />
</strong><span style="font-family: Helvetica">Esempio di testo in Helvetica<br />
</span></li>
<li><strong>Tahoma</strong><br />
<span style="font-family: Tahoma">Esempio di testo in Tahoma<br />
</span></li>
<li><strong>Times New Roman</strong><br />
<span style="font-family: Times new roman">Esempio di testo in Times New Roman<br />
</span></li>
<li><strong>Verdana<br />
</strong><span style="font-family: Verdana">Esempio di testo in Verdana</span></li>
</ul>
<p>Questa distinzione sta comunque gradualmente perdendo importanza, perchè il numero di caratteri installati di default nei sistemi di tutto il mondo continua a crescere. Inoltre ci sono vari modi per far visualizzare un certo carattere in un browser che non lo avesse già installato&#8230; Ma perchè complicarsi inutilmente la vita? ;-)</p>
<p>Altra distinzione molto importante è tra i caratteri con grazie o senza grazie (serif o sans serif). Le grazie sono quei fregi posti alle estremità delle cuspidi delle lettere. Consierando gli esempi sopra riportati vi accorgerete subito che l&#8217;arial, l&#8217;Helvetica, il Tahoma e il Verdana ne sono prive, mentre il Courier, il Georgia e il Times New Roman le hanno.</p>
<p>Generalmente per i testi non troppo lunghi (ad es.: i titoli), a rapido scorrimento (ad es.: le newsletter, i siti web o i cartelli stradali) o in condizioni di stress visivo (ad es.: nei monitor dei computer) risultano più leggibili caratteri senza grazie.</p>
<p>Invece nei testi piuttosto lunghi (ad es.: E-book o schede prodotto molto dettagliate), stampati su carta (ad es.: libri), molto piccoli o ben contrastati (scritte nere su fondo bianco) risultano più leggibili caratteri con le grazie.</p>
<p>Queste indicazioni vanno però prese come suggerimenti molto generali, perchè dovrebbero essere sempre calate nell&#8217;interfaccia grafica che le contorna per avere validità.</p>
<p>A meno di casi molto particolari, non conviene comunque mai accostare più di 2-3 caratteri diversi in uno spazio ristretto, in quanto ciò potrebbe generare una inconsapevole impressione di confusione.</p>
<p>Altro aspetto molto importante da valutare è la chiusura o apertura dei caratteri. Si dice che un carattere è più chiuso (o meno aperto) quanto più i suoi contorni esterni assomigliano a una &#8220;o&#8221; &#8211; &#8220;O&#8221;.</p>
<p>Più i caratteri sono aperti è più risultano leggibili, in quanto offrono all&#8217;occhio del lettore maggiori punti di riferimento nella lettura rapida.</p>
<p>Va infatti considerato che noi non leggiamo ogni lettera di ogni singola parola ma le &#8220;riconosciamo&#8221; guardandone la parte superiore e l&#8217;inizio e la fine.</p>
<p>Per questo motivo le stesse parole scritte con caratteri minuscoli (o con solo la prima lettera maiuscola) rispetto a quelle scritte tutte in maiuscolo risultano molto più leggibili, perchè la maggiore variabilità di altezza e di forma delle lettere ne facilita notevolmente il riconoscimento rapido.</p>
<p>Da questo punto di vista va anche tenuto presente che l&#8217;uso intelligente dei grassetti per evidenziare i concetti fondamentali all&#8217;interno di una frase è un grandissimo aiuto alla rapidità di &#8220;scansione&#8221; visiva e concettuale di un testo.</p>
<p>Altro aspetto fondamentale che può coinvolgere l&#8217;usabilità dei testi è la formattazione dei link. Gli utenti web sono abituati a identificare come cliccabili i testi colorati in blu e sottolineati, perchè tutti i browser identificano in questo modo i link a cui non sia stato dato un formato diverso da parte di chi ha realizzato il sito.</p>
<p>E&#8217; bene tenere presente questo fattore e non richiedere al lettore (magari già provato dai concetti che esprimiamo) un extra sforzo per capire dove può cliccare. Ma soprattutto, una volta che si è identificato il format giusto per i link, usiamo sempre e solo quello in tutto il sito, senza formattare allo stesso modo testo che non è invece cliccabile.</p>
<p>Gianpaolo Lorusso<br />
<a href="http://www.sito-perfetto.it">www.sito-perfetto.it</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webusabile.it/scegliere-il-font-giusto-per-un-sito-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Usabilità della Home Page di un sito Web</title>
		<link>http://www.webusabile.it/usabilita-della-home-page-di-un-sito-web/</link>
		<comments>http://www.webusabile.it/usabilita-della-home-page-di-un-sito-web/#comments</comments>
		<pubDate>Mon, 30 Nov 2009 10:07:39 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Approfondimenti]]></category>

		<guid isPermaLink="false">http://www.webusabile.it/?p=17</guid>
		<description><![CDATA[Usabilità sito web : strutturiamo al meglio la nostra homepage in modo da attirare gli utenti che la visitano (alcune regole da rispettare).
In questo articolo “ringraziando” Jacob Nielsen vengono  elencate una serie di buone regole da tenere in considerazione per progettare al meglio la nostra home page.
Di solito è il primo e fondamentale elemento [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Usabilità sito web : strutturiamo al meglio la nostra homepage in modo da attirare gli utenti che la visitano (alcune regole da rispettare).</strong><br />
In questo articolo “ringraziando” Jacob Nielsen vengono  elencate una serie di buone regole da tenere in considerazione per progettare al meglio la nostra home page.<br />
Di solito è il primo e fondamentale elemento tenuto in considerazione dai nuovi utenti per decidere se esplorare o meno il vostro sito.<br />
Questo risulta particolarmente vero per siti prettamente commerciali, dove il nuovo cliente tende a decidere se fare o meno affari con voi basando la sua scelta dalla semplice “scansione” della homepage.</p>
<p>Seppur gli utenti non vi arrivino direttamente (ricerche da un motore di ricerca portano spesso a pagine interne del sito), una delle prime cose che essi fanno una volta nel sito è andare nella sua homepage.</p>
<p><strong>Ecco i 4 punti principali  che una homepage deve rispettare:</strong></p>
<ol>
<li><strong>Esprimere chiaramente i propositi del nostro sito web. Spieghiamo chi siamo e cosa facciamo;</strong></li>
<li><strong>Aiutiamo gli utenti a trovare quello di cui necessitano;</strong></li>
<li><strong>Usiamo elementi grafici per migliorare l’interazione, non per definirla ;</strong></li>
<p>Iniziamo  l’home page con una “tagline”  ovvero una frase che spiega cosa sia il sito e i suoi propositi.</p>
<p>Cerchiamo di scrivere un buon titolo (mediante l’uso dell’elemento ), evitando l’uso di prefissi (come l’articolo “Il”) o frasi fatte (“Benvenuti nel sito di…”).</p>
<p>Raggruppiamo  tutte le informazioni dettagliate che ci riguardano in  un area distinta (anche in una pagina a parte).<br />
Raramente il primo obbiettivo degli utentiche visitano il sito è ottenenere informazioni su di noi.</p>
<li><strong>Mostriamo chiaramente il contenuto che il nostro sito fornisce;</strong></li>
</ol>
<p>Forniamo un box di ricerca, in modo che possa contenere al più 27 caratteri visibili (dato ottenuto da un accurata analisi, datata nel 2008, effettuata dal Nielsen&amp;Norman’s Group).</p>
<p>Mostriamo i nostri ultimi articoli/prodotti facendo capire in questo modo quale sia il vero contenuto del sito.</p>
<p>Scriviamo ogni link in modo che inizi con le parole più rilevanti perché gli utenti “scansionano” la pagina, non la leggono. Un link composto da parole rilevanti è più facilmente individuabile dalla scansione da loro operata.</p>
<p>Manteniamo sempre una lista di (link) riferita ai contenuti più recenti e significativi.</p>
<p>Usiamo un layout “liquido” in modo che si adatti alle dimensioni della finestra del browser, in modo da permettere una corretta visualizzazione  dell’home page (e del resto del sito) a seconda del device usato.<br />
Scegliamo colori differenti per distinguere link visitati da link non visitati. L’utente deve sempre sapere da dove è già passato.<br />
Usiamo un bottone con etichetta “Cerca” sulla destra del box di ricerca. Principio del “less is more” : meno cose ci sono da valutare, piu’ le persone capiscono di cosa si stia parlando.</p>
<p>I menu presenti nel sito dovrebbero essere giustificati a sinistra, in modo che gli occhi degli utenti non debbano ogni volta capire  dov’è l’inizio della nuova linea nominando ogni elemento del menu con una o due  parole informative.</p>
<p>Giustificando il menu principale  a sinistra riduciamo la velocità con cui l’utente scansiona i menu e seleziona le opzioni  che stava cercando.</p>
<p>Evitiamo di usare tutte parole maiuscole  per gli elementi del menu, poiché questo riduce  la loro leggibilità del 10%.</p>
<p>Inseriamo una mappa del sito dove rappresenterà una sorta di guida per il nostro sito.</p>
<p>Seppur sia usata poco dagli utenti (solo il 7%), è di fondamentale importanza: oltre ad essere un “secondario” mezzo di navigazione , aiuta gli utenti ad uscire  da quei momenti in cu si sentono persi nel sito, evitando che lo lascino (sarebbe una sorta di “ultima spiaggia”).</p>
<p>Cerchiamo di scrivere il testo in modo da avvicinarci al metodo che gli utenti usano per leggere in modo da avere più garanzie che il testo venga effettivamente letto.</p>
<p>Le persone raramente leggono le pagine parola per parola. Al contrario “scansionano” la pagina scegliendo determinate frasi o parole singole.</p>
<p>Studi di eyetracking svolti recentemente hanno messo in evidenza come gli utenti siano soliti a seguire una sorta pattern di lettura a (“F”) ben definito nell’approcciarsi alle pagine Web:</p>
<p>• Prima leggono con un movimento orizzontale, normalmente sulla prima parte dell’area relativa al contenuto</p>
<p>• Poi si spostano un pochino sotto dalla posizione precedente e rieffettuano un secondo movimento orizzontale, che normalmente copre un’area più piccola del precedente movimento</p>
<p>• Infine scansionano la parte sinistra dell’area del contenuto secondo un movimento verticale.</p>
<p>Quindi cerchiamo di inserire nei primi due paragrafi le informazioni più significative.<br />
Le parole all’inizio di ogni titolo devono essere cariche di informazioni.<br />
Forniamo titoli significativi ale varie sezioni della pagina;<br />
cerchiamo di usare al più la metà delle parole  che di solito usiamo nella scrittura “convenzionale”.</p>
<p>Dai studi ottenuti di “eyetracking” gli utenti spendono 25 secondi  + 4.4 secondi in più ogni 100 parole e cercano di leggere la metà dellel informazioni  solo se la pagina contiene  meno di 111 parole.</p>
<p><a href="http://www.upvision.it/" target="_blank">Siti Web a Lecce</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webusabile.it/usabilita-della-home-page-di-un-sito-web/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Preparazione ed esecuzione di un test di usabilità (Seconda Parte)</title>
		<link>http://www.webusabile.it/preparazione-ed-esecuzione-di-un-test-di-usabilita-seconda-parte/</link>
		<comments>http://www.webusabile.it/preparazione-ed-esecuzione-di-un-test-di-usabilita-seconda-parte/#comments</comments>
		<pubDate>Wed, 24 Jun 2009 05:41:44 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Approfondimenti]]></category>

		<guid isPermaLink="false">http://www.webusabile.it/?p=13</guid>
		<description><![CDATA[Nel precedente articolo sono state descritte le fasi preliminari di un test di usabilità, oggi invece vedremo come eseguire quest&#8217;ultimo.
Per prima cosa l&#8217;administrator ha il compito di descrive scenario e task all&#8217;utente, quindi, dopo essersi sincerato che questo abbia compreso tutto, si posiziona il foglio di carta, precedentemente riempito con scenario e task, davanti all&#8217;utente, [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.webusabile.it/preparazione-ed-esecuzione-di-un-test-di-usabilita-prima-parte/">Nel precedente articolo</a> sono state descritte le fasi preliminari di un test di usabilità, oggi invece vedremo come eseguire quest&#8217;ultimo.</p>
<p>Per prima cosa l&#8217;administrator ha il compito di descrive scenario e task all&#8217;utente, quindi, dopo essersi sincerato che questo abbia compreso tutto, si posiziona il foglio di carta, precedentemente riempito con scenario e task, davanti all&#8217;utente, in modo che possa leggerlo quante volte vuole, fatto ciò si procede con l&#8217;apertura del sistema interattivo, che ad esempio, nel caso di un sito web consiste nella home page.</p>
<p>Mentre l&#8217;utente svolge il test, l&#8217;administrator non da mai risposte precise alle eventuali domande, a meno che queste non riguardino scenario e/o task.</p>
<p>Nel frattempo l&#8217;observer prende nota di azioni svolte dall&#8217;utente (es. click su un dato link), tempi in cui vengonos svolte, aspettative dichiarate dell&#8217;utente in think aloud relative alle suddette azioni (es. &#8216;clicco quì cosi vado alla pagina dei numeri di telefono&#8217;), osservazione e/o domande fatte dall&#8217;utente all&#8217;administrator e risposte di quest&#8217;ultimo.</p>
<p>Il test termina perché l&#8217;utente ha completato il task oppure perché questo dichiara che il task non è completabile.<br />
Alla conclusione del test è buona norma di comportamento ringraziare nuovamente l&#8217;utente per l&#8217;aiuto datoci.</p>
<p>Con la lettura di questo e del precedente articolo avrete appreso a lunghe linee come viene preparato ed eseguito un test di usabilità di un sistema interattivo.</p>
<p>Nei successivi articoli continueremo il discorso testando l&#8217;usabilità di un sito web esistente seguendo le &#8220;Dieci Euristiche di Nielsen&#8221;.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webusabile.it/preparazione-ed-esecuzione-di-un-test-di-usabilita-seconda-parte/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Preparazione ed esecuzione di un test di usabilità (Prima Parte)</title>
		<link>http://www.webusabile.it/preparazione-ed-esecuzione-di-un-test-di-usabilita-prima-parte/</link>
		<comments>http://www.webusabile.it/preparazione-ed-esecuzione-di-un-test-di-usabilita-prima-parte/#comments</comments>
		<pubDate>Mon, 22 Jun 2009 15:40:49 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Approfondimenti]]></category>
		<category><![CDATA[test a b]]></category>

		<guid isPermaLink="false">http://www.webusabile.it/?p=11</guid>
		<description><![CDATA[Nei precedenti articoli abbiamo trattato una tecnica di valutazione (A/B test) ed un modello di progettazione per un sistema interattivo (waterfall model), non vorrei però che tante nozioni teoriche finiscano per annoiare i lettori, quindi oggi passeremo alla pratica e nello specifico vedremo come realizzare ed eseguire un test di usabilità.
Il primo punto da analizzare [...]]]></description>
			<content:encoded><![CDATA[<p>Nei precedenti articoli abbiamo trattato una tecnica di valutazione (<a href="http://www.webusabile.it/i-test-di-norma-due-ab/">A/B test</a>) ed un modello di progettazione per un sistema interattivo (<a href="http://www.webusabile.it/waterfall-model-modello-a-cascata-e-programmazione-agile/">waterfall model</a>), non vorrei però che tante nozioni teoriche finiscano per annoiare i lettori, quindi oggi passeremo alla pratica e nello specifico vedremo come realizzare ed eseguire un test di usabilità.</p>
<p>Il primo punto da analizzare è la scelta dello scenario nel quale dovrà calarsi l&#8217;utente per eseguire il test.<br />
Ad esempio: sei un dipendente delle Agenzie delle Entrate, ti viene indicato dal tuo superiore di contattare il Sig. Mario Rossi e ricordargli che il suo ultimo pagamento non ci è pervenuto.</p>
<p>Quindi si procederà alla creazione di uno o più compiti (task) da far eseguire all&#8217;utente.<br />
Ad esempio: accedi al software in dotazione alle Agenzie delle Entrate e cerca il numero di telefono del Sig. Mario Rossi.</p>
<p>Scenari e task vengono scritti su di un foglio di carta bianco.</p>
<p>Il numero minimo di persone coinvolte in un test di usabilità sono tre, di cui:</p>
<p>1.<strong> Administrator</strong>, colui che parla con l&#8217;utente e guida il test;<br />
2. <strong>Observer</strong>, colui che sta in silenzio tutto il tempo e prende nota di tutto quello che fa l&#8217;utente. Questo non deve mai interagire con l&#8217;utente, in nessun caso.<br />
3. <strong>L&#8217;utente</strong>, colui che ci aiuterà a svolgere il test.</p>
<p>Prima di cominciare l&#8217;utente va messo a suo agio e gli deve essere sottolineato il fatto che non è lui ad essere sotto test, ma il sistema interattivo e, ovviamente ringraziarlo già da subito per il tempo messoci a disposizione.</p>
<p>E&#8217; buona norma inoltre invogliare l&#8217;utente a pensare ad alta voce (think aloud), in modo da facilitare il lavoro dell&#8217; Observer e portare alla luce, grazie a considerazioni personali fatte sul momento, punti di vista, problematiche e/o punti di forza, notati durante il test.</p>
<p>Per ora abbiamo visto solo i punti preliminari che precedono l&#8217;esecuzione vera e propria di un test di usabilità, nel prossimo articolo vedremo invece come eseguire realmente quest&#8217;ultimo.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webusabile.it/preparazione-ed-esecuzione-di-un-test-di-usabilita-prima-parte/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Waterfall model &#8220;Modello a Cascata&#8221; e Programmazione Agile</title>
		<link>http://www.webusabile.it/waterfall-model-modello-a-cascata-e-programmazione-agile/</link>
		<comments>http://www.webusabile.it/waterfall-model-modello-a-cascata-e-programmazione-agile/#comments</comments>
		<pubDate>Wed, 10 Jun 2009 14:39:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Approfondimenti]]></category>

		<guid isPermaLink="false">http://www.webusabile.it/?p=7</guid>
		<description><![CDATA[Sono orami anni che guida lo sviluppo dei sistemi interattivi più disparati, sia fissi che mobili: il Waterfall Model o come piace chiamarlo a noi italiani Modello a Cascata è sicuramente il punto di riferimento per i progettisti, qualunque tipo di sistema essi abbiano intenzione di realizzare.
La particolarità di questo modello è il numero di [...]]]></description>
			<content:encoded><![CDATA[<p>Sono orami anni che guida lo sviluppo dei sistemi interattivi più disparati, sia fissi che mobili: il Waterfall Model o come piace chiamarlo a noi italiani <strong>Modello a Cascata</strong> è sicuramente il punto di riferimento per i progettisti, qualunque tipo di sistema essi abbiano intenzione di realizzare.</p>
<p>La particolarità di questo modello è il numero di feedback, teoricamente infinito che è possibile ricavare da ogni fase, la quale, se necessario, può essere ripetuta un gran numero di volte, fino al raggiungimento di quello che si considera un risultato sufficiente a soddisfare vincoli, siano essi progettuali o di usabilità del sistema.</p>
<p>Forse il lettore conosceva già il modello e le sue caratteristiche fondamentali, ma probabilmente per molti di voi il termine “Programmazione Agile” è sconosciuto.</p>
<p>Si tratta di una tecnica di programmazione, non nel senso pratico della parola, bensì nel modo in cui si interagisce con il Cliente e con il gruppo di lavoro.<br />
Per apprendere la tecnica un paragone con il passato è d’obbligo: anni fa al programmatore o al gruppo di programmatori veniva assegnato un progetto, generalmente questo consisteva di un manoscritto in cui erano presenti informazioni relative al software da sviluppare, vincoli imposti e funzionalità richieste.</p>
<p>Il programmatore arrivato alla data di scadenza, impostagli dal Cliente si presentava da questo con un software che veniva sistematicamente rifiutato per i motivi più disparati, si va dalla mancanza di funzionalità al non aver addirittura compreso per nulla il progetto che gli si era posto mesi prima.</p>
<p>Con la Programmazione Agile invece, con il gruppo di lavoro vengono prefissati degli incontri, generalmente 1/2 volte a settimana, lo scopo dei quali è quello di capire dove si è giunti, comprendere insieme quale sarebbe stata la fase successiva da espletare e se presenti discutere di problematiche venute fuori durante l’implementazione del software.<br />
A migliorare è anche l’interazione con il Cliente, fondamentale dato che questo rappresenta il principale destinatario del prodotto finale, con il quale sono fissati degli incontri costanti per discutere sull’andamento del progetto, coinvolgendolo il più possibile nella progettazione e realizzazione dello stesso.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webusabile.it/waterfall-model-modello-a-cascata-e-programmazione-agile/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>I test di norma due  A/B</title>
		<link>http://www.webusabile.it/i-test-di-norma-due-ab/</link>
		<comments>http://www.webusabile.it/i-test-di-norma-due-ab/#comments</comments>
		<pubDate>Wed, 10 Jun 2009 14:33:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Approfondimenti]]></category>
		<category><![CDATA[test]]></category>
		<category><![CDATA[test a b]]></category>

		<guid isPermaLink="false">http://www.webusabile.it/?p=4</guid>
		<description><![CDATA[Chi di voi almeno una volta nella vita ha detto: perché oggi è diverso? riferendosi al sito web di turno.
Non spaventatevi, non siete state vittime di un&#8217;allucinazione, in gergo tecnico è quello che viene chiamato a/b test ed è una tecnica utilizzata per testare più varianti di una stessa pagina web, nel test di norma [...]]]></description>
			<content:encoded><![CDATA[<p>Chi di voi almeno una volta nella vita ha detto: perché oggi è diverso? riferendosi al sito web di turno.</p>
<p>Non spaventatevi, non siete state vittime di un&#8217;allucinazione, in gergo tecnico è quello che viene chiamato a/b test ed è una tecnica utilizzata per testare più varianti di una stessa pagina web, <strong>nel test di norma due (a/b), </strong>in generale diverse non per layout ma per testi, lunghezze e disposizione delle immagini.</p>
<p>Il test è molto semplice, si pilota lo stesso numero di visite, per un determinato periodo, su entrambe le pagine. Solo una di queste pagine si dimostrerà migliore in termini di risultati finali, di qualsiasi tipo essi siano, ad esempio il raggiungimento di un acquisto, se consideriamo un sito e-commerce o il numero di contatti per un sito aziendale.<br />
Per raggiungere risultati accettabili dovrà essere raccolta una quantità di dati piuttosto alta che, nel caso di siti ben avviati e conosciuti come Ebay o Amazon si ridurrà ad un test di pochi giorni, altro discorso invece è da considerarsi per siti web semi sconosciuti, per i quali a volte un test del genere è impensabile in quanto la mole di accessi generati è molto bassa.</p>
<p>Un&#8217;ottima risorsa free è sicuramente quella messa a disposizione dal colosso Google, con Google Website Optimizer è possibile infatti in pochi e semplici passaggi realizzare il proprio &#8220;a/b test fatto in casa&#8221;, comunque professionale e ben fatto, se si considera che a volte per test del genere vengono richiesti da aziende del settore centinaia e centinaia di euro questo è un ottimo modo per risparmiare.</p>
<p>Non spaventatevi quindi siete stati solo utenti in un test, è probabile che fra qualche giorno la pagina torni quella di sempre.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webusabile.it/i-test-di-norma-due-ab/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
