Archivi tag: eyetracking

Usabilità

Usability, verifichiamo il web design e l’organizzazione dei contenuti nella pagina

Usability: disegno complessivo del sito, gestione degli elementi grafici – (Graphic Design)

Dopo aver esaminato separatamente gli elementi “testuali” e quelli “grafici”, vediamo la loro coerenza nel disegno complessivo del sito, cioè testiamo il lavoro di web design fatto

PUNTI DA OSSERVARE PER IL PROGETTISTA
• Contrasto colori: verificare gli abbinamenti tra colori principali e complementari, ricordate che si lavora in tricromia (red, green, blue), verificare la corporate (colori del marchio)
• Posizione elementi, Guardate un esmpio di eyetracking: https://www.usability.gov/how-to-and-tools/methods/eye-tracking.html
•”scrolling” Vs. Completezza: meglio se le i principali contenuti sono visibili senza bisogno di usare le barre di scorrimanto laterali
•Le pagine si autoformattano: il sito si adatta automaticamente alla larghezza dello schermo, ed i caratteri aumentano di dimensione in proporzione
• Si usano altri logo? Di chi? Perchè?: Un solo logo deve essere predominante ogni altro logo fa confusione

Navigazione ed esperienza di visita nel sito

Il sito dovrebbe fornire in modo immediatamente visibile tutte le indica per guidare l’utente nella navigazione interna.

PUNTI DA OSSERVARE PER IL PROGETTISTA
• Le sezioni principali sono abbastanza in evidenza?: La navigazione e la visita
dell’utente devono essere “guidate” o “orientate” in coerenza con lo scopo
del sito?
• Le sezioni collegate tra loro sono raggruppate, o sono sparse nella pagina?: organizzare i contenuti anche visivamente secondo una sequenza logica immediatamente comprensibile
• Ci sono sezioni doppie per uno stesso argomento?: la
duplicazione è uno spreco, genera confusione ed è difficile da seguire perchè bisogna sempre sincronizzare i contenuti
• Le titolazioni delle sezioni sono chiare?: usate i titoli (tag h4 per esempio) Non solo rendono il testo più interessante e immediatamente comprensibile ma migliorano anche l’indicizzazione del sito
• Ci sono autoLink alla stessa HP : generalmente sono inutili
• Le icone sono “autoesplicative”, oppure no? le icone sono simboli grafici di riferimento di uso comune e vanno immediatamente comprese, quindi usate grafiche di uso comune
(in caso contrario: perché)? Sono le icone giuste?(“evocano” il
significato corretto)? Sono coerenti all’interno della HP se presenti più volte devono portare allo stesso contenuto

i termini del web, interfaccia utente, metodo nielsen, Usabilità, user experience, web design

Come aumentare visite, permanenza e fidelizzazione del tuo sito web, con il metodo Nielsen

Questo post è il primo di una serie dedicata alla usabilità delle pagine web (web usability),

j-nielsen

studiata per primo da Jacob Nielsen nel 1991, la usabilità o usability è una prassi di lavoro indispensabile in fase di progettazione per ottenere una interfaccia grafica valida.
Significa progettare la vostra pagina in base a precise esigenze che rispettano le esigenze dei vostri visitatori/clienti e NON in base a principi di pura estetica.

Come al solito ho cercato qualche definizione del termine e ho trovato:
L’usabilità è definita dall’ISO (International Organization for Standardization), come “l’efficacia, l’efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti. In pratica definisce il grado di facilità e soddisfazione con cui si compie l’interazione tra l’uomo e uno strumento (console, leva del cambio, interfaccia grafica, ecc.)”

Visto che come definizione non  è molto chiara, almeno a me sembra di no, cercherò di essere più diretto, come al solito: l’usabilità per le interfacce grafiche – multimediali (siti web, app, software, ecc.), è la disposizione dei componenti della singola pagina, di solito la home page: marchi, bottoni di navigazione, inmagini, testi, ecc. In modo da ottenere una “user experience” valida. Ok:

“user experience” ,tradotto letteralmente, è in pratica l’ottimizzazione dell’esperienza di visita dell’utente, che vuole “usare” la nostra pagina senza dover mettere attenzione nel capire la disposizione della pagina e trovare nel modo più intuitivo i contenuti di interesse.

Prima di vedere come si applicano le regole della web usability all vostra home page vi propongo questa immagine relativa all’eyetracking , indica cioè quali sono i principali punti di interesse che in nostro occhio analizza nei primi secondi di contatto con una pagina, giornale rivista o web, le abitudini di una vita non cambiano facilmente.

nielsen1
le aree rosso scuro sono quelle viste per prime, per poi passare al rosso, verde, azzurro ecc.

Da qui stabiliremo un ordine di importanza in cui disporremo i componenti nella nostra home page, seguendo quindi il codice colore visto sopra. Iniziamo con elementi che possono rispondere alle domande principali che il nostro visitatore si pone e cioè: a che azienda/ente si riferisce e cosa il sito offre. Posizioniamo per primi logo o marchio, menù di navigazione e principali contenuti

Il logo andrà posizionato in alto e a sinistra,  Immediatamente sotto metteremo il menù di navigazione, vedremo se in orizzontale o in verticale.  Quindi inseriremo immagini o testi che presentano in modo chiaro la ragione di essere dell’azienda e i prodotti proposti, nel centro della pagina, ma sempre spostati verso l’alto e a sinistra, cioè nell’area maggiormente vista/interessante. 

Quindi: qualsiasi progetto grafico è bello perchè funziona ma non funziona perchè è bello, ok?

Vedremo meglio anche questo, nei prossimi post della serie