微交互:不被用戶察覺的小細節提升用戶體驗

0 評論 4263 瀏覽 19 收藏 12 分鐘

在用戶無意識的使用過程中,微交互得以達成用戶的心理預期,建立用戶的心智模型。

?一、微交互是什么?

在內容為王的輕量化設計下,如何做微交互?

二、交互設計和微交互的區別

交互設計(Interaction Densign,縮寫為IXD):是定義、設計人造系統行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達到某種目的,關注以人為本的用戶需求?!獊碓矗喊俣劝倏?/p>

簡單來說交互設計就是人與人、機器、系統和環境等交互行為的外在表現設計。交互設計師通過揣摩用戶心理和行為特征,設計出完整可用、易用、符合用戶認知模型的用戶操作流程和使用界面,使用戶順利流暢地使用產品達到目的。

在內容為王的輕量化設計下,如何做微交互?

交互設計效果圖

微交互通常只針對單個任務的操作進行設計,從小細節上提升用戶的體驗,是產品的功能性細節。一般都簡單明了,認知上毫無壓力,目的是讓用戶情感上感到驚喜、愉悅、操作起來更加流暢,更人性化。

有的微交互可能因為體積小巧,操作簡單,可以適用不同平臺(iOS、android、web)的展示,相比大型的功能,它能夠保持某種一致性,比如點贊。

在內容為王的輕量化設計下,如何做微交互?

點贊微交互效果

不管是交互還是微交互,它都不是功能,而是必須依附于某個功能或者場景下存在的,清晰地表達用戶的當前狀態,遇到問題、操作時或者操作后都能夠及時給出輕松愉悅及時的反饋,在用戶毫無察覺的情況下進行交互行為完成功能的操作,達到用戶目標。

比如登錄頁面,我需要輸入手機號才能登錄,手機號有正確/錯誤的驗證,那這個必須輸入手機號是一個功能,判斷對錯的展現方式可以是彈窗可以是手機號輸入框附近有文案提示,這個是交互。

在內容為王的輕量化設計下,如何做微交互?

比如音樂類app,音樂播放器是一個功能,而調節音量的大小就是交互。如下圖網易云音樂和QQ音樂的音量調節的交互。

在內容為王的輕量化設計下,如何做微交互?

再比如Facebook,用戶發的推文,若非默認語言,會有一個“翻譯推文”。

在內容為王的輕量化設計下,如何做微交互?

支付寶的綁卡功能,會有一個掃描銀行卡的選擇,微信的語音轉文字等等,這些都是屬于微交互。

交互和微交互就如同下面點的鏈接示意圖,很多大小不一的點連接成一個信息流程,點可以是這個流程中的某一個小點,也可以是一些小點鏈接成的大點,這個小點就是微交互,大點就是幾個微交互的總和或者是宏觀層面的全局交互。

在內容為王的輕量化設計下,如何做微交互?

生活中的微交互也有很多,比如:自動感應洗手的水龍頭,當把手放到水龍頭下面,自動感應到手的存在,水就會出來,不用做任何其他操作。

在內容為王的輕量化設計下,如何做微交互?

三、微交互的適用場景

微交互適用以下場景:

  1. 只完成一項任務
  2. 只影響一個數據
  3. 打開或關閉某個功能
  4. 連接不同設備
  5. 只影響一個數據;比如漲幅價格、天氣溫度
  6. 控制正在進行的過程,如切換電視頻道
  7. 調整某項設置

四、微交互的實現和組成

要實現微交互,就要先學會觀察,搞清楚什么情況,理清邏輯順序,看別人如何互動。

比如狀態顯示、提示信息等,一般會在這些信息中暗示下一步操作,為什么不在這一步展示的信息中就包含下一步需要做什么的按鈕呢?為什么有的提示彈窗是從頁面下方出現,有的直接顯示在頁面中部,有的顯示在手觸碰的附近?

還要了解產品的目標用戶,包括他們使用產品或者進行這一步功能的目的,前后邏輯步驟的串聯順序,不同情境下交互的操作環境。極強的觀察能力、清晰的邏輯、對用戶的同理心、對產品的了解等都至關重要。

