中文 (正體) (zh-tw) English (en)

[產品概念介紹] Miri的使用者流程、占卜流程、使用者引導介紹 | 開發概念系列(2)

在2021年2月離職後,我用了半年的時間用Python開發自己的占卜機器人作品,在這版本的開發有很大幅度的變動,我學著跳脫以往使用後端工程師角度思考,轉換為使用者與UI設計師的角度思考,使作品的使用者體驗跟流程順暢度大大提升,在第三版本的作品,新增了使用者引導訊息、改善占卜流程以及新增選單功能。這段日子帶給我很多心靈上跟實力上的進步,現在我就來分享這半年對於使用者流程與介面設計的概念。

minayu416

1 minute read

開發Miri的技術與概念第二篇,來分享一些與第一篇較不同面向的開發概念。

對比於Miri的第二版本,除了Line Bot的技術有改善之外,還新增的Telegram Bot的平台供給使用。

這部分在上篇文章以超級長文的形式分享了,接下來分享一些比較偏向使用者面向及UI面向的概念規劃。


使用者流程發想起源

在第二版本的Miri,並沒有任何的使用者流程規劃,在短短一個月的開發期,我將後端盧恩符文的功能做出來後,也沒有考慮到任何流程順暢度,就直接上伺服器運行,然後找工作去了。

在之前的開發感想我曾說過,一直以來我作為後端工程師,角度只會著重於後端的開發,頂多在和前端合作時,會多在前端的角度琢磨思考,然後多溝通完成前後端功能連接。

基本上作為後端只要根據前端跟UI設計師開出來的畫面去構想功能跟程式怎麼實作就好,但在這次獨立開發Miri的時候,有了新的領悟。由於是獨立開發,所以沒有一個角色替我規劃UI跟使用者流程,而我本身又注重於後端,所以在開發Miri的時候,會直接從後端開始寫。

通常是先由UI設計師規劃使用者介面跟流程之後,前後端工程師才會依據設計師出的圖去構思實作方法,而我卻從後端出發,結果就是我一直不斷的重複拆掉程式再寫,不斷地修改,直到後來我才知道,我應該要先把自己當作一個使用Miri的使用者,然後去期望我使用Miri我會希望我看到的是什麼?

從這個角度去思想,Miri的規劃跟開發才終於比較順暢。

於是再經過一番腦力激盪後,Miri第三版的使用者流程為下:

  • 改善並新增占卜流程
  • 新增使用者前導指引來引導使用者初次使用Miri
  • 新增選單 Menu,提供選單類選項,提供使用者可選擇動作,而非茫然不知所措

就這樣,第三版Miri的使用者流程就按照這三個部分去做展開開發。


使用者前導指引 User Pre-Guide

一得知我需要作為使用者去發想,第一個想到的就是第二版的缺點。在第二版本中,當使用者加入Miri後,會突然不知所措,傳了隨便一句話後,則是跳出來:

哈囉!
目前Miri只提供占卜的功能,打上「盧恩符文」就可以進入占卜模式囉!

還需要使用者手動打字盧恩符文盧恩才能夠觸發占卜功能,整理的使用者體驗會顯得有點莫名其妙。但當初會是這樣的設計,其實是因為當時的Miri本來就是想做成聊天機器人,占卜只是其中一個功能,聊天只是才是主要功能。

但這個版本確定將Miri定位為占卜與命理機器人,那麼就有必要好好的規劃使用者流程了!

所以在這次開發中,我優化了使用者初次使用的流程跟新增了使用者前導指引,我們來看看是怎麼一回事。


  • 語言設定

首先因為第三版本的Miri新增了英文作為第二個可選擇的訊息選項,所以在每個使用者一開始使用Miri時,若偵測為新用戶,則會需要設定預設的訊息語言。


  • 設定語言後,設計了一個手冊來引導使用者

由於會需要設定語言的使用者代表是初次登入,一定不知道如何使用Miri,所以當語言設定完畢後,會一併跳出使用者引導手冊訊息來引導使用者了解功能。

提供兩個選項,如果選擇引導手冊,則會提供四頁的描述內容,而如果選擇進入選單,則直接進入下一步訊息。

  • 點選 引導手冊

此時會向使用者發出四頁的手冊內容,這個部分其實有點設計不良或者有爭議的是,使用者一般使用手機螢幕,發送圖檔且是圖文並茂手冊,還需要使用者專注閱讀,其實挺強人所難,這也是其中一個暗示Miri的功能可能已經豐富到用聊天機器人是無法負荷,需要網頁App才能呈現好的情況。

