Il numero crescente di siti web sta incentivando la nascita di nuovi approcci di user interface design che traggono vantaggio dal livello di conoscenza di internet in continuo aumento e dalle connessioni più veloci. Queste nuove interfacce spesso permettono agli utenti di vedere e manipolare grandi quantità di dati.

L'interfaccia visuale di Thinkmap, una delle interfacce utente più recenti ed innovative.

Questo articolo presenterà alcune nuove idee di user interface design uscite di recente come i modelli:

• Slider-based filtering


• Fisheye menus


• Treemaps


• Drag-and-drop

L'obiettivo di questo articolo non è promuovere specifiche interfacce utente, ma piuttosto offrire spunti di riflessione.

Sebbene non abbiamo ancora dati su precisi test di usabilità riguardo a queste interfacce, ognuna di queste ha la potenzialità di supportare gli utenti nelle performance dei loro compiti.

Slider-based filtering

L'interfaccia di ricerca diamanti di Amazon utilizza slider click-and-drag per permettere agli utenti di allargare e restringere i criteri di ricerca. Questa user interface filtra le ricerca e la pagina si aggiorna automaticamente in rapporto ai criteri di ricerca selezionati.

Questo meccanismo può essere usato per creare un'interfaccia intuitiva ed informativa in grado di aiutare gli utenti a fare delle ricerche attraverso un ampio set di dati.

L'interfaccia mostra 13593 diamanti disponibili per forma, prezzi, carati, tagli, colori e luminosità. Per ciascun criterio possono essere usati slider per filtrare le ricerche.

Il numero dei risultati è visualizzato sul lato destro della pagina e l'utente può restringere i criteri di ricerca e quindi il numero dei risultati usando gli slider.

L' interfaccia mostra 278 diamanti disponibili per fascia di prezzo $18,000-$87,000

Quando l'utente è soddisfatto dei criteri di ricerca seleziona semplicemente il bottone "See result".

Fisheye menus

Il menu Fisheye può essere molto utile ad aiutare gli utenti a navigare e selezionare elementi da una lunga lista ordinata. Questi menu cambiano dinamicamente la grandezza degli elementi una volta che sono evidenziati dal movimento del cursore che diviene una lente di ingrandimento. Questo permette di presentare un intero menu su di un singolo schermo senza bisogno di bottoni, scrollbar, o gerarchie.

Il menu Fisheye mostra la lista alfabetica delle nazioni del mondo. Il cursore che è una lente di ingrandimento ha evidenziato United Kingdom.

Il menu Fisheye potrebbe aiutare l'utente a navigare facilmente attraverso una lunga lista di elementi.

Treemaps

Treemaps visualizza righe di dati in riquadri che possono essere modificati, ridimensionati e colorati per rivelare modelli di dati. Questo user interface design può essere usato per presentare relazioni tra dati (come relazioni gerarchiche).

Un esempio può essere trovato sul sito Smartmoney, dove uno strumento permette ai visitatori di visualizzare informazioni su centinaia di azioni nello stesso momento. Nell'esempio sotto, le azioni sono raggruppate secondo il settore e rappresentate in rettangoli di differente dimensione sulla base del mercato. I colori sono usati per indicare movimenti di prezzo positivi (verde) e negativi (rosso).

Ulteriori dettagli sull'azienda sono disponibili muovendo il mouse sul rettangolo ( General Electric nell'esempio).

Treemap rappresenta differenti settori di azioni

Drag-and-drop

Questo tipo di user interface segue l'idea delle applicazioni Microsoft Windows e permette di trascinare gli elementi da un punto all'altro. Lo store di Panic Room permette agli utenti di cliccare sul simbolo 'bottone/più' per aggiungere un elemento al carrello oppure trascinarlo direttamente.

Basta cliccare sul prodotto che desideri trascinare nel cestino:

Screenshot da Panicroom che mostra tre T-shirts e il carrello con l'istruzione 'trascina l'articolo per aggiungerlo al carrello'.

Basta mantenere il mouse cliccato per trascinare l'articolo nel carrello.

Screenshot da Panicroom che mostra una T-shirt trascinata nel carrello.

Screenshot da Panicroom che mostra la T-shirt all'interno del carrello.

Poi, basta rilasciare il bottone del mouse per inserire l'articolo nel carrello:

Conclusioni

Nuovi approcci di user interface design sono la chiave per migliorare l'usabilità l'interazione dell'utente con un sito.

Il problema nel progettare user interface originali è il rischio di non renderle comprensibili ed utilizzabili in maniera veloce dall'utente.

Se sviluppi un'interfaccia utente nuova fai precisi test di usabilità prima di lanciarla in modo da capire se è intuitiva oppure no.

Articolo originale di Tim Fidgeon intitolato "Innovative user interface design" pubblicato il 31 luglio 2006 su Webcredible.

L'autore
Tim Fidgeon è un esperto di usabilità che lavora per Webcredible, leader nella consulenza per usabilità ed accessibilità Web .
Tim Fidgeon è autore, speaker, e consulente su usabilità e strategia. Ha lavorato in questo settore dagli anni 90 ed ha un Masters degree in Human-Computer Interaction alla University College di Londra. Quando non tiene corsi di web usability per Webcredible conduce usability testing. Tim è stato coinvolto in molti progetti e come Robin Good desidera rendere Internet un posto migliore per tutti.