Schede adattive per la progettazione dell'agente

Schede adattive sono un modo efficace per definire il modo in cui gli agenti presentano informazioni e interagiscono con gli utenti. Invece di basarsi solo su testo normale, gli agenti possono rispondere con schede interattive strutturate che presentano contenuto pertinente, raccogliere input e guidare l'azione, tutto all'interno del flusso della conversazione.

Le schede possono essere visualizzate in due modi:

• Autonoma: La scheda costituisce l'intera risposta dell'agente, completamente autonoma e con tutto ciò di cui l'utente ha bisogno per capire e agire.
• Associato a un messaggio: la scheda accompagna il testo prima o dopo di esso, in cui il messaggio fornisce contesto e la scheda gestisce la struttura, l'interazione o l'azione.

Basate su un formato JSON, le Schede adattive vengono visualizzate come interfacce utente native che si adattano automaticamente all'ambiente host, inclusi la modalità chiara e scura, le dimensioni dello schermo e le applicazioni di Microsoft 365 come Teams, Outlook e Copilot Chat.

Come progettista, è nelle schede che le tue decisioni hanno l’impatto più visibile sull’esperienza dell’agente. Le sezioni seguenti illustrano l'anatomia delle schede, i principi di progettazione e le risorse necessarie per iniziare a sviluppare.

Perché le Schede adattive sono importanti per la progettazione degli agenti

Quando un agente risponde, il testo semplice può fare solo fino a un certo punto. Le Schede adattive offrono agli agenti una presenza nella conversazione più ricca e più efficace, che appare intenzionale, strutturata e progettata, anziché semplicemente generata.

Come designer, le schede sono uno degli strumenti principali per definire il modo in cui un agente si presenta e interagisce con gli utenti.

Card ben progettate:

• Dare agli agenti una voce più ricca. Anziché restituire una parete di testo, le schede consentono agli agenti di individuare il contenuto in modo che corrisponda alla complessità delle informazioni, ovvero grafici per i dati, le immagini per il contesto, i layout strutturati per le risposte a più parti. La scheda influenza la percezione di utilità e affidabilità dell'agente.
• Ridurre l'attrito conversazionale. Invece di porre domande di completamento una alla volta, gli agenti possono usare input, elenchi a discesa e set di scelte per raccogliere tutto ciò di cui hanno bisogno in un singolo passaggio, mantenendo l'interazione efficiente e focalizzata.
• Esprimere il marchio e la personalità. Le schede ospitano l'identità visiva di un agente. Tipografia, iconografia, ritmo dell’impaginazione e tono delle etichette di azione contribuiscono a determinare se l’agente appaia come un assistente curato e affidabile o come un’aggiunta dell’ultimo minuto.
• Dare ai progettisti un posto al tavolo. Nelle esperienze degli agenti, la progettazione e la logica sono separate per natura, ovvero l'agente controlla i dati e le decisioni, ma si controlla il layout, la gerarchia e i modelli di interazione. Questa separazione è un'opportunità. Una scheda ben progettata può far sembrare anche una semplice risposta di un agente ponderata e intenzionale.
• Creare coerenza tra le superfici. Le schede vengono visualizzate in Teams, Outlook, Microsoft 365 Copilot Chat e altri host usando un linguaggio visivo condiviso, così che l'agente risulti coerente e riconoscibile ovunque gli utenti lo incontrino.

Anatomia della scheda

Schede adattive sono altamente personalizzabili, ma la maggior parte delle schede agente condividono un set di componenti comuni. La comprensione di questi elementi consente di prendere decisioni intenzionali sulla struttura, la gerarchia e l'interazione.

Alcuni principi da tenere presenti:

• Condurre con le informazioni più importanti. Le schede dovrebbero facilitare rapidamente le informazioni dettagliate e il completamento delle attività; devono indirizzare gli utenti a un modulo attività o all'applicazione completa per interazioni più complesse.
• Creare una gerarchia visiva. Usa dimensioni, colore e posizionamento del carattere in modo che le informazioni più critiche sono prominenti e facilmente scansionabili.
• Consentire la divulgazione progressiva. Condurre con il contenuto più pertinente e consentire agli utenti di scoprire di più in base alle esigenze; prendere in considerazione il testo troncato con le opzioni "Mostra più/Mostra meno" o sezioni collapible.
• Mantenere le azioni essenziali. Classificare in ordine di priorità le azioni che contribuiscono direttamente al completamento delle attività, ad esempio Invia per moduli di input, Approva/Rifiuta per i flussi di lavoro o Visualizza i dettagli per le schede di riepilogo. Progettazione reattiva. Le schede devono essere progettate per adattarsi a tutte le dimensioni e i contesti dello schermo. Il framework Schede adattive supporta quattro punti di interruzione reattivi, ovvero Wide, Standard, Narrow e Very Narrow, in modo da adattare i layout in modo efficace a contesti e dimensioni schede diverse. Per indicazioni sulla progettazione tra punti di interruzione, vedere Layout reattivo.

Per un approfondimento sull'anatomia, sulle procedure consigliate, sulle icone e sulle illustrazioni, vedere Progettare le procedure consigliate nel sito Schede adattive.

Esempi

Gli esempi seguenti illustrano la gamma di esperienze che è possibile creare con Schede adattive negli scenari dell'agente, da semplici elenchi di attività a flussi di lavoro di approvazione avanzati e visualizzazioni dei dati. Ogni esempio rappresenta un modello di layout diverso e un caso d'uso.

Cerchi un punto di partenza per i tuoi progetti? Microsoft Teams UI Kit e Microsoft Teams repository di esempi di schede adattive includono un'ampia gamma di modelli e componenti da compilare.

Inizia a creare

La sezione anatomia sopra riportata fornisce un modello mentale di come le carte sono strutturate. Quando si è pronti per approfondire l'esplorazione di modelli di layout, componenti, stili ed esempi reali, usare queste risorse:

• Schede adattive Designer, uno strumento basato su browser per la creazione di prototipi e il test dei layout delle schede in tempo reale senza scrivere manualmente JSON.

  La finestra di progettazione include modelli di scheda iniziale. La home page di Schede adattive presenta anche dei modelli. Usali come ispirazione o punti di partenza pratici per i tuoi disegni. Ogni modello include istruzioni nel file README del repository Microsoft Teams Adaptive Card Samples se si vuole lavorare direttamente con JSON.

  Annotazioni

  Impostare La versione di destinazione per eseguire il test sulla versione dello schema supportata dall'host di destinazione.

• Microsoft Teams UI Kit (Figma Community). Il kit dell'interfaccia utente di Teams include due pagine dedicate alle Schede adattive:

  • Schede adattive: Panoramica, procedure consigliate, schede di partenza, ispirazione e anatomia.
  • Card Design Toolkit: un sistema di design completo per la creazione di Schede adattive in Teams. Componenti modulari e con riconoscimento del tema che coprono tutto, dalle semplici notifiche alle esperienze reattive complesse, inclusi tutti gli elementi, gli input, gli stili, i colori e la tipografia.

• Schede adattive sito, riferimento autorevole per tutto ciò che riguarda Schede adattive. Le destinazioni principali per i progettisti sono:

  • Procedure consigliate per la progettazione: idee di layout, gerarchia visiva e cosa considerare quando si struttura una scheda.
  • Riferimento all'elemento: ogni elemento e tipo di input con esempi e linee guida.

Compatibilità dello schema e dell'host

Il supporto dello schema di Schede adattive varia a seconda dell'host. Progettare e testare la versione dello schema supportata dall'host di destinazione. Le schede che usano elementi dello schema non supportati potrebbero non funzionare senza segnalare errori o essere visualizzate in modo non corretto nell'ambiente di produzione.

Per eseguire il test su una versione specifica dello schema, impostare la versione Target in Schede adattive Designer prima di finalizzare il layout della scheda.

Contenuti correlati

• Strutturatore di Schede adattive. Strumento basato su browser per la creazione di prototipi e il test dei layout delle schede.
• Esempi di schede adattive per Microsoft Teams. Modelli di base per Teams e esperienze di Copilot.
• Microsoft Teams UI Kit. pagine di Schede adattive e del Card Design Toolkit.
• Procedure consigliate per la progettazione di Schede adattive. Idee di layout, gerarchia visiva e linee guida per la progettazione delle schede.
• Layout adattivo. Progettazione tra punti di interruzione.
• Schede adattive in Copilot Studio. Supporto dello schema, utilizzo del nodo di richiesta e messaggio e creazione di risorse.