Navigare, cercare, scaricare, aprire un file, modificarlo, ricaricarlo in rete, queste sono solo alcune delle più comuni azioni che compiamo quotidianamente quando navighiamo in internet, che sia per lavoro o per diletto l’utilizzo che facciamo della rete potrebbe concentrarsi nell’elenco di queste attività.
Le modalità di interazione utente>interfaccia si esprimono in due modi, una passiva e una dinamica. Con modalità passiva si intende l’interazione relativa all’utilizzo delle informazioni contenute nelle pagine web nei limiti del loro utilizzo, ad esempio leggere un articolo, stamparlo, scaricarlo se possibile in un formato più “portabile”. In alcuni casi questo tipo di interazione basta e avanza, se l’obiettivo è quello di presentare una informazione “chiusa” (per informazione chiusa si intende una informazione che difficilmente verrà aggiornata per esempio le regioni d’Italia), in casi come questo non c’è la necessità di presentare all’utente una modalità di interazione dinamica che possa prevedere ad esempio l’interrogazione ad un database.
Tutto cambia in presenza di pagine più complesse, che magari sono progettate con logiche di repository, come un portale o una intranet. In questi casi è indispensabile rendere dinamico il rapporto tra utente e interfaccia in quanto la presenza di informazioni più complesse e magari soggette ad un aggiornamento costante necessità della presenza di elementi che possano supportare l’utente nella ricerca, modifica ed eventuale creazione di informazioni.
Uno degli elementi fondamentali per questo tipo di supporto è sicuramente il modulo comunemente detto form. Utilizzare in maniera corretta i form diventa quasi obbligatorio per garantire la fruibilità dei contenuti offerti e per ottenere la possibilità di rendere l’utente attivo nella creazione di contenuto (User generated content U.G.C.).
Nell’ipotesi di un utilizzo passivo, l’utente naviga le pagine e recupera le informazioni attraverso l’individuazione di link o di bottoni che il designer ha inserito come elementi per individuare categorie o gruppi di informazioni.
Una navigazione più complessa e completa prevede l’utilizzo di form (modulo). Con l’utilizzo di questo elemento arriviamo in una pagina di archivio e per esempio selezioniamo da una lista di archivio il mese che ci interessa. Questo è un classico esempio di come i form possono rendere l’utilizzo del web nettamente più dinamico e altamente produttivo nel recupero delle informazioni. In una ipotetica evoluzione di questo strumento abbiamo appena descritto la “nascita dei form”, ma ben presto il loro utilizzo è diventato sempre più complesso e presente all’interno delle pagine che normalmente navighiamo. Il design di un sito web non può escludere una discreta dose di attenzione nel posizionare e ragionare come presentare questi elementi, dal tipico campo di ricerca ai diversi moduli di “servizio” come quelli utilizzati per iscriversi a qualcosa o un classico esempio di log-in.
La funzione principale di questi elementi è da individuare nei processi di u.g.c. Tutti i siti che vogliono garantire la produzione di contenuto da parte degli utenti devono avere la massima attenzione nella produzione di form e nella loro presentazione, rendendoli quanto più gradevoli e facili da utilizzare. Ultimamente si sono utilizzate nuove tecniche di progettazione e realizzazione di form, e grazie alla tecnologia javascript sono diventati anche molto belli a livello visuale.
Un tipico esempio sono i form per l’inserimento dei commenti: vengono utilizzate tecniche di “pannelli a scomparsa” o di “pop-up” che consentono un elevato mantenimento del focus da parte dell’utente, un notevole risparmio per lo sviluppatore che evita di generare una pagina dedicata la form e più spazio al designer che può sbizzarrirsi nell’arricchire il form con elementi grafici anche complessi.
Nella miriade di esempi che possiamo trovare di form che ottimizzano e producono informazioni, probabilmente l’esempio che si adatta maggiormente alla nostra analisi è quello relativo ai classici form di iscrizione a un servizio (es. forum, newsletter, commenti di un blog etc).
Il processo di iscrizione è strettamente legato alla tipologia di servizio e quindi alle informazioni essenziali per la sua attivazione. Ovvero, è inutile chiedere residenza e telefono in un modulo di iscrizione a un servizio di mailing, potremmo far spazientire l’utente e perderlo.
E’ sicuramente molto più produttivo associare al form di iscrizione un form molto più complesso che in una seconda fase possa essere compilato dall’utente iscritto per ottimizzare il proprio profilo.
Un altro elemento interessante a questo proposito è la presenza di form a passi (o step) consecutivi che spesso sono utilizzabili anche in tempi e modi diversi.
I social network sono stati gli incubatori perfetti per queste nuove tecniche di presentazione, per diversi motivi. Portare l’utente a interagire in maniera sempre più massiva con i moduli presenti è essenziale per la sopravvivenza stessa della piattaforma.
Molto spesso un processo di immissione di informazione a step consente un notevole controllo da parte dell’utente e lo sottopone a un livello di stress minore nel completamento di tutte le informazioni necessarie per vedere pubblicata la propria informazione. Basti pensare a piattaforme di social networking professionale come linkedIn, che prevedono una presenza massiccia di form quasi tutti compilabili in step e soprattutto indipendenti in fase di modifica e aggiornamento.
Ma questa modalità di presentazione risulta altamente versatile anche nei processi di ricerca delle informazioni, tipicamente usati dai siti di e-commerce, dove con l’utilizzo di form specifici si supporta l’utente in una ricerca mirata e nel caso di mancanza di risultati in una lista di suggerimenti ottimizzati per raggiungere comunque un obiettivo.
Un tipico esempio è quello di una barra di scorrimento (slider) con un cursore del tutto simile a un termometro che permette, spostando il cursore verso un senso o un altro, di aumentare o diminuire il range di prezzo con cui si sta cercando un determinato prodotto.
In questo caso sia la query che l’aggiornamento di risultati sono del tutto sincronizzati e la presentazione ne beneficia in quanto il designer può inventarsi millemila modi per rendere accattivante questa fase della navigazione.
Questo modello ha come obiettivo la dimostrazione di come si può ottimizzare la presentazione di un form rispettando i parametri dell’accessibilità (utilizzo di marcatori idonei per contenere gli elementi che compongono il form stesso come label, input, radio button, check box etc.) e aumentando notevolmente l’usabilità visto lo snellimento della procedura.
A mio avviso anche la presentazione subisce un notevole miglioramento, sia per l’animazione all’apertura della finestra sia per la possibilità di utilizzare elementi decorativi accattivati. Ovviamente deve essere sempre prevista la condizione che nel caso di javascript disattivato al click sul link si apra una normalissima pagina html contente le stesse informazioni.
Alcune risorse utili per librerie javascript:
Alcuni framework per sviluppare:
Alcuni esempi di form dinamici:
Tags: form, interaction design, interface design, usability, user experience, User generated content, web design
Lo scopo dell'usabilità è quello di minimizzare questi costi, e si preoccupa di progettare artefat
Come organizzare tutte le informazioni (tante ed eterogenee) sulla città? e che strumenti di ricerc
L’utilizzo del web 2.0 nella didattica può servire per aggiornare ed arricchire le materie tratta
Cari lettori, care lettrici, da oggi UXMagazine chiude e smetterà di pubblicare artcoli sulla user
Cari lettori, care lettrici, da oggi UXMagazine chiude e smetterà di pubblicare artcoli sulla user
Sviluppato con WordPress
Disegnato da Sketchin
su base Graph Paper Press
[...] http://www.uxmagazine.it/interface-interaction-design/il-ruolo-dei-moduli-nellinterazione-tra-utente... Vai e Condividi: [...]
Luigi scrive sempre cose interessanti, è un po’ che lo seguo e ogni volta mi stupisce !!!