Coinvolgente e immersivo: come il 3D migliora lo user-journey nelle interfacce mobili e web.

da | Mag 26, 2023 | Senza categoria

I top-trend del design per il 2023 segnano il ritorno al “minimalismo”, che con i suoi stili puliti e fluidi non passa mai veramente di moda, ha corsi e ricorsi storici e si adatta con duttilità alle necessità del momento. Nel caso specifico si può dire che la scelta del minimalismo va incontro all’obiettivo di proporre una user-experience sempre più semplice e intuitiva. A mano a mano che web, mobile e  interfacce integrate affinano la propria resa tecnologica in termini di complessità, servizi e possibilità di utilizzo, cresce nella progettazione dell’interfaccia utente l’onere di dirimere quella stessa complessità, rendendola accessibile e piacevole per l’utilizzatore finale.

Come si concretizza tutto questo? Da un punto di vista estetico, nella scelta di abbinare il minimalismo dei fondi scuri con font chiari – un mix elegante, leggibile e rilassante – a un concept che a livello contenutistico riduca le informazioni ad un numero minimo ed altamente essenziale. L’assenza di dispersione è il leitmotiv: in questo processo entra in gioco la grafica 3D che, come possiamo vedere in questo esempio, si giostra tra esperimento creativo ed espediente immersivo, e facendo leva sulla cifra degli elementi coinvolgenti ed iperrealistici, aiuta a catturare l’attenzione dell’utente, a mantenerla stabile durante lo user-journey e a focalizzarla e indirizzarla là dove serve.

Ma oltre l’estetica, il 3D può dare una spinta alla creazione di funzionalità non ancora disponibili nella realtà, come nel caso dei configuratori e dei simulatori per la realtà aumentata.

Utilizzo del 3D nelle interfacce digitali: pro e contro

Nessuno nega l’effetto visivo vincente della grafica 3D, tuttavia il suo utilizzo è stato a lungo frenato da alcuni presunti limiti nella progettazione. Prima di tutto per il design 3D servono tempo, competenza e creatività. Come tutti prodotti d’impatto, il 3D ha un background importante a livello di progettazione e richiede una formazione specialistica in alcune aree del graphic design, il cosiddetto 3D artist riunisce in una sola figura professionale modellatore, animatore ed esperto in effetti speciali.  Posto che l’integrazione di vari elementi nelle interfacce mobili e web è una sfida che richiede competenze specifiche e occhio artistico, è altrettanto sicuro che i risultati possono incidere nettamente sulla riuscita di un progetto. Vediamo come:

  • Interfacce utente più coinvolgenti e catchy
  • Creazione di rendering 3D fotorealistici, in grado di sostituire i contenuti fotografici
  • Atmosfere immersive che catturano l’utente, con motion design e grafiche di ispirazione gaming

Render 3D: immagini verosimili ed altamente realistiche

Il render 3D è un tipo di grafica computerizzata in grado di trasformare un modello 3D in un’immagine 2D fotorealistica. Le implicazioni possibili saltano subito all’occhio: il rendering permette di creare ciò che ancora non c’è, o di ri-creare ciò che ci manca. Detto con parole più semplici: la tecnica spazia dalla possibilità di creare modelli 3D visivamente realistici, anche di oggetti ancora in fase di progettazione a quella di sostituire con un rendering altamente verosimile un’immagine fotografica.

Nel primo caso, se si tratta ad esempio di interfacce digitali per il controllo di apparecchi da remoto, la grafica 3D può ricreare direttamente in-app le immagini del device da controllare, rendendo più semplici e realistici gli step dello user-journey. Nel secondo caso, si possono sostituire immagini fotografiche con rendering visivamente più realistici di un’immagine statica. Nel caso della Smart oven interface design progettata da Futurae per Qt, abbiamo inserito un modello 3D renderizzato del cibo che viene selezionato nel programma del forno, per rendere l’esperienza di navigazione più coinvolgente. Il render 3D inoltre può essere un escamotage utilissimo quando i designer hanno difficoltà a reperire determinate immagini: con il rendering si può evitare la spesa ingente dell’acquisto di immagini online o addirittura di uno shooting fotografico fuori budget nell’economia del progetto.

Motion design: Mouse Hover e scroll senza paura

Uno dei trend che sta crescendo più vistosamente è quello del motion design, ovvero dell’inserimento di animazioni e micro animazioninei siti web e nelle applicazioni mobile. Il motion design non solo migliora l’aspetto visivo dell’interfaccia, ma la può rendere più funzionale, come accade con gli effetti Hover, in grado di fornire un elemento interattivo ai pulsanti. Il Mouse Hover ad esempio permette di aggiungere degli effetti al passaggio del mouse sulle immagini.  Altro caso è quello dell’inserimento di elementi 3D nello scroll di pagina, come accade nella landing page di Apple, dove gli elementi si muovono, si scompongono e si ricompongono sullo schermo.

In passato queste tecniche non sono state sfruttate appieno in quanto era necessario fare costantemente i conti con la qualità delle animazioni in rapporto alle prestazioni del sito e delle app. Oggi con l’introduzione del 5G e di librerie e strumenti ottimizzati i progettisti posso creare animazioni sorprendenti senza mettere a rischio le performance di navigazione.

Gamer inspiration per un’esperienza immersiva

Il 3D richiama subito, anche nei non esperti, i concept di gaming e immersività, ed in effetti l’influenza del mondo dei videogame nella progettazione web si fa sentire. Il confine, e la sovrapposizione, di reale e virtuale sono un elemento pop per eccellenza, ormai entrato nell’immaginario collettivo, quindi perché non sfruttarlo? I designer, di siti web in particolare, hanno traslato molte tecniche dal mondo del gaming, come accade nel caso di capsule-in-pro, sito in cui  animazioni ed elementi interattivi accompagnano lo user in uno storytelling immersivo e immediato, scandito da scroll di pagina e Mouse Hover. Si diffondono anche gli utilizzi  di modalità full-screen che sacrificano l’introduzione di call to action in favore di una navigazione immersiva e capace di mantenere più a lungo l’utente sulla pagina e di schemi a colori scuri, così come l’inserimento di leading text chiari e diretti, utili a sottolineare gli step di interazione.

Il 3D che funziona: configuratori e realtà aumentata

Il 3D non è solo un abbellimento grafico, è anche un strumento fondamentale nella creazione di funzionalità non disponibili in forma reale, ne sono esempi evidenti configuratori e realtà aumentata per mezzo di simulatori 3D. I configuratori sono spesso utilizzati in ambito automotive, permettono partendo da un modello base di scegliere diverse soluzioni di customizzazione di un veicolo, e di salvare e condividere la propria versione personalizzata. Con la configurazione il potenziale cliente può accedere ad una preview virtuale dell’oggetto d’acquisto: un servizio che pone, quindi, nella condizione ideale per fare una scelta già da remoto. In modo simile, la realtà aumentata può contestualizzare un oggetto nell’ambiente reale di utilizzo. I simulatori 3D sono molto usati nel design di interni, dove accanto alla personalizzazione di materiale e colori si può aggiungere la contestualizzazione dei mobili negli ambienti.

Futurae il tuo esperto in 3D design

Il team di Futurae è specializzato in User Experience e User Interaction, ci occupiamo di progettazione e integrazione elementi 3D nelle interfacce digitali, per web e dispositivi.  Per conoscerci meglio guarda il video di Smart Oven design per QT, un progetto di design UX e interfaccia digitale, oppure contattaci qui.