Dopo 20 anni nel mondo della comunicazione come Art Director per brand medio grandi e pubblica amministrazione, il mio orientamento attuale è rivolto a soddisfare le esigenze di progettazione di modelli di business per le aziende, creando per loro incrementi di fatturato tramite l’analisi di User Experience con effort efficaci che faccia sbalzare la loro revenue economica in tempi utili.

Contattami per una consulenza gratuita via email su info@ux360.it.

 
[wpi_designer_button id=962]
 
[wpi_designer_button id=’890′]

L'articolo I’m Human proviene da UX360 Team.

Lo schema concentrico ti permette in 15 secondi di catturare visivamente ogni singolo elemento dei mondi UX/UI. E’ quindi uno spettro completo dei tools da poter prendere in considerazione durante la progettazione di un ambiente web o app. Permettendo agli occhi degli spettatori di passare dal centro si può seguire un filo di argomenti verso l’esterno in modo granulare.

Il Sommario

Il diagramma è diviso in diverse categorie al livello top. Queste presentano un salto da un punto di lancio da considerare prima della progettazione di un nuovo prodotto. Riassumiamo ciascuno di questi per evidenziare come si naviga lo schema a ruota delle UI e UX per derivare l’approccio definito del flusso di lavoro e i set degli strumenti.

Tools

I tools UX UI a forma di fetta di torta presentare gli strumenti digitali che i designer possono visualizzare per sostenere il processo di analisi che va dal wireframing fino alla realizzazione dei mock-up ad alta definizione.

Action Buttons

I modelli UX UI sono stati solidificati in un insieme comune di controlli riconoscibili, che si tratti di un componente aggiuntivo al carrello icona o altri controlli dell’interfaccia utente. Avendo questi modelli chiave davanti e al centro si potrà realizzare una usabilità maggiore durante il processo di progettazione.

Input Device

I nuovi dispositivi di input stanno venendo costantemente alla luce. Per esempio ci i nuovi occhiali VR di google che hanno un tasto per controllare le interazioni e che forniscono nuove sfide per i designer di prodotto. In questa sezione della torta elenchiamo le periferiche di input per aiutare il brainstorming per le capacità che ogni dispositivo ci può presentare.

Output Device

I dispositivi di uscita sono un altra considerazione dei processi UI e UX in continua evoluzione. Che si tratti di TV, PC, Smartphone o uno dei tanti altri dispositivi indossabili o occhiali di protezione, bisogna dare la giusta priorità a seconda del vostro design di prodotto che dovrà essere in linea con il target di utenza.

User Controls

Qui ci sono i diversi controlli standard delle app che formano la maggior parte delle possibili interazioni che gli utenti sono abituati a fare. Come i menu a discesa o altri.

Visual Design

Il visual design è il livello massimo dei metodi di comunicazione tramite immagini, fonts, colori ed altre forme base della grafica.

Collaboration

Sono i metodi di lavoro aggregativo dalla prospettiva del  design thinking sino alla migliore UX & UI.

Sketching

Qui a colpo d’occhio abbiamo i tool di sketching e wireframing che noi tutti amiamo usare per realizzare visivamente le nostre idee.

User Satisfaction & User Testing

Il nuovo punto di riferimento nel settore dei servizi UX e di interfaccia utente è quello di avviare rigorosi test di prodotto. Anche se il test utente non è un concetto nuovo, la sua definizione è stata rafforzata a un livello di preminenza grazie agli stimoli mossi da alcuni aspetti del metodo Agile e pratiche di Lean che rendono il feedback degli utenti un fattore centrale per la definizione user test. Nello schema sono coperte una serie di soluzioni di test utente per supportare il flusso di lavoro.

Site Mapping

È l’esempio di progettazione UX e ci sono varie forme che esso assume a seconda della vista che si desidera comunicare al vostro team ed agli stakeholders.

Prototyping

La prototipazione sta rapidamente diventando una zona innovativa in forte espansione. Prodotti come Adobe Experience Design, Invision e UX Pin stanno vedendo una crescita elevata proprio per questo tipo di processo essenziale durante una progettazione.  Ti danno la possibilità di avere un feedback precode in modo da avere l’opportunità di raccogliere informazioni preziose per lo sviluppo di progetti di prodotti a titolo interattivo prima che una sola riga di codice venga scritta.

Content

È il re di tutti i progetti di design. I contenuti sono disponibili in un vasto numero di forme ed avere diversi tipi di contenuto davanti e al centro può servire da trigger per ideazione di potenziali opzioni di comunicazione ed interazioni.

Data Analytics

Se il contenuto è re, allora i dati di analisi sono i loro “privati consiglieri fedeli”. Forniscono spunti su come modificare il contenuto e soddisfare nuovi obiettivi, e permettono di ottenere intuizioni per nuove strade da percorrere al fine di un miglioramento continuo.

Conclusione

Bankai spera che la loro infografica UX/UI  presenti fonti di ispirazione per il vostro prossimo progetto di design. Consideratelo un dono di Bankai per il vostro studio.

Scarica qui il poster A0

UXblog by Walter Fantauzzi

L'articolo Il Posterone degli elementi UX e UI proviene da UX360 Team.

Quando si tratta di costruire grandi prodotti, il design è la “caratteristica” principale. Più importante è la fase in cui il prodotto domina, e più il prodotto contraddistingue la società che l’ha realizzata con un reale vantaggio rispetto ai concorrenti.

L’industria del design si è evoluta parecchio negli ultimi anni e oggi ci sono una serie di responsabilità racchiuse sotto il cappello dei termini: UX Designer, UI Designer e progettisti di prodotto.

“Qual è la differenza tra questi ruoli di posti di lavoro?”

È una domanda abbastanza comune nel settore della progettazione. Diamo un senso a ciò che ciascuno di questi titoli significa veramente, e osserviamo il motivo per cui l’evoluzione della UI / UX Designers in designer di prodotto è una conseguenza logica nell’era della tecnologia moderna.

UX, UI, prodotto: chi fa cosa?

Tutti questi ruoli hanno una cosa in comune – Tutti progettano come un utente interagisce con un prodotto. Ma queste persone svolgono funzioni leggermente diverse per raggiungere lo stesso obiettivo.

UX DESIGNER

Lo UX designer è principalmente il progettista di come deve essere percepito il prodotto. L’obiettivo è rendere l’interazione dell’utente più efficiente e semplice il più possibile. Lo UX designer osserva il Mindspace di un utente e sopprime questi potenziali problemi grazie a:

1. Progettazione di diversi scenari utente del prodotto e modelli di costruzione dell’interazione.
2. Ricorre a vari tipi di test e guardando ciò che gli utenti fanno (ad esempio studi di usabilità-laboratorio, eye-tracking, test A / B, sondaggi e-mail, ecc) rileva delle problematiche e le soluzioni.
3. Prototipa un’interfaccia e creare la logica di prodotti attraverso wireframe.

UI Designer

Lo Ui designer progetta l’interfaccia utente, sono le persone che realizzano primariamente come il prodotto si presenterà visivamente. Sono responsabili per il modo in cui vediamo il prodotto nella sua versione definitiva. Hanno il compito di progettare ogni schermata o pagina con cui un utente interagisce e si assicurano che l’interfaccia utente comunica visivamente la logica che il progettista UX ha progettato (per esempio, un designer UI creando un cruscotto dati può far fronte agli elementi per interagire con l’utente). Lo UI designer sono responsabili per la creazione di una guida di stile e linguaggio visivo unificato che viene applicato attraverso gli elementi interattivi nell’app.

Product Designer

Il Product Designer è un termine usato per descrivere un designer che è generalmente coinvolto nella creazione del look and feel di un intero prodotto. Molti progettisti si considerano i progettisti che progettano esperienze. Questo significa che un product designer è colui che fornisce una visione reale per UX e UI designer quando si tratta di come determinate funzioni dovrebbero lavorare, o come un certo controllo dell’interfaccia utente dovrebbe apparire.

