Articoli

• refactoring
• javascript

4 regole da seguire per un codice pulito

Gli sviluppatori che lavorano in team adottano spesso delle convenzioni per far sì che il codice sia\nleggibile e modificabile da chiunque, nel tempo. Quando si è alle prime esperienze in team, però, non è sempre facile\nscrivere (o meglio, progettare) il codice in modo che un altro sviluppatore, leggendolo, non impieghi due ore a capire\ndi cosa si tratta.\nSi scrivono metodi lunghi chilometri, si fa incetta di variabili, si utilizzano controlli e condizioni come se si\navessero dei coupon e, quando andiamo a rileggere il codice qualche giorno dopo, sembra che sia passata una\nscimmia a battere freneticamente sulla tastiera.

• ux

Agile & UX - Odi et Amo

Il rapporto tra la metodologia Agile e la User Experience è stato inizialmente estremamente controverso. In passato in molti contesti si è era restii a introdurre una fase di UX Design poichè si temeva potesse rappresentare un collo di bottiglia per il processo produttivo.

• css
• html
• web

Allineamento verticale in CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

• ui
• interaction design

Animazioni Lottie con After Effects

After Effects è il principale strumento per la realizzazione di un’animazione Lottie, di cui abbiamo fatto una panoramica nel precedente articolo di questa serie. Questa volta andremo ad analizzare il flusso di creazione dal software,\nche in pochi e semplici passi ci consentirà di ottenere un file json immediatamente utilizzabile nei nostri progetti su tutte le piattaforme compatibili.

• ui
• vue
• web

Flusso di autenticazione con Buefy e VeeValidate

In questo articolo vedremo come implementare in VueJS un flusso di autenticazione mediante l'ausilio di Buefy e da uno dei framework di validazione consigliato dalla libreria stessa, VeeValidate.

• ux

Come condurre un'intervista

L'intervista è il metodo classico per la raccolta dei requisiti, il più banale e allo stesso tempo il più complesso, poiché richiede un'adeguata preparazione sia sul contesto del progetto sia sull'intervistato.

• ux
• user research
• competitive analysis

Come non reinventare la ruota

Nell'arco della carriera lavorativa di un UX Designer professionista capiterà prima o poi di avere un'idea fantastica e scoprire in\nseguito che un'applicazione simile è già stata realizzata; oppure succederà di trovarsi di fronte alla proposta di un cliente e\ngiungere al medesimo risultato.

• javascript
• react
• typescript
• web

Come risparmiare tempo in React con TypeScript

Se avete mai programmato in JavaScript, saprete perfettamente che un programmatore ha un rapporto di affetto molto profondo\nnei confronti dei Type Error: dimentica il nome di una variabile, di che tipo sia, o non ricorda cosa va passato ad un metodo.\nQuesto potrebbe non essere un grosso problema se parliamo di piccole applicazioni e piccoli team. Ma se il volume di codice\ncomincia a crescere e, come spesso accade in React, i componenti iniziano a moltiplicarsi, allora questo rapporto d’amore comincia\na barcollare e queste piccole sviste e dimenticanze iniziano a consumare un bel po’ del nostro tempo.

• ux
• competitive analysis

Competitive Analysis

La Competitive Analysis è una strategia di identificazione dei maggiori competitor e di analisi delle soluzioni e dei prodotti che offrono.\nI competitor vanno valutati sotto diversi aspetti; studio del brand, analisi del mercato, strategie di social media marketing, customer care, valutazione dei prodotti da un punto di vista tecnico, commerciale, di design e contenuti.

• ux
• interaction design

Cos'è l'Interaction Design

Nel campo della UX possiamo definire l’Interaction Design come l’arte dell’intangibile, una disciplina la cui intrinseca difficoltà di base acquista ogni giorno di più complessità, di pari passo con lo sviluppo tecnologico che ci mette a disposizione hardware sempre più performante e strumenti che permettono la realizzazione di interazioni e animazioni sempre più belle e d’effetto, la cui presenza all’interno di un’applicazione è ormai una regola, poiché l’utente si aspetta di ricevere quei feedback a cui si è quasi inconsciamente abituato ma che quando vengono a mancare lasciano perplessità e sterilità nell’utilizzo dell’applicazione, quasi come avviene quando ci si trova dinanzi un bug.

• ux

