Application Development

March 12 , 2024 by Deryk DeGuzman

I clearly remember the day I fell in love with UI development. It was 2002, and I, a college student, had just discovered a piece of software called Flash. Seemingly overnight, websites could be sensory experiences full of colors, animations, and sounds. Sites could be taken to the extreme, and it was all so wonderfully charming. Compared to the early internet, where websites were basically books with extra steps, I felt Flash was the future of web UIs, and that it was here to stay. But things, unfortunately, didn’t turn out that way. 

In hindsight, the excess with which a lot of developers would wield Flash made perfect sense, given the limitations of the web just a few years prior. New technology empowered new experiences, and developers ran with it.

When Web 2.0 began to surge around 2007, developers were once again quick to adapt. Web applications – complex sites enabling users to send and retrieve vast amounts of data at the click of a button – started finding their footing, and the internet would never be the same. The fact that some of today’s most popular websites (e.g. Facebook, Reddit, YouTube) were developed around this time speaks to just how influential this period was.

Today, we yet again find ourselves on the cusp of a major change in technology: Artificial Intelligence. After decades of us learning how to communicate with machines, they are finally learning to understand us on our own terms. And as they learn more, and do more work, there is a great opportunity to update how we interact with them. 

UI Design In The Age Of AI

If user interfaces are our means of interacting with machines, then the right user interface decisions can improve how they operate on our behalf. At Vectara, we’re passionate about UI, and we’ve identified four principles that we believe can take user interfaces in the right direction in this age of AI.

Principle #1: Self-Identification

Working with AI can sometimes be an overwhelming endeavor. With its ability to process massive amounts of information and produce outcomes faster than any human ever could, it’s no wonder the very existence of AI worries a significant part of the population. But arguably the scariest aspect of it is the moment a user questions the very nature of the entity on the other end of an interaction, unsure if they are communicating with a human or a machine. To address this, an AI application must always identify itself as such.

The following is a screenshot of Vectara’s chatbot widget. During development, we had a lot of back and forth discussions regarding how human-like the presentation should be. Originally, we leaned towards a chat bubble style, surfacing references only when asked for by the user. This lined up very well with the already human-like responses from our API. However, it wasn’t readily apparent that the user was talking to a machine. So in accordance with self-identification, we decided to explicitly present references from the get-go and leaned away from the chat bubble interface.

Chatbot Widget

Principle #2: Explainability

​​When the question of “Was this created by a machine?” is finally answered with a “yes”, another question inevitably follows: “How can I trust this information?” In a world where information is often colored by the personal biases of the information-giver, we as builders have the ability and responsibility to be completely transparent with our users. This is where the principle of explainability comes into play. Simply put, it is giving the user access to the data that supports the AI output.

You may have read recent stories about certain sales chatbots selling cars for absurdly low prices, or support chatbots inventing refund policies that were too good to be true. And while some of these incidents ended up being nothing more than funny stories, others had very real legal and financial implications. 

At Vectara, we ensure all responses are grounded in your data, and strongly advocate for all applications to place the basis for their responses front and center. While usability should take priority over other design factors, we’ve found that users generally benefit from a UI that explains how it arrived at its answer so the user can essentially check its work.

Check out the following screenshot of our AskNews demo application. In it, we surface two major elements to explain how our platform was able to return the user’s desired information: references and a confidence score. References are returned with all API responses to ensure that Vectara’s answers are supported by facts, and the confidence score (a feature in development) gives a high level indicator that the cited references were correctly interpreted by the LLM that generated the answer.

AskNews Demo Application

Principle #3: Simplicity

The principle of simplicity is all about providing the minimum required UI to achieve your user’s goals. Generative AI APIs can be tuned, but it isn’t necessary for the user to do this on the front end with a plethora of toggles and parameters. Arguably, it can even be detrimental to the whole experience, complicating the process between user input and application response. 

Below is a screenshot of Vectara’s search widget. Though our platform offers a number of ways to tune semantic search, we instead manage those parameters on the developer console, and opt to give end-users a streamlined experience.

Search Widget with English Query

To stress the importance of a streamlined interface in the presence of smarter tools, take a look at the same search, but in a different language. Normally, a search UI would surface options for selecting a language and other similar parameters. But in the world of AI tools, these are no longer necessary. In this example, searching for the same concept in Filipino (“pagtanggal ng dokumento”) yields the same results:

Search Widget with Filipino Search Query

Principle #4: Consistency

To help illustrate the principle of consistency, let’s take a look at two scenarios. In both of them, let’s imagine we’re sitting at a table across from a friend of ours.

Scenario A: We’d like our friend to recommend the best local pizza place. What action do we take?

Scenario B: We’d like friend to explain the theory of relativity. How would we get them to start explaining?

In both these situations, the answer is simple: we ask. We have a consistent initial action (asking a question), but the outcome it leads to is different depending on context.

As mentioned previously, machines are already learning to understand us, and making great progress doing it. So we should prefer reusing an existing UI whenever possible, relying on the platform to interpret our needs.

Below are screenshots for three different Vectara features: semantic search, summarization, and chat. Each feature is a clearly defined tool, with clearly defined output. And yet the user experience is generally the same across all three, chiefly relying on the simple text input field.

 

Search

Summarization

Chat

Looking To The Future

The landscape of AI is changing rapidly, and the principles presented here may no longer apply tomorrow, or even later today. But what is clear is that, as application developers, we have a responsibility to continue revisiting how our users interact with our products. After all, if harnessing the power of AI is a journey, then our end users’ experience is the last mile – and the trip is not complete without traversing it.

 

Interested in learning more? 

Sign up for a Vectara account and check out Vectara’s open-source UI tools:

1. React-Search – Add a Vectara-powered semantic search UI to your React applications with a few lines of code.
2. React-Chatbot – Instantly add a Vectara-powered chatbot to your React applications.
3. JS Widgets – Embed Vectara-powered widgets into any website or web app.
4. Create-UI – Generate a Vectara-powered sample codebase for a range of user interfaces.