I miei propositi per il 2017, pensieri professionali a confronto.
Categorie
Propositi per il 2017
Tag: blog
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!
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):
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.
- Scegliete un’icona qualsiasi
- Selezionate in basso la risoluzione che volete
- 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.
Categorie
Scrivere o Svanire!
Scrivere, scrivere e scrivere è il mio impegno da qualche mese a questa parte. Ho notato che molti siti di web application o di ambienti UX /UI hanno delle sezioni blog dove scrivono migliaia di articoli. Io lo sto facendo per fissare le conoscenze che acquisisco giorno per giorno, e spero siano utili a chi in Italia sta cercando di “divenire” ( termine preso da Herbert Ballerina ) un vero User Experience Designer e non un “usciere” (con tutto rispetto per la classe lavorativa degli uscieri).
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
Categorie
Capire cosa stimola i tuoi utenti
Per far innamorare gli users dei nostri prodotti, abbiamo bisogno dei loro feedback. Potremmo utilizzare un questionario per sapere dagli users cosa li motiva ad utilizzare la nostra app, ma questo sarebbe un approccio poco flessibile e non creerebbe una Human Emotion!
L’unica soluzione è: La ricerca generativa
Come è ben noto, gli esercizi pratici sbloccano la creatività dell’individuo perchè c’è sempre un gradino di separazione tra quello che una persona dice, e quello che fa. La ricerca generativa oltrepassa i filtri cognitivi e mette in evidenza i livelli più profondi dell’esperienza umana.
Elizabeth B.-N. Sanders dice (in questo PDF) “Quando tutti e 3 le prospettive (quello che le persone fanno, quello che dicono e quello che creano) sono esplorate simultaneamente, l’empatia umana si stabilisce più radicalmente con le persone che usano i prodotti e i sistemi informativi”.
Il seguente schema, mostra il processo cognitivo di uno user.
Benefici degli esercizi pratici per le interviste
- Diventare un ottimo ascoltatore per una visione condivisa
- Effettua una conversazione in modo naturale che produca rapporti forti
- Ottenere informazioni importanti per le motivazioni e le aspettative degli users
- Scoprire nuovi modi per ottenere storie piene di emozioni e di dettaglio
- Imparare dalle proprie intuizioni e quelle dei partecipanti
- Creare una forte empatia per generare soluzioni
Tipologie di esercizio
La cosa bella del sistema a ricerca generativa è che una sorta di framework. Un luogo in cui esistono modi di pensare per una ricerca circondata una svariata serie di esercitazioni che ripoterò qui di seguito.
Elenchi
Questo tipo di esercizio richiede ai partecipanti di riordinare le idee per avere un concetto finito di ciò che vogliono. Si otterranno delle idee al primo strato di livello mentale, quelle che di solito diciamo “io la butto lì”. Gli elenchi, o liste, richiedono il minimo sforzo ma creano un grande ordinamento di idee.
Risposte da completare
In questo esercizio, darete ai partecipanti una serie di risposte incomplete che loro devono finire. E’ un ottimo trucco per fargli esternare le loro idee interiori con i concetti che loro vogliono esplorare. Sono facili da completare ed un ottimo metodo di conversazione.
Ordinamento
Il riordino delle carte da ai partecipanti la possibilità di riordinare le idee. Usando delle carte con su scritto contenuti e funzionalità, chiediamo ai partecipanti di raggruppare le carte in gruppi e dargli una priorità dando loro un senso motivato.
Creare
Si tratta di una vasta gamma di esercizi, ma tutte incentrate attorno all’idea di dare ai partecipanti il modo di raccondare una loro storia. E’ un modo per farci spiegare idee complesse ed articolate.
Alcune attività da considerare in questa fase:
- Disegnare
- Collage
- Scolpire e modellare
- Costruire
Per creare soluzioni significative dobbiamo capire la gamma emotiva del nostro pubblico.
Progettare intorno alle persone
I clienti non sono utenti passivi, e per poter creare magnifiche soluzioni dobbiamo capire il range di emozioni intorno all’audience che loro creano.
Come disse Steve Jobs: “Non è compito dei consumatori di capire cosa vogliono.”
Categorie
U.f.o., Cat and Loader
Wooooowwww was my first word when I saw the Grupon slide’s loader. The Mix between the cat and the u.f.o. is pretty funny 🙂