UX Designer e codice. Il nostro punto di vista

Molti UX Designer hanno una formazione e un curriculum caratterizzato da una forte specializzazione nell'ambito della UI e della\nprogettazione di interfacce grafiche, quindi spesso si tende a pensare che imparare un linguaggio di programmazione per una\nfigura del genere sia superfluo. Ed in effetti se ci fermiamo a ragionare in questi termini, tale affermazione potrebbe risultare\ndel tutto vera, mentre in realtà è frutto di un pregiudizio.

• ux
• ui
• thinking

Feedback & Notification Design - PT 1

I feedback di notifica sono uno degli elementi essenziali presenti nei prodotti digitali moderni.

• ux
• ui
• thinking

Feedback & Notification Design - PT 2

Molti dei concetti espressi nel precedente articolo della seria sono basati su alcune delle Euristiche di Nielsen, in particolare:

• ux
• ui
• thinking

Feedback & Notification Design - PT 3

Ricollegandoci con il precedente paragrafo, la creazione di uno stile di "pericolo" è essenziale affinché l'utente riconosca immediatamente quando qualcosa non va per il verso giusto.

• ux
• ui
• thinking

Feedback & Notification Design - PT 4

Quando si affrontano operazioni rischiose come ad esempio l'eliminazione di un elemento, deve sempre essere chiaramente segnalato quanto è avvenuto, in maniera tale da aumentare il senso di sicurezza e controllo dell'utente verso l'applicazione.

• vue
• web
• javascript

Forzare la ri-renderizzazione di un componente

Uno dei vantaggi che troviamo nei framework moderni come Vue è la gestione automatica del rendering degli elementi, è infatti il framework stesso che si occupa di andare a ridisegnare gli elementi all'interno della pagina quando necessario in modo tale da ottimizzare le performance.

• ux

Gestione dei meeting di kickoff

I meeting di kickoff sono probabilmente la parte più critica di un progetto: all'inizio del percorso uno dei rischi più grandi in cui si può incorrere è quello di creare dei pregiudizi sul progetto e sulle persone in esso coinvolte che trascinati nel tempo possono andare a inficiare sul risultato finale.

• vue
• web
• javascript

Global event bus in VueJS

Utilizzando il pattern event-bus / pub-sub possiamo mettere in comunicazione parti della nostra applicazione che normalmente sarebbero separate. Un caso molto comune lo ritroviamo nelle modali: abbiamo un pulsante all'interno della pagina che tramite l'emissione di un evento apre una modale definita in un altro punto.\nEsistono diverse librerie che implementano questo pattern ma in VueJS possiamo utilizzarlo senza ulteriori strumenti esterni.

• html
• web

HTML5 e i tag semantici

Agli albori del linguaggio HTML non era presente nessuna convezione globalmente accettata per definire la struttura degli elementi all'interno della pagina. Ogni sviluppatore utilizzava la sua tecnica personale: c'era chi faceva largo utilizzo dell'attributo id e chi non lo utilizzava affatto, chi utilizzava solo le classi e chi faceva un mix di entrambi.

• ux
• information architecture

Information Architecture per UX Designer

L’Information Architecture (IA) è una disciplina che concerne l’organizzazione dei contenuti, le gerarchie, la navigazione e il data modeling all’interno di un prodotto digitale.

• ux
• information architecture

Il percorso da design a codice

Una delle conseguenze più diffuse del passaggio dalla fase di design a quella di implementazione\nè la perdita di parte delle informazioni che erano state acquisite nel processo di analisi dei requisiti.

• ux
• user testing
• user research
• wireframing
• prototyping

Il processo di design di un plugin

ExHub è il principale software, sviluppato in casa, che utilizziamo in azienda per gestire e rendicontare il lavoro di coding\nquotidiano.\nLa decisione di progettarlo e implementarlo scaturisce dalla mancanza sul mercato di un unico prodotto che riuscisse a soddisfare\ntutte le nostre esigenze. Sin da quando abbiamo concepito la sua idea abbiamo deciso che il suo punto di forza sarebbe dovuto\nrisiedere nella possibilità di integrarsi con altri strumenti di utilizzo quotidiano, sia di terze parti già pre-esistenti, sia\ncon altro software che avevamo in cantiere da tempo.

• android
• ios
• java
• kotlin
• swift

