Categorie
Ux Blog

8 regole del Fight Club applicate alla UX design

Negli anni 90, il mitico David Fincher realizzava lo straordinario film cult intitolato Fight Club dall’omonimo romanzo di Chuck Palahniuk. Un film che ha aumentato la sua fama negli anni fino a diventare un’icona speciale per una filosofia di pensiero unica ed identificabile con “Fight Club” come insegnamento di vita. Tyler Durden (il personaggio interpretato da Brad Pitt) parlava direttamente a me, quando il film veniva proiettato sullo schermo, come se fosse un docente in realtà virtuale, pertanto potrei traslare quelle filosofie in una Fight Club per UX in 8 utili regole.

 

1. Solo quando avrai perso ogni cosa sarai libero di poter realizzare di tutto

Tyler ci dava questa pillola di saggezza mentre una sostanza chimica divampava tra le sue mani. C’era una soerta di filosofia illuministica nello spiegare che perdere tutto è essere liberi per poter ricominciare da zero. Era qualcosa di eccitante che allo stesso tempo spaventava. E’ la possibilità di ripartire da zero!

 

Applicando alla UX la filosofia di Tyler potrei dire che è obbligatorio rimuovere tutto quello che non è necessario, superfluo o semplicemente inutile. Abbandonare tutti i relitti che ci rallentano verso la via del successo. Ogni elemento nella progettazione dovrebbe essere funzionale e avere uno scopo.

Così come diceva Antoine De Saint-Exupery

“La perfezione viene raggiunta, non quando non c’è più nulla da aggiungere, ma quando non c’è più nulla da togliere.”

 

2. Attaccare delle piume sul tuo culo, non fa di te un pollo

Questo è essenzialmente quello che Tyler ci dice per credere in noi stessi e renderci conto di chi siamo senza cercare di essere qualcosa che non sei. E’ importante però attuare anche questa regola nella UX e potrei enunciare che è bene si valutare le soluzioni messe in altro da altri, capirne i segreti ma non certo cercare di imitarli. Noi non siamo loro, quelle regole potrebbero non valere per il nostro mercato o per il nostro progetto ma potrebbe essere un riferimento o un case study da valutare. Che si tratti di una certa interazione paradigma o una struttura di navigazione, ponetevi le domande vitali:  perché, chi, come e quando si sta utilizzato questo oggetto nella vostra UX.

3. Le cose che possiedi finiscono per possederti

Ok, se qualcuno ama davvero quello che facciamo e spende ogni loro momento nella giornata ad interagire con esso allora va tutto alla grande. Ma nella realtà non aspettatevi questo. Dopotutto anche i nostri users hanno una vita da vivere e di certo non la passeranno al 99% sulle nostre app o sui nostri siti.

 

4. Rifiuta gli assunti di base della civiltà, in particolare l’importanza dei beni materiali.

In questa frase Tyler si scontra con un problema, che oggi credo sia più catastrofico di 20 anni fa quando uscì il film. Si tratta di non dare totale importanza ai beni materiali. Vorrei tanto sapere, oggi, quali sarebbero state le reazioni di Tyler a Facebook, Snapchat, Instagram e compagnia bella. Ovviamente Tyler va abbastanza in estremo per definire il suo punto di vista, ma in sostanza ci sta dicendo di essere consapevoli su ciò che abbiamo effettivamente bisogno rispetto a quello che vogliamo.

Ecco perché è molto importante che noi creiamo esperienze che contano veramente per le persone.

Che si tratti di risolvere un problema, rendendo la loro vita più facile in qualche modo, o semplicemente intrattenendoli dobbiamo realizzare applicazioni utili. Fate attenzione nel vostro lavoro, e se renderete la vita di una sola persona migliore, siatene orgogliosi.

 

5. Questa è la tua vita, e sta finendo un minuto alla volta.

Ok, questo è piuttosto un sentimento deprimente, così possiamo dargli un’occhiata in un modo un pòdiverso. La vita è fugace e il nostro tempo è breve, per cui dobbiamo fare i conti con ogni momento che viviamo. Possiamo applicare questa filosofia UX in due modi diversi. In primo luogo, capire abbastanza rapidamente la mente del nostro utente e sulle sue necessità o meno, in modo che continui ad utilizzare il nostro prodotto o servizio. Un’app difficile da usare o frustrante, farà scappare il nostro user.

Perché? Perché la vita è troppo breve per sprecare su roba scadente.

In secondo luogo, è troppo breve anche per noi nello sprecare il nostro tempo nella creazione di qualcosa che non sia diverso ed che sia un’eccellenza. Se siamo in grado di rendere la vita dei nostri utenti solo un pò migliore durante il loro breve tempo su questa Terra, non sarà altro che tempo speso bene, giusto no?

 

6. Non sei un unico e bel fiocco di neve

Filosofia interessante. Tyler ci ricorda che siamo tutti fatti della stessa materia organica in decomposizione, quindi in definitiva ciò che conta è solo l’individualità! Questo è anche un po ‘un aspetto negativo, quindi cercherò di rigirare in modo più utile il concetto.

Come UX designer, dovremmo cercare di reinventare la ruota ogni volta che iniziamo un nuovo progetto?

Probabilmente no, sarebbe stupido. Va bene però appoggiarsi sugli esempi di altri che sono arrivati ad un obiettivo, prima di noi. Utilizzare soluzioni di successo che sono già là fuori (per il web) per aumentare le informazioni sul proprio lavoro (ma ricordatevi di non attaccare le piume fino il culo, ovvero di non essere superbi) è essenziale. Se le persone godono utilizzando un certo paradigma, potete cavalcare l’onda e utilizzarlo per aiutare le interazioni dei vostri utenti con la vostra app. Sì, l’originalità è fondamentale, ma fate attenzione a non creare frustrazione e porre ostacoli tra lo user e l’interfaccia dell’app.

7. Potrò mai essere complete. Potrò mai essere soddisfatto. Potrò mai essere perfetto.

Vogliamo che il nostro lavoro sia ottimo, ma se si raggiunge quel punto, dobbiamo fermarci? Io non credo. Dobbiamo spingere costantemente noi stessi e il nostro lavoro al meglio, sempre più avanti.

Uno dei fattori che ci permette di spingere noi stessi ulteriormente è la prova. Provare costantemente!!!

 

8. Io dico di smettere ad essere perfetto, dico di cercare di evolverci, e lasciare che i trucioli cadano dove possono.

Tyler ci sta dicendo che va bene anche non essere, o anche non sforzarsi di essere, perfetto. Se le cose non sono esattamente perfette, va bene lo stesso – tanto non rimarrà così per sempre.

Sfruttate al meglio la situazione, apprezzare e godere di ciò che si ha.

Qualunque cosa tu stia facendo in questo momento potrebbe non essere perfetta. E va bene così! Qualunque cosa stai facendo può evolvere, non è finita ancora. E questo è esattamente ciò che un buon UX dovrebbe fare.

Dobbiamo sempre essere la risposta ai desideri dei nostri utenti, ai loro bisogni creando continuamente un prodotto o servizio che possano amare.

Come UX designer, dico di abbracciare la filosofia del Fight Club UX, osservare le sue filosofie e i suoi messaggi nascosti, perché in realtà può aiutarci a creare esperienze migliori.

 

Categorie
Ux Blog

Le Aziende Italiane amano le pezze!

Loading Perpetuo!

“Alla faccia della User Experience” dopo ore ed ore di offline per il sito di un noto servizio italiano, scopro che il tutto era per lanciare il nuovo portale dove c’è stata la morte della UX.

Simpaticamente ho fatto notare su Twitter che il sito era offline

