TIL:打造AppSheet Dashboard 實戰,踩到的坑和心路歷程

從設計思路到實作細節,分享我如何在 AppSheet 打造業務使用的進度儀表板。重點探討:設計思維、心路歷程、AppSheet 優缺點,以及經驗與學習。

TIL:打造AppSheet Dashboard 實戰,踩到的坑和心路歷程

前言

接續先前從 Google Sheet 升級成 AppSheet 的 CRM 改造專案,我這次挑戰的是在 AppSheet 上實作DashBoard 功能,目的是希望能解決業務們會議討論以及整理資料所花費的時間精力。

受限於我對 AppSheet 的理解以及 AppSheet 本身的硬限制,最後大約是換了三個版本的草圖方向,最後形成目前的版本。一樣是以MVP的精神,交卷給內部使用者當中。


設計思路

每一個團隊的習慣和工作性質不同,這裡以我了解我們內部的習慣做說明。

  1. 篩選器
    1. 我認為一個好的儀表板能在最精簡的資訊下為使用者提供最精準的答案。在只做最少、最精準的圖表的目標下,將一些共同的維度抽離成篩選器、或是上下切層級是我認為可行的做法。
    2. 「時間」和「觀看者」是我先想到的兩種維度,因為團隊會有週會、月會的進度追蹤與討論,與其做很多個不同的圖表,不如讓使用者可以隨意切換他想看的組合,例如:整個季度總共有多少個新合約、某業務這週有幾間客戶需要追蹤。
    3. 實作上是利用一張獨立的 Table (我命名為 Dashboard_Filter) 去控制 Slice,而且是設計成每個使用者自己一列,讓每個人的篩選條件不會互相打架。
    4. 「上週」「本週」等快速篩選器按鈕:雖然使用者可以直接編輯篩選日期,但經常性要做的操作簡化成按鈕,節省的不只是時間,更是使用者的心力。
  2. 圖表卡片
    1. 依據資料來源的劃分,也依據業務流程的不同去區分和排列。例如 Pipeline 來說會先有陌生開發、商機、再到試用、付費轉換、續約,在資料呈現的順序上也希望收束使用者的思考方向,更集中且直覺的思考不同節點的狀況。
    2. 單一職責:避免同一個層級的不同議題卡在同一張卡片上呈現。一個卡片回答一個主要問題。
    3. 三層下鑽(Drill-down)限制:我認為這適合用在有連續性的思考或分析,例如:先了解有幾張合約即將結束,在下鑽了解這些合約分別有哪些業務負責,最後再將要續約的合約明細顯示出來,方便做最細節的討論。三層是我認為層級的最適上限,再往下更多層我認為會造成認知上的負擔。
  3. 資料屬性規劃
    1. 雖然這次是屬於系統升級,所以是將原有的資料轉換成 AppSheet 這個前端去呈現,但因應這個儀表板的特性以及對成長後的業務需求,在過程中我也起了好幾次想修改原始資料表上無論是欄位名稱、順序、定義等的念頭。當然這是非常危險的事情,因為很多想像不到的連鎖錯誤幾乎是一定會發生的,Debug地獄、當機到引起民怨、想砍掉重練等等的狀況都歷歷在目。

心路歷程:我給自己 70分

70 聽起來不高也不低,因為至少有高於需求且不是勉強及格,但我還是對儀表板有更高的期待,尤其現在用 AI 刻一個好看的前端儀表板網頁變得更加容易,恨鐵不成鋼啊。

以下來說說 AppSheet 實際使用的心得,我也是用這些面向和同事解釋的:

AppSheet 的優點

快速打通資料庫、前端RWD顯示、多人權限管理與資料同步等議題,還附加從原本常用的 Google Sheet 低量疼痛的資料移轉。

雖然花了很多功夫在調整畫面格式,但省下來的這些工程對我來說很可能是更陌生、甚至無底的技術巨坑。

AppSheet的缺點

這是完全 No-Code 平台 (沒錯,我認為在有 AI輔助的情況下,Low-Code 或更多 Code Injection的可能性是對使用者更方便的!)。

在前端介面的顯示非常死板且難用。在附加上 Google Workspace 帳號只有附贈 Core 等級的 AppSheet 功能,而我最需要的 Gemini AI 功能在一個月 20USD的 Enterprise 版本.... 當然其他高級功能我們團隊目前都用不到。太晚發現加上沒有訂閱導致我學習手刻功能的能力成長了不少,算是一種夕陽技能吧。

雖然不夠好看,要使用者習慣的摩擦力預期也不小,但且看且走的角度來說算是 ok可以繼續推進。

意外發現

  1. 要拿具體的類比和抽象的需求一起問 AI。只有手繪圖然後就問 AI我能不能這樣做,還是高機會會得到充滿幻覺的答案。

    很像夢回2024年的AI問答經驗,問到的答案都不是對的,或者可能 AI 會拿幾年前的功能設定來回答,整個牛頭不對馬嘴,越問越生氣。

    我的解決方式:
      1. 縮短對話:不要讓對話太長,或者說一走歪就可以準備重開對話。
      2. 拿實際案例詢問:搜尋別人「真的能打造出來」的範例再丟給AI 問那要怎麼實作。只有手繪草圖 AI 會過度自信地告訴我能做到 但可能完全不是,而問實際存在的東西相對可信度就提升不少,因為那真的做得到。
  2. 我以為的具體想像,對其他使用者來說難以理解。我記得我和同事分享了一張別人做的儀表板,上面有一個篩選器、一個圓餅圖、和一個表格後,我心裡其實就想到其中一個滿接近現在這個版本的畫面,上面我哪些資訊要用橫條圖呈現、哪些資訊要用可以下切的表格、哪些地方要可以篩選等等。但對同事來說,他可能有更接近使用者的角度告訴我只看到圓餅圖他只能告訴我他要的不是圓餅圖,但想像不到我說的那些變化會是什麼樣子。

下一步

我會想先收集一輪使用者的回饋後再進行調整,另一方面也是因為我認為在版面以及AppSheet 可以做的呈現效果也遇到瓶頸。與其再鑽研下去,不如先去做其他更有價值的功能。

而且我認為太貪心的什麼都想呈現,反而才會讓使用者什麼都找不到。

與其讓我把我想到所有可能用得上的東西都放上,不如好好利用這次的空白,刺激使用者思考並告訴我他們還需要什麼,對團隊來說是更正向的成長。