Una delle "rivoluzioni" più interessanti portate dal cosiddetto Web 2.0 è stata la tendenza a sviluppare e proporre un numero sempre maggiore di applicazione fruibili via browser, composte da pagine HTML arricchite di funzioni tipiche di applicazioni desktop. Un esempio sono i siti per la raccolta di album di foto (Flickr), i servizi di Google (Docs & Spreadsheets, Calendar, Analytics), i tool per la gestione di progetti, etc.
L'analisi delle interfacce di queste applicazioni e della loro logica di produzione si rivela interessante per introdurre il tema generale dello User Interface Design, quello dell'usabilità e quello di una progettazione centrata sull'utente.
User Interface Design
La definizione che troviamo su Wikipedia riporta: "User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user's experience and interaction".
Tradotta in italiano: "Interface design, letteralmente progettazione delle interfacce, è comunemente intesa come l'attività di progettazione dell'interfaccia utente di un qualsiasi sistema informatico e software che dialoga con l'utente attraverso uno schermo".
Un'applicazione software e un sito web sono, infatti, accomunati dal fatto che entrambi sono progettati per consentire all'utente di interagire con un'interfaccia. Durante le fasi di progettazione (design) di un'applicazione web diventa quindi fondamentale mantenere il focus sull'utente e sul tipo di esperienza vissuta da quest'ultimo durante l'uso della nostra applicazione. Sarà questa esperienza a determinarne il successo o l'insuccesso.
Numerosi sono i fattori che entrano in gioco quando si tratta di progettare un'interfaccia usabile, visivamente accattivante, incentrata sui bisogni dell'utente: la navigazione del sito, la tipografia, la struttura dei fogli di stile, la gestione dei punti critici e degli errori e più in generale di tutte le interazioni possibili dell'utente.
Interazioni
L'obiettivo primario della progettazione d'interfacce è semplificare le interazioni uomo-macchina, che sia questa un dispositivo hardware, un'applicazione software o, appunto, un sito web. Un problema storico delle applicazioni web è la scarsità di azioni possibili offerte dal suo linguaggio base, l'HTML.
Difatti, mentre l'ambiente desktop permette diversi tipi d'interazione (il doppio click, il click e lo scorrimento, il posizionamento e il rilascio per lanciare funzioni, il drag & drop, e così via), sul web, con il solo HTML, il campo d'azione è limitato al click su specifici oggetti (su link e su pulsanti o caselle), al digitare testi o scorrere i contenuti con le barre di scorrimento.
Oggi diverse tecnologie (AJAX, DHTML, Javascript) consentono di progettare e sviluppare forme d'interazione più avanzate, normalmente estranee al mondo web. Ad esempio, grazie alla sempre maggiore diffusione di librerie Javascript, è possibile realizzare tipologie d'interazione fino a poco tempo fa impensabili o relegati al panorama di Flash.
Supportare modelli d'azione più ampi di quelli disponibili sul web è probabilmente necessario per rendere le interfacce più efficienti e soddisfacenti. Farlo in maniera non invasiva e non esclusiva apre la strada per la progettazione di modalità d'azione alternative secondo il programma utente usato e delle preferenze/capacità dell'utente (con tastiera o con dispositivi di puntamento).
Criteri fondamentali di User Interface Design
Vediamo quali sono i criteri essenziali dello User Interface Design.
1) La struttura. L'interfaccia utente deve essere organizzata in modo efficace e utile in conformità a modelli chiari e coerenti, riconoscibili dagli utenti con evidenza, collocando insieme gli elementi collegati da una relazione, separando quelli scollegati tra loro.
2) Semplicità. Il nostro design deve facilitare le operazioni, comunicare in un linguaggio semplice e chiaro, fornendo suggerimenti per le operazioni più complicate.
3) Visibilità. Il design non deve distrarre l'utente durante l'esecuzione di un task con elementi di rumore o con informazioni ridondanti. Un buon design non deve offrire un numero eccessivo di strade alternative rischiando di creare solo confusione per l'utente.
4) Feedback. Il design deve informare l'utente sullo stato delle operazioni effettuate. I messaggi di errore, in particolare, devono spiegare qual è stato il problema e offrire all'utente una possibilità di eseguire una nuova operazione.
5) Flessibilità. Un buon design deve essere flessibile riducendo il costo per l'utente di un uso sbagliato e di eventuali errori commessi.
Peculiarità del web
Il controllo è la peculiarità che distingue l'interfaccia web da tutti gli altri ambiti dello User Interface Design (computer, mobile devices, software applications).
I browser infatti non permettono al designer di avere un pieno controllo dell'interfaccia in fase di progettazione, un tema molto caro a chiunque sviluppi su web. Come andare incontro a questo problema? Attraverso una progettazione flessibile, che tenga conto delle differenze di visualizzazione su piattaforme diverse.
Il differente grado di controllo riguarda anche ciò che l'utente può fare, non solo la visualizzazione. Il web, a differenza dei software dove il progettista decide quali azioni rendere in ogni momento disponibili, è invece liberamente esplorabile. Il percorso dell'utente può iniziare dall'home page o da qualunque altra entry-page ci preoccupiamo di rendere disponibile.
Citando una definizione di Nielsen, il web diventa un genere a sé, nel quale non è conveniente per nessun sito differenziarsi troppo dalle convenzioni tacite che si vanno stabilendo. Attenersi a queste convenzioni rende, secondo Nielsen, l'esperienza sul web più simile fra i siti e quindi più facile per l'utente.
Progettazione
La progettazione di un'interfaccia si sviluppa lungo un percorso composto da più fasi, o iterazioni; in questo articolo vedremo solo la lista di quelle fondamentali, mentre rimandiamo ai prossimi articoli l'approfondimento di alcuni punti qui solo enunciati.
1) FASE DI ANALISI
- definizione degli obiettivi;
- identificazione di potenziali utenti;
- creazione di profili utenti;
- creazione di scenari.
2) PROGETTAZIONE
- brainstorming;
- realizzazione di bozzetti, generalmente su carta (paper prototyping);
- creazione di prototipi a basso,medio o alto livello di fedeltà.
3) TEST
- test di usabilità sul prototipo realizzato con gli utenti;
- questionari e interviste sul prodotto.
4) IMPLEMENTAZIONE
- guida al design;
- mockup grafico;
- HTML e CSS (frontend);
- programmazione (backend).
