635 Followers
·
Follow

Image for post
Image for post
https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=2ahUKEwjkz4TX9ePYAhVMlZQKHRWgD2kQjxx6BAgAEAI&url=https%3A%2F%2Fbons.ai%2Fblog&psig=AOvVaw3MD5D8QlM2I3E0HdgOQ2Ba&ust=1516447314889032

日前有許多開發者嘗試AI導入的產品,其中以聊天機器人為主體的框架最為常見。我也曾經絞盡腦汁地將這類新穎的設計模式套用到應用裡,於是有了由外而內的開發流程:

→聊天機器人近期很熱門,競爭者也在做,我們也趕緊做一個吧?

→有什麼場景是可以讓機器人出現的?機器人能做些什麼?

→試試用聊天介面來取代現有設計?

→真的有比較好嗎……??

這也造成一些問題:我們的用戶真的需要這樣的框架和功能來服務他們嗎?有解決現有問題並處理得比其他方式還要好嗎?我反覆思索,加上用了些還不如別出現的智障型機器人(包括我自己曾想過的),讓我更堅信服務不該只是以噱頭為開發重點,一切應回歸到以用戶為中心的設計思考。以下分享近期負責智能相關項目的工作心得。

#設計研究 Design research

  1. 定義問題 Problem statement:用戶面臨的[問題]?底層的需要是什麼?
  2. 分析需求 Requirement analysis:基於用戶痛點有什麼樣的[需求]?
  3. 設計目標 Design goal:為了滿足這些需求,應訂定什麼樣的[設計目標]?
  4. 設計範圍 Design scope:基於某些限制,應從哪部分[範圍]先動工?
  5. 設計方法 Design approach:有什麼[方法]是可以嘗試的?
  6. 設計標準 Design criteria:有哪些質性/量化的調查結果來支持需求假設。

#解決方案 Problem solving

