Archivi tag: web design

Crea interfacce grafiche di impatto con il metodo Nielsen

Il metodo Nielsen tratta da sempre della User Experience anche da prima che questo termine fosse coniato, veniva definita usabilità, termine che ancora preferfisco.

In questo articolo vediamo quali possono essere le prime reazioni dell’utente nei confronti della nostra interfaccia e quanto influiscono sui risultati che vogliamo ottenere.

La prima reazione istintiva che si prova osservando il design di un sito, influenza il modo in cui gli utenti percepiscono la pertinenza, la credibilità e persino l’usabilità dello stesso.

Tutto il processo di progettazione deve rispettare questo comportamento, in questo modo i progettisti possono realizzare prodotti più efficaci.

A tutti noi piace pensare di essere esseri umani logici capaci di mantenere il controllo sulle decisioni che prendiamo, ed in una certa misura, lo siamo.

Di conseguenza, come praticanti progettisiti di User  eXperience, dobbiamo anche capire in che modo il comportamento irrazionale influenza il processo decisionale e tenerlo in considerazione nei nostri progetti.

Esistono due modi con cui le persone elaborano le informazioni:

Il Modo istintivo, il nostro “sistema automatico”, è in gran parte involontario e richiede poco sforzo, ma è veloce nel rilevare relazioni semplici o riconoscere modelli.

Il Sistema razionale, d’altra parte, è lento e faticoso, richiede la nostra attenzione; di solito è coinvolto in attività complesse come la matematica mentale.

Tendiamo a identificarci con il nostro sé del Modo razionale: coscienti, vigili e in controllo del nostro destino. Tuttavia, in molti dei nostri comportamenti, il Modo istintivo rimane ampiamente alla guida.

Anche quando non è completamente al comando, fornisce gran parte dell’input su cui si basa il Modo razionale.

il Modo istintivo ci fornisce scorciatoie basate sull’esperienza.

Elaborare con cura ogni oggetto che ci circonda sarebbe impossibile e richiederebbe troppo tempo, avrebbe reso i nostri antenati primitivi una facile preda per i loro nemici in natura.

IlModo istintivo ci consente di identificare rapidamente le informazioni rilevanti per un’attività mentre il Sistema 2 utilizza questo input per prendere una decisione ragionevolmente accurata. Perché i designer dovrebbero preoccuparsi dei processi automatici e impliciti di del Modo istintivo? Ecco alcuni motivi:

Il Modo istintivo definisce come gli utenti giudicano la rilevanza delle informazioni.

Durante le attività di ricerca delle informazioni, gli utenti eseguono rapidamente la scansione delle informazioni pertinenti e tendono a interagire con gli articoli che presentano un elevato contenuto di informazioni.

Il  Modo razionale può “dire” al Modo istintivo a cosa rispondere, a seconda dell’attività che cerca di risolvere.

In effetti, i dati di eyetracking indicano che i pattern di scansione sul web sono ottimizzati per l’obiettivo attuale. Ad esempio, se gli utenti desiderano cercare informazioni su un sito Web, potrebbero ignorare tutto tranne gli indicatori di ricerca (una lente di ingrandimento, la parola “ricerca” o un campo di input).

Il Modo istintivo è eccellente per escludere informazioni irrilevanti, tranne quando le informazioni rilevanti sembrano informazioni irrilevanti (e di questo dobbiamo ringraziare una grafica troppo minimalista). In tali casi, le informazioni rilevanti saranno ignorate allo stesso modo delle informazioni irrilevanti.

Pertanto, le prime impressioni sono veloci, sono per lo più accurate, ma non del tutto infallibili. Questo è il motivo per cui enfatizziamo che qualsiasi cosa sia importante per gli utenti nella loro fase attuale del loro viaggio dovrebbe effettivamente sembrare importante, sia che si tratti di un carattere più grande, di caratteri in grassetto, caselle, pulsanti o altri elementi dell’interfaccia utente che si distinguono.

Anticipando le esigenze degli utenti, possiamo guidare gli utenti verso azioni desiderabili (eticamente, ovviamente). Sapendo questo, i progettisti e gli esperti di UX potranno risparmiare tempo prezioso, energia e denaro evitando contenuti destinati ad essere ignorati in un batter d’occhio.

2. Il Modo istintivo influenza il modo in cui gli utenti percepiscono l’estetica e, indirettamente, l’usabilità di un sito.

