通過微交互更好的用戶體驗

已發表: 2022-03-11

在設計產品時，有很多方法可以改善用戶體驗，包括定義角色、結構良好的信息架構和精心編寫的內容。但是在設置了這種高級結構之後，為用戶創造愉悅感的是較小的交互設計細節。

這些被稱為微交互的細節是產品中的各個時刻，旨在完成單一任務，同時增強自然產品流程。向上滑動以刷新數據、喜歡內容或更改設置都是微交互。它們還可以包括簡單的 UI 動畫——例如，菜單在點擊時滑入的方式，或者卡片在滑動時滑出屏幕的方式。

通常，用戶甚至不會有意識地註意到微交互，但它們微妙的細節使產品更有趣、更易於使用，從而改善了用戶體驗。

微交互的好處

微交互和 UI 動畫非常重要，它們可以決定設計的成敗——或者正如家具設計和建築領域的名人 Charles Eames 所說：

細節不是細節。他們做設計。

將微交互整合到產品中的一些主要好處是：

由於更流暢的 UI 交互，對用戶產生積極的情感影響
根據用戶採取的行動向用戶提供即時反饋
以更流暢、更直觀的方式引導用戶瀏覽應用程序
鼓勵用戶通過響應通知或在共享內容時與應用交互
防止用戶錯誤

微交互設計最佳實踐

現在我們已經圍繞微交互的作用建立了一些定義和上下文，並給出了它們如何改善用戶體驗的示例，讓我們討論創建微交互的最佳實踐。

電商微交互 — 電子商務產品顏色選擇微交互。（由 Mykolas Puodziunas 提供）

識別並理解用戶的問題

任何用戶體驗設計的第一條規則是發現和理解用戶問題——微交互也不例外。了解用戶需求的最佳方式是進行調查或訪談，或通過用戶研究觀察行為。 Toptal 設計師 Ivan Annikov 在他的文章“Going Guerrilla: Affordable UX Research Tips And Alternatives”中更深入地了解了用戶需求。

保持微交互自然

目標是以直觀和自然的方式彌合用戶和產品之間的差距，因此避免加載時間過長或可能分散用戶注意力的奇怪動畫。相反，創建與產品無縫銜接的設計。微妙是微交互的關鍵。不要讓用戶感到困惑和思考，“那是什麼？”

電子商務微交互用戶體驗模式 — 將產品添加到購物車的電子商務微交互。（由 Elior Helose 提供）

測試和迭代用戶測試的結果

即使是經驗豐富的設計師也很少在第一次嘗試時就完全正確地完成設計。這就是為什麼使用用戶測試和迭代設計過程是在產品發布之前減少可用性缺陷的簡單方法。

在用戶測試階段，對微交互進行可用性測試和分析，並在下一個設計階段進行修改。重複此過程，直到可用性問題和痛點得到糾正。

遵循微交互的結構

根據 Twitter 的高級產品設計師和“微交互：細節設計”一書的作者 Dan Saffer 的說法，微交互有四個部分。

觸發器——觸發器啟動微交互。一種類型的觸發器是打開和關閉功能的撥動開關。
規則——規則確定微交互如何響應觸發器並定義交互期間發生的情況。例如，手電筒應用程序使用按鈕作為打開和關閉燈的觸發器。
反饋——反饋告訴用戶在微交互過程中發生了什麼。反饋的一個例子是帶有內聯驗證的註冊表單——如果字段填寫正確，邊框顏色會變為綠色，如果有錯誤則變為紅色。通過這種方式，用戶立即知道某事是對還是錯。
循環和模式——循環和模式定義了微交互的元規則以及微交互在重複使用時如何變化。例如，在電子商務中，當用戶之前購買過該商品時，“立即購買”按鈕可能會更改為“購買另一個”。

解構微交互設計

為了展示設計微交互背後的思考過程，讓我們解構 Google 的一個微交互：Google Docs 中的文件名建議微交互。

這種微交互採用文檔的第一行，並建議將那段文本作為文檔的名稱，從而使名稱創建過程更加直觀。

Google Docs 文件名建議微交互 — Google Docs 文件名建議。

設計微交互的過程與任何設計任務相同：識別用戶痛點並修復它。在牢記之前的最佳實踐的同時，讓我們開始找出問題所在。

用戶問題

保持文檔井井有條的一種簡單直觀的方法是簡單地描述性地命名它們。在大多數文本編輯器中，“命名您的文檔”字段保持空白，即使文件名很有可能最終與文檔的內容相關。這是一個值得通過微交互來解決的過程。

谷歌的解決方案

Google Docs 以兩種方式處理此問題，具體取決於用戶的選擇：1) 用戶可以在輸入任何內容之前單擊名稱字段並立即更改文檔名稱，並將“無標題文檔”更改為他們選擇的名稱，或 2 ) 一旦用戶鍵入第一行文本，Google 就會自動將其填充為文檔名稱。用戶可以保持原樣，也可以更改它。

讓我們檢查一下細節：

觸發器

可能有一些可能的觸發器來命名文檔，使用文件 > 另存為菜單功能，或者在 Mac 上按鍵盤上的cmd+s （在 Windows 上按ctrl+s ），就像在桌面應用程序中一樣。但這些都沒有利用網絡的交互性，也沒有特別增強用戶流量。

相反，Google Docs 的主要觸發點是簡單地單擊文檔名稱字段。字段上的懸停狀態顯示“重命名”工具提示。第二個觸發器是File > Rename ，它突出顯示名稱輸入字段。

Google Docs 重命名工具提示微交互 — Google Docs 使用了一個簡單但非常有用的工具提示。

規則

規則定義單擊觸發器後發生的情況。在這種情況下，第一行文本將顯示為文檔名稱。但是如果用戶不想將第一行文本作為名稱怎麼辦？當用戶點擊姓名輸入欄時，所有的文字都會被選中，並會隨著任何擊鍵被刪除，這樣用戶就可以很容易地創建一個新的姓名。

Google Docs 突出顯示文件名微交互 — Google Docs 會突出顯示文檔名稱，這將允許用戶立即開始創建一個新名稱。

回饋

更改輸入字段邊框的顏色是一種常見的交互模式，Google Docs 在這裡使用它來為用戶提供即時反饋。

Google Docs 主動邊框微交互 — 更改邊框顏色讓用戶知道他們正在更改什麼。

循環和模式

用戶成功創建了文檔名稱，並且觸發器保持不變，但有一個關鍵區別：文檔現在已命名。

此時，用戶可能只想更改幾個字母或在名稱中添加日期，而不是更改他們之前定義的整個名稱。在這種情況下，與之前的規則相比，突出顯示整個文檔名稱的規則被禁用。

設置名稱後的 Google Docs 微交互 — Google Docs 在設置名稱後不會突出顯示該名稱。

結果

在定義問題並專注於微交互的所有四個部分之後，結果是一種更自然、用戶友好的體驗。 Google Docs 文件命名解決方案可幫助用戶使用正確命名的文件保持井井有條，並簡化命名文檔的過程。

行動中的微交互：真實世界的例子

重新排序任務列表

Apple iOS 提醒通過允許用戶點擊、按住和拖動列表項以更改其在列表順序中的位置，幫助用戶保持井井有條並消除幾個步驟。

對社交媒體帖子做出反應

通過單擊豎起大拇指按鈕或圖標“喜歡”內容已成為許多應用程序和網站中常見的 UX 設計模式。 Facebook 建立在這種交互之上，通過微妙的微交互添加了“喜歡”之外的多個選項。

Facebook 反應微交互 — Facebook 反應的集合包括喜歡、愛、哈哈、哇、悲傷和憤怒。（塞思·埃克特）

品牌文本突出顯示

在大多數瀏覽器中，可以覆蓋默認的文本選擇顏色。宜家使用這種交互模式通過以標誌性的黃色和藍色突出顯示文本來添加微妙的品牌細節。

分享您的位置

Google Hangouts 假設用戶可能想要分享他們的位置的時間之一是有人發短信“你在哪裡？”

當用戶查看此消息時，“共享您的位置”按鈕會顯示為上下文選項。然後，他們可以點擊該按鈕將其位置地圖自動發送給其他用戶。

滑動選擇

微交互可用於回答應用程序中簡單的“是”或“否”問題。 Tinder 通過讓用戶向左或向右滑動（否/是）來做到這一點，具體取決於他們是否喜歡他們可能的匹配項。

搜索擴展

Google Inbox 應用程序不僅可以智能地將郵件與捆綁包進行分組，還可以通過語音進行搜索，或者通過單擊從最近的聯繫人中進行選擇。

快速添加朋友的聯繫信息

SeatGeek 通過輕按“從聯繫人添加”按鈕自動填寫來自用戶聯繫人的信息，從而簡化了表單填寫過程。

座椅極客 — 當用戶的朋友已經在他們的聯繫人中時，他們可以通過簡單的點擊輕鬆地將他們添加到應用程序中。

了解有關微交互的更多信息

微交互是改善用戶體驗的關鍵部分，有很多資源可以用來了解更多關於它們的信息，下面列出了其中的一些。

要了解有關微交互的更多信息，請訪問微交互，該網站是為前面提到的 Dan Saffer 所著的《微交互：詳細設計》一書而創建的網站。在該網站上，有對微交互的詳細解釋以及有關眾所周知的微交互的起源的信息，例如自動更正、自動完成和剪切和粘貼。本書的第一章也可以免費下載。

如需微交互靈感，請訪問 Little Big Details，這是數字產品中微交互的精選集合。它展示了 Apple、Trello 和 Stack Overflow 等公司如何實現微交互和 UI 動畫的示例。

要了解如何在 Framer 中創建微交互，請閱讀 Toptal Designer、Wojciech Dobry 的文章 Framer 教程：改進原型的 7 個簡單微交互。

讓我們知道您的想法！ 請在下方留下您的想法、評論和反饋。

• • •

進一步閱讀 Toptal 設計博客：

設計原則及其重要性
最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
探索完形設計原則
Adobe XD 與 Sketch – 哪種 UX 工具適合您？
頂級設計師使用的 10 個 UX 可交付成果