互動體驗設計的100個checklist：手機連線與硬體裝置篇

互動設計不只設計體驗，更是設計人與人之間的連結，而背後會有多少的checklist？
由Loftwork精心企劃每月一次與設計對話的Design Table，希望透過邀請不同領域講者，以各自專業角度分享設計新知、概念和方法。本次是以「互動體驗設計的100個checklist」為題的第二場講座，特別邀請二三設計負責人蘇巧純及當若科技藝術陳炯廷來談談「手機連線與硬體裝置」，透過將實際執行案例的抽絲剝繭，分享其中的關鍵技巧與測試方法。

「開始之前，請大家先拿起手機！」

在二三設計負責人蘇巧純（以下稱巧三）帶領大家體驗了一場刺激有趣的《快轉⾃行車 1 2 Roll》後，正式進入本次「手機多人連線」主題。從分析手機遊戲運作原理著手，程式設計師背景出身的當若科技藝術陳烔廷（以下稱Tom），以技術面侃侃而談，讓大家理解手機多人連線所需必備方程式。

首先，第一個重點是“網路”。Tom認為：「順暢地連上網是手機連線體驗最為重要的基礎建設，也是活動執行當中最難達成的部分。」Tom透過解析過往案例並分享了幾件值得大家思考的方向：

試問使用者的移動裝置要如何連網？
大部分的狀況會有兩種，第一個是使用電信網路的4G上網服務，另一個是現場提供的Wi-Fi，但也因兩者本質上的不同，連網流程的差異，影響了使用者體驗的即時性與參與意願。

觀眾的屬性將會決定使用哪種方式連網
定義目標觀眾及分析其網路使用習慣，將會是網路規劃的極大考量之一，如身處異地的外國人或置身本地的科技宅等不同網路使用量的體驗者，規劃的思考方向也不盡相同。

場地也會決定連線的方式？
如免費提供Wi-Fi的咖啡廳或只能使用電信方案的戶外場地，場勘時需確實掌握現場網路連線狀況，因應環境找到最適合的解決方案，而可插SIM卡的4G分享器也是不錯的選擇。

現場主機設備的連網規劃？
確認現場有線網路或Wi-Fi提供情況，如經常於國際間展覽，需與主辦方確認網路設備廠商資訊與資費方案等等細節

在網路設備及環境等問題都經過評估與規劃以後，在技術方面，下一步需要謹慎思考的是“壓力測試”，這也是驗證體驗流暢度的最佳方法。

機器人大軍將讓你事半功倍
如何測試伺服器是否撐得住？Tom表示：「那就請寫一隻機器人大軍，讓程式自動去跑吧。」Headless browser是指無需圖形界面環境下的瀏覽器，它執行時不會有按鈕或畫面，全部都由程式去串接，目前最流行的Headless browser是PhantomJS，而即將問世的Headless Chrome技術值得令人期待。

如何設定壓力測試值？要給多少人玩呢？
請思考「體驗呈現裝置為何」及「程式運算複雜度」兩部分。如針對視覺舒適度及體驗者接受回饋的辨識度，設定出不同顯示裝置的同時在線值，最後再將程式運算難易度也考慮進去，算出此多人連線裝置的參與人數，Tom提醒大家：「而測試值至少大於實際參與人數的一至兩倍。」

請務必與機器人大軍一起同樂
此目的在創造同時多人在線的環境，並實際了解多人同樂的過程，自身感受是否受到影響？體驗如果是開心愉悅的，那就可以認定這套裝置屏除掉網路的問題，基本上設計是過關的。

再來，Tom替大家解開技術呈面最後一個關鍵要點，即為「程式效能」。

試需求設定回饋的傳輸量和即時性
依不同類型的多人連線需求，來設定回饋的傳輸量和即時性，並思考其不影響體驗的最低門檻，可以大大減低伺服器的負擔。為了讓大家更容易瞭解，Tom以目前最常用的網路封包分析軟體Wireshark為例，示範說明網路封包資料運作原理及功能。

在解決了上述許多技術性問題後，Tom表示「互動裝置最終還是回歸到體驗帶給“人”的感受。」並以使用者為中心思考，針對讓目標觀眾有意願且快速加入互動做了幾點說明。

依照需求來選擇製作App或網頁版本
將多人連線製作成App或網頁版本各有其優缺點，App能實踐較多功能，畫面精美，但體驗者須下載，還需考慮Android與iOS版本製作及上架等問題，而在網頁上體驗的話，能應用的功能較少，但直接掃QR-code或輸入短網址即可快速進入，使用意願相對提高，但也有各家瀏覽器呈現效果不同和離開後可能回不來等困惱。

