Archivi tag: usability

i termini del web, Indicizzati, interfaccia grafica, interfaccia utente, metodo nielsen, simbolismo colori, Usabilità, user experience, web design

Internet facile: usare il rosso nel web design

Cosa hanno in comune la rabbia, i biglietti di S. Valentino, le cravatte e le spie? il rosso.
Rosso sangue, arrossire, mattone, bordeaux, carminio, rosso cinese, cinabro, rosso cremisi, rosso fuoco, fiamma, rosso indiano, più folle, marrone rossiccio, rosa, rosso, rosso rubino, ruggine, rosso scarlatto, pomodoro, rosso veneziano e vermiglio tutti sinonimi o rappresentano varie sfumature del colore rosso.

leggi anche: Il simbolismo dei colori nella grafica per il web

Natura, cultura e simbolismo del rosso

Il rosso è caldo È un colore forte che evoca una serie di emozioni apparentemente contrastanti, dall’amore appassionato alla violenza e alla guerra. Il rosso è Cupido e il diavolo.

E’ stimolante: il rosso è il più caldo dei colori caldi. Gli studi dimostrano che il rosso può avere un effetto fisico, aumentando il tasso di respirazione e aumentando la pressione sanguigna.

L’espressione “vedere il rosso” indica rabbia e può derivare non solo dallo stimolo del colore ma dal rossore naturale delle guance, una reazione fisica alla rabbia, aumento della pressione sanguigna o sforzo fisico.

Il rosso rappresenta il potere, quindi la cravatta rossa per gli uomini d’affari e il tappeto rosso per celebrità e VIP.

Luci rosse lampeggianti indicano pericolo o emergenza. Segnali di stop e luci di stop sono rossi per attirare l’attenzione dei conducenti e avvisarli dei pericoli dell’incrocio.

In alcune culture, il rosso denota purezza, gioia e celebrazione.

Il rosso è il colore della felicità e della prosperità in Cina, dove può essere usato per attirare la buona fortuna.

Il rosso è spesso il colore indossato dalle spose in Oriente mentre è il colore del lutto in Sud Africa. In Russia i bolscevichi hanno usato una bandiera rossa quando hanno rovesciato lo Zar, così il rosso oggi è associato al comunismo.

Molte bandiere nazionali usano il rosso. Il rosso rubino è il tradizionale regalo del 40 ° anniversario di matrimonio.

Utilizzare le tonalità di rosso nel web design

Quando si progetta un sito Web è buna norma utilizzare il colore rosso per attirare l’attenzione e convincere le persone ad agire. Un po ‘di rosso fa molto effetto. Questo colore forte va usato sempre in piccole dosi. Usa il rosso per suggerire la velocità combinata con sicurezza e forse anche un pizzico di pericolo.

Più tonalità di rosso e persino rosa o arancione possono combinarsi per una tavolozza allegra. Il rosso si abbina bene ad altri colori:

Simbolismi negativi del rosso

Vedere rosso: rabbia Red aringhe: qualcosa che inganna o distrae l’attenzione dalla verità In rosso: essere scoperti in banca o perdere denaro Bandiera rossa: indica pericolo, avvertimento o una battaglia imminente.

Anche se normalmente non è considerato un accoppiamento ideale, in combinazione con il verde, il rosso è un colore natalizio, un caposaldo della stagione gioiosa.
I blu freddi forniscono contrasto e attenuano il calore del rosso.
Rosa chiaro e giallo stanno armonizzando i colori che possono funzionare bene con il rosso se non troppo vicino come il rosso scuro con un giallo pallido o dorato.
Fai attenzione a usare il viola con il rosso. Può essere una combinazione elegante ma esagerando potrebbe essere opprimente.
Aggiungi un tocco di rosso per una combinazione di rosa e grigio morbida ma sofisticata.

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

Il colore nel web design, gli abbinamenti colore-significato

Per la categoria internet facile: un articolo che spiega le nozioni di base del colore nella progettazione della interfaccia utente.

La ruota dei colori è solo un modello per rappresentare le tonalità di sfumature di colore disposte attorno a un cerchio.

Mostra le relazioni tra i colori primari, secondari e intermedi / terziari e aiuta a dimostrare la temperatura del colore. I designer di interfacce grafiche utilizzani  tonalità di colori esatte attraverso l’uso di codici esadecimali.

