Categorie
Ux Blog

Invision e la UX

Ad ogni ux designer il suo software di progettazione. I più famosi sono omniegraffle ed axure, programmi completi che permetto di creare design e interazioni per la prototipazione ad altra fedeltà. Padroneggiarli pero’ richiede esperienza e studio. Inoltre molti visual designer e user experience preferiscono photoshop, illustator o sketch per creare il visual per poi importare ogni singolo elemento nelle librerie del programma.

Invision

Ho provato personalmente invision e mi ha lasciato molto sorpreso in quanto le sue performance cambiano le regole del gioco. Lo UX progetta con ciò che preferisce utilizzando invision per creare interazione. Basta importare le varie “schermate” disegnate (magari in photoshop o sketch) per creare le pagine del nostro progetto. Attraverso una semplicissima interfaccia potremo creare transazioni, overlay, menu interattivi e tutto quello che occorre per realizzare un prototipo molto fedele a quello che sarà nella realtà. Possiamo tenere online i nostri progetti ed in maniera semplice ricevere feedback dal nostro team o dai clienti permettendoci, quindi, di gestire in un unico contenitore: commenti, preview ed eventuali notifiche di azioni da parte del team. Con il “live share” possiamo interagire con i nostri collaboratori in modo diretto. Vengono, di fatti, visualizzati i puntatori del mouse di ogni utente con relativo nome in modo che ognuno di essi portrà interagire con le funzionalità e l’interfaccia dell’applicazione online invision. Ogni modifica effettuata può essere spostata di stato; ad esempio se stiamo lavorando ad una schermata di login e necessitiamo dell’approvazione del cliente possiamo metterla “in progress” in modalità temporanea. Dopodichè una volta ricevuta l’approvazione possiamo spostarla in “approved” il tutto come un vero e proprio workflow.

0049ea6894f68b30bcac68f1bd84f027

Invision mette quindi a disposizione fantastici strumenti per creare presentazioni da urlo che faranno felici i nostri clienti. Ci permette inoltre di definire e creare tutte le linee giuda relative al design, colori, tipografia etc. per rendere ogni progetto completo in tutte le sue parti. Fantastica è la possibilità di visionare i prototipi direttamente dai devices interessati per renderli ulteriormente fedeli al prodotto finale. Nel caso in cui si utilizzasse un dispositivo mobile per visionare il prototipo, “entreranno” in campo tutte le funzionalità touch (tap, doppio tap, swiper sinistro e destro, sopra e sotto etc.).

Resta per me il modo migliore per sottoporre al cliente un prototipo più o meno realistico.

 

Walter Fantauzzi

Categorie
Ux Blog

Modus Operandi UX

Nel seguente articolo, la descrizione del mio approccio al mondo della User Experience. Le fasi ed il workflow utilizzati nelle mie progettazioni di UX e UI.

Fase 1: Il Workflow
Prototipizzare, misurare e ascoltare.
Sono le tre fasi essenziali per la realizzazione di un buon prodotto.

Le distinguo in questi tre tempi:

1. Realizzare un prototipo
2. Misurare i risultati Analizzare i feedback
3. Progettare

L’immagine seguente mostra l’andamento della fase progettuale. Partendo dal basso della piramide trovate i punti cardine alla base del mio processo lavorativo.

piramide
Fase 2: Paper Prototype
Il “Modus operandi” che utilizzo nella realizzazioni delle UX è di tipo piramidale.
Dopo l’intervista con il cliente e la definizione dei “goal” da raggiungere, il primo step che vado ad affrontare è quello del “Paper Prototype” ovvero uno schizzo su carta. Sarà pertanto il Paper Prototype la guida per definire al meglio, con il cliente, le funzionalità  e la navigazione dell’applicazione (o sito web). Parto dall’unità di misura che si definisce in MVP (Minimum Viable Product = Minimo Prodotto Fattibile), ovvero  realizzo l’applicazione volta per volta, partendo da una versione iniziale che racchiude un set minimo di funzionalità. Quest’ultime sono le caratteristiche indispensabili che soddisfano le richieste del cliente.