Le persone tendono ad essere più indulgenti nei confronti di disegni belli e meno nei confronti di quelli visivamente stonati. Se un sito web è esteticamente gradevole, gli utenti tenderanno a ricordare il sito come più utilizzabile di quanto non fosse in realtà.

Il Modo istintivo è colui che decide molto rapidamente, a livello viscerale, se un sito è bello.

Infatti, secondo la ricerca di Gitte Lindgaard e dei suoi colleghi, una decisione sull’estetica viene presa già dopo 50 millisecondi dopo che si ha iniziato a visitare un sito, e raramente cambia se si da alle persone più tempo. Per non dire che la scarsa usabilità non verrà notata o ricordata, o che l’usabilità è meno importante, ma se stai sollecitando nuovi clienti, sicuramente è utile iniziare con il piede giusto in quei primi millisecondi.

3. Il Modo istintivo  definisce in che modo gli utenti giudicano la credibilità del sito.

Quando gli utenti atterrano su una pagina, hanno spesso un obiettivo in mente, ovvero il Modo Istitintivo inizierà con alcune istruzioni ricevute  dal Modo razionale. Ma se la pagina presenta determinati elementi di progettazione che si distinguono (ad esempio, un pulsante rosso in un muro di testo nero), il Modo istintivo verrà automaticamente colpito da loro.

Secondo la teoria dell’interpretazione della prominenza più importante è un elemento su una pagina, maggiore è il suo impatto sulla credibilità complessiva del sito. Questo effetto può essere positivo o negativo, a seconda di come le persone interpretano quell’elemento. Pertanto, un annuncio in movimento nella parte superiore della pagina sarà molto saliente e sarà percepito come fastidioso, quindi diminuirà la credibilità del sito.

D’altra parte, una grande approvazione da una pubblicazione di rilievo come The New York Times o The Wall Street Journal può essere interpretata come positiva e aumentare la credibilità del sito.

Implicazioni per la progettazione

Ecco alcune cose da tenere a mente durante tutto il processo di progettazione per supportare e sfruttare i processi automatici del Modo istintivo. Identifica i flussi di lavoro chiave per ogni persona. Ogni dato prodotto potrebbe avere diversi segmenti di pubblico, ognuno dei quali svolge diversi compiti.

Usa i personaggi per rappresentare questi tipi di utenti. Comprendi le mentalità e le attitudini di vari tipi di pubblico, identifica i loro obiettivi principali e come potrebbero tentare di raggiungerli. Una volta identificati i compiti che i tuoi utenti potrebbero realizzare, traccia i loro flussi di lavoro e assicurati di privilegiare visivamente le informazioni rilevanti per quei flussi di lavoro.

Tuttavia, evita di utilizzare la parola “Inizia”, ​​interrompendo prematuramente gli utenti e allontanandoli da altre informazioni pertinenti di cui potrebbero aver bisogno. Consideriamo un ospedale o un sito web medico. Coloro che hanno esperienza di un’emergenza medica avranno bisogno di informazioni altamente attuabili – ogni secondo è una questione di vita o di morte.

Questa informazione non dovrebbe competere visivamente con altre informazioni meno urgenti.

Semplificazione delle immagini per non sovraccaricare il Modo istintivo e per aiutarlo a identificare le informazioni pertinenti.

Abbiamo visto che il Modo istintivo è attratto da qualsiasi elemento di design che si distingue; se sono rilevanti per l’attività corrente, bene! Considera come questi elementi influenzano la percezione di estetica, usabilità e credibilità del tuo sito.

Evita inviti all’azione concorrenti e altrettanto salienti.

Se devi avere due Call To Action, modificali in modo che la loro priorità sia ovvia. Se sono stilizzati in modo troppo simile, o hanno un peso visivo uguale, il Modo razionale potrebbe dover interferire e decidere quale tra i due scegliere, ua azione che alla fine richiederà più tempo e creerà una percezione dello sforzo cognitivo.

Limita i colori e i caratteri di accento e aumenta il contrasto. Troppi colori (più di 4) e troppi caratteri (più di 2) su una pagina o persino in un’infografica possono provocare “l’effetto arcobaleno” – in cui la travolgente variazione disorienta il Modo istintivo e probabilmente crea un’impressione estetica negativa di caos visivo. Non usare colori a basso contrasto o caratteri minuscoli: dà alle persone l’impressione che stai cercando di nascondere qualcosa da loro rendendo difficile la lettura.