Le aziende usano il termine ‘Product Designer’ in modo diverso; la definizione più generale è una persona che è un campione nel soddisfare le esigenze di un utente. Come ha detto Justin Edmund, “Un designer di prodotto sovrintende la visione di prodotto da un livello alto per un livello di esecuzione basso (come fare lo styling di un pulsante e come questo impatti sull’utente quando scorre attraverso questa funzione). ”

In conlusione

Il Product Designer rappresenta il prossimo allargamento del campo di applicazione del design, dal solo User Experience design verso uno stato ancora più ampio di progettazione per un intero percorso di sviluppo del prodotto.
I migliori prodotti sono costruiti da persone che capiscono l’intero flusso. Al fine di rendere tali prodotti, gli UI / UX designer dovrebbero cercare di evolversi in designers di prodotto in grado di generare ed elaborare un insieme di informazioni aggiuntive per ottenere il miglior risultato.

Walter Fantauzzi

L'articolo L’evoluzione dell’UX/UI designer nel Product Designer proviene da UX360 Team.

L'articolo Propositi per il 2017 proviene da UX360 Team.

Su di un bellissimo articolo che ho scovato in rete (ma su cui non è riportato l’autore che vorrei ringraziare) viene usato il termine Disneyfication (ed è bellissimo). Difatti l’autore, indica che questo esempio dimostra come sia troppo sofisticata un’animazione funzionale. Qui l’elasticità delle animazioni dei rimbalzi e il ridondare delle visual interaction sono troppo Disneyane.

Le animazioni, sono come delle maledizioni… se ne si abusa possono perdere il loro impatto

Ed è proprio per questo che molti designer stanno confondendo l’interazione con la UI grazie alle funzioni animate con l’intrattenimento o i videogame. Cosa vuol dire questo? Vuol dire che un’animazione, come ho ribadito già nell’altro articolo, non deve essere esagerata… percettibile ma non invasiva. Nell’esempio in basso, potete vedere come in 100ms (millisecondi) tutte le informazioni da inviare all’utente sono pienamente soddisfatte.

In questa demo invece una piccola vibrazione della notifica farà capire all’utente che qualcosa non è andato a buon fine.

E’ quindi utile usufruire di queste animazioni funzionali solo per gli elementi più importanti, o per dare a loro una sorta di priorità di importanza tra l’uno e l’altro.

Walter Fantauzzi

L'articolo La UI non è un cartone della Disney proviene da UX360 Team.

Anche in questo caso una cattiva gestione delle immagini influisce sulla user experience. In che modo? Semplice, vedere un pulsante su uno schermo grande, in modo totalmente sgranato è poco ergonomico. Sembra qualcosa di poco professionale.

Nel mondo di chi sviluppa app Android ed iOs esistono vari formati che sono LDPI, MDPI, HDPI, XDPI, XXDPI, XXXDPI, @1x, @2x, @3x, Retina… Una sorta di minestrone di lettere e numeri.

Giustamente lo sviluppatore iOs ci chiederà: “Voglio le immagini @1x, @2x e @3x (che si legge 1 per ecc…) e le voglio in PNG”. Da designer (si sono anche un designer) potrei rispondere: “Beh ti passo un SVG vettoriale e hai tutte le dimensioni che vuoi”. Ma questa non sarebbe una soluzione ottimale perchè sia Android che iOs impongono certe restrizioni di formato file. Per essere quindi amati dagli sviluppatori bisogna passargli le immagini delle interfacce nel modo più corretto e scalabile (scalabile significa che abbiamo immagini in ottima risoluzione ottimizzate per tutte le dimensioni di schermo dei dispositivi).

