Come aggiungere tocchi di magia alle tue interazioni

Ogni volta che un utente fa qualcosa con il tuo design, viene creata un'interazione. Alcune interazioni, come i clic, passano quasi inosservate dall'utente. Ma altre interazioni includono un po 'di magia che fa sì che l'utente desideri giocare ancora di più con il design.

C'è una linea sottile tra un'interazione che ha il tocco di magia e una che può essere completamente travolgente. Le interazioni più magiche sono un po 'inaspettate, semplici, creano una risposta emotiva e fanno sì che l'utente voglia riutilizzarlo.

Esplora Envato Elements

Interazioni con la magia

La magia è "una qualità che fa sembrare qualcosa rimosso dalla vita di tutti i giorni, soprattutto in un modo che dà gioia".

Ciò che rende davvero magica un'interazione è che anticipa ciò che l'utente farà dopo. Il design quasi si muove con te ... o forse solo un passo avanti a te, per fare esattamente quello che vuoi solo un secondo rovesciato prima ancora di aver preso quella decisione.

Per progettare questo tipo di interfaccia interattiva, devi conoscere i tuoi utenti in modo eccezionale. Dovrai ricercare le loro abitudini e modelli prima di pensare alle immagini o alle interazioni. E una volta che hai quei dati, puoi fare un brainstorming sui modi per creare quelle connessioni.

Quindi, cosa rende magica un'interazione? Come lo definisci? La migliore descrizione proviene da un documento accademico, Interazioni magiche con informazioni per ragionamento visivo :

Alcuni esempi includono:

1. Cliccando e trascinando un disegno di un personaggio dei cartoni animati che poi risponde "in modo intelligente" cambiando la sua posa in risposta diretta all'input dell'utente, capendo come muoversi come per magia;
2. Navigazione dei dati video facendo clic direttamente sui personaggi nel video anziché utilizzare un dispositivo di scorrimento;
3. Bumping dei dispositivi mobili per trasferire file; e
4. Selezione di nuvole di punti 3D semplicemente disegnando un lazo 2D.

Tutte queste interazioni hanno "il potere di influenzare apparentemente il corso degli eventi usando forze misteriose o soprannaturali" e "una qualità che fa sembrare qualcosa rimosso dalla vita di tutti i giorni, specialmente in un modo che dà gioia" - due proprietà prese direttamente dal definizione della parola magia.

Animazione intelligente

Le animazioni sono ovunque. Sembra che quasi tutti i siti Web abbiano qualcosa in movimento incorporato, sia che si tratti di un videoclip o di un effetto hover o del caricamento di divot. Questo movimento ha senso. Il movimento attira naturalmente l'attenzione e fornisce un momento di coinvolgimento che può anche servire da distrazione mentre il sito si carica completamente o funziona in background.

Un tipo di interazione intelligente potrebbe essere una foto in movimento o un cinemagraph. Questa tecnica mescola l'azione ferma e viva con movimenti o movimenti sottili in un modo che induce gli utenti a voler approfondire il design. (Puoi saperne di più sulla tendenza nel nostro post sulle foto che prendono vita.)

Le animazioni più intelligenti sono più di semplici movimenti: l'utente vuole fare qualcosa e scopre che è effettivamente funzionale. Questo tipo di interazione sta iniziando a verificarsi frequentemente per l'e-commerce, in cui gli utenti desiderano l'esperienza di vedere o "tenere" un prodotto da ogni angolazione. Qantas Airlines, sopra, sta facendo la stessa cosa con un design di un sito Web che consente agli utenti di vedere all'interno dei loro aerei e guardare le opzioni di posto a sedere e altro ancora. (Fai clic su questo sito Web, rimarrai stupito da tutto ciò che puoi "vedere" e sembra molto reale.)

Clickability diretto

Troppo spesso atterri su un sito Web e gli elementi su cui fai clic non fanno nulla. Con una maggiore cliccabilità diretta, più elementi sono oggetti che portano a nuovi elementi e così via per creare una rete di clic, collegamenti e percorsi che l'utente può intraprendere. Il flusso ha una qualità uniforme che rende desiderabili queste interazioni clic.

Non ci sono ancora abbastanza di queste interazioni là fuori, ma quando lo trovi sono molto divertenti. Il sito web del film, Sing, è un ottimo esempio. (Devi andare in giro.) Ogni elemento è progettato per far sembrare il sito web un'estensione interattiva del film. Puoi fare clic su praticamente qualsiasi cosa e accadrà qualcosa. Combinalo con l'aspetto dei cartoni animati e sembra davvero magico.

Dossi e Haptics

Mentre gli accademici hanno adorato la magia del "dosso", un numero maggiore di utenti ama la magia dei tattili. Può rendere facili interazioni con il tuo orologio - non mi manca mai una chiamata - a giocare a un gioco più intuitivo grazie al movimento. I dossi possono essere reali o percepiti, come nel gioco Konterball, a seconda del tipo di dispositivo.

In molti di questi casi, il web design desktop utilizza il movimento percepito dagli utenti, ma su telefoni o orologi o dispositivi VR c'è un elemento tattile.

Il web design, che è stato praticamente virtuale fino a questo punto, si sta animando con interazioni basate sul tocco. Aspettati più interfacce che tocchi e il circuito di feedback viene chiuso con una risposta fisica dal dispositivo.

Prospettiva dimensionale

Le linee tra le dimensioni stanno iniziando a sfocare. Mentre gli schermi sono un paesaggio bidimensionale, più progetti stanno creando mondi tridimensionali. Gli utenti agiscono comunque con movimenti 2D. È un concetto strano e quasi strabiliante.

Ma poi intatto con il sito Web in questo modo.

Vedrai la magia.

Campo Alle Comete, sopra, racconta una storia magica, in sostanza, ma anche di interattività. Trascina il mouse in linea retta sullo schermo per vedere il mondo cambiare e spostarsi. E non sembrano esserci regole. Il movimento avviene nella direzione e velocità che scegli. La parte migliore di questa esperienza da favola? È probabile che tu faccia clic e riproduci per alcuni minuti prima ancora di realizzare ciò che il sito Web sta cercando di mostrare. (È per il vino.)

Conclusione

Quindi, cosa rende magica un'interazione? Deve essere anticipato e fare esattamente ciò che l'utente vuole nel modo in cui l'utente vuole che accada. Dovrebbe essere interessante e solo un po 'diverso. E deve essere abbastanza semplice che non ci sia confusione.

Infine, la vera magia si verifica quando l'utente le risponde con un sorriso o una sensazione di gioia o soddisfazione. La magia è un legame umano, senza quella sensazione degli utenti, è solo un altro trucco di design.