Introduzione alle Interazioni

La funzione Interazioni viene utilizzata per creare prototipi applicando l'interattività a qualsiasi oggetto di una pagina di Moqups.

Quando aggiungi un'interazione a un oggetto, rendi possibile che quell'oggetto risponda a una varietà di trigger mentre si trova in modalità Anteprima.

I due principali casi d'uso delle interazioni sono:

• Prototipi, dove le interazioni vengono utilizzate, durante la fase di progettazione e test, per imitare l'esperienza utente finale del prodotto sviluppato – che sia un'app o un sito web.
• Gestione dei Progetti, dove le interazioni vengono utilizzate per organizzare le informazioni collegando qualsiasi elemento individuale di un design, diagramma, storyboard, sitemap – o l'intera pagina stessa – a pagine successive. Questo aiuta i membri del team a spostarsi tra sezioni specifiche di un progetto complesso per visualizzare specifiche, note, requisiti o dettagli rilevanti.

Esistono due tipi di interazioni che possono essere applicate a un oggetto:

• Un'Interazione di Pagina viene utilizzata per la navigazione e collega oggetti designati ad altre pagine all'interno del progetto Moqups stesso, o a URL esterni al progetto.
• Un'Interazione di Oggetto viene utilizzata per imitare la trasformazione degli oggetti nella pagina – cambiare stati dei pulsanti, aprire menu a tendina, mostrare il menu contestuale al clic destro, aprire finestre di dialogo modali, ecc. – simulando il modo in cui un utente vivrà il prodotto finale.

Entrambe queste interazioni possono essere applicate a qualsiasi tipo di oggetto: Stencil, Icona, Immagine o Template.

Ma esiste anche un oggetto interattivo dedicato – chiamato Hotspot – che può essere utilizzato per designare aree specifiche di una pagina come interattive.

In questo articolo, ti mostreremo dove trovare il Pannello Interazioni e forniremo ulteriori dettagli su come le interazioni vengono utilizzate sia nella Prototipazione che nella Gestione dei Progetti. Spiegheremo anche come usare la modalità Anteprima per attivare le interazioni.

Poi, negli articoli successivi di questa sezione, spiegheremo come applicare le Interazioni di Pagina e le Interazioni di Oggetto, e come aggiungere Hotspot.

Pannello Interazioni

Per aprire il Pannello Interazioni, vai alla Barra Laterale Destra e fai clic sulla Scheda Interazioni. La scheda diventerà blu e aprirà il pannello. Lì puoi:

• Vedere tutte le interazioni che sono state applicate a un oggetto
• Creare una nuova interazione
• Aggiungere un hotspot

Negli articoli successivi di questa sezione, dimostreremo come usare il Pannello Interazioni per aggiungere sia le Interazioni di Pagina che le Interazioni di Oggetto. Ma, per ora, ecco un breve orientamento.

Una volta fatto clic sull'oggetto a cui desideri applicare l'interazione:

1. Scegli un Trigger dal menu a tendina superiore: Al clic o tocco, Al clic destro, Al doppio clic, Entrata del mouse, Uscita del mouse.

2. Nel secondo menu a tendina, seleziona un'Azione dall'elenco Interazioni di Pagina o Interazioni di Oggetto.

3. Imposta un Obiettivo, usando il menu a tendina o il pulsante con mirino, per selezionare un oggetto o una pagina come destinazione finale dell'interazione.

4. Fai clic su Fatto per applicare l'interazione.

5. Puoi usare l'Anteprima per vedere come funziona la tua interazione.

6. Puoi anche usare la sezione Hotspot qui sotto per aggiungere Hotspot.

7. La sezione Opzioni ti consente di controllare come vengono visualizzate le interazioni:

   • Mostra hotspot: Visualizza gli hotspot cliccabili in modalità di modifica.
   • Mostra indicatori di interazione: Aggiunge un badge luminoso agli oggetti con interazioni – nella pagina e nel Pannello Schema – quando sei in modalità di modifica.
   • Rivela obiettivo interazione: In modalità Anteprima, mostra un tooltip con l'azione e l'obiettivo quando passi il cursore su un oggetto.

Interazioni nella prototipazione

L'uso principale delle interazioni è trasformare i design in prototipi. Questo passaggio è spesso l'ultima fase del design di app e siti web prima che avvenga la codifica e l'implementazione.

Il processo di design tipicamente inizia con un diagramma che rappresenta il flusso utente, o con una sitemap per un sito web. Queste visualizzazioni aiutano a trasmettere idee astratte e generalizzate sul flusso di dati e sull'architettura informativa di un progetto.