Beh, “che che se ne dica” come al solito la solita pecionata (definizione di: pezza, toppa, artefatto, barbatrucco, mpiccio o ‘mbroglio) all’Italiana, magari da un sacco (molti ma molti) di euro. Ebbene si, sono veramente affranto da quanto accade per la UX nei portali istituzionali in Italia e come al solito questa ne è la dimostrazione. In pratica hanno lasciato un portale con il solito cruscotto (una sorta di escamotage informatica) messo tra lo strato del vecchio sito e una bella grafichetta nuova. Il risultato? Un casino estetico che disorienta lo user. Figuratevi che mi sono perso anche io nel cercare l’estratto conto online del conto bancario.

Eccolo qua, nell’immagine sottostante il portale in tutto il suo splendore.

Resta il fatto che… dove cavolo lo avete messo il conto corrente? Forse una delle operazioni che lo user utilizza di più visto che non vuole fare mega-file negli uffici fisici. Ed inoltre, il valore aggiunto del portale è proprio quello di permettere operazioni bancarie “al volo”, senza fila e senza code, comodamente da casa. Ma allora io dico, se il vostro core business per fare introiti monetari sono operazioni bancarie, perchè cavolo le mettete fuori dalla schermata visiva principale? Cioè io (user) devo scorrere la vista per andarmi a cercare la sezione del conto bancario. Allora il designer che ha progettato il sito potrebbe dirmi: Walter, sei un coj**ne perchè nel menù in alto c’è… si ma dove sta? Quale tra le due informazioni che mi indichi del conto bancario è quello corretto?

Nella schermata successiva, ecco il menu a tendina che si apre quando cliccate su CONTI CARTE E FINANZIAMENTI. Beh che dire si evidenzia in azzurro la voce selezionata ma resta evidente anche SERVIZI ONLINE che è un’altra sezione ammucchiata con le voci di menu. E’ tutto n’ammischio (un miscuglio), dicono in ciociaria (la mia patria). Tornando a bomba, visto che sono su di giri e colmo di rabbia perchè non si investe negli UX designer… Io dico a chi ha progettato il tutto: << hai tenuto conto che siamo in europa?>> ovvero noi leggiamo da sinistra verso destra per cui il nostro cervello si aspetta di trovare le informazioni più importanti su di un sito a sinistra…

 

…E il designer (magari poverino, è stato costretto a fare porcate sotto minaccia o moneta) mi potrebbe dire: <<si Walter, il boss mi ha detto di mettere li le informazioni pubblicitarie dei servizi e non i servizi online>>. Ed io gli direi:<< Ti dovevi impuntare e dire al tuo boss o al dirigente dell’azienda: NON CAPISCI UN CA***o>> come farebbe Steve Jobs, spiegandogli con mappe di calore, con analisi di UX che la scelta è una pura ed emerita cazz***ta.

Avete disorientato l’utilizzatore, come al solito facendo un casino epocale!!!! 

La zona Rossa che dovrebbe essere la parte principale, quella che dovrebbe contenere (per logica) i servizi che potrei avere online, subito!, Al volo! li ho messi in una zona che non mi sarei mai aspettato. Confido a contraddirmi ad ognuno di voi… vi aspettereste dei servizi nella zona verde? Siete abituati a trovarli li in altri siti?

Se fosse così scrivetemi pure, con tanto di capture screen!

E la cosa più bella, dopo che hai usato il 99% del tuo cervello, aver trovato dove devi cliccare per un cavolo di estratto conto… ti compare questo: TA DA”””!

IL SITO VECCHIO!

 

 

Che dire? Io, come ho detto in vari video post, veramente vorrei andare a zappare la terra… almeno ho una dignità professionale. Ma qui siamo al paradosso del paradosso. Portali istituzionali che non rispettano una ben che minima regola di UX, di accessibilità di ergonomia… E se ho fatto fatica io che sono “informatizzato” in un certo senso, uno come mio padre o mia madre come cavolo può usufruire dei servizi?

 