Come funziona la ruota dei colori

Molte ruote dei colori mostrano 12 colori.

Questa ruota colori, per esempio, può essere letta come segue: Tre colori primari: rosso, giallo, blu
Tre colori secondari: arancione, verde, violento
Sei colori terziari: rosso-arancio , Giallo-Arancio, Giallo-Verde, Blu-Verde, Blu-Viola, Rosso-Viola, che si formano mescolando un primario con un secondario. Alcune ruote colore mostrano punti interni e cerchi, che rappresentano miscele di colori.

Temperatura del colore

I colori sul lato rosso della ruota sono caldi; il lato verde della ruota ha i colori più freddi. Queste designazioni della temperatura del colore sono assolute.

I rapporti di temperatura del colore sono relativi, il che significa che ogni colore sul lato caldo della ruota può essere definito “freddo” e che i colori sul lato di freddo della ruota possono essere definiti caldi a seconda della relazione con il colore adiacente. I colori della stessa tonalità, ad esempio il rosso tendente al viola, possono anche essere più caldi o più freddi di altri.

Le temperature del colore ci influenzano sia psicologicamente che percettivamente aiutandoci a determinare come gli oggetti appaiono posizionati.

Colori caldi e Colori freddi

I colori caldi includono rosso, arancione e giallo e le variazioni di questi tre colori. Rosso e giallo sono entrambi colori primari, con l’arancione che cade nel mezzo. I colori caldi appaiono più vicini all’osservatore.

I colori freddi includono il verde, il blu e il viola e le variazioni di questi tre colori. Il blu è l’unico colore primario all’interno dello spettro freddo. I verdi assumono alcuni degli attributi del giallo e il viola assume alcuni degli attributi del rosso. Sono spesso più sottomessi dei colori caldi. I colori freddi sembrano più lontani dall’osservatore.

Neutrali I colori neutri includono nero, bianco, grigio, abbronza e marrone. Vengono comunemente combinati con colori accesi più luminosi, ma possono anche essere usati da soli nei disegni. I significati e le impressioni dei colori neutri dipendono più dai colori che li circondano.

I colori esadecimali per l’ interfaccia grafica

Quando si realizzano pagine per siti web oppure applicazioni e che comunque dovranno essere vist tramite smartphone oppure computers i web designer utilizzano una gamma di colori detta esadecimale.

Puoi vedere tutti principali colori esadecimali con codice e relativa descrizione qui

Ogni tonalità di colore viene definita da una combinazione dei valori delle tre componenti di base: rosso, verde e blu (red, green, blue). In pratica, ogni colore è identificato da tre valori (numeri):
– Il primo indica la quantità di rosso presente nel colore;
– Il secondo la quantità di verde;
– Il terzo la quantità di blu.

Ciascuno di questi tre valori può variare da 0 (minimo: componente assente) a 255 (massimo: componente dominante). Ad esempio il nero corrisponde ai valori RGB 0,0,0, ed il bianco corrisponde ai valori RGB 255, 255, 255.

Una parte dei colori esadecimali vengono detti colori web safe in quanto vengono riprodotti fedelmente dalla
maggior parte degli schermi, anche quelli dotati di schede grafiche non aggiornate.

Quindi se vogliamo essere sicuri che i nostri lavori vengano visti perfettamente da qualsiasi utente (anche quelli che hanno computer con settaggi video a 8 bit, ovvero che visualizzano solo 256 colori), dobbiamo utilizzare per i nostri lavori solo i 216 colori detti appunto colori “web safe”

i termini del web, interfaccia utente, sicurezza e virus, social network, Usabilità, user experience, web design

il Team per la Trasformazione Digitale è una risorsa per noi

L’evento nazionale Hack Developers 2017 è stato organizzato dal Team per la Trasformazione Digitale della Presidenza del Consiglio dei Ministri, guidato da Diego Piacentini. Hanno partecipato in più di 800 all’evento considerato il più grande hackathon italiano che si è svolto il 7 e l’8 ottobre 2017 con 160 team, 200 mentor in 24 città italiane più San Francisco, più di 800 sviluppatori mobilitati, 80 community coinvolte in 16 regioni.

