微交互：細(xì)節(jié)決定成敗
在產(chǎn)品設(shè)計(jì)中，細(xì)節(jié)設(shè)計(jì)是不可忽略的一個(gè)層面，而在細(xì)節(jié)層面更注重用戶交互體驗(yàn)的產(chǎn)品，也往往更能留下用戶。而這類細(xì)節(jié)層的設(shè)計(jì)，可以體現(xiàn)在“微交互”里。那么如何理解“微交互”的存在與應(yīng)用?本篇文章里，作者就進(jìn)行了一定總結(jié)，一起來(lái)看一下吧。
微交互這個(gè)概念在設(shè)計(jì)文章中并不少見(jiàn)，但是本文從交互模型開(kāi)始梳理微交互的結(jié)構(gòu)和設(shè)計(jì)點(diǎn)。通過(guò)大量案例很好的展示了微交互的核心設(shè)計(jì)方法和微交互讓人喜歡或者討厭的原因。
正如題目所說(shuō)：細(xì)節(jié)決定成敗，微交互就是利用細(xì)節(jié)提升產(chǎn)品體驗(yàn)和設(shè)立品牌標(biāo)志。
一、摘要
直到今天，人機(jī)交互已經(jīng)有很長(zhǎng)時(shí)間的發(fā)展。從例如烤面包機(jī)的簡(jiǎn)單產(chǎn)品到銀行應(yīng)用程序類的復(fù)雜數(shù)字產(chǎn)品，我們每天進(jìn)行上百次的交互。這些交互轉(zhuǎn)化為產(chǎn)品的可用性，最終轉(zhuǎn)化成用戶滿意度、信任度和產(chǎn)品整體體驗(yàn)。
在過(guò)去的二十年里，設(shè)計(jì)師們一直在關(guān)注這些交互(按鈕、滾動(dòng)、長(zhǎng)按等)。從電腦大屏幕到移動(dòng)設(shè)備、智能手表以及現(xiàn)在的可折疊設(shè)備，交互也在不斷地發(fā)展。本文研究了微交互的結(jié)構(gòu)及其與交互模型的關(guān)系，審美體驗(yàn)的不同驅(qū)動(dòng)力，以及我們?nèi)绾瓮ㄟ^(guò)改變微交互的元素來(lái)優(yōu)化體驗(yàn)。最后，我們討論了自下而上的產(chǎn)品構(gòu)建方法。
二、簡(jiǎn)介
自燈泡、收音機(jī)、門(mén)鈴等電氣設(shè)備出現(xiàn)以來(lái)，微交互一直存在于我們的生活。微交互和技術(shù)共同出現(xiàn)、發(fā)展。在我們的日常生活中充滿了與周圍物體的微交互，例如使用烤面包機(jī)、解鎖手機(jī)、將手機(jī)切換到靜音模式、控制音量等。
從簡(jiǎn)單的按下按鈕到搖動(dòng)手腕激活智能手表，微交互隨著技術(shù)的進(jìn)步而不斷發(fā)展。像復(fù)制文本或移動(dòng)文件這類我們?nèi)缃窳?xí)以為常的、無(wú)形之中的微交互，都曾是新穎的微交互。觀察微交互有助于設(shè)計(jì)師改進(jìn)產(chǎn)品。
有趣的是，設(shè)計(jì)師將現(xiàn)實(shí)生活場(chǎng)景投射到產(chǎn)品來(lái)建立微交互，如剪切-粘貼、放大-縮小等。這些細(xì)節(jié)不僅提高了產(chǎn)品的可用性，也通過(guò)直觀的互動(dòng)降低用戶學(xué)習(xí)難度。
我們?nèi)绾螠?zhǔn)確定義什么是微交互，什么是交互?
論文《開(kāi)啟移動(dòng)微交互》(Ashbrook，2010)將微交互定義為“接觸設(shè)備開(kāi)始到完成的時(shí)間不超過(guò)4秒的互動(dòng)”。而《微交互》一書(shū)(Saffer，2013)將其定義為：“微交互是圍繞著單個(gè)用例的產(chǎn)品使用場(chǎng)景——它們有一個(gè)主要任務(wù)。”整個(gè)應(yīng)用程序或產(chǎn)品可能只是一個(gè)微交互，例如，天氣應(yīng)用程序(圖1.1)或烤面包機(jī)，因?yàn)樗鼈冎魂P(guān)注一件事。
圖1.1 天氣應(yīng)用程序能被看作是一個(gè)微交互，因?yàn)樗伙@示天氣。
圖1.2 LinkedIn 的“喜歡”按鈕由兩個(gè)微交互組成，(a)當(dāng)你長(zhǎng)按“喜歡”按鈕時(shí)，它會(huì)打開(kāi)一個(gè)空間展示多個(gè)表情符號(hào)以供選擇(b)你選擇表情符號(hào)發(fā)送給帖子。
一個(gè)功能可以由多個(gè)微交互構(gòu)成，例如LinkedIn的“喜歡”按鈕(圖1.2)，人們可以對(duì)帖子發(fā)送不同的表情符號(hào)。因此，微交互是一個(gè)功能模塊，或者是整個(gè)產(chǎn)品。與產(chǎn)品互動(dòng)時(shí)，微交互也許能幫助用戶了解做什么，如何做，后續(xù)是怎樣。精心設(shè)計(jì)的微交互使產(chǎn)品變得直觀，優(yōu)化了產(chǎn)品的用戶體驗(yàn)。
當(dāng)微交互打造了與品牌產(chǎn)生共鳴的特殊體驗(yàn)時(shí)，它化身為了品牌標(biāo)志。專業(yè)術(shù)語(yǔ)稱之為“標(biāo)志性時(shí)刻——產(chǎn)品或服務(wù)中給人留下持久而難忘印象的突出互動(dòng)”(Janhagen, Leitch & Judelson, 2020)。
Facebook的“喜歡”按鈕是它的標(biāo)志性時(shí)刻。微交互并不僅僅局限于視覺(jué)，它們可以是聲音、觸覺(jué)、實(shí)體硬件或手勢(shì)交互。Snapchat的通知作為產(chǎn)品的標(biāo)志性時(shí)刻是因其獨(dú)特的聲音。同樣地，iPhone有一個(gè)中心按鈕作為蘋(píng)果的標(biāo)志，它有多個(gè)微交互方式。
微交互通常首選(Narvhus, J.M. 2016)：
溝通反饋。
開(kāi)啟和關(guān)閉某項(xiàng)功能，如將手機(jī)靜音。
實(shí)現(xiàn)一個(gè)單一的任務(wù)，如喜歡一個(gè)Facebook上的帖子。
控制一個(gè)正在進(jìn)行的進(jìn)程：顯示更改或系統(tǒng)狀態(tài)，如加載條或狀態(tài)圖標(biāo)。
改變一個(gè)設(shè)置。
防止人為錯(cuò)誤。
查看或制作內(nèi)容。
我們將在之后的章節(jié)中研究一些微交互案例。
三、交互模型與微交互結(jié)構(gòu)
1. 人類處理器模型
在進(jìn)入交互模型之前，我們將嘗試研究心智和心智表征，以更好地理解人類如何與世界上的物體互動(dòng)。(Newell & Card, 1985)文章談到了三個(gè)不同的處理器：感知處理器、認(rèn)知處理器和運(yùn)動(dòng)處理器是如何工作以理解周圍世界。
認(rèn)知處理器與長(zhǎng)期記憶和工作記憶一起工作，從現(xiàn)有的知識(shí)中提取物體、感覺(jué)、行動(dòng)等的表征，以理解來(lái)自知覺(jué)處理器的輸入。一旦認(rèn)知處理器完成處理，它就會(huì)向運(yùn)動(dòng)處理器發(fā)出信號(hào)，以特定方式對(duì)特定情況采取行動(dòng)。心智表征是現(xiàn)實(shí)世界中事物如何運(yùn)作的心智模型或理解。
2. 諾曼交互模型
唐-諾曼的七個(gè)行為階段(諾曼，2013)(圖2)是一種更清晰的心智學(xué)形式，解釋了人類如何與物體互動(dòng)以實(shí)現(xiàn)目標(biāo)。目標(biāo)可能是打開(kāi)一盞燈或在移動(dòng)應(yīng)用程序上進(jìn)行在線交易。讓我們把手機(jī)解鎖的簡(jiǎn)單目標(biāo)分解成七個(gè)行動(dòng)階段。
目標(biāo)是手機(jī)解鎖。
我如何解鎖手機(jī)?輸入密碼或掃描手指指紋。
選擇哪個(gè)方式?如果我選擇輸入密碼，那么就在屏幕上按順序點(diǎn)擊密碼。
一旦我有了行動(dòng)規(guī)范，就可以執(zhí)行任務(wù)。
點(diǎn)擊回車鍵后，將看到后續(xù)發(fā)生的事情。
我看到我已經(jīng)到達(dá)了主界面。
我根據(jù)以往經(jīng)驗(yàn)判斷是否已經(jīng)完成了目標(biāo)。
在這個(gè)循環(huán)的每個(gè)階段，都有一個(gè)輸入->處理->輸出的過(guò)程。在宏觀層面上，我們也在遵循同樣的過(guò)程來(lái)達(dá)到我們的目標(biāo)。我們可以從行動(dòng)模型的七個(gè)階段推導(dǎo)出互動(dòng)周期(Norman, 2013)(圖3)。
交互周期包括執(zhí)行過(guò)程和評(píng)估過(guò)程，前者是行動(dòng)所需信息差，后者是行動(dòng)發(fā)生時(shí)各類情況所需理解的信息差。整體用戶體驗(yàn)取決于交互過(guò)程中互動(dòng)周期的每個(gè)部分。微交互的目標(biāo)是消除差距，使產(chǎn)品變得直觀�，F(xiàn)在讓我們看看微交互的基礎(chǔ)結(jié)構(gòu)，了解它們?nèi)绾螏椭畔⒉睢?/p>
3. 微交互的結(jié)構(gòu)
微交互之所以強(qiáng)大，不僅僅是因?yàn)樗鼈兊募?xì)微交互差別或迷你尺寸，還因?yàn)樗鼈儤?gòu)建的方式。微交互的結(jié)構(gòu)包括四個(gè)部分(圖4)(Saffer，2013)：開(kāi)啟微交互的觸發(fā)器，決定微交互如何運(yùn)作的規(guī)則，以及影響微互動(dòng)的元規(guī)則——闡明規(guī)則、循環(huán)和模式的反饋。
觸發(fā)器可以由用戶觸發(fā)，例如點(diǎn)擊圖標(biāo)、填寫(xiě)表格等，觸發(fā)器也可以由系統(tǒng)產(chǎn)生，例如低電量提示框，通知用戶電池電量不足。
讓我們以Duo應(yīng)用中驗(yàn)證用戶的微交互為例。
觸發(fā)器：向我發(fā)一個(gè)推送通知是微交互的觸發(fā)器(圖5(a))。
規(guī)則：它將發(fā)送帶有兩個(gè)動(dòng)作的通知(圖5(b))。用戶必須點(diǎn)擊這兩個(gè)動(dòng)作中的一個(gè)(圖5.(c))。
反饋：一旦用戶點(diǎn)擊批準(zhǔn)，它將顯示帶有“登陸”的綠色提示。(圖5.(d))
循環(huán)和模式：如果你選擇了在7天內(nèi)記住本次登陸，下次登錄時(shí)它將直接顯示綠色提示，而不是向你發(fā)送推送通知。
現(xiàn)在當(dāng)我們解構(gòu)微交互并理解其結(jié)構(gòu)時(shí)，微交互的結(jié)構(gòu)支持行動(dòng)七階段理論，最終幫助消除執(zhí)行和評(píng)估之間的鴻溝。精心設(shè)計(jì)的觸發(fā)器便于用戶進(jìn)行計(jì)劃->指定->執(zhí)行行動(dòng)，精心設(shè)計(jì)的規(guī)則和反饋便于用戶進(jìn)行感知->解釋->對(duì)比結(jié)果確認(rèn)完成目標(biāo)。我們將在下一節(jié)中談?wù)撚|發(fā)器、規(guī)則和反饋的設(shè)計(jì)，以了解微交互如何有效構(gòu)建所需的用戶體驗(yàn)。
我們回看心智部分，認(rèn)知處理器不僅包含了不同事物如何工作的心智模型，并且隨著我們?cè)谌粘Ｉ钪袑?duì)新物體的體驗(yàn)而不斷地發(fā)展。從這些心智模型中，設(shè)計(jì)師可以創(chuàng)建概念模型。作為關(guān)于產(chǎn)品和功能運(yùn)作的高級(jí)計(jì)劃，概念模型一旦被建立就能被轉(zhuǎn)化為行動(dòng)模型的七個(gè)階段，從而幫助我們創(chuàng)建對(duì)用戶來(lái)說(shuō)很直觀的微交互。這是一種自下而上的方法，用于建立交互 -> 功能 -> 產(chǎn)品。
四、審美與微交互
在上一節(jié)中，我們談到了交互模型和微交互的結(jié)構(gòu)，并探討了它們?nèi)绾螖y手使產(chǎn)品變得直觀好用�，F(xiàn)在我們將關(guān)注動(dòng)態(tài)審美體驗(yàn)，以及微交互如何在產(chǎn)品的微觀層面建立體驗(yàn)。
審美體驗(yàn)的韻律之舞有一個(gè)內(nèi)在的、動(dòng)態(tài)的結(jié)構(gòu)。杜威指出了體驗(yàn)建立的相關(guān)過(guò)程，如累積、保存、緊張張力和預(yù)期，來(lái)指稱體驗(yàn)的內(nèi)部動(dòng)態(tài)(McCarthy & Wright, 2004)。
完整的用戶體驗(yàn)是這些動(dòng)態(tài)的集合，它可以根據(jù)用戶過(guò)往經(jīng)驗(yàn)和知識(shí)認(rèn)知而變化。過(guò)往經(jīng)驗(yàn)和任何審美經(jīng)驗(yàn)都取決于上下文：用戶的過(guò)往和能力，人工制品的技術(shù)，以及互動(dòng)發(fā)生的任一物理、社會(huì)空間(Petersen, Iversen, Krogh, & Ludvigsen, 2004)。當(dāng)我們與物體/產(chǎn)品互動(dòng)時(shí)，觸覺(jué)、嗅覺(jué)、視覺(jué)和聽(tīng)覺(jué)都會(huì)喚起體驗(yàn)。
在過(guò)去的幾十年里，設(shè)計(jì)師們一直在關(guān)注這些觸發(fā)奇跡的交互。交互不應(yīng)該僅僅是傳達(dá)內(nèi)容和完成任務(wù)，它應(yīng)該引人思考，并鼓勵(lì)人們以不同的方式思考變化。我們將展示一些喚起了不同審美體驗(yàn)的動(dòng)態(tài)微交互案例。
1)積累：指伴隨著體驗(yàn)時(shí)間展開(kāi)的積聚。我認(rèn)為谷歌支付作為微交互建立了用戶體驗(yàn)，并包含非常優(yōu)秀的展開(kāi)界面和支付完成音效。
這個(gè)之所以判定為其微交互，是因?yàn)樗粚Ｗ⒂谝患拢医⒘朔浅３鋵?shí)的體驗(yàn)。這個(gè)交互開(kāi)始于點(diǎn)擊支付端->選擇銀行卡->加載->支付完成(圖6)。動(dòng)畫(huà)和音效帶來(lái)了一步步徐徐展開(kāi)的體驗(yàn)感受。
2)留存：指保留一些過(guò)往事物的趨勢(shì)，不論體驗(yàn)還是內(nèi)容。文本或信息的保存對(duì)優(yōu)秀用戶體驗(yàn)來(lái)說(shuō)確實(shí)是必要的，畢竟這樣能減少認(rèn)知負(fù)擔(dān)。在網(wǎng)站和應(yīng)用程序上填寫(xiě)表格時(shí)，許多微交互都保留了之前的填寫(xiě)信息。
這類微交互的一個(gè)非常簡(jiǎn)單的例子是，當(dāng)你復(fù)制一個(gè)鏈接并試圖將其輸入網(wǎng)絡(luò)瀏覽器時(shí)，瀏覽器會(huì)顯示直接粘貼鏈接的選項(xiàng)，甚至顯示你復(fù)制的內(nèi)容(圖7)。我們?cè)谶@此觀察到與微交互的結(jié)構(gòu)不同的是重點(diǎn)更多地放在了交互的反饋上，它傳達(dá)的狀態(tài)是：你復(fù)制的內(nèi)容已保存，并可以用來(lái)搜索網(wǎng)頁(yè)瀏覽器。這是一個(gè)展示了我們?nèi)绾握{(diào)整微交互側(cè)重點(diǎn)來(lái)優(yōu)化體驗(yàn)的優(yōu)秀案例。
3)張力：指體驗(yàn)內(nèi)和參與體驗(yàn)的人之間的關(guān)聯(lián)。這是社交媒體和流媒體平臺(tái)使用的一種技術(shù)，當(dāng)用戶期待在短時(shí)間內(nèi)快速閱覽內(nèi)容時(shí)，用戶不斷下滑來(lái)反復(fù)觸發(fā)刷新的微交互(圖8.) 。微交互帶給用戶參與感以牢牢抓住其注意力。它帶來(lái)的延遲滿足，讓用戶在想快速瀏覽內(nèi)容時(shí)耐心等待。
這個(gè)特殊的微交互的重點(diǎn)是方式：即在內(nèi)容加載之前顯示一個(gè)加載器。
4)預(yù)期：它包含兩個(gè)時(shí)間階段。第一階段是用戶在交互中開(kāi)始期待，第二階段是用戶從交互中得到期望反饋。我想到的微交互是Google Pay India的刮刮卡獎(jiǎng)勵(lì)(圖9)。
這個(gè)特殊的微交互為它在印度帶來(lái)了巨大的成功。人們喜歡期待好事發(fā)生，即使期望沒(méi)有發(fā)生。若是期望發(fā)生，那期待就是值得的。支付完成后，用戶進(jìn)入刮刮卡獎(jiǎng)勵(lì)界面，對(duì)刮獎(jiǎng)產(chǎn)生期待，點(diǎn)擊卡片進(jìn)行刮獎(jiǎng)。刮獎(jiǎng)微交互的重點(diǎn)是動(dòng)作的觸發(fā)上，兼具有趣性和參與感，觸發(fā)本來(lái)可以只是一個(gè)點(diǎn)擊按鈕，但他們?cè)O(shè)計(jì)了一個(gè)刮擦動(dòng)作作為觸發(fā)。
上文提到的各種例子可看出：通過(guò)調(diào)整微交互的元素來(lái)優(yōu)化體驗(yàn)。微交互小而強(qiáng)的原因在于：它們是產(chǎn)品的差異化細(xì)節(jié)。好的微交互能讓產(chǎn)品提升一個(gè)等級(jí)。
五、微交互會(huì)引人討厭嗎?
我們認(rèn)識(shí)了精心設(shè)計(jì)的微交互在創(chuàng)造美好體驗(yàn)方面的力量，現(xiàn)在讓我們來(lái)探討一下，如果糟糕的微交互可能會(huì)引發(fā)什么問(wèn)題。
我想到的案例是手機(jī)通知。并不是說(shuō)通知很糟糕，而是它設(shè)計(jì)得如此之好，以至于它有違用戶的意愿。通知是由系統(tǒng)發(fā)起的觸發(fā)器，它僅顯示部分信息來(lái)吸引用戶點(diǎn)擊。
每個(gè)人都會(huì)遇到這樣的情況：明明只是想看看時(shí)間，但在看到通知時(shí)點(diǎn)擊進(jìn)入信息，無(wú)聲無(wú)息之中半個(gè)小時(shí)就耗費(fèi)了。這不僅僅耗費(fèi)了時(shí)間，更嚴(yán)重的是人們?cè)隈{駛時(shí)也會(huì)分心看通知。
另一個(gè)案例是 Facebook 的著名的“喜歡”按鈕。這個(gè)精心設(shè)計(jì)的微互動(dòng)，是 Facebook 的標(biāo)志，但沒(méi)有人意識(shí)到一個(gè)微互動(dòng)可以對(duì)人們的生活產(chǎn)生如此大的影響。近期 Instagram 停止顯示帖子上的點(diǎn)贊數(shù)，因?yàn)樗鼘?duì)用戶行為產(chǎn)生了負(fù)面影響。上面的例子也顯示出：小事情可以產(chǎn)生大影響。
微交互也會(huì)令人討厭，例如，在填寫(xiě)表單最后點(diǎn)擊提交時(shí)，彈出一個(gè)對(duì)話框(圖10)，說(shuō)表單填寫(xiě)中存在錯(cuò)誤。這里的觸發(fā)器是提交按鈕，規(guī)則是顯示一個(gè)對(duì)話框，反饋是靜態(tài)文本——“有填寫(xiě)有誤”。
這里的微交互形式是錯(cuò)誤的，如果填寫(xiě)有誤，提示應(yīng)該在出錯(cuò)點(diǎn)附近。而且這里的反饋是糟糕的靜態(tài)文本，對(duì)用戶沒(méi)有任何用處，因?yàn)樗鼪](méi)有說(shuō)明出錯(cuò)的位置和類型。因此，微交互的使用和場(chǎng)景真的很重要。
六、結(jié)論
縱觀全文，我們探討了什么是微交互，以及如何創(chuàng)建符合交互模型的微交互來(lái)消除執(zhí)行和評(píng)估之間的差距。接下來(lái)，我們研究了動(dòng)態(tài)審美體驗(yàn)，以及我們?nèi)绾卧诋a(chǎn)品的微觀層面上用微交互創(chuàng)造美好體驗(yàn)。
設(shè)計(jì)師有幾種方法來(lái)創(chuàng)建微交互，方法一是自下而上思考，把一切都想得越小越好后，再建立功能。另一種方法是把整個(gè)產(chǎn)品看成是一個(gè)微交互，如果你想增加另一個(gè)功能，那么就把它看成是另一個(gè)只包含一個(gè)微交互的產(chǎn)品。
我相信谷歌支付是以這種方式創(chuàng)建的，因?yàn)樗菑闹Ц堕_(kāi)始，且只專注于支付，后來(lái)才引入了獎(jiǎng)勵(lì)和其他內(nèi)容。
微交互有助于建立一個(gè)品牌標(biāo)志和提升用戶體驗(yàn)。我們喜歡或者討厭產(chǎn)品的根源正是細(xì)節(jié)。細(xì)節(jié)是向用戶展示你以用戶為中心并為用戶著想的方法。這就是微小的事情會(huì)帶來(lái)巨大差異的原因。
來(lái)源：人人都是產(chǎn)品經(jīng)理
以上是關(guān)于用戶增長(zhǎng)師的相關(guān)信息，以供大家查看了解。想要了解更多用戶增長(zhǎng)師信息，第一時(shí)間了解用戶增長(zhǎng)師相關(guān)資訊，敬請(qǐng)關(guān)注唯學(xué)網(wǎng)用戶增長(zhǎng)師欄目，如有任何疑問(wèn)也可在線留言，小編會(huì)為您在第一時(shí)間解答!