思考如何拉近與使用者的距離
「QR-code其實也是有門檻的。」Tom認為掃QR-code需安裝軟體，提醒大家有時一個容易記憶且方便輸入的短網址也是不錯的選擇。

分享按鈕可能已經過時，花點時間做個美美的拍照牆吧！
不要忘記視覺設計的重要性，直接於活動現場規劃美美的拍照牆，是目前最有效果的行銷方式。

當大家願意用跨領域的心情去完成當中每一件重要的小事，才會成就一個好的互動設計體驗。

二三設計負責人 蘇巧純

在Tom分享許多技術觀點後，巧三也針對互動設計人才所需具備特質提出看法：「互動設計需要跨領域的知識與經驗完美結合，當大家願意用跨領域的心情去完成當中每一件重要的小事，才會成就一個好的互動設計體驗。」而當程式設計師只想坐在電腦前面寫code，不願意走到現場實際觀察使用者操作裝置的方式，那互動體驗裝置是不會成功的。

緊接著由巧三分享本日另一個主題：實體裝置。到底是每執行一個動作就要把訊號傳出去？還是累積多久再把訊號傳出去？傳遞節奏能不能提供觀眾準確的回饋？其實實體裝置跟多人連線有許多相似之處，但在這樣的體驗中，實體裝置要考慮的又更多了，由二三設計執行的大型實體裝置為例，巧三提出了幾個重要的checklist與大家分享。

分析體驗者進而創造安全有趣的裝置
透過觀察與分析目標觀眾，裝置要設計多高？是否要倒成圓角？裝置造型與現場的一致性？是否需要預留維修孔？其實這是一連串需要互動設計師去設計且解決的問題。

成就一個好的互動體驗，需要多方領域的溝通與協調
人是視覺的動物，因此常常忽略比視覺更重要的細節。巧三特別用執行宗教博物館「六字大明咒」的經驗提醒大家，不論裝置大小，都有非常多視覺以外的步驟需要溝通協調並進行確認。

Projection mapping需安排投影機的調校和時程
投影機架設位置及其開角的特性都會造成成像的變形，而顯示牆面上所有的凹凸曲面也都會造成誤差，所以製作動畫時的調教很重要，顯示模型先製作出來，由動畫配合模型才能縮短工期。

最後巧三特別提到：「實體裝置是無法完全被數位化體驗取代的。」就算是一顆按鈕，也能引起人們感知的共通性，所以博物館還是大量使用實體裝置。Tom也呼應巧三的看法：「大家或許都有看過The Voice，當導師評審按下大大的按鈕時，那是多令人驚喜又實際的體驗回饋，這可能是平板無法取代的。」

接下來由巧三帶領參與者做互動體驗設計的創意發想練習，主題是「多人連線遊戲的創意提案」。請參與者於便條紙上寫可能的客戶及多人連線可能進行的方式，與小組成員一同討論，最後成就一場多人連線遊戲創意提案與大家分享。

過程中，小組成員將自身經驗裡有趣、令人愛不釋手的遊戲元素進行拆解組合，並思考本次講者提到的多項checklist，各組經過激烈的討論後，產出了許多精彩有趣的提案，其中有透過對手機吹氣使主燈升空的台北燈會狗年主燈裝置，能馬上吸引大量人潮；有用音樂對抗來學習國樂的十面埋伏水果大戰，使互動體驗能寓教於樂；另外兩組是非常適合追求刺激感的多人連線裝置，分別是運用AR/VR技術為電影宣傳的虛擬打怪系統和用手機連線搶奪洋芋片的挑戰賽裝置，而最後一組是利用刺激的估價對抗賽，替特賣會提供不同形式的行銷活動方案，除了炒熱現場氣氛，還能讓有品味的體驗者登上品味排行榜。

在五組參與者提出許多有趣的提案後，Tom和巧三提供一些專業建議與看法，使參與者能更深入且具體的思考「讓目標觀眾有意願且快速加入互動」這件事，如西門町的人流大多來自是路過此地，以快速的網頁體驗為佳，因此常常需要反過來調整或改變互動方式，來符合同樣能傳達此效果的創意。而成功的多人連線體驗常常來自刺激感，沒到最後不知道誰會贏，優勝者能即時拿到回饋，最終人們總是期待成名的瞬間，Leaderboard能促使人們投入更多精力去完成它。

最後，他們希望用這兩場講座將過往執行互動體驗所學到的一些知識跟經驗與大家分享外，「更希望讓每個人愛上互動設計。」巧三說。