Sono 96 le proposte open source per i servizi pubblici italiani uscite dalla grande gara dedicata alla PA svoltasi il 7 e 8 ottobre su Developers Italia, piattaforma del Team per la Trasformazione Digitale. Alcuni lavoreranno fino a fine mese. I vincitori saranno annunciati nelle prossime settimane, premiazione a novembre.

Di seguito indico alcuni dei progetti attualmente seguiti dal Team per la Trasformazione Digitale che pensano possano essere veramente utili pper questo paese, con l’augurio che tutto questo lavoro non venga spazzato via alla prosssima tornata elettorale.

 

Anagrafe Nazionale Popolazione Residente (ANPR)

In breve
Oggi le nostre identità sono disperse in ottomila anagrafi comunali. Dobbiamo portarle in una sola anagrafe, guadagnando in efficienza e risparmiando soldi ed energia, perché il cittadino non debba più preoccuparsi di comunicare a ogni ufficio della Pubblica Amministrazione i suoi dati anagrafici o il cambio di residenza, per semplificare le procedure di variazione e uniformarle a livello nazionale, perché sia possibile ottenere certificati senza più bisogno di recarsi allo sportello.

Vantaggi per i cittadini e la pubblica amministrazione
ANPR è un passo essenziale nell’agenda digitale per rendere possibili successive innovazioni, poiché avere un database a livello nazionale permetterà di superare il modello dell’autocertificazione accorciando ed automatizzando tutte le procedure relative ai dati anagrafici.

Con ANPR le amministrazioni potranno dialogare in maniera efficiente tra di loro avendo una fonte unica e certa per i dati dei cittadini. Anche oggi però ANPR consente ai cittadini di ottenere vantaggi immediati quali la richiesta di certificati anagrafici in tutti i comuni, cambio di residenza più semplice ed immediato ed a breve la possibilità di ottenere certificati da un portale unico.

Sistema Pubblico di Identita Digitale (SPID)

 

SPID, il Sistema Pubblico di Identità Digitale, è la soluzione che ti permette di accedere a tutti i servizi online della Pubblica Amministrazione con un’unica Identità Digitale utilizzabile da computer, tablet e smartphone. Oggi le nostre credenziali digitali sono diverse per ogni servizio a cui accediamo e una drastica riduzione del loro numero porta ad una semplificazione della vita del cittadino e a una maggiore sicurezza.

Vantaggi per i cittadini e la pubblica amministrazione
 SPID consente alla Pubblica Amministrazione di abbandonare i servizi di autenticazione gestiti localmente, risparmiando quindi su questi costi sia in termini di manutenzione che di lavoro necessario per il rilascio di credenziali; inoltre la qualità dell’identificazione fornita da SPID è normalmente superiore e garantisce anche la PA stessa durante l’erogazione di servizi.

Il cittadino ha l’opportunità di avere un solo set di credenziali, che può utilizzare con tutti i servizi della Pubblica Amministrazione e che assicurano, tra l’altro, una maggiore sicurezza, specialmente quando si utilizzano i Livelli 2 e 3 di SPID. Inoltre, al contrario di altri sistemi diffusi di login, SPID garantisce che ogni servizio collegato riceva sempre e solo le informazioni minime necessarie per la fornitura del servizio senza condividere con altri le informazioni sull’utilizzo, garantendo quindi la privacy dei cittadini. Infine, una identità SPID potrà essere utilizzata per accedere anche a tutti i servizi della Pubblica Amministrazione di tutti i paesi membri dell’Unione Europea.

Pagamenti digitali PagoPA

In breve

Un modo diverso e più naturale per i cittadini di pagare la Pubblica Amministrazione, che diventi più immediato, veloce, e più economico per il Paese.

Il cittadino deve poter scegliere metodi di pagamento moderni, a minima frizione, e il mercato deve potersi integrare, aggiungendo facilmente nuovi strumenti di pagamento innovativi. Vogliamo rendere il sistema più aperto e flessibile.

Designers Italia

In breve
Intendiamo creare linee guida, esempi e kit di sviluppo che possano aiutare tutte le Amministrazioni ad offrire servizi digitali semplici da usare per i cittadini. Vogliamo introdurre una logica di sviluppo e miglioramento continuo, perché i prodotti digitali e le interfacce devono essere un corpo vivo, che evolve insieme ai bisogni degli utenti e alle innovazioni digitali. Il primo passo è stato la creazione di Designers Italia.