Assicurati che i layout siano visivamente bilanciati progettando su una griglia. Seguendo i principi estetici classici come la simmetria e il corretto allineamento, puoi garantire che il tuo sito web sia visivamente piacevole. Le griglie limitano la creatività in una certa misura, ma, sul lato positivo, possono fornire struttura e bilanciamento, che rendono i layout più prevedibili.

I tuoi elementi di design più importanti dovrebbero essere chiari e rafforzare la credibilità. Indica chiaramente chi sei e cosa fai. Se gli utenti devono invocare il Modo razionale per capire se sono nel posto giusto, l’aumento dello sforzo cognitivo li farà innervosire e sospettare del sito. Non costringere i tuoi utenti ad uno sforzo di comprensione esagerato – dichiara chiaramente chi sei e indica cosa fai in modo conciso in un’area di rilievo sul tuo sito.

Dove appropriato, localizza i tuoi contenuti  seguendo le convenzioni della regione. Anche un dettaglio apparentemente minore, come l’uso di una ortografia sbagliata di una parola è una bandiera rossa che indica agli utenti che non sono nel posto giusto e potrebbe inviarli immediatamente al motore di ricerca.

Non chiedere troppo, troppo presto.

Come in ogni relazione, ci vuole tempo per creare fiducia. Se un enorme invito a registrarsi è la prima cosa che vedono i tuoi visitatori quando atterrano sulla tua homepage, il tuo sito sarà percepito come aggressivo e le persone diventeranno infastidite e sospettose. Invece cerca di fornire il valore in primo luogo, e gli utenti saranno più invogliati a ricambiare con qualcosa di valore (il loro contatto e le informazioni finanziarie) come risultato.

Internet facile: i “ro” bot che si fingono noi

Non è ancora capodanno, direte ed effettivamente non stiamo parlando di bot-ti, scusate la freddura, ma è importante rendersi conto del compito svolto da questi programmi on line che in questi giorni stanno condizionando il web.

da wiki: Il bot (abbreviazione di robot) in terminologia informatica in generale è un programma che accede alla rete attraverso lo stesso tipo di canali utilizzati dagli utenti umani (per esempio che accede alle pagine Web, invia messaggi in una chat, si muove nei videogiochi, e così via). Programmi di questo tipo sono diffusi in relazione a molti diversi servizi in rete, con scopi vari, ma in genere legati all’automazione di compiti che sarebbero troppo gravosi o complessi per gli utenti umani.

Nei paesi anglosassoni, con “Bot” s’intende un programma autonomo che nei social network fa credere all’utente di comunicare con un’altra persona umana. Questi bot migliorano di anno in anno ed è sempre più difficile distinguere un bot da una persona umana.

Dovete sapere che quando vi trovate ad interpretare quelle scritte semi invisibili, per esempio in fondo ai post che volete commentare, da riscrivere nel campo vicino alla casellina da barrare ccon la scritta”non sono un robot” state passando un controllo “chapta” anti ro-bot, scusate, un altro trattino ora la smetto.

Infatti una delle funzioni posssibili dei bot o comunque una delle principali è fingersi utenti umani per navigare su vari siti raccogliendone le vulnerabilità in previsione di un  futuro attacco hacker, quindi questi “chapta” altro non sono che controlli anti bot.

Esistono però anche bot che svolgono attività del tutto lecite, come la verifica dei prezzi per singolo prodotto sui siti di e-commerce rivali, consentendo così a chi gestisce il bot e ne raccoglie i dati di tenere costantemente  tarate le offerte sul proprio siti di e-commerce.

I bot possono quindi anche esercitare attività di acquisto, , per esempio di biglietti per concerti che poi automaticamente rivendono a prezzi molto maggiorati, sicuramente avete sentito parlare di questa attività non proprio degna di merito. In pratica non esiste un tipo unico di bot e purtroppo buoni o cattivi che siano sembra che per ora non ci sia la possibilità di bloccarli sena evitare che i gestorinpossano tornare all’attacco più agguerriti di prima.

Abbiamo avuto anche casi di siti web notevolmente rallentati dal grande traffico generato dai bot sulle loro pagine, e probabilmente in questo periodo tra black friday e cyber monday fino a Natale ne vedremo delle belle.

L’Agenzia per l’Italia Digitale

