相信 Inside 讀者當中的遊戲玩家對 Twitch 應該不會陌生。原本 Twitch 只是直播影音平台「Justin.tV」在 2011 年 6 月推出的一個遊戲直播平台，但是在短短幾年內反而躍升成為主角，公司更是乾脆於去年二月更名為 Twitch，並於同年由 Amazon 以近 10 億美元的價碼收購，之後更是關閉 Justin.tv 服務，專心經營以遊戲直播為主的服務，目前網站上每個月平均有 150 萬的直播客（broadcaster）、每個月收看直播的觀眾數量也突破了一億人。

相關文章：〈我們來聊聊 Twitch，還有為什麼它值 10 億美金〉

上週，我們有機會拜訪了 Twitch 位於舊金山市區的辦公室，一起來參觀這個紫色電玩帝國吧。¹

▲ Twitch 的辦公室位於市區大樓中，辦公室大門最醒目的就是那個不斷播放遊戲實況的大螢幕。

▲ 無論是洽公還是應徵，訪客都要先在櫃台用 iPad 在 Twitch 的系統做登記。

▲ 這裡可是 Twitch，等候中的訪客不妨就讀一些電玩雜誌吧！不知道何時會換成電玩。

▲ 辦公室與我們所熟悉的網路公司差不多，掛有紫色氣球的座位代表新員工，氣球上會有他們的名字。

▲ 似乎每家公司對於會議室命名都有一套自己的規則，例如 Square 是以舊金山的街道命名，而 Twitch 則是以電玩裡的都市名稱來命名，各位讀者們是不是也覺得很熟悉呢？

▲ Twitch 員工不論職別，都是大家坐在一起，辦公室裡有隔間的只有會議室，而且所有的會議室，牆壁都是透明的。

▲ 彷彿是黑幫辦公室的「高譚市」。

▲ 在 Twitch 的辦公室看見遊戲角色的雕像或是道具模型一點也不奇怪。

▲ Twitch 的攝影棚，他們每週會拍攝自製的節目「Twitch Weekly」。

▲ 辦公室走廊、會議室內也隨處可見電玩的海報。

▲ 假如從 Twitch 大門右側的辦公室遠出望向大門，會發現不規則的結構。

▲ 每天早飯跟午飯，員工都可以到這裡吃，公司請的外燴餐點都是自助式的方式。有時，還會有人親自替你煎一個歐姆蛋捲呢！

▲ Twitch 的餐廳會供應熱食。

▲ 由設計師繪製的壁畫。

▲ 我想我們有理由相信 Twitch 的員工喜歡電玩勝過桌球 XD

▲ Twitch 的 open bar 有各種烈酒跟生啤酒，任何人任何時候都可以過來調一杯威士忌可樂，或是裝一大杯冰啤酒，跟同事在這裡討論開會。

▲ 既然是遊戲界的影音帝國，有個空間到處是各種遊戲主機也是很正常的。

▲ 除了遊戲主機之外，像網咖一樣的 PC 也不能少。

▲ 在 Twitch 工作的員工們很多是知名玩家，在這間遊戲室裡跟你一起坐下來打快打旋風的大男孩，可能就是前職業選手，所以連續五盤被完美 K.O. 也別太意外 XD

▲ 當我看到 CRT 螢幕的時候不免驚訝，但 Twitch 的員工告訴我，有些遊戲就是要在這樣的螢幕上玩，畫面的表現才好。

▲ 大家擁有過海報中的幾種搖桿與手把呢？

瀏覽網站已是現代生活中普遍的行為，每天醒著的時間我們大概都在上網，讓人們「看得爽快、用得愉快」是設計師當仁不讓的責任。出色的互動設計是留住使用者的不二法門，但是，該怎麼把人與機器之間的互動，變得跟人與人之間的互動一般自然，並不是簡單的課題，答案也不是非黑即白。UXPin 內容戰略 Jerry Cao 提出五個互動設計的支柱，把握這五個核心原則，讓你的網站脫穎而出吧！

1. 目標導向的設計（Goal-driven Design）

△Mailchimp 的人格塑造範例

也許你不太懂使用者研究，但還是得學會如何在設計中注入關於使用者觀察的洞見。利用以下這兩種技巧幫助你加強同理心：

1. 塑造人格：人格（persona）是從觀察目標使用者的行為與心理，所創造的虛構角色。思考「像是 Sally 這種週期性的購物者，會怎麼進行結帳流程？」這類問題有助於進行重要的設計決策。
2. 假想使用情境：使用者情境與「人格」有關，它解釋了人格怎麼使用網站。比方說「今天是黑色星期五，Sally 列了一長串禮物清單，準備在工作之前在網路上通通解決。」設想情境，讓你得以探究人格與產品之間的互動過程。

△詳細的經驗地圖

1. 繪製體驗地圖：把促成單一行為的各種事件，或者該行為觸發的後續狀況與情緒，全部寫下來。「Sally 因為在滑雪假期摔斷了腿而悶悶不樂，她得加緊腳步搞定聖誕節購物計劃。」