Il ruolo del Team
Obiettivo di Designers Italia è diffondere una cultura del design dei servizi digitali che metta al centro il cittadino per far risparmiare tempo e denaro alla pubblica amministrazione e innalzare la qualità dei servizi. Il team per la trasformazione digitale ha rafforzato il progetto esistente relativo alle linee guida dei siti web pubbici creando una piattaforma – Designers Italia – che si pone come punto di incontro tra mondo del design e pubblica amministrazione. La documentazione relativa alle linee guida di design deve uscire dalla versione alpha e abbracciare tutti gli aspetti dello human centered design: service design, user interface design, content design e user research. Designers Italia non solo produce guide e kit per tutte le amministrazioni pubbliche, ma segue direttamente alcuni dei servizi digitali pubblici “infrastrutturali” come Pagopa e Spid e avvia la creazione di modelli per le diverse tipologie di siti web pubblici, a partire da un progetto dedicato ai siti delle scuole.

Indicizzati, interfaccia utente, metodo nielsen, Usabilità, user experience, web design

Le 10 euristiche*che hanno fatto grande la usability ideata da J. Nielsen

Oggi si parla tanto di user experience e di interfacce grafiche ed è un bene perchè queste procedure di progettazione aiutano a rendere la comunicazione online più efficace ma soprattutto costruita su solide basi.

Riprendo il metodo sulla usabilità perchè ritengo che questo insieme di euristiche* sia alla base appunto dello stato attuale dellaprogettazione di interfacce uomo macchina. Quindi è una maniera per “ripassare i fondamentali” cosa che da insegnante e professionista del settore ritengo utile e capace di dare nuovi spunti.

Ecco le 10 regole della usability secondo Nielsen:

1. Visibilità dello stato del sistema

Il sistema deve sempre tenere gli utenti informati su ciò che sta accadendo, attraverso un feedback appropriato entro un tempo ragionevole.

2. Corrispondenza tra sistema e mondo reale

Il sistema dovrebbe parlare la lingua degli utenti, con parole, frasi e concetti familiari all’utente, piuttosto che termini orientati al sistema. Segui le convenzioni del mondo reale, facendo apparire le informazioni in un ordine naturale e logico.

3. Controllo dell’utente e libertà

Gli utenti spesso scelgono le funzioni di sistema per errore e avranno bisogno di un’uscita di emergenza chiaramente contrassegnata per lasciare lo stato indesiderato senza dover passare attraverso un dialogo esteso. Supporto annulla e ripristina.

4. Coerenza e standard

Gli utenti non dovrebbero chiedersi se parole, situazioni o azioni diverse significano la stessa cosa. Segui le convenzioni della piattaforma.

5. Prevenzione degli errori

Ancor meglio dei buoni messaggi di errore è una progettazione attenta che impedisce il verificarsi di un problema.

6. Riconoscimento piuttosto che richiamo

Rendi visibili oggetti, azioni e opzioni. L’utente non deve ricordare informazioni da una parte del dialogo a un’altra. Le istruzioni per l’uso del sistema dovrebbero essere visibili o facilmente recuperabili ogni volta che è opportuno.

7. Flessibilità ed efficienza di utilizzo

Gli acceleratori – non visti dall’utente principiante – possono spesso accelerare l’interazione per l’utente esperto in modo tale che il sistema possa soddisfare sia gli utenti inesperti che quelli esperti. Consenti agli utenti di personalizzare azioni frequenti.

8. Design estetico e minimalista

I dialoghi non dovrebbero contenere informazioni che sono irrilevanti o raramente necessarie. Ogni ulteriore unità di informazioni in un dialogo compete con le unità di informazioni pertinenti e diminuisce la loro visibilità relativa.

9. Aiutare gli utenti a riconoscere, diagnosticare e recuperare dagli errori

I messaggi di errore dovrebbero essere espressi in un linguaggio semplice (senza codici), indicare con precisione il problema e suggerire in modo costruttivo una soluzione.

10. Assistenza e documentazione

Sebbene sia preferibile utilizzare il sistema senza documentazione, potrebbe essere necessario fornire assistenza e documentazione. Qualsiasi informazione di questo tipo dovrebbe essere facile da cercare, focalizzata sul compito dell’utente, elencare le misure concrete da eseguire e non essere troppo grande.

 

