Do you need a UI if you have a CUI? - Chatbots as first-class citizens in software development 
Tags: chatbot, ui, ux, nlp
Published: 2020-05-16 18:53:10

Chatbots are becoming a common component of many types of software systems. But they are typically developed as a side feature using ad-hoc tools and custom integrations. <a href="https://xatkit.com/" target="_blank" rel="noopener">We </a>believe <strong>chatbot design should play a more central role in software development processes</strong>. Even more, we believe <strong>chatbots could be the one and only User Interface offered by those systems</strong>, becoming a fully-fledged front-end mixing textual and graphical user interactions.

The specification and implementation of the user interface (UI) of a system is a key aspect in software development. In most cases, this UI takes the form of a Graphical User Interface (GUIs) that encompasses <a href="https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html" target="_blank" rel="noopener noreferrer">a number of visual components</a> [6] to offer rich interactions between the user and the system.

The popularity of GUIs has resulted in a large number of GUI definition languages (e.g. <a href="https://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/" target="_blank" rel="noopener noreferrer">IFML</a> [2] is the latest standard) and run-time libraries for any imaginable programming language. Most non-trivial systems adhere to some kind of <a href="https://mdse-book.com/" target="_blank" rel="noopener noreferrer">model-based philosophy</a> [1] where software design models (including GUI models) are transformed into the production code the system executes at run-time. This transformation can be (semi)automated in some cases for improved production and code quality.

Nevertheless, these generators (the simplest example would be the scaffolding and CRUD-like functionality already available in many JS frameworks) are limited to “traditional” GUIs. The increasing popularity of Conversational User Interfaces (CUI)[8] has not yet impacted current software development processes. If a CUI is required, this is seen as a separate and ad-hoc project on top of the current system development.

Indeed,<strong> CUIs and GUIs are hardly ever regarded together</strong>, except for isolated experiments [7]. We believe this hampers the potential benefits of combining the best of both worlds. This is even more relevant now that CUIs are not limited to pure text (or voice) interfaces but are also incorporating some (so far still limited) visual components until now only typical of GUIs.

In fact, we think it is fair to wonder whether it still makes sense to have two separate UIs. <strong>Could these "rich CUI" (i.e. CUIs enriched with visual UI components) completely replace current GUIs?</strong> and offer a combined experience (where users would be both able to interact graphically with the UI components or address them via voice or text-based utterances and commands)?.
<h2>A new architecture for software development with Chatbots at the core</h2>
In this sense, at <a href="https://xatkit.com/" target="_blank" rel="noopener noreferrer">Xatkit</a>, we propose a new development architecture where chatbots are first-class citizens of the development process. They are designed together with the rest of the system (the database and backend services) and deployed as the only front-end the system offers.

Our vision is summarized in the above figure<a href="#page2">. </a>Action starts with the software designer specifying the models of both the front-end and back-end parts of the system at a platform-independent level. The difference is that now, <strong>the front-end is defined as a chatbot model</strong>. The chatbot model is composed of two different packages: the intent and the <a href="https://xatkit.com/chatbot-dsl-state-machines-xatkit-language/" target="_blank" rel="noopener noreferrer">execution models</a>.

<img class="alignnone wp-image-119207 size-full" src="https://xatkit.com/wp-content/uploads/2020/05/architecture-1.png" alt="Overview of a model-driven chatbot-based development architecture" width="1000" height="534" />

The intent model describes the user intentions, covering both textual and graphical intents, i.e. clicking on a button or choosing an option in a group of radio buttons are defined as additional intents the chatbot will recognize. <strong>For the textual intents, we define, as usual, the training sentences and matching conditions. For the graphical intents, we list the events offered by the visual components</strong>. In any case, for every matched intent the software designer explains in the execution model how the chatbot should react by calling, if necessary, a back-end service whose behaviour has also been defined as part of the complete software specification.

From those models, the actual system implementation, including the chatbot-based front-end, is generated and deployed for its run-time execution. Matching of textual utterances is performed, as usual, by relying on a NLP engine (potentially external, e.g. <a href="https://dialogflow.com/" target="_blank" rel="noopener noreferrer">Dialogflow</a>) to classify it. Different strategies can be envisioned to process the events stemming from the visual components but for homogeneity, we propose the following one: clicks, selections and, in general, any interactions with graphical components are translated into plain text strings and matched following the same process as we do for input utterances. The generated text could be the name of the graphical element (in the case of a button) or the selected option (for radio buttons, lists,..). This guarantees<strong> a uniform treatment of all user interactions with the bot</strong> (instead of having to maintain two different matching engines) and facilitates the reuse of existing chatbot technology. Once the matched phase is done, the runtime engine reacts according to the execution model and replies back to the user either with text or by presenting any rich UI component she should use in the next interaction.
<h2>Open Challenges</h2>
We believe this vision is feasible in the short/mid-term since many of the required technological pieces already exist but are not yet glued together. Still, <strong>a few important challenges must be solved.  </strong>We describe four of them, each one focusing on different aspects of the proposed architecture.
<h3>Chatbot Modeling and generation</h3>
On the one hand, a few chatbot frameworks come with Domain-Specific Languages (DSLs) to model bots at a higher abstraction level (see [4] as an example) but they only generate the chatbot layer, not the complete software infrastructure. On the other hand,low-code3tools generate the full system but mostly ignore any kind of chatbot capability or see it just as a dispensable and auxiliarycomponent4. Clearly, native integration of chatbot frameworks in current<a href="https://modeling-languages.com/big-five-bet-modeling-low-code/" target="_blank" rel="noopener noreferrer"> low-code tools</a> is required. This implies <strong>adding chatbot modeling primitives to the low-code languages</strong> (very <a href="https://modeling-languages.com/low-code-platforms-smart-apps-ai/" target="_blank" rel="noopener noreferrer">few low-code tools have some kind of chatbot support</a> right now) and extending current code-generators to automate the creation and deployment of chatbots and their interactions of such bots with the rest of the system so that they can be used as a replacement of the traditional GUI layer generated by low-code tools so far.
<h3>Backend integrations</h3>
The whole point of a front-end is to be the interface between the user and the back-end services she needs to execute. For a chatbot front-end to be useful, the chatbot needs to be able to interact with all kinds of back-end services and not just reply using predefined and hard-coded textual responses.

