用戶體驗重(zhong)要一環 ︰App中的反饋設計
用戶體驗重(zhong)要一環 ︰App中的反饋設計-移動閱(yue)讀二維碼

什麼是qian)蠢。/h2>

反饋就是qie)沒?雋liao)某項(xiang)操作之後,應用系(xi)統給(gei)用戶的一個響應。這個響應根據場景(jing)的不同會有不同的響應形式和不同作用。

為什麼反饋設計是qie)沒 逖櫓zhong)要的一環?

在人機交互的過程中,用戶希望看到每一步(bu)都清晰(xi),及時的顯示(shi),用戶希望了(liao)解(jie)每一步(bu)的後果以(yi)及用戶最(zui)關心的問題是什麼。一方(fang)面,PC端和移動端產品需(xu)要保證產品有xie)  笆鋇姆蠢∠ σyi)確保用戶知道自己所(suo)處(chu)的狀態,否則會讓用戶覺得反應遲鈍;另一方(fang)面,我們(men)也要避免過度的信息反饋,尤其注(zhu)意不要反饋錯(cuo)誤信息,錯(cuo)誤的信息對用戶造成的影響是巨大的。

產品的反饋直(zhi)觀(guan)的表現為界(jie)面的變化(少數(shu)為聲(sheng)音(yin)和震動),通過這種zhi)浠 溝撓沒 芄桓佑押黴 ?賾氬方(fang)薪換? 幼ㄐ牡贗度氳餃ren)務流程當中去。

舉個栗子︰當用戶執(zhi)行完一步(bu)操作後,系(xi)統沒有及時甚至(zhi)沒有給(gei)出相應的反饋提(ti)示(shi),就會給(gei)用戶帶來疑(yi)惑(huo)(實現模型與心理模型沖突),讓用戶不能確fan)ㄗ約旱牟僮魘欠(qian)癖bei)執(zhi)行、執(zhi)行是qian) 曬Α zhi)行整體進度、或者是執(zhi)行後會產生怎麼樣的影響、能在哪里查(cha)詢到結果以(yi)及執(zhi)行後是qian)窨梢yi)被(bei)撤銷等(deng)等(deng)。而(er)這其中的任(ren)何一個環fang)詼加鋅贍苡跋斕接(jie)沒?緣鼻叭ren)務的理解(jie)以(yi)是qian)裰zhi)行下一步(bu)操作,從而(er)影響到產品的用戶體驗。

反饋的設計應該(gai)滿足以(yi)下四個原則︰

  • 反饋通過直(zhi)觀(guan)的體現,可以(yi)幫助用戶理解(jie)微交互的規則,最(zui)大可能地降低用戶的nan) 俺殺ben)。
  • 別讓反饋給(gei)用戶造成壓力(li),通過最(zui)少的反饋傳達(da)同樣的信息。
  • 反饋應該(gai)由(you)需(xu)求驅動,然後在恰當的場景(jing)下和時間下讓用戶知道lang)xu)要知道的事lv)欏/li>
  • 反饋的速度盡可能的快,反饋過慢(man)會給(gei)用戶感覺產品的性yue)懿睢/li>

對于用戶而(er)言,反饋設計的目的主(zhu)要告(gao)訴用戶以(yi)下幾點︰

  • 告(gao)訴用戶發(fa)什麼了(liao)什麼?
  • 用戶剛剛做了(liao)什麼事?
  • 哪些過程已經開始(shi)了(liao)?
  • 哪些過程已經結束了(liao)?
  • 哪些過程正在進行中?
  • 用戶不能做什麼?
  • 用戶剛剛操作的結果是什麼?

在設計過程中,涉及到反饋的情況一般分(fen)為五種類型︰

1.結果反饋

告(gao)知用戶的操作結果。例如操作成功或者操作失(shi)敗、對yuan)僮骱蟺囊恢秩啡ren)。

a.以(yi)toast形式給(gei)用戶反饋。例如:微信轉發(fa)他人信息,出現toast,提(ti)示(shi)用戶已經發(fa)送成功。