*Euristica da wiki: È la parte della ricerca il cui compito è quello di favorire l’accesso a nuovi sviluppi teorici o a scoperte empiriche. Si definisce, infatti, procedimento euristico, un metodo di approccio alla soluzione dei problemi che non segue un chiaro percorso, ma che si affida all’intuito e allo stato temporaneo delle circostanze, al fine di generare nuova conoscenza.

sul sito della Nielsen Norman Group trovate il testo originale in lingua inglese

i termini del web, interfaccia utente, web design

Internet Facile – Cos’è e a che serve l’Interfaccia Utente

Inizio da questo articolo una piccola serie dedicata al design di interfacce utente, detto in inglese: user intreface designer. Questi articoli sono rivolti a chi vuole capire con chiarezza e partendo dalle basi i principi della progettazione grafica rivolta all’area informatica, un’ area che comprende tra le altre aree il web design, social network, applicazioni e programmi.

Anzitutto capiamo che cosa è una interfaccia grafica uomo-macchina, perchè è di questo che stiamo parlando: quando un uomo interagisce con una macchina specialmente se digitale o comunque con funzionalità digitale ha naturalmente bisogno di una interfaccia che consenta il dialogo tra due sistemi, organico ed inorganico, profondamente differenti.

Possiamo pensare a schermi come quello del computer che ora avete di fronte come superfici elettroniche che collegano due mondi, tramite simboli, colori suoni ed animazioni il codice computer viene elaborato in modo che l’utente sia in grado di ricevere informazioni e dare comandi. La macchina usa il codice mentre noi usiamo i cinque sensi, occorre mediare tra questi due diversi mondi.

Le macchine che si interfacciano con noi sono numerose  e destinate ad aumentare, pensiamo all’iInternet delle cose che è una possibile evoluzione dell’uso della Rete: gli oggetti (le “cose”) si rendono riconoscibili e acquisiscono intelligenza grazie al fatto di poter comunicare dati su se stessi e accedere ad informazioni aggregate da parte di altri. Le sveglie suonano prima in caso di traffico, le scarpe da ginnastica trasmettono tempi, velocità e distanza per gareggiare in tempo reale con persone dall’altra parte del globo, i vasetti delle medicine avvisano i familiari se si dimentica di prendere il farmaco. Tutti gli oggetti possono acquisire un ruolo attivo grazie al collegamento alla Rete. questo è un fenomeno in rapida crescita destinato ad arrivare fino alle smart home che presto diverranno numerose anche in Italia.

Banalmente avremo a che fare con interfacce di forni a microonde, pannello luci e riscaldamento, sistema di allarme ecc. da gestire tramite applicazioni via smartphone oppure schermo dedicato, ognuna di esse gestibile o meglio configurabile tramite relativa interfaccia di comando. Anche le case stanno diventando “smart home” e certamente le automobili hanno già oggi interfacce grafiche di gestione, per ora dedicate ai navigatori ma destinate ad essere sempre più complesse

Ognuna di queste funzionalità digitali deve poter essere gestita in maniera chiara e veloce, non volete bruciare l’arrosto oppure trovarvi i ladri in casa, no?

Quindi occorrono buoni device funzionanti, programmi di gestione efficaci ma soprattutto interfacce di gestione ben realizzate, senza le quali l’interazione uomo-macchina diventa poco chiara e difficile.

Quanti programmi, siti web e applicazioni non hanno il dovuto successo a causa di una interfaccia che risulta poco comprensibile all’utente! Il quale generalmente riscontra un generale malfunzionamento anche quando ottime funzionalità non sono semplicemente accessibili in modo chiaro e veloce.

Un buon progettista di interfacce quindi non deve solamente affrontare l’aspetto estetico del proprio compito ma deve fare si che ogni elemento presente nel proprio progetto assolva a precise funzioni, rispettando anche le abitudini di utilizzo dell’utente senza dimenticare chi può avere difficoltà nel relazionarsi con una interfaccia grafica standard. Da subito segnalo la Google Material Suite come una risorsa che consiglio a tutti i web designer 

Vedremo che esistono regole precise e strumenti di verifica anche sofisticati per verificare l’efficacia di un progetto prima di procedere alla effettiva realizzazione dello stesso.

