在產品設計中，細節設計是不可忽略的一個層面，而在細節層面更注重使用者互動體驗的產品，也往往更能留下使用者。而這類細節層的設計，可以體現在“微互動”裡。那麼如何理解“微互動”的存在與應用？本篇文章裡，作者就進行了一定總結，一起來看一下吧。

微互動這個概念在設計文章中並不少見，但是本文從互動模型開始梳理微互動的結構和設計點。透過大量案例很好的展示了微互動的核心設計方法和微互動讓人喜歡或者討厭的原因。

正如題目所說：細節決定成敗，微互動就是利用細節提升產品體驗和設立品牌標誌。

一、摘要

直到今天，人機互動已經有很長時間的發展。從例如烤麵包機的簡單產品到銀行應用程式類的複雜數字產品，我們每天進行上百次的互動。這些互動轉化為產品的可用性，最終轉化成使用者滿意度、信任度和產品整體體驗。

在過去的二十年裡，設計師們一直在關注這些互動（按鈕、滾動、長按等）。從電腦大螢幕到移動裝置、智慧手錶以及現在的可摺疊裝置，互動也在不斷地發展。本文研究了微互動的結構及其與互動模型的關係，審美體驗的不同驅動力，以及我們如何透過改變微互動的元素來最佳化體驗。最後，我們討論了自下而上的產品構建方法。

二、簡介

自燈泡、收音機、門鈴等電氣裝置出現以來，微互動一直存在於我們的生活。微互動和技術共同出現、發展。在我們的日常生活中充滿了與周圍物體的微互動，例如使用烤麵包機、解鎖手機、將手機切換到靜音模式、控制音量等。

從簡單的按下按鈕到搖動手腕啟用智慧手錶，微互動隨著技術的進步而不斷髮展。像複製文字或移動檔案這類我們如今習以為常的、無形之中的微互動，都曾是新穎的微互動。觀察微互動有助於設計師改進產品。

有趣的是，設計師將現實生活場景投射到產品來建立微互動，如剪下-貼上、放大-縮小等。這些細節不僅提高了產品的可用性，也透過直觀的互動降低使用者學習難度。

我們如何準確定義什麼是微互動，什麼是互動？

論文《開啟移動微互動》（Ashbrook，2010）將微互動定義為“接觸裝置開始到完成的時間不超過4秒的互動”。而《微互動》一書（Saffer，2013）將其定義為：“微互動是圍繞著單個用例的產品使用場景——它們有一個主要任務。”整個應用程式或產品可能只是一個微互動，例如，天氣應用程式（圖1。1）或烤麵包機，因為它們只關注一件事。

圖1。1 天氣應用程式能被看作是一個微互動，因為它只顯示天氣。

圖1。2 LinkedIn 的“喜歡”按鈕由兩個微互動組成，（a）當你長按“喜歡”按鈕時，它會開啟一個空間展示多個表情符號以供選擇（b）你選擇表情符號傳送給帖子。

一個功能可以由多個微互動構成，例如LinkedIn的“喜歡”按鈕（圖1。2），人們可以對帖子傳送不同的表情符號。因此，微互動是一個功能模組，或者是整個產品。與產品互動時，微互動也許能幫助使用者瞭解做什麼，如何做，後續是怎樣。精心設計的微互動使產品變得直觀，優化了產品的使用者體驗。

當微互動打造了與品牌產生共鳴的特殊體驗時，它化身為了品牌標誌。專業術語稱之為“標誌性時刻——產品或服務中給人留下持久而難忘印象的突出互動”（Janhagen， Leitch & Judelson， 2020）。

Facebook的“喜歡”按鈕是它的標誌性時刻。微互動並不僅僅侷限於視覺，它們可以是聲音、觸覺、實體硬體或手勢互動。Snapchat的通知作為產品的標誌性時刻是因其獨特的聲音。同樣地，iPhone有一箇中心按鈕作為蘋果的標誌，它有多個微互動方式。

微互動通常首選（Narvhus， J。M。 2016）：

