Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

sabato 20 febbraio 2016

Linee guida e suggerimenti per l'usability della Homepage di Web Site blog

web usability blog siti linee guida

Il testo 'Homepage Usability 50 siti web analizzati' di Jacob Nielsen sulla web usability in effetti è un po' datato, ma, per certi versi risulta essere ancora maledettamente valido!

"Inoltre, partire dalla basi storiche per chi intende cimentarsi nella web usability non è certo un suggerimento sbagliato, in quanto se ne ricava una prospettiva di analisi ben più ampia ma anche una conoscenza più approfondita della materia

Dopotutto, trattasi di oltre 100 linee guida ma ciò non toglie che considerata l'obsolescenza, i tempi che corrono e nonostante l'utenza rimanga pur sempre la medesima (sotto intendo come cultura della usabilità) per non realizzare un post eguale al libro ho pensato di stilare una suddivisione per categorie tematiche emuli dei capitoli principali del Testo;

così, anziché, ripetere tutte le linee guida, ho scelto di selezionare quelle ancora attuali ma, soprattutto, applicabili.


Ottimizzare la usability della HomePage di un sito web-blog come di qualsiasi altra pagina web di una attività-business online (a prescindere dalla forma di utile che essa è stata progetta per produrre) può incidere sull'efficacia della comunicazione, ridurre le distrazioni ed i sovraccarichi percettivi incentivando, così, oltretutto, la veicolazione del 'messaggio' che intendete proporre come innesco ai processi e le modalità d'azione consequenziali finalizzate alla generazione del vostro servizio e della sua unicità.


Significatività, scopo e orientamento
Un utente, quando giunge nella homepage della vostra attività web deve capire in circa due minuti,   e  meno sono meglio è:

a) di cosa si tratta la vostra attività e che servizio/i producete-sviluppate

b) chi siete (pagina about-chi sono-chi siamo)        
   
c) potersi facilmente orientare e per farlo è necessario che:

innanzitutto: 1) la Homepage si distingua dal resto delle pagine del Sito Web Blog e
2) consenta di resettare dall'inizio l'attività di navigazione potendo contare su di essa e sulla sua chiara differenziazione.


Linee guida

Logo-Header
Posto a sinistra auto-evidente ed esplicitato ha lo scopo di esplicare il 'core' della vostra attività online:
esso contribuisce a rafforzare la comprensione insieme alla 'pagina about-chi sono-chi siamo'

TagLine
Descrizione della vostra attività possibilmente posta nel 'header' con una frase sintetica, chiara e altamente significativa senza commettere l'errore di cascare nell'uso di un registro comunicativo che si serve di un linguaggio allusivo-metaforico.

Lo scopo è la chiarezza e l'efficacia comprensiva da parte dell'utenza che la leggerà;

ma, anche, una forte riduzione di complessità e di tempo che non deve essere speso assolutamente per interpretarlo al fine di comprenderlo;

"se allungate questa fase per giocare sull'interpretazione e sull'appeal iniziale cattura attenzione ottenete di rimando sacrosanta frustrazione

Testo e Web Writing

Parole chiave
Sono da porre all'inizio di ciascun titolo e sottotitolo.

Ottimizzazione visiva
Equivale a gerarchizzare i contenuti ponendo maggior enfasi ai titoli, subito dopo ai sottotitoli seguito dal testo in cui la dimensione del carattere diminuisce progressivamente ed è intervallata a sua volta dal giusto alternarsi dato dall'uso strumentale dello spazio bianco posto tra l'uno e l'altro per facilitare la visione a colpo d'occhio e perciò la rapida visualizzazione per consentire così un agevolazione del processo decisionale dell'utenza al fine di garantire il procedere nella lettura in base all'interesse soggettivo.

Ridondanze
Evitare le ripetizioni che conducono ad indirizzi differenti!
Fate due categorie diverse o una sola.

Titoli
Limitare la lunghezza a circa sette-otto parole per un massimo di 64 caratteri;

aiuterà la visualizzazione dell'utenza che non si basa sulla lettura, bensì, ad una rapida occhiata di scanning visuale e di veloce valutazione da cui deriva la decisione se proseguire o meno nella lettura o decidere di abbandonarla.

La parola (keyword) più significativa va posta all'inizio ed anteposta al resto per attrarre subito l'attenzione pena l'essere perduta.

Titoli Succinti ma descrittivi 
Devono trasmettere con il minimo di parole il massimo in significatività (informazioni, senso, significato semantico)

Link-Parole esplicative
Va evitato totalmente il sovraccarico cognitivo per decifrare e comprendere/interpretare;
perciò, la parola (keyword) deve corrispondere esattamente a ciò a cui il link conduce;

niente allusioni, significati personali, soggettivi e metaforici.

Aiuta usare parole di uso comune facilmente identificabili e oramai divenute di consuetudine;

in questo caso meglio essere banali che sofisticati.

Parole chiave (keyword): vanno poste rigorosamente all'inizio dei link.

Parole coerenti
Le parole chiave devono essere coerenti con la pagina a cui conducono ovvero il link deve mantenere ciò che promette all'arrivo-atterraggio sulla pagina linkata, pena, altrimenti, la perdita di fiducia da parte dell'utenza.

Parole descrittive
Non usare il famoso 'Clicca qui' al posto della parola chiave che, invece, deve descrivere dove conduce il link


Linguaggio Iconografico

Omogeneità tra gli elementi
Essa è da ricercarsi nel momento in cui avete icone ed elementi vari (che usano il linguaggio metaforico per indicare azioni potenziali attraverso il loro uso) che devono svolgere diverse funzioni sulla medesima base tematica comune attraverso la vicinanza tra gli elementi.