Leggi anche: Internet Facile La presentazione della guida online di Google Material Design

 

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

Usabilità

I criteri della Web Usability: la “homepage” deve spiegare a cosa serve il nostro sito

In questo tutorial, dedicato alla web usability, approfondiremo il concetto di home page e vedremo insieme uno degli scopi principali di questa pagina: Comunicare lo scopo del sito.

Non dimentichiamo che la web usability: il metodo di base che stiamo seguendo ideato da J.Nielsen, punta molto sulla realizzazione di siti intesi come “strumenti utili” al raggiungimento di determinati risultati. Propone quindi serie di “lista di controllo” da spuntare via via che si procede nella progettazione o controllo del nostro lavoro.

La home page è la pagina principale del sito, potremmo definirla come la pagina di ingresso.

Vi invito a fare caso all’indirizzo web (url) che vedete nella riga posta in alto nel browser.
La home page viene sempre nominata come “index.html” oppure “index.php”. Php e html specificano il tipo di codice utilizzato per scrivere la pagina stesa. Il nome della pagina, uguale per tutti i siti, viene nascosta, cosa che non avviene per le pagine interne.

Per fare un esempio pratico, se volete, provate a inserire questo indirizzo “http://www.laparoladigitale.it/index.html” nella riga del browser che abbiamo visto e vedrete che vi si aprirà la pagina principale di questo sito.

Per finire questo piccolo approfondimento vi dirò che la pagina index.html viene comunque sempre aperta di default, infatti accederete alla pagina principale di “laparoladigitale.it” anche inserendo solamente il nome del sito come lo trovate qui tra le virgolette.

Abbiamo capito quindi che la Homepage (HP) è la pagina di accesso ad un sito Internet

(da cui si accede alle varie sezioni interne). Una vera e propria hall che porta quindi alle varie aree interne del sito. Quindi rappresenta l’elemento critico di un sito (di un’azienda,organizzazione, ente pubblico, ecc.)

Di seguito, seguendo il metodo della usability, vedremo quali sono le caratteristiche fondamentali che la home deve avere per comunicare lo scopo del sito, a prima vista, non dimentichiamo che questa primissima “impressione” determina la prosecuzione della visita al nostro sito. Vi ricordo che ogni progetto di comunicazione deve essere sempre realizzato in vista di un fine ben preciso.

Quindi devono essere chiaramente distinti ed identificabili gli elementi fondamentali del sito.

Questi punti da verificare sono:

Posizione e dimensione del nome e logo dell’azienda,generalmente in alto a sinistra
Rispetto del colore e dei font della corporate image (immagine coordinata)
Enfasi su ciò che il sito offre all’utente, da subito è bene mostrare un esempio del prodotto proposto
La Home Page è diversa o di struttura simile alle altre pagine Web? Quindi si distingue, anche graficamente, dalle pagine interne?
Il menù di navigazione è chiaro, ben leggibile e aiuta a comprendere la organizzaione interna dei contenuti?

interfaccia utente, metodo nielsen, Usabilità, user experience, web design

I vantaggi del metodo Nielsen: poco costoso, aumenta visite e fidelizzazione al tuo sito

Continuo la descrizione del metodo Nielsen per la progettazione di interfacce grafiche e/o siti web, che ho iniziato nello scorso tutorial in cui davo una definizione del concetto di web usability, e spiegavo aumentare la visibilità del vostro sito web e la fidelizzazione degli utenti con il metodo Nielsen

Il metodo Nielsen offre numerosi vantaggi:

1. Criteri per valutare l’efficacia di un sito e/o di un’interfaccia grafica commerciale

J.(profeta)Nielsen offre con il suo metodo la possibilità di adottare criteri per la progettazione di un sito internet efficace. Evitando così il lavoro costoso e frustrante di aggiustamento dei contenuti e della ridisposizione degli stessi a sito pubblicato.

2. Approccio semplice e poco costoso

Evidentemente riuscire ad anticipare le esigenze del nostro target prima della costruzione del sito comporta una diminuzione notevole di tempi e costi. Ciò non toglie che comunque ogni tipo di comunicazione online va costantemente monitorata e modificata secondo l’evoluzione di fattori esterni ed interni.

3. Offre criteri che combinano:

