Chatgebaseerde gebruikersinterfaces zie je overal in consumententoepassingen en zakelijke tools. Ze leveren snel kleine hompjes informatie af aan de hand van gebruikersvragen en met een groeiend ecosysteem aan virtuele assistenten als Siri en Cortana, én platforms als Slack, Messenger en Teams zijn zulke chatinterfaces aan het meegroeien.

Waarom Cards?

Nieuwe tools in de aankomende release van Windows 10 zorgen ervoor dat applicaties informatie kunnen toevoegen aan de feature Tijdlijn, waardoor je de context van eerdere interacties kunt bepalen. Hoogste tijd dus om even te kijken naar manieren waarop je deze features kunt toevoegen aan jouw applicaties.

Binnen een chatplatform stelt een gebruiker een vraag, waarna een NLP-tool de vraag interpreteert en een reactie kiest. Dat antwoord kan direct via een assistent worden afgeleverd, of via een bot in het platform zelf. Meestal worden in deze platforms tekstinterfaces gebruikt, maar dat is niet altijd de beste oplossing. Daar komen Cards van pas, die informatie in tekst of beeld bevatten en zelfs interacties mogelijk maken.

Open platform

Oorspronkelijk zijn ze ontworpen door Microsoft voor het Bot Framework en ontwikkeld om fijnere interactie te leveren voor platforms als Microsofts Teams. Adaptive Cards moet een open platform worden om informatie naar elke willekeurige chatgebaseerde applicatie af te leveren.

Het onderliggende ontwerp is logisch: zorg ervoor dat applicaties die content van de Cards bevatten kunnen beheren hoe deze informatie wordt weergegeven. Als een schrijver van een Card heb je de controle over wat er inhoudelijk in staat, maar niet op pixelniveau. Het resultaat is een formaat waar inhoud voorop staat en de applicaties interpreteren vervolgens hoe ze die inhoud moeten presenteren.

En dat is een kritiek punt, want iedereen gebruikt chatapplicaties anders. Sommige gebruiken ze op volledig scherm, op de smartphone, op de pc, of als smalle kolommen. Als developer heb je weinig vat op al die verschillende lay-outs en daarmee ben je beperkt in hoe je informatie in de clientsoftware kunt presenteren. Dat maakt een goede UI bijzonder lastig. Met een platform dat zich specifiek bezighoudt met het leveren van content, heb je minder zorgen én rijkere content dan enkel tekstgebaseerd.

Net als Markdown

Microsoft heeft hiervoor gekeken naar documentopmaaktool Markdown. De opmaak daarvan is simpel, met snelkoppelingen om headers, links en blokken code toe te voegen bij het schrijven van een document. Dat is expressief genoeg om standaardopmaakfeatures te ondersteunen: vet- en schuin drukken, afhandelen van lists en meer.

Met een soortgelijke aanpak voor het ontwerpen van Cards wil Microsoft bredere adoptie en ondersteuning stimuleren, net zoals het met Markdown verging dat nu als opmaak wordt ondersteund in de meeste documentatieplatforms.

Adaptive Cards zijn JSON-objecten. Als een chatclient een query indient bij je applicatie, kun je een reactie terugvoeren in de JSON-structuur van de Card. Omdat ze worden samengesteld uit vooraf gedefinieerde elementen, kun je een online editor gebruiken om ze samen te stellen en te testen - met ondersteuning om clientside opmaak te bewerken en verschillende versies van de Cards uit te testen.

Cards en renderers

De online editor maakt ze op voor Microsofts platforms: Cortana, Teams, Skype en het nu verschijnende Tijdlijn. Je kunt zien welke cardrenderers acties ondersteunen, zodat je Cards kunt ontwerpen die met zowel puur informatieverstrekkende als interactieve systemen werken.

Microsoft geeft ontwikkelaars tools om Adaptive Cards te ontwerpen die gebruikt kunnen worden in iedere compatibele chatapplicatie, en een set van renderers die gebruikt kunnen worden voor de hostende applicaties. Er is een webclient, maar er is ook Windows, Android en iOS-ondersteuning, waardoor je Cards kunt ontwerpen voor de meeste platforms waar gebruikers mee werken.

JSON en JavaScript

Je hoeft niet veel te programmeren met de renderers. Ze werken met de context van de bestaande schermindeling en hebben maar een paar acties: het aanspreken van een url met het JSON-object, het aanbieden van de Card aan de schermweergave en het weergeven van de inhoud.

Hoe toevoegen van de JavaScript-library Adaptive Card aan je applicatie is vrij simpel. Node-applicaties kunnen het via NPM binnenhalen en een standaard scripttag voegt het toe aan je HTML. Het renderen van een card is een kwestie van het aanspreken van de JSON en een handler toe te voegen voor acties die er mogelijk door worden uitgevoerd. Als de Card eenmaal door het script is gehaald, kan de renderingsmethode worden uitgevoerd en een DOM-actie worden gedaan om het toe te voegen aan het juiste stuk van de HTML.

Microsoft geeft handvatten voor de stijl van Cards in zijn library, maar er zijn genoeg opties om een eigen look & feel te maken. Een methode is bijvoorbeeld het aanpassen van het config-bestand waar de standaardlettertypes voor alle op het platform gerenderde Cards in zijn opgenomen ongeacht welke applicatie ze aflevert. Daarmee kun je de lay-out aanpassen, met uitlijnen van tekst, kleuren en kadering.

De voor de hand liggende methode om een webgebaseerde Card aan te passen is natuurlijk met CSS. Microsofts documentatie beschrijft de classes om elementen af te handelen en je kunt deze met je eigen CSS-definities overschrijven. Misschien wil je dat het naadloos wordt verwerkt in een chatbericht, of wil je juist dat het opvalt. Met CSS kun je verschillende formaten gebruiken voor verschillende Card-bronnen, met hun eigen class-intstellingen.

Voor complexere opmaaktaanpassingen is er een low-level register met gescheiden secties voor Actions en Elements. Je kunt hier Microsofts JavaScript overschrijven met je eigen, waardoor je complexere wijzigingen kunt maken in de lay-out en interacties. Als je je eigen renderers voor elementen van de Card gebruikt weet je zo zeker dat de jouwe als standaard worden gebruikt, waardoor je verwarring voor bijvoorbeeld agendaprocessen vermijdt.

Op weg naar standaard

Nu chatsystemen steeds gewoner worden, is het ook steeds belangrijker dat we kijken naar een standaardmethode om daarmee te werken. Hoewel Microsofts methode van Adaptive Cards misschien niet die standaard wordt, is het een goed begin.

De 1.0-versie van de specificatie en de client-side SDK's moeten helpen met het groeien buiten het Windows-ecosysteem en tegelijk chatleveranciers aansporen om een gemeenschappelijke standaard te definiëren die met een hele reeks endpoints werkt.