Utile o non utile? Questo il dilemma!

 

Walter Fantauzzi

Categorie
Ux Blog

UX Lean Canvas

In molte situazioni di lavoro giornaliere, io non uso quasi mai un canvas (una sorta di canovaccio inteso come riferimento o modello) standard. Preferisco sempre tessere una sorta di Business Model Canvas direttamente con il mio cliente e in base al progetto che sto portando avanti.

Template di Lean UX Canvas

Recentemente un cliente mi ha chiesto di codificare dei prodotti training che avevamo creato insieme. Mi sono quindi Basato su un processo di Lean Canvas si Ash Maurya.

Secondo Ash il modello Lean Canvas si focalizza su quali sono i problemi dei clienti che il mio prodotto /servizio va a soddisfare; molto spesso, dice Ash nel suo libro, lo startupper o laspirante imprenditore si focalizza e concentra tutte le sue energie su una “sua soluzione”. In realtà sono più importanti  i problemi da soddisfare che le soluzioni da identificare se queste non nascono prima dallattenta valutazione delle alternative per la risoluzione dei problemi.

Di seguito ecco il Lean Canvas risultante per Il gioco nei casino italiani della rete e vietato ai minori di 18 anni.

Modello di Lean Canvas per Social Minds

Ash raccomanda di partire dalla descrizione del problema e poi identificare la alternative esistenti.  Successivamente vanno valutate la soluzione, lemetriche e la UVP, che dovrebbe riflettere i problemi evidenziati.

A questa tabella, poi, si aggiungono la struttura dei costi e dei ricavi.

Questo è un modo abbastanza elastico di realizzare un Lean Canvas.

Categorie
Ux Blog

Come evitare il Caos nei vostri CSS

Il comportamento, inteso nel modo in cui si lavora, anche per la realizzazione di un CSS potrebbe essere soggetto ad una bella dose di UX design. La User Experience, anche un modo per lavorare meglio, uno strumento che possiamo a nostra volta utilizzare per migliorare il nostro modo di lavorare.

Se siete dei web designer di sicuro vi sarete imbattuti nei CSS (Cascading Style Sheets) mentre realizzavate una pagina web. Molto probabilmente avrete sentito dire dai vostri colleghi, che miracoli possono fare i CSS, tipo diminuire il tempo di caricamento di una pagina o come far risparmiare tempo prezioso quando si progetta una pagina web. I CSS sono un vero e proprio “salva vita”, quando volete riprogettare le vostre pagine web o il vostro sito. I CSS hanno un valore inestimabile sia per i designer che per i developer quando lavorano insieme per creare bellissimi siti web dinamici.

 

Tenere un CSS pulito, ti aiuta ad implementare le idee senza perder tempo

Se non avete una buona confidenza con i CSS vi consiglio di realizzare dei piccoli esempi passo-passo in modo da imparare a tenere bene ordinati i vostri CSS per trarne i maggiori benefici.

 

USARE I FRAMEWORKS

Molti web designer creano e pubblicano dei frameworks (una sorta di software che genera altri software) che contengono già un set di regole per gli oggetti e/o elementi più comuni, usati nelle pagine web.

I framework possono aiutarvi a creare un style decente per il vostro website in pochissimo tempo. E’ un mondo in cui sperimentare e magari il vostro set di colori, font ed elementi vari potrebbe essere un prossimo framework popolare.

 

Sforzatevi a favore della semplicità

Più passerà il tempo e più il vostro sito crescerà nei contenuti, sezioni, pagine ecc… Quindi scrollare (scorrere) le moltitudini di righe dei vostri CSS sarà un oblio. Potete però vare un overlap o override di qualsiasi elemento con un CSS che si sovrapponga a quello vecchio.

 

Strutturare il vostro file