8fcf8cf2d374808124fe967367c3b083
Fase 3: Wireframe
Definito il processo di navigazione e la collocazione dei contenuti procedo alla realizzazione di un wireframe digitale con il software “Sketch”. L’utilizzo delle librerie o design pattern mi permette, in tempi brevi, di realizzare un wireframe o un diagramma di flusso ottimale. In questo modo avremo un timone da seguire, senza possibilità di perdersi durante la fase di realizzazione dell’app. Utilizzando invision app, rendo disponibile la “definition on done” (ovvero il progress lavori) a tutto il team di sviluppo.
Mediante questa applicazione posso condividere con i developer ed il cliente, lo status di ogni vista secondo degli step (in fase di review, fermo, fatto ecc…).

46b4cf25048fc4c0076612d5195978c4
Fase 4: Lo studio di fattibilità
Lo step successivo sarà realizzare uno studio di fattibilità con gli sviluppatori, per valutare tempi di realizzazione e processi scrum. Quest’ultima fase permetterà di avere un preventivo di tempi e costi per la realizzazione del prodotto commissionato. Una volta raggiunti gli accordi tra lo strato “developer” e quello delle “funzionalità” da realizzare procedo con la realizzazione visual.

b915360f967d051aec3956367ae55bb7
Fase 5: Visual Design
In questa fase realizzo l’interfaccia grafica (o meglio la UI) dell’applicazione. Definisco quindi i placeholder dei contenuti, i pulsanti, le immagini ecc… da posizionare sullo schermo. La progettazione del linguaggio grafico a volte estende quello già esistente dell’azienda. Utilizzo quindi colori, loghi e simbologie tipiche del cliente. Non raramente c’è la necessità di rivalutare la palette colori, definire nuovi simbolismi o addirittura un restyling del linguaggio grafico del brand. Il tutto per rendere l’applicazione ergonomica nel migliore dei modi.

8d2c4d7dbd53bbe508d12cb4031687f9
Fase 6: Prototipazione 2.0
Principal per la prototipazione animata è uno dei software più rapidi e realistici. Utilizzo questo ambiente per rendere tangibile l’esperienza d’uso ( o UX) da mostrare al cliente. Posso quindi analizzare se la mia UX è user oriented (ovvero incentrata sull’utilizzatore) o meno, così da valutarne eventuali modifiche o migliorie. Valuto se il raggiungimento dei goal sia soddisfacente, e ne monitoro i feedback o eventuali problematiche da migliorare.

0cc760f670f48e454060d892afeb17dc

Fase 7: Asset
Una volta definita la veste grafica, lo studio di fattibilità con i developer e gli obbiettivi richiesti dall’utente, creo gli asset da passare allo sviluppatore. Lavorando in ambiente Creative Cloud, la funzione “collabora” da Photoshop CC mi permette di condividere tutti gli elementi grafici agli sviluppatori. Dai colori in esadecimale utilizzati, alle immagini o elementi grafici dell’interfaccia.
Bellissima ed utilissima è l’applicazione Slack, una sorta di chat collaborativa, con la quale posso condividere dettagliatamente un elemento grafico o non con il team di sviluppo. A volte propongo tramite reference visivi e porzioni di codice, animazioni dinamiche COCOA da poter applicare a gesture o eventi.

Noire_UI_Kit_web-user-interface

 

Fase 8: Dead Line o No?
Sinceramente non credo esista una dead line per un’applicazione mobile o web. O meglio esiste uno step nel quale l’app deve andare online ma di certo non può morire così.

Feature_Image_Mobile_Device_Management_BYOD_Evolution
Il mondo dell’informatica è in costante evoluzione pertanto anche le app ed i siti web, così come gli esseri viventi, devono avere un mutamento. Possiamo valutare molti case study da facebook a flipboard ed altri ancora.
Non credo che si possa definire un’applicazione “finita”, posso dire che è in constate mutamento.

 

Walter Fantauzzi

Categorie
Design

