Categorie
Ux Blog

L’evoluzione dell’UX/UI designer nel Product Designer

Che cosa è un prodotto? Fino a poco tempo fa, il termine è stato usato solo in relazione a qualcosa di materiale e spesso si trovano in un negozio di vendita al dettaglio, ma al giorno d’oggi vale come prodotto anche quello digitale. Le applicazioni, sono i moderni prodotti digitali.

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.

Image credit: Wired

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.
Image credit: Nintendo

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

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

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

5 predizioni sulle UX del 2017

Agli inizi del 2016 un articolo pubblicato su  Most Important Design Jobs Of The Future annunciava che nel prossimo futuro sarà la AR ( Augment Reality – Realtà Aumentata) a cambiare la vita delle persone tramite una mappa di operazioni astratte in un mondo psichico. Tra le varie aziende della Silicon Vallery ci sono compagnie che si occupano di AR e che potrebbero influenzare il mondo della realtà aumentata nei prossimi anni.

Tra l’altro stanno nascendo molte aziende che si occupano di AI (Artificial Intelligence – Intelligenza Artificiale) con nuovi tipi di interazione al di fuori da quelli dei tradizionali schermi. Questi permetteranno una interazione uomo-macchina sempre più naturale che mai, magari tramite una semplice chat con un linguaggio umano e naturale. Saranno forse possibili discorsi non solo via testo o chat ma anche con voce a parole o con gesti, con entità digitali che potranno comprendere cosa diciamo e/o cosa vogliamo. E qui che dovremmo capire, in primis Io stesso, come bisognerà modulare in modo naturale le nuove User Experience.

Sarà il tempo la chiave fondamentale di questa evoluzione, che ad oggi non riusciamo a stimare per questo tipo di andamento evolutivo. Dovremmo pertanto costantemente monitorare lo sviluppo delle AI, per essere pronti al cambiamento e spero nel prevenire ciò che avverrà.

Lo stesso UX Magazine aveva predetto che sarebbe stato difficile prevedere la differenza tra UX e Service Design datosi che la UX non è prettamente solo la progettazione di interfacce di App, ma anche lo studio a supporto di piattaforme diverse tra loro. Personalmente sfrutterò il grande potere dei BIG DATA che mi permetterà di valutare o addirittura prevedere cosa potrebbe accadere in questo mondo mistico.

Sarà quindi una grande sfida per il mondo UX!

 

Walter Fantauzzi

Categorie
Ux Blog

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

 

Walter Fantauzzi

Categorie
Ux Blog

Scalare il successo

Progettare UX funzionali non basta! I prodotti software ed le applicazioni web che danno valore tramite il loro uso all’utente finale sono quelle che scalano prima i gradini della scala al successo, solo se sono gradevoli e di facile utilizzo.

Ho visto un webinar di Ward Andrews per il DesignTalk dove ha spiegato i modi per migliorare la UX dei software e dei siti web.

 

schermata-2016-12-07-alle-08-53-57
Video by Invision blog

Tutte le aziende stanno iniziando a capire che devono offrire una grande esperienza d’uso ai loro clienti. Tuttavia, solo recentemente, molte aziende hanno acquisito una mentalità  più smart basata anche su ottime UXd. Ora le aziende, in competizione tra loro, devono essere ancora più efficenti. Ward ha creato quindi uno schema per la scalata al successo condivisibile con le aziende per definire ottime UX. Nello schema di Ward vengono mostrati i livelli di qualità e i livelli a cui bisogna ambire.

 

Img by Invision
Img by Invision

 

I gradini

Il primo gradino lo si sale quando l’applicazione è funzionale, ovvero che il prodotto è valido e viene utilizzato continuamente. Il secondo gradino indicato da Ward è l’usabilità. Infatti lui dice che un applicazione usabile è 100% volte meglio di una funzionale, per cui se non stressi lo user con un app frustrante, puoi salire il prossimo gradino. Il terzo gradino è il comfort,  l’app quindi deve essere confortevole ovvero intuitiva. Deliziosa è il quarto gradino, l’app deve essere accativante con sorprese che rendono felice l’utilizzatore.  Deve essere significativa, questo è il santo gral di tutti i punti cardine della scalata. L’app deve avere un senso o deve dare un senso alla vita dello user, deve darci poteri da poter sfruttare.

 

Vi consiglio di guardare il video sopra indicato cliccando sull’immagine.

Buona UX!

Walter Fantauzzi

Categorie
Ux Blog

12 mosse vincenti

E’ tempo di pensare a rendere le applicazioni mobile e le app intuitive per gli users. Se l’applicazione non è usabile è praticamente inutile. Allo stesso tempo se l’app è utile ma ha un effort difficile da acquisire, le persone potrebbero scegliere di non imparare ad utilizzarla. Creare un design funzionale non è un task semplice per questo vi metto a disposizione 12 mosse per un scacco matto” da campioni.

 

Elimina il superfluo

Un enorme fattore che influisce sulla realizzazione delle app mobile affinchè brilli la UX sono le user interface.
La user attention è una risorsa preziosa, ed deve essere posizionata sapientemente. E’ quindi di vitale importanza togliere il superfluo dalle interfacce.
Finchè i display mobile avranno una dimensione limitata, qualsiasi bottone, testo o linea renderanno la lettura dello schermo complicata.
Dovete quindi focalizzarvi nel comunicare in modo chiaro e coinciso tramite una UI che sia il più possibile invisibile, in modo da far focalizzare l’attenzione sui contenuti essenziali.

 

Progettare per interruzioni

Personalmente quando progetto un’applicazione che prevede acquisti o il check di nuovi messaggi e/o informazioni (tipo orari dei treni), penso allo user come ad una persona “in movimento”.
Questo flusso di operazioni critiche da eseguire, vanno frammentate in alcune operazioni più piccole senza sovraccaricare lo user.
Una semplice regola empirica: one primary action per screen (una sola opzione primaria per vista).
Ogni singola vista della tua app dovrebbe supportare una singola action che sia di valore reale per lo user.
Sessioni corte (o short mobile sessions) significano anche che bisogna progettare per interruzioni, dando possibilità allo user di salvare lo stato in cui si trova e riutilizzarla successivamente.

mobdestips

 

 

Creare una navigazione auto-evidente

Conosci il tuo user ed aiutalo nelle sue necessità.
Come già scritto in un altro articolo, vanno usate funzioni riconoscibili dallo user inerenti al layout dell’app.
Rendete ovvie queste funzioni e rendetele chiare ed intuitive. La navigazione, difatti, dovrebbe aiutare lo user a scoprire ed usare queste funzioni.
Una buona navigazione potrebbe far sentire l’interfaccia invisibile, senza stancare le sue dita nell’utilizzo dell’app giornaliera.
Dopo tutto, anche la più bella featuring o contenuto diventa inutile se l’utente non riesce a trovarlo.

mobdestips02

 

Fare subito una buona impressione

Non è una novità che la prima impressione è quello che rende un’app vincente. Così come nella vita quotidiana, la vostra app non ha una seconda chance.
C’è solo un’opportunità per influenzare qualcuno affinchè sia il vostro user, e se deludi alla prima volta puoi scommetere che loro non torneranno indietro sulla loro scelta.
Nell’azione di onboarding (di salita a bordo) non dobbiamo creare interruzioni, e deve essere solo un insieme di benefici per lo user.
In questa operazione va soddisfatto nello user il senso di conoscenza di quei fattori per iniziare ad utilizzare l’app, niente di più niente di meno.
Se riesci a “far salire a bordo” lo user in modo semplice e pulito, di sicuro sarà il tuo utilizzatore modello.

mobdestips01

 

Allineare con le convenzioni del dispositivo