Di sicuro il codice aumenterà notevolmente e prima o poi vi troverete a cercare porzioni di codice all’interno di un CSS immenso. Un mio consiglio è commentare il codice ed avere una struttura gerarchica, magari sezionando le parti di codice in aree come (in testa il codice per l’header, in un determinato punto del foglio CSS per l’elmento X e infine per l’elmento Y). Personalmente separo sempre le zone del foglio CSS con la stessa logica di dove sono posizionati i miei elementi, così da intercettarli facilmente.

  1. Tenete i vostri spazi tra gli elementi di regole e dichiarazioni nel CSS in modo uniforme, in modo da essere facilmente leggibili e/o interpretabili.
  2. Utilizzate nomi per le vostre classi e id in modo semantico o “familiare”, come per esempio per un div contact potete separare logicamente due elementi come un “contact_campotesto” da un eventuale “contact_immagine”.
  3. Tenete il codice DRY (Don’t Repeat Yourself – Ovvero non ripetetevi), se per esempio avete usato una classe nel vostro CSS non ripetetela o si creerà confusione.
  4. Mettete alla prova il vostro CSS con gli strumenti del W3C che possono testare la bontà del vostro file CSS.

Andare oltre le nozioni base

Se siete degli utenti un pò più evoluti potete valutare l’uso di programmi come SASS (Syntactically Awesome Style Sheets) o LESS. Sono degli ambienti IDE per poter gestire codici CSS molto complessi e variabili. Personalmente li sto ancora studiando dopo essermi imbattuto nel CMS Prestashop che utilizza proprio un IDE SASS.

 

In conclusione i CSS sono un grandissimo tool per migliorare le prestazioni e l’estetica del vostro sito web o quello del vostro cliente. Danno al vostro Brand un’identità ed influenzano la UX del sito, quindi non prendeteli sotto gamba.

 

Walter Fantauzzi

 

Categorie
Ux Blog

Propositi per il 2017

I miei propositi per il 2017, pensieri professionali a confronto.

Categorie
Ux Blog

#CX

Oggi vi parlerò di qualcosa che non riguarda né la User Experience né la User Interface, ma di Customer Experience o CX. Vi parlerò del modo in cui il cliente percepisce l’interazione con un determinato brand a livello sia conscio che inconscio. E’ un modo intuitivo di misurare l’emozioni evocate nel cliente dopo un’azione razionalmente pianificata dall’azienda.

Si tratta di qualcosa che sia più legata a come il cliente si sente dopo aver interagito con il marchio. La CX è più legata al come che al cosa, ed è come il cliente valuta in modo cosciente o meno la sua esperienza.

I nuovi customers (clienti) potenziali per le aziende di oggi sono abituati ad utilizzare i device nella ricerca di contenuti in modo impaziente ma mai in modo indipendente. Questi comportamenti influiscono sulle nuove dinamiche decisionali, anche se i fondamenti della fiducia e della percezione di valore sono sempre più i fautori fondamentali nelle decisioni di un acquisto o nella scelta del Brand a cui essere fedeli.

Le aziende di conseguenza stanno diventando sempre più “cliente-centriche”, mettendo alla base delle loro strategie la customer experience.

Questo vuol dire che le aziende stanno cercando di “Umanizzarsi” canalizzando i loro sforzi per diversificarsi dai propri competitors. Così facendo quando un consumatore si troverà soddisfatto della propria CX su un determinato sito, sarà più propenso ad acquistare prodotti di quel brand e di sicuro lo sosterrà con il passa parola. I feedback (vedesi TripAdvisor) influiscono, oggi giorno, tutte le nostre decisioni. Costruiamo così una relazione con il brand in tempo reale, con i nostri post o feedback (è l’esempio di booking.com che ci permette di vedere le recensioni di un hotel da parte dei clienti che vi hanno pernottato).

