L'interattività aiuta a rendere le interfacce utente espressive e facili da usare. Nonostante il suo grande potenziale, l'interattività è forse la meno compresa tra tutte le discipline del design. Ciò può essere dovuto al fatto che l'interattività è uno dei membri più recenti della famiglia di interfacce utente. Il design visivo e dell'interazione risalgono alle prime GUI, ma il design dell'interazione ha dovuto attendere che l'hardware più moderno rendesse le animazioni senza intoppi. Sovrapporre l'interattività dell'interfaccia utente all'animazione tradizionale aggiunge la sua quota di incomprensioni. Si può passare una vita a padroneggiare i 12 principi fondamentali della Disney, significa che anche l'interattività dell'interfaccia utente è difficile? Le persone spesso mi dicono che progettare per l'interattività è difficile o che scegliere i valori giusti è ambiguo. Ritengo che nelle aree più importanti per l'interfaccia utente, il design dell'interazione può e deve essere mantenuto semplice.
Da dove cominciare?
L'obiettivo principale dell'interaction design è aiutare gli utenti a navigare nell'applicazione illustrando la relazione tra gli elementi dell'interfaccia utente. Interactive Design ha anche la possibilità di aggiungere un personaggio all'app con icone, loghi e illustrazioni animati; tuttavia, l'usabilità dovrebbe avere la precedenza sugli elementi di espressività. Prima di dimostrare le capacità di animazione dei personaggi, iniziamo creando alcune interattività di base, concentrandoci sulle transizioni di navigazione.Modelli di transizione
Quando si progetta una transizione di navigazione, semplicità e coerenza sono fondamentali. Per fare ciò, sceglieremo due tipi di movimenti:- Transizioni basate su container
- Transizioni senza contenitore.
Transizioni basate su container
Elementi come testo, icone e immagini sono raggruppati all'interno di contenitori
Se la composizione include un contenitore, ad esempio un pulsante, una scheda o un elenco, il design della transizione si basa sull'animazione del contenitore. I contenitori sono generalmente facili da individuare in base ai loro bordi visibili, ma ricorda che possono anche essere invisibili prima dell'inizio della navigazione, come una voce di elenco senza delimitatori. Questo modello è suddiviso in tre fasi:
* L'animazione è stata rallentata per illustrare la comparsa e la scomparsa degli elementi
L'applicazione di questo modello a tutte le transizioni del contenitore stabilisce uno stile coerente. Rende anche chiaro il collegamento tra le composizioni di inizio e fine, poiché sono collegate da un contenitore animato. Per dimostrare la flessibilità di questo modello, ecco cinque diverse composizioni:
* L'animazione è stata rallentata per illustrare come le composizioni di inizio e fine sono vincolate dal contenitore
Alcuni contenitori saltano fuori dallo schermo con un andamento standard. La direzione del suo movimento è determinata dalla posizione del componente a cui è associato. Ad esempio, facendo clic sull'icona del menu di navigazione nell'angolo in alto a sinistra si sposterà il contenitore a sinistra.
Se il contenitore è fuori dallo schermo, si dissolve in avanti e ingrandisce. Invece di animare da 0%, avvia l'animazione al 95% per evitare di enfatizzare eccessivamente la transizione. L'animazione in scala utilizza la facilità di allentamento, il che significa che inizia alla massima velocità e rallenta dolcemente. Per sbiadire, il contenitore si dissolve semplicemente senza ridimensionamento. La fine dell'animazione dovrebbe essere meno pronunciata dell'inizio per focalizzare l'attenzione dell'utente sul nuovo contenuto.
* Animazione rallentata per illustrare come i contenitori possono nascere a causa del graduale cambiamento di un elemento (zoom, apparire e scomparire)
Transizioni senza contenitore
Alcune composizioni non hanno un contenitore su cui si basa la transizione, ad esempio facendo clic su un'icona nella parte inferiore della navigazione che porta l'utente a una nuova destinazione. In questi casi, viene utilizzato uno schema a due fasi:- La composizione inizia con una dissolvenza uniforme, termina con un aspetto liscio.
- Quando la composizione finale svanisce, viene anche leggermente ridimensionata utilizzando la riduzione dell'attenuazione dell'elemento. Anche in questo caso, il ridimensionamento viene applicato solo nel momento in cui appare la composizione, per enfatizzare il nuovo contenuto rispetto al vecchio.
* L'animazione è stata rallentata per illustrare come avvengono le transizioni senza un contenitore che utilizza il ridimensionamento, la dissolvenza in entrata e in uscita degli elementi
Se l'inizio e la fine della composizione hanno una chiara connessione spaziale o graduale, è possibile utilizzare il movimento articolare per migliorarla. Ad esempio, durante la navigazione in un componente del passaggio, l'inizio e la fine della composizione scorrono verticalmente mentre si attenuano o si attenuano. Questo migliora la loro disposizione verticale. Quando si preme il pulsante successivo per visualizzare altro materiale, la composizione scorre orizzontalmente. Lo spostamento da sinistra a destra migliora la comprensione dell'evento successivo. Il movimento congiunto utilizza elementi di allentamento standard.
* L'animazione è stata rallentata per illustrare il movimento verticale e orizzontale
Migliori pratiche
Più semplice è, meglio è
Data la loro alta frequenza e gli stretti legami con l'usabilità, le transizioni di navigazione dovrebbero generalmente supportare la funzionalità nello stile. Questo non significa che non debbano mai essere acconciati, ma assicurati solo che la scelta di stile sia giustificata dal marchio. Il movimento degli occhi di solito viene catturato al meglio su elementi come piccole icone, loghi, caricatori o stato libero. Il semplice esempio seguente potrebbe non attirare la stessa attenzione su Dribbble, ma renderà l'app più intuitiva.
* L'animazione è stata rallentata per illustrare diversi stili di movimento
Scegli la giusta durata e andamento
Le transizioni di navigazione dovrebbero utilizzare durate che danno priorità alla funzionalità pur essendo veloci, ma non così veloci da creare confusione. La durata viene selezionata in base alla percentuale di schermo occupata dall'animazione. Poiché le transizioni di navigazione in genere occupano la maggior parte dello schermo, la durata di 300 ms è un metodo collaudato. Al contrario, i piccoli componenti come gli interruttori utilizzano una breve durata di 100 ms. Se la transizione è troppo veloce o lenta, regolane la durata con incrementi di 25 ms fino a raggiungere il giusto equilibrio.Easing descrive la velocità con cui un'animazione accelera e rallenta. La maggior parte delle transizioni di navigazione utilizza l'andamento standard degli elementi, che è un tipo di andamento asimmetrico. Ciò significa che gli elementi accelerano rapidamente e poi rallentano dolcemente per concentrarsi sulla fine della transizione. Questo tipo di andamento conferisce all'animazione una qualità naturale, poiché gli oggetti nel mondo reale non possono iniziare e smettere di muoversi improvvisamente. Se la transizione sembra difficile o robotica, è probabile che l'andamento simmetrico o lineare sia stato scelto per errore.
* L'animazione è stata rallentata per illustrare diversi tipi di allentamento
I modelli e le migliori pratiche delineati in questo articolo sono progettati per creare uno stile di movimento pratico e discreto. Questo è adatto per la maggior parte delle applicazioni, tuttavia alcuni marchi potrebbero richiedere espressioni di styling più intense. Per saperne di più sullo styling del movimento, consulta la nostra guida alla personalizzazione.
Una volta implementate le transizioni di navigazione, inizia il compito di aggiungere un personaggio alla tua applicazione. È qui che i modelli semplici non funzionano e qui puoi realizzare appieno le tue capacità di animazione ...
L'animazione personale può aggiungere facilità a un grave errore
Se sei interessato a saperne di più sulla possibilità di movimento, assicurati di leggere il nostro
Qual è l'uso del tuo sito web o della tua applicazione? È solo per raccogliere informazioni con esso? Oppure acquista con un clic e ricevi la consegna della merce domani? Oppure è più importante trovare rapidamente le risposte alle domande giuste?
Pensa alle persone che hanno sviluppato questo sito o app. Qual era il loro obiettivo?
Hanno cercato di creare una risorsa web che avesse tutto ciò per cui l'avrebbero amata. Un sito facile da usare che ti fornisce rapidamente le informazioni che stai cercando e ti aiuta a prendere decisioni informate.
UX, o esperienza utente, comprende le percezioni e le emozioni che un prodotto o servizio software evoca. UX è caratterizzato da facilità d'uso, accessibilità e convenienza. Si parla spesso di UX nel contesto di dispositivi elettronici, smartphone, computer, software o siti web. Ma un tale concetto non è nuovo; è qualcosa che sta cambiando rapidamente guidato dai progressi tecnologici, dalle nuove interazioni e dalle tendenze dei consumatori.
Gli utenti sono alla ricerca di modi velocissimi per risolvere i problemi, quindi l'esperienza utente è estremamente importante. Assicurati che il sito sia chiaro e di facile comprensione per gli utenti.
Se i clienti non trovano la risorsa utile e facile da usare, annulleranno rapidamente l'iscrizione. La maggior parte degli utenti decide entro un minuto se chiudere il sito.
In questo articolo, parliamo di più del settore emergente dell'UX, del tipo di designer che le aziende stanno assumendo e perché un design ponderato avvantaggia ogni azienda.
Cos'è l'UX Design?
Il design UX, o design dell'esperienza utente, è ciò che determina quanto sarà soddisfatto l'utente con un prodotto o servizio software; questo processo comporta il miglioramento della funzionalità, usabilità e convenienza. UX design è la creazione di prodotti software con un'esperienza utente ponderata e pertinente. Il campo della progettazione UX copre molte sottosezioni che vale la pena considerare.
1. Progettazione interattiva
Il design dell'interazione, o IxD, è una sottosezione dell'UX design che definisce l'interazione tra l'utente e il prodotto; lo scopo di queste interazioni è una buona esperienza utente.
2. Progettazione visiva
Il design visivo utilizza illustrazioni, fotografia, tipografia e combinazioni di colori per migliorare l'esperienza dell'utente finale. Nel visual design, è importante seguire i principi del design artistico. Tra questi ci sono equilibrio, spazio, contrasto... Anche il colore, la forma, le dimensioni e altri elementi influenzano il design.
3. Ricerca degli utenti
Questo è l'ultimo degli elementi costitutivi della progettazione UX che le aziende utilizzano per capire le aspettative dei propri clienti. Un progetto web di successo serve a uno scopo specifico e risolve problemi specifici, quindi un passo importante è scoprire di cosa ha bisogno il consumatore. Senza questo, il design si basa solo su ipotesi e ipotesi.
4. Architettura dell'informazione
I progettisti utilizzano l'architettura delle informazioni per strutturare ed etichettare il contenuto in un modo specifico per consentire agli utenti di trovare più facilmente le informazioni di cui hanno bisogno. L'architettura dell'informazione viene applicata nello sviluppo web, nello sviluppo di smartphone, applicazioni e viene visualizzata in molti oggetti fisici. La facilità d'uso e l'accessibilità sono due aspetti principali dell'architettura dell'informazione.
Per illustrare, considera una mappa della metropolitana di New York. A proposito, questo è un buon esempio di architettura dell'informazione che aiuta le persone a passare dal punto condizionale "A" al punto "B". E, come suona il postulato dell'Istituto di Architettura dell'Informazione, "se fai qualcosa per gli altri, applichi l'architettura dell'informazione".
I processi componenti di UX Design
Ci sono tre fasi della progettazione UX:
1. cercare il pubblico di destinazione
2. comprendere gli obiettivi dell'azienda - come tali obiettivi influenzano l'utente
3. pensare fuori dagli schemi
In genere, la progettazione dell'esperienza utente adotta un approccio centrato sull'utente, creando il prodotto finale giusto in tre passaggi.
In poche parole, dovrebbero essere prese in considerazione le esigenze di coloro per i quali viene sviluppato il design. Molte soluzioni vengono applicate per eliminare ogni tipo di complessità e rugosità; i prototipi vengono creati e testati sugli utenti.
Sulla base dei risultati del lavoro, viene selezionata la migliore delle opzioni sviluppate. Se guardi le cose dal punto di vista dell'utente e progetti in base alle sue preferenze, il risultato piacerà a tutti.
Principi di progettazione UX
L'industria del design UX sta cambiando rapidamente, ma i principi fondamentali rimangono gli stessi. I designer devono capire di cosa hanno bisogno in termini di equilibrio visivo. Brevità e chiarezza sono sfumature importanti; qui si applica il principio: meno è, meglio è. Sforzati che il design sia intuitivo e, soprattutto, tenga conto degli interessi e delle esigenze degli utenti.
L'ambito della UX è solitamente limitato alle nuove tecnologie, ma al centro di tutto ci sono principi vecchi come il mondo che aiutano i designer a risolvere tutti i tipi di problemi attraverso una metodologia coerente e disciplinata.
Considera il contesto: L'utente deve sapere dove si trova in questo momento. Non dovrebbe esserci una sensazione di sovraccarico di informazioni o di smarrimento. Il tuo compito è suggerire e indicare la giusta direzione.
Sii umano: A nessuno piace la sensazione di interagire con una macchina. È più probabile che crei fiducia se mostri il lato umano della tua azienda.
Disponibilità: Nessuno vuole perdere tempo. Un design UX di successo migliora la navigazione.
Sollievo: La coerenza e la semplicità del design sono sempre buone. Costruisci relazioni con gli utenti attraverso una comoda UX.
Semplicità: Nessun errore di calcolo o descrizione non necessaria. Vai dritto al punto principale.
Risultato UX
Quando il progetto UX è completo, il designer e il team mostrano al cliente e al suo team un elenco di ciò che è stato fatto. È necessario mostrare il processo di lavoro, un elenco di idee implementate.
Questa è una parte importante del processo generale. Ciò rende più facile per i designer UX trovare ciò che stanno cercando, dimostrare la loro visione e spiegare alcuni consigli per il miglioramento.
1. Ricerca degli utenti
I bisogni, le tendenze e le motivazioni degli utenti sono tutti rivelati attraverso vari studi sugli utenti. Questi possono essere dati quantitativi e qualitativi ottenuti durante i test, ad esempio con la partecipazione di focus group; una descrizione dettagliata del processo di registrazione, onboarding e richieste al servizio clienti. L'obiettivo è ottenere un'analisi dettagliata di ciò che è presente sul sito e di cos'altro può essere migliorato: tutte le idee vengono testate su utenti reali.
I ricercatori creano ritratti dei consumatori sulla base di dati effettivi sulle persone, il che aiuta a determinare con precisione chi interagirà con un sito Web o un'applicazione.
Attraverso la ricerca degli utenti, i designer trovano e definiscono il loro utente.
2. Valutazione dei concorrenti
Valutare i punti di forza e di debolezza dei concorrenti è un modo per espandere la propria strategia UX. È meglio agire con l'aiuto di rapporti analitici che evidenzino gli sviluppi concorrenti. In effetti, questa è un'analisi dettagliata del design interattivo dei concorrenti, un elenco di punti deboli, errori di calcolo e omissioni, in generale, ciò che può diventare un vantaggio competitivo.
3. Progettazione interattiva
La descrizione delle interazioni dell'utente può assumere la forma di un prototipo: in questo modo è più facile capire come gli utenti eseguiranno attività chiave, troveranno informazioni e, in generale, utilizzeranno il prodotto. Viene descritto il processo di ricerca delle informazioni e quanto è conveniente lo sviluppo. Il prototipo dovrebbe essere il più semplificato possibile e vicino alla versione finale.
4. Architettura dell'informazione
L'IA è il processo di acquisizione delle informazioni e di trasformazione in una forma digeribile, particolarmente importante per i siti di grandi dimensioni. È importante comprendere il contesto in cui le persone utilizzeranno il design. Il risultato finale potrebbe essere una mappa del sito con suggerimenti o un flusso utente di esempio che mostra come i visitatori navigano nel sito.
Che cos'è la progettazione dell'interfaccia utente?
Quando Apple ha introdotto il componente di navigazione della ghiera cliccabile per l'iPod, la cosa era intuitiva e altamente funzionale, per non parlare dell'aspetto visivo. Questo è un buon esempio di interfaccia utente o interfaccia utente di successo. L'interfaccia utente è il modo in cui interagisci con computer, macchine, siti Web, app, dispositivi indossabili, ecc. Il design dell'interfaccia utente è ciò che rende tutte queste cose il più semplici ed efficienti possibile.
UI vs. UX
UX, esperienza utente, si riferisce al movimento dell'utente su un sito Web o un'app. I designer UX lavorano sulla forma e sulla funzione di un prodotto o di una tecnologia. L'interfaccia utente, o interfaccia utente, si concentra sull'aspetto e sul funzionamento del guscio esterno di un prodotto. Lo scopo dei progettisti dell'interfaccia utente sono le componenti tangibili e visibili di questo processo.
Elementi generali dell'interfaccia utente
UX e UI hanno molto in comune, ma è importante notare le differenze chiave tra i due argomenti. Anche in questo caso, l'interfaccia utente si concentra sull'esterno del prodotto, mentre l'esperienza utente riguarda maggiormente il modo in cui le persone interagiscono con il sito o l'app. Ecco gli elementi dell'interfaccia utente più comuni che devi conoscere per comprendere meglio le differenze:
Componenti Informativi: I progettisti dell'interfaccia utente utilizzano i componenti informativi per espandere il cosiddetto. esperienza del lettore – per trasmettere più informazioni. Esempi di componenti di informazioni sono indicatori di stato, notifiche e finestre di messaggio. Tutto questo viene utilizzato come conferma: l'utente ha completato un determinato compito. O per notificare che è necessaria una certa azione da parte sua.
Navigazione breadcrumb
È uno strumento di progettazione che migliora visivamente l'usabilità di un sito web.
Questo è il modo in cui le persone vedono la loro posizione su una pagina web, nella sua struttura gerarchica. Non sono richiesti elementi di design fantasiosi, devi solo mostrare in quale sezione del sito si trova l'utente. In genere, tali collegamenti vengono inseriti nella parte superiore della pagina Web dei negozi online o su altre risorse.
Controlli di input: agli utenti vengono fornite più opzioni per rispondere alla domanda che viene loro posta. Questi possono essere caselle di controllo, elenchi a discesa e pulsanti di opzione. Le informazioni dovrebbero essere brevi e concise per facilitare la comprensione delle esigenze.
Esperienza di ricerca
Senza ricerca, non sarà possibile conoscere i bisogni e le preferenze delle persone. La ricerca UX riguarda la ricerca di ciò che gli utenti desiderano; i dati ottenuti costituiscono la base della progettazione UX. Aziende e designer utilizzano la ricerca per trarre conclusioni su cosa funziona e cosa deve essere cambiato. Ci sono diverse opzioni per la ricerca UX.
Test di usabilità
Lo scopo di tale studio è scoprire quanto successo ha il prodotto; gli utenti partecipano al test. Questo è il modo in cui le aziende ottengono informazioni reali su come le persone utilizzano un prodotto o sistema o su come funziona quel prodotto o sistema. Ci sono due modi principali per testare.
Test di usabilità su utenti casualiè un modo rapido ed economico per aziende e ricercatori di ottenere informazioni da persone che potrebbero non conoscere il loro prodotto. Persone a caso usano il prodotto e condividono la loro opinione.
Test di usabilità a distanza consente alle aziende di condurre ricerche mentre gli utenti si trovano nel loro ambiente naturale (ad esempio, a casa o in ufficio).
Strumenti di test di usabilità
Tali strumenti consentono di conoscere l'opinione degli utenti, analizzare il feedback e apportare determinate modifiche in base ai dati. Se stai cercando uno strumento che ti aiuti a capire quanto sia facile usare il tuo sito o la tua app, hai due opzioni:
Adobe Fireworks CS6 consente ai web designer di creare grafica per pagine web senza dover approfondire le complessità del codice o del design. Adobe Fireworks offre numerosi vantaggi. Questo strumento ha un'impressionante precisione dei pixel, opzioni di compressione delle immagini (JPEG, GIF, ecc.), consentendo agli utenti di creare siti Web funzionali e creare vettori.
Con Adobe XD puoi progettare siti Web e applicazioni mobili, nonché prototipi, wireframe e grafica vettoriale. Puoi condividere prototipi interattivi su più piattaforme, inclusi Windows, Mac, iOS e Android: lo strumento è perfetto per il lavoro di squadra.
Axure RP Pro è un altro ottimo strumento per la progettazione UX ed è gratuito. Axure ha diverse opzioni, tra cui prototipazione e documentazione. Puoi persino creare una mappa di navigazione dell'utente e mappe del sito. Ideale per la creazione di applicazioni Web e desktop, Axure offre agli utenti la possibilità di esportare rapidamente in PDF o HTML.
Questo è un software complesso con molte funzioni specifiche, incl. modifica non distruttiva (il che significa che Sketch non cambierà la densità dei pixel dell'immagine con cui stai lavorando). Esportazione del codice, precisione dei pixel, prototipazione, editing vettoriale: questi sono i principali vantaggi di Sketch.
6. Software di storyboard
Ti starai chiedendo perché il design UX ha bisogno di uno storyboard. Ma è un buon modo per prevedere visivamente come un utente interagirà con il tuo prodotto in un contesto più ampio. Esistono diversi strumenti per lo storyboard, con diverse funzionalità e livelli di difficoltà.
Storyboarder è uno sviluppo gratuito con funzionalità di base adatto a tutti i designer, indipendentemente dal loro livello di abilità. Questo software crea rapidamente schizzi o figure stilizzate per descrivere un piano o un'idea. Un altro strumento è Toon Boom Storyboard Pro. Combina la funzione di disegno, animazione, controllo della fotocamera e molte altre opzioni, a un canone annuale o mensile. Ampia funzionalità per una narrazione sofisticata e un lavoro preparatorio dettagliato. Tutti questi sono ottimi per i designer che cercano un'opportunità per raccontare visivamente la loro storia attraverso un'interfaccia.
Come si diventa UX designer?
Se ami il design, la ricerca e il lavoro con le persone, ascoltando gli altri sulle loro esperienze, allora potrebbe valere la pena prendere in considerazione una carriera nel design dell'esperienza utente. In tal caso, dovrai concentrarti sugli aspetti concettuali del design; creare un'esperienza utente di qualità per gli altri utenti.
Ci sono diversi passaggi importanti sulla strada per diventare un designer UX. Molte università in tutto il mondo offrono i loro corsi, ma per iscriversi ad essi, di solito, 4 anni di formazione nel campo del design sono un prerequisito. Ci sono programmi più flessibili come Corso di laurea in Design dell'esperienza utente della Quinnipiac University. Ci sono anche programmi di certificazione per professionisti. Molto dipende dalla durata della formazione e dal livello di formazione.
Se sei pronto a realizzare il tuo sogno di diventare un designer UX, avrai bisogno di un curriculum e di un portfolio vivace. Risorse come Dribbble o Behance tornano utili. Puoi mostrare il tuo lavoro sul tuo sito Web creato con builder come SquareSpace.
Non perdere di vista le seguenti sfumature:
fascino visivo
La presentazione è tutto. L'opera dovrebbe parlare da sola... mostra, non dire! Scelta del colore, tipografia: è tutto importante.
Aggiungi una pagina Informazioni
Perché qualcuno dovrebbe assumerti? Quali novità puoi portare a qualsiasi organizzazione? Mostra ai reclutatori la tua visione unica o ciò che ti ispira.
Il dipendente dell'azienda dei tuoi sogni non dovrebbe avere difficoltà a navigare in un sito portfolio. Aggiungi sezioni come contatti, curriculum, portfolio, informazioni su di me, ecc. al menu. per facilitare la navigazione.
Spiega come crei la tua UX
Il tuo futuro datore di lavoro vuole capire il tuo modo di pensare. Aggiungi informazioni che raccontino al reclutatore la tua ricerca UX, il brainstorming, il processo di progettazione o la prototipazione.
Crea un portafoglio aggiuntivo
Utilizza altri strumenti per rendere disponibile il tuo lavoro sulle risorse web dove trascorrono il loro tempo i designer e coloro che vogliono assumerli,
Risultato
Che tu sia un grafico, blogger, sviluppatore o altro, il design UX è qualcosa che può aiutare te e la tua azienda a crescere. Un utente felice è la chiave del successo, ma senza un'attenta progettazione dell'esperienza utente, questo non sarà possibile.
La tecnologia si sta infiltrando sempre più nella vita di tutti i giorni e il design UX di successo rimuove qualsiasi barriera tra l'utente e il suo dispositivo (o le sue applicazioni). Il design dell'esperienza utente è ora più importante che mai: unisciti a questo movimento e ottieni i vantaggi per la tua attività.
Di norma, per stimolare una persona che utilizza un prodotto, un servizio, un sistema, è necessaria l'opportunità di dare una risposta. Questa reazione dovrebbe essere misurata, con una comunicazione chiaramente definita, e, nella maggior parte dei casi, suscitare una risposta chiara e semi-prevedibile. E poi funziona.
Quanto sopra è una definizione di base di Interaction Design (IxD), che riunisce le tendenze generali delle definizioni fornite dal famoso designer Dan Saffer. 1 ) e Robert Reimann 2 ), così come l'Interaction Design Association (Interaction Design Association 3 ).
È anche molto importante notare che l'interaction design è un concetto completamente diverso da altri tipi di design. Questa non è architettura dell'informazione o design industriale. Inoltre non è un tipo di interfaccia utente. Il design dell'interazione non è una forma o una struttura, ma qualcosa di più effimero: riguarda più il concetto di "perché" e "quando" piuttosto che "cosa" e "come".
Per qualsiasi tipo di progetto, il primo compito è formulare ciò che viene chiamato basi o elementi di base. La creazione di tali concetti semantici fornisce:
- migliore comunicazione tra i partecipanti
- creazione di concetti estetici comuni
- migliori strumenti di apprendimento
- area di ricerca
Questi ed altri motivi, al momento non significativi, sono occasione per parlare di basi.
Cosa sono i terreni?
La mia prima introduzione alle "fondazioni" è stata durante la preparazione del programma di design industriale al Pratt Institute di Brooklyn, New York. Il programma è stato creato da Roweena Reed Kostellow sulla base della sua filosofia educativa fondante (per maggiori dettagli vedere Elements of Design di Gail Greet Hanna - Elementi di design Gail saluta Hannah 4 ).
Secondo Costello, ci sono sei elementi che costituiscono le basi del design industriale: linea, illuminazione e colore, spazio, volume (dimensioni), spazio negativo (sfondo) e texture (superficie, trama). Mescolare e sperimentare con questi elementi è il cuore del design delle forme 3D. Gli studenti del Pratt Institute hanno imparato questi fondamenti durante un corso di un anno. Dovevano definire confini e dipendenze, discutere di astrazioni e progetti reali.
Dal momento che non sono l'unica persona che ha pensato a queste cose, si può presumere che tutti la pensiamo in modo diverso. Ad esempio, Den Saffer, nel suo libro Designing Interactions, ha un lungo capitolo in cui descrive gli elementi dell'interaction design: tempo, movimento, spazio, aspetto, consistenza e suono. Gli elementi di Den sono definiti da come posso chiamarli sul modulo per avere interattività, non da quale forma di interattività sarà o non sarà disponibile per me, tranne forse per un po'.
Se questi sono davvero motivi per l'interaction design, dovrebbero essere completamente astratti dalla forma e non avere attributi fisici.
Fondamenti dell'Interaction Design
Tempo
"Time" distingue il design interattivo da altri tipi. Questo è il guscio dei nostri concetti di interattività.
Ma il tempo non è l'unica base per l'interaction design. Ci sono così tanti aspetti correlati della manipolazione del tempo. E come tutti sappiamo, il tempo è relativo, esiste lungo molti assi nello stesso momento. Quindi ci sono tre fondamenti dipendenti dal tempo del design dell'interazione:
Ritmo
Il design dell'interazione consiste nel creare una narrazione, un cambiamento graduale nell'esperienza individuale pur rimanendo entro i limiti. Ad esempio, se utilizzo un client di posta elettronica, non vorrei assolutamente accendere i fornelli nel momento in cui scrivo una lettera.
La storia ha ritmo. Lo capiamo chiaramente quando guardiamo un film. Se il film è buono, non guardiamo mai l'orologio. Il ritmo fa anche parte del design interattivo, perché a volte potresti guardare l'orologio non per noia, ma perché vuoi vedere se riesci a completare il processo di "interattività" in tempo.
A mio parere, il ritmo nell'interaction design è spesso correlato a ciò che possiamo fare in un dato momento. Allo stesso tempo, non è sufficiente per me essere in grado di fare qualcosa, è anche necessario per me essere in grado di farlo prima di passare al passaggio successivo. Ad esempio, quando acquisto qualcosa, posso compilare un modulo molto grande che contiene tutte le informazioni su di me e controllare tutti i dati in una volta, oppure posso controllare i dati in parti, dividendo il processo di verifica in più.
Poiché la lunghezza totale dei campi è la stessa, anche il tempo per il completamento dovrebbe essere più o meno lo stesso in ogni caso, ma la sensazione del ritmo sarà diversa in ogni progetto. In generale, un modulo grande è più efficiente e uno diviso in blocchi è più gestibile.
Reazione
Il modo più semplice per definire il tempo nell'interaction design è il "tempo di reazione". Quanto tempo impiega il sistema per rispondere a un evento? Questo accade quando vediamo il cursore trasformarsi in una clessidra o nella barra di avanzamento ormai familiare e aspettiamo che il sistema risponda a noi, ma anche altri tempi di reazione sono importanti.
Un'azione che avviene in tempo reale (in modo sincrono) è connessa al momento corrente, mentre un'azione asincrona perde questa connessione. Poiché alcuni sistemi sono sensibili al tempo, è necessario sapere come tenere conto delle differenze in questi tipi di risposta.
Contesto
Ogni elemento di base, come il tempo, deve avere un sottoelemento - "contesto". Nel nostro caso, l'interattività del corso per una persona, questo significa che il design stesso non può essere considerato. Ad esempio, quando diciamo “tempo”, non possiamo progettare un'applicazione senza capire quanto tempo una persona può trascorrere a diretto contatto con il sistema.
Alan Cooper e Robert Reimann in About Face 2.0 6 parlare del contesto temporale come principio di "posizione". Ecco quattro posizioni:
Metafora
La metafora è un espediente letterario in cui un fenomeno o concetto ben compreso viene utilizzato per spiegare un altro concetto che è più difficile da capire, o quando è difficile spiegarlo in un altro modo. La natura virtuale dei computer richiede la ricerca di metafore "reali" per spiegare alla gente tutte queste cose nebulose. Che tipo e quante metafore usi influisce direttamente sulla qualità e sulla percezione emotiva del tuo prodotto.
L'esempio più ovvio di metafora è un'urna o un cestino (nel sistema operativo del tuo computer). L'idea è che i tuoi file siano in un "bucket" o "cestino" virtuale, quindi se commetti un errore, puoi scavare lì (oops!) e ripristinarli nella loro forma originale. E, naturalmente, puoi sempre "svuotare il secchio" rendendo il contenuto irrecuperabile. La metafora funziona bene per tutte le persone perché si collega in modo accurato e flessibile alla realtà.
Tutte le metafore non sono invertite. Ad esempio, abbiamo cercato di utilizzare il termine "rimuovere" per spiegare rapidamente come aggiungere qualcosa a un secchio oa un cestino. Ma, dopo tutto, non possiamo eliminare qualcosa in un vero cestino o un cestino della spazzatura, vero?
Ma a volte la metafora è troppo distante. Quindi ci permette di espandere i confini della nostra immaginazione. Se ho un taccuino, uno schedario, una casella di posta, un calendario e simili per lavorare comodamente sul mio schermo, posso chiamare le mie schede oggetti, utilizzare un blocco note, lasciare i miei messaggi nella casella di posta e contrassegnare gli appuntamenti sul calendario, a destra ? ?
Ma allo stesso tempo, le metafore servono meglio allo scopo se sono leggermente imprecise e l'utente stesso deve colmare il vuoto in base alla propria comprensione dell'argomento. Quindi, ad esempio, abbiamo adattato le metafore del desktop ai nostri computer moderni.
Il progettista dell'interattività deve raggiungere questo equilibrio utilizzando con attenzione le metafore dei suoi predecessori e costruendo su di esse, fintanto che la metafora originale (forse universalmente accettata) è in grado di resistere alle nuove correnti.
Astrazione
Lavorando in tandem con la metafora, l'astrazione si riferisce maggiormente all'attività fisica e mentale che è essenziale per l'interattività. Ho iniziato a pensare all'astrazione quando ho letto un articolo di Jonas Lowgren 7 , su quella che ha chiamato il termine "plasticità". Dopo aver letto questo articolo e aver usato il termine più volte in conversazioni e discussioni, mi sono improvvisamente reso conto che ciò di cui parlava Jonas era come l'astrazione nell'interfaccia sia la visualizzazione del prodotto.
In generale, tutto ciò che vediamo in un computer è inizialmente un'astrazione, poiché abbiamo due interfacce principali per un punto di input: un mouse e una tastiera. Alcuni posizionano il monitor all'interno di un tipo speciale di dispositivo di puntamento e abbassano il livello di astrazione per qualche tipo di interattività, principalmente per il disegno. Tuttavia, la maggior parte di noi usa le sequenze di tasti, puntando, facendo clic e spostando il mouse sullo schermo.
Concentriamoci sull'"allevamento dei topi". Stiamo guardando un monitor in cui il cursore (a forma di icona) si sposta in base ai movimenti del mouse. Senza guardare il mouse (di solito) lo spostiamo e, secondo la direzione indicata, si muove anche l'icona sullo schermo (di solito una freccia). Va bene, sistemiamo. A destra ea sinistra funziona come sembra, ma spostando il mouse "lontano da te" sposta il cursore in alto e "verso te" sposta il cursore in basso sullo schermo. Un'ottima metafora del concetto di prospettiva.
Quando portiamo l'icona sul bersaglio, facciamo clic con il pulsante del mouse. Questo è il più alto livello di astrazione. Il mouse, il monitor e il processore lavorano all'unisono e creano una serie di effetti che sono collegati a questi tre dispositivi. Ma la connessione è molto, molto astratta e deve essere studiata.
Esistono diversi livelli di astrazione nel comportamento del mouse. I miei preferiti per confrontare questo sono Google Maps e MapQuest. In Google Maps, cliccando con il pulsante del mouse e muovendo la mano, posso spostare il centro dell'area della mappa. C'è un tempo di reazione molto veloce, ma il tipo di movimento - muovere la mano come se stessi spostando un pezzo di carta in un raggio di luce - è meno astratto che in MapQuest, dove faccio semplicemente clic su una cornice o sulla mappa ( impostazione della modalità appropriata). Potresti dire che il clic è più veloce (set di abilità più piccolo), ma è più astratto, probabilmente meno divertente e decisamente meno accurato. Tutto ciò rende il lavoro con Google Maps (e il suo copycat) un'interattività più piacevole ed efficiente.
I sistemi stanno diventando più complessi e più integrati nelle nostre vite. Molti sistemi sono diventati completamente astratti e non è sempre positivo quando la complessità aumenta l'astrattezza delle informazioni. Ognuno di noi prima o poi si è imbattuto in schermi sensibili alla pressione. Questa è una forte diminuzione del livello di astrazione quando si interagisce con i dispositivi informatici.
Alcune tecnologie nuove e popolari stanno rendendo difficile per la nuova ondata di designer di interazione... Il mondo in espansione di segnali spaziali, RFID e altri dispositivi simili sta dando un balzo all'astrazione poiché semplicemente non esiste un'interfaccia diretta per interagire con tali dispositivi. È semplicemente impossibile per loro trovare metafore semplici ed efficaci per fornire agli utenti una comprensione del funzionamento di tali dispositivi, come le metafore che abbiamo scelto per il mouse.
spazio negativo
Tutte le discipline progettuali "corrette" hanno una nozione della forma dello spazio negativo. Nell'architettura e nel design industriale, queste sono cavità o spazi tra gli array. Nella progettazione grafica, questo è "spazio bianco" senza colore, linee o forme, come gli spazi bianchi su un foglio di carta stampato. Il sound design usa il silenzio, il light design usa l'oscurità.
Allora qual è la negazione dell'interattività?
Ci sono molti posti in cui può mancare "qualcosa", o, per essere più precisi, ci sono molti strati. Possiamo solo parlare di prestazioni del prodotto? Delle nostre azioni? A proposito dello spazio tra le parti d'azione?
Pausa– Un concetto molto chiaro del tempo in cui non vengono eseguite azioni relative all'interattività. Spesso l'interaction design cerca di colmare queste lacune, ma forse queste lacune sono utili.
fermati e pensa– Cosa fare se non vi è alcuna reazione dal sistema? Pensa a come ha fatto uno studente dello Swedish Interactivity Institute e ha inventato una "palla di pensiero". Se pensi poco, la palla rotola sempre più lontano.
Inattività- Non fare nulla, il prodotto non risponde all'azione, forse a causa della sua scorrettezza. Questa non è la stessa cosa di una pausa, poiché in questo caso l'inattività è una reazione all'azione e non un arresto nell'azione.
Mescolarsi nell'interattività
A differenza di altre discipline del design formativo, il design dell'interazione è molto complesso perché richiede altre discipline per costruire interazioni. Per questo motivo, l'interaction design è più simile a una coreografia. 8 o girare un film piuttosto che con la musica o la creazione di costumi. Gli elementi principali sopra elencati sono adatti solo per l'interaction design o sono stati ridefiniti esclusivamente per questo.
Ad esempio, l'utilizzo del colore come strumento estetico migliora o degrada il livello di interattività. In generale, nella maggior parte dei casi, è necessaria un'architettura dell'informazione per preparare le informazioni prima che venga creata l'interattività.
In definitiva, l'interaction design è la coreografia o la disposizione orchestrale di altri progetti formativi per creare un dialogo interconnesso tra le persone e i prodotti e i sistemi che ci circondano.
4 Come catturato in questo libro recente: Hannah, Gail Greet, Elementi di design: Rowena Reed Kostellow e la struttura delle relazioni visive , New York: Princeton Architectural Press, 2002.
8 Heller, David (NKA Malouf, David), "Estetica e design dell'interazione: alcuni pensieri preliminari". (iscrizione richiesta ACM) , Interazioni 12:5 (settembre-ottobre 2005): 48-50.
Di norma, per stimolare una persona che utilizza un prodotto, un servizio, un sistema, è necessaria l'opportunità di dare una risposta. Questa reazione dovrebbe essere misurata, con una comunicazione chiaramente definita, e, nella maggior parte dei casi, suscitare una risposta chiara e semi-prevedibile. E poi funziona.
Quanto sopra è una definizione di base di Interaction Design (IxD), che riunisce le tendenze generali delle definizioni fornite dal famoso designer Dan Saffer. 1 ) e Robert Reimann 2 ), così come l'Interaction Design Association (Interaction Design Association 3 ).
È anche molto importante notare che l'interaction design è un concetto completamente diverso da altri tipi di design. Questa non è architettura dell'informazione o design industriale. Inoltre non è un tipo di interfaccia utente. Il design dell'interazione non è una forma o una struttura, ma qualcosa di più effimero: riguarda più il concetto di "perché" e "quando" piuttosto che "cosa" e "come".
Per qualsiasi tipo di progetto, il primo compito è formulare ciò che viene chiamato basi o elementi di base. La creazione di tali concetti semantici fornisce:
- migliore comunicazione tra i partecipanti
- creazione di concetti estetici comuni
- migliori strumenti di apprendimento
- area di ricerca
Cosa sono i terreni?
La mia prima introduzione alle "fondazioni" è stata durante la preparazione del programma di design industriale al Pratt Institute di Brooklyn, New York. Il programma è stato creato da Roweena Reed Kostellow sulla base della sua filosofia educativa fondante (per maggiori dettagli vedere Elements of Design di Gail Greet Hanna - Elementi di design Gail saluta Hannah 4 ).
Secondo Costello, ci sono sei elementi che costituiscono le basi del design industriale: linea, illuminazione e colore, spazio, volume (dimensioni), spazio negativo (sfondo) e texture (superficie, trama). Mescolare e sperimentare con questi elementi è il cuore del design delle forme 3D. Gli studenti del Pratt Institute hanno imparato questi fondamenti durante un corso di un anno. Dovevano definire confini e dipendenze, discutere di astrazioni e progetti reali.
Dal momento che non sono l'unica persona che ha pensato a queste cose, si può presumere che tutti la pensiamo in modo diverso. Ad esempio, Den Saffer, nel suo libro Designing Interactions, ha un lungo capitolo in cui descrive gli elementi dell'interaction design: tempo, movimento, spazio, aspetto, consistenza e suono. Gli elementi di Den sono definiti da come posso chiamarli sul modulo per avere interattività, non da quale forma di interattività sarà o non sarà disponibile per me, tranne forse per un po'.
Se questi sono davvero motivi per l'interaction design, dovrebbero essere completamente astratti dalla forma e non avere attributi fisici.
Fondamenti dell'Interaction Design
Tempo
"Time" distingue il design interattivo da altri tipi. Questo è il guscio dei nostri concetti di interattività.
Ma il tempo non è l'unica base per l'interaction design. Ci sono così tanti aspetti correlati della manipolazione del tempo. E come tutti sappiamo, il tempo è relativo, esiste lungo molti assi nello stesso momento. Quindi ci sono tre fondamenti dipendenti dal tempo del design dell'interazione:
Ritmo
Il design dell'interazione consiste nel creare una narrazione, un cambiamento graduale nell'esperienza individuale pur rimanendo entro i limiti. Ad esempio, se utilizzo un client di posta elettronica, non vorrei assolutamente accendere i fornelli nel momento in cui scrivo una lettera.
La storia ha ritmo. Lo capiamo chiaramente quando guardiamo un film. Se il film è buono, non guardiamo mai l'orologio. Il ritmo fa anche parte del design interattivo, perché a volte potresti guardare l'orologio non per noia, ma perché vuoi vedere se riesci a completare il processo di "interattività" in tempo.
A mio parere, il ritmo nell'interaction design è spesso correlato a ciò che possiamo fare in un dato momento. Allo stesso tempo, non è sufficiente per me essere in grado di fare qualcosa, è anche necessario per me essere in grado di farlo prima di passare al passaggio successivo. Ad esempio, quando acquisto qualcosa, posso compilare un modulo molto grande che contiene tutte le informazioni su di me e controllare tutti i dati in una volta, oppure posso controllare i dati in parti, dividendo il processo di verifica in più.
Poiché la lunghezza totale dei campi è la stessa, anche il tempo per il completamento dovrebbe essere più o meno lo stesso in ogni caso, ma la sensazione del ritmo sarà diversa in ogni progetto. In generale, un modulo grande è più efficiente e uno diviso in blocchi è più gestibile.
Reazione
Il modo più semplice per definire il tempo nell'interaction design è il "tempo di reazione". Quanto tempo impiega il sistema per rispondere a un evento? Questo accade quando vediamo il cursore trasformarsi in una clessidra o nella barra di avanzamento ormai familiare e aspettiamo che il sistema risponda a noi, ma anche altri tempi di reazione sono importanti.
Un'azione che avviene in tempo reale (in modo sincrono) è connessa al momento corrente, mentre un'azione asincrona perde questa connessione. Poiché alcuni sistemi sono sensibili al tempo, è necessario sapere come tenere conto delle differenze in questi tipi di risposta.
Contesto
Ogni elemento di base, come il tempo, deve avere un sottoelemento - "contesto". Nel nostro caso, l'interattività del corso per una persona, questo significa che il design stesso non può essere considerato. Ad esempio, quando diciamo “tempo”, non possiamo progettare un'applicazione senza capire quanto tempo una persona può trascorrere a diretto contatto con il sistema.
Metafora
La metafora è un espediente letterario in cui un fenomeno o concetto ben compreso viene utilizzato per spiegare un altro concetto che è più difficile da capire, o quando è difficile spiegarlo in un altro modo. La natura virtuale dei computer richiede la ricerca di metafore "reali" per spiegare alla gente tutte queste cose nebulose. Che tipo e quante metafore usi influisce direttamente sulla qualità e sulla percezione emotiva del tuo prodotto.
L'esempio più ovvio di metafora è un'urna o un cestino (nel sistema operativo del tuo computer). L'idea è che i tuoi file siano in un "bucket" o "cestino" virtuale, quindi se commetti un errore, puoi scavare lì (oops!) e ripristinarli nella loro forma originale. E, naturalmente, puoi sempre "svuotare il secchio" rendendo il contenuto irrecuperabile. La metafora funziona bene per tutte le persone perché si collega in modo accurato e flessibile alla realtà.
Tutte le metafore non sono invertite. Ad esempio, abbiamo cercato di utilizzare il termine "rimuovere" per spiegare rapidamente come aggiungere qualcosa a un secchio oa un cestino. Ma, dopo tutto, non possiamo eliminare qualcosa in un vero cestino o un cestino della spazzatura, vero?
Ma a volte la metafora è troppo distante. Quindi ci permette di espandere i confini della nostra immaginazione. Se ho un taccuino, uno schedario, una casella di posta, un calendario e simili per lavorare comodamente sul mio schermo, posso chiamare le mie schede oggetti, utilizzare un blocco note, lasciare i miei messaggi nella casella di posta e contrassegnare gli appuntamenti sul calendario, a destra ? ?
Ma allo stesso tempo, le metafore servono meglio allo scopo se sono leggermente imprecise e l'utente stesso deve colmare il vuoto in base alla propria comprensione dell'argomento. Quindi, ad esempio, abbiamo adattato le metafore del desktop ai nostri computer moderni.
Il progettista dell'interattività deve raggiungere questo equilibrio utilizzando con attenzione le metafore dei suoi predecessori e costruendo su di esse, fintanto che la metafora originale (forse universalmente accettata) è in grado di resistere alle nuove correnti.
Astrazione
Lavorando in tandem con la metafora, l'astrazione si riferisce maggiormente all'attività fisica e mentale che è essenziale per l'interattività. Ho iniziato a pensare all'astrazione quando ho letto un articolo di Jonas Lowgren 7 , su quella che ha chiamato il termine "plasticità". Dopo aver letto questo articolo e aver usato il termine più volte in conversazioni e discussioni, mi sono improvvisamente reso conto che ciò di cui parlava Jonas era come l'astrazione nell'interfaccia sia la visualizzazione del prodotto.
In generale, tutto ciò che vediamo in un computer è inizialmente un'astrazione, poiché abbiamo due interfacce principali per un punto di input: un mouse e una tastiera. Alcuni posizionano il monitor all'interno di un tipo speciale di dispositivo di puntamento e abbassano il livello di astrazione per qualche tipo di interattività, principalmente per il disegno. Tuttavia, la maggior parte di noi usa le sequenze di tasti, puntando, facendo clic e spostando il mouse sullo schermo.
Concentriamoci sull'"allevamento dei topi". Stiamo guardando un monitor in cui il cursore (a forma di icona) si sposta in base ai movimenti del mouse. Senza guardare il mouse (di solito) lo spostiamo e, secondo la direzione indicata, si muove anche l'icona sullo schermo (di solito una freccia). Va bene, sistemiamo. A destra ea sinistra funziona come sembra, ma spostando il mouse "lontano da te" sposta il cursore in alto e "verso te" sposta il cursore in basso sullo schermo. Un'ottima metafora del concetto di prospettiva.
Quando portiamo l'icona sul bersaglio, facciamo clic con il pulsante del mouse. Questo è il più alto livello di astrazione. Il mouse, il monitor e il processore lavorano all'unisono e creano una serie di effetti che sono collegati a questi tre dispositivi. Ma la connessione è molto, molto astratta e deve essere studiata.
Esistono diversi livelli di astrazione nel comportamento del mouse. I miei preferiti per confrontare questo sono Google Maps e MapQuest. In Google Maps, cliccando con il pulsante del mouse e muovendo la mano, posso spostare il centro dell'area della mappa. C'è un tempo di reazione molto veloce, ma il tipo di movimento - muovere la mano come se stessi spostando un pezzo di carta in un raggio di luce - è meno astratto che in MapQuest, dove faccio semplicemente clic su una cornice o sulla mappa ( impostazione della modalità appropriata). Potresti dire che il clic è più veloce (set di abilità più piccolo), ma è più astratto, probabilmente meno divertente e decisamente meno accurato. Tutto ciò rende il lavoro con Google Maps (e il suo copycat) un'interattività più piacevole ed efficiente.
I sistemi stanno diventando più complessi e più integrati nelle nostre vite. Molti sistemi sono diventati completamente astratti e non è sempre positivo quando la complessità aumenta l'astrattezza delle informazioni. Ognuno di noi prima o poi si è imbattuto in schermi sensibili alla pressione. Questa è una forte diminuzione del livello di astrazione quando si interagisce con i dispositivi informatici.
Alcune tecnologie nuove e popolari stanno rendendo difficile per la nuova ondata di designer di interazione... Il mondo in espansione di segnali spaziali, RFID e altri dispositivi simili sta dando un balzo all'astrazione poiché semplicemente non esiste un'interfaccia diretta per interagire con tali dispositivi. È semplicemente impossibile per loro trovare metafore semplici ed efficaci per fornire agli utenti una comprensione del funzionamento di tali dispositivi, come le metafore che abbiamo scelto per il mouse.
spazio negativo
Tutte le discipline progettuali "corrette" hanno una nozione della forma dello spazio negativo. Nell'architettura e nel design industriale, queste sono cavità o spazi tra gli array. Nella progettazione grafica, questo è "spazio bianco" senza colore, linee o forme, come gli spazi bianchi su un foglio di carta stampato. Il sound design usa il silenzio, il light design usa l'oscurità.
Allora qual è la negazione dell'interattività?
Ci sono molti posti in cui può mancare "qualcosa", o, per essere più precisi, ci sono molti strati. Possiamo solo parlare di prestazioni del prodotto? Delle nostre azioni? A proposito dello spazio tra le parti d'azione?
Pausa– Un concetto molto chiaro del tempo in cui non vengono eseguite azioni relative all'interattività. Spesso l'interaction design cerca di colmare queste lacune, ma forse queste lacune sono utili.
fermati e pensa– Cosa fare se non vi è alcuna reazione dal sistema? Pensa a come ha fatto uno studente dello Swedish Interactivity Institute e ha inventato una "palla di pensiero". Se pensi poco, la palla rotola sempre più lontano.
Inattività- Non fare nulla, il prodotto non risponde all'azione, forse a causa della sua scorrettezza. Questa non è la stessa cosa di una pausa, poiché in questo caso l'inattività è una reazione all'azione e non un arresto nell'azione.
Mescolarsi nell'interattività
A differenza di altre discipline del design formativo, il design dell'interazione è molto complesso perché richiede altre discipline per costruire interazioni. Per questo motivo, l'interaction design è più simile a una coreografia. 8 o girare un film piuttosto che con la musica o la creazione di costumi. Gli elementi principali sopra elencati sono adatti solo per l'interaction design o sono stati ridefiniti esclusivamente per questo.
Ad esempio, l'utilizzo del colore come strumento estetico migliora o degrada il livello di interattività. In generale, nella maggior parte dei casi, è necessaria un'architettura dell'informazione per preparare le informazioni prima che venga creata l'interattività.
In definitiva, l'interaction design è la coreografia o la disposizione orchestrale di altri progetti formativi per creare un dialogo interconnesso tra le persone e i prodotti e i sistemi che ci circondano.
4 Come catturato in questo libro recente: Hannah, Gail Greet, Elementi di design: Rowena Reed Kostellow e la struttura delle relazioni visive , New York: Princeton Architectural Press, 2002.
8 Heller, David (NKA Malouf, David), "Estetica e design dell'interazione: alcuni pensieri preliminari". (iscrizione richiesta ACM) , Interazioni 12:5 (settembre-ottobre 2005): 48-50.
Dall'autore: L'anno scorso ha portato un'ondata di nuove tecniche, stili e tendenze, la maggior parte delle quali sono emerse per soddisfare le esigenze del mercato in crescita dei dispositivi mobili. I progressi tecnologici hanno cambiato le aspettative degli utenti per l'estetica e la funzionalità di siti Web e app. In questo articolo parleremo del design di siti web interattivi, ovvero le 5 tendenze principali del 2015.
Diamo un'occhiata ad alcune delle tattiche comuni descritte in Interaction Design Best Practices.
Inquadratura– Il modo in cui presenti determinate informazioni. Invece di mostrare che il pagamento con carta costerà di più, si potrebbe includerlo nel costo totale e presentare altri metodi di pagamento come scontati.
Ancoraggio– La linea di fondo è mostrare un prodotto più costoso sopra, fissando così il suo prezzo per lo standard. In questo caso, i beni più economici sembreranno molto più attraenti. Il metodo è particolarmente efficace se abbinato a sconti, quando l'utente vede chiaramente quanto può risparmiare.
Paura di perdere"Secondo i risultati dello studio, si è scoperto che l'istinto dell'acquirente di evitare il dolore è molto più forte dell'istinto di piacere dall'acquisto. Porre la domanda "Se non ti iscrivi, perderai $ 10" è molto più efficace di "Se ti iscrivi, risparmierai $ 10".
disavanzo Più piccolo è il prodotto, maggiore è la domanda per esso. Se dai un'occhiata più da vicino ai siti Groupon e Amazon, noterai come enfatizzano la scarsità dei prodotti per aumentare le conversioni.
Interfaccia invisibile
Un buon design non attira l'attenzione su di sé. Questo design funziona in background, dando agli utenti la sensazione che tutto ciò che hanno ottenuto sia dovuto solo ai loro sforzi. Di seguito ho presentato alcuni modi utili per consentire all'utente di interagire con il sito:
Ridurre e semplificare i passaggi: meno passaggi un utente compie per raggiungere un obiettivo, maggiore sarà il successo della tua interfaccia. I passaggi possono essere piccoli, ma anche se salvi l'utente da un clic in più, lo apprezzerà. Dai un'occhiata a come Uber (screenshot sotto) ha trasformato il processo in più fasi di aggiunta dei dettagli della carta di credito in un semplice passaggio.
Comunicazione visiva chiara: attenersi a un tema visivo coerente e icone generiche e chiare in modo che l'utente non si confonda (ad es. l'icona della posta indica l'elenco dei messaggi o la posta in arrivo).
Interfaccia tollerante - Anticipa gli errori comuni degli utenti e imposta i controlli di sicurezza appropriati. Queste misure includono annulla, salvataggio automatico, immissione di dati multiformato e feedback esplicativo.
Traccia il movimento dell'utente - Il modo migliore per identificare la ridondanza dell'interfaccia e i passaggi non necessari è visualizzare il movimento dell'utente all'interno del sito. Jessica Downey usa la sua "mappa tentacolare" come esempio per creare una mappa visiva che aiuti a organizzare correttamente le fasi. Ryan Singer di Basecamp ha escogitato un modo simile ma più veloce.
Significato degli spazi
Il libro "User Interface Best Practices in Web Design" dice che lo spazio vuoto non è sempre noioso. Gli spazi dovrebbero essere utilizzati come parte attiva del progetto. In termini di web design interattivo, gli spazi sono pause tra parole e frasi. Il riconoscimento e l'elaborazione degli elementi dallo schermo perde rapidamente il suo significato senza una breve tregua.
Di seguito ho raccolto un paio di suggerimenti sugli spazi bianchi da ricordare:
Gli spazi creano una gerarchia: più spazio vuoto attorno a un oggetto, maggiore è l'attenzione su di esso. Solo questo trucco può già aiutare i designer a influenzare la gerarchia visiva di ciò che vogliono guardare per primo.
Tendenze e approcci moderni nello sviluppo web
Impara l'algoritmo per una rapida crescita da zero nella creazione di siti web
Il minimalismo aggiunge raffinatezza – Riducendo al minimo il numero di elementi e aumentando lo spazio bianco, dai al tuo sito un'aria di eleganza e lusso. Questo approccio è spesso visto sui siti Web dei marchi di moda.
Lo spazio influisce sulla chiarezza: gli spazi bianchi non vengono utilizzati solo per gli sfondi: se metti tutto da parte e guardi il design a livello atomico, gli spazi bianchi possono migliorare o sminuire la leggibilità del testo. Nel nostro caso, la chiarezza si riferisce alla facilità di leggere lettere complesse in una parola. Segui questi suggerimenti per la spaziatura tra le righe e le lettere per assicurarti che il tuo testo sia leggibile.
Anche il testo dell'interfaccia fa parte del design
Sviluppando l'analogia dell'interazione dell'utente come un dialogo, possiamo dire che l'interfaccia dovrebbe scegliere le sue parole con attenzione. Tutto sullo schermo di un'app o di un sito Web è considerato un'interfaccia e il testo non fa eccezione. Se il significato delle parole scritte non corrisponde allo scopo del sito, anche il miglior font non aiuterà.
Non ti salverà il fatto che il tuo corpo del testo può assumere varie forme e dimensioni. Di solito, tutto il testo può essere diviso e modificato in categorie. Le parole di benvenuto possono essere casuali o amichevoli, ma il testo dell'invito all'azione sulla stessa pagina dovrebbe essere più audace e conciso. Indipendentemente dallo scopo del testo, i seguenti suggerimenti possono aiutare a trasmettere il messaggio giusto all'utente:
Conosci il tuo pubblico - Questo consiglio è vecchio come il tempo. Conosci i tuoi utenti e cosa vogliono che tu dica loro. Ad esempio, su un sito per bambini, parole o frasi possono essere ripetute per attirare l'attenzione, mentre su un sito legale questo approccio non è gradito.
Determina il contesto del tuo sito - Stai scrivendo per un sito web o un'applicazione? Pagina iniziale o pagina di descrizione? Proprio come hai modificato il corpo del testo per il pubblico, cambia il sito per l'ambiente di utilizzo. Se la tua app è progettata per l'uso in situazioni di occupato o fonte di distrazione (Waze durante la guida), la riduzione del testo accelererà l'elaborazione delle informazioni.
Mostra la tua personalità - Il tuo stile di scrittura contribuisce all'umore generale e all'atmosfera del sito tanto quanto un'immagine forte o un'animazione fluida. È necessario capire quali emozioni evocano determinati colori. Il testo non deve entrare in conflitto con l'interazione visiva.
Ottimo design
Ultimo ma non meno importante, un buon design interattivo è sempre bello. La connessione emotiva con gli utenti è il modo più affidabile per guadagnare fiducia. Quando si tratta di design, il cuore è importante tanto quanto la mente.
Utilizzando MailChimp come esempio, la finestra di conferma è una parte essenziale per coinvolgere gli utenti attraverso l'email marketing. Un'immagine divertente e un testo divertente non fanno che aumentare il divertimento nell'utilizzo del sito (per non parlare del fatto che questo approccio riduce il fastidio della spedizione di massa). Di seguito ho messo insieme alcuni suggerimenti rapidi:
Non sacrificare l'usabilità - Pensa al grande design come alla ciliegina sulla torta: la glassa diluisce il sapore della torta, ma di per sé non aggiunge nulla. Non sacrificare mai il design per la chiarezza.
Staccati dal familiare - Come ha detto Ben Rowe, il tuo compito principale è creare "delizia significativa". In che modo il tuo sito Web o la tua app possono portare le persone in uno stato in cui non c'è limite a ciò che possono fare?
Ricerca - Gli utenti adorano le sorprese. Micro-interazioni appropriate (come la dissolvenza delle animazioni quando l'utente ha completato un'attività) possono rendere le attività abbastanza comuni più emotivamente gratificanti. L'immagine seguente mostra come anche una semplice animazione in dissolvenza aggiunga divertimento alle azioni ripetitive.
