Archivi tag: Nielsen

Come valutare l’usabilità delle interfacce uomo macchina

La valutazione dell’usabilità si concentra sul modo in cui gli utenti possono apprendere e utilizzare un prodotto per raggiungere i propri obiettivi. Si riferisce anche a quanto gli utenti sono soddisfatti di tale processo.

Per raccogliere queste informazioni, i professionisti utilizzano una varietà di metodi che raccolgono feedback dagli utenti su un sito esistente o piani relativi a un nuovo sito.

Cos’è l’usabilità?

L’usabilità si riferisce alla qualità dell’esperienza dell’utente quando interagisce con prodotti o sistemi, inclusi siti Web, software, dispositivi o applicazioni. L’usabilità riguarda l’efficacia, l’efficienza e la soddisfazione generale dell’utente. È importante rendersi conto che l’usabilità non è una proprietà unidimensionale di un prodotto, sistema o interfaccia utente. ‘Usabilità’ è una combinazione di fattori tra cui:

  • Design intuitivo: una comprensione quasi senza sforzo dell’architettura e della navigazione del sito
  • Facilità di apprendimento: la velocità con cui un utente che non ha mai visto l’interfaccia utente in precedenza può eseguire attività di base
  • Efficienza di utilizzo: come veloce un utente esperto può eseguire attività
  • Memorizzabilità: dopo aver visitato il sito, se un utente può ricordare abbastanza da utilizzarlo in modo efficace nelle visite future
  • Frequenza e gravità dell’errore: la frequenza con cui gli utenti commettono errori durante l’utilizzo del sistema, quanto sono gravi gli errori e come gli utenti recuperano dagli errori
  • Soddisfazione soggettiva: se l’utente ama utilizzare il sistema Quali sono i metodi di valutazione e quando dovrei implementarli?

La chiave per lo sviluppo di siti altamente utilizzabili è l’utilizzo del design centrato sull’utente. L’espressione “prova presto e spesso” è particolarmente appropriata quando si tratta di test di usabilità.

Le opportunità per i test includono:

  • Test di usabilità di base su un sito esistente
  • Focus group, sondaggi o interviste per stabilire gli obiettivi degli utenti
  • Buoni Acquisto test per monitorare lo sviluppo
  • IA Test wireframe per valutare la navigazione
  • Primi test per assicurarsi che gli utenti utilizzino il giusto percorso
  • Test di usabilità per valutare l’interazione dell’utente end-to-end e i sondaggi sulla soddisfazione per vedere come il sito si adatta al mondo reale.

Una combinazione di questi test migliorerà radicalmente l’usabilità del tuo sito, sistema o applicazione.

Lavorare con i dati del test

Le valutazioni di usabilità possono acquisire due tipi di dati: dati qualitativi e dati quantitativi. I dati quantitativi indicano ciò che è realmente accaduto. I dati qualitativi descrivono ciò che i partecipanti hanno pensato o detto.

Una volta raccolti i dati, utilizzarli per:

  • Valutare l’usabilità del sito Web
  • Raccomandare miglioramenti Implementare le raccomandazioni
  • Eseguire nuovamente il test del sito per misurare l’efficacia delle modifiche.

100.000 posti di lavoro per esperti di User Experience

Psicologia dell’interazione tra computere essere umano

Riepilogo UX:

la professione di designer  di User Experience è cresciuta notevolmente dal 1950 ed è ora veramente mondiale.

Anche così, la crescita attesa fino al 2050 farà sembrare minuscola qualsiasi cosa che abbiamo visto finora. Molti fattori della crescita di UX non sono immediatamente evidenti alla maggior parte degli attori attualmente sul campo.

Spesso ci concentriamo troppo sugli eventi attuali: cosa sta succedendo quest’anno nel nostro settore. O cosa sta succedendo questa settimana al nostro progetto. A breve termine, ci saranno sempre alti e bassi, ma consideriamo una prospettiva a lungo termine per una volta e consideriamo un centinaio di anni di esperienza utente, dai primi giorni del 1950 al probabile stato futuro del settore nel 2050.

Nel 1993 Don Norman ha coniato il termine “user experience” per il suo gruppo in Apple Computer. Ma il settore è più vecchio del termine. È difficile tracciare un confine tra i fattori umani tradizionali e ciò che potremmo chiamare “esperienza utente”, finalizzata alla progettazione di sistemi interattivi centrata sull’uomo.

Bell Labs fu uno dei pionieri nel fare questa transizione, a cominciare dal primo psicologo assunto per progettare sistemi telefonici nel 1945: John E. Karlin. A partire dagli anni ’50, i Bell Labs hanno sicuramente anticipato l’User Experience, in particolare sul design della tastiera a toni.

Il fatto che utilizziamo il suo design fino ad oggi è la prova di quanto sia importante ottenere subito l’UX.

Ritengo che la qualità complessiva dell’esperienza utente, sia sul Web che sui computer in generale, sia meno del 10% di ciò che dovrebbe essere. Troppo complicato per le persone normali. Dobbiamo andare molto di più a fondo. Per render possibile  dare una risposta concreta alla domanda sul “progresso del campo User Experience”, ho scelto una singola variabile: il numero di professionisti dell’esperienza utente nel mondo. Ovviamente, posso solo darti la mia migliore stima, dal momento che non c’è accordo su ciò che costituisce uno “specialista UX”. (Nella nostra ricerca sulle carriere UX, abbiamo scoperto che 1.045 persone UX detenevano 210 diversi titoli di lavoro.)

Risulta che i tassi di crescita sono variati leggermente durante ogni terzo dei 100 anni: dal 1950 al 1983: la professione  nel settore User Experience è cresciuta da circa 10 unità (principalmente i primi ragazzi dei Bell Labs) a circa 1.000 persone. Un fattore di crescita di 100.

Dal 1983 al 2017: la professione UX è passata da circa 1.000 persone a circa 1 milione di persone. Un fattore di crescita di 1.000. (LinkedIn aveva 1,5 milioni di membri a fine 2017 che rivendicavano esperienza in user experience, usabilità o architettura delle informazioni. Affermare una competenza e averlo effettivamente sono due cose separate, ma poi molte persone non sono su LinkedIn, soprattutto a livello internazionale, quindi la stima di 1M UXers non è lontano.)

Dal 2017 al 2050: la professione nella User Experience dovrebbe crescere dagli attuali circa 1 milione di persone a circa 100 milioni di persone. Un fattore di crescita di 100.

Ci sono alcuni motivi per cui UX è cresciuta molto velocemente durante questo periodo: la rivoluzione PC degli anni ’80 ha messo sotto pressione l’industria informatica per migliorare l’usabilità dei suoi prodotti. Prima dell’informatica personale, c’era sicuramente bisogno di usabilità, motivo per cui il personale UX è cresciuto di un fattore 100 durante l’era del mainframe.

Ma i mainframe erano computer aziendali, nel senso che coloro che usavano il computer non erano quelli che prendevano la decisione di acquisto. Quindi, durante quell’era remota, l’industria informatica aveva avuto pochi incentivi a produrre interfacce utente di alta qualità.

Con i personal computer, l’utente e l’acquirente erano gli stessi, quindi l’esperienza utente influiva direttamente sulle decisioni di acquisto. Inoltre, un’estesa stampa specializzata ha pubblicato recensioni di tutti i nuovi prodotti software, discutendo spesso della loro facilità d’uso.

La rivoluzione del web degli anni ’90 e 2000 ha dato ulteriore pressione alle aziende per migliorare la qualità della loro progettazione dell’interazione. Con il tradizionale software per PC, la sequenza di pagamento ed esperienza utente erano le seguenti: Hai comprato una scatola di software con involucro termoretraibile. Hai aperto la scatola, hai installato il software e solo allora hai scoperto che è difficile da usare.

Con i siti Web, l’ordine di questi due passaggi è stato annullato: si accede alla home page della società. Se ha senso, navighi nel sito. Se riesci a trovare la strada, alla fine arrivi alla pagina relativa ad un prodotto a cui potresti essere interessato. Se le informazioni sulle pagine dei prodotti ti sembrano pertinenti, puoi procedere al passaggio successivo.

Fai clic su Aggiungi al carrello, passa attraverso la procedura di checkout e infine dai al’azienda i soldi. Quindi, sul web, la sequenza è: prima esperienza dell’utente, secondo pagamento.

Dalla UX dipende il fatturato e questo ha aumentato enormemente la motivazione dei dirigenti ad investire nei loro team di progettisti User Experience.

