User Interaction Design: tra struttura e arredamento

Arrivata a questo punto, riprenderei le metafore con le quali avevo iniziato per riassumere e sistematizzare il processo di progettazione di interfacce (argomento dell’ultimo Workshop di Sketchin).

IA – UID – VD

L’architetto dell’informazione (IA) riceve le richieste del business, capisce cosa e dove sistemare le informazioni e i contenuti dal punto di vista dell’utente e li organizza in modo sistematico, facile, intuitivo e reperibile. I suoi strumenti sono l’inventario e la vera e propria architettura.
In metafora. Come dice il nome, è il vero e proprio architetto del palazzo: decide il numero dei piani necessari, il tipo di stanze, dove saranno i bagni, la cucina, i saloni, i garage e le cantine.

Lo User Interface Designer (UID), figura che spesso si sovrappone all’IA, progetta il modo in cui il sito dovrà funzionare, ne verifica la fattibilità, gestisce l’emergere di nuovi requisiti. Ma, soprattutto, garantisce che l’interazione con l’interfaccia sia percepita e corrisponda al modello mentale dell’utente: in poche parole, garantisce che funzioni nel contesto a cui viene applicata.
Le sue armi di battaglia sono i wireframe (a diversi livelli di definizione).
In metaforaLo UID progetta l’ergonomia di ogni singola stanza, decidendo che tipo di prese mettere alle pareti e dove applicarle, come sarà collegata alle altre, se avrà un tavolo da cucina al centro o una scrivania sotto la finestra, una finestra o un balcone, una lampada da terra o l’attacco per un lampadario.

Il Visual Designer (VD) definisce il look and feel del sito, attraverso gli step di cui abbiamo già trattato qualche post fa: decide le palette di colori, lo stile della pagina, la tipografia, le icone. Si serve di tutti gli strumenti grafici necessari, concludendo il suo lavoro con un dettagliatissimo photoshop su più livelli.
In metafora Il VD decide lo stile dei mobili, i colori, i tessuti, le stampe da appendere alle pareti.

Tra i vantaggi di questa suddivisione rigorosa della progettazione ricordiamo:

  • Permette di produrre materiale che aiuta a costruire un continuo scambio con il cliente/committente (cosa di cui abbiamo già avuto modo di parlare)
  • Permette, grazie ai wireframe, di anticipare il funzionamento del software, riducendo il cambiamento dei requisiti in corso d’opera (secondo le statistiche, si riuscirebbero a ridurre del 70%)
  • Permette di veriicare la totalità dei contenuti da produrre prima che il software sia terminato.
  • Può evitare il redisign totale di un’applicazione, un software o un sito. Dopo aver individuato l’aspetto più problematico, è sempre più possibile lavorare per aspetti risparmiando tempo e budget e aumentando l’efficacia del refactoring.
  • Permette di verificare l’usabilità del prodotto con l’utente prima della sua implementazione.

Lascia un commento

Il valore del riciclaggio

Anche nella progettazione per il web.

Anche di questo si è parlato durante il Workshop “Progettazione di interfacce per web e mobile”: non ha senso rifare, con il rischio di peggiorarlo, quello che è già stato fatto.

Naturalmente, e in modo particolare per un User Interaction Designer, è importante verificare che quello che si sta utilizzando funzoni veramente e sia comunemente accettato nel contesto in cui lo si vuole utilizzare. E’ importante, insomma, che sia comunemente accettato, che sia un vero pattern: non sempre, infatti, quello che funziona in una realtà può essere congeniale anche a un’altra (tra le altre cose, perchè il sito può essere indirizzato a un diverso target di utenti, operare in un contesto o in una regione geografica diversa, avere finalità diverse…).

A questo proposito, segnalo il sito di Welie. Nato da un lavoro di tesi e continuamente aggiornato nel corso degli anni, il sito costituisce la raccolta più completa di best practice per Interaction Designer, corredata di esempi e contesti in cui vanno o non vanno utilizzate.

Niente di nuovo, ma imprescindibile.
E il resto è metodo.

Lascia un commento

Punti di incontro e trucchi del mestiere

Punto fondamentale della progettazione, e punto di incontro fondamentale tra wireframe e visual di dettaglio, è la griglia.