Nel progettare le app in modalità cross-platform tra Android e iOs, non bisogna utilizzare un comportamento unico basato solo su una tecnologia.
Personalmente utilizzo la UX nativa di ogni dispositivo in modo da rendere le operazioni familiari allo user.
Sembrerà banale, ma spesso utilizzo gli elementi nativi di ogni ambiente come gli input fields, le check boxes ecc… perchè le persone sanno già usarli.

mobdestips04

 

Progettare elementi tappabili

Come già detto in un altro mio articolo, oggetti tappabili piccoli sono difficili da “toccare”.
Vanno quindi progettati oggetti tappabili abbastanza grandi da poter esser utilizzati dagli users.
Sia Android che iOs hanno delle linee guida per le misure da utilizzare. Inoltre deve essere sempre visibile il bordo dell’oggetto tappato.

mobdestips03

 

Posizionare gli elementi sullo schermo

Progettare i controlli in base alla posizione della mano e al grip deve essere il “must” quando si progetta un’app. Vanno valutate le zone facilmente raggiungibili, per posizionare i migliori elementi di interesse come per esempio un pulsante “acquista subito”.

mobdestips06
Rappresentazione di una posizione della mano confortevole. Image Source: uxmatters

Continuare il flusso dell’experience

Gli utilizzatori possono usare l’app su un telefono, un tablet o un pc desktop e non va mai lasciato solo e sperduto durante tutto il flusso. Le operazioni iniziate su un dispositivo devono poter essere riprese e proseguite da un altro device. Una User experience senza interruzioni è una dei requisiti più importanti per una criss-device experience.

mobdestips05

 

Animazioni dedicate e microfunzionalità

La User Experience non è solo usabilità. Deve essere qualcosa che susciti anche del sensazioni. Sono le piccole cose che possono rendere la tua UX piacevolmente memorabile. Iniettando delle animazioni dedicate – come microinteractions animate, feedback animati o dei suoni in-app – nel design dell’aplicazione, potrete far sentire gli users più a loro agio e facenti parti dell’interazione stessa con qualcosa che abbia della personalità propria. Il tutto serve ad enfatizzare l’audience dei vostri utilizzatori.

mobdestips07

 

Attenti alla leggibilità

Quando compariamo i computer desktop a quelli mobile, che hanno uno schermo relativamente piccolo, ci imbattiamo nella problematica di dover far entrare la stessa quantità di contenuti in uno spazio molto ridotto. La tentazione è di comprimere il tutto il più possibile, ma vi prego di non cadere in tentazione! Tenete sempre a mente che i contenuti devono essere leggibili il più possibile. Una regola empirica dimostra che il font minimo non deve essere inferiore agli 11 punti, e che utilizzando un’interlinea maggiore renderà il tutto più visibile.

mobdestips09

 

Non interrompere i tuoi Users

nessuno, in realtà, vuole mai essere interrotto, figuratevi qualcuno che sta usando la vostra applicazione. Pertanto interruzioni del tipo “vota e/o recensisci la nostra app” è quel che più di sbagliato si possa fare in situazioni ed operazioni cruciali sull’app. Mentre sono utili in situazioni di stasi sull’app o in punti cardine in cui al culmine di una procedura che abbia soddisfatto l’utente, venga richiesto un feedback sulla nostra esperienza d’uso dell’applicazione.

 

mobdestips10

 

Perfezionate il design sulla base dei test per l’utente

Non fatevi ingannare dal design visto sullo schermo del vostro PC o Mac, provate sempre sul dispositivo reale, perchè le regole della UX e UI cambiano drasticamente. Nonsolo, le regole della UX teorica e in fase di progettazione spesso si dimostrano poco performanti nella vita reale. Ed qui che è importante far testare le app ai vostri utilizzatori. Personalemente faccio eseguire dei task reali di operazioni finite, misurando ed analizzando cosa accade in modo da capire come veramente la mia UX lavori a regime. Tengo inoltre ben presente che la mia app è constantemente in evoluzione, è qualcosa di vivo…

 

Walter Fantauzzi

Categorie
Design Ux Blog

User Interface per User Experience

Progettazione grafica per User Interface applicazione Scarpe Shop.

