Approfitto dell’inizio del nuovo anno scolastico in questo 12 settembre per ricordarvi che proprio da qui, dalla scuola, dovrebbe iniziare il percorso nell’apprendimento della User Experience. Ebbene si l’esperienza d’uso è un pò come diceva Bruce Lee del Kung Fu, ovvero che va praticato ogni giorno, da quando infili i calzini la mattina a quando lavi i denti la sera. Credo che per apprendere al meglio la capacità di utilizzare qualcosa, sia proprio nell’esaminare i gesti della vita quotidiana. Personalmente odio gli oggetti poco funzionali che spesso trovo in casa, e rifletto sul perchè non li abbiano progettati con più criterio. A volte si pensa che i costi di produzione per rendere migliore un oggetto siano astronomici, ma forse con piccole accorgimenti potrebbero renderlo davvero utile. E’ bene quindi iniziare da subito ad apprendere quest’arte del migliorare, di rendere più utile un mezzo che serve ad estendere le nostre capacità e a facilitarne le operazioni d’uso.
E’ giunto anche per UX360 il momento di andare in vacanza. Colgo quindi l’occasione per dirvi che per una buona UX è essenziale cambiare i punti di vista, nella propria vita. Per essere al massimo della creatività, ogni tanto dobbiamo cambiare il punto di osservazione e lo si può fare con semplici passi. Cambiare le abitudini affinchè si possa avere un nuovo stimolo, degli spunti alternativi ed efficaci, deve essere un “must” per chi come lo UX designer deve creare e progettare. Si possono affinare le intuizioni, si può dare all’occhio una nuova prospettiva.
Ma ora è il momento di staccare la spina, anche questo fa parte della UX, Buone Vacanze a tutti
Mi sono permesso di utilizzare un’immagine molte significativa presa in prestito da un film di Bud Spencer e Terence Hill, quale riferimento appropriato per questa accoppiata Bootstrap e Jquery. Un connubio perfetto per realizzare in tempi brevi un sito responsive e dinamico secondo i canoni attuali del web. Per chi fosse digiuno di web, questi due nomi rappresentano un’insieme di tool (di utensili) per snellire molto il lavoro del web designer.
Fig. 1
Bootstrap è un insieme di elementi grafici, stilistici, di impaginazione e Javascript pronti all’uso. Sono nati in seno a Twitter ad opera degli sviluppatori Mark Otto e Jacob Thornton. Ad oggi Bootstrap risulta essere un progetto indipendente a disposizione degli sviluppatori di tutto il mondo che sono liberi di utilizzare questo framework come base per i propri progetti web. Questo framework ci offre i una serie di mattoncini con cui costruire pagine web HTML5, completamente responsive, coerenti e funzionali.
L’utilità di Bootstrap è immediatamente evidente, soprattutto nella situazione attuale in cui le pagine web possono essere fruite su una miriade di dispositivi con caratteristiche diverse, quali Smartphone, Tablet e Personal Computer. Ci penserà Bootstrap ad occuparsi di mettervi a disposizione elementi di stile che permettono alla pagina di adattarsi al dispositivo utilizzando, al contempo, elementi di interfaccia comuni ai siti moderni per fidelizzare gli attuali users.
Bootstrap contiene essenzialmente 4 aree Scaffolding (o meglio l’impalcatura), css base, componenti (pulsanti, barre di navigazione, menu a discesa) e Javascript. Grazie al sistema Scaffolding, che ci offre tramite un sistema a griglia, possiamo con una serie di classi definire le aree e gli spazi nella schermata in modo matematico e fluido. In figura 2 viene mostrato uno schema a griglia generico a cui fare riferimento di tipo 12 colonne. Praticamente con la sola definizione di una classe in un div, per esempio class=”col-md-2″, avremo già una larghetta predefinita auto adattabile alla schermata.
Semplice vero?
Fig. 2
Il CSS base, contiene degli stili predefiniti per diversi elementi della pagina, come ad esempio i titoli (H1, H2,…), le tabelle, i pulsanti, gli elementi dei form, le immagini ecc… Con queste regole di stile la realizzazione di pulsanti in varie dimensioni, dai bordi smussati, con un effetto over diventa semplice e immediato. Lo stesso vale per la creazione di una tabella con righe a colori alterni. Nel primo caso, basta applicare una delle moltissime classi disponibili, come class=”btn btn-primary” o class=”btn btn-default btn-lg”, nel secondo, basta applicare alla tabella la classe class=”table table-striped”.
Le Componenti contengono elementi più complessi di pulsanti o tabelle, ma ormai molto comuni nei siti web. Ad esempio, gruppi di pulsanti, barre di navigazione, menu a discesa ed altro ancora. Tra questi sono compresi anche un set di icone, o meglio di glifi (dato che non si tratta di immagini ma di caratteri) di uso comune, messe a disposizione da Glyphicons. Le icone Glyphicons di solito sono a pagamento, ma il test distribuito con Bootstrap è gratuito. I creatori di Bootstrap suggeriscono a chi le usa di inserire, se possibile, un link al sito Glyphicon a mo’ di ringraziamento. Come avrete sicuramente già intuito, le icone si utilizzano tramite apposite classi.
Volete creare un pulsante base con l’icona di una stella? Semplicissimo, create il pulsante con la sua classe e al suo interno inserite l’icona che vi occorre con elemento <span> di una apposita classe:
Nell’ultima area, quella Javascript, sono contenuti diversi plug-in jQuery per realizzare effetti come transizioni, finestre modali, popup, carousel, accordion, tab. Anche questi plug-in sono semplici da usare e vi permettono di realizzare tantissime soluzioni interessanti.
In conclusione Bootstra + Jquery può essere un’ottima alternativa per la realizzazione di siti “on the fly” in tempi brevi.
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.
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.
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…).
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.
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.
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.
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.
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ì.
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.
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?
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 trunkof 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“
The 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.
The UX is how it works and not how It appear. The best strategy approach is join everyday your Team for an interactive strategy session. Use your prioritized personas and customer journey map to determine which problems to tackle first. A good approach is based on personas and customer to analyze what are the first problems to solve. The next step is to brainstorm in which to solve the problems of your customers, without getting too deep to contain the costs of the project. This session will therefore defines the UX and not the user interface (UI).
The UX process
This image is represented as a simple diagram of how to proceed in the UX flow analysis to achieve its objectives. Inside this flow exists up also the analysis of a potential interface and its visual design.
Once you’ve identified some possible solutions, storyboards can offer a quick way to get feedback on which ideas resonate with your users. Artistic skill is not required; one of the most popular comics on the web, xkcd, relies on stick figures for communicating both simple and complex interactions. Save time with this storyboard template made in Balsamiq or Axure Mockups.
Test Early & Often
Validate these storyboards with your users, they’ll let you know when you’re on the right track.
Conceptual Design
If you’ve come this far, and everything went in the right direction it is time to move forward towards the Identified mental model, to explore the possible interface models. The strength is the realization of a user-friendly design and here only experience can help you. Try to find inspiration from the app. with a mental model similar to your product. Draw six to eight concepts in 5 minutes, then pitch and critique. At the end, narrow it down to 2-3 concepts for testing.
Prototype & Test
The best way to test is the prototyping in environments such as Axure or Balsamiq.
The conceptual designs should focus on flow, not on specific UI controls. You can use the design scenario from your winning storyboard as a script for testing out the concepts. I always recommend to try the user mockup installed on a real device. In this way you will discover the actual reactions of the user.
Site Map
Once you get a solid concept designed, you can start the site map. This is another dirty deliverable, “not because it is imprecise or lacks details, but because it can change”, Chris Farnum at IA Summit 2011.
This map will help prioritize UI design and development efforts since it highlights the screens for the most important flows.
Author: Walter Fantauzzi
Questo sito utilizza i cookie per migliroare la tua esperienza. Puoi leggere qui la nostre Policy.Accetta
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
The concept behind this parable is that it is necessary to have a clear end point despite having different points of view.
The UX is how it works and not how It appear. The best strategy approach is join everyday your Team for an interactive strategy session. Use your prioritized personas and customer journey map to determine which problems to tackle first. A good approach is based on personas and customer to analyze what are the first problems to solve. The next step is to brainstorm in which to solve the problems of your customers, without getting too deep to contain the costs of the project. This session will therefore defines the UX and not the user interface (UI).
