Prototyping for Voice UI — Sayspring

越來越多語音相關應用出現,如Alexa、Siri、Google Assistant、Cortana等,在介面設計上又該如何做因應與調整。

目前設計師常用的 prototype 工具,像是 Invision、Axure,可幫助我們透過使用者互動測試的過程中得到回饋,用以改善產品,同時也是開發團隊裡一種有效的溝通方式。

但在語音介面領域中這類型的工具似乎還相對少數,這次分享的 Sayspring 是一款專為語音介面(Voice UI)所設計的原型工具,也希望有興趣的朋友能一起分享更多不錯的工具。

Sayspring 特點包括:

不需要撰寫程式碼,簡單易上手
可以跨平台裝置上播放操作 (在網頁瀏覽器就可播放測試)
記錄原型測試的互動過程,可供查閱與分析
將所有對話整理成腳本,可一目了然地檢視

目前免費方案可以有兩個專案數,一開始使用時,可以連結你的帳號至Amazon Alexa(US/UK/DE)或 Google Assistant(US),行動裝置上有安裝這些app可直接用來進行測試。若是沒有這些app也沒關係,Sayspring 也可用網頁瀏覽器進行播放與測試。

connect to a voice platform

裡頭提供了一個範例專案 Community Bank,介面很簡單易懂

sample project

Design

每個對話主題可設為一段 flow,每段 flow 裡可設定多個 step,step 分為『user request』跟『app response』。

每個 request 可以設定相對應的 response。在此也可將同義/相似詞考慮進去,比如 user 說:cancel、end、done、stop、quit、exit → response 都是會導向Goodbye。

request details

Preview & Transcript

Preview 目前還是 beta 版本,可以直接在瀏覽器進行對話測試,測試的結果會以文字的方式保存在 transcript 中,可供測試後做資料分析之用,十分方便(免費方案只保留3筆紀錄)。

preview in browser
transcript

User Scripts

將所有設計的對話,系統性地整理在一起,可以一目了然所有對話流程,幫助檢視與釐清對話的邏輯與正確性。

user scripts

Share

可邀請其他人進入專案,被邀請人需要註冊帳號才能操作prototype,但無法編輯。

整體看來 Sayspring 目前功能還不算太多,而且不支援中文,期待它未來的功能更加完善,並且支援更多語音應用程式。

若還有發現不錯的VUI設計工具,也歡迎大家一同提供與分享 👋

Sayspring 網址:https://www.sayspring.com/