Inspiration

Designing a conversational interface

4 min read
Tim Metz
  •  Dec 21, 2016
Link copied to clipboard

High on the list of 2016’s tech buzzwords: conversational. Some heralded this year as “the year of conversational commerce,” while others wrote extensively on the power of conversational interfaces. And then there are bots, bots, and more bots (which are, by their very nature, conversational).

But as 2016 draws to a close, most things we do are still not that conversational. Yes, you can order an Uber through Facebook Messenger. And Quartz’s app brings you the news in conversational format. Not quite the revolution we were promised.

In practice, it seems most of these instances of conversational interfaces are gimmicks, more tailored at generating marketing buzz than improving usability for the user. The user experience with these interfaces is often clunky, slow, and less intuitive than a traditional GUI.

Related: These 5 major UI mistakes will kill your app

Our conversational UI has had many iterations over the past year as we’ve learned how to improve the user experience. (In 2017 we’re planning to pull the UI off the top edge of the screen, as you can see.)

At Saent, we also added a conversational interface to our desktop application this year. We didn’t do it to follow the latest trend or garner press mentions. We pursued our conversational UI because we believe it’s the best way to fulfill our product’s purpose: help our users focus and live more balanced lives.

Our product managers, designers, and developers have been working with this UI for over a year now. Some aspects worked out as we expected, others didn’t. Below is an overview of the key things we’ve learned so far.

1. Multiple choice versus open input

Our interface mainly uses multiple choice options and clearly defined input boxes to guide the user:

Our current UI presents users will specific options. Here is the “start session” screen, which allows users to select specific amounts of time.

Some of our early design explorations did have a variation with an open text input field:

One early concept for our conversational UI allowed users to launch app features using a Spotlight-style open input box.

While we love the idea of the open text input field, we opted to provide users with a specific set of multiple choice options. That decision came down to usability and figuring out the best way to use the medium.

Open text input fields are like interactive movies in the 90s. The idea sounds great on paper—you are in control of what happens and can influence the outcome of the story!—yet it overlooks why people want to watch a movie in the first place: to relax and to not have to think. If they want interactive action, they can play a video game. Interactive movies never took off because they’re a misuse of the medium.

“UIs should always simplify choices for the user, not add to their burden.”

Twitter Logo

So it is with the open text input field. People already have lots of decisions and choices to make throughout their day. An open input field presents them with another huge challenge: What do I choose to do next, out of all the gazillion options modern work and life have to offer me?

We think user interfaces should always simplify choices for the user, not add to their burden.Twitter Logo By presenting a few, relevant options, instead of an unlimited choice in the form of an open input field, Saent becomes easier to use rather than creating further decision fatigue. Based on feedback and user numbers, we believe that choice was correct.

Smart versus consistent

With the previous idea in mind (presenting our users only with relevant options) we went a step further: What if certain menu options only showed up based on specific parameters?

For example, our early beta testers reported Saent’s Leaderboard sometimes became a distraction; they couldn’t stop checking it. While we were happy to find out the Leaderboard concept actually works, Saent should never be a distraction (we exist to help people focus!).

Related: The value of consistent design

So we started hiding the Leaderboard option if users had visited it in the past four hours. And we started doing similar things for other options: only show the Take a break button if the user had not taken a break for at least half an hour. Show Categorize (where users marked apps and sites as Good or Evil) only when the user visited a new site, and so on.

But it didn’t work out well.

Our users didn’t understand why a certain option would sometimes be shown and not at other times. But even more importantly, with constantly changing buttons, there was no semblance of anything close to a main menu (or “home base”).

“Treat the medium properly and choose the right UI for your app’s goals.”

Twitter Logo

Given that everything we’re doing is completely new (the concept of Saent, the hardware element, the conversational interface in the app), we learned this was too much for users to handle. Had we presented a familiar concept (e.g., a task management app) in a new way (e.g., using a smart and adaptive conversational interface) this might have worked, but in our case it was just too much new stuff all at once. We’ve since reverted back to one core interaction that always has the same buttons and resembles a main menu:

Providing users with a set of anchored, standard options—a “home” screen—creates a more consistent user experience.

Personality

Another important reason for us to implement a conversational UI was to give Saent a distinct personality. We’ve always thought of Saent as a person—a friend who is there by your side to help you do great work.

With our original, “normal” app UI, this was quite hard to pull off. We did try to put some conversational copy into the app, but it didn’t feel authentic:

The first version of the Saent app had little room for personality.

