Articoli della categoria 'interaction design' ↓

Chi disegna interfacce di applicazioni di utilizzo quotidiano (sistemi di home banking, client di posta, word processor, applicazioni per call center e via dicendo) dovrebbe tenere a mente questi due comportamenti tipici degli utenti:

• la tendenza a usare un limitato set di funzionalità - ognuno le sue
• la ripetitività delle scelte effettuate in termini di visualizzazione dei dati

Queste considerazioni aiutano l’interaction designer a progettare applicazioni che aumentino le performance dell’utente e riducano l’overload mentale.

Vediamo un paio di esempi:

1) L’home page dell’applicazione dovrebbe riportare, salvo rare controindicazioni, la lista delle ultime n attività svolte o quelle svolte più di frequente.

Sul mio sito di home banking per esempio vorrei vedere:

• bonifico
• pagamento F24
• movimenti ultimo mese
• bonifico internazionale

Queste sono le operazioni che effettuo più frequentemente.

2) Se l’applicazione offre diverse modalità di presentazione dei dati allora dovrebbe ricordare le scelte effettuate quando l’utente accede nuovamente alla piattaforma.

Sempre parlando di home banking mi viene in mente l’analisi tecnica di un titolo; le scelte in questo caso sono numerose, si possono modificare gli intervalli temporali, la forma del grafico (candela, lineare, …), le medie mobili e numerosi altri indicatori. Pensate se queste scelte dovessere essere ripetute ad ogni accesso, quanto tempo sprecato!

Nutro un forte interesse per l’interaction design ormai diversi anni, più precisamente da quando ho seguito le indimenticabili lezioni della prof.sa Xristine Faulkner alla South Bank University di Londra, nel lontano 1999/2000.
In questi ultimi mesi l’interesse si è trasformato in passione sia per la scoperta di alcuni articoli e libri interessanti sia per il coinvolgimento professionale.

Vi segnalo:

• progettare applicazioni Web: hub, wizard e guide (parte 1, parte 2)
• tutti (o quasi) gli elementi di interfaccia utente spiegati: interaction design patterns
• una bella definizione di interaction design
• questi due articoli di Bruce Tognazzini: principi di interaction design e ridurre il Tempo Soggettivo

Abbiamo tradotto un nuovo articolo. Non passa giorno che non trovi utili gli insegnamenti di Bruce Tognazzini, presenti in questa sua pubblicazione di qualche anno fa: i principi base dell’interaction design.

E’ interessante vedere come a distanza di anni i vari principi abbiano determinato la proliferazione di interfacce utente ben fatte, in particolare, leggendo l’articolo, non vi stupirete dei contenuti se utilizzate OSX invece che Windows. Buona lettura!

Di tag cloud si sente parlare da un po’, ma soprattutto si iniziano a vederne parecchie in giro. Sono uno dei nuovi codici di comunicazione visuale che appartengono al “Web 2.0″ (cerco sempre di usare questa parola con parsimonia, ma in questo caso ci sta a pennello).

Una nuvola di tag/etichette, o tag cloud, è un insieme di etichette in cui ognuna ha una grandezza proporzionale al proprio peso o importanza. Il peso è generalmente reso visivamente con l’utilizzo di un font più grande.

Una tag cloud ha il vantaggio di fornire all’utente, in maniera immediata, un elenco di qualificatori che sono stati attribuiti all’oggetto a cui si riferiscono. Se l’oggetto è una collection di foto, come nel caso di flickr, la nuvola descrive sommariamente quali sono i tag principalmente associati alle foto presenti sul sito e permette di capire a colpo d’occhio quali sono i tag principali. Nella pagina “popular tags” di flickr matrimonio, vacanze e party sono sicuramente i principali.

Una caratteristica importante di questi tag è che sono dei link. Rappresentano infatti un supporto utilissimo alla navigazione. Cliccando su matrimonio nell’esempio precedente l’utente viene portato a una lista di foto che sono state etichettate in questo modo. All’interno di questa pagina, contenente tutte le foto legate ai matrimoni, si potrebbe ripresentare una nuova tag cloud (chiamiamola di secondo livello), che mostra le principali etichette associate non più a tutte le foto, ma a tutte e sole quelle foto con associato il tag matrimonio. Potrei quindi trovare ricevimento, fiori, sposa, amore, …

Ma chi se l’e’ inventate queste tag cloud? Di preciso non si sa, wikipedia cita questa pagina, ma non è più raggiungibile. Di per certo ho letto anni fa in Information Architecture for the World Wide Web di Rosenfeld e Morville, il concetto di navigazione multifaccettata. Ad ogni pagina/oggetto appartenente a un sito vengono attribuite delle etichette (faccette nel lavoro di Rosenfeld e Morville) e l’utente può raggiungere questi oggetti scegliendo non più una navigazione gerarchica (es. automobili -> renault -> utilitarie -> twingo) ma una multifaccettata. Le tag clouds sono l’elemento di interfaccia che consente di effettuare questa navigazione.

Un altro aspetto interessante è che i tag sono nella maggior parte dei casi attribuiti dagli utenti, quindi ci troviamo di fronte ad un autentico caso di user generated content. Tuttavia ci sono delle eccezioni, in cui è il redattore stesso del sito che decide di taggare i contenuti ad uso e consumo dei propri utenti, come si può vedere in questo sito - realizzato da 10people - in cui tutti i lavori di ricerca scientifica sono etichettati con parole chiave, che vengono poi usate per formare una nuvola di tag sottostante alla navigazione principale.

[add on per programmatori] Come si calcola la grandezza dei font? Riporto una parte del codice utilizzata in italian applications. Questa funzione, in base al numero (occorrenze) di lavori di ricerca (l’oggetto del sito) a cui è associato il tag restituisce la grandezza del font.
L’algoritmo è piuttosto semplice. C’e’ una grandezza minima del font e una massima. C’è un numero minimo e uno massimo di occorrenze per ogni tag associato a un oggetto. Se mettete la grandezza del font sulle ascisse e il numero di occorrenze sulle ordinate, unendo i due punti di min e di max ottenete una retta (l’algoritmo non è altro che l’equazione della retta passante per due punti), ovvero una funzione che dato il numero di occorrenze ritorna la grandezza del font corrispondente. (se fate un disegno tutto si chiarirà nella vostra mente )

const MIN_FONT_SIZE = 12;
const MAX_FONT_SIZE = 36;

public function getFontSize($weight){
   $count = $this->Page->DataAccess->queryMinMaxCountTags();
   return ceil(($weight-$count['min']-1)*(self::MAX_FONT_SIZE-self::MIN_FONT_SIZE+1)/($count['max']-$count['min']) + self::MIN_FONT_SIZE);
}

Ho di recente letto un vecchio articolo di Nathan Shedroff sull’argomento. In poche pagine riassume i principi fondamentali di una teoria e dà degli spunti di riflessione su questioni aperte, come il raggiungimento di una user experience degna di questo nome. Potete leggere anche la versione italiana se preferite.

Il libro? Mmm… non lo consiglio.