基於解決用戶核心問題為前提進行腦力風暴,此時是注入AI的好時機,在腦力風暴期間想想幾個問題:

  • 用戶需要什麼AI功能?可以用其他方式解決嗎?
  • AI有利於用戶的3個理由?
  • 你真的需要告訴用戶該產品是“AI驅動”嗎?
  • 如果是的話,你如何能夠清楚、簡單、可信的傳達AI這一概念?
  • AI能夠提供多大的直觀性、透明度和可控範圍?
  • 更多請參照 [Ref:9個關於用戶體驗的新玩法 #9]

體現智能的方式有很多種,聊天機器人只是其中一項手段,另外還有人臉識別、語音識別、機器學習等技術等著設計師去挖掘。貿然從機器人框架出發卻未考慮痛點的設計,有如美輪美奐卻搖搖欲墜的房子,禁不住長期風吹雨打,多少機器人風光上線卻在低持續使用率的情況下銷聲匿跡。

#場景 Scenarios

用戶動機至關重要,是故事的源頭,以及想往哪裡去?最終想達成的任務?

了解用戶在故事線中的動機與最終目標,預想哪些動作是能為用戶省下的,在用戶提出要求前,便將所需要的呈現出來,AI為這項工作上提供不少新的解決方案。

確立將使用何種AI技術做服務之後,便可著手構建場景,這個場景將帶給人們驚喜與未來感,提供不同於傳統的體驗。有時基於市場、政策、技術、以及時間等因素,無法如想像中完美,此時須做取捨並決定哪些場景是產品的黃金路徑(Golden path)尤為重要,此路徑體現了產品的核心價值,以及最頻繁被操作的任務。在設計細節尚未清晰前,我們會採用Balsamic Mockups來做Storyboard,用以勾勒故事的輪廓,檢視場景是否合理。

#提案 Proposal

確立場景後,開始著手交互細節。

某些情況下,用戶並不習慣過於”智能“,他們更想保有一定的控制權,自行決定觸發時機,以此可以提供由消極到積極的方案:

  • Option 1: 無自動。全權由用戶自行控制,不帶任何自動化。
  • Option 2: 半自動。由用戶自行觸發部分,其餘由系統自動完成。
  • Option 3: 全自動。大部分操作由系統自動完成。

不同提案間須保留差異點,避免過於相似的option拆解為不同方案,與PM討論時盡量將提案濃縮到3個左右,參與人員能清楚的對各個option間的細節做排列組合,讓下一輪的修正方向更清晰。

//如何向PM發表設計提案//

為避免主觀的意見在當中,讓PM明白設計提案具有相當的研究依據,我們會依照以下框架來陳述設計理念:

  1. 已知及未知的 (數據/用戶反饋/其他用戶研究資料)
  2. 設計假設 (產品策略/競品分析/用戶行為分析)
  3. 問題陳述 (用戶面臨的問題/目前用戶採用的解決方式/我們的解決方案/此方案能帶能的好處)
  4. 設計原則
  5. 設計提案 (3–4個,為每個提案命名吸引人又能體現概念的名字)
  6. 各提案優缺點分析
  7. 下一步計劃

#原型製作與測試 Prototyping & Usability testing

開發團隊常陷入理當如此行的思維,沒意識到用戶對產品並不熟悉。為讓團隊了解真實情況,透過製作原型並使用性測試來驗證用戶的心理模型是否與設想中一致。

#迭代 Iteration

永遠沒有最終最佳的方案,設計師須敏銳的隨著技術推進調整設計方案,萬變不離其宗的是不忘記從用戶中心出發,即便需考慮產品推廣面,最終還是要回頭耕耘用戶體驗,照顧新用戶及老用戶的需要,才能讓產品走得更遠。

附錄-設計工具:

#Paper&Pen #Post-Its #Keynote #Balsamic Mockups #Sketch


Image for post
Image for post

Entertainment News Bot _ Designed by Siyi Wu_ 2016.6

[前言] 此紀錄為前一階段的設計研究驗證,其中細節尚未成熟,僅作為此過程的暫時整理。

当我们热衷于追踪某个人物或活动时,常因为无法得到来自各处的实时消息而错过相关的活动,这个问题的源头,是当我们接触到新闻媒体时,会接收到我们感兴趣的内容,进而产生动机,而因为好奇心的驱使,用户会开始搜集与新闻相关的人物信息,也许是影视或体育明星、或是其他领域的名人,但是经由观察发现,相对于提供相关的详细信息,浏览器在”主动推播” 的功能上稍显不足,对于想要得到实时消息的用户,往往会在”追踪”阶段得不到好的体验。 所以,我根据”搜集”及”追踪”这两个用户旅程上的痛点做改变。

Image for post
Image for post

根据”追星”主题,我访谈有5年影视经验的朋友,了解演艺圈的生态以及各种角色的需求,本次设计由一般民众为出发点,将用户分为两种,1)初次接触,2)重复接触。 所以在架构上,特别强调“用户分众”与“内容分众”,因为对于初次接触的用户而言,他需要了解的是名人的基本数据以及代表作,但对于已持续追踪名人一段时间的用户而言,更重要的是能随时掌握动态的”实时推播”功能。 另外一个重要功能是”内容评价机制”,用来让使系统理解用户喜好,并进一步统计趋势及调整推播给用户的内容。 在这个设计上,我将采用的是聊天机器人搭配聊天接口的方式来提供服务。

Image for post
Image for post

实时信息推播:

用户开启对谈,系统会请求用户以社群登录来汇入用户数据,并在on-boarding阶段提供快速选单供点选,接着用户依照自身对名人的了解程度选择路径,系统会给予初次接触的用户基本数据(ex.维基百科or百度),对于重复追踪名人的用户,系统则会实时推播个人化的信息。 另外,用户也可邀请朋友一起加入名人的讨论组,系统一样会透过对话的过程理解各群组的喜好来推播更精准的信息。

内容评价机制:

用户也能评价bot推播的文章,选择推荐或不推荐,系统会统计用户喜爱的内容,并把数据提供给影星及影视公司供评估推广的经济效益。 并调整推播给用户的内容性质比例,淘汰不适当的内容。

Image for post
Image for post

这里将传统的登录流程转化成聊天的方式进行。 开头bot与用户打招呼,说明自己的任务与用户可响应的方式,并与用户以微博登录来交朋友,bot会透过社群侦测用户曾经追踪过的人物来作为on-boarding的开头,对于聊天接口而言,on-boarding是在很自然的状态下来进行。 在on-boarding的过程中,用户会被带领由输入追踪影星、告知对影星的熟悉程度,以及持续地接收最新消息。 这里系统的目标是引导用户由初次认识,进阶到持续追踪的使用阶段。 在实时推播之外,群组化的功能可以邀请朋友一起追踪影星,与bot在同一个对话环境下进行讨论,bot也会在对谈中记忆群组内个别或是众人的喜好,推出更精准的个人化信息。

本设计的目标除了让用户能掌握最新消息之外,也能让被搜寻的对象有更稳固的粉丝族群。

Image for post
Image for post

规划完成后,接下来要做的是赋予bot情绪的反应。 我创造了Bingbo,一个的22岁的女生,学生,追星族。 这一步较重要的是根据所设定的bot个性,设计不同状态时会触发的语句和语气。 以下为bingbo所建造的对话环境。

Image for post
Image for post

Bingbo可以是24小时不休息的迷妹,推播最新的影星动态给用户。 当然,若用户本身是个小有名气的素人明星,也可以透过bingbo创建自己的粉丝群组,让粉丝跟用户有更接近的互动。 在这整个生态系影响着三个角色:对于粉丝而言,在意的是影星何时推出新作? 影视公司何时播映新作品?; 对明星而言,在意的是大众会喜欢哪样作品,影视公司又愿意推广哪个作品?;对影视公司而言,在意的是作品和明星能带来的经济效益有多少? 透过Binbo,演艺生态系中的各个角色能接触到的信息将会更广更精准、影星能更专注于创作、影视公司也更快找到潜力新星。

Image for post
Image for post

用户评价bot推播的文章,系统会统计用户喜爱的内容,并把数据给影星及影视公司供评估经济效益的参考,也能筛选推播给用户的内容。 这个主题未来还会延伸到创建虚拟经纪人,打破演艺圈中不平等的议价现象,增加作品曝光,让粉丝、影星、和影视公司能够更公平快速的合作。 类似的应用领域如科技趋势追踪、财金看盘、时尚潮流等其他与趋势相关的新闻内容都可以从这个框架出发!

~我是思儀(Evonne),UX Designer。持續有新點子,歡迎Follow我喔~


Image for post
Image for post

各家品牌的聊天機器人開始浮上檯面,介面設計該如何因應這波科技趨勢做調整,分享這幾個月實踐聊天介面的心得筆記,希望更多有興趣的朋友一起發想 — 如何應用新科技轉化更好的使用體驗~以下簡稱圖像介面Graphical user interface為GUI; 聊天介面Conversational user interface為CUI。

圖像介面(GUI)與聊天介面(CUI)的使用時機

GUI(Graphical UI): 應用於呈現圖勝於文的內容。如資訊視覺圖表,包含各式圖表、照片、數據、地圖、色彩標示、控制項..等等,不需太多文字說明就能一目了然。這大家都很熟悉我就不多說拉!

Image for post
Image for post
Source: http://garfieldduck.me/tag/exploratory-data-visualization/

CUI(Conversational UI): 適合用來觸發繁多且瑣碎的項目。如繁複的導航路徑或眾多獨立的服務諮詢。CUI中又分為以文字(Message UI)及語音(Voice UI)為主的介面。MUI的優點是非即時的,不需馬上接收或回應,但必須透過鍵盤登打,對於小螢幕的手機端使用性相對較低,可適當採用預設按鍵供使用者快速選擇,省去打字的時間;VUI的優點是即時,但必須立即回應,輸入容易受外界聲音影響導致不夠精準,可於不吵雜的開放式公共環境,在不干擾他人的狀況下使用。

