Vuoi Migliorare L’Usabilità del Tuo Sito ?
Da oggi Ziogeek ha l’onore di pubblicare alcuni articoli sul WebDesign realizzati da Tommaso Baldovino. Tommaso cura TomStardust, un blog italiano autorevole sul Web Design. In questo post Tommaso ci da delle indicazioni su come fare a Migliorare l’Usabilità di un sito.
Navigando in rete ho spesso la sensazione che l’usabilità sia spesso trascurata. E’ davvero inutile prestare attenzione all’esperienza dei propri visitatori? Ovviamente no.
Quelle che seguono sono indicazioni il più possibile generiche per migliorare l’usabilità del vostro sito. Non diventerà usabile semplicemente seguendo questi 9 punti, ma penso siano un buon punto di partenza.
1. Nome del sito
Il titolo del sito deve essere chiaro e visibile in ogni pagina, così come il logo (se esiste). E’ consuetudine inoltre che l’area occupata da questi elementi abbia un link alla homepage: è frustrante tentare di cliccare un elemento e scoprire che non porta da nessuna parte.
2. Tagline / Sottotitolo
La tagline è una breve frase che comunica velocemente lo scopo del sito che si sta visitando. Difficile farne a meno: che si tratti di un portfolio, di un blog o di un sito aziendale, è bene che il visitatore capisca subito l’argomento trattato.
3. Titolo della pagina
E’ essenziale che ogni pagina sia identificata in maniera univoca. Il titolo della pagina dovrebbe essere presente anche tra i tag <title></title>: questo permetterà di riconoscere un sito anche se sono aperte più finestre (o più tab) del browser.
4. Breadcrumb / Path / Briciole di pane
E’ il modo migliore per far capire ad un visitatore dove si trova. In italiano il breadcrumb viene chiamato anche “briciole di pane”, e la sua funzione è evidente. Se avete un sito su più livelli non potete farne a meno.
5. Navigazione principale
La navigazione deve essere chiara e coerente tra tutte le sezioni. Non cambiate mai posizione ad un menu, è bene che ogni visitatore sia in grado di orientarsi. Un’eccezione a questa regola è rappresentata dai menu secondari, che possono apparire o meno a seconda della pagina e della presenza di sottosezioni.
Nella navigazione è importante anche contrassegnare la pagina corrente, se presente nei menu, magari rendendola anche non cliccabile.
6. Box di Ricerca
Anche la ricerca è un metodo di navigazione. In certi casi è il modo più veloce per raggiungere informazioni presenti sul vostro sito, magari non più recenti. Se decidete di implementare la ricerca, fate in modo che il box sia visibile e presente in ogni pagina.
7. Link testuali
Uno dei problemi più fastidiosi è trovare in un sito dei link di testo che non appaiono come tali. Se i collegamenti si confondono con il testo normale, è il caso di modificarne l’aspetto. Trovate maggiori informazioni in un articolo sui link che ho scritto qualche settimana fa.
8. Colori e grafica
Così come per la navigazione, anche la grafica deve mantenere una sua coerenza tra le varie sezioni di un sito. E’ bene che i colori utilizzati non cambino tra le varie pagine per non confondere le idee. E’ possibile distinguere sezioni diverse con colori differenti, ma è una soluzione rischiosa se applicata male, spesso è meglio non rischiare.
9. Avvisi
Se sul sito compaiono degli avvisi, è bene che la loro funzione sia chiara. Possono essere contrassegnati da un’icona e da colori differenti, tenendo presenti alcune consuetudini:
- il rosso indica un errore o un avviso importante
- il verde una conferma
- il giallo un avviso generico
E’ bene utilizzare delle notifiche di questo tipo quando vengono eseguite azioni importanti, come una procedura di acquisto. L’utente deve capire senza problemi quello che sta facendo e quali azioni può compiere.
In conclusione
Non è possibile imparare in poco tempo a realizzare un sito usabile, ma avere una checklist da controllare spero possa esservi utile. Tenete comunque presente che queste raccomandazioni non sono universali, potrebbero esserci delle eccezioni a seconda del sito.
Articolo a cura di Tommaso Baldovino, TomStardust.com
6 Pattern Assortiti per Photoshop
Ampliamo il numero patterns a disposizione all’interno di Photoshop con sei archivi assortiti che vi permetteranno di personalizzare i vostri lavori. Vi basta scaricare il pacchetto desiderato e aggiungere i pattern all’interno del vostro Photoshop per averli subito a disposizione. Continua »
6 Brushes Floreali per Photoshop
Aggiungiamo un tocco floreale ai nostri pennelli di Photoshop con sei brushes floreali che vi permetteranno di personalizzare e rendere unici i vostri lavori. Vi basta scaricare il pacchetto desiderato e avviarlo all’interno del vostro Photoshop per avere subito a disposizione i nuovi brushes. Continua »
Template gratuiti per piattaforma Blogger
E’ stata presenta la nuova galleria di template gratuiti per la piattaforma di Blogger.com.
Templates Blogger, pretende essere un punto di incontro per tutte le persone che hanno un blog in blogspot e vogliono personalizzare il proprio blog. Attualmente ci sono circa 200 templates, entro fine anno si spera di arrivare ai 500 templates. Continua »
Migliaia di Temi Gratis per Wordpress e Blogger
Perché spendere centinaia di Euro da un Webdesigner quando ci sono siti che offrono layout professionali gratis?
Dal 2000 gli utenti di FreeLayouts.com offrono gratuitamente migliaia di modelli grafici per siti web, account MySpace e Blog Wordpress e Blogger, che non hanno nulla da invidiare a quelli realizzati dai designer professionisti.
Nella vasta collezione di questo sito, potrete trovare layout eleganti di varie colorazioni, sia in XHTML/Css sia in Flash, scaricabili e modificabili liberamente.
Trovare un layout adatto alle proprie esigenze nel database di questo sito è davvero facile e sopratutto veloce, grazie alle categorie, che si dividono in colori e in numero di colonne. In più è possibile leggere i commenti o vedere il giudizio di altri visitatori sui singoli modelli.
Inoltre da qualche anno, FreeLayouts accetta soltanto templates convalidati secondo il W3C, l’organizzazione che definisce gli standard delle pagine web per renderle accessibili e ben strutturate.
FreeLayouts però non offre un servizio di hosting e una gestione dei contenuti, perciò è richiesta una minima conoscenza del Html per personalizzare le pagine e uno spazio web, magari gratuito come 000WebHost per mettere online le proprie pagine.
CSS Layout per i tuoi template web
I nuovi siti sempre di più abbandonano le tabelle per avere un impaginazione più personalizzabile tramite CSS. Online sono disponibili molti esempi di layout possibili, oggi vi presento una risorsa web che ne mette a disposizione più di 40 pronti per il download, gratuitamente. Continua »
Utilizzare Wordpress Come JobPress e Contact Manager
Tutti conoscono Wordpress, la piattaforma di blog che anche Ziogeek usa. Però grazie a plugin sempre più avanzati e temi ben ottimizzati e personalizzati, si possono realizzare siti ad Hoc come ad esempio Contact Manager e JobPress. Continua »
Icon set per le vostre web Application
Si tratta di icone veramente ben fatte pensate per le vostre web application oppure per personalizzare i vostri siti web o pannelli di amministrazione personalizzati. Ci sono icone per molte funzioni: video, rss, twtter, tag, post, utenti, commenti, podcast e tanti altri. Continua »
Free icon RSS/Feed
Oggi vi presento delle interessanti set di icone dedicate ai Feed RSS. Si tratta di quattro bellissime immagini realizzate con ottima qualità. Se state aggiornando il sito e vi servono nuove e originali immagini, queste faranno sicuramente per voi. Continua »
Creare Icone in stile Web 2.0 e CS3 con Icon Generator
Icon Generator è una piccola applicazione che ci permette di generare icone in stile CS3 o Web 2.0 in soli tre passi: Scegliamo il colore, digitiamo i caratteri e facciamo click su Create Icon. Ci permette di creare icone in quattro diverse dimensioni. Icon Generator è basato su Adobe AIR, perciò per usarlo avremo bisogno di installare Adobe AIR Runtime.
Vantaggi
- Crea icone in soli 3 passi
- Largo rango di colori da scegliere
- Stile CS3 e Web 2.0
Limitazioni
- Permette massimo quattro linee di testo per icona
- Nessuna opzione per modificare il testo e l’aspetto
- Non è possibile creare icone personalizzate
Download Icon Generator [AIR Apps]
[Via Life Rocks 2.0]