Categorie
Ux Blog

Holistic Adaptive Design: Fattori da considerare in un mondo multi-schermo

Nell’immaginario collettivo attuale, quando parliamo di touch screen, pensiamo al mondo dei tablet e smartphone, ma in realtà esistono altri mondi. Il problema principale di avere un solo design, è quello che ogni schermo ha una sua misura, larghezza, distanza e risoluzione che impatta sull’usabilità del dispositivo e la sua UI (User Interface).

I touch screen sono sempre più presenti nel mondo informatico tanto da essere incorporati in laptop, desktop e più recentemente nell’impiego più disparato (tipo taglia code, bancomat ecc…). Da qualche anno a questa parte, infatti, McDonald’s ha sperimentato una tipologia di ordinazione self-service per abbattere i tempi di attesa dei clienti.

Display taglia-coda di McDonald's
Display taglia-coda di McDonald’s
Ogni giorno, ognuno di noi interagisce quotidianamente con dispositivi di varia natura. Ogni dispositivo ha la sua capacità di risolvere problemi. Un approccio di tipo adaptive/progressive soddisfa il sempre più crescente bisogno di interactive experience per ogni users (utilizzatore) in base al suo contesto d’uso. Questa esperienza d’uso quotidiana, in tutti i suoi casi, cresce dinamicamente influenzata dai cambiamenti tecnologici e demografici.

When designing in a multi-screen world, the three major factors to consider at minimum are: viewing distance, touch area, and touch targets and interactions.

 

Distanza Visiva

La distanza visiva è lo spazio che intercorre tra lo user e l’informazione riportata su un dispositivo ( o la sua interazione mediante UI). Generalmente la distanza per i device maneggiabili (tablet, smartphone ecc…) è di circa 15 / 20 cm, mentre per la TV la distanza inizia ad essere oltre il metro. Nei due casi i rispettivi sistemi di input sono le dita per i maneggiabili e il telecomando per la TV, elementi fondamentali a rompere la distanza tra user e device. Quest’ultima influisce fortemente sulle misure dei Font ( testi, titoli ecc…), in modo esponenziale in funzione della distanza visiva, affinchè sia mantenuta la leggibilità dei contenuti.

Detto ciò, come possiamo adattare i contenuti in funzione della distanza visiva, e al suo cambiamento nelle varie situazioni d’uso? Marko Dugonjic ha sperimentato con un sistema di riconoscimento facciale come la distanza user-display, influenzava i contenuti tipografici in modo responsive (dinamico), usando delle “media queries” (delle richieste di contenuti opportuni a seconda del caso) in base alla distanza tra lo user e lo schermo. Più lo user si avvicinava allo schermo, più la grandezza dei caratteri (Fonts) diminuiva e vice versa. Con questa analisi possiamo identificare che la distanza visiva fa parte della user experience e che non è un limite per essa. Immaginandola come elemento tridimensionale del responsive design, la distanza è parte di ciò che crea le relazioni con i contenuti e lo user.

 

Touch Area

La touch area è la zona presa in considerazione in base alla misura dello schermo che la contiene. Questo ne determina le zone dello schermo più facili o più difficili da raggiungere.

maxheighttouch

Determinando come gli users (utilizzatori), usano queste aree sui differenti device, possiamo capire in quali zone posizionare i touch targets (ovvero i contenuti più importanti), i menu, e gli elementi di navigazione. Grazie a questa mappatura delle gesture (azioni dell’utente) sui display e/o schermi, è possibile valutare casistiche di utilizzo e relative problematiche. Pensiamo ad un utente in carrozzina che debba accedere al menu, sull’angolo in alto del display di McDonald’s, la UX sarebbe del tutto difficoltosa. Quindi potremmo pensare di inserire il menu di scelta nell’angolo in basso e renderlo accessibile all’utente in carrozzina ma difficoltoso per un utente di alta statura. Quindi potremmo pensare ad una telecamera aggiuntiva al display che riconosca l’altezza dello user e che risponda in modo interattivo posizionando il menu di selezione nella touch area migliore per lui.

