瀏覽網站已是現代生活中普遍的行為，每天醒著的時間我們大概都在上網，讓人們「看得爽快、用得愉快」是設計師當仁不讓的責任。出色的互動設計是留住使用者的不二法門，但是，該怎麼把人與機器之間的互動，變得跟人與人之間的互動一般自然，並不是簡單的課題，答案也不是非黑即白。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 模式，作為改善的基礎。

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

文章來源:http://www.inside.com.tw/2015/03/11/the-5-pillars-of-interaction-design

Google 行動裝置相容性測試檢測
網址：https://www.google.com/webmasters/tools/mobile-friendly/

 
 
蘋果所規劃 網頁設計  http://www.cc-design.com.tw/ 完全符合 google認證


 
更多案例