微互動:設計良好 App 的秘密

用手打開電燈:我們每天都會體驗到的微互動範例
我們每天都會體驗到的微互動範例

最好的產品只做好兩件事情:功能 (feature) 和細節 (detail)。功能是吸引人們注意,前來使用,而細節是讓我們繼續使用。細節正是讓我們的 app 在競爭出眾的原因。

微互動 (Microinteractions) 是傳達令人愉悅的回饋裡,其中最好的技巧之一。

條條大路通人本設計 (human-centered design),在那裡,使用者擺在第一位。微互動通常被視為輔助的、次要的,但是它可以在使用者發現它的時候創造滿足的感覺。身為設計師,熟知微互動的隱藏性 (invisibility) 跟設計它們一樣重要。你必需做出跟人互動的感覺 (feel human),同時也可以完成任務。

到底什麼是微互動?

微互動屬於最終成品的一小部份,這一小段時間完成一個小任務。

微互動首次出現在 Dan Saffer 的書 “Microinteractions”,提到這小小的細節通常提供這些必備功能:

  • 傳達某個動作的回饋或結果
  • 完成單一任務
  • 增強某個直覺操作的感覺
  • 幫助使用者將行為的結果視覺化,並且避免錯誤

以下是一些微互動的範例:

  • 將 iPhone 調為靜音的時候,震動通知會隨著螢幕上的圖示出現。
將 iPhone 調為靜音的時候,震動通知會隨著螢幕上的圖示出現。
  • 讓使用者覺得可以點擊的介面動畫(滑鼠移上去會改變顏色的按鈕)
讓使用者覺得可以點擊的介面動畫(滑鼠移上去會改變顏色的按鈕)
來源:Dribbble

為什麼微互動有效果

它迎合使用者天生想要掌控 (acknowlegement) 當下的情況,所以有效果。使用者立即知道動作被接受了,所以視覺獎勵可以讓他們開心。同時,微互動還可以指導使用者如何操作系統。

可能的用法

微互動的美,在它可以用在很多地方,任何可能的動作都有機會。而一般來說,比較常出現在這些地方:

顯示系統狀態

第一個易用性概要原則 (usability heuristic principles) 由 Jakob Nielsen 發表,提到:讓使用者充分了解發生什麼事情,使用者期待立即獲得回饋。但是,有時候一個 app 需要時間完成某個動作。

所以,這個介面可以讓使用者理解目前發生什麼事情。

展示下載檔案的進度條動畫,在 18% 的時候變慢,且在 43% 的時候通知失敗
上傳和下載的進度條。來源:Dribbble

或知道身在何處:

捲軸進度條
捲軸進度條

小訣竅:不要讓使用者感到無聊。讓他們保持了解現況,用進度呈現。(例如:讀取進度條讓他們有參與感,還可以避免覺得困惑。)

強調變化

有時候我們要秀出提醒,確保使用者真的看到了,而動畫就會有幫助。它吸引使用者注意,讓他們無法忽略你認為重要的事情。

展示收到新郵件的動畫
收到新郵件。來源:Dribbble

小訣竅:很多情況下,動畫效果是用來吸引使用者注意重要的細節。你應該遵照 KISS 原則*,因為微互動本來就應該又小又簡單。

Keep It Simple and Stupid,讓它簡單又直覺


維持情境一致

藉由動畫,讓使用者很順暢地轉換情境,解釋畫面上元件安排的改變。在行動裝置和智慧型手錶上特別重要,因為畫面放不下一堆訊息。

展示 Material Design 可以維持情境一致的互動
Material Design

小訣竅:每個頁面的脈絡必需很清楚,使用者才知道看到的東西是從哪裡來的。兩個視覺狀態之間的切換應該要清楚、順暢又簡單。將主題有一致的感覺,也就是把所有互動緊密連結的風格。

輸入視覺化

任何一個應用程式,最重要的就是資料輸入了。微互動讓它變得特別,用現有的元素傳遞回饋。

展示美國運通卡輸入信用卡號和到期日期等資訊的互動
來源:Dribbble

小訣竅:微互動幫助資訊顯示的安排,引導使用者到達目標。

行動呼籲

微互動擁有鼓勵使用者實際行動的力量。它為使用者經驗帶來移情作用 (empathy*),但是要確保視覺線索和動畫適合他們。永遠要記住耐用性:微互動出現 100 次之後會讓人煩躁嗎?還是簡潔又順暢?

譯註:在此處是指進入你策劃好的情境


展示卡通風格的臉,注視移動的游標,游標移動到 Click Me 的按鈕時露出笑臉

小訣竅:仔細觀察使用者的情緒,它在使用者互動很重要。從情境和使用者研究找到線索,就可以做出能夠不斷重複使用的設計。

要記得的重點

  • 微互動利用回饋、通知與指示 (feedback, notifications, and instructions),成為互動體驗的強化器。
  • 微互動應該要能節省時間,用的是不會讓使用者感到無聊或分心的短暫資訊溝通方式。它們應該像狡猾的眨眼,吸引使用者注意。
  • 瞭解微互動背後,你的使用者和情境,可以讓它們更精準、有效果。
  • 微互動必需通過長期使用的考驗,有些在第一次覺得被逗樂了,卻在第 100 次覺得很煩。
  • 將人性用在微互動,專注在視覺和諧。動畫應該感覺很流暢,讓微互動栩栩如生。

結論

設計要貼心 (design with care)。在設計的時候,想著人們如何用、用什麼裝置,在設計這些小東西的時候,將使用者的想法和行為推理演練一遍。注意每個小細節是讓人機互動簡單易用的成功關鍵。好的設計必須前後 (full-stack) 都達成,從一個功能,小到微互動都是。

推薦閱讀: