Loppy Pizza：幫助團隊合作的實體用戶介面
Design Challenge
通過結合實體和數位工具的優勢，設計一個鼓勵團隊合作的實體用戶介面(Tangible user interface)。
這是一個在Object & Space課堂上，由Graham Plumb和Aaron Soloway教授所指導的4週(2018年秋季)團體專案。
團隊: Asher Ran, Kendra Wong, Jay Wong (我主要負責physical prototype、視覺和動畫設計)
方法: 定性研究，創意發想，Prototyping，編程
專案概要
問題
學習編程的初學者常面臨困難，因為：
- 缺乏視覺反饋，使他們無法追蹤其系統的狀態
- 程式僅能顯示在個人螢幕上，阻礙合作學習
- 程式背後的概念難以讓人理解
解決方案
一個互動式教育遊戲，使學生能在編程課堂中：
- 收到清楚的視覺反饋來了解其系統狀態
- 在桌子大小的實體介面上查看偽代碼(pseudocode)，以便一起合作學習
- 通過使用“披薩餐廳”作為比喻來理解for迴圈(for loop)的概念
Demo Video
User Flow
研究
一開始，我們想了很多可以鼓勵人們合作的主題，像是客製化禮物，管理團隊專案，和師生之間的溝通媒介。
但是，我們最終選擇了寫程式為主題，因為做為互動設計師，學校要求我們要學習編程，但是我們卻是偏向於以視覺思考的人群。因此，我們親身體驗過學習編程的痛苦過程。
我們訪問了10位同學（參加編程課程的設計師）和2位編程老師。
機會
從訪問中，我們得到了3個insights:
- 編碼過程中，因缺乏視覺反饋，人們無法立即了解其系統狀態及更正錯誤
- 由於程式只能在每個人的電腦螢幕上顯示，因此很難與他人溝通和合作
- 直接以計算機的語言呈現編碼 — 一堆字，符號和術語，對初學者來說是無字天書，因為它不是設計給人類的直觀語言
所以，我們的挑戰是:
我們該如何通過提供視覺反饋，鼓勵合作，和將編程概念轉化為人類語言，來幫助初學者更輕鬆地理解編程的的概念和基礎？
設計
創意發想
起初，我們試圖想像一個未來的編程空間，一個不用代碼，僅需使用不同手勢和姿勢就能寫程式的空間。 然而，我們後來意識到，要建立一個全新的編碼空間系統實在太困難了，更何況我們自己也只是編程的初學者。 因此，我們轉而專注於如何教導學生基本的編程知識。
遊戲機制
根據我們的訪問，我們知道for迴圈是初學者難以掌握的概念之一。 那麼我們該如何以讓學生更容易理解的方式，去教導此概念呢？
我們想到能實現此目標的方法是創造一個以披薩餐廳為主題的雙人遊戲。披薩廚房中的元素可以作為for迴圈概念的比喻 — 比薩訂單和烤箱的數量是input，而比薩餅的質量和成本是conditions。
玩家的目標是透過評估訂單、烤箱、廚師薪資、和披薩質量之間的關係，來決定該接收多少訂單和運行幾台烤箱，進而賺取最多的錢。 由於不同訂單和烤箱數量的組合會導致不同的結果，因此玩家可以多次嘗試，而嘗試的過程本身就是一場學習之旅。
之後，我們發想了幾個運行此遊戲的元素。
我們把玩家需要操作的部分（披薩訂單和烤箱的input）做為實體的媒介，因為拿取實際的物品對玩家來說會是更直觀的操作方式。 另一方面，由於output有太多可能性，它只能以數位介面的方式呈現以保持其變化的靈活性。
技術方法
此遊戲使用的程式語言為Processing。 我們使用TUIO系統識別桌面上的物體。
由於遊戲不是完全互動性的（一旦兩個團隊完成了訂單和烤箱數量的input，outcome不會改變），我們沒有編程整個遊戲。 我們將每個outcome導出為動畫，並在玩家按下“播放”按鈕時播放對應其結果的動畫。
TUIO會偵測貼有編碼物品的數量和位置，並將數據發送到Processing。之後，Processing中的編碼會計算在特定框中的物品數量，以確定兩個玩家所決定的烤箱數量和訂單數量。 當切換到另一個特定框時，只要任何對象在該區域中，它就會被設置為開啟狀態。
基於各式input的組合，processing會加載所有動畫片段並播放相對應的動畫。
視覺呈現
為了製作Processing的outcome，我們需要做出所有披薩訂單和烤箱數量組合的動畫（例如：1個訂單搭配1個烤箱的組合，2個訂單配合3個烤箱的組合等等）。經過計算後，我們發現有36種組合，剛開始我們不知道如何在有限的時間內處理這麼大的工作量。
然而，我們導師建議我們勇敢擁抱有限的條件— 把簡單的視覺當作你們的優勢。 這啟發我們運用像素化的視覺元素來反應我們的遊戲個性。 此視覺風格不僅為我們節省了大量的時間，更反映了我們的主題 — 編程和遊戲！
實體空間設置
為了實際展示給用戶，我們實際架設了此遊戲系統。
首先，我們用木條製作了一張桌子。為了使放置在桌子下的鏡頭相機可以讀到所有實物底部的TUIO碼，我們在桌子上方放置了一張透明的壓克力板。 此外，我們製作了一個帶有傾斜支架的鏡子，為了糾正投影機反射在桌子上的影像的角度和尺寸。
經過無止境的調整和令人沮喪的嘗試後，系統終於成功的檢測到玩家在桌面上所移動的物品的數量與位置。
最終方案
心得
討論
Loopy pizza在幫助學生學習編程的過程中起了多大的作用？
我認為loopy pizza最成功的部分是讓編程更平易近人、更有趣，以增加初學者學習它的意願。 此外，學生將通過視覺反饋知道其系統的狀態，並漸漸了解for迴圈是如何運作的。 但是，它不能實際幫助學生學習寫程式。
Loopy Pizza的下一步是什麼?
第一，因為現在系統提供的可能性有限（僅有3個訂單和3個烤箱的組合），所以我們可以製作更多的變量來讓這個教育遊戲更有趣且更有挑戰性。第二，他可以不僅僅只有for迴圈，還可以有很多不同的主題。第三，透過給予互動式的教程和回饋，它可以教導學生寫程式。然而，我承認因為我們都還指示編程的初學者，我們還沒有足夠的能力去設計一個完整的編程教育平台或工具。
學習
擁抱恐懼和限制
我自認自己對編程不夠熟悉， 因此，此專案對我來說是非常有挑戰性的。 儘管編成部分並不是我的主要責任，但我們每天都會遇到新的技術難題，並且需要花費大量的時間來解決它們。 這個過程很痛苦，但是是一個寶貴的學習經歷，因為它提供我一個難得的機會 — 去熟悉我曾經抗拒的技術和設備。 以外，我更意識到我應該把時間視為朋友，而不是敵人。 像是若此專案沒有時間限制，我們可能無法那麼有快地就找到合適的視覺語言 。時間其實可以幫助設計師想到更好、更有效的解決方案。
進行更多溝通以避免誤會
由於我們團隊又細分為的製造組和編程組，因此溝通變得非常重要。 有時，我們（Kendra和我是製造組）做了實體的prototype但忘記詢問編程組是否可行。 此外，我們到非常晚期才知道編程組需要額外的幫助。 儘管我最後即時提供了幫助，但是我們應該可以有更好的時間管理和溝通方式的。