溝通反饋。

開啟和關閉某項功能，如將手機靜音。

實現一個單一的任務，如喜歡一個Facebook上的帖子。

控制一個正在進行的程序：顯示更改或系統狀態，如載入條或狀態圖示。

改變一個設定。

防止人為錯誤。

檢視或製作內容。

我們將在之後的章節中研究一些微互動案例。

三、互動模型與微互動結構

1. 人類處理器模型

在進入互動模型之前，我們將嘗試研究心智和心智表徵，以更好地理解人類如何與世界上的物體互動。（Newell & Card， 1985）文章談到了三個不同的處理器：感知處理器、認知處理器和運動處理器是如何工作以理解周圍世界。

認知處理器與長期記憶和工作記憶一起工作，從現有的知識中提取物體、感覺、行動等的表徵，以理解來自知覺處理器的輸入。一旦認知處理器完成處理，它就會向運動處理器發出訊號，以特定方式對特定情況採取行動。心智表徵是現實世界中事物如何運作的心智模型或理解。

2. 諾曼互動模型

唐-諾曼的七個行為階段（諾曼，2013）（圖2）是一種更清晰的心智學形式，解釋了人類如何與物體互動以實現目標。目標可能是開啟一盞燈或在移動應用程式上進行線上交易。讓我們把手機解鎖的簡單目標分解成七個行動階段。

目標是手機解鎖。

我如何解鎖手機？輸入密碼或掃描手指指紋。

選擇哪個方式？如果我選擇輸入密碼，那麼就在螢幕上按順序點選密碼。

一旦我有了行動規範，就可以執行任務。

點選回車鍵後，將看到後續發生的事情。

我看到我已經到達了主介面。

我根據以往經驗判斷是否已經完成了目標。

在這個迴圈的每個階段，都有一個輸入->處理->輸出的過程。在宏觀層面上，我們也在遵循同樣的過程來達到我們的目標。我們可以從行動模型的七個階段推匯出互動週期（Norman， 2013）（圖3）。

互動週期包括執行過程和評估過程，前者是行動所需資訊差，後者是行動發生時各類情況所需理解的資訊差。整體使用者體驗取決於互動過程中互動週期的每個部分。微互動的目標是消除差距，使產品變得直觀。現在讓我們看看微互動的基礎結構，瞭解它們如何幫助消除資訊差。

3. 微互動的結構

微互動之所以強大，不僅僅是因為它們的細微互動差別或迷你尺寸，還因為它們構建的方式。微互動的結構包括四個部分（圖4）（Saffer，2013）：開啟微互動的觸發器，決定微互動如何運作的規則，以及影響微互動的元規則——闡明規則、迴圈和模式的反饋。

觸發器可以由使用者觸發，例如點選圖示、填寫表格等，觸發器也可以由系統產生，例如低電量提示框，通知使用者電池電量不足。

讓我們以Duo應用中驗證使用者的微互動為例。

觸發器：

向我發一個推送通知是微互動的觸發器（圖5（a））。

規則：

它將傳送帶有兩個動作的通知（圖5（b））。使用者必須點選這兩個動作中的一個（圖5。（c））。

反饋：

一旦使用者點選批准，它將顯示帶有“登陸”的綠色提示。（圖5。（d））

迴圈和模式：

如果你選擇了在7天內記住本次登陸，下次登入時它將直接顯示綠色提示，而不是向你傳送推送通知。

現在當我們解構微互動並理解其結構時，微互動的結構支援行動七階段理論，最終幫助消除執行和評估之間的鴻溝。精心設計的觸發器便於使用者進行計劃->指定->執行行動，精心設計的規則和反饋便於使用者進行感知->解釋->對比結果確認完成目標。我們將在下一節中談論觸發器、規則和反饋的設計，以瞭解微互動如何有效構建所需的使用者體驗。