Pubblico il testo che specifica le funzioni di AgId tratto dall’ultimo aggiornamento del 18 settembre 2015
L’Agenzia per l’Italia Digitale (AgID) ha il compito di garantire la realizzazione degli obiettivi dell’Agenda digitale italiana (in coerenza con l’Agenda digitale europea) e contribuire alla diffusione dell’utilizzo delle tecnologie dell’informazione e della comunicazione, favorendo l’innovazione e la crescita economica.

Fra le principali funzioni di AgID:

  • coordinare le attività dell’amministrazione statale, regionale e locale, progettando e monitorando l’evoluzione del Sistema Informativo della Pubblica Amministrazione;
  • adottare infrastrutture e standard che riducano i costi sostenuti dalle singole amministrazioni e migliorino i servizi erogati a cittadini e imprese;
  • definire linee guida, regolamenti e standard;
  • svolgere attività di progettazione e coordinamento di iniziative strategiche per un’efficace erogazione di servizi online della pubblica amministrazione a cittadini e imprese;
  • assicurare l’uniformità tecnica dei sistemi informativi pubblici.

L’Agenzia sostiene la diffusione dell’innovazione digitale per contribuire allo sviluppo economico, culturale e sociale del Paese. Collabora con le istituzioni e gli organismi europei, nazionali e regionali aventi finalità analoghe, anche attraverso la stipula di accordi strategici, promuovendo l’alfabetizzazione digitale di cittadini e imprese, creando nuove conoscenze e opportunità di sviluppo.

Svolge inoltre i compiti necessari per l’adempimento degli obblighi internazionali assunti dallo Stato in materia di innovazione digitale, informatica e internet.

Mi sembra una buona iniziativa tanto più che esiste una sezione del sito dedicata ai designer.

Quest’area contiene in paticolare materiale deicato al content design ed alle user interface.

In particolare  mi sembra interessante il kit specifico indicato per la realizzazione di interfacce per la Pubblica amministrzione

Il visual design è la base dell’user experience

Il design visivo si concentra sull’estetica di un sito e dei suoi materiali correlati implementando strategicamente immagini, colori, caratteri e altri elementi.

Un design visivo di successo non toglie nulla al contenuto della pagina o della funzione. Invece, lo migliora coinvolgendo gli utenti e contribuendo a creare fiducia e interesse per il marchio.

Elementi di base del design visivo

Gli elementi di base che si combinano per creare disegni visivi includono quanto segue:

    • Le linee collegano due punti e possono essere utilizzate per aiutare a definire forme, creare divisioni e creare trame. Tutte le linee, se sono diritte, hanno lunghezza, larghezza e direzione precise.
    • Le forme sono aree autonome. Per definire l’area, l’artista grafico utilizza linee, differenze di valore, colore e / o trama. Ogni oggetto è composto da forme.
    • Le scelte e le combinazioni di palette di colori vengono utilizzate per differenziare gli oggetti, creare profondità, aggiungere enfasi e / o aiutare a organizzare le informazioni. La teoria del colore esamina in che modo le varie scelte influenzano psicologicamente gli utenti.
    • La trama si riferisce a come una superficie si sente o è percepita come percepita. Ripetendo un elemento, verrà creata una trama e formato un motivo. A seconda di come viene applicata una texture, può essere usata strategicamente per attirare o dissuadere l’attenzione.
    • La tipografia si riferisce a quali tipi di carattere vengono scelti, le loro dimensioni, l’allineamento, il colore e la spaziatura.
    • Il modulo si applica agli oggetti tridimensionali e ne descrive il volume e la massa. La forma può essere creata combinando due o più forme e può essere ulteriormente migliorata con toni, trame e colori diversi.

Principi per la progettazione del visual design