La grande copertura mediatica dell’usabilità ha reso UX la “novità” (anche se aveva già 50 anni nel 2000, quindi non proprio così nuovo). Questo forte e positivo PR per UX ha fatto pensare a molte aziende “ne abbiamo bisogno.” Questi 3 fattori (rivoluzione PC, rivoluzione Web, copertura della stampa) hanno aumentato la grinta nel tasso di crescita per UX durante il terzo periodo di 100 anni che sto analizzando.

Quanto conta l’Autorità nella user experience

La psicologia del design persuasivo

Questo è un articolo molto “americano” basato, voglio dire, su ricerche svolte presso un pubblico anglosassone piuttosto che latino, di conseguenza, conoscendo i nostri connazionali, ci metterei una discreta tara, comunque in linea di massima offre  buoni suggerimenti.

Una richiesta effettuata da una persona percepita come rappresentante di una determinata autorità, può rendere le persone riceventi più conformi a tale richiesta. L’applicazione di questo principio in UX può facilitare il processo decisionale degli utenti.

Immaginiamo che tu stia aspettando un amico fuori da un ristorante. Una persona che indossa l’uniforme di addetto alla sicurezza si avvicina a te e dice: “Vedi quell’uomo laggiù? È parcheggiato, ma non trova moneta per il tassametro. Vai a dargli una monetina. ”

Gli daresti la monetina? Statisticamente parlando, probabilmente lo farai.  Tuttavia, se il richiedente indossa abiti civili, la percentuale di chi offre le  monetine calerà drasticamente.

Questo è il principio dell’autorità. Il principio dell’autorità si riferisce alla tendenza di una persona a conformarsi con le persone in posizioni di autorità, come i capi di governo, rappresentanti delle forze dell’ordine, medici, avvocati, professori e altri esperti percepiti in diversi campi.

Il principio dell’autorità è un esempio della tendenza umana a utilizzare l’euristica del giudizio.

In questo caso, l’assunto implicito è che coloro che ricoprono posizioni di autorità possono esercitare maggiore saggezza e potere e, pertanto, il loro rispetto porterà ad un risultato favorevole. Come esseri umani, siamo inclini a prendere la decisione più facile piuttosto che quella più accurata e più impegnativa.

Non è difficile capire la fonte del principio dell’autorità. Da bambini, molte delle nostre conoscenze sul mondo provengono da figure di autorità come genitori e insegnanti. Anche ora, da adulti, seguiamo  persone in posizioni di autorità che ottengono grandi risultati con la loro competenza.

Mentre diventiamo più scettici da adulti, tendiamo ancora a considerare il giudizio di certe figure di autorità, come scienziati, dottori, avvocati e operatori delle forze dell’ordine, per essere più affidabili dei nostri, anche su questioni che sono al di fuori del loro dominio. di esperienza.

Autorità e User experience

Affidarsi all’opinione degli esperti è una scelta efficace per prendere decisioni in molte situazioni e ci risparmia il lavoro di ricerca della materia.  Ad esempio, un utente potrebbe dover svolgere un compito complesso e gravoso di informazioni per confrontare prodotti in ambiti in cui è necessaria un’istruzione estesa o uno sviluppo professionale: servizi finanziari, servizi legali o farmaci.

In tempi di incertezza, gli utenti possono guardare le figure di autorità in questi domini al fine di informare le loro decisioni. I professionisti di UX possono sfruttare il principio dell’autorità per aumentare la credibilità dei loro progetti utilizzando per esempio: foto di persone in posizioni di autorità (o persone vestite come se fossero in posizioni di autorità) – dottori o scienziati vestiti con camici bianchi o avvocati vestiti con abiti simbolo.

Considerazioni etiche dell’autorità

L’utilizzo del principio dell’autorità a proprio vantaggio non significa che sei libero di ingannare i tuoi clienti con false pretese di autorità. Dopotutto, ci sono degli standard etici da rispettare nel campo della UX.  Dovremmo considerare, in primo luogo, se siamo onesti nel richiamare figure autoritarie.

Valuta se le tue sponsorizzazioni e la sezione “clienti precedenti” includono società che hanno accettato di essere affiliate pubblicamente alla tua organizzazione. In caso contrario, lavorare per ottenere il permesso prima di usare il loro logo nella  home page (o su qualsiasi pagina).

Considera la regola d’oro dell’etica nel design UX: “Chiediti se la tua strategia persuade gli utenti a fare qualcosa che non vorresti essere persuaso a fare tu.”

Conclusione