Per avere immagini scalabili, bisogna disegnare obbligatoriamente in vettoriale con file SVG (cosa che molti grafici, derivati dalla grafica editoriale o dalla carta stampata, non riescono ancora a comprendere). Questo tipo di progettazione grafica significa disegnare elementi con curve matematiche. Cosa comporta però questo tipo di scelta? Semplice, molte bes**+** da parte degli sviluppatori, ogni qual volta debbano usare un’immagine vettoriale, perchè devono scrivere righe di codice per gestire immagini vettoriali. Questo processo non rende le immagini performanti, anche perchè un’immagine vettoriale è difficile da gestire da parte di dispositivi con Hardware non potenti.

Quindi la Perfomance è quel che importa!

Perchè abbiamo ancora bisogno di immagini bitmap?

In primis, perchè come detto, i dispositivi (e quindi i software di sviluppo app) non gestiscono i file vettoriali nativamente. Sono file che eseguono equazioni matematiche per essere rappresentati su uno schermo. Difatti sono matematica allo stato puro che viene visualizzata su un display e anche se Android ha una suite di librerie native per gestire questi file, non è così semplice lavorarli.

Le risoluzioni degli schermi

In base alla tecnologia di schermo montata su un dispositivo, le immagini vengono rappresentate in un certo modo. E’ ovvio che su un display retina di apple (che ha il doppio dei pixel luminosi per pollice quadrato, di altri schermi) non possiamo passare un’immagine se pure in alta definizione progettata per un display meno evoluto. Pertanto vanno esportate dai software di disegno (qualsiasi esso sia: Photoshop, Illustrator, Gimp ecc…) nel modo più opportuno in base alla risoluzione dello schermo.

La regoletta

Come diceva la mia professoressa di matematica: <<Ecco la regoletta!>>. Per converitre le misure tra Pixel e Punti si può usare questo calcolo:

iOS pixels= (Points* DPI)/163
Android pixels= ( DP * DPI)/160

In questo modo il designer può calcolare le dimensioni di un elemento (pulsante, immagine ecc…) per i vari display android o apple che hanno delle densità di pixel (numero di pixel per pollice quadrato) differenti a seconda del display montato sullo smartphone o il tablet.

Il concetto finale è progettare un design che sia flessibile in base ai dispositivi, e che sia performante a differenza di densità e misura del display. Pertanto è prassi lavorare in versione bitmap con un impianto grafico studiato per la risoluzione più alta, ed avvalersi poi di script (ne trovate di gratuiti in giro) per esportare le immagini nelle varie risoluzioni in modo tale da automatizzare il flusso di lavoro.

Ho reperito questo script che è facilmente installabile con questa procedura (esiste anche questo script alternativo):

Scarica lo script qui

sposta il file  .jsx nella tua cartella script di Photoshop:

Mac: /Applications/Adobe Photoshop…/Presets/Scripts/

PC 64bit: *C:Program FilesAdobeAdobe Photoshop… (64 Bit)PresetsScripts*

PC 32bit: *C:Program FilesAdobeAdobe Photoshop…PresetsScripts*

Una volta installato, selezionate l’elemento da esportare nelle varie risoluzioni e lanciate lo script da File>Scripts>Browse>Nome dello script.

A questo punto vi ritroverete in una cartella le immagini suddivise in sottocartelle per ogni risoluzione così come rappresentato in figura 1

Potete usare queste immagini anche per iOs, qui i riferimenti delle misure

MDPI = (@1x)

XHDPI = (@2x)

XXHDPI = (@3x)

Il Barbatrucco

Un “barbatrucco” per vedere se abbiamo disegnato con le giuste proporzioni una UI è quello di utilizzare il sito material.

1. Scegliete un’icona qualsiasi
2. Selezionate in basso la risoluzione che volete
3. Scaricate i PNG

Vi verrà inviato un file zip contenente le icone per i vari dispositivi e risoluzioni, comparateli con quelle che avete realizzato voi ed il gioco è fatto!

Spero che l’articolo vi sia stato utile e per feedback scrivetemi qui.

Walter Fantauzzi

L'articolo Esportare immagini, questo sconosciuto! proviene da UX360 Team.