La progettazione di successo applica i seguenti principi agli elementi sopra riportati e li riunisce efficacemente in un modo sensato. Quando si cerca di capire come utilizzare gli elementi di base, si deve considerare:

  • Equilibrio, ha a che fare con tutti gli elementi di una pagina visivamente o concettualmente apparire insieme. Il design visivo deve trovare un equilibrio tra unità e varietà per evitare un disegno noioso o travolgente.
  • Gestalt, nel visual design, aiuta gli utenti a percepire il design complessivo in contrasto con i singoli elementi. Se gli elementi di design sono disposti correttamente, la Gestalt del design generale sarà molto chiara.
  • Lo spazio è “definito quando qualcosa è inserito”, secondo Alex White nel suo libro, The Elements of Graphic Design. Incorporare lo spazio in un design aiuta a ridurre il rumore, aumentare la leggibilità e / o creare illusioni. Lo spazio bianco è una parte importante della strategia di layout.
  • La gerarchia mostra la differenza di significato tra gli elementi. I progettisti creano spesso gerarchie attraverso diverse dimensioni, colori e posizionamento dei caratteri nella pagina. Di solito, gli articoli nella parte superiore sono percepiti come i più importanti.
  • L’equilibrio crea la percezione che ci sia una distribuzione equa. Questo non implica sempre che ci sia simmetria.
  • Il contrasto si concentra sul far risaltare gli oggetti enfatizzando le differenze in termini di dimensioni, colore, direzione e altre caratteristiche.
  • Scala identifica una gamma di dimensioni; crea interesse e profondità dimostrando come ogni articolo si rapporta l’un l’altro in base alle dimensioni.
  • Dominance si concentra sull’avere un elemento come punto focale e gli altri come subordinati. Questo è spesso fatto attraverso il ridimensionamento e il contrasto in base a dimensioni, colore, posizione, forma, ecc. La somiglianza si riferisce alla creazione di continuità attraverso un disegno senza duplicazione diretta.
  • La similarità viene utilizzata per far lavorare i pezzi su un’interfaccia e aiutare gli utenti a imparare l’interfaccia più rapidamente.

 

I mattoni per costruire l’esperienza utente (UX)

La progettazione mirata all’esperienza utente (UX) si concentra su una profonda conoscenza degli utenti, su ciò di cui hanno bisogno, su ciò che apprezzano, sulle loro capacità e anche sui loro limiti.

Inoltre, tiene conto degli obiettivi aziendali del gruppo che gestisce il progetto.

Le best practice di UX promuovono il miglioramento della qualità dell’interazione dell’utente con le percezioni del prodotto e di eventuali servizi correlati.

Fattori che influenzano UX

L’obiettivo principale del progettista UX è garantire che gli utenti trovino un valore in ciò che si fornisce loro.

Peter Morville rappresenta questo attraverso la sua User Experience Honeycomb.
Rileva che, affinché ci sia un’esperienza utente significativa e di valore, le informazioni devono essere:

  • Utili: il contenuto deve essere originale e soddisfare un’esigenza
  • Utilizzabili: il sito deve essere facile da usare
  • Interessanti: immagine, identità, marchio e altro design gli elementi sono usati per evocare emozioni e apprezzamenti.
  • Comprensibili: il contenuto deve essere navigabile e localizzabile in loco e fuori sede
  • Accessibili: il contenuto deve essere accessibile alle persone con disabilità
  • Affidabili: gli utenti devono credere a ciò che gli dici

Aree correlate alla costruzione dell’esperienza utente

UX è un campo in crescita che non è ancora molto definito. La creazione di un progetto di successo centrato sull’utente racchiude i principi dell’interazione uomo-computer (HCI) e include le seguenti discipline:

  • La gestione del progetto si concentra sulla pianificazione e sull’organizzazione di un progetto e delle sue risorse. Ciò include l’identificazione e la gestione del ciclo di vita da utilizzare, l’applicazione al processo di progettazione centrato sull’utente, la formulazione del team di progetto e la guida efficiente del team in tutte le fasi fino al completamento del progetto.
  • La ricerca degli utenti si concentra sulla comprensione dei comportamenti, delle esigenze e delle motivazioni degli utenti attraverso tecniche di osservazione, analisi delle attività e altre metodologie di feedback.
  • La valutazione dell’usabilità si concentra sul modo in cui gli utenti possono imparare e utilizzare un prodotto per raggiungere i propri obiettivi. Si riferisce anche a quanto gli utenti soddisfatti sono soddisfatti di tale processo.
  • Information Architecture (IA) si concentra sul modo in cui le informazioni sono organizzate, strutturate e presentate agli utenti.
  • La progettazione dell’interfaccia utente si concentra sull’anticipazione di ciò che gli utenti potrebbero aver bisogno di fare e assicurando che l’interfaccia abbia elementi di facile accesso, comprensione e utilizzo per facilitare tali azioni.
  • Interaction Design (IxD) si concentra sulla creazione di sistemi interattivi accattivanti con comportamenti ben congegnati.
  • Visual Design punta a garantire un’interfaccia esteticamente gradevole in linea con gli obiettivi del marchio.
  • La Content Strategy si concentra sulla scrittura e la cura dei contenuti utili pianificando la creazione, la consegna e la governance dietro di essa.
  • L’accessibilità si concentra su come un individuo disabile accede o beneficia di un sito, sistema o applicazione.
  • Infine la Web Analytics si concentra sulla raccolta, la segnalazione e l’analisi dei dati del sito web.

 

