在本文中，我將向您展示一項(xiàng)項(xiàng)目研究，它描述了一個(gè)B2B網(wǎng)站設(shè)計(jì)會(huì)話UI的完整過程，包括對(duì)話腳本的片段、通信理論的基礎(chǔ)和一些我認(rèn)為使這個(gè)項(xiàng)目具有獨(dú)特性的技巧和途徑。

開始

在2016年末。許多人說會(huì)話式用戶界面（UI）是網(wǎng)頁界面的未來。即時(shí)通訊程序（IM應(yīng)用程序）、聊天機(jī)器人、基于文本的用戶界面或表情圖片可能從未如此流行過。有人可能會(huì)說這只是另一種設(shè)計(jì)潮流，或者基于文本的界面并不是什么新東西，但坦率地說我們不得不承認(rèn)——隨著iPhone Messages，Slack或Facebook Messenger的出現(xiàn)，我們交流信息的方式發(fā)生了不可逆轉(zhuǎn)的轉(zhuǎn)變。如今，文字消息已經(jīng)成為一種非常自然的交流方式。

所以，當(dāng)我們有機(jī)會(huì)為我們的客戶設(shè)計(jì)一個(gè)會(huì)話式網(wǎng)站時(shí)，我們毫不猶豫便接了下來。

項(xiàng)目目標(biāo)

客戶：

CHop-Chop —一家網(wǎng)絡(luò)開發(fā)公司

我們在項(xiàng)目中的主要任務(wù)是：

• 設(shè)計(jì)一套完整的會(huì)話式用戶界面語言
• 創(chuàng)建一個(gè)會(huì)話腳本處理
• 處理最常見的會(huì)話隨機(jī)性類型（指的是類似于和諧文本使用的規(guī)則，如游戲溝通中常見的我***）
• 傳達(dá)品牌個(gè)性（也就是使用公司的品牌英雄人物Gody）
• 提高用戶（對(duì)話者）的好奇心和喜好（注：此處指用戶粘性）
• 展示公司網(wǎng)站的開發(fā)技術(shù)

我會(huì)告訴你我們是如何一步一步做的，但首先…

一點(diǎn)理論

讓我們從基礎(chǔ)開始。我認(rèn)為，有時(shí)在進(jìn)入更復(fù)雜的問題之前先退一步是很重要的。在這種情況下，它確實(shí)幫助了我們。不管你是否相信，只要閱讀所有這些基本定義，我們就可以看到一些創(chuàng)造性的解決方案，并推動(dòng)整個(gè)構(gòu)思過程。
我想你也不應(yīng)跳過這一部分。

溝通的原則

有數(shù)百種定義解釋了溝通。下面是我發(fā)現(xiàn)的幾個(gè)混合版本。

交流是分享有意義的信息的過程

信息（一般來說）可以是口頭的或非口頭的。

最常見的口頭交流工具是語言，它是一組用來組合可以轉(zhuǎn)化為意義的詞匯形式的信息的符號(hào)。

例如：你好；謝謝；你今天看起來不錯(cuò)

非口頭的相比之下，是指與文字不同的任何類型的交流。它可以是手勢，面部表情，語調(diào)，還可以是具有共同社會(huì)意義的行為或符號(hào)。

例如：

溝通是一個(gè)各方面都會(huì)互相影響的過程。這意味著溝通具有整體性，溝通的整個(gè)過程創(chuàng)建了一個(gè)系統(tǒng)，其中所有的元素（所有信息）一起為共同的利益而工作。

這些信息是功能性的，這意味著我們可以通過使用它們來獲得預(yù)期的效果，但也具有適應(yīng)性——這意味著，根據(jù)不同的情況，可以對(duì)它們進(jìn)行修改和調(diào)整，以獲得更好的結(jié)果。

最后，我們用來溝通的語言是基于通信代碼的，這是一套原則和表意。他們?yōu)槔斫獾於嘶A(chǔ)。這種通信代碼也稱為某種原則分為兩種:

1. 構(gòu)成性原則：指的是特定詞語的意義和含義，以及我們該如何解讀它們。此外，它們還告訴我們?nèi)绾卫斫馓囟ǖ纳舷挛闹械南ⅰ?/li>
2. 規(guī)范性規(guī)則：幫助根據(jù)給定的消息解釋來確定適當(dāng)?shù)姆磻?yīng)。換句話說，他們告訴我們在特定情況下我們應(yīng)該做（說）什么，不應(yīng)該做（說）什么。

當(dāng)然，最自然和最常見的交流方式之一就是對(duì)話。所以在討論會(huì)話用戶界面時(shí)，我想我們還應(yīng)該看一個(gè)對(duì)會(huì)話做定義的示例：

對(duì)話是兩個(gè)或兩個(gè)以上的人之間的談話，通常是非正式的談話

那么是否有可能在沒有強(qiáng)大的人工智能策略的情況下創(chuàng)建一個(gè)符合溝通原則的界面呢？

這就是對(duì)話式UI（CUI）的定義：

一種基于功能、自適應(yīng)和有意義的信息交換的整體系統(tǒng)的界面，在這種交流中，對(duì)話雙方使用和解釋語言代碼，以友好、非正式的方式維護(hù)和遵守構(gòu)成規(guī)范和規(guī)范性規(guī)則。

這是我們想創(chuàng)建的用戶界面

將理論付諸實(shí)踐 – 建立會(huì)話界面

定義目標(biāo)

B2B功能的聊天機(jī)器人有特定的功能。人們訪問這些網(wǎng)站是出于某種特定的原因，因?yàn)樗麄兿胍恍〇|西。這就像去餐館或者走進(jìn)實(shí)體店一樣。當(dāng)然，有時(shí)人們這樣做是因?yàn)樗麄儧]有更好的事情做，或者只是想自娛自樂，但總的來說，這背后是有目的的：點(diǎn)菜，買雙鞋或了解價(jià)格。另一方面，當(dāng)與客戶交談時(shí)，服務(wù)員或店員也有他們的任務(wù)和腳本。會(huì)話網(wǎng)站的工作方式也一樣，而聊天機(jī)器人的角色可以類似于店員或服務(wù)員。

在這種情況下，我們清楚地知道我們想要達(dá)到的目標(biāo)，因?yàn)槲覀兌嗄陙硪恢笔褂肅hop-Chop(實(shí)際上，我們在2010年就創(chuàng)建了它)，但是如果你需要幫助來定義聊天機(jī)器人 或用戶的目標(biāo)，你可以使用以用戶為中心的設(shè)計(jì)畫布。
我們?yōu)閏hatbot指定了以下目標(biāo)：

• 表達(dá)Chop-Chop的品牌個(gè)性
• 使用網(wǎng)站本身來彰顯網(wǎng)站網(wǎng)頁開發(fā)技術(shù)能力
• 向用戶提供關(guān)于Chop-Chop服務(wù)的信息
• 鼓勵(lì)用戶為網(wǎng)站添加標(biāo)簽
• 學(xué)習(xí)（采集）一些關(guān)于用戶信息（姓名，職業(yè)，電子郵件，電話）
• 幫助取得聯(lián)系（CUI作為聯(lián)系表格的替代方案）
• 鼓勵(lì)用戶注冊賬號(hào)

*注：CUI指馮諾曼依體系機(jī)構(gòu)Command User Interface 命令行用戶交互，是和GUI相對(duì)應(yīng)的一種說法。

第一部分.設(shè)計(jì)語言交流

建立對(duì)話腳本

交互設(shè)計(jì)師應(yīng)該能夠預(yù)測。在這個(gè)項(xiàng)目中，我們知道這是我們建立一個(gè)沒有人工智能支持的整體通信系統(tǒng)的唯一途徑。我們需要一個(gè)使用自適應(yīng)語法的優(yōu)秀對(duì)話腳本，這也將使會(huì)話愉快并有意義。

1.對(duì)話框

使用白板，我們從一個(gè)簡單的思維導(dǎo)圖開始。牢記聊天機(jī)器人的目標(biāo)，我們記下了所有可能的話題和會(huì)話部分。我們想快速檢查一下最終腳本的復(fù)雜程度。

寫對(duì)話腳本的早期階段

然后，我們劃分并安排了功能組的部分(我們稱它們?yōu)閴K)。我們已經(jīng)開始看到了一些模式。其中一些小組是與目標(biāo)相關(guān)的(我們稱之為核心)，其他小組則負(fù)責(zé)讓對(duì)話不那么官方(聊天)，而另一個(gè)小組為用戶提供了選項(xiàng)或額外的信息(附加信息)，并對(duì)用戶的反應(yīng)也有回答。最后，可以將對(duì)話快速跳過推進(jìn)到一個(gè)不同的腳本塊中。

腳本塊的最終列表：

• 開始腳本塊
• 附加內(nèi)容腳本塊
• 跳躍腳本塊
• 核心內(nèi)容腳本塊
• 會(huì)話形式腳本塊
• 結(jié)束腳本塊

簡單的對(duì)話框時(shí)間線的例子

當(dāng)然，最后的腳本結(jié)構(gòu)比線性框架要難得多?；趯?duì)話整體性的所有依賴和無盡的組合使整個(gè)事情變得異常復(fù)雜。