Post-production: Speed Art Giulia portrait in Photoshop by Walter Fantauzzi

La post produzione è un’altra delle mie attività lavorative. In questo video un processo di foto-ritocco high end in Photoshop.

Categorie
Uncategorized

Minority Report UX

Ha del futuristico la user experience proposta da Insider in questo video.  

Categorie
Uncategorized

Project Blocks è un’ottima UX

Schermata 2016-06-30 alle 12.16.22 E’ stato bellissimo, questa mattina, vedere il progetto di google “Project Blocks”, insegnerà ai bambini i rudimenti della programmazione informatica.
Vi consiglio di guardare il video ufficiale.

 

Categorie
Ux Blog

UX Jobs opportunity Tweet

Today my tricks abot UX jobs opportunity on tweeter.

The most famous UX JOBS ALL

Schermata 2016-06-27 alle 12.09.47
UX JOBS ALL

The young but no less effective, UX JOBS 247

Schermata 2016-06-27 alle 12.10.31

Categorie
Ux Blog

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 🙂

 

Categorie
Ux Blog

Why this Ux fails ?

I was very happy when I saw the Microsoft Flow app in the applestore. But what the fake at the login moment? Let’s see this screenshot… There isn’t a way to create an account on the fly… And so how I can use it on the rails?

 

Categorie
Ux Blog

Buddhist parable: The blind guys and the elephant

To understand how a team of UX should work, I give you the example of a Buddhist parable.

Once upon a time, there lived six blind men in a village. One day the villagers told them, “Hey, there is an elephant in the village today.”

They had no idea what an elephant is. They decided, “Even though we would not be able to see it, let us go and feel it anyway.” All of them went where the elephant was. Everyone of them touched the elephant.

“Hey, the elephant is a pillar,” said the first man who touched his leg.

“Oh, no! it is like a rope,” said the second man who touched the tail.

“Oh, no! it is like a thick branch of a tree,” said the third man who touched the trunk of the elephant.

“It is like a big hand fan” said the fourth man who touched the ear of the elephant.

“It is like a huge wall,” said the fifth man who touched the belly of the elephant.

“It is like a solid pipe,” Said the sixth man who touched the tusk of the elephant.

They began to argue about the elephant and everyone of them insisted that he was right. It looked like they were getting agitated. A wise man was passing by and he saw this. He stopped and asked them, “What is the matter?” They said, “We cannot agree to what the elephant is like.” Each one of them told what he thought the elephant was like. The wise man calmly explained to them, “All of you are right. The reason every one of you is telling it differently because each one of you touched the different part of the elephant. So, actually the elephant has all those features what you all said.”

“Oh!” everyone said. There was no more fight. They felt happy that they were all right.

The moral of the story is that there may be some truth to what someone says. Sometimes we can see that truth and sometimes not because they may have different perspective which we may not agree too. So, rather than arguing like the blind men, we should say, “Maybe you have your reasons.” This way we don’t get in arguments. In Jainism, it is explained that truth can be stated in seven different ways. So, you can see how broad our religion is. It teaches us to be tolerant towards others for their viewpoints. This allows us to live in harmony with the people of different thinking. This is known as the Syadvada, Anekantvad, or the theory of Manifold Predictions

Blind_monks_examining_an_elephantThe concept behind this parable is that it is necessary to have a clear end point despite having different points of view.

Each of those teams is like one of those blind men. Each does an amazing job at studying and analyzing its trunk or leg, but none can see the elephant. The result is a disjointed, expensive collection of partial answers, and a glaring lack of insight.

Because these two teams may not know that the other exists. Or they aren’t encouraged by their organization to communicate. Or they don’t share enough common cultural references and vocabulary to have a reasonable dialogue, even if they wanted to. So synthesis doesn’t happen, the opportunity for game-changing insight is missed, and products and services continue to suck.

But we can create conditions that get those blind men talking together. Consciously exploring and addressing the following four themes—balance, cadence, conversation, and perspective—may help researchers and designers solve the problems all that precious (and expensive) user research uncovers—even when their organizations aren’t on board.