Continuano gli articoli basati sul sito Usability.gov infinitamente utile e dettagliato, tradotti ed adattati in lingua italiana.

Internet Facile – perchè disegnare le interfacce utente sulla carta

Che cos’è la prototipazione su carta?

Molto semplicemente consiste nella buona pratica di disegnare,anche sommariamente su carta la nostra interfaccia utente e simulare su di essa le varie operazioni.

Può essere modificata facilmente e a costo zero ed è di veloce riproduzione allo scopo di essere sottoposta alla valutazione di più soggetti.

L’obiettivo della prototipazione su carta è di verificare le iterazioni che gli utenti possono avere con l’interfaccia in progettazione. È utilizzato per verificare funzionalità, terminologia, navigazione e layout di pagina. Ciò garantisce che le persone possano seguire tutti i collegamenti critici desierati nella navigazione fino al target voluto.

Perché fare prototipazione su carta?

La prototipazione su carta è un modo rapido per ottenere il feedback diretto da utenti reali in fase di progettazione. Poiché richiede uno sforzo di codifica pari a zero, i progetti possono passare attraverso una serie di iterazioni in un breve lasso di tempo.

Questo tipo di operazione richiede comunque tempi molto più ridotti rispetto  ai tempi necessari per gli strumenti di prototipazione più veloci basati su computer.

Quando dovrei fare la prototipazione della carta?

La prototipazione cartacea viene realizzata testando idee e concetti di progettazione già nella fase iniziale.

Il nostro approccio alla prototipazione della carta

La prototipazione della carta è un componente chiave del nostro approccio progettuale iterativo (basato sullo standard di progettazione centrato sull’utente, ISO 13407).

  • Identifichiamo i compiti chiave dell’utente e quindi sviluppiamo modelli cartacei che supportano queste attività.
  • I prototipi sono progettati dai nostri consulenti esperti con carta, sticky notes e acetati.
  • Mostriamo i prototipi ai partecipanti e chiediamo loro di portare a termine i compiti.
  • Diciamo ai partecipanti di utilizzare il prototipo di carta come se fossero un’interfaccia utente reale, puntando con il dito anziché con il mouse.
  • Perché Userfocus? I consulenti devobno avere lavorato su progetti simili, avendo progettato, prototipato e testato interfacce utente per un numero minimo di clienti.
  • A lavoro finito i nostri test ci avranno mostrato cosa funziona e avremo l’esperienza pratica per sostenere le nostre affermazioni. Questo renderà i nostri consigli specifici, equilibrati, onesti e orientati alla soluzione.
Leggi anche: Internet Facile – Cos’è e a che serve l’Interfaccia Utente

 

 

Progettare le interazioni uomo-macchina

Questo è il primo di una serie di articoli tratti dal sito:usability.gov , un risorsa online molto valida non solo per i professionisti del settore, dedicata appunto alla corretta progettazione delle interfacce grafiche (user interface), primo passo verso il conseguimento di una valida User Experience.

Ulteriore dimostrazione del valore di questi dati e dato dal gestore dl sito: US Departemnt oh Health & Human Services

Il design delle interazioni (interaction design), si concentra sulla creazione di interfacce utente coinvolgenti e che guidano l’utente verso comportamenti ben congegnati.

Comprendere come gli utenti e la tecnologia comunicano tra loro è fondamentale in questo campo. Questa comprensione, può anticipare come l’utente potrebbe interagire con il sistema, correggere i problemi in anticipo e inventare nuovi modi di fare le cose.

Best practice per la progettazione delle interazioni

Considerate questo elenco di caratteristiche e le relative domande ,quando progettate interfacce digitali interattive

Capire come gli utenti interagiscono con l’interfaccia

Come può l’utente con il mouse, il dito o lo stilo interagire direttamente con l’interfaccia? Ciò comprende premere pulsanti, trascinare e rilasciare oggetti attraverso l’interfaccia, ecc.