我們回看心智部分，認知處理器不僅包含了不同事物如何工作的心智模型，並且隨著我們在日常生活中對新物體的體驗而不斷地發展。從這些心智模型中，設計師可以建立概念模型。作為關於產品和功能運作的高階計劃，概念模型一旦被建立就能被轉化為行動模型的七個階段，從而幫助我們建立對使用者來說很直觀的微互動。這是一種自下而上的方法，用於建立互動 -> 功能 -> 產品。

四、審美與微互動

在上一節中，我們談到了互動模型和微互動的結構，並探討了它們如何攜手使產品變得直觀好用。現在我們將關注動態審美體驗，以及微互動如何在產品的微觀層面建立體驗。

審美體驗的韻律之舞有一個內在的、動態的結構。杜威指出了體驗建立的相關過程，如累積、儲存、緊張張力和預期，來指稱體驗的內部動態（McCarthy & Wright， 2004）。

完整的使用者體驗是這些動態的集合，它可以根據使用者過往經驗和知識認知而變化。過往經驗和任何審美經驗都取決於上下文：使用者的過往和能力，人工製品的技術，以及互動發生的任一物理、社會空間（Petersen， Iversen， Krogh， & Ludvigsen， 2004）。當我們與物體/產品互動時，觸覺、嗅覺、視覺和聽覺都會喚起體驗。

在過去的幾十年裡，設計師們一直在關注這些觸發奇蹟的互動。互動不應該僅僅是傳達內容和完成任務，它應該引人思考，並鼓勵人們以不同的方式思考變化。我們將展示一些喚起了不同審美體驗的動態微互動案例。

1）積累：

指伴隨著體驗時間展開的積聚。我認為谷歌支付作為微互動建立了使用者體驗，幷包含非常優秀的展開介面和支付完成音效。

這個之所以判定為其微互動，是因為它只專注於一件事，而且建立了非常充實的體驗。這個互動開始於點選支付端->選擇銀行卡->載入->支付完成（圖6）。動畫和音效帶來了一步步徐徐展開的體驗感受。

2）留存：

指保留一些過往事物的趨勢，不論體驗還是內容。文字或資訊的儲存對優秀使用者體驗來說確實是必要的，畢竟這樣能減少認知負擔。在網站和應用程式上填寫表格時，許多微互動都保留了之前的填寫資訊。

這類微互動的一個非常簡單的例子是，當你複製一個連結並試圖將其輸入網路瀏覽器時，瀏覽器會顯示直接貼上連結的選項，甚至顯示你複製的內容（圖7）。我們在這此觀察到與微互動的結構不同的是重點更多地放在了互動的反饋上，它傳達的狀態是：你複製的內容已儲存，並可以用來搜尋網頁瀏覽器。這是一個展示了我們如何調整微互動側重點來最佳化體驗的優秀案例。

3）張力：

指體驗內和參與體驗的人之間的關聯。這是社交媒體和流媒體平臺使用的一種技術，當用戶期待在短時間內快速閱覽內容時，使用者不斷下滑來反覆觸發重新整理的微互動（圖8。） 。微互動帶給使用者參與感以牢牢抓住其注意力。它帶來的延遲滿足，讓使用者在想快速瀏覽內容時耐心等待。

這個特殊的微互動的重點是方式：即在內容載入之前顯示一個載入器。

4）預期：

它包含兩個時間階段。第一階段是使用者在互動中開始期待，第二階段是使用者從互動中得到期望反饋。我想到的微互動是Google Pay India的刮刮卡獎勵（圖9）。

這個特殊的微互動為它在印度帶來了巨大的成功。人們喜歡期待好事發生，即使期望沒有發生。若是期望發生，那期待就是值得的。支付完成後，使用者進入刮刮卡獎勵介面，對刮獎產生期待，點選卡片進行刮獎。刮獎微互動的重點是動作的觸發上，兼具有趣性和參與感，觸發本來可以只是一個點選按鈕，但他們設計了一個刮擦動作作為觸發。

上文提到的各種例子可看出：透過調整微互動的元素來最佳化體驗。微互動小而強的原因在於：它們是產品的差異化細節。好的微互動能讓產品提升一個等級。

五、微互動會引人討厭嗎？

