main menuDigital Agency Roma - Shape Group - Creativity & Technology

NEWS E ARTICOLI

SHAPE DIGITAL BLOG: TUTTO QUELLO CHE C'E' DA SAPERE SUL DIGITAL

archivio lavori

DESIGN ED INTERAZIONE – DAL WEB, APP AI SOFTWARE

ARTICOLO DEL: 24 settembre 2018

articolo

Oggi sono disponibili strumentazioni per la realizzazione di componenti Ui (grafiche) ed il controllo dell’ UXD (esperienza utente) davvero eccezionali. Due di questi sono Figma ed InVision studio (che usiamo qui in aziendal per la realizzazione di siti web, app e gestionali ).
Rispetto a quando partii come  grafico/web designer queste strumentazioni hanno oggi dell’incredibile; un tempo si faceva a mano tutto il lavoro preliminare, i design non erano così animati, le interazioni erano “la metà della metà della metà” ed il concetto di “progettazione dell’esperienza utente” su un sito o app era qualcosa per pochi. Talmente pochi che quando lo facevo spesso ricevevo un veramente poco cordiale: “Suvvia! Non perdere tempo prezioso! Lavora! Che precisino alternativo!!” (…fate voi la traduzione villana!).

Oggi è tutto diverso (PER FORTUNA!) e quella logica di lavoro è ora considerata come parte fondamentale per il successo di un progetto digital. Tuttavia è da far notare quanto sia facile costruire queste interattività sui software di editing ma, molte volte, risultino impossibili da realizzare per budget del cliente, tempistiche, tecnica in uso e codici a disposizione.

Insomma, tutto ha un modo ma in base alle possibilità.

Per rendere l’idea di dove siamo arrivati e fare un punto della situazione vado a tradurre un’articolo meraviglioso pubblicato proprio da InVision:

10 MERAVIGLIOSI ESEMPI DI INTERCTION DESIGN

Quando gli utenti aprono un sito web o un’app, per prima cosa notano gli evidenti elementi di design: logo, colori, icone, illustrazioni e immagini. Questi elementi non contribuiscono solo all’esperienza utente complessiva, sono in realtà pezzi di un puzzle più grande: il design dell’interazione.

I risutati di tale campo di studi possono maggiormente coinvolgere gli utenti finali rispetto a una nuova homepage appariscente e risulta essenziale per creare un’esperienza digitale coinvolgente e intuitiva.Di cosa stiamo parlando?

Il design dell’interazione consiste nel facilitare le azioni tra utenti e prodotti (il più delle volte, questi prodotti sono app o siti web). Secondo l’ Interaction Design Foundation: “l’obiettivo del design dell’interazione è creare prodotti che consentano all’utente di raggiungere i propri obiettivi nel modo migliore possibile”. In altre parole, i designer sono responsabili della creazione di ogni elemento che va in schermo e con il quale un utente potrebbe interagire facendo clic, scorrendo, toccando, o qualsiasi altra sorta di azione.

Le cinque “dimensioni” del design dell’interazione servono come modello utile per capire di cosa sia strutturato.
Introdotto per la prima volta da Gillian Crampton Smith, un accademico di design dell’interazione, il modello includeva solo quattro dimensioni. Kevin Silver, senior interaction designer presso IDEXX Laboratories ne aggiunse il quinto.

  • 1D: Le parole dovrebbero essere semplici da capire e dovrebbero comunicare la giusta quantità di informazioni all’utente (troppi dettagli possono travolgere, mentre troppo poche informazioni possono causare confusione).

  • 2D: le rappresentazioni visive, come immagini, tipografia e icone, dovrebbero integrare le parole per comunicare le informazioni all’utente.

  • 3D: gli oggetti fisici o lo spazio si riferiscono all’hardware e agli oggetti reali con cui un utente interagisce. Ad esempio, stanno usando uno smartphone o un laptop con un mouse? E dove sono, alla loro scrivania o in una metropolitana affollata?

  • 4D: Il tempo si riferisce al modo in cui gli utenti possono misurare i progressi, ad esempio con audio e animazione, nonché il tempo trascorso a interagire con le prime tre dimensioni.

  • Il comportamento è stato aggiunto da Kevin Silver e include come le dimensioni precedenti definiscono le interazioni di un prodotto. Include anche le reazioni degli utenti e del prodotto

Come si traduce tutto ciò nella vita reale? Ecco alcuni dei nostri esempi preferiti trovati su Dribbble:

 

app design - interction design

( Jony Vino ) Dividere il conto con i tuoi amici non è sempre facile come sembra. Questo concetto di app ti consente di inserire il conto totale, selezionare la percentuale della mancia e poi vedere quanto pagherà ogni persona. La parte migliore? Invece di regolare manualmente la parte di ogni persona e dover aggiornare costantemente la quota di tutti, puoi semplicemente ridimensionare la sezione di ogni persona nell’app e i numeri verranno automaticamente ricalcolati per tutti.

 