Quali comandi può dare un utente che non conosce direttamente il progetto per interagire con esso? Un esempio di “manipolazione indiretta” è quando un utente preme “Ctrl + C”, si aspetta di essere in grado di copiare il contenuto selezionato.

Dare agli utenti informazioni sulle conseguenze delle loro azioni

Che ne è dell’aspetto (colore, forma, dimensioni, ecc.) Dà all’utilizzatore un indizio sull’utilizzo delle funzioni? Questi elementi aiutano l’utente a capire le regole d’uso dell’interfaccia utente.

Quali informazioni fornite per consentire a un utente di sapere cosa accadrà eseguendo una specifica azione?

Questi elementi indicano agli utenti cosa succederà se decidono di andare avanti con la loro azione. Ciò può includere un’etichetta significativa su un pulsante, le istruzioni prima di una presentazione finale, ecc.

Anticipare e attenuare gli errori

Vi sono dei passi obbligati per prevenire errori? Il principio del Poka-Yoke* dice che posizionare questi vincoli costringe l’utente a regolare il comportamento per andare avanti con l’azione desiderata.

I messaggi di errore forniscono all’utente un modo per correggere il problema o spiegare perché si è verificato l’errore?

Messaggi di errore utili forniscono soluzioni e specificano il contesto.

*Poka-yoke [poka joke] è un termine giapponese che significa “errore di prova” o “prevenzione degli errori involontari”.

Considerare il feedback del sistema e il tempo di risposta

Quale feedback ottiene un utente una volta eseguita un’azione? Quando un utente si impegna ed esegue un’azione, il sistema deve rispondere per riconoscere l’azione e per consentire all’utente di sapere cosa sta facendo. Quanto tempo intercorre tra un’azione e il tempo di risposta di un prodotto?

La reattività (latenza) può essere caratterizzata a quattro livelli: immediato (meno di 0,1 secondo), balbuzie (0,1-1 secondi), interruzione (1-10 secondi) e interruzione (più di 10 secondi).

Pensare in modo strategico a ciascun elemento

Gli elementi dell’interfaccia sono di dimensioni ragionevoli e permettono quindi l’interazione?

La legge di Fitts* afferma che gli elementi, come i pulsanti, devono essere abbastanza grandi da permettere all’utente di poter cliccare su di essi.  Questo è particolarmente importante in un contesto mobile che probabilmente include un componente touch. I bordi e gli angoli sono strategicamente utilizzati per individuare elementi interattivi come i menu?

La legge di Fitts afferma inoltre che, poiché il bordo fornisce un limite che il mouse o il dito non possono superare, tende ad essere una buona posizione per menu e pulsanti.

Stai seguendo gli standard? Gli utenti hanno già abitudini  su come gli elementi dell’interfaccia dovrebbero funzionare. Dovresti solo discostarti dagli standard se pensi che il tuo nuovo modo migliora la interattività rispetto al vecchio.

*In ergonomia la Legge di Fitts rappresenta il modello matematico di un movimento umano. La Legge di Fitts calcola il tempo impiegato per muoversi rapidamente da un punto iniziale ad un’area con una determinata estensione. La legge esprime il tempo in funzione della distanza tra punto iniziale e obiettivo finale, correlato all’estensione dell’area considerata.

Il modello è usato per lo studio del puntamento e dell’interazione fra uomo e macchina, nel mondo reale, ma soprattutto nei computer per la progettazione di interfacce grafiche. Fu pubblicata per la prima volta da Paul Fitts nel 1954 .

Semplificare per migliorare l’apprendimento

Le informazioni sono suddivise in sette (più o meno due) elementi alla volta? George Miller ha scoperto che le persone sono in grado di conservare da cinque a nove elementi nella memoria a breve termine prima di dimenticarsi o di avere degli errori. La gestione delle info da parte dell’utente è semplificata il più possibile?

La legge di conservazione di Tesler* rileva che è necessario cercare di rimuovere la complessità il più possibile dall’utente e invece di costruire il sistema per tenerlo in considerazione. Detto questo, cerca anche di tenere a mente che le cose possono essere semplificate solo fino a un certo punto prima che non funzionino più. Sono utilizzati formati familiari?

La legge di Hick* afferma che il tempo di decisione è influenzato dalla familiarità con cui un utente deve seguire un determinato formato, dalla familiarità con le scelte e dal numero di scelta di cui hanno bisogno per decidere.