A questo punto della lavoro ingombri e struttura diventano punti chiave, e ogni pixel è fontamentale alla buona riuscita del progetto. Inoltre il materiale prodotto (wireframe, concept e visual di dettaglio) viene spesso sviluppato da terzi che spesso non supervisioneremo o con cui probabilmente non si potrà avere neanche uno scambio costante: tutto deve quindi essere chiaro da interpretare, strutturato, definito e preciso.

Le griglie solitamente utilizzate, che stanno sempre più prendendo piede nel mondo del visual e dell’interaction design, sono basate sulle dimensioni di alcuni formati standard di pubblicità e seguono gli standard di 12 o 16 colonne (in rosa nell’immagine qui sotto).

Griglia applicata al visual

Griglia applicata al visual

Contare i pixel, quindi, non è un optional. :)

Commenti (3)

Visual: tra visioning e concept

E’ facile perdersi tra i deliverable di Alice e non capire a cosa servano.
A me piace pensare il suo lavoro come quello di un architetto di interni, sempre per seguire la metafora da cui sono partita qualche post fa. Bisogna capire cosa vuole il cliente, imparare ad interpretare anche quello che non dice, immedesimarsi in quello che vuole comunicare. E’ un lavoro delicato, perchè andrà ad influire direttamente sull’immagine che il cliente darà di sè.

Ma nessuno più che le sue stesse parole possono spiegare meglio gli step fondamentali del lavoro un visual, per cui mi limiterò a riassumerne le fasi, linkando alle spiegazioni di Alice e facendole qualche domanda di approfondimento :)

Fase 1: Inspiration Board

E chi non avrebbe bisogno di trarre ispirazione prima di partire con i lavori?
Questa fase serve, appunto, per avere l’ispirazione di partenza. Come dice Alice, è come passare al mercato, e farsi rapire da tutto quello che ci attrae.

Dubbi e domande:
Ma non capita mai che il cliente abbia già idea di come vuole il visual e, pertanto, non abbia bisogno di inspiration board? In questo caso questa fase serve ugualmente? O si puo’ passare direttamente al passo successivo?

Fase 2: Mood Board

Ovvero: si scende più nel dettaglio e si cerca di capire quale deve essere il tono di voce, l’umore, le sensazioni che si vogliono trasmettere.

Dubbi e domande:
E’ abbastanza difficile capire la differenza tra la Mood Board e l’Inspiration Board, ed è soprattutto difficile capire perchè servano entrambe. Sembra che sia un approccio che fa avvicinare a piccoli passi a quello che vuole il cliente.

Mi immagino qualcosa del tipo:
Cliente: “Devo arredare casa e non so come”.
Architetto: “Guardi questi giornali e mi dica che stile le piace” (Inspiration Board)

E dopo una settimana:
Architetto: “Parliamo del salotto: lo facciamo sul bordeaux o sul verde? Minimalista, etnico o classico?” (Mood Board)
Cliente: “Direi sul bordeaux, etnico, ma anche abbastanza classico…”

Fase 3: Style Board

Ci si avvicina sempre di più, ma ci si trova ancora in una fase preparatoria. Bisogna ancora cercando capire appieno cosa vuole il cliente e, in contemporanea, bisogna spiegargli che quello non è ancora il prodotto definitivo.

Dubbi e domande:
Domanda abbastanza ovvia: perchè fare una style board prima che venga fatta l’architettura dell’informazione? Non si risparmierebbe tempo se si passasse direttamente al concept?
Bhè, immagino che anche qui la risposta sia che c’è bisogno di capire e stabilire insieme al cliente dove si vuole arrivare, e questo è lo strumento migliore per farlo.

Per seguire con la nostra metafora:
Architetto: “Metterei un divano di cotone bordeaux e un tavolino di bambù, oppure il divano potrebbe essere di seta e il tavolino di legno scuro stile giapponese. In alternativa abbiamo anche delle poltrone di bambù che possono essere rivestite di stoffa bordeaux e un pouf rivestito di seta di vari colori”
Cliente:”Sì, mi piace il divano di seta bordeaux, ma lo metterei con il pouf e non con il tavolino di legno”

Concept e visual di dettaglio vengono solo dopo questa fase e solo a questo punto il visual viene applicato sulle pagine dei wireframe e dell’architettura.

Sembra che ci sia un lavoro enorme solo per capire in che direzione andare, e per fare in modo che questa direzione sia effettivamente condivisa dal cliente. A quanto pare, infatti, il cliente non sa quasi mai quello che vuole. Immagino che questo sia il modo migliore per cercare di perdere il meno tempo possibile.
Am I right?