2.劇本

這是我們從項(xiàng)目一開始就一直在等待的時(shí)刻:我們終于可以編寫實(shí)際的對(duì)話腳本了。這部分很有趣，但也需要最大限度的關(guān)注。 把腳本分成塊，這樣就容易多了，因?yàn)樗械膶?duì)話部分都可以單獨(dú)編寫。

好的是 – 您需要編寫CUI腳本的唯一工具是筆和紙或文本編輯器。

以下是一些腳本塊的例子

開始腳本塊：

你好

我是Cody 我很期待和你聊天呢

你好，Cody

你今天怎么樣？

一般，馬馬虎虎吧

很糟呢，是吧？那個(gè)會(huì)發(fā)生…

附加內(nèi)容腳本塊：

我希望你不要介意我使用cookies

這些是什么？

我的早餐！

哈哈，多搞笑的笑話呀

cookies是由瀏覽器儲(chǔ)存的有關(guān)你的數(shù)據(jù)

聽起來令人毛骨悚然，但是,嗯…還好吧

好的

跳躍腳本塊：

你好！

你看起來很面熟，我們之前見過嗎？

是的

哈！我的記憶真好！

上次我們談到了Magento的發(fā)展，你想繼續(xù)我們的話題嗎？

我們繼續(xù)

核心內(nèi)容腳本塊：

介紹一下你吧

非常榮幸

你想知道我從哪來的嗎？聽聽我的故事？或者，也許我知道我該怎么辦？

你從哪來？

那么，我的想法來自用戶體驗(yàn)設(shè)計(jì)工作室The Rectangles但是，是波蘭設(shè)計(jì)師Jan Kallwejt給我穿衣服，做了我的頭發(fā)

會(huì)話形式腳本塊：

你看到在左上角的分享了嗎？

這些是什么？

如果你喜歡我們的聊天，把我介紹給你的朋友！我也樂意和他們交談

也許以后會(huì)

結(jié)束腳本塊：

我該走了！

按住?Cmd + D

哈哈！

你有收藏我嗎？

還沒

那就收藏吧!

好的，我該走了?讓我們保持聯(lián)系

拜拜，Cody！

3.語法

一個(gè)好的腳本應(yīng)該讓你創(chuàng)建一個(gè)不同的對(duì)話場景。如果對(duì)話以英語作為基礎(chǔ)則語法相對(duì)簡單，那就容易多了。但是，在許多語言中，您應(yīng)該能夠通過將一個(gè)詞替換為另一個(gè)詞來創(chuàng)建多個(gè)消息（詞組）的選項(xiàng)。此外，腳本設(shè)計(jì)師應(yīng)該能夠指定用戶的答案、選項(xiàng)等地方。

要?jiǎng)?chuàng)建這樣的腳本符號(hào)，您需要一組符號(hào):圓括號(hào)、括號(hào)、大括號(hào)，以及您和您的團(tuán)隊(duì)可以閱讀和理解的任何內(nèi)容。這對(duì)于將執(zhí)行腳本的開發(fā)人員來說也是非常重要的。他們也應(yīng)該能夠理解它。

在某些情況下，聊天機(jī)器人可以隨機(jī)從特定集合中選取一個(gè)單詞(你好;嗨,嘿）而且它也可以更智能化一些，并根據(jù)用戶的時(shí)間顯示一些情景化的消息(早上好;晚上好)。

以下是一組符號(hào)及其功能：

• { }大括號(hào)：定義一組選項(xiàng)
• | ?分隔號(hào)：分離集合中的選項(xiàng)
• ( )?圓括號(hào)：指定集合中與條件有關(guān)的選項(xiàng)
• [ ?]括號(hào)內(nèi)：表示用戶輸入

簡單的對(duì)話框時(shí)間線的例子

4.機(jī)器人信息

這次談話的視覺展示是這個(gè)項(xiàng)目最重要的用戶體驗(yàn)挑戰(zhàn)之一。下面是一些亮點(diǎn)。

單個(gè)語句與完整的段落

人們不會(huì)講段落。我們用單句說話。當(dāng)然，有時(shí)候這些單句也會(huì)串聯(lián)成很長的話，但在交談中，人們往往會(huì)輪流發(fā)言。此外，我們認(rèn)為，在回答之前顯示長段的用戶需要閱讀的文本，可以比作與一個(gè)語速很快的人交談。因此，我們決定顯示單個(gè)(短)句的組合，而不是段落。

用文本氣泡的透明度標(biāo)記以前的信息

淡出VS滾動(dòng)

顯示會(huì)話流程的最常見方法是不斷在舊的消息之下添加新消息，并讓用戶滑動(dòng)。

作為一個(gè)實(shí)驗(yàn)性的選擇，舊的消息可能會(huì)淡出，因此滾動(dòng)不再是必要的。我知道這樣的解決方案的可用性是值得懷疑的，但是從不同的角度來看——這樣的解決方案反映了對(duì)話的真實(shí)本質(zhì)。當(dāng)和某人交談時(shí)，你也不能一直隨時(shí)訪問所交換的信息。

用文本氣泡的透明度標(biāo)記以前的信息

此外，在某個(gè)時(shí)間點(diǎn)，你可以簡單地使用跳轉(zhuǎn)來詢問用戶是否想返回到任何前面的對(duì)話部分，或者顯示一個(gè)永久的“跳轉(zhuǎn)到”按鈕，當(dāng)點(diǎn)擊時(shí)，會(huì)觸發(fā)機(jī)器人返回任何過去的段落。

5.用戶消息（答案）

對(duì)于一個(gè)不使用人工智能來解釋用戶答案的會(huì)話用戶界面，這是編寫腳本時(shí)最具挑戰(zhàn)性的部分。腳本應(yīng)該讓聊天機(jī)器人提供有邏輯的答案(我們在這里稱他們?yōu)閷?duì)話者)給用戶(記住，構(gòu)成性原則和規(guī)范性原則)，但是更自然和更開放的對(duì)話，對(duì)對(duì)話者來說是更有趣的。

