dPlus 彙整並提供最新趨勢議題,協助資料蒐集,
快速切入重點趨勢,激盪出最精準、創新的產業策略。
Mobile app的致勝小秘訣
微互動(Micro-interactions)設計

隨著手機app的開發越來越多,傳遞觸動人心的故事以及提供驚艷的視覺設計的優秀app也越來越多,但市場競爭日趨激烈,有這樣條件的app可能還是無法鶴立雞群,還需要更多能連結使用者感受的元素。好的app必須具備以下兩件事:功能 (feature) 和細節 (detail)。功能是吸引人們注意,前來使用,而細節的處理正是讓我們繼續使用的關鍵。

有些app特別令人著迷,究竟它的魔力在哪呢?微互動或許就是一個你不可忽略的關鍵技巧!那到底什麼是微互動呢?
微互動設計

微互動指的是:在裝置上,使用者參與單一任務的過程。而互動的過程中,使用者幾乎不會花費太多的注意力,因為流程的發生與進行安排(設計)的流暢自然。

在 Dan Saffer 的書中提到(excellent book),微互動可達成三項具體的功用:

1.快速的傳遞資訊或使用者動作的反饋

2.視覺化操作後的結果

3.協助使用者明白如何使用

簡單來說,微互動即是讓使用者觸發裝置上的動作之行為。而微互動的設計應該要以使用者為中心(human-centered design),讓互動的目的與效益確實為人們所期待的,並思考如何讓使用者流暢的操作。
微互動的四大元素

觸發:啟動微互動。舉個例子,使用者點擊了「我也喜歡」的愛心 icon。

規則:設計互動行為的方式。通常使用者不會看到或主動關心具體的規則,但可透過互動後的反饋便可瞭解。在上述的例子中,規則就是按了愛心 icon,會讓喜愛數量加 1。

反饋:設計與使用者之間溝通的互動過程。以上例來說,愛心 icon 按下後,可能會填滿顏色或跳動,來表示完成這個行為,並取代用純文字的告知方式。

循環(loops)和模式:決定微互動進行的長度,以及如何重複與變化。舉個例子,有些微互動會學習並主動推薦我們喜歡看的資訊,甚至記得六個月前我們喜歡的內容。

微互動的使用案例
顯示系統狀態

讓使用者充分了解發生什麼事情,使用者期待立即獲得回饋。有時候一個 app 需要時間完成某個動作。在使用者等待的時間加入微互動的設計,可以讓使用者理解目前發生什麼事情。也減少等待產生的無聊,增加使用者的參與感。

強調變化
秀出提醒,確保使用者真的看到了,這時小小的動畫就會有幫助。它吸引使用者注意,讓他們無法忽略你認為重要的事情。
維持情境一致
行動裝置或智慧型手表的螢幕較小,畫面放不下一堆訊息。藉由動畫,讓使用者很順暢地轉換情境,用微互動解釋畫面上元件安排的改變。使用者才知道看到的東西是從哪裡來的。兩個視覺狀態之間的切換應該要清楚、順暢又簡單。
行動呼籲 (Call to Action)
微互動擁有鼓勵使用者實際行動的力量。仔細觀察使用者的情緒,從情境和使用者研究找到線索,吸引使用者的注意,誘導他們採取你希望他們採取的行動,確保視覺線索和動畫適合他們,做出簡潔順暢且能夠不斷重複使用的設計。
微互動的致勝秘訣
微互動創造參與互動的機會。雖然它通常被視為輔助的、次要的,但是它可以在使用者發現它的時候創造滿足的感覺。加入微互動的設計,讓使用者知道動作被接受了,得到了回饋或視覺上的獎勵,增進使用者的參與度、功能與愉悅感。
微互動設計的要點

1. 保持簡單相當重要,例如:直接的用詞、清晰的字體、易辨識的色彩與結構化的設計。如果基本設計就能執行順暢,就不要增加太多不需要的細節設計。

2.微互動應該要能節省時間,用的是不會讓使用者感到無聊或分心的短暫資訊溝通方式

3.瞭解微互動背後,你的使用者和情境,可以讓它們更精準、有效果。微互動要設計的更有人性,更注重情感的交流,如文字的表達就要如人類真正會說的。

4.微互動必需通過長期使用的考驗,有些在第一次覺得被逗樂了,卻在第 100 次覺得很煩。

5.將人性用在微互動,專注在視覺和諧。動畫應該感覺很流暢,讓微互動栩栩如生。

6.別沉迷與濫用微互動,過多的設計可能會造成反效果。譬如在操作某 app 時,跳出訊息視窗(微互動),讓使用者快速的回覆後,盡可能的快速順暢的結束,轉回原 app。

結論

手機app層出不窮,多樣的功能及介面到處都是,然而好的app設計永遠離不開以使用者為本的原則,簡單的設計考驗著設計師的功力,微互動就像是app與使用者之間的橋樑,以更具有人性、趣味性的方式讓使用者在使用app時更有參與感,成功的微互動設計,要不著痕跡恰到好處的回饋給使用者,並考量到使用的情境作變化,看似簡單設計的背後卻具備著極大的巧思,正是每個成功的app的共同特性!

提醒:
本文章內容參考 INTERSECTION設計大舌頭,對於撰寫內容有進行撰寫、刪除與重新編排,如果讀者有任何疑問,請參考原內容出處
Window size: x
Viewport size: x