Image for post
Image for post
http://www.marketingfacts.nl/berichten/conversational-commerce

GUI與CUI各有優缺,堅持只使用某種形式的介面可能會讓結果更糟,我曾經犯的錯就是視GUI為舊時代的產物,強硬地把服務以盡可能多的CUI來取代,反而適得其反。適當的結合CUI和GUI的優勢,才能創造更好的體驗。

以搜尋”台北市大安區和平東路的小吃“為例,在GUI的做法可能是:

→1)選擇縣市

→2)選擇區域

→3)選擇路段

→4)選擇餐廳形式

→5)呈現搜尋結果,

user要像剝洋蔥一樣經過層層選擇才能達到搜尋目標; 對CUI來說,只需要告訴系統 ”台北市大安區和平東路的小吃“,系統後端便會根據關鍵字判讀user想要的目標,直接跳到呈現搜尋結果:

→1)”台北市大安區和平東路的小吃“

→2)呈現搜尋結果;

又或者,當服務項目過多時,也是使用CUI的好時機。以上設計成CUI的前提是,要讓user在一開始就了解系統能夠提供哪些服務項目,以免user面對CUI介面時因沒有足夠提示而手足無措,相關設計規範可參考:Conversational UI設計規範

反面來說,當user可以輕易記憶介面操作路徑,比方查詢火車時刻表時,GUI便可提供簡單的選單或按鍵,在少許點按後就能訂好車票,使用者可以一覽在可允許時段內的班次,並依自身狀況來選擇車次(ex.台鐵訂票通):來試試看:

→1)選擇出發地

→2)選擇目的地

→3)查看班次

→4)訂票

(說不定熟練的user閉著眼睛都能做到);

若這些任務發生在CUI上就會變成:

→1)user:我要從臺北出發到台中,今天下午1:00之後有哪些班次可以搭?我最晚要在22:00前抵達。

→2)bot:這個時段有1:30–3:30, 3:30–5:30–7:00, 7:30-……..(略)

→3)user:我要訂1:30出發這一班

→4)bot: 好,訂票成功。

…光看打字就覺得累了,越少的介面若觸發越多的互動頻率,反而累積更多操作負荷。將CUI和GUI擺在適當的應用上的確不是一件容易的事,我也做了不少嘗試,暫且下個結論:

以CUI觸發項目、提供精準篩選結果; 以GUI呈現資訊、提供模糊參考範圍

舉個明顯的例子,CUI(聊天環境)與GUI(詳細資訊頁)交互呈現,簡單的語句觸發功能,展開後的圖表資訊更能一目了然,如下圖。

Image for post
Image for post

在妥善應用聊天介面的前提下,我們可以獲得這些好處:

  • 人機互動更接近真實人類,學習成本降低,能快速上手。
  • 一次輸入包含各種條件詞彙,由後端判讀作出相應動作,加快任務完成。
  • 簡化前端頁面,縮減程序,加快使用者操作速度。
  • 隨著後端功能擴充,介面依舊保持簡單。
  • 語句資料庫能無限擴充,機器人將會隨學習次數增加越來越機靈。

機器人的聊天環境規劃

這是我目前推敲出來聊天機器人的前端設計流程,各位可試試能否再優化。

Image for post
Image for post
Chat bot design flow

Conversational Flow中,機器端呈現有先後順序的內容或可群組化的資訊; 使用者端提供有結構式(有明確制式的選項,可用清單形式呈現)與非結構式(無範圍的條件要求,通常讓使用者自行登打)的輸入方式。在規劃溝通流程時,需考慮是否過多的互動頻率,過多的操作步驟延遲任務達成的時間,哪些步驟需要有先後順序,哪些是要群組化一次呈現的資訊,哪些回應可提供快速選單,哪些可提供使用者自由輸入,哪些過程需要顯示進度提示,哪些異常狀況會發生,發生時該如何告知使用者,並提供解決選項..等等。依服務主題有不同的狀況劇,需要自行去探索了!