Cosa occorre per costruire una CX positiva

  1. Ascoltare il consumatore: ogni relazione richiede ascolto. Le aziende devono oggi prestare ascolto ai sogni, agli obiettivi, alle passioni dei loro clienti. Dare ai clienti l’opportunità di parlare ed essere ascoltati è un’esperienza memorabile che molto conta nel definire il valore della propria customer experience.
  2. Differenziare il proprio prodotto e/o servizio. Un’esperienza memorabile è sperimentare qualcosa che esce dalla norma. Le aziende devono essere capaci di sottolineare ciò che le rende uniche e differenti dai propri competitors. Se il brand non si distingue dalla massa, nessuna relazione verrà costruita.
  3. Dimostrare il valore della propria offerta. Scoprire cosa ricerca il proprio target. Far percepire ai clienti che il brand sta cercando di risolvere le loro esigenze, permetterà di stabilire una relazione che attribuirà al marchio un valore che va oltre il prezzo o la qualità del prodotto che offre. Creerà una clientela fedele che non solo continuerà ad acquistare nel tempo, ma che raccomanderà ad altri i prodotti del brand.
  4. Dimostrare passione e creatività.
  5. Dimostrare impegno personale.

 

Walter Fantauzzi

Categorie
Ux Blog

La UI non è un cartone della Disney

Nel mio articolo Migliorare la UX con le “Functional Animation” vi ho parlato di come rendere più gradevole l’esperienza d’uso di un utente con delle animazioni funzionali. Ciò non toglie che si esageri con animazioni che possano frustrare l’utilizzatore e che siano superflue.

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

Categorie
Ux Blog

Micro Interactions UI

Se avete seguito gli ultimi trends del mondo grafico per le UI di questo periodo, probabilmente vi siete imbattuti nel crescendo popolare delle micro interactions. Articoli su articoli parlano di questi artefatti per incrementare l’attenzione dell’utilizzatori ed acquisire nuovi utenti per la vostra app.

Ma perchè tutto questo trambusto?

Perchè le micro interaction sono una sorta di innesco – dopo un’azione dell’utente – che riceve un feedback visivo o sonoro per far capire all’utilizzatore che l’interfaccia sta interagendo con lui nel modo opportuno (faccio l’esempio di quando inserite in alcune app la password errata e gli asterischi tremano tra loro).

E’ opportuno quindi anche in fase di progettazione e prototipazione, inserire questi meccanismi per rendere l’app più performante. Infatti, sono parti fondamentali della User Experience, anche se non avete tempo di integrarle nei vostri mockup, dovete assolutamente tentare di inserirli nei vostri mock-up.

Un piccolo trucco può aiutarvi

Un trucco è quello di usare delle GIF animate, facilmente realizzabili anche in Photoshop. Per voi ho scovato questo bellissimo link  di Sanne de Vries, che vi regala una libreria di GIF già confezionate, che vi faranno risparmiare tempo.

Micro Animations  e UI animate in una libreria di GIF.

 

Spero che ora i vostri prototipi saranno più dinamici e più veloci da creare.

Per qualsiasi domanda e/o commento potete lasciare una nota alla mia email: info@ux360.it – Buona UX

 

 

Walter Fantauzzi

 

 

 

Categorie
Ux Blog

Esportare immagini, questo sconosciuto!

Esportare immagini per le diverse piattaforme e densità degli schermi, è una pratica articolata ed ancora poco chiara ai designer.

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!

Schema delle risoluzioni degli schermi e display

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.

Schematizzazione delle differenze delle risoluzioni degli schermi
Densità dei dispositivi

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.

Script che esportano in automatico varie dimensioni di file

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

 

Categorie
Ux Blog

40 icone per le festività

Se siete dei patiti come me di icon con design essenziale, queste regalate da InVision sono meravigliose. Sono state realizzate 40 icone totalmente gratuite scaricabili qui  .

40 icone in EPS, PNG, PDF, e SVG che potete liberamente  modifica ed utilizzare ai fini commerciali.

 

Qui ne trovate anche altre:

 

 

Walter Fantauzzi