{"id":4521,"date":"2016-11-15T11:01:27","date_gmt":"2016-11-15T11:01:27","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4521"},"modified":"2020-12-14T11:30:32","modified_gmt":"2020-12-14T11:30:32","slug":"technical-social-challenges-conversational-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/technical-social-challenges-conversational-design\/","title":{"rendered":"The Technical and Social Challenges of Conversational Design"},"content":{"rendered":"

I made my website conversational. Here is what I learned.<\/h2>\n

A while back, I ran an experiment on my website<\/a>. I made it conversational. The feedback, responses<\/a> and media coverage<\/a> have been absolutely amazing. I received over 300 emails within the first 24 hours.<\/p>\n

I was asked me to share my insights. Since this whole thing started as a conversation, I\u2019d like to keep it as one.<\/p>\n

So here we go. ????<\/p>\n

My mom always told me that nothing good comes out of fear and yet, fear is an incredibly powerful tool. It forces us to change and grow in order to overcome it.<\/p>\n

The idea of making my website conversational came from a simple question I shared on Twitter and LinkedIn a couple of weeks ago.<\/p>\n

\"What will you do once bots take over and designers are no longer needed?\"<\/em><\/span><\/p>\n

That was a bit of a joke question, but I didn\u2019t expect this simple and straightforward reply:<\/p>\n

\u201cFire you!\u201d\u200a\u2014\u200aRaphael Leiteritz, Director Product Management at Google<\/em><\/span><\/p>\n

Raphael is an incredibly nice person. He was obviously (hopefully<\/em>) joking and yet, his words made me think:<\/p>\n

How will designers like me fit into the conversational era?<\/em><\/p>\n

Perhaps more importantly, what impact will this have on the craft of UX design as a whole? Is this whole movement for big companies only or can anyone be part of it? Was the notifications hype<\/a> we saw during the last two years really about conversational interfaces all along? Question after question\u2026<\/p>\n

I decided to overcome my fear and get some hands-on experience. I turned my website into a chat. You can see it in action here<\/a>.<\/p>\n

<\/div>
<\/svg><\/div>

\"What will you do once bots take over and designers are no longer needed?\"<\/p><\/span><\/blockquote>\n

Spoiler alert: If you occasionally talk to yourself in front of the mirror, you will have a blast building your own chat bot.<\/em><\/p>\n

All right, let\u2019s start. Here are 9 insights I gained along the way\u2026<\/p>\n

1. Writing becomes more and more important to our craft<\/h2>\n

As I started this experiment, I thought I would probably spend the lion\u2019s share of time designing and programming. I was wrong.<\/p>\n

<\/div>
<\/svg><\/div>

\"Writing took significantly more time than both design and programming combined.\"<\/p><\/span><\/blockquote>\n

A crucial part of creating conversational experiences is the conversation itself. In other words\u2026 words<\/em>. So it shouldn\u2019t come as a surprise that writing is the most time consuming part and yet it did.<\/p>\n

I started drafting the conversation in iA Writer<\/a>.<\/p>\n

\"conversational

First drafts of the conversational experience<\/p><\/div>\n

I then developed a concept of \u201cconversation paths\u201d: A small portion of chat messages that can trigger another set of messages. Conversation paths allowed me to design and model most conversations I wanted.<\/p>\n

It was a good start. But it wasn\u2019t enough.<\/p>\n

2. Isolated messages don\u2019t feel human<\/h2>\n

When talking to a person in real life, the conversation\u2019s outcome\u200a\u2014\u200ato a high degree\u200a\u2014\u200adepends on how it started and how it evolved. In most cases, it\u2019s awkward to repeat a topic. Once you talked about the weather, you want to move on to more interesting topics and probably avoid the whole weather discussion altogether.<\/p>\n

In order to avoid repetition and robotic messages, I had to change the way I approached testing.<\/em><\/p>\n

Instead of simply ensuring that all the conversation paths would work from a functional perspective, I clicked through each one of them to make sure they also work from a social<\/em> perspective.<\/p>\n

I was surprised how much of a difference this made. I discovered lots of scenarios where the conversation didn\u2019t feel natural just because there were subtle repetitions or slightly odd connecting sentences.<\/p>\n

We can\u2019t think of conversations as isolated messages that we can stack on top of each other. We need to take into account the whole course of a conversation to make it feel natural.<\/p>\n

<\/div>
<\/svg><\/div>

\"We need to take into account the whole course of a conversation to make it feel natural.\"<\/p><\/span><\/blockquote>\n

3. Delightful details<\/h2>\n

Delightful details are about flirting with users.<\/p>\n

<\/div>
<\/svg><\/div>

\"Delightful details are about flirting with users.\"<\/p><\/span><\/blockquote>\n

Details in writing and the use of technology can make a critical difference between a conversation that feels lame and a conversation that sparks your interest.<\/p>\n

For example, refreshing the page changes what the bot says. Instead of just saying \u201cHi\u201d, it will now say: \u201cWelcome back! ????\u201d. It will even subtly change the conversation path\u2014 something I\u2019ll cover in more detail in the conversational context<\/em> learning.<\/p>\n

So what happened here?<\/strong><\/p>\n

When people noticed this for the first time, they understood that the bot was smarter than they thought it was. It changed the way they thought about the interface. They suddenly started wondering:<\/p>\n

What else can this thing do?<\/em><\/p>\n

When creating experimental interfaces, one thing is for sure: People will<\/em> fool around with it. One of my goals was to seamlessly integrate the classic contact form as part of the conversation.<\/p>\n

<\/div>
<\/svg><\/div>

\"When creating experimental interfaces, one thing is for sure: People will fool around with it.\"<\/p><\/span><\/blockquote>\n

Tapping on \u201cGet in touch!\u201d<\/em> let\u2019s the user type a custom message:<\/p>\n

<\/p>\n
\"conversation

Conversation history after tapping on \u201cGet in touch!\u201d<\/p><\/div>\n

<\/center>And that\u2019s where things got messy. Not only did many people want to talk dirty to my bot, many would also provide a wrong email address. I designed my bot to be helpful, not naughty. So I had to come up with something\u2026<\/p>\n

I started adding email validation: \u201cYour email reminds me of the poop emoji. Something doesn\u2019t feel quite right here\u2026\u201d<\/em><\/p>\n

<\/p>\n
\"email-form\"

Conversation history after writing \u201cYou suck\u201d instead of providing an actual email address<\/p><\/div>\n

<\/center>The conversational validation made people smile and tweet about it. They felt caught and probably thought \u201cDamn, I thought I would get away with some gibberish\u201d.<\/em><\/p>\n

The lesson?<\/p>\n

When people start messing around with your interface, you start messing around with people. It\u2019s natural, delightful and part of dating the user.<\/p>\n

I won\u2019t spoil the rest. Maybe you\u2019ll find some other hidden gems.<\/p>\n

4. Conversational context shapes topics<\/h2>\n
<\/div>
<\/svg><\/div>

\"Understanding context can greatly improve the way we initiate a conversation.\"<\/p><\/span><\/blockquote>\n

Imagine you\u2019re a designer going to a fancy cocktail party. You know most people there are designers too. Would this affect the way you start a conversation?<\/p>\n

For most people, it would.<\/p>\n

Instead of opening a conversation with \u201cHey, how\u2019s it going, are you enjoying the freshly made banana shakes?\u201d<\/em> you might say something like \u201cHey, are you a designer too or what do you do?\u201d<\/em>.<\/p>\n

The second conversation starter is contextual to the overall theme of the evening, whereas the banana one is more entertaining and less serious\u2014 especially at a fancy cocktail party.<\/p>\n

For most people, it\u2018s easier to start a conversation with a more rational question, even though the emotional one would probably leave a longer lasting impression. I\u2019m sure you had similar experiences at one of those \u201cnetworking\u201d events where the weather was the number one trending topic.<\/p>\n

So I wondered, how can I integrate the concept of a contextual conversation starter to the experience?<\/p>\n

Understanding context can greatly improve the way we initiate a conversation. When a person visits my website from Medium or Twitter, chances are much higher that they\u2019re interested in design. They might have come across a tweet, article or other reference on one of those platforms. I wanted to add this thought to the conversation:<\/p>\n

<\/p>\n
\"conversational-context\"

Conversational context<\/p><\/div>\n

<\/center>People who accessed my site from Kenny Chen\u2019s UX newsletter were also surprised as the bot started the conversation by saying: \u201cLooks like you\u2019re visiting from Kenny\u2019s awesome newsletter. You\u2019re probably in design too, right?\u201d<\/em><\/p>\n

This small adjustment didn\u2019t just improve the conversation\u2019s flow and make it more human, it also made some of its features more discoverable.<\/p>\n

More about this in the next section.<\/p>\n

5. The hidden \u201cspecials\u201d<\/h2>\n

My website can suggest UX articles in a Quartz-style interface<\/a>. But unless I know for certain that users are interested in UX, I will certainly not start bothering them with it.<\/p>\n

It would feel utterly strange. Like chatting up a complete stranger on the street and starting a debate about why we should ditch the hamburger menu in mobile design.<\/p>\n

Knowing that the user came from Medium, allowed me to seamlessly transition the conversation\u2019s topic by asking the user a contextual question:<\/p>\n

Are you perhaps in the UX field too?<\/em><\/p>\n

Answering \u201cyes\u201d<\/em>, makes the chat bot talk about recent UX articles including personal thoughts of mine. It will however never recommend the same article twice since we want to avoid repetition, right?<\/p>\n

<\/p>\n
\"article-discussion\"

Discussing an article in more detail<\/p><\/div>\n

<\/center>A more challenging aspect of this is to get out of the article discussions again. But that\u2019s for another time.????<\/p>\n

6. Timing changes interpretation<\/h2>\n

In my talk about meaningful motion<\/a> in design, I discuss how duration can change the way we feel about our actions, our environment and even our perception.<\/p>\n

But time transcends animation<\/a> or any other topic. Time is ubiquitous. Not surprisingly, it\u2019s also highly relevant in the field of social dynamics.<\/p>\n

Imagine you just met a person you really like. You exchange numbers and can\u2019t wait to meet that person again. When should you text that person? Should you text her immediately, or should you wait? But for how long?<\/p>\n

Time can work both in and against our favor. It\u2019s so subtle and elusive that it\u2019s hard to understand how it can impact and even change the meaning of our words.<\/p>\n

Let\u2019s imagine you just texted Anna:<\/p>\n

Hey Anna, it was really nice to meet you!\u200a\u2014\u200aBob<\/em><\/p>\n

Now\u2026 Which type of response do you appreciate more, an immediate response or a response within the next three days?<\/p>\n

No matter what your preference, one thing is for sure: response time will affect your interpretation<\/em>. While the instantaneous response will yield immediate positive feelings, the delayed response will include a magical additional ingredient: anticipation<\/strong>.<\/p>\n

Without going in to too much detail, anticipation and delay greatly impact our appreciation and the way we communicate. I believe there are four different stages of time gaps that are relevant for conversational experiences:<\/p>\n

<\/p>\n
\"conversation-momentum\"

Conversational momentum<\/p><\/div>\n

<\/center><\/p>\n

Instantaneous < 10 Seconds<\/h3>\n

You get the response straight away. It\u2019s the default in an ongoing conversation that\u2019s happening right now.<\/p>\n

Thinking > 30 Seconds<\/h3>\n

When a person takes a little longer to respond. For example, you\u2019re chatting with your boss and she texts you: \u201cWhy are you late today?\u201d<\/em>. You will take a couple of seconds to come up with a creative explanation before you start typing a response.<\/p>\n

If a conversational experiences indicates typing activity, lots of additional dynamics that exist in a real world conversations gets added. This dynamic is often lost in digital communication.<\/p>\n

Longer Break > 1 hour<\/h3>\n

This gap usually means that the person was interrupted and he or she will get back to you later. It communicates busyness and is a crucial tool in todays communication both in business and private life.<\/p>\n

Catching up > 3 days<\/h3>\n

When the conversation got lost and you either get back to the person apologizing for the delay, or by kicking off an entirely new topic.<\/p>\n

Due to the simplicity of my experiment, I only played with the first category. I added a typing animation which has a variable delay based on\u2026<\/p>\n