Il ruolo di Kotlin e Swift nel 2020

Kotlin è una soluzione moderna e leggera per attingere al vasto ecosistema di librerie e funzioni di Java senza averne la pesantezza e\nl'arcaicità dei costrutti, ma introducendo una grande espressività e semplificazione della sintassi, che si avvicina molto\ndi più a quella delle recenti versioni di Javascript o Python; di conseguenza la curva di apprendimento risulta estremamente\nridotta se paragonata a Java, soprattutto per i neofiti o per chi proviene dal mondo del web, divenendo nei fatti un competitor vero\ne proprio delle soluzioni ibride e multipiattaforma, spesso da preferire in termini di produttività e qualità del codice sorgente.

• android
• kotlin

Jetpack Compose Developer Preview

Jetpack compose è un toolkit per la composizione di interfacce utente per app native Android. Il suo utilizzo semplifica e velocizza\nlo sviluppo lato UI riducendo la quantità di codice necessaria e consentendo l'accesso ad un completo e moderno set di api Kotlin.

• typescript
• web
• javascript

JavaScript tipizzato senza utilizzare TypeScript

Utilizzare TypeScript in un progetto ci porta grandi vantaggi, specialmente se stiamo lavorando su qualcosa di particolarmente complesso. Grazie alla tipizzazione di TypeScript possiamo infatti scrivere codice di qualità superiore, questo perché possiamo accorgerci prontamente di eventuali errori ed avere un miglior supporto da parte dell'editor.

• android
• design system
• ui

L'importanza del Material Design

La rivoluzione portata da Apple nel mercato mobile con l'iPhone, che ha di fatto dato origine all'idea di smartphone che concepiamo\noggi, nei primi anni del 2010 generò una situazione di grande confusione nel settore dello sviluppo di applicazioni destinate a\ntale settore.

• ui
• android
• ios
• web

Le librerie Lottie

Lottie è una libreria open source multipiattaforma (Android, iOS, Web) che consente l’utilizzo di animazioni vettoriali create con After Effects, esportabili in formato JSON grazie all’utilizzo del plugin “BodyMovin”; i file generati sono leggeri, human readable e modificabili anche con scarse conoscenze tecniche.\nSono inoltre disponibili vari tool di supporto e di anteprima, come quelli presenti su LottieFiles, che offre tra l’altro anche una vasta gamma di risorse utilizzabili gratuitamente e la possibilità di condividere le proprie realizzazioni con gli altri utenti.

• ux
• ui

Linee Guida di Design per i Form

I form sono una delle modalità di interazione con l'utente più importanti e allo stesso tempo più odiate. Ai fini dell'esperienza la compilazione di un form deve risultare rapida e non ambigua.

• ux

Multi-account & Multi-role

Al giorno d'oggi uno degli aspetti più sottovalutati nel campo della UX è quello della gestione di account o ruoli multipli da parte di uno stesso utente.

• web
• angular

Primi passi con Angular

Angular fa perno su due altri prodotti molto validi, ovvero RxJS e TypeScript, per fornire la migliore esperienza di sviluppo possibile tramite le migliori tecnologie front-end presenti sulla piazza. Data la vastità del framework, in questo articolo ci limiteremo ad analizzare come gestire, a livello base, l'input dell'utente.

• web
• vue

Primi passi con Vue.js

I framework front-end hanno il merito di aver notevolmente semplificato la vita allo sviluppatore web facendosi carico della gestione del DOM, offrendo un meccanismo per la gestione della reattività out-of-the-box e favorendo una suddivisione delle applicazioni in componenti.

• ar
• javascript
• web

Realtà aumentata con ARjs

ARjs è una libreria marker-based che porta la realtà aumentata sul web in maniera snella ed efficiente, sfruttando\nl’integrazione con three.js e aFrame (un framework entity-component ideato appositamente per il VR); è proprio su quest’ultimo che ci soffermeremo, per la sua facilità di utilizzo e comprensione della documentazione.

• javascript
• typescript

Un pattern per un safe parsing di dati esterni

Ipotizziamo di trovarci nella seguente situazione. Ci hanno commissionato un progetto front-end per la gestione delle risorse umane di un'azienda. Purtroppo non abbiamo il controllo sul back-end, che tra l'altro inizia ad avere una certa età, perciò non abbiamo la certezza di ricevere sempre dei dati corretti. Oltre a ciò, non ci è data la possibilità di filtrare i dati ricevuti: quando richiediamo gli utenti li otteniamo tutti, indipendentemente dal loro ruolo.