– Aspetti tecnici (ad es. velocità di caricamento, risoluzione video, ecc.)
– Aspetti comunicazionali (efficacia dei contenuti,immediatezza comunicativa, ecc.)
– Aspetti legati al business (cosa si vuole valorizzare in un sito, ecc.)

4. Soddisfa l’utente di riferimento (a chi il sito è destinato)

– Si applica l’utente tipo del sito. Ipotizza variabili
– Classifica gli utenti per categorie o tipologie

5. L’obiettivo di riferimento

– cosa si vuol fare con il sito? Informare o vendere? Sito di presenza, vetrina, vendita?
– quale messaggio si intende veicolare?
– in che modo?

6. Gli strumenti a disposizione

– quale tecnologia o modalità di design si adopera in coerenza con quanto sopra indicato?
–  Quali criteri sono stati seguiti nella scrittura ed impaginazione dei testi?

Però presenta limitazioni

1. Propone valutazioni soggettive e non confermate dai fatti

_Infatti non indica criteri di progettazione ma “indicazioni e suggerimenti” per“ focalizzare l’attenzione” del progettista
– Non fornisce indicazioni precise sui punti critici che potrebbero determinare una modesta usabilità
– Lascia al progettista la valutazione sulla coerenza o meno con gli obiettivi del sito, dell’azienda, ecc.

2. Fornisce più che altro definizione di “linee guida” o “check list”

per valutare (qualitativamente) l’efficacia di un sito esistente o in progetto

3. Ha i limiti di un approccio di derivazione prati