Sembra che tutti gli articoli ti dicano che devi diventare un designer esperto anche di codice, perchè presto le intelligenze artificiali faranno parte del nostro mondo… per cui impara questo, impara quello e impara subito o sarai tagliato fuori dal mondo del lavoro… E quindi cosa fai? Impari perchè pensi che incasserai più soldi e che sarai più sicuro sul lavoro.

Ma in realtà la cosa da fare veramente è fissare le idee, e l’unico modo è “scrivere”<!>

Non ci credete? Andate a vedervi i top 5 designer cosa fanno… Io ho scovato Eyal Zuri che pubblica circa 16 articoli al mese (quasi quanto me ) per far crescere Muzli che è un portale di design inspiration. In sintesi lui non usa le parole, crea vignette dinamiche divertenti e leggere… che creano un buzz incredibile nella rete dandogli una visibilità immensa!

Poi c’è Paul Jarvis che nei suoi 20 anni ha passato la maggior parte del tempo a scrivere articoli e insegnare con l’incremento di un fatturato di $400,000 in 18 mesi. Ha passato molti anni a trovare giustificazioni per non scrivere blog, ma alla fine ha iniziato a confezionare articoli per acquisire nuovi clienti.

La scrittura offre grandi possibilità secondo Nick Babich che crea dei mini post ricchi di contenuti non più lunghi di tot parole e studiati per non far spendere più di 7 minuti al lettore affinchè non perda l’interesse nell’articolo stesso. Anche lui come Jarvis hanno partecipato alle Push Conference ricevendo un grandissimo riscontro lavorativo e di immagine.

Scrivere su ciò che ci appassiona è il vadevecum per Matt West autore di HTML5 foundation che oltre a scrivere 3/4 articoli al mese per questo sito, ne scrive tantissimi altri su qualsiasi cosa, dopo un periodo di allontanamento dal mondo della scrittura.

Infine ho trovato Andrew Graunke designer e direttore di Toptal che collega i top designers del mondo con le aziende. La sua passione nella scrittura è quella di realizzare articoli che mettano in contatto tra loro le persone.

Adesso è il tuo turno, scrivi un articoloe magari postalo sulla mia pagina facebook

Walter Fantauzzi

L'articolo Scrivere o Svanire! proviene da UX360 Team.

Proprio così, vedo applicazioni realizzate da fantomatiche aziende informatiche che sono totalmente inutilizzabili ed hanno dei bug assurdi tanto da farmi sorridere e dire: “così imparano a non investire nel design”. Questo non vuol dire che è stata sviluppata male, perchè il povero developer segue solo quello che gli si dice. Spetta quindi alla fase di progettazione definire l’ergonomia e le funzionalità dell’app.

Nel tempo, tra un’arrabbiatura ed un’altra, ho capito che forse siamo noi ad essere percepiti male da persone che ci conoscono solo per sentito dire, che non sanno quindi cosa facciamo veramente, e quale sia il valore aggiunto che possiamo dare ai loro prodotti.

I designer realizzano soluzioni eleganti a problemi che nessun altro potrebbe risolvere

Essere parte del mondo di professionisti nel design, significa che tu hai la capacità di realizzare “cose” che esistono solo nella tua mente e traslare questa tua visione nel mondo reale in qualcosa di tangibile.

Significa, inoltre, che sai osservare il mondo intorno a te, capirne le problematiche ed avere la capacità di risolvere problemi che resterebbero altrimenti irrisolte.

Sei in grado, quindi, di ascoltare problemi e trovare delle soluzioni senza fermarsi alla prima teoria incontrata. I designer, vengono pagati per indagare e valutare ciò di cui un cliente ha davvero bisogno.

Avete mai visto qualcuno che non faccia il designer progettare un’interfaccia UI ?

Penso che di sicuro abbiate avuto a che fare con molti clienti che hanno provato a fare una UI da soli, con un bel bozzetto presentatovi sotto il naso. Siete in grado, quindi, di sviluppare questo bozzetto per loro? Certo che SI!

