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

開始

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

所以，當我們有機會為我們的客戶設計一個會話式網(wǎng)站時，我們毫不猶豫便接了下來。

項目目標

客戶：

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

我們在項目中的主要任務是：

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

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

一點理論

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

溝通的原則

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

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

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

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

例如：你好；謝謝；你今天看起來不錯

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

例如：

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

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

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

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

當然，最自然和最常見的交流方式之一就是對話。所以在討論會話用戶界面時，我想我們還應該看一個對會話做定義的示例：

對話是兩個或兩個以上的人之間的談話，通常是非正式的談話

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

這就是對話式UI（CUI）的定義：

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

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

將理論付諸實踐 – 建立會話界面

定義目標

B2B功能的聊天機器人有特定的功能。人們訪問這些網(wǎng)站是出于某種特定的原因，因為他們想要一些東西。這就像去餐館或者走進實體店一樣。當然，有時人們這樣做是因為他們沒有更好的事情做，或者只是想自娛自樂，但總的來說，這背后是有目的的：點菜，買雙鞋或了解價格。另一方面，當與客戶交談時，服務員或店員也有他們的任務和腳本。會話網(wǎng)站的工作方式也一樣，而聊天機器人的角色可以類似于店員或服務員。

在這種情況下，我們清楚地知道我們想要達到的目標，因為我們多年來一直使用Chop-Chop(實際上，我們在2010年就創(chuàng)建了它)，但是如果你需要幫助來定義聊天機器人 或用戶的目標，你可以使用以用戶為中心的設計畫布。
我們?yōu)閏hatbot指定了以下目標：

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

*注：CUI指馮諾曼依體系機構Command User Interface 命令行用戶交互，是和GUI相對應的一種說法。

第一部分.設計語言交流

建立對話腳本

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

1.對話框

使用白板，我們從一個簡單的思維導圖開始。牢記聊天機器人的目標，我們記下了所有可能的話題和會話部分。我們想快速檢查一下最終腳本的復雜程度。

寫對話腳本的早期階段

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

腳本塊的最終列表：

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

簡單的對話框時間線的例子

當然，最后的腳本結構比線性框架要難得多?；趯υ捳w性的所有依賴和無盡的組合使整個事情變得異常復雜。

2.劇本

這是我們從項目一開始就一直在等待的時刻:我們終于可以編寫實際的對話腳本了。這部分很有趣，但也需要最大限度的關注。 把腳本分成塊，這樣就容易多了，因為所有的對話部分都可以單獨編寫。

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

以下是一些腳本塊的例子

開始腳本塊：

你好

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

你好，Cody

你今天怎么樣？

一般，馬馬虎虎吧

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

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

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

這些是什么？

我的早餐！

哈哈，多搞笑的笑話呀

cookies是由瀏覽器儲存的有關你的數(shù)據(jù)

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

好的

跳躍腳本塊：

你好！

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

是的

哈！我的記憶真好！

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

我們繼續(xù)

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

介紹一下你吧

非常榮幸

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

你從哪來？

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

會話形式腳本塊：

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

這些是什么？

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

也許以后會

結束腳本塊：

我該走了！

按住?Cmd + D

哈哈！

你有收藏我嗎？

還沒

那就收藏吧!

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

拜拜，Cody！

3.語法

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

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

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

以下是一組符號及其功能：

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

簡單的對話框時間線的例子

4.機器人信息

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

單個語句與完整的段落

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

用文本氣泡的透明度標記以前的信息

淡出VS滾動

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

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

用文本氣泡的透明度標記以前的信息

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

5.用戶消息（答案）

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

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

A：定義（受控，封閉）

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

舉例定義的答案

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

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

舉例未定義的答案

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

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

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

還有一件事：

在使用定義的問題時，可以通過一個小小的改進使答案稍微好一些。不要問這樣的問題：

沒有選擇的封閉式問題

像這樣問：

關閉選項的問題

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

6.感嘆詞，填詞，非詞匯對話的聲音

人們在說話時，含糊不清，會犯錯誤，會猶豫不決，甚至會失去思路。這是正常的。我們希望和聊天機器人聊天也很自然。所以我們也用了它們。

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

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

對話式非詞匯語音的事例用法

相關閱讀

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

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

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

題圖來自unsplash，基于CC0協(xié)議