Framer Taiwan Workshop#1 — 易用性測試中數據蒐集與洞察
親，所以哪些公司需要 prototyping 與易用性測試？
Framer 在台灣是個大家都聽過、使用過但社群一直沒有太活絡的產品雛型工具。這次的工作坊不只是讓大家多接觸這個工具，也提供一個我能訪問業界資深設計師實際在跑 Prototyping 的機會。
workshop 課綱
這次三小時的課程，帶大家從了解 Framer 的演進歷史、介紹介面與功能到著手打造問卷 Prototype，透過用戶數據搜集工具，錄製受測者使用行為與結果，藉由量化指標協助迭代與更新設計的流程。
1. Session: FramerX 101 introduction — 1.5hr
2. Session: Build, Test, Iterate with FramerX (易用性測試) — 1.5hr
workshop 進程
FramerX 101 introduction
開頭花了十分鐘簡介 framer 的歷史，在 2018 年新版重磅登場後身邊朋友排了申請但遲遲沒有使用，而 2020 Framer 會更進一步推出網頁協作版本，到時候快速部署(deploy)展示、多人協作(cowork)會有更多的可能性。
接著就是軟體基礎介面與功能介紹，畢竟參加的設計師都比我有設計工具經驗 (汗)，其實這裡簡單帶過後大家都能舉一反三，也繼續追問在 Design spec handoff 上面能跟工程師如何溝通。Framer 現在有以下兩種可以給工程師參考的依據，但目前匯出的格式與套件支援都是針對網頁設計， iOS/Andriod 的支援還沒有被官方提到:
- Element spec handoff (內建右側會有該元件的一些數值)
- Animation Library (能給工程師使用的動畫套件，不怕設計與工程中間數值對應不起來)
接下來的一個小時帶過 Framer 中的幾個 prototyping 功能，有頁面轉換 (Link) / 快速佈局的 (Stack) / 頁面式動畫 (Pagination)，另外也讓大家體驗一下 Framer Store 強大之處，設計師可以直接使用上千個套件，例如嵌入 Map design 或是互動的 Video，這些給使用者的操作體驗我想是 Hi-fi 應該具備，而其他交互設計工具還較少能實現的。
Build, Test, Iterate with FramerX (易用性測試實作)
第一次的工作坊不著重於 Framer 最有特色的功能: Code，我希望藉由幾個拖拉與排版就能讓設計師知道這個工具強大的地方。另外，直接拿 Prototyping 工具來做易用性測試也是一個嘗試，這裡就記錄 session2 裡面一些想法。
目標
這次的任務是要做名牌 (Badge )表單給來參與活動的使用者，讓填寫完個人資料的參與者，可以獲得屬於自己的美美名牌，簡單來說使用者需要在這份表單作下列操作，最後會有一個回顧給使用者檢查他所留下的資訊頁面。
- (Texting Input) 填寫完姓名、工作職位
- (Optional Selection) 選擇一些活動喜好，例如: 食物、飲料偏好
- (Photo and hand writing) 拍一張大頭貼，附上同意簽名
實作流程
我們在這個環節需要做三次的設計迭代 (Design iteration)，每次設計七分鐘後進行三分鐘的 Usability testing，兩兩一組因此一次測試的時間其實是 90秒鐘左右。
邏輯、Input 、Output
在許多 Prototyping 工具中，能做到邏輯操作的工具不多，Framer 是目前綜合來說最有彈性跟使用性的。
這次的任務目標其實是故意設定成需要做邏輯判斷的。譬如使用者輸入文字，但內容並不滿足欄位條件違法了，是不是能做到提醒的設計呢？
以下方的欄位來做說明，當使用者輸入正確的 Twitter 帳號格式，右方結果欄位即顯示該結果; 反之，如果格式錯誤，則不會有結果，元件也會立即套用上錯誤的狀態:
這種賦予元件狀態的 Function 稱作: Override。Override 的使用情境很多，它提供單一元件反應出使用者不同互動方式時該呈現的狀態，譬如:
- onHover: 滑鼠滑過顏色改變
- onClick: 點擊後需要傳送資料到 Google 表單或是資料庫
另外，因為 Override 是事件、元件分離的設計，相同的 Override 可以套用多個元件上。這份問卷 Prototype 其實就是大量使用了 Override 的功能，每個輸入欄位都會把使用者輸入的資訊儲存下來，純文字的 override，拍大頭貼使用的圖形 override，選擇食物偏好的選項 override…而當使用者結束填寫後，會把資訊印在最後一頁。
迭代與測試
兩兩一組的三分鐘測試中，一人當受測者，一人則給予測試，雖然元件是我已經預先做好，大家只需要拖拉到頁面，並確保流程中每個資訊欄位使用者都有填上，但每個人做出來的作品都會稍微不同。
一個 Framer 做測試的好處: 一鍵即可以部署你的作品到 Framer demo 網域上，透過打開特定連結，就可以開始做 testing。
透過交換測試身份，彼此可以去感受不同的 Mindset 所設計出來的流程。另外我也要求在測試時，務必請受測者 Thinking Aloud (放聲思考)，透過直接的 Feedback，幫助下一輪的迭代:
“這頁面什麼說明文字都沒有，為什麼要填上我的職位 ?”
“這裡要接受 Code of Conduct (行為準則)，怎麼沒有外部連結或詳細內容 ?”
收集資料與檢查
也許是第一次做那麼多邏輯互動設計，幾位設計師非常專注，也在練習中問了不少的問題 (還包括整個專案 crash 掉我超難過😫)，這裡附上我的實作結果給大家參考:
除了量化數據，我們也可以從列表挑選每次的錄影，看看使用者在測試上有沒有遇到任何的問題，或是意料外的操作。以下面的紀錄為例，我們可以發現使用者簽名時，卻又同時觸發頁面 scrolling，造成使用上的困擾，而該設計師也在下一次的設計迭代中，把簽名元件移到另外的頁面，把它跟滾動頁面分離開來:
📌 也因為大家在設計迭代太過專注，其實我一直沒辦法說明在哪邊偷塞了 Airtable & Hotjar 的功能，直到三輪結束後我才來分別介紹兩種工具，這部分是下一次工作坊要修正跟提前說明的。
光裝上兩種蒐集資料的工具，就讓這些設計師獲得更多參考的指標，但只要你願意，能在 Framer 擴充的元件是無窮無盡的
🎒 How we build a prototype?
工作坊後讓每個設計師都 Demo 了各自的設計，而我也詢問設計師們在各自工作流程裡，Prototyping 到底會在什麼場景使用上?
“工作已經夠忙了，哪有時間做實驗跟研究”
“老闆不太允許這種難看到利益的東西”
來參與的設計師分別在 內容平台 / 金融產品 / toB 產品…工作。問完一輪後得到這些答案，我想在台灣設計業界的文化裡面，我們並沒有這塊剛需，也可能是資源上的分配，公司較少能投資源在研究用戶或是利益不好量化的投資上，至少我的認知裡一個 to C 新功能在設計時採用 hi-fi Prototyping 的機會可不那麼頻繁，使用 A/B testing 往往收穫多於 Usability testing。而我就更好奇，有實際在使用 hi-fi Prototyping 的設計師們到底會怎麼進行這些雛型的建立，甚至 Deliver 出去做測試呢。(🤔
📌 備註: 公司譬如 Piccollage，還是會在給使用者新的操作流程上 做大量的 Prototyping，而且做出來的完成度很高，因此設計文化還是會依據公司有所不同。
Framer Support 與工作坊資訊
八月荷蘭的 Loupe 2019 年會上跟團隊聊了不少，原來 Framer 官方也曾經到中國舉辦過 Workshop，還一起去了卡拉 ok (這體驗感覺很棒 😆)。在離開前我提到回台灣後想舉辦工作坊的意願，官方也熱情詢問我需要的相關資源，因此人回來不久後，又有一包滿滿的禮物從荷蘭寄了過來！
除了實體的筆記本、原子筆、貼紙、衣服…等等，官方也給我很棒的折扣 Coupon，預計明年的工作坊會慢慢消化掉這些禮物，因此有興趣的設計師朋友，歡迎一起來聽課交交朋友，還有機會把這些禮物帶回家。
🍺 2020 Framer Taiwan Workshop#2
文末，我想部分讀者應該也對下次的工作坊資訊有些好奇！如果你還有任何想從 Framer 中學習的部分，歡迎留下個人資訊，以方便我定下第二次的工作坊的模式與內容(🚕 🚕 🚕
誠摯歡迎大家加入 Framer Taiwan 社團，我會把明年工作坊或 Framer 相關更新與消息放在社團裡:
