UX Design for AI Products

Zhaochang He
UX Collective
Published in
7 min readMar 29, 2018

--

As AI(Artificial Intelligence) become popular, I started to think about how to do to UX design for these types of products. As you may know, AI can process information as a human does, and here are some examples:

Text-based & Voice-based AI products

Gmail and Linkedin are using AI to help users with smart replies, pre-written and AI-based interactions; AI Chatbot is becoming increasingly popular as it can reduce customer support cost significantly, for example, Slackbot helps support users about how to use Slack; Also Google Home and Alexa are the most well-known voice-based AI products.

There are other AI products that’s based on images, such as face recognition technology that used by Facebook; some products are based on multi senses, such as Nest, which can record user input, detect user’s absence, and tell whom the user is. Here I want to just focus on the UX design for text-based and voice-based AI products, aka Conversational UX. I put some thoughts about what are the UX tasks to do to design this type of AI products.

First, define the personality of the AI bot

Artificial intelligence makes the machine speaks as human as possible. As a UX designer, we should give the bot a personality, imagine if this bot is a person, what does she/he looks like, what tone will she/he speaks. Drawing a portrait for this AI bot will be a good practice. The user may not actually “see” this human body, but she/he can get a sense of this “ person” during the conversation.

If you are designing an AI chatbot for educating math for kids, then the chatbot may look like a teacher who is very caring and patient, may wear a glass, speak in gentle and elegant tone. Or maybe he is a cartoon-ish character since this personality could be the one kids are more willing to talk to. He may speak in a playful tone, use easy to understand language, wearing colorful and fluffy clothes.

Here is a good example of bot personality: Mitsuku Chatbot is a very popular app that keeps a lonely people company. She is a cute girl with a side pony, she looks approachable and nice. I am pretty sure that people will more willing to chat with her instead of a 6 feet 200 lb man with scars on his face.

Design the activation experience

This design problem is more challenging for the voice device than the chatbot. How does the user know she has activated the device? The designer needs to define the activation words. Google home use “Hey Google”, “OK Google” as activation words, but “Hi Google” or “Hello Google” or “Aloha Google” doesn’t work. Then, think about what’s the visual/voice presentation of the device being activated. Google home light itself up when it is activated, sometimes with a voice reply saying “How can I help?”.

Other things to think about: how can we keep the conversation going without forcing the user to say that activation words again and again? In a natural conversation with your friend, you won’t keep calling her name during your chats, right? Because human knows how to pay attention to you, but the AI bot doesn’t, so it’s key for the designer to figure out how to tell the bot when to start listening and when to stop.

Google mini lights up to indicate it has been activated.

Design the starting point, and give clear options.

Google Assistant provides a good example of the starting point design, it gives 3 options for the users to try, at the same time it clearly lists out some of the things the chatbot is capable of.

When designing the starting point, think about what people may want to ask. For example, if people coming to financial service website to find out if they can get a loan, they probably want to get a quote of the interest rate, what are the loan options, what is the maximum amount of money they can borrow. Then the chatbot can provide 3 options: “Get a quote”, “How much you can borrow”, and “Loan options”.

Identify the primary engagement path

Context is King. Think about what are the contexts where the user will use your AI bot, and what are the scenarios will happen in that context. Analyze user needs in the scenarios, and furthermore, summarize the questions they may ask.

Scriptwriting- design the conversation

To be more specific about how to design a conversation UX, here is a nice example:

  1. Draw the Dialog flow:

Here is the dialog flow when the user asks about the traffic.

2. Summarize the Grammar:

Think about all kinds of way users may ask about the topic.

“How long does it take to drive home”

“How’s Traffic today”

“What’s the traffic to home”

“Do I need to take 101 today”

“What’s the best route to work today?”

3. Write up the Script based on use cases:

When writing the scripts, it’s important to identify what are the entities. <Place>, <Time>,<Traffic>

Such as:<Millbrae>,<Now>,<Traffic condition>

“There is light traffic at Millbrae now.”

“The traffic to home is heavy as usual, it takes about 50 min to drive.”

If a user asks “Hey, what’s the news today”. Well, it’s better to not read the whole thing on New York Times cause that’s too much. Here the designer needs to decide, in this context, what is the news that will likely bring interests to the user. Also, do we know about our user? Will he be more interested in sports news or political news? Do we have his location? If so, we can default to the most important local news of that day, and only read the headlines. Keep the text short and easy to understand.

For do or don’t, check out this good article about Alexa voice design best practices.

Does it need to add extra logic?

AI can make mistakes, it may not catch everything you say, and it might not be 100% correct. “Hey Google, turn off the bedroom light.” “Turn off” sounds very similar to “turn on”, and even human can hear it wrong. We may need to add extra logic to determine what does the user actually said. One thing we could do is: If the light is already turned off, we can make a guess that user probably wants to turn it on, and then made the bot to turn the lights on.

Role-playing — prototyping & user testing for AI bot

Role-playing might be the most easy and fun way to test your ideas. Use a messaging app and ask a friend to imagine that he is texting an AI bot, and you play that bot and reply the answers to him. You can have a pre-written scripts with you to see if the scripts are good enough to cover your friend’s questions.

Success matrix for AI design

Microsoft Cortana uses CPS(conversation per session) as the success matrix to measure the design, some chatbot may use Bot to Agent rate, meaning that all the tasks should be done within the chatbot and less percentage that the user needs to be transferred to a real person agent. I am sure there are other useful data points, but since AI bot is very smart and human-like, maybe it’s more appropriate to use a qualitative view to judge the design, such as how comfortable does user feel when chatting with the AI bot.

User Privacy V.S. Smart AI

AI is smart, it makes decisions based on what it knows about you. Sometimes this freaks user out. I remember when I was searching for the airport location, Google Map showed that I have a flight to LA at 2:30 pm at that airport. My reaction was “Holy cow, how does Google know about my flight?” Then I realize that Google Map probably grabbed that information from my Gmail booking confirmation. It’s important for designers to think about how do we protect user’s data so the user doesn’t feel that the AI tracks everything about them.

If you like the article, please give a few claps! Thank you!

--

--