這三個方法塑造了完整的體驗圖像：使用者、情境以及整個旅程的情緒，都清晰可見。

2. 可用性（usability）

△EventBrite 的座位設計

「可用性（usability）」是設計的最低要求，如果使用者根本不知道怎麼用你的產品，當然也就不會想要擁有它。我們可以看看 EventBrite 的座位設計，這個服務讓使用者得以建立對號入座的活動，每種可能的情境都不放過（座位是一排一排的、還是圓桌，需不需要加上舞台），他們把複雜的多重步驟轉化為單一的線性路徑，使用起來不會頭昏眼花。如同 Eventbrite，系統的可用性必需讓使用者不費吹灰之力，使用者愈不需要思考「該怎麼用」，他們愈能輕易完成整個流程。

3. 預設用途與指意（Affordances & Signifiers）

這裡有兩個設計名詞：affordance（預設用途） 與 signifier（指意），

預設用途（affordance）的概念意味著，功能必須含有解釋自我的能耐，比如一條馬路在眼前，不用多加說明，人們就知道可以行走，而「指意」則提示了「預測用途」，用個例子來解釋就是，「平整」的路面，代表人類能夠安心的「用雙腳走在上頭」。

△來源：Affordances in Design

但是如果缺乏「指意」，使用者就很難察覺「預設用途」。在上面這個例子中，你可以看到按鈕設計的過程，最左邊的按鈕沒有任何「示意」的象徵，只是一般的文字而已，但是第三個多了圓角與漸層（gradient），網友自然知道這是可以點選的東西。

△來源：Affordances in Design

「指意」也有隱喻的作用，因為設計師也應該讓使用者知道「為何」他們要與某個功能進行互動。以 iPhone dock 來說，圓角的模樣讓我們知道這是可以點按的東西，而帶有隱喻性的圖像（電話、信封、音符），則傳達了互動的目的。

4. 可學習性（Learnability）

△來源：Consistency as the key to better UX

理想上，使用者在使用第一次之後，下次就該能反射性的執行所有動作，但是現實沒有這麼美好。良好的互動設計應該建立連貫性（consistency）與可預測性（predictability）。舉例來說，連結的處理，要嘛統一開新分頁、要嘛就全部都在原頁重新導向，不要兩種混在一起。圖片也是，不是全部都用 lightbox 呈現，不然就是都用開新分頁處理。連貫性能夠帶來可預測性，使用者自然學得比較快。

△來源：Breadcrumb Navigation in Website Design: Outdated or Trending?

另外一個改善「可學習性」的常見策略則是使用既有的 UI 模式。比如「breadcrumbs（中文譯作麵包屑）」，引導使用者在不同的頁面層級中切換瀏覽。無論使用者在哪個網站，這都是令他們熟悉的樣子，不用重新適應，當然你可以依照網站整體的設計風格，稍加調整。如果你的產品能夠讓人自然而然地學習，也會加深人們繼續使用的動機，同時也有不斷改善可用性的功效。

5. 給予回饋與回應的時間（Feedback & Response Time）

△來源：Applied Interaction Design

「回饋（feedback）」稱得上是互動的核心。每個互動都是使用者與產品之間的對話，產品應該更加友善、趣味而且益處多多。

可以是細緻的動畫、優美的微互動，或者只是「嗶」一聲，無論是哪種方式，都在傳達訊息給使用者，提示他們任務完成與否，以及下一步該怎麼做。比如社群網站管理服務 Hootsuite 的招牌貓頭鷹，在使用者長期靜止、沒有在 Twitter 上發出任何訊息時，就會「睡著」。這不只是個能讓使用者會心一笑的「小動作」，還可能將負面狀況（不再發送訊息）轉為正面行動。

△來源：Emotionally Intelligent Interaction Design

此外，回應時間的重要性也不在話下，總之，愈快愈好。想像一下，如果彈吉他時，每個聲音都延遲兩秒才出來，你會有多惱怒。

改善互動的五個步驟

了解互動設計的五項根基之後，現在就來看看實際上究竟怎麼執行吧！互動設計師 Stephen P. Anderson 提了一個有點費工、但卻能釐清許多事情的建議：找真人扮演介面，而你自己則作為使用者與之互動。一來一往之間，你就能發現介面可能傳來的古怪回應，真正進入設計流程之後，你就能及早避免設計出機械式、欠缺人性的互動形式。

角色扮演：找兩個人來，一個人扮演介面，一個人做筆記。製作一個立體的瀏覽器，讓扮演介面的人舉著。接著，你扮演使用者，開始跟介面對話，「介面」只能透過標籤（labels）、選單以及任何在 UI 上的東西，回應你的目的。

來源：Anatomy of the experience map

描繪故事：記下整個過程的每個步驟，包含任務與情緒。這個部分可以很簡單到只記下幾個使用者情境，也能複雜到含有 4 個階段的體驗地圖。想進一步了解詳情，可以參考 The Guide to UX Design Documentation。

△來源：Web UI Pattern 2014