Se non è possibile ottenerla attraverso una totale uniformità è importante comunque saperlo, poiché, è più facile trovare funzioni vicine per consonanza che impiegare del tempo per cercarle nel layout.

Un'immagine non sempre vale più di mille parole
Molte volte sarà necessaria o una didascalia o i 'tag Title e Alt' specie se l'immagine esula dalla significatività del testo che affianca.

Troppe immagini = ridondanza che corrisponde a generare troppa confusione ed attività di analisi extra nell'analisi del layout per conseguire finalità/obiettivi.

Usate le immagini per illustrare a scopo esplicativo dei contenuti e non a scopo decorativo/illustrativo in quanto un'immagine sottrae sempre:

"attenzione preziosa dell'utenza!

Evitare le convenzioni pubblicitarie
Ricorrere agli stili tipicamente pubblicitari per evidenziare contenuti-funzioni-servizi del vostro Web Site-Blog è la scorciatoia per innescare la famigerata cecità da banner e la conseguente forma selettiva adattiva che ne deriva, la quale, per risposta conduce al risultato esattamente contrario per cui l'avete deciso di utilizzarla.

Nel Web vale sempre questo monito-equazione:

"Più somiglia ad una pubblicità e meno lo leggeranno!

Evitare i Pop-up 
Questi si innescano automaticamente all'apertura del Sito Web-Blog;

forse utili per la prima volta ma fastidiosi per chi di ritorno;

meglio ottimizzare la Home Page!

Funzionalità di Ricerca
Ai tempi della stesura del manuale di J.Nielsen la posizione ottimale era quella in alto a sinistra, adesso mutata per convenzione con quella in alto a destra.

Statisticamente credo se la giochino sul filo del pareggio.

Cerca anche nel Web
Se il vostro motore di Ricerca interno al vostro Sito-Web-Blog contempla questa estensione della ricerca temo che anche se può essere rilevante per particolari tipi di attività per converso confonde quella costituita dai grandi numeri.

Grossomodo, per la maggior parte delle ricerche, meglio lasciarle contestualizzate solo alla vostra attività e lasciare il resto ai già ottimi browser-motori di ricerca

Casella di Ricerca ampia a sufficienza
L'utenza deve essere in grado di poter controllare visivamente l'inserimento delle parole chiave specie nella fase delicata in cui le scrive nello spazio dedicato;

perciò la casella di inserimento deve avere una larghezza pari a 25/30 caratteri

Suggerisco 27 caratteri (tenete conto che lo spazio occupato è in relazione al font che adoperate, quindi testate procedendo per tentativi sino a trovare la soluzione più adeguata al font in uso)


Navigazione

Omogeneità
Raggruppate gli elementi dell'area di navigazione secondo criteri di compatibilità ed i livelli di consonanza.

No repeat
Le ripetizioni inutili creano complessità ed un eccessiva frammentazione del layout il ché non è mai un bene per il carico cognitivo del'utenza il quale di riflesso si sovraccarica inutilmente per ricostruire un ordine di navigazione ed il significato della pagina che sta' visionando.

Una categoria per ciascuna attività importante è il limite massimo per non incorrere in questa tipologia di criticità.


Visual Design

Coerenza
Limitare Stili e formattazioni dei testi (font,dimensioni,colori) senza una logica coerente e ripetuta con continuità evitando di essere sincopati.

Personalmente ho optato per una miscellanea tra il Verdana (studi dimostrano essere il migliore per facilitare la lettura sul Web) il cui uso è deputato oramai per i titoli ed i sottotitoli ed il Georgia ben più elegante e stiloso (secondo per qualità e facilità di lettura a video rispetto al Verdana) per il testo-contenuto.

La distinzione visuale, inoltre, tra titolo, sottotitolo e contenuto è enfatizzata per il rapido scanning visivo dell'utenza web come per la facilitazione per la lettura dai pixel differenziati per ciascun elemento della scaletta solitamente in rapporto:

24 Pixel Verdana (Titoli), 17 px sottotitolo intermedio , 14 pixel Georgia quindi (contenuto)

No agli eccessi:
Gli eccessi distraggono dai contenuti che, invece, sono la cosa più importante.

Contrasto
Sfondo e testo sempre in eterna antitesi cromatica in cui il primo deve privilegiare, obbligatoriamente la lettura.

Il migliore fondo per la lettura con scrittura nera non è il bianco, bensì, il grigio.

web usability siti web blog ottimizzazione restyling web design



Conclusioni

La formula che ho adoperato è stata trasporre le linee guida ai giorni nostri in piena era web 3.0.

Si è trattato di fare una translitterazione selettiva per convertire ciò che ancora non è deputato all'obsolescenza funzionale in fatto di web usability

Pragmaticamente, potete agire applicando suddette linee guida-best practice- standard/convenzioni direttamente ponendole a contrasto con le homepage dei siti web blog di vostro interesse e verificarne sin da subito i benefici.

Ovviamente è consigliabile intervenire quando possibile;

la web usability è anche una questione di perspicacia osservativa  e di analisi e studio dello specialista piuttosto che il risultato di una rigida applicazione delle regole;

come in ogni settore dello scibile non esistono solo leggi e le linee guida sono da intendersi solo come dei solidi/sicuri punti di partenza da cui poi poter sviluppare soluzioni personalizzate e calibrate sulle differenti specifiche per assolvere alle esigenze più diverse ed eterogenee.

Inoltre, a prescindere delle versione delle linee guida che ho riportato trasposte e modificate una volta riadattate ai giorni nostri la contingenza nel Web è da considerarsi comunque un'idea piuttosto sfuggente se non fondata su basi piuttosto irreali.