Possiamo usare il principio dell’autorità per contribuire ad alleviare lo sforzo del processo decisionale. Riducendo lo sforzo richiesto per prendere una decisione (e quindi riaffermando tale decisione), possiamo aumentare la fiducia degli utenti e potenziare i nostri clienti.

Eyetracking e schema a F, per interfacce grafiche al top

La distribuzione dei contenuti a  F rende l’interfaccia grafica più interessante

Le visualizzazioni di Eyetracking mostrano che gli utenti leggono spesso pagine Web in uno schema a forma di F: due strisce orizzontali seguite da una striscia verticale.

F per veloce (fast).

È così che gli utenti leggono i tuoi preziosi contenuti. In pochi secondi, i loro occhi si muovono a velocità sorprendenti attraverso le parole del tuo sito Web in un modello molto diverso da quello che hai imparato a scuola. Un nuovo studio sull’eytracking, ha analizato come 232 utenti hanno guardato migliaia di pagine Web. Il comportamento di lettura principale degli utenti è stato abbastanza coerente in molti siti e diverse attività.

Questo modello di lettura dominante sembra un po ‘come una F e presenta le seguenti tre componenti:

  • Gli utenti leggono prima in un movimento orizzontale, di solito nella parte superiore dell’area del contenuto. Questo elemento iniziale forma la barra in alto della F.
  • Successivamente, gli utenti spostano leggermente la pagina verso il basso e quindi leggono in un secondo movimento orizzontale che in genere copre un’area più corta rispetto al movimento precedente. Questo elemento aggiuntivo forma la barra inferiore di F.
  • Infine, gli utenti scansionano il lato sinistro del contenuto con un movimento verticale.

A volte questa è una scansione abbastanza lenta e sistematica che appare come una striscia solida su una mappa termica per l’eyeering. Altre volte gli utenti si muovono più velocemente, creando una mappa di interesse dicontinua.

Questo ultimo elemento forma la radice di F.

Ovviamente, i modelli di scansione degli utenti non sono sempre composti da esattamente tre parti. A volte gli utenti leggeranno una terza parte del contenuto, rendendo il modello più simile a una E che a un F. Altre volte leggeranno solo una volta, rendendo il modello simile a una L rovesciata (con la traversa in alto) . Generalmente, tuttavia, i modelli di lettura assomigliano approssimativamente a una F, sebbene la distanza tra la barra superiore e quella inferiore vari.

eyetracking male female

Le aree in cui gli utenti apparivano più colorati sono di colore rosso; le aree gialle indicano meno visualizzazioni, seguite dalle aree verdi meno viste. Le aree grigie non hanno attratto alcuna fissazione.

Gli utenti leggono tre diversi tipi di pagine Web: un articolo nella sezione “chi siamo” di un sito web aziendale , una pagina di prodotto su un sito di e-commercee risultati di un motore di ricerca pagina. Va detto comunque che se si strizzano gli occhi e ci si concentra sulle aree rosse (più viste), tutte le mappe termiche mostrano il modello F previsto. Certo, ci sono alcune differenze.

Il modello di visualizzazione F è una forma generale approssimativa piuttosto che un comportamento uniforme e pixel-perfetto.

Nella pagina di e-commerce , la seconda traversa della F è più bassa del solito a causa dell’intervento dell’immagine del prodotto. Gli utenti hanno inoltre assegnato un tempo di fissazione significativo a una casella nella parte in alto a destra della pagina in cui sono stati trovati il ​​prezzo e il pulsante “aggiungi al carrello”.

Sul SERP, la seconda traversa di F è più lunga della traversa superiore, principalmente perché il secondo titolo è più lungo del primo. In questo caso, entrambi i titoli si sono rivelati ugualmente interessanti per gli utenti, anche se in genere gli utenti leggono meno della seconda area visualizzata su una pagina.

Implicazioni del modello F

Le implicazioni del modello F per il web design sono chiare e mostrano l’importanza di seguire le linee guida per  il Web invece di tagliare e incollare il testo come è stato impaginato per la stampa.

La lettura approfondita è rara, soprattutto quando i potenziali clienti stanno conducendo la loro ricerca iniziale per cercare possibili fornitori. Sì, alcune persone leggeranno di più, ma la maggior parte no.

I primi due paragrafi devono indicare le informazioni più importanti.