Image for post
Image for post
Conversational flow

建構良好的人機溝通體驗

當機器人還未聰明到可解讀大部份來自使用者的各種語句型態時,可藉由限定回應自由度來提高精準率,幾個方式可試試:

  • 輸入框:若聊天介面提供使用者得以採用鍵盤(或語音)自由回答,那麼後端系統就要有把握能解讀來自使用者各種語句拼湊方式,且多種語句結構可能都指向同一種意圖,系統要判斷出來,否則機器人與使用者會開始雞同鴨講,這將會是個自己挖坑、降低使用體驗的快速捷徑。
  • 清單:若系統還未達能判別大部份的人類語句,比較安全的方法是限縮使用者回答範圍,目前常見的方式如1)提供快速選單,2)提供可輸入的文字提示, 3)為項目編號供選擇。這些快速選單的好處除了限縮回答範圍外,也省下使用者輸入需求的時間。

機器人回應的精準度,是聊天體驗中最重要也最困難的部分。

Image for post
Image for post
wireframe_demo

機器人的個性化設計

CUI可讓user產生與真實人類交談的錯覺,為了強化沈浸體驗,需要在一些設計細節上多加著墨:

  • 模擬人類的行為模式:依服務主題設定機器人原型為該領域的專家,如廚師、醫生、老師..等等,藉專家訪談來了解原型人物的生活、專業、興趣,為機器人建造屬於該領域專家會有的行為模式,理解專家遇到狀況時會執行的步驟或行為,研究結果可作為Bot Persona與Bot Flow的依據。
  • 模擬人類的情緒反應:視服務想提供的是具專業感的顧問機器人,或是充滿的親和力陪伴機器人。真實的人類偶爾會感到不耐、憤怒,有時也會開心大笑,並非機械化的一個口令一個動作。若要讓使用者誤把機器人當成真實人類,加點情緒觸發到Flow裡調味,會讓機器人更有人性溫度。
  • 模擬人類的交友過程:依使用次數(熟悉程度)設計不同的觸發內容。隨著與使用者交談次數越多,蒐集到的使用習慣和喜好也越精確,到此時,機器人就像閨蜜一樣,在你還沒提出需求之前,就已經懂你了!
  • 模擬人類的感受能力:表達對人類的理解、共鳴、同理心,及幽默感,營造使用者對機器人的情感依賴。

設計端與工程端的銜接

AI ⇄ UX; Chat Bot ⇄ Conversational UI

聊天介面在視覺設計的工作量已不這麼繁重(但不代表不重要),介面型態大致由聊天環境詳細資訊頁構成。雖然介面數量減少,但更多功夫會落在規劃溝通流程(conversational flow),這裏也是與工程端交流最多的區塊,影響著操作的流暢度與整個服務的使用體驗。當擁有人工智慧的聊天機器人被開發時,創造機器人的性格與行為反應就成為體驗設計的核心(你不會創造一個顧人怨的機器人,除非這個服務是拿來激怒人類用的。)

待續..

並非每種服務都適合以CUI呈現,GUI不會因CUI的興起而失去價值,也不會因科技發展而消失,人類在許多時候還是需要靠圖像做理解和控制。我們應把重點放在如何提供更好的解決方案,畢竟為使用者創造好的體驗才是設計的最終目標~這塊領域還有許多嘗試創意的空間,我一個人的力量很小,需要大家一起參與,先就自己了解的部份拋磚引玉,對聊天機器人的互動設計有興趣的朋友也歡迎一起討論吧!

寫論文也沒這麼認真(誤)@@

~我是思儀(Evonne),UI/UX Designer。持續有新點子,歡迎Follow我喔~

About

Siyi Wu

Hello! I'm Siyi, Product Designer at GRAB. yvette00153@livemail.tw

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store