I designer però non buttano fuori esattamente quello che gli viene chiesto. Infatti devono identificare la migliore soluzione alla bozza richiesta dal cliente, trovando strade che altri non potrebbero percorrere, risolvendo i problemi con soluzioni eleganti e funzionali.

Quindi si, Designer siete speciali!

Per cui attenti a chi vi dice che i designer non sono importanti, spesso lo fanno per abbassare le offerte economiche fatte o per sminuire il lavoro altrui.

Non fatevei fregare!

Walter Fantauzzi

L'articolo I designer sono speciali? proviene da UX360 Team.

L'articolo User Interface per User Experience proviene da UX360 Team.

Definire una giusta palette colori (o schema colore) è un’operazione molto delicata. I fattori in gioco possono essere il colore del brand o del logo, il contrasto visivo, il mood ecc…

Solitamente non supero mai una palette colori di 3 / 5 soluzioni cromatiche, questo per non rendere l’interfaccia UI di difficile lettura. Partendo dalla ruota colore classica, definisco il mio colore principale dal quale declinerò i restanti 2 o 4 colori.

Progettare con colori monocromatici

Lo schema più semplice è quello della scelta di una palette monocromatica, con sfumature che partono dal colore principale. Come potete vedere dall’immagine che segue, partendo dal colore blu della ruota colore, definisco una scala di 6 cromie di blu.

Un esempio che può rappresentare una interfaccia UI con questo schema colore è mostrato nella prossima immagine. Difatti ogni elemento non ha tinte o colori al di fuori di questo schema.

I colori analoghi

Con i colori prossimi a quello principale, possiamo definire uno schema colore di tonalità analoghe al principale. Nella seguente immagine, potete capire come individuare i colori vicini a quello principale.

Un’interfaccia UI basata su questo schema colori è la soluzione riportata nella immagine seguente, in cui con una mappa di calore definita con i colori, viene descritto il peso di ogni informazione.

Complementari

I colori complementari sono i colori opposti a quello principale. Il grande contrasto che ne deriva, attrae l’attenzione visiva dello user. La scelta dei colori, deve essere ponderata sulla fisica della luce e su come essa interagisce sul nostro cervello. Essendo noi umani molto più sensibili al verde, possiamo sfruttare queste caratteristiche visive per accentuare l’importanza di un elemento e magari focalizzare l’attenzione ad un particolare(Verde), usando un colore di contrasto (Rosso). E’ il caso dell’icona di iMessage che vedete in figura.

L’impatto del contrasto nei colori

Tipicamente i colori degli oggetti, dei testi e delle aree nelle UI non sono isolati ma bensì mescolati o sovrapposti tra loro. E’ quindi necessario un giusto contrasto per enfatizzare o meno, l’attenzione all’elemento di interfaccia. Pensiamo ad un pulsante che si attivi solo dopo aver inserito nel campo username e password i dati, il pulsante si attiverà solo dopo aver popolato i text field (i campi) con nome e password.

Progettare per il daltonismo

Personalmente non mi era mai capitato di progettare un app o un sito web per user che soffrissero di daltonismo, fin quando non ho avuto nel mio team di sviluppo un programmatore affetto da daltonismo. Da quel momento in poi, nella mia mente c’è sempre una forma di attenzione a chi ha problematiche cognitive di qualsiasi genere. Nel caso del daltonismo, si parla della incapacità da parte del cervello di percepire alcuni colori. Il rosso e il verde sono combinazioni di colori che danno maggiori problemi, difatti il daltonico è “cieco” davanti a queste situazioni.

Grazie a Photoshop, possiamo disporre di strumenti per simulare cosa visiona una persona affetta da daltonismo, ne è un caso l’immagine seguente.

In conclusione, abbiamo affrontato i principali fondamenti della teoria del colore applicata alla progettazione di UI e di UX. Affinare le abilità all’uso dei colori deve essere uno sforzo continuo!

Walter Fantauzzi

L'articolo The Power of Color proviene da UX360 Team.