我們認識了精心設計的微互動在創造美好體驗方面的力量，現在讓我們來探討一下，如果糟糕的微互動可能會引發什麼問題。

我想到的案例是手機通知。並不是說通知很糟糕，而是它設計得如此之好，以至於它有違使用者的意願。通知是由系統發起的觸發器，它僅顯示部分資訊來吸引使用者點選。

每個人都會遇到這樣的情況：明明只是想看看時間，但在看到通知時點選進入資訊，無聲無息之中半個小時就耗費了。這不僅僅耗費了時間，更嚴重的是人們在駕駛時也會分心看通知。

另一個案例是 Facebook 的著名的“喜歡”按鈕。這個精心設計的微互動，是 Facebook 的標誌，但沒有人意識到一個微互動可以對人們的生活產生如此大的影響。近期 Instagram 停止顯示帖子上的點贊數，因為它對使用者行為產生了負面影響。上面的例子也顯示出：小事情可以產生大影響。

微互動也會令人討厭，例如，在填寫表單最後點選提交時，彈出一個對話方塊（圖10），說表單填寫中存在錯誤。這裡的觸發器是提交按鈕，規則是顯示一個對話方塊，反饋是靜態文字——“有填寫有誤”。

這裡的微互動形式是錯誤的，如果填寫有誤，提示應該在出錯點附近。而且這裡的反饋是糟糕的靜態文字，對使用者沒有任何用處，因為它沒有說明出錯的位置和型別。因此，微互動的使用和場景真的很重要。

六、結論

縱觀全文，我們探討了什麼是微互動，以及如何建立符合互動模型的微互動來消除執行和評估之間的差距。接下來，我們研究了動態審美體驗，以及我們如何在產品的微觀層面上用微互動創造美好體驗。

設計師有幾種方法來建立微互動，方法一是自下而上思考，把一切都想得越小越好後，再建立功能。另一種方法是把整個產品看成是一個微互動，如果你想增加另一個功能，那麼就把它看成是另一個只包含一個微互動的產品。

我相信谷歌支付是以這種方式建立的，因為它是從支付開始，且只專注於支付，後來才引入了獎勵和其他內容。

微互動有助於建立一個品牌標誌和提升使用者體驗。我們喜歡或者討厭產品的根源正是細節。細節是向用戶展示你以使用者為中心併為使用者著想的方法。這就是微小的事情會帶來巨大差異的原因。

參考文獻

［1］ Saffer， D。 （2013）。 微互動：細節設計。 Sebastol： O’Reilly Media， Inc。

［2］ Daniel Lee Ashbrook （May 2010） 開啟移動微互動博士論文， Georgia Institute of Technology

［3］ Janhagen， Leitch， Judelson （2020） 尋找標誌性時刻 由Idean和Capgemini Invent出版。

［4］ Narvhus， J。M。 （2016）。 微互動如何提升移動支付的信任度？

［5］ Allen Newell & Stuart K。 Card （1985） 人機互動中的心理科學展望， Human-Computer Interaction。

［6］ McCarthy & Wright （2004） 將技術作為體驗的實用方法。在McCarthy & Wright Technology as Experience （pp。 62-65） Cambridge， MA： 麻省理工學院出版社。

［7］ Petersen， M。G。， Iversen， O。S。， Krogh， P。G。， & Ludvigsen， M。 （2004）。審美互動：一個實用主義者的互動系統美學。 DIS ’04。

［8］ Norman， D。 A。 （2013）。 日常生活中的設計。 麻省理工學院出版社。

原文作者：yatrik raithatha（本文翻譯已獲得作者的正式授權）

原文標題：Microinteractions：Tiny things make a big difference

原文連結：https：//medium。com/@yatrik12/microinteractions-5313c4468ffc

譯者：曹競羽；授權獲取：劉倩茹；稽核指導：王翎旭；微信公眾號：三分設（ID：SFun-Share）；使用者體驗設計師成長社群

本文由@三分設 翻譯釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基於 CC0 協議。

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。