(ossia considerazioni ricavate dal “buon senso” nell’esperienza professionale) e non teorica (ossia deduzioni o conclusioni sulla base di modelli

Ecco come capire quando un sito è progettato male secondo Nielsen e secondo me

fateci caso una buona metà dei siti che continuiamo a vedere risentono di una di queste impostazioni sbagliate che ne impediscono il successo.

•Sito uguale o in linea con la “ brochure” o depliant aziendale” ne ne ripropone pari pari lo svolgimento
•Sito organizzato per contenuti che riproducono la struttura aziendale interna
(ad es. sito che ricalca l’organigramma e la suddivisione in funzioni, dipartimenti, uffici, ecc.)
•Contenuti riprodotti con lo stesso identico stile “ interno” usato in azienda
, quindi con organizzazione dei testi adatte tutt’all più per un house organ (termini usati, tipi di contenuti, ecc.)
•Sito che punta solo all’effetto del design delle pagine,delle immagini, delle animazioni
(grazie al cielo il periodo di Flash è finito, ma stanno rinascendo siti che contano solamente su grandi immagini a pieno schermo e magari in movimento.
•Sito non interconnesso con il resto del Web, è un argomento più tecnico ma importantissimo: un sito internet “vive” in rete e deve essere immerso nel traffico di dati, senza collegamenti con altre realtà on line questo non è possibile e quindi il sito resta inutilizzato
•Sito trattato come un qualunque altro progetto aziendale“ interno”, (mentre è uno strumento di comunicazione), il responsabile IT aziendale raramente è un progettista di interfacce grafiche, corre il rischio quindi di realizzare un sito tecnicamente ineccepibile ma gestibile con difficoltà dagli utenti.

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

 

 

 

 

 

 

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

I grandi classici del web design: il metodo Nielsen e la usabilità delle pagine web

Sapete che anche nel settore del web design/marketing esistono i grandi classici? Saggi o libri che hanno inventato categorie che oggi sono di usi comune.

Oggi vi ricordo appunto la usabilità delle pagine web, studiata per primo da Jacob Nielsen nel 1991, è importante capire che quei principi di base sono appunto  ancora oggi fondamentali e invito a approfondire l’ argomento sui libri che sono stati successivamente scritti in merito magari dallo stesso Nielsen.

Due riferimenti a Wikipedia di seguito, il primo sulla usabilità4

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.)

Il termine non si riferisce a una caratteristica intrinseca dello strumento, quanto al processo di interazione tra classi di utenti, prodotto e finalità. È però d’uso comune – per estensione – l’uso di questo termine in forma di aggettivo (es: questo strumento è particolarmente usabile).

Il problema dell’usabilità si pone quando il modello del progettista (ovvero le idee di questi riguardo al funzionamento del prodotto, che trasferisce sul design del prodotto stesso) non coincide con il modello dell’utente finale (ovvero l’idea che l’utente concepisce del prodotto e del suo funzionamento).

Il grado di usabilità si innalza proporzionalmente all’avvicinamento dei due modelli (modello del progettista, e modello dell’utente).

Principali caratteristiche di un sistema usabile[modifica | modifica wikitesto]
Efficacia: accuratezza e completezza con cui certi utenti possono raggiungere certi obiettivi in ambienti particolari.
Efficienza: le risorse spese in relazione all’accuratezza e completezza degli obiettivi raggiunti.
Soddisfazione: il comfort e l’accettabilità del sistema di lavoro per i suoi utenti e le altre persone influenzate dal suo uso.
Facilità di apprendimento: l’utente deve raggiungere buone prestazioni in tempi brevi.
Facilità di memorizzazione: l’utente deve poter interagire con un’interfaccia anche dopo un periodo di lungo inutilizzo, senza essere costretto a ricominciare da zero.
Sicurezza e robustezza all’errore: l’impatto dell’errore deve essere inversamente proporzionale alla probabilità d’errore.

L’esperienza dell’utente[modifica | modifica wikitesto]
Exquisite-kfind.png Lo stesso argomento in dettaglio: User Experience.
L’esperienza dell’utente è un concetto di natura multidimensionale che descrive la complessa reazione dell’utente di fronte all’interazione con strumenti interattivi. Le dimensioni che determinano l’esperienza dell’utente sono 3:

dimensione pragmatica: funzionalità e usabilità del sistema
dimensione estetica/edonistica: piacevolezza estetica, emotiva e ludica del sistema
dimensione simbolica: attributi sociali, forza del Brand, identificazione
L’usabilità si determina rispondendo a domande quali:

che cosa vuole o deve ottenere l’utente?
qual è il background culturale e tecnico dell’utente?
qual è il contesto in cui opera l’utente?
che cosa deve essere demandato alla macchina e che cosa invece va lasciato all’utente?
All’inizio di ogni progetto impegnativo, si dovrebbero ottenere risposte per le domande precedenti attraverso un’analisi dell’utente e delle sue esigenze. Sono almeno tre le modalità per trovare le suddette risposte:

analisi delle esigenze incentrate sull’utente
costruzione dei profili utente
verifiche di usabilità.
Al fine di valutare al meglio l’usabilità di prodotto, è possibile eseguire dei Test di Usabilità, con utenti reali. In questa fase, gli utenti sono chiamati a compiere delle semplici operazioni caratteristiche del prodotto, evidenziandone pregi e difetti.

Inoltre è possibile procedere alla Misurazione dell’usabilità, attraverso complesse tecniche, capaci di dare una valenza più o meno oggettiva, al grado si usabilità di un prodotto.

Il secondo relativo al nostro autore

Jakob Nielsen (Copenaghen, 1957) è un informatico danese.

Insieme a Donald Norman, Bruce Tognazzini e Jef Raskin è considerato[senza fonte] il guru dell’usabilità. È uno scrittore, oratore e consulente. Ha un dottorato in design dell’interfaccia utente e informatica del Politecnico Danese. Nielsen lavorò nella Bellcore, nell’IBM, e come ricercatore senior alla Sun Microsystems. Nel 1991, quando il Web era all’inizio, Nielsen correttamente predisse che gli ipertesti sarebbero stati il futuro del design dell’interfaccia utente e prese la palla al balzo scrivendone un libro. Aggiornò il suo libro nel 1995 tenendo conto del successo del Web.

Dopo che i suoi articoli sull’usabilità, regolarmente pubblicati sul Web, attrassero l’attenzione dei media, fondò una compagnia di consulenza sull’usabilità, la Nielsen Norman Group coll’esperto di usabilità Donald Norman.

Nielsen è considerato la massima autorità[senza fonte] sull’usabilità del web. È noto per le sue critiche (spesso severe) a siti popolari, soprattutto sul fatto che puntino troppo su caratteristiche come le animazioni (come Flash) e grafica a spese dell’usabilità, cosa particolarmente dannosa per i disabili. Nielsen continua a scrivere ogni quindici giorni in una newsletter sul web design e ha pubblicato vari libri sul soggetto.