By making our new UI text-driven, and basing the layout on the familiar way messaging apps are structured (the “other party” on the left, the user on the right), users really do feel they’re in a conversation with Saent at all times. Users are also placed in a running conversation with that app. It doesn’t always have to be “push a button and go”—the conversational interface gives us the ability to have Saent react to things the user does, which can be deployed to keep people more engaged with the app. (It’s possible to take this idea too far, as we found—see the previous point.)

Even our rather clunky first try at a conversational interface revealed to us the power this type of UI has in forming personal connections between app and user.

Proof that this really works was revealed to us through a bug. At the end of a focus session, Saent either compliments you (in case of a successful session) or motivates you (in case of a failed session). However, in our earliest version, Saent was quite negative after failed sessions and would kind of scold users. Then we shipped a version where a bug gave this negative copy to users who had actually successfully completed their sessions. It didn’t take long for complaints to start pouring in. Many users were upset and talked about Saent as if it were a real person who insulted them!

Over the past year, we’ve experienced many more of such instances indicating the conversational, text-based format really is a great way to create personality within your app. It’s easy to continually add new copy to keep the conversation fresh, exciting, and surprising (or whatever your brand values are).

“A conversational UI gives your app a distinct personality.”

Twitter Logo

Development and UX design simplified

Since a conversational UI rests more on its copy than on its visuals, producing new interactions (and sometimes even entire features) is a lot easier than when everything is extremely visual.

In our case, we’ve developed a set of spreadsheet templates that we use to “design” new interactions and features. As you can see in the below example, the different columns exactly mimic the app:

The conversational UI allowed us to develop a standard design language that makes extending the app with new interactions and features through scriptwriting a simple process.

Each sheet represents a different step in the interaction, and buttons contain links to the relevant spreadsheets that represent the options presented by the buttons. This greatly speeds up development of new interactions, as the copywriter can work directly with the software developers, instead of having to wait for a visual designer in between. This frees up designers to spend time tackling more complex UI and UX issues.

While we haven’t gotten there yet, this idea can be taken one step further. We’re planning to translate the spreadsheet format to an in-app editor that will allow the copy writer or UX designer to instantly create new interactions using text and predetermined triggers without any need for software development.

Taken to its extreme, the user might even be able to add their own interactions at some point (e.g., use the editor to have Saent ask you a specific question in the morning, like “Did you brush your teeth?” if that’s of particular concern to you).

This ease of development is also presenting itself in the chatbot world, with the explosion of easy-to-use chatbot development tools. For app developers, a conversational, text-based UI can offer an invaluable level of speed and ease to push out new interactions and features, freeing your development and design teams to tackle larger issues and projects.

Ready for the future (AI + translations)

As you can see from the previous spreadsheet example, our conversational interface is currently still pretty dumb. It’s basically a long string of interconnected multiple choice questions, made slightly less dumb by certain parameters and “If… then…” statements.

Using our conversational interface, the Saent app of the future will be able to deliver highly personalized and intelligent experiences for our users.

Yet we believe our current conversational interface is the basis for an intelligent future. Without the user having to get used to any new features or interface conventions, we can hook up deep learning and natural language recognition to our interactions at some point in the future. Without changing much on the front end, Saent suddenly can become extremely intelligent in the back end.

Closer on the horizon is another practical advantage of the conversational UI: localization. We’ve set up the back-end database in such a way that we can easily add in translations to other languages. Since it’s all copy-driven, all we have to do is get a translator to go through all the copy and we can launch a localized version for a new country quickly and easily.

Conclusion

A conversational interface isn’t for everyone.Twitter Logo I personally don’t believe it works for news (scrolling and clicking headlines is simply faster), restaurant orders, and other interactions where there are lots of (fixed) options to choose from, and the choice is not too complicated. In such a case, scrolling through a (visual) overview of available options is much more practical, not to mention faster.

I’m also doubtful about open input fields that present the user with infinite choice, something that sounds great on paper (remember the interactive movie?) but in reality most people don’t like it. For that reason, and the fact that most of us are not longing for a return to MS-DOS, I’m also doubtful about chatbots being the future for mainstream users; most folks just don’t like to remember (slash) commands.

But there are settings for which a conversational interface is a great solution. It’s about treating the medium properly and choosing the right UI for your app’s goals.Twitter Logo In any setting where the user needs advice, assistance, encouragement, or motivation, a conversational interface is great. It provides room for creating a personality, you can take the user by the hand without making it feel condescending, and the interface can be made extremely intelligent based on the input the user is providing.

For us it’s been a rocky ride getting it right, but overall we’re happy with our conversational UI and are continuing on this path, whether or not it’ll remain a buzzword in 2017!

Want to try out Saent’s conversational interface? We’re providing exclusive access to the app for InVision Blog readers here.

Collaborate in real time on a digital whiteboard