Commenti (1)

Questione di metodo – progettazione UX agile (AgileUXD)

Confusi dal post di ieri? Sicuramente le parole di Luca sono più chiare delle mie. :)

Lascia un commento

Questione di metodo

Non solo Agile, ma Agile UXD.

Due passi indietro per capirne il motivo.

Progettazione tradizionale (Waterfall)

I metodi di progettazione tradizionale (chiamati Waterfall o Waterfall iterativi) prediligono un approccio di tipo strategico e sono ottimali per lo sviluppo di un prodotto da lanciare sul mercato.
Prevedono che il prodotto o il problema da affrontare sia molto chiaro fin dall’inizio, per cui verrà ipotizzata una strategia da seguire che poi verrà implementata e testata.

Step:
Comprensione del problema > Ipotesi > Implementazione > Test

In certi casi si prevede l’inserimento di un certo numero di interazioni all’interno del progetto, per correggere eventuali problemi che dovessero sorgere ma, in generale, questo flusso è piuttosto rigido.

Waterfall_model

Pro: Sicuramente la strategia per lo sviluppo di un prodotto, che sa dove vuole arrivare.
Contro: Questo tipo di progettazione non permette la gestione di errori e cambiamenti a cui inevitabilmente si dovrà fare fronte progettando per il web. Il web, infatti, si muove a velocità molto elevate, per cui l’adozione di una metodologia poco flessibile è rischiosa e ha costi troppo elevati nel medio-lungo termine.

Progettazione agile

I metodi di progettazione agile, all’opposto, privilegiano un approccio tattico. Il loro punto di forza è spaccare una tematica in piccole parti più piccole e affrontarle singolarmente in modo molto competente e in tempi brevissimi. Le singole tematiche vengono poi sviluppate e testate per individuarne i punti critici e per poi iniziare nuovamente con una versione successiva che prevede un’evoluzione del prodotto.

agile_model

Pro: E’ una metodologia molto flessibile, che accetta molto bene il cambiamento in qualsiasi momento e da qualsiasi fonte sia proposto.
Contro: I tempi brevissimi in cui devono essere sviluppate le iterazioni non permettono di empatizzare sufficientemente il problema (o le necessità del prodotto). Il progetto rischia di andare alla deriva, perdendo di vista la meta a cui voleva giungere.

Agile UXD

Da qui nasce l’idea dell’Agile User Experience Design, metodologia che unisce i due approcci in modo da sfruttarne i punti di forza:

  • Il design tradizionale: per individuare il problema, empatizzarlo e fissare una rotta
  • La gestione agile: per affrontare il progetto in maniera più tattica e flessibile

agile UXD

Le prime iterazioni, in cui vengono sviluppate l’idea e il concept, sono indubbiamente molto solide. La fase di design, invece, è più morbida e flessibile.

Step:

IDEA

  • sviluppare obiettivi e definizione del prodotto
  • ricerca e analisi per empatizzare il problema

CONCEPT

  • strategia e pianificazione delle specifiche a livello macro (le milestone da seguire, lasciando comunque la possibilità di intervenire in seguito)
  • modellazione, ovvero progetto generale a livello macro: base da cui partire per sviluppare un’architettura dell’informazione consistente

DESIGN
(micro-iterazioni agili composte da tre pipeline brevissime, ciascuna orientata alla produzione)

  • Progettazione dell’architettura dell’informazione e dei wireframe
  • Sviluppo della comunicazione, dei testi e del visual
  • Sviluppo orientato al rilascio di un prodotto semi produttivo e testabile

Alla fine di ogni ciclo di design è previsto un test e un nuovo inizio della fase di design in modo tale da controllare il processo di produzione e da correggerla e migliorarla grazie ai feedback del mercato, degli stakeholder e degli utenti.

Lascia un commento

Sbirciando il futuro da uno spioncino

Idee su possibili scenari futuri? Qui a Sketchin ce ne sono, parlano di mobilità e iperlocalità, e non sono poi così tanto remote.

Ad una conferenza recente, Luca ha parlato della sua visione del futuro del web su reti iperlocali, sviluppando l’idea di una Milano dell’expo dove la città non punti a creare nuove infrastrutture di aggregazione fisiche.

Ecco quello che è emerso da tre domande che gli abbiamo rivolto per capire meglio di cosa si tratta (presto arriverà il video con l’intervista integrale).

L’idea