app design - interction design

 

( Prem Gurusamy) Nella creazione di siti di e-commerce, per visualizzare il carrello è spesso necessario atterrare in una parte completamente diversa del sito Web o dell’app. In questo design, invece, puoi vedere immediatamente i tuoi articoli nel tuo carrello non appena fai clic sul pulsante “Aggiungi al carrello” continuando ad affinare visivamente i tuoi oggetti e non perdendoti nel sito, anche mentre esplori altre parti di quest’ultimo.

 

app design - interction design

( Igor Pavlinski) Le app di social media sono famose per il sovraccarico di informazioni. Ti mostrano tutte le storie migliori, i video di tendenza o gli articoli e le ultime notizie in una sola volta. Questo concept di app per social media rimette il controllo nelle mani dell’utente, organizzando i contenuti per fonte (come YouTube, Vimeo, Twitter o Reddit) e permettendo di scegliere quale canale esplorare. Il layout risulta sviluppato in “cards” che è possibile eliminare alla prima necessità di passare da un’argomento all’altro consultando rapidamente i tuoi contenuti preferiti rendendo facile alternare le fonti all’interno della stessa viewport.

 

app design - interction design

( tubik) Infiniti modi per personalizzare il tuo hamburger creano un infinito caos. Tuttavia in questo modello di interacion desin, quando ordini sul tuo smartphone, selezionare ogni singolo ingrediente su un piccolo schermo diventa quasi divertente. “Tasty Burger” semplifica l’esperienza di ordinazione, utilizzando gli ingredienti per tipo invece di visualizzare una lunga lista di tutte le possibili varianti di formaggio, prodotti, carne o panino, fai prima clic sulla categoria di ingrediente (come il formaggio) e poi ti vengono presentati i diversi tipi, come gouda o comte.

 

app design - interction design

( Rahul.Design) Se sei a caccia di casa e non riesci a vedere la proprietà di persona, la prossima opzione migliore è quella di ottenere un tour virtuale. Questo concept di app immobiliare, sfrutta il nostro comportamento naturale quando guardiamo a un nuovo spazio. Puoi fare clic in qualsiasi stanza, come la cucina o il soggiorno, e spostare il telefono per ottenere una vista a 360 gradi. È facile passare da una stanza all’altra con un semplice tocco.

 

app design - interction design

 

( Forest Plasencia) I filtri offrono un modo semplice e potente per far emergere diverse sezioni di informazioni. Tuttavia, il problema con molte interazioni tra i filtri è che aprono un popup o una nuova pagina nell’app nascondendo le informazioni che si desidera filtrare. Questa micro-interazione mantiene tutto nella stessa vista (o viewport), anche quando si applicano i filtri. In questo modo, puoi vedere i dati cambiare istantaneamente quando selezioni diversi criteri di filtro.

 

app design - interction design

( Dmitro Petrenko) Monitorare la tua casa grazie alle app per smartphone diventa facile. Negli Stati Uniti il 94% e il 99% di tutte le chiamate di allarme negli Stati Uniti sono falsi allarmi. Il motivo principale? Errore utente e impossibilità di spegnere gli allarmi quando si attivano per errore. Questa app usa il colore, l’iconografia e il copy (testi) per aiutarti a concentrarti sull’unica interazione che conta di più: se hai armato la tua casa o meno.

 

Questo, sia dal punto di vista visivo che di grazie, è il risultato degli ultimi 10 anni di sperimentazioni che il mondo ha condotto sul digital web e technology. Il rapporto tra uomo e device è avvicinabile solo dal tipo di interazione che si sceglie in fase di progettazione e dai ripetuti test che occorrono per le eventuali modifiche.

Tutto questo è il nostro mondo… ti piace? Consulta la nostra area servizi o contattaci per un preventinvo da qui .

Tradotto all’articolo originale di InVision, noto software per il design lato client.


Scopri tutti i nostri servizi

servizi - Roma

Costruiamo il business del futuro con le migliori tecnologie web. Scopri qui come siamo utili a tantissime aziende e professionisti.

Scopri di più...

Il nostro team di sviluppo

servizi grafica - Roma

Un team di sviluppo sull’informatica, le arti e le nuove tecnologie sotto un unica bandiera pronto ad aiutarti nel diventare un big del digital.

Scopri di più...

Contattaci per informazioni

servizi grafica - Roma

Sei un imprenditore? Hai un’attività? Vuoi investire nel mondo online? Allora sei nel posto giusto! Contattaci per ottenere il massimo dal digital!

Scopri di più...