Touch Target e Interazioni

Il touch target è la minima e massima misura di un elemento di interfaccia, tipo un bottone che deve intercettare il click di un dito. Creare misure sbagliate per questi target, comporterebbe un incapacità di funzionare. Pensiamo ad un pulsante troppo piccolo da cliccare, sarebbe impossibile interagire con l’app o addirittura essere tediosa, frustrando lo user a tal punto da abbandonare l’app. Al contrario un pulsante troppo grande, taglierebbe fuori informazioni necessarie all’interfaccia UI. Va quindi pensata una progettazione di tipo design for touch (design per l’area sensibile al tocco), e design for thumb (design per le dita o il tap).

Credtis: Steven Hoober
Credtis: Steven Hoober

Abbiamo capito, grazie a questi elementi che si può quindi intercettare le operazioni eseguite dagli users sulle nostre app attraverso gesture o click sul display. Questo ci permetterà di creare applicazioni sempre più a favore degli user, anche quelli con disabilità. E’ quindi una sfida constante alla user experience adattabile, pertanto dobbiamo approcciarci in modo Olistico a questo tipo di design.

 

Walter Fantauzzi

Categorie
Ux Blog

Design Patterns

In Ux design si considerano diversi aspetti progettuali, di  analisi e strategia. Lo ux designer ha il compito di progettare ed avere strategie. Identificando i problemi legati al progetto ne trova le soluzioni ottimali. Con l’ausilio dei design patterns si possono trovare soluzione rapide alle varie problematiche che nascono nella progettazione di un’interfaccia e quindi nella UX dell’utente.

2de1jquery-carousel-evolution_thumbI design patterns sono essenzialmente delle librerie di oggetti per l’esperienza d’uso riutilizzabili. Lo UX se ne avvale o si crea le proprie librerie design pattern. Vista la rapida evoluzione della società digitale è essenziale capire come migliorare l’utilizzo di questi elementi (spesso nativi) per farli diventare degli standard. Cito per esempio il design pattern per il carousel che permette di far ruotare i contenuti in un singolo spazio orizzontale, oppure gli accordion che si estendono per mostrare il contenuti una volta cliccato dall’utente. Lo spazio è di vitale importanza soprattutto in interfacce che contengono molteplici contenuti annidati, ed è per questo che si utilizzano delle escamotage per sfruttarlo al meglio. Lo ux designer quindi deve creare la giusta ergonomia e deve disporre gli elementi grafici e i contenuti in modo opportuno, per una migliore usufruibilità dell’applicazione.

Come può lo ux designer definire il design pattern necessario?

Immaginiamo che serva una funzionalità dove l’utente puo’ aggiornare in real time i contenuti di un social e stiliamo i seguenti punti:

  1. Definiamo il nome
  2. Descrizione
  3. Soluzione

Dopo averne definito il nome  del design pattern lo ux designer descrive la funzionalità con le operazione che l’utente deve compiere.  Viene poi definito il contesto: Social networks o altre situazioni di contenuti aggiornabili manualmente o attraverso intervalli di tempo.

Si definisce quindi la soluzione: Quando l’utente all’inizio della pagina tocca e dragga lo schermo all’interno dell’area dei contenuti verso il basso lo schermo fa apparire il messaggio  “pull to refresh” ed inizia l’aggiornamento dei dati dal server.

In questo modo lo UX designer ha definito un proprio elemento di design pattern da poter integrare mano a mano, con altri elementi fino a creare una libreria personale. Possiamo fare il paragone con una borsa da carpentiere in cui dentro vi sono cacciaviti, martelli, trapani ecc… Tutti questi attrezzi o tools sono i nostri items (elementi) che costituiscono il contenuto della nostra libreria. Sono quindi riutilizzabili e modulabili a seconda delle necessità per raggiungere determinati scopi (in questo caso le UX per l’utente).

 

Walter Fantauzzi