C’è qualche speranza che gli utenti leggeranno questo materiale, anche se probabilmente leggeranno più del primo paragrafo che del secondo. Iniziare sottotitoli, paragrafi e punti elenco con  informazioni che gli utenti noteranno quando scorreranno il lato sinistro del contenuto nella barra verticale ella F.

Leggeranno la terza parola su una riga molto meno spesso delle prime due parole.

Ricordiamo che, naturalmente, gli utenti eseguono una scansione in modo diverso e più diretto quando cercano prezzi o altri numeri.

User experience per il mobile: si può fare di meglio

I progetti di interfaccia grafica per dispositivi mobili devono fare di più che ridurre l’esperienza desktop a uno schermo più piccolo: devono essere innovativi, integrati e offrire una migliore user experience.

L’usabilità studiata da Nilesen ci dà alcuni utili suggerimenti:

Ci vuole tempo per abituarsi alla creazione di contenuti e codici di user experience 04 per un nuovo mezzo.

Quando fu inventata la televisione, i primi programmi TV furono principalmente trasmissioni radiofoniche tradotte in un nuovo dispositivo.

Ci sono voluti un po ‘di tempo per vedere talk show, game show, sitcom e reality come li conosciamo oggi.

Nello stesso modo i primi siti web erano opuscoli con collegamenti ad altri siti di brochureware.

C’è voluto un po ‘di tempo per l’e commerce,  i blog , i video ed il web 2.0.

Allo stesso modo, molte attuali esperienze mobili sono ridotte o talvolta ridotte a versioni di esperienze desktop.

Ma ricorda che i telefoni cellulari o i tablet implicano diversi tipi di esperienze rispetto ai desktop o ai laptop.

Portiamo con noi questi potenti dispositivi mobili e li utilizziamo in una grande varietà di contesti, in molte località e situazioni diverse. Interagiamo con questi dispositivi in ​​modi diversi rispetto ai desktop, attraverso il tocco, i gesti e la voce.

Con i loro piccoli schermi e le loro minuscole tastiere, possono sembrare più restrittivi di un desktop, ma in realtà sono più potenti – offrono all’utente strumenti come fotocamere, microfoni, accelerometri, bussole o sensori biometrici (ad esempio, impronte digitali o riconoscimento facciale) .

Pensa ai tuoi design mobili.

Sono versioni ridotte dei design del desktop? Qual è l’opportunità per l’innovazione?

L’utilizzo di un dispositivo mobile può migliorare l’esperienza dell’utente?

Informazioni:

Cosa è importante per gli utenti di dispositivi mobili?

Migliorare un’esperienza per i dispositivi mobili può essere semplice quanto fornire o enfatizzare le informazioni che sono più utili sui dispositivi mobili che sul desktop.

Questa informazione può essere una mappa in-store, la posizione di un dipinto in un museo o orari di apertura.

Alcuni tipi di contenuti importanti e pertinenti sui dispositivi mobili, che dovrebbero essere facili da trovare e utilizzare, includono:

  • Informazioni sulla posizione
  • Informazioni basate sul tempo o temporali (ad es. Eventi, scadenze)
  • Informazioni di emergenza
  • Numeri di telefono

Come proporre nuovi standard di progettazione per il web

A volte i progettisti di user interface hanno la necessità di proporre  nuovi standard alla comunità  dei web designer, ecco cosa fare per proporre nuove regole.

Ricordatevi che usare standard acquisiti è come usare le parole italiane standard piuttosto che il tuo vocabolario quando scrivi. Sei ancora tu quello che decide quale storia raccontare e come mettere insieme i nuovi elementi di design.

Regole per gli standard di progettazione

Per avere successo, uno standard di progettazione dell’interfaccia deve:
essere ben illustrato con esempi poiché i progettisti seguono gli esempi molto più del testo assicurandosi che gli esempi siano pienamente conformi allo standard in tutti gli aspetti e non solo a quello che hanno lo scopo di illustrare (i progettisti possono raccogliere più di un suggerimento da un determinato esempio), avere liste di controllo complete e complete il più possibile (i progettisti preferiscono scansionare un elenco invece di dover leggere il testo) – per esempio, un elenco di tutti gli elementi che devono essere presenti in ogni pagina o un elenco di terminologie preferite, hanno maggiore successo se  offrono un esperto di standard disponibile sia per rivedere i nuovi progetti  sia per consultazioni più informali ogni volta che i progettisti dubitano della corretta interpretazione dello standard (se non è facile rivolgere domande, allora ogni designer trarrà la propria risposta, probabilmente sbagliata).