我們使用了兩種類型的答案：

A：定義（受控，封閉）

• 他們相對(duì)容易處理
• 他們需要良好的預(yù)測技能
• 用戶可能不被允許說出他們想要的

舉例定義的答案

B：未定義的（不受控制，開放式的）

• 他們更難以處理
• 他們可能需要一些預(yù)定義的字?jǐn)?shù)據(jù)庫進(jìn)行分析
• 用戶可以自然交流

舉例未定義的答案

也許沒有通用的方法來處理開放式的答案。我們不能假定人們會(huì)遵循通信代碼。一些未定義的消息將違反(特別是)規(guī)范性規(guī)則。當(dāng)然，有些用戶會(huì)說(寫)，因?yàn)樗麄儠?huì)和一個(gè)人類說(寫)，當(dāng)然，其他人會(huì)通過發(fā)送色情短信、咒罵或胡言亂語來挑戰(zhàn)你的機(jī)器人。

這里是一些提示如何控制未定義的消息：

• 輸入可以僅限于指定的一組標(biāo)志（例如，如果詢問名字，則只允許字母
• 正則表達(dá)式（regexp）可用于某些輸入（例如電子郵件）
• 使用最流行的發(fā)誓詞的數(shù)組
• （我會(huì)小心這個(gè)，但是）使用一些字典與API來檢查你所期望的答案是否真的是單詞
  當(dāng)然，一個(gè)理想的談話應(yīng)該是不受約束的，但是對(duì)于沒有AI支持的對(duì)話UI來說，一點(diǎn)控制是不可避免的。

還有一件事：

在使用定義的問題時(shí)，可以通過一個(gè)小小的改進(jìn)使答案稍微好一些。不要問這樣的問題：

沒有選擇的封閉式問題

像這樣問：

關(guān)閉選項(xiàng)的問題

這是純粹的心理學(xué)——在第一個(gè)例子中用戶可能擁有的無限選擇范圍其實(shí)是有限的，而在第二種情況下，你指定了這個(gè)范圍并給你的用戶一個(gè)選擇。在這兩種情況下，結(jié)果都是相同的，但是在后者中用戶體驗(yàn)更好。

6.感嘆詞，填詞，非詞匯對(duì)話的聲音

人們在說話時(shí)，含糊不清，會(huì)犯錯(cuò)誤，會(huì)猶豫不決，甚至?xí)ニ悸?。這是正常的。我們希望和聊天機(jī)器人聊天也很自然。所以我們也用了它們。

這里有一些流行的非語言對(duì)話的聲音：是啊，好吧，哦，哦，啊，嗯，嗯，嗯，呃，你知道，呃，

這里有一些流行的對(duì)話式的非詞匯語音（口頭語）：是的，好的，哦，噢，嗯，嗯，嗯，嗯，嗯，你知道，嗯。

對(duì)話式非詞匯語音的事例用法

相關(guān)閱讀

UI原則會(huì)話：網(wǎng)站聊天機(jī)器人設(shè)計(jì)全過程（下）

原文鏈接：https://medium.com/swlh/conversational-ui-principles-complete-process-of-designing-a-website-chatbot-d0c2a5fee376

本文由@百度UXC?翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自u(píng)nsplash，基于CC0協(xié)議