把微交互集成到產品中有三種方式,分別是逐個設計微交互、把復雜的應用程序簡化為基本的微交互、把每個功能當作一組相互聯系的微交互。

在內容為王的輕量化設計下,如何做微交互?

一個好的微交互由四個部分組成:觸發器、規則、反饋、循環和模式。

觸發器啟動微交互,規則規定微交互如何起到作用和工作的過程,反饋向用戶傳達規則信息,循環和模式構成微交互的元規則。

1. 觸發器

觸發器是啟動任何微交互的前提條件,它可以是物理/數字控件。

微交互的觸發可以是用戶觸發啟動的,也可以是設備或應用監測到某些條件被滿足了,由系統自動啟動的。

比如提交表單,你點擊了“提交”的按鈕,才能夠把表單信息提交給系統,這是用戶主動觸發的,是來源用戶自身的期待和需求。

如果你提交的表單中有些信息不符合要求或者系統出錯(突然沒有網絡),系統就會給予提示錯誤原因或者錯誤提示(無網絡的缺省頁)等。這是滿足一些條件,系統自動觸發的,往往是在無意識中自動完成的。不可見的觸發器通常離不開傳感器,比如向右滑,攝像頭、麥克風、搖一搖等等。

為了使界面簡潔但又不舍棄這個功能,會采用不可見的觸發器,或者在用戶執行其他動作時,偶然發現這個微交互。但它一定不是這個應用的直接目標而是結合上下文和技術的副產品,比如列表頂部的重新加載。

系統觸發的規則至關重要,這個和整體的規則緊密相連,后面的“規則”中詳細說明。

2. 手動觸發的情況下設計者要遵循七個規則:

  1. 必須清楚用戶想要什么、什么時候做、在什么情境下發生,讓觸發器的位置跟用戶的理想需求相吻合非常重要。
  2. 保證觸發器每次都觸發相同的動作,這樣才能保證用戶對微交互形成準確的心智模型。
  3. 提前展示數據,比如區塊鏈類型的app,每種幣的列表上可以直接顯示幣的漲幅,如果想了解具體詳情,再點擊列表進入查看詳細數據。再比如正在下載的應用,可以在觸發器上顯示下載進度,不一定非要點進去查看。
  4. 控件和視覺使用情景要一致,比如看著像按鈕,就一定是可以點擊的。用戶看到控件就一定會有一個預期,或者在其他主流app上養成了類似控件的使用心理模型,要符合這個心理預判,把用戶對于觸發器的識別成本降到最低。
  5. 使用地越頻繁或越重要的觸發器一定要引人注目,效果要凸顯。比如有聲音的、動態的要比靜態無聲的吸引注意力,形狀大的、有色彩的肯定要比小的、常規色的更突出。
  6. 僅在觸發器本身無法提供相應信息的情況下使用標簽,比如電商app首頁的金剛區按鈕,采用圖標+文字的表現方式。

手動觸發器包含三個部分:控件、控件狀態、文本/圖形標簽。

控件:

例如視頻快進,可以是向右滑動的一個手勢動作就足夠。對于有兩個狀態的,比如開關,可以是按鈕,但前提按鈕的狀態必須清楚明了。對于多種狀態的動作,比如手機的打字鍵盤,每個按鈕代表一個選項,還有收起推出的按鈕選項。對于一定范圍內的連續進行的動作,例如音量的調整,可以使用滑動條,也可以使用兩個按鈕來改變數值大小的方式,或者固定的手勢方向滑動來調整。

有些觸發器有多個控件或者表單字段(復選框、文本輸入字段)之類的元素組成,比如app登錄的手機號碼的填寫,如果可以自動填充就會方便很多。

控件的狀態也至關重要,默認狀態、活動狀態、懸停狀態、反轉狀態、鼠標點擊/觸碰/進行中的狀態、切換狀態等等,一般從視覺設計方面改變。

標簽表達的意思一定要清晰明確,并且使用規范也要統一。不能類似情況下,使用不同文本,比如警告/警示。

這篇文章就先寫到這里,關于規則、反饋、循環和模式以及什么是內容為王的輕量化設計,下篇文章在做詳細介紹。

 

本文由 @白白 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!