Non è sufficiente aspettare per essere consultati:
devi cercare attivamente dei progettisti e contattarli per dire loro dello standard e per (gentilmente) commentare i loro progetti e come correggere le inevitabili deviazioni

L’evangelizzazione è particolarmente importante per gli standard intranet
poiché ogni dipartimento avrà la tendenza a ignorare i mandati dalla sede centrale.
Di solito gli utenti della itranet lo fanno con la scusa che “siamo diversi e la gente del quartier generale non conosce la nostra situazione”. È vero, ma tutti sono speciali, quindi il sistema totale sarà un caos totale se le persone sono autorizzate a divergere a causa di circostanze particolari. Solitamente, il bene superiore è effettivamente più grande e l’usabilità generale è aumentata dalla coerenza.

Ci possono essere alcuni casi in cui le circostanze sono così speciali che deve essere tollerata un’incoerenza, ma le deviazioni devono essere limitate a casi con una ragione molto, molto buona (la maggior parte delle buone ragioni non sono abbastanza buone).

Infine, renditi conto che uno standard ha i suoi problemi di usabilità.
Questo è vero se lo standard è implementato come un sito Web interattivo con collegamenti ipertestuali o se si tratta di un documento stampato tradizionale.

Pertanto uno standard di progettazione proposto dovrebbe essere testato con i progettisti per garantire che possano utilizzarlo.

Rispettare gli standard impedisce il design creativo dell’interfaccia grafica?

Gli standard garantiscono un vocabolario coerente, ma non limitano la libertà (e la responsabilità) dei progettisti in questioni di progettazione più profonde.

La usabilità e le linee guida per la stesura degli standard di progettazione

Nessuno standard di progettazione può mai connotare un’interfaccia utente completa. Pertanto, per definizione, rimane molto lavoro di progettazione, anche se il progettista si impegna a rispettare gli standard appropriati.

Spesso, gli elementi di progettazione più importanti sono quelli che non possono essere specificati da uno standard, poiché lo standard non può conoscere le specifiche del singolo dominio indirizzato dal progetto.

Ad esempio, sono stato recentemente coinvolto nella progettazione di un sito di e-commerce. La bozza di pagina iniziale aveva tre modi per arrivare ai prodotti: ricerca e due schemi di navigazione, entrambi presentati come semplici elenchi di scelte.

Uno schema di navigazione era strutturato in base al modo in cui la maggior parte degli utenti ha esperienza d’uso di quel sito; l’altro schema era strutturato in base al modo in cui molti dipendenti del produttore pensavano alle loro linee di prodotto.

Risultati dei test di usabilità:

  • tasso di successo dell’80% quando le persone hanno utilizzato lo schema di navigazione strutturato secondo il tasso di successo del modello mentale della maggior parte degli utenti
  • del 9% quando le persone hanno utilizzato lo schema di navigazione strutturato secondo il pensiero interno dell’azienda

Conclusione: il secondo schema di navigazione è stato abbandonato dal design, anche se questo ha fatto soffrire alcuni dei membri del progetto. Il secondo schema ha avuto i suoi vantaggi per quelle persone che lo hanno usato correttamente, ma ha portato la maggior parte degli utenti nei guai, quindi ha fatto più male che bene.

Cito questo risultato per due motivi: primo, anche se entrambi i progetti di navigazione sembravano identici e seguivano lo stesso standard di interfaccia in termini di aspetto, layout e tecniche di interazione, la loro usabilità era drasticamente diversa.

Il primo progetto era quasi nove volte migliore del secondo. Questa differenza si somma a grandi differenze economiche per un sito di e-commerce che non venderà nulla a meno che gli utenti non possano trovare i prodotti.

La differenza nell’usabilità non è dovuta a differenze nel design delle superfici, ma a differenze nel design profondo: scoprire come abbinare al meglio un Web design alle esigenze degli utenti e come strutturare al meglio l’architettura dell’informazione.

Pertanto, anche quando ci si atteneva a uno standard di progettazione, c’era molto da fare per i progettisti del sito. Un cattivo progettista avrebbe usato il cattivo schema di navigazione sulla home page e non l’avrebbe mai testato.