L’idea è quella di declinare internet ad una dimensione locale, tornando, in un certo senso, alla situazione pre-internet, quando i punti di aggregazione e di informazione erano esclusivamente le strade e le piazze. Grazie alla georeferenziazione, si può creare una rete che consenta all’utente di trovare solo quello che è più vicino e adatto a lui.

Il concetto di rete iperlocale nasce negli Stati Uniti con il giornalismo partecipativo, i blog di quartiere e l’utilizzo locale di alcuni account Twitter.

L’idea è applicabile a diversi modelli, primo fra tutti quello della pubblicità, che potrebbe acquisire nuovi spazi di visibilità ricercando una comunicazione più mirata e ristretta nelle coordinate spazio-temporali. Si tratterebbe di non comunicare più, quindi, al grande numero, ma aumentare il valore e l’investimento per conversione.

Fattibilità

Al momento, se consideriamo il territorio italiano, potrebbe esserci qualche problema a livello di infrastrutture. Prendendo l’esempio del territorio di Milano, sappiamo che allo stato attuale le antenne telecom consentono una localizzazione di 1,8 Km, mentre una rete iperlocale richiederebbe il misurare la posizione di una persona a 50 m.

Una rete iperlocale, però, in Italia esiste: si tratta di L.U.N.A., progettata da Sketchin per i territori di Trento, Rovereto e Riva del Garda. In questo caso è stata realizzata una rete WiFi apposita, con access point ad una precisione di 50 metri.

Iperlocale nel futuro di Internet?

Secondo Luca la mobilità potrebbe essere la terza fase di internet e l’iperlocalità un modo ulteriore di evolvere la mobilità, quello che il 2.0 è per il web.

L’ipotesi è plausibile perchè potrebbe creare abbastanza valore da sostenere economicamente questi modelli qualora venissero implementate strutture adeguate.

Per provare l’ebbrezza di un futuro possibile, per ora, non ci resta che una bella gita in Trentino. :)

Lascia un commento

team, team, team!

Nota etnografica: gli architetti suggeriscono il copy di label e link dei siti durante la creazione dei wireframe. E questa pratica mi lascia un po’ perplessa.

Gli architetti dell’informazione devono sì suggerire il contenuto di una label o un link, sia perché sanno di cosa si tratta, sia perché è importante che siano rispettate certe regole di usabilità (ovvero quello che l’utente si aspetta di trovare scritto, per cui “About” o “Chi Siamo” si capisce e si trova più facilmente di “chi sono Pinco&Pallino”).

Ma credo che sia altrettanto importante stabilire un tono del “discorso”, controllare che certe parole siano davvero corrette, stabilire una coerenza linguistica tra il cliente e l’utenza.

Insomma, non sarebbe più ortodosso che i testi fossero sottoposti ad una revisione da parte di un “esperto di parole”?

Oppure, ancora meglio, non sarebbe più efficace che, a un certo punto della progettazione, l’architetto dell’informazione lavorasse insieme al copy? Un copy esperto di web, naturalmente.

Tenendo comunque in considerazione che sarà l’utente finale ad avere l’ultima parola, almeno nel migliore dei mondi possibili, dal mio punto di vista il lavoro di squadra è sempre più arricchente. E diamo a Cesare…

Commenti (8)

Utili correlazioni

Aspetto interessante dei wireframe a cui pensavo ieri, mentre osservavo Luca produrne per un progetto.

Creare wireframe, oltre a tutto ciò che è già stato detto, è un ottimo strumento di comunicazione con i clienti, in modo particolare in quei casi in cui il nostro linguaggio è diverso dal loro.

I wireframe, infatti, hanno il pregio di riprodurre visivamente parole e concetti che costituiscono il gergo dell’architetto dell’informazione. Se da un documento scritto alcune aree di significato potrebbero rimanere oscure al committente non esperto, l’immagine riduce i malintesi e rende più immediata la percezione del lavoro.

I vantaggi sono evidenti: ci si capisce più rapidamente, si riesce ad instaurare un dialogo, si apportano eventuali modifiche prima di mandare il sito in produzione. Tempo risparmiato, minor spreco di soldi, prodotto migliore perchè coerente dall’inizio e fino in fondo.

Commenti (1)

Senza più metafore

Sapendo di aver destato sufficiente curiosità sull’argomento…

architettura dell'informazione

architettura dell'informazione

…ecco come si presenta un’architettura dell’informazione tipo.

Lascia un commento

Articoli precedenti »