E, man mano che vengono aggiunti più dettagli, quei diagrammi generano storyboard. Gli storyboard sono visivamente più ricchi dei diagrammi e possono aiutare a trasmettere i dettagli specifici delle schermate e del loro flusso di navigazione.

Poi, ogni elemento di quegli storyboard si trasforma in pagine proprie – contenenti wireframe o mockup più dettagliati che rappresentano il design di quella schermata o pagina web.

Un wireframe o mockup diventa finalmente un prototipo quando viene aggiunta l'interattività a quelle singole pagine. L'aggiunta dell'interattività significa che, prima che venga eseguita qualsiasi codifica reale, il design può imitare il prodotto finale rispondendo all'input dell'utente sotto forma di clic, hover (entrata e uscita del mouse), selezione di elementi e navigazione tra pagine.

Anche se un prototipo non è in produzione o pienamente funzionale, le interazioni imitano abbastanza dell'interfaccia utente finale in modo che tutte le parti interessate possano avere un'idea dell'esperienza utente definitiva. Designer, sviluppatori e product manager possono iterare liberamente, testare diverse versioni – e soprattutto, costruire consenso prima che il prodotto finale entri nel ciclo di produzione.

Quando la fase di prototipazione e test è completata, il design viene consegnato agli sviluppatori, dopodiché qualsiasi modifica al design diventa costosa e laboriosa. Usare un prototipo per visualizzare in anteprima l'esperienza utente – prima ancora che gli sviluppatori inizino a scrivere il codice – può far risparmiare al tuo team tempo, denaro e frustrazione.

Interazioni nella gestione dei progetti

La funzione Interazioni, e in particolare la sua capacità di fornire collegamenti e funzionalità di navigazione, ha molti usi oltre alla Prototipazione formale nel flusso di lavoro del design. Molti utenti – tra cui Analisti di Business, Architetti di Sistema, Product Manager e Sviluppatori – usano Moqups come spazio creativo condiviso in cui tutte le parti interessate possono collaborare e costruire consenso.

Per tutti i tipi di lavori di design e gestione del prodotto, Moqups può essere utilizzato per creare progetti rapidi e specifici per problemi, o per costruire progetti su larga scala con più utenti e decine – o addirittura centinaia – di pagine. Ma, indipendentemente dalla scala del progetto, hanno tutti diverse esigenze in comune:

• Organizzare informazioni complesse, in una varietà di forme, e aggiornarle in tempo reale
• Fornire accesso a un'ampia gamma di parti interessate per creare, modificare e commentare contenuti
• Visualizzare requisiti, trasmettere contesto e comunicare specifiche chiare

In genere, uno di questi progetti può includere diagrammi di flusso, storyboard UX, sitemap, mappe mentali, organigrammi, casi d'uso e diagrammi di architettura dell'informazione – insieme a wireframe, mockup e prototipi.

Con la funzione Interazioni, puoi collegare tutti questi elementi tra loro e abilitare la navigazione istantanea all'interno delle pagine del progetto Moqups stesso, o oltre Moqups – verso Google Drive, Dropbox, Slack, Trello o qualsiasi URL. Le interazioni possono anche essere utilizzate per applicare Interazioni di Oggetto, dove necessario, per dimostrare requisiti o specificare elementi di design.

Ad esempio, in un singolo progetto Moqups, potresti avere un diagramma di flusso di lavoro che mostra il processo di sviluppo di una nuova funzionalità per la tua app. Con le interazioni, puoi rendere interattivo ogni elemento del diagramma in modo che, quando i membri del tuo team ci fanno clic, vengano reindirizzati a una nuova sezione del diagramma, a una pagina completa di dettagli di design o a una posizione esterna rilevante. In questo modo, puoi assicurarti che ogni membro del team conosca il contesto esatto del proprio compito e che abbia tutte le informazioni necessarie per eseguirlo rapidamente, in modo indipendente ed efficace.

In questo tipo di progetto, tutte le parti interessate possono navigare, creare, verificare, commentare e contribuire. E, soprattutto, possono aggiungere i propri collegamenti, sia interni che esterni, per fornire requisiti aggiornati e un'unica fonte di verità.

Usare la modalità Anteprima per attivare le interazioni

Le interazioni sono progettate per essere aggiunte agli oggetti in modalità di modifica, ma vissute in Modalità Anteprima.

Passare all'Anteprima attiverà tutte le interazioni del progetto in modo che simulino l'interattività del prodotto finale, una volta che è stato sviluppato.

Leggi di più sulla Modalità Anteprima qui.