• ux
• ui
• wireframing
• design system

Strategie di design multidevice

Il design di un’interfaccia al giorno d’oggi è un’operazione ancora più complessa di quanto non lo sia stata negli anni passati.

• testing
• react

Testare React Hooks con Enzyme e Jest

Ogni volta che mi capita di leggere qualcosa sul testing di componenti React, non trovo mai nessun accenno riguardo agli hooks. Per questo motivo, ho deciso di scrivere questa breve guida.

• typescript

TS Tricks: Capitolo 1

Vediamo oggi alcune utility a livello dei tipi che ci permettono di maneggiarne uno per ottenere i più svariati risultati.\nIl preset dell'interpo articolo è il seguente tipo che rappresenta una persona:

• nodejs
• vue

Upload di un file su feathers

Il caricamento di un file, solitamente, è un'operazione abbastanza semplice. Se però stiamo utilizzando feathers come framework backend dobbiamo seguire qualche passaggio in più per far funzionare tutto correttamente.

• ux
• user research
• information architecture

User Flows & Journeys

Il requisito principale per il successo di un'applicazione è che gli utenti la utilizzino. Una persona utilizza un'app se essa risponde ai suoi bisogni, ma ciò non è una condizione sufficiente: una persona deve anche essere in grado di usarla in modo intuitivo, senza alcun genere di frustrazione.

• ux
• user research

User Persona

Lo UX Design è un processo complesso, che richiede la totale immersione nella vita dell'utente tipo definito attraverso la target audience.

• user research
• user testing

User Research

La User Research un processo di ricerca che ha come obiettivo quello di spostare il focus della raccolta dei requisiti sui desideri e le frustrazioni dell’utente.

• ui
• android
• ios
• web

Utilizzo dei Lottie in una webapp

Come abbiamo già visto nei precedenti articoli della serie, i Lottie sono dei semplici file JSON che ci consentono di utilizzare le animazioni che descrivono su più piattaforme, tra cui ovviamente il web.

• ux
• ui
• information architecture

UX per developer in pillole - PT 5

Clicca qui per scaricare gratuitamente tutte le risorse

• ux
• thinking

Che valore ha la semplicità?

Quando parliamo di User Experience e di usabilità in un contesto digitale, la facilità di apprendimento e la semplicità di utilizzo sono sicuramente due caratteristiche fondamentali affinché un prodotto abbia successo sul mercato.

• ios
• android

Watch OS vs Wear OS

Il mercato dei dispositivi smart indossabili e in particolar modo quello degli smartwatch, ha assistito negli ultimi anni\nad una crescita costante. Google e Apple si confrontano anche su questo campo, sebbene dagli ultimi dati relativi all'ultimo\ntrimestre del 2019 si riesce facilmente ad evincere quanto Apple Watch domini il settore in maniera indiscussa: uno smartwatch\nsu 3 reca su di sé il logo della mela, e Wear OS è sorpassato anche da Samsung con Tizen, sistema proprietario Samsung che\npuò interfacciarsi a qualsiasi smartphone Android (sebbene con alcune restrizioni), sul quale non ci soffermeremo però in\nquesto articolo.

• ux
• ui
• wireframing
• prototyping
• interaction design

Wireflow

Uno dei deliverables più comuni che si producono in seguito ad uno studio di User Experience sono i wireframe. Tra i vari stakeholders, i wireframe sono spesso utilizzati anche dagli sviluppatori per la fase implementativa, ma tale strumento presenta il grosso svantaggio di non offrire una visione chiara del comportamento dinamico delle schermate e dei componenti al loro interno; allo stesso tempo i prototipi interattivi non danno invece una chiara visione dei flussi oltre a non offrire immediatezza nell'utilizzo.

• ui
• wireframing
• design system

Wireframing & Mockup

La realizzazione di wireframe e mockup è essenziale nella progettazione di un software.\nPer quanto accurati siano i documenti che realizziamo nelle varie fasi del processo UX, possiamo trasmettere con forza l'idea che abbiamo nella nostra testa solo quando riusciamo a fornire al cliente e agli utenti i primi output visivi.