簡化步驟：在網路上買車、買機票，這些都算是相當複雜的行為，設計這種類型的介面時，必須特別注意，把繁雜的目標簡化為幾個簡單的步驟（比方說先問終點、接著預計出發與抵達的時間），維珍航空的訂票流程非常值得研究。

限制使用者的選項：這應該是最難的一步了。但是你一定要盡可能減少使用者所能進行的動作。在設計的過程中，反覆詢問自己，是不是所有選項都一定要被塞在某段互動裡面，如果答案是否定的，那就以開啟另一段對話的方式，繼續互動。

注意「猶豫期」：使用者猶豫不決或者甚至停止互動的時間，稱為「micromoment」。回想先前角色扮演的練習，一定有某些時間是裹足不前的，遇到這種狀況，試著以改寫說明文案（microcopy）或者承襲既往的 UI 模式，作為改善的基礎。

就像魔術師的表演中，若有哪個細微的環節稍有不慎，就會毀了整場演出，一個糟糕的互動，也能造成整個使用者體驗大崩壞。希望透過系統化的解釋，能夠對您接下來的設計流程有所幫助。

本文原刊於電子豹。

舉辦線上講座、線下活動時，常常會遇到類似的問題：要怎麼做，才能利用電子報讓我的客戶知道「我要辦活動了」；為什麼他們報名了之後，又忘記要來參加？

今天帶來了擬定發信策略的範本，並提供可行的範例讓大家參考。

發信策略

如附圖所示，發送電子報的時間點，可以切成以下五個時間點來看

1. 活動前，尚未報名
2. 完成報名時（參考觸發式電子報）
3. 報名後，活動開始前
4. 活動中
5. 活動後

在擬定策略時，可以以這張圖內的寄送時間點作為參考，有些部分的使用頻率較低（選擇性），如 1. 活動中寄送電子報、2. 意見調查表。然而，這些都是在線下活動被大量使用的模式，因此預期未來會有相關的應用出現。

活動前

如果你不通知訂閱者，他們很難意識到活動的存在，雖然你可能已經放在網站上，但是大部分的人看信箱的頻率會比查看你網站的機率要高（當然，如果你是入口網站，這另當別論）。

活動通知中應該包含什麼樣資訊，才能準確傳達訊息，吸引訂閱者參加？這裡採用來自 Marketo 的例子來當作參考

寄件者：這部分就不多說了，收件者的信任是基本，只要你長期使用訂閱者認識的名稱，這裡也不需要多著墨。（不熟悉的朋友可以參考影響開信率的因素）

主旨：這裡的作法是把講座的內容放在前面，配合主講者的名稱。這裡會發現因為主旨較長，沒有辦法完全顯示，因此會建議如果要使用較長的主旨，請把次要的資訊放在後面。

電子報內容：不管你有多少話想告訴訂閱者，下面的資訊對於訂閱者都是必要的。包括：講座的內容（哪個部分對於訂閱者來說是重要的？）、講者和時間。以下是 Marketo、Qualaroo 寄送的線上講座電子報。

最後，兩封信相同的部分就是都有一個明顯、獨立的 call to action 讓開信者點擊。

來自 marketo 的線上講座通知

來自 Qualaroo 的線上講座通知

註冊 (報名) 確認

許多人可能會認為這部分是可有可無的，然而，一封成功的註冊確認信可以協助加深訂閱者「曾經冊註這個研討會」的印象。畢竟在忙碌時，許多人會不記得自己註冊了哪一個線上研討會。有沒有用？不一定。會不會造成使用者困擾？肯定不會，因此這封信在他們註冊的當下寄出，除非訂閱者有雙重人格，否則他會知道為什麼收到這封信。

以下是來自 salesforce 的線上講座確認信

行前通知

這次的線上講座，salesforce 一共寄出了三封提示信，分別為一星期前、一天前、一小時前。

內容的部分，所提到的資訊大致上與確認信有著相同的結構，因此這裡不另外討論

活動回顧

為什麼要寄送活動回顧（影片連結、簡報檔）？因為即使訂閱者因故沒有參加你的線上講座，你仍然可以透過這個方式建立與客戶的溝通橋梁。告訴他們：即使你當下無法參與，我們仍然提供你需要的價值。這保留了持續對話的機會，也許訂閱者下次仍願意聽你說話。

此外，如果你策劃的是一系列的活動，這是你傳達下一次活動最好的機會。因為影片、簡報檔這種高價值的內容往往能吸引到訂閱者的目光，而達到資訊傳達的目的。

其他小秘訣分享：

1. 如果你的使用者來自不同的時區，你可以貼心地幫他換算時間，讓使用者換算時間就像是購物時告訴他們運費多少卻要他們自己算出總金額，可以讓你瞬間損失一位訂閱者。
2. 如果你要寄送的目標有複數來源（例如：曾在網站上註冊、同時也在線下活動留過資料）的話，請避免不要重複發信給相同的對象，訂閱者可能會以為有兩場不同的活動。
3. 與其他工具並用：建立 Google Calendar 活動、Facebook 活動等工具都是可以有效提醒參加者活動的時間。