In secondo luogo, il risultato mostra anche che una grande usabilità non è garantita anche se si segue uno standard dettagliato di progettazione della lettera. Uno standard garantisce che gli utenti possano comprendere i singoli elementi dell’interfaccia nel progetto e sapere dove cercare le funzionalità.

Non garantisce che gli utenti sappiano come combinare le funzionalità dell’interfaccia o che il sistema abbia le funzionalità richieste dagli utenti.

Un user interface designer, ha recentemente riportato un test di usabilità della terminologia del carrello.

Il progetto di bozza riportava il termine “Shopping Sled” poiché il sito (che vendeva articoli per sport invernali) desiderava distinguersi ed evitare la terminologia standard.

Risultato: “Il 50% degli utenti non ha compreso il concetto di Sled, mentre l’altro 50% ha dichiarato di aver capito cosa significasse perché si trovava nella stessa posizione in cui si trovava un carrello. Sapevano che era necessario aggiungere qualcosa e l’unica cosa che ha dato un senso a tutti era la Sled.

” Lezione: non cercare di essere intelligente e utilizzare nuovi termini quando abbiamo buone parole disponibili che gli utenti già conoscono.

Naturalmente, non vi è alcuna garanzia che un sito che utilizza il termine “carrello della spesa” abbia un’interfaccia commerciale facile da usare.

Tutto ciò che è assicurato è che gli utenti capiranno il termine quando lo vedranno usato come un collegamento intorno al sito. Ma questo è un beneficio per l’usabilità che vale la pena di prendere.

La legge di Jakob sul Web Esperienza utente:

gli utenti trascorrono la maggior parte del proprio tempo su altri siti. Pertanto, tutto ciò che è una convenzione e utilizzato nella maggior parte degli altri siti sarà scritto nel cervello degli utenti e si può deviare da esso solo a causa di importanti problemi di usabilità.

Dall’alba dei tempi (1984), abbiamo saputo che la coerenza è uno dei più forti contributori all’usabilità. Il Macintosh era basato su un libro dettagliato delle linee guida per l’interfaccia umana Apple, seguito da quasi tutte le applicazioni.

Uno dei principali vantaggi del Mac (e più tardi di Windows) rispetto ai sistemi precedenti era la coerenza risultante che consentiva agli utenti di utilizzare il software fin da subito.

  • Ad esempio, le persone sapevano che si potevano spostare oggetti da una sequenza di
  • (1) oggetto-selezione,
  • (2) comando Taglia,
  • (3) scorrimento-per-nuova posizione,
  • (4) clic-su-punto-inserimento ,
  • (5) Incolla-comando.

Sempre la stessa sequenza. E i comandi Taglia e incolla erano sempre nel menu Modifica ed erano sempre abbreviati in Command-X e Command-V. Non esiste nessun vero motivo per cui le persone dovrebbero associare la lettera V all’inserimento o all’incollatura, ma poiché è sempre stata la stessa, ha funzionato.

Ovviamente non tutti i software GUI sono uguali anche se la maggior parte dei software ha una forte conformità con gli standard di progettazione della piattaforma al giorno d’oggi.

 

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”

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

Lezione 6 – Come scegliere i migliori temi di WordPress gratuiti, ideali per il tuo sito

Articolo aggiornato e corretto il 23 Febbraio 2017

Lezione 6

Siamo arrivati alla lezione dedicata a chi, avendo già comperato i giusti servizi dall’Internet service Provider, ha installato il proprio sito usando il CMS WordPress e desidera modificarne l’aspetto grafico.
Abbiamo visto come si sceglie il nome del proprio sito, come si acquistano spazi on line, database e servizi dai provider e come si installa wordpress con un solo click.

Come prima cosa vi suggerisco di imparare ad usare l’interfaccia di amministrazione di WordPress per gestire le principali funzioni che sono:

la bacheca
creazione e gestione pagine
creazione e gestione articoli
gestione immagini
SEO
aspetto grafico che comprende a sua volta temi e menu.

Trovate tutti questi temi spiegati in specifiche lezioni su questo sito ( alcuni argomenti sono in corso di pubblicazione)

Penso che in questa lezione può essere molto utile affrontare un aspetto che non va assolutamente sottovalutato, infatti WordPress offre migliaia di possibili template grafici già predisposti, spesso gratuiti e pronti per essere installati, ma non è facile decidere quale è quello giusto per noi.

