User Experience in Ambito Mobile

UI, ovvero la User Interface, rappresenta l’interfaccia grafica vera e propria, quell’insieme di elementi che permette l’interazione tra l’utente finale e lo strumento digitale; in un sito web, ad esempio, il pulsante (o call to action) è l’elemento dell’interfaccia che consente all’utente di compiere una determinata azione (come quelle elencate precedentemente).

Gli utenti hanno familiarità con determinati elementi grafici, come appunto il pulsante, e si aspettano da essi un preciso comportamento; risulta evidente quindi l’importanza di soddisfare le aspettative adottando scelte prevedibili e coerenti.
L’interfaccia è dunque il luogo in cui si realizzano le scelte del IxD e dello UCD, ovvero la punta dell’iceberg del complesso lavoro del UX Designer. Rappresenta come le persone possono entrare in relazione con un prodotto e su come quel prodotto deve rispondere. Nel caso dello sviluppo in ambito mobile, l’output atteso è la creazione di interfacce visive.
Alla base di tutto il design visivo delle schermate c’è il layout: dove e come le caratteristiche, i comandi e il contenuto vengono posizionati. Fornisce la struttura in cui questi elementi risiedono e la gerarchia, consentendo agli utenti di capire cosa è più importante o meno. Il layout è particolarmente importante per i piccoli schermi, dato che lo spazio è prezioso.
Nel mondo occidentale l'occhio si muove generalmente da sinistra a destra e dall‘alto verso il basso e i designer devono essere consapevoli di questo e progettare di conseguenza. Raggruppare, subordinare, distanziare, allineare crea il flusso visivo mettendo in evidenza certe funzioni rispetto ad altre, assimilando le informazioni bisbigliando all‘utente cosa è più importante rispetto ad altro, in quale ordine bisogna procedere per completare certa procedura e quali altre possibilità parallele vi sono nello stesso percorso.
Per progettare bene il flusso visivo è utile tenere in mente le leggi di Gestalt. Le linee, le forme, gli sfondi e persino gli spazi banchi o meglio le particolari relazioni di tutti questi elementi suggeriscono, secondo la teoria, il movimento, il significato, la gerarchia, la coerenza e di conseguenza la possibilità d'interazione utente-oggetto.
Lo stesso oggetto ha caratteristiche diverse se preso singolarmente o inserito all’interno di qualche altra figura o raggruppamento e lo stesso oggetto, inserito in due diverse totalità, può assumere significati diversi. Il flusso visivo ben costruito si traduce nel movimento psicologico nella mente del utente e lo porta o dritto all’obiettivo o fuori strada. Ora verranno portate in rassegna tutte le componenti necessarie per produrre interfacce grafiche di efficaci.

Le griglie
Una griglia aiuta il designer a organizzare le informazioni in uno scherma coerente e sono uno dei migliori sistemi che è possibile utilizzare per guidare le persone attraverso i contenuti che intenderemo realizzare; raramente si possono sbagliare scelte di layout se si parte da un organizzato sistema di griglie. Per usarle, bisogna avere una buona conoscenza delle linee e delle forme e le regole di base della composizione.
Si inizia suddividendo lo schermo in aree razionali di base, che comprendono i gutter, gli spazi che separano righe e colonne. Le griglie sono delle linee guida che aiutano il designer a organizzare il layout in uno schema coerente, non sono obbligatorie ma fortemente consigliabili, in quanto, come diceva Mark Boulton nel lontano 2005, «facilitano la creatività fornendo al lavoro un framework e risponde in anticipo ad alcune domande del futuro design». Inoltre, le griglie instaurano un ordine nella presentazione del flusso visivo e consentono all‘utente di individuare facilmente dove cercare le necessarie informazioni, bottoni, comandi, widgets, conferendo al layout una certa continuità.
La scelta della griglia dipende dal device per il quale stiamo progettando e dalla tipologia di prodotto che stiamo creando. Per un app di fotografia la griglia può essere diversa da quella per le notizie, ma la tendenza generale è la convergenza e l'universalità, per cui le griglie di oggi si frammentano in tante celle, consentendo sempre maggiore flessibilità della progettazione.
Le differenze principali sono dettate dalle dimensioni/proporzioni degli schermi dei dispositivi, legate alla piattaforma di appartenenza. I rapporti sono al centro di qualsiasi sistema di griglia ben progettato, volte questi rapporti sono razionali, come 1:2, 2:3 (la proporzione dei primi iPhone o degli iPad), 4:3 (degli schermi dei primi computer) o 16:10 (molto diffusa nei moderni laptop) altri sono irrazionali come 1:1.414 (la proporzione del formato A4) e nuovi formati sono all’orizzonte. È importante studiare come combinare questi rapporti per creare griglie semplici ed equilibrate che a loro volta aiutino a creare composizioni armoniose. È possibile costruire la griglia propria, ad hoc per un determinato prodotto, lasciarsi aiutare da quelle di default proposte dai software comunemente usati nel mondo della grafica digitale oppure avvalersi della varietà del materiale gratuito e disponibile in rete in formati diversi. L’importante è tenere conto della continua e rapida evoluzione di formati e tendenze. Progettare il flusso visivo significa fornire indizi su dove l'utente dovrebbe guardare. Le soluzioni che i designer propongono devono tener conto della cultura e della situazione in cui i futuri utenti vivono.

Le griglie sono un prodotto dell'utilizzo di alcuni tipi di componenti di base:
• Guide: il bordo con cui si sceglie di allineare il contenuto.
• Colonna: elemento che crea una divisione verticale dei contenuti.
• Riga: elemento che crea una divisione orizzontale dei contenuti.
• Margini: l'area che circonda i contenuti.
• Gutter: i margini tra le colonne.
• Hang-line: una guida orizzontale per allineare il contenuto alla sua parte inferiore.
• Linea di base (baseline): la guida orizzontale per allineare il contenuto alla sua parte superiore.
• Rithm: sistemi di proporzione che possono aiutare a definire la frequenza di dimensionamento e la spaziatura di ciascuno degli elementi di cui sopra.

Questi componenti, benché formino le conoscenze di base per un designer, trattate di solito nell’ambito di corsi inerenti materie fondamentali come tipografia e composizione, rappresentano una parte del lavoro molto difficile da padroneggiare e richiedono un’elevata esperienza per essere usati con sapienza.
Un buon designer sa come utilizzare una griglia per guidare gli utenti attraverso i contenuti. Un designer eccellente sa quando e dove è possibile interrompere la griglia per creare qualcosa di veramente unico. Un buon esempio di questo è il posto di allineamento fuori centro di Jon Moore che può essere una tendenza pericolosa da seguire se non si ha uno scopo ma che se usata sapientemente può portare a grandi risultati. A tal riguardo vale la pena sottolineare una app esclusiva iOS che ha applicato alcuni principi di allineamento fuori centro, si tratta di Bear, premiata con il prestigioso Apple Design Award nel 2017, sviluppata dall’azienda Shiny Frog. Le cose che funzionano per coloro che hanno esperienza e una forte motivazione data da parametri oggettivi ma contestualizzati al loro specifico ambito di intervento, non sempre funzionano quando si tenta di imitarlo. Quindi il consiglio per un giovane designer e quello di consolidare la comprensione del sistema basato su griglia per produrre composizioni di qualità per poi essere in grado di discernere quando e se è necessario rompere gli schemi per raggiungere uno specifico scopo.