*La legge di Tesler sulla conservazione della complessitàindica un aspetto importante dell’interazione uomo-macchina, affermando che ogni applicazione ha una quantità intrinseca di complessità che non può essere rimossa o nascosta. Invece, deve essere affrontato, nello sviluppo del prodotto o nell’interazione dell’utente.

Questo pone la domanda su chi dovrebbe essere esposto alla complessità. Ad esempio, uno sviluppatore di software dovrebbe aggiungere complessità al codice del software per rendere l’interazione più semplice per l’utente o l’utente deve gestire un’interfaccia complessa in modo che il codice del software possa essere semplice?

*A volte viene citata la legge di Hick per giustificare le decisioni di progettazione dei menu. Ad esempio, per trovare una parola data (ad esempio il nome di un comando) in un elenco di parole ordinato a caso (ad esempio un menu), è necessaria la scansione di ogni parola nell’elenco, consumando tempo lineare, quindi la legge di Hick non si applica. Tuttavia, se l’elenco è alfabetico e l’utente conosce il nome del comando, può essere in grado di utilizzare una strategia di suddivisione che opera in tempo 

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

 

Internet Facile Arriva la guida online di Google Material Design

Ho tradotto in italiano inserendo i corretti termini tecnici l’articolo di presentazione della guida Google material

Introduzione

La nostra sfida è stata creare un linguaggio visivo per i nostri utenti che sintetizzi i principi classici del buon design con l’innovazione e le possibilità della tecnologia e della scienza. Questo è il design dei materiali. Questa specifica è un documento in divenire che verrà aggiornato man mano che continueremo a sviluppare i principi e le specifiche del design dei materiali.

Goals

Creare un linguaggio visivo che possa unire i principi classici del buon design con l’innovazione e le possibilità della tecnologia e della scienza.

Sviluppare un singolo sistema ordinato che possa consentire un’esperienza unificata su differenti piattaforme e diverse dimensioni di dispositivi. Le regole della progettazione per mobile deice sono fondamentali, ma touch, voce, mouse e tastiera sono comunque metodi di input di prima classe.

I principi

Il materiale è la metafora che abbiamo scelto

La metafora del materiale è la teoria unificante di uno spazio razionalizzato e un sistema di movimento. Il materiale è percepito come basato sulla realtà tattile, ispirato allo studio della carta e dell’inchiostro, ma tecnologicamente avanzato e aperto alla fantasia e alla magia.

Superfici e bordi del materiale forniscono indicazioni visive che sono radicate nella realtà. L’uso di attributi tattili familiari aiuta gli utenti a capire rapidamente le convenienze.

Tuttavia, la flessibilità del materiale crea nuove possibilità economiche che superano quelle del mondo fisico, senza infrangere le regole della fisica. I fondamenti di luce, superficie e movimento sono la chiave per trasmettere come gli oggetti si muovono, interagiscono ed esistono nello spazio e in relazione l’uno con l’altro.

L’illuminazione realistica mostra cuciture, divide lo spazio e indica parti mobili.

Grassetto, grafico, intenzionale

Gli elementi fondamentali del design basato sulla stampa – tipografia, griglie, spazio, scala, colore e uso delle immagini – guidano i trattamenti visivi. Questi elementi fanno molto più che appagare lo sguardo.

Creano gerarchia, significato e attenzione. Scelte di colore deliberate, immagini da bordo a bordo, tipografia su larga scala e spazi bianchi intenzionali creano un’interfaccia audace e grafica che immerge l’utente nell’esperienza.

L’enfasi sulle azioni dell’utente rende immediatamente evidente la funzionalità di base e fornisce i waypoint all’utente.

Il movimento genera il significato

Il movimento rispetta e rafforza l’utente come protagonista. Le azioni dell’utente principale sono punti di inflessione che avviano il movimento, trasformando l’intero progetto.

Tutte le azioni si svolgono in un unico ambiente. Gli oggetti vengono presentati all’utente senza interrompere la continuità dell’esperienza anche quando si trasformano e si riorganizzano.

Il movimento è significativo e appropriato, serve per focalizzare l’attenzione e mantenere la continuità. Il feedback è sottile ma chiaro. Le transizioni sono effi cienti ma coerenti.

Leggi anche: Internet Facile – G Suite produttività in cloud per le aziende, da Google