Impariamo come decidere quale tema di wordpress utilizzare per il nostro sito o blog, come valutare la grafica delle pagine ed in particolare la home, capire in che modo sono impaginati i contenuti infine ma molto importante quali possibilità di gestione della grafica e dei contenuti offre il singolo tema.
Non vi consiglio di scegliere una grafica per il nostro sito perché ci piace, non è detto affatto che piacerà anche ai nostri visitatori, mentre è a loro che dobbiamo fare riferimento se non vogliamo che il nostro lavoro sia ignorato.

Quindi guardiamo cosa ci viene proposto, infatti WordPress offre una gamma molto ampia di temi grafici preimpostati, alcuni gratuiti ed altri a pagamento, per iniziare un tema gratuito va benissimo.
Sappiamo di quale argomento vogliamo parlare vero? E allora diamo un’occhiata ai siti come “Temi gratuiti per wordpress” gestito da WordPress.org italia (quindi una garanzia di sicurezza) poi andiamo a vedere cosa fa la concorrenza, prendere spunto da chi ha già una buona esperienza non è sbagliato.

A questo punto vi consiglierei di leggere i tutorial che ho realizzato sulla teoria della usabilità , per capire come deve essere organizzata la vostra pagina in modo da avere un maggior numero di visitatori.
Cercate di capire:

  • come sono organizzate queste pagine?
  • quale tipo di contenuto è predominante, immagini oppure testi?
  • lo schema di impaginazione è a 2,3 o 4 colonne?
  • le pagine che osservo molto colorate oppure predomina il bianco?
  • in quale posizione è il marchio o logo (ve ne serve uno)?
  • dove è il menù di navigazione principale, è possibile inserirne altri?

Vi rimando ad un ciclo di articoli dedicati alla corretta progettazione e disposizione degli elementi nel sito,

Questa analisi ci sarà molto utile per capire meglio quale struttura grafica vi serve, ricordate che è’ buona norma decidere di usare una gamma di colori e caratteri predefinita per tutte le nostre comunicazioni, impariamo ad applicare questi elementi alle nostre pagine web.

Quando avremo le idee chiare in merito al tema che ci serve apriamo la nostra interfaccia di amministrazione, selezioniamo le voci aspetto/temi/aggiungi temi ed installiamo almeno quattro temi che ci sembrano adatti tra le decine di temi gratis che ci vengono offerti.

Questa è  la pagina gestita da WordPress. org Italia che raccoglie i temi gratuiti e certificati dall’organizzazione.

Possiamo raggiunger la stessa pagina anche dal menù di WordPress, alla voce aspetto/temi/aggiungi nuovo,

  • troviamo un menù in alto che offre voci intuitive
  • In evidenza
  • Popolari
  • Più recenti
  • Preferiti
  • Filtro funzionalità (cerca per: layout, funzionalità, soggetto)
    Cominciamo a rendere attivi  i temi che ci sembrano adatti, (non troppi e riservandoci di cancellare i temi che non useremo) verifichiamo come appare la nostra home page una volta attivato il nuovo tema e valutiamo le possibilità di personalizzazione: aspetto, temi, personalizza, che ogni tema di WordPress ci offre, da questo dipende molto del lavoro che ci aspetta nella prossima lezione.

Ecco l’elenco delle lezioni finora pubblicate

Lezione 1 – Creare un sito web passo passo – partiamo insieme da zero e impariamo come registrare un dominio

Lezione 2 – Hosting e servizi correlati, database ed e mail

Lezione 3 – Capiamo Meglio Cosa Sono: Hosting, Database E Codice Di Autorizzazione

Lezione 4 – Come Installare WordPress Con Un Click, Guida Passo Passo Al Pannello Di Controllo Di Aruba

Lezione 5 – Come Gestire il tuo sito in WordPress, la bacheca

Lezione 6 – Come Scegliere I Migliori Temi Di WordPress Gratis, Ideali Per Il Tuo Sito

Lezione 7 – Personalizzare I Temi Gratuiti Di WordPress, Quali Opzioni Deve Offrire Il Tema Che Hai Scelto

Lezione 8 – Il Protocollo FTP, Il Suo Client Filezilla E Le Pagine Bianche Di WordPress

Lezione 9 – Scrivere Articoli (Post) Con WordPress, l’editor di testo

Lezione 10 WordPress E I 3 Plugin Che Vi Servono Veramente Per Iniziare

Lezione 11 – gestire le immagini con wordpress, area media e allegati