第一頁及第二頁主要描述Miri的操作功能,包含選單內容,每個選項的功能描述


第三頁跟第四頁則是介紹占卜功能,每個占卜的介紹跟適合的對象及問題。

其實比較詳細的介紹會埋在每個占卜方法的訊息中,但我想多數人也許不會注意,很快地就跳到開始占卜的部分。為了防止使用者對於選擇占卜方法會是一頭霧水,所以在手冊裡也同時附上每個占卜方法的內容描述。


  • 功能選項

當進到選單後,其實就是Miri的各個功能選項,包括占卜功能的入口,也考量到大部分的人可能會比較常用筊杯,所以特地設立了捷徑。

還有就是語言如果一開始按錯,可以再次更換(但我的設計師朋友說,其實這個功能很少用到不太需要擺在這),接著是關於我 介紹Miri資訊跟開發者資訊。


以上就是第三版本針對使用者前導手冊跟功能與流程上的優化跟新增部分,比起第二版本來說,此次更動幅度非常大,同時也了解到獨立開發產品時,需要從原本只由後端角度思考,適時的改成從不同角度切入。

由於將前端掛在聊天機器人上,沒有辦法讓使用者引導功能呈現像網站或App那樣自由設計的效果,所以解決方法是製作了四頁的使用者手冊,讓使用者可以先透過手冊認識Miri的功能。

這其實也是一個需要在下個版本在優化的地方,畢竟要使用者在使用前看完手冊,再加上大量的功能需要一時融入腦袋,蠻強人所難。Miri的功能跟內容似乎相較以前成長很多,用社群軟體的聊天機器人已經無法負荷他豐富的功能,這將會是未來需要考量跟規劃的重要部分。


占卜流程

新增的使用者前導覽功能及新增的功能選單已經介紹完畢,接下來就進入到占卜功能的主體。由於對比先前只有盧恩符文一個占卜方法,第三版本將新增至六種占卜方法,每個占卜方法的流程都會有不同,所以當時設計占卜流程時,也花了一點時間在釐清脈絡。

傳統的占卜流程比較像是:

  • 選擇想要的占卜方法
  • 告知問題及資訊
  • 冥想個人資訊與問題
  • 抽取牌卡
  • 解釋

我保留大部分的流程,新增了一個流程為: 選擇牌陣。由於機器人方面無法得知使用者的問題跟問題分類(應該是要設計一些分類或引導讓機器人得知問題種類,然後由機器人決定牌陣),所以這部分得由使用者了解問題本身並選擇適合的牌陣。同時這也是線上占卜遇到的困難之一,因為大部分前來占卜的使用者,對占卜方法不熟悉,對牌陣自然也不熟悉,會不知道如何使用跟做占卜。

所以在制定Miri的占卜流程時,我將流程調整為

  • 選擇想要的占卜方法
  • 選擇提供的牌陣 (有些方法沒有牌陣): 可參考介紹描述做選擇
  • 進入冥想: 靜下心觀想自身訊息以及思考想詢問的問題
  • 抽取結果
  • 獲得解釋: 請根據自身情況及問題的狀況搭配牌卡附的解釋做解讀

這著這樣的流程下去設計整個占卜的流程。


所以對比第二版本,有幾個部分做比較大的改善

  1. 新增冥想的流程

在第二版本的盧恩符文占卜中,當使用者按下盧恩占卜,再次按下占卜後立刻就會取得答案,讓使用者還沒將問題詢問或者冥想於腦內,就立刻取得答案,令人十分的錯愕。

所以新增一個流程為冥想功能,如圖

可以讓使用者在選擇占卜方法以及確認牌陣後,清楚得知下一個步驟是冥想問題,接著點選進入冥想後,會根據不同的占卜方法給出不同的冥想訊息,引導使用者冥想!

這麼一來就能解決之前直接給出答案,並無緩衝的問題,還能讓占卜流程更完整。


  1. 針對不同牌卡有無牌陣做調整

由於第三版的Miri,新增至六種占卜方法,但是每個占卜方法的性質不同,不一定會有選擇牌陣的選項,在這部分也會做調整。

例如偉特塔羅有牌陣的設定,所以選擇偉特塔羅後,下一步就會是選擇牌陣

我們選擇了偉特塔羅占卜,接下來點選開始占卜就會進到選擇牌陣

每個牌陣都會有專屬於他的解釋:


另外一個例子,是屬於沒有牌陣的筊杯,在選擇占卜方法後,就會是進入冥想的按鈕。


  1. 牌卡解釋

牌卡解釋與第二版本相比之下也改善很多,以往是取得結果後,丟出來的解釋非常長且凌亂,而現在針對不同的占卜方法有不同的解釋,而且將長條解釋做分段。

盧恩符文做例子,抽到牌卡後,就會分選項,原先是設計成3-4個選項,分別代表著工作與愛情或其他分類解釋。但由於目前在解釋這方面還沒有這麼多時間跟經驗安排時間下去編寫,所以目前就僅僅將解釋做簡單的分類,還是至少與先前版本相比,大大優化許多。

這是抽出的其中一個盧恩符文結果,按下深度解釋則會得到下方整齊排列的解釋。

而另外一個例子是自然絮語占卜卡,自然絮語的解釋會稍微短一點,因此點擊牌卡後會直接出現牌卡圖案以及解釋。

得到兩個結果

點下其中一張牌卡後,直接展開解釋


選單 Menu

最後一部分是第三版本設計了選單的製作,在以往第二版本的Miri,使用者只能通過輸入盧恩符文來觸發占卜功能,以及幾項缺點像是

  1. 結束占卜後,當下一次要使用時,會不知道如何使用
  2. 如果中斷流程後,使用者會變得不知所措,還是只能再次輸入盧恩符文觸發功能

因此,已經增加使用者前導覽手冊功能,再加上這個版本新增很多其他功能,像是語言切換,或者使用者可以再次觀看導覽手冊,以及個完善的占卜功能,總不能每次都請使用者從最一開始的訊息開始選,一路選到占卜功能或其他想操作的功能。

所以在大部分的功能都開發完畢後,在最後一個開發任務,我決定幫Miri做一個選單 Menu功能,這麼一來當使用者困惑不知道如何使用時,打開選單可以引導使用者點選功能。

接下來就是兩個平台的選單呈現介紹:

Line Bot的部分,使用官方帳號具有的功能圖文選單 Rich Menu來製作Miri的選單

選項有

  • 使用者手冊: 會再次發送四頁使用者手冊圖文描述
  • 占卜: 進入選擇六種占卜方法
  • 筊杯: 直通筊杯功能
  • 選單: 其實就是將 Rich Menu中的所有功能用Carousel message的方式,同時呈現圖片、選項及描述
  • 設定語言: 可以切換訊息語言
  • 關於我: 介紹Miri及開發者資訊

之所以做成中文及英文選項,主要是因為Rich Menu目前不能隨著使用者選擇的語系做更換,至少透過官方帳號網站設定的選單沒有這個功能,以往對於使用者語系選擇,大部分會是透過前端網頁做紀錄(或者根據使用者的電腦、瀏覽器、手機端語系)來判斷使用語系,在傳遞給後端去抓出同語系的訊息。

但是Line目前作為Miri的前端部分,是沒有紀錄語系的功能,所以目前紀錄使用者的語言是由後端處理,在選單方面就沒有辦法根據使用者選擇的語系去做變更,這其實也是一個問題,會需要做修正。


至於Telegram Bot的部分,則是主要使用 /command動作指令作為選單的功能

  • /user_guide: 會再次發送四頁使用者手冊圖文描述
  • /divination: 進入選擇六種占卜方法
  • /moon_blocks: 直通筊杯功能
  • /menu: 其實就是將 Rich Menu中的所有功能用Carousel message的方式,同時呈現圖片、選項及描述
  • /languages: 可以切換訊息語言
  • /about: 介紹Miri及開發者資訊

在Telegram的情況又更不樂觀了,Telegram的選單採全文字及 /command功能來製作選單,所以沒有圖片可以作客製化雙語圖案,因此 Telegram的使用者面對的選單語言會是全英文,因為Telegram的選單也是透過官方bot去設定,而非自己自訂,所以一樣無法根據使用者紀錄的語系去變更選單語言。

不過,訊息內容可以是中文,所以如果Telegram使用者看英文很吃力的話,點選 /menu,若設定語系是中文,則會出現中文的選單選項可以使用。


不過本來Telegram Bot所面向的客群就是外國人,所以預定立場使用Telegram的使用者應該主要設定的語系不會是中文,而是觀看英文居多。

以上就是這次針對Miri第三版本關於使用者流程的優化與改善,雖然還有許多流程上以及使用者的不便,但相較於第二版本已經進步很多,加上又必須會被兩個社群軟體Bot的功能侷限,能做到這個程度我已經很開心了。

接下來的優化跟改善就交給之後未來的規劃,看要怎麼設計或者突破侷限。

感謝觀看!


comments powered by Disqus