b.以(yi)浮(fu)層動畫(hua)的形式給(gei)用戶反饋。例如微信輸入語音(yin)時,出現浮(fu)層動畫(hua)提(ti)示(shi)用戶的語音(yin)輸入是qie)行?摹/p>

2.狀態反饋

操作前後展示(shi)效果不一樣。

當用戶操作後,界(jie)面操作前的狀態和操作後的狀態不一致。通過這個不一致,給(gei)用戶反饋我的操作得到了(liao)提(ti)交。

3.過渡(du)反饋

有些時候(hou)程序確實不夠快,緩慢(man)的加載速度和延(yan)遲問題,這時候(hou)通過常見的過渡(du)組(zu)件(jian)給(gei)用戶反饋,過渡(du)反饋的目的在于通過向用戶反饋當前的響應進度和合理的時間消耗來讓用戶在等(deng)待(dai)過程中放松下來。

a.以(yi)進度指示(shi)器給(gei)用戶反饋當前bai)刺 @玟 lan)器在點擊搜(sou)索後,頁面加載的進程反饋。

b.以(yi)系(xi)統/自定義的nan) 範(fan) hua),例如iOS的菊(ju)花(hua)Loading 和安(an)卓的圓(yuan)形Loading 。

例如︰微博問答,點擊立即支付然後出現的過渡(du)動畫(hua)。

例如︰YouTube頁面加載過渡(du)的圓(yuan)形Loading 。

4.操作反饋

對下一步(bu)操作的指引,用戶點擊一個操作就出現新的操作組(zu)件(jian)以(yi)此給(gei)用戶的反饋。

當用戶進行一個操作後,出現反饋,這個反饋通常是通過浮(fu)層彈框、調起鍵盤(pan)、進入下一個界(jie)面等(deng)等(deng)形式表現。

例如︰iOS原生郵shi) 慊骰hui)復/轉發(fa)出現底部浮(fu)層。

5.聲(sheng)音(yin)和震動的反饋

聲(sheng)音(yin)和震動也是qian)蠢〉囊恢值謀硐中問劍  沒?牟僮骷右yi)聲(sheng)音(yin)和震動的引導,給(gei)用戶很強的心理暗示(shi)。

例如QQ郵箱(xiang),發(fa)送過程和成功後都有聲(sheng)音(yin)提(ti)示(shi)。這是一個很典型的通過聲(sheng)音(yin)反饋的例子。

如何判斷你(ni)的反饋設計是qie)行?模 槍鵲姆蠢/strong>

上面介(jie)紹的反饋的各種類型。但是很多情況設計師們(men)過度使用反饋。常見的情況是過度使用Toast。

例如貓眼︰點擊已想看愛心變灰,同時出現Toast提(ti)示(shi)。這樣就存在過度的反饋。反觀(guan)Instagram點擊取消點贊,就沒有出現Toast提(ti)示(shi)。

為什麼我說貓眼的反饋過度呢?因(yin)為用戶點擊操作時,愛心狀態已經變了(liao),那麼這個元素的變化已經暗示(shi)用戶,該(gai)App進行了(liao)反饋,沒必要在出現Toast提(ti)示(shi)。

如何判斷你(ni)的涉及反饋是qian)窆齲/strong>

在設計反饋時,如果已經有一組(zu)元素的變化足以(yi)暗示(shi)用戶當前bai)刺 玫攪liao)反饋,那麼沒必要再增加多余的元素進行反饋提(ti)示(shi)(除非qie)刑te)別的目的)。這樣會使得用戶的心理負擔變重(zhong),一個反饋可能不足以(yi)影響用戶體驗,如果整個App都出現這種情況,那將是一場災(zai)難(nan)。

歡(huan)迎關注(zhu)作者的微信公眾號(hao)︰「UEDC」

本(ben)文鏈接(jie)︰http://www.mobileui.cn/app-feedback-design.html
本(ben)文標(biao)簽: , ,