As such, chatbot frameworks should, at the very least, embed native support for interacting with backend services exposed as REST APIs [<a href="#_bookmark11">5</a>]. Other potential integrations could include GraphQL and asynchronous APIs. Custom integrations with specific customer stacks should also be possible.
<h3>A library of UI components for chatbots</h3>
In web development, there is a myriad of libraries with ready-to-use visual UI components. Initiatives like Web Components5 aim at facilitating their reusability in any specific front-end framework.

We would like to see a similar effort in the chatbots domain. Current chatbot frameworks either offer very limited components (mainly buttons) or force designers to write custom JavaScript code to build rich CUIs. These UI chatbot libraries should also be designed keeping in mind that not all chatbot deployment platforms offer the same capabilities (e.g. differences in messaging platforms).
<h3>Voice Support to interact with rich UIs</h3>
<strong>A chatbot-based front-end has the interesting side-effect to open the door to a voice interaction with the software system</strong> given that many chatbot frameworks embed some kind of predefined support for voicebots.

Still, voice assistants usually work best when the person employs full and correct sentences and/or a predefined set of known commands. Therefore, in order to successfully used voice to interact with the graphical components of the chatbot interface we would need to develop some specific commands (or "skills") for that.  This work could be built on top of the few initiatives that have explored voice commands to fill forms and other UI components [3,9]. This line of work would also favor the accessibility of the system itself.
<h2>Final Message</h2>
Given the growing importance of chatbots in all types of software systems, <strong>we propose to make chatbot development a key concern in all software development methods and tools</strong>. Not only as a complement of the "traditional" GUIs generated by those systems but even as their complete replacement thanks to the richer conversational user interfaces that chatbots can now offer.

We believe our view is feasible and would bring significant benefits to the software and CUIs communities. We plan to advance in this direction by tackling some of the challenges described above. Also, and to avoid reinventing the wheel we would like to bring to the world of chatbot design the lessons learnt in all these years of GUI development.

Feel free to start exploring the power of chatbots as front-ends by <a href="https://github.com/xatkit-bot-platform/" target="_blank" rel="noopener noreferrer">downloading and "playing" with Xatkit</a>, our open source flexible chatbot development platform.

&nbsp;

<strong>REFERENCES</strong>

[1] Marco Brambilla, Jordi Cabot, and Manuel 2017. <em>Model-Driven Software </em><em>Engineering in Practice, Second Edition</em>. Morgan &amp; Claypool Publishers.

[2] Marco Brambilla and Piero 2014. <em>Interaction flow modeling language: Model-driven UI engineering of web and mobile apps with IFML</em>. Morgan Kaufmann.

[3] Kian Kok Cheung, Edwin Mit, and Chong Eng 2010. Framework for new generation web form and form filling for blind user. In <em>2010 International Conference </em><em>on Computer Applications and Industrial Electronics</em>. IEEE, 276–281.

[4] Gwendal Daniel, Jordi Cabot, Laurent Deruelle, and Mustapha 2020. Xatkit: A Multimodal Low-Code Chatbot Development Framework. <em>IEEE Access </em>8 (2020), 15332–15346. <a href="https://doi.org/10.1109/ACCESS.2020.2966919">https://doi.org/10.1109/ACCESS.2020.2966919 </a>

[5] Roy Fielding, Richard N. Taylor, Justin R. Erenkrantz, Michael M. Gorlick, Jim Whitehead, Rohit Khare, and Peyman Oreizy. 2017. Reflections on the REST architectural style and "principled design of the modern web architecture" . In <em>Proceedings of the 2017 11th Joint Meeting on Foundations of Software Engineering, ESEC/FSE 2017, Paderborn, Germany, September 4-8, 2017</em>. 4–14.

[6] Jesse James 2010. <em>Elements of user experience, the: user-centered design for </em><em>the web and beyond</em>. Pearson Education.

[7] Johan Levin. 2019. <em>A chatbot-based graphical user interface for hospitalized pa</em><em>tients: Empowering hospitalized patients with a patient-centered user experience and features for self-service in a bedside tablet</em>. Master’s thesis. Chalmers University of Technology.

[8] Michael F. 2002. Spoken Dialogue Technology: Enabling the Conversational User Interface. <em>ACM Comput. Surv. </em>34, 1 (March 2002), 90–169. <a href="https://doi.org/10.1145/505282.505285">https://doi.org/10.1145/505282.505285 </a>

[9] S Parthasarathy, Cyril Allauzen, and R Munkong. 2005. Robust access to large structured data using voice form-filling. In <em>Ninth European Conference on Speech </em><em>Communication and Technology</em>.