淺談網(wǎng)站反饋式交互設(shè)計(jì)

1 評論 19848 瀏覽 6 收藏 16 分鐘

出色的設(shè)計(jì)源于生活,那么我們就從生活中說起,我們依照用戶生活的使用情景來設(shè)計(jì)一款產(chǎn)品,我們不需要重新培養(yǎng)的用戶的使用習(xí)慣,用戶可以在第一次使用你的產(chǎn)品來完成自己的目標(biāo),并且不需要他人的指導(dǎo)。比如說蘋果公司在設(shè)計(jì)第一代iMac的過程中,喬納森及其團(tuán)隊(duì)前往日本,曾向日本某糖果行業(yè)的人請教,如何在生產(chǎn)糖果顏色的電腦外殼的同時(shí),保持其一貫的半透明度。

在下文中我們將聊聊反饋式交互設(shè)計(jì)對于網(wǎng)站設(shè)計(jì)重要性,在這之前我們有必要了解相關(guān)的概念:

  何為反饋?

來自百科的解釋:反饋又稱回饋,是現(xiàn)代科學(xué)技術(shù)的基本概念之一。一般來講,控制論中的反饋概念,指將系統(tǒng)的輸出返回到輸入端并以某種方式改變輸入,進(jìn)而影響系統(tǒng)功能的過程,即將輸出量通過恰當(dāng)?shù)臋z測裝置返回到輸入端并與輸入量進(jìn)行比較的過程。

  何為交互設(shè)計(jì)

交互設(shè)計(jì),又稱互動(dòng)設(shè)計(jì),(英文Interaction Design, 縮寫 IxD 或者 IaD),是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域。人造物,即人工制成物品,例如,軟件、移動(dòng)設(shè)備、人造環(huán)境、服務(wù)、可佩帶裝置以及系統(tǒng)的組織結(jié)構(gòu)。交互設(shè)計(jì)在于定義人造物的行為方式(the “interaction”,即人工制品在特定場景下的反應(yīng)方式)相關(guān)的界面。 交互設(shè)計(jì)師首先進(jìn)行用戶研究相關(guān)領(lǐng)域,以及潛在用戶,設(shè)計(jì)人造物的行為,并從有用性,可用性和情感因素(usefulness, usability and emotional)等方面來評估設(shè)計(jì)質(zhì)量。

結(jié)合上述概念我們綜合來說,反饋和交互意味著通過合適的反饋以及和程序之間的交互從而讓用戶時(shí)刻知道現(xiàn)在發(fā)生了什么,而不僅僅是當(dāng)事情出錯(cuò)時(shí)顯示一個(gè)警告。我們暫時(shí)將反饋分成2種類型:一種正面反饋,另一種為負(fù)面反饋。對網(wǎng)站用戶而言反饋屬于提示信息類型的一種,從用戶注冊賬號輸入錯(cuò)誤的提示,到退出成功的提示,都是屬于反饋式交互設(shè)計(jì)的范疇。

  反饋式交互設(shè)計(jì)如此重要

讓我們來想象生活中的幾種情景,假設(shè)你在乘坐地鐵需要換乘時(shí),此刻如果地鐵沒有換乘的指示標(biāo)識,會(huì)讓人摸不著東南西北,非常容易讓人迷惑,不知道哪條通道才是正確的換乘通道。地鐵的建設(shè)者各換成通道上增加醒目的提示文字,很直觀清楚就讓你知道哪條通道正確的換乘路線。

1-120PR1411J28

(london:地鐵換成指示牌)

以網(wǎng)購當(dāng)中的交易流程為例,在用戶提交了訂單之后,如果系統(tǒng)的處理時(shí)間較長,導(dǎo)致后續(xù)頁面加載遲緩,而這當(dāng)中沒有任何反饋提示,那么用戶很有可能會(huì)認(rèn)為自己的訂單并沒有提交成功。這種情況下,可以在頁面加載的過程中向用戶提供一些正面反饋信息,例如告訴他們“系統(tǒng)正在處理訂單,請稍候”一類,這樣可以防止用戶由于不明真相而點(diǎn)擊后退按鈕。

1-120PR14250D8

(某網(wǎng)站購物車)

  以安裝軟件為例,通常來說軟件的文件較大,安裝文件加載的時(shí)間會(huì)稍微長一點(diǎn),軟件界面沒有任何反饋提示,想象一下你置身于中的情景,是不是非常容易讓人感到煩躁不安,原因是由于安裝軟件過程是由用戶主導(dǎo)的,用戶安裝軟件目的是為了完成他自身目標(biāo),而此時(shí)界面無任何提示,用戶對此突然失去了控制,導(dǎo)致目標(biāo)中斷無法完成。此時(shí)此刻戶關(guān)閉軟件重新安裝,如果較長時(shí)間還沒有響應(yīng),用戶會(huì)選擇離開。

我們通過什么方法來避免或徹底解決這些問題呢?我們前面提到了兩種機(jī)制,分別是“正面反饋和負(fù)面反饋?!蔽覀兪遣皇强梢栽诎惭b的過程的界面增加一個(gè)安裝進(jìn)度條,數(shù)值和進(jìn)度同時(shí)變化,這樣不會(huì)偏離用戶把控范圍,如安裝進(jìn)度條,郵箱表單賬號輸入正確時(shí),界面回饋給用戶的對勾提示狀態(tài),稱之為正面反饋。

1-120PR14404215

(photoshop安裝安裝進(jìn)度提示條)

1-120PR14451418

(序列號輸入正確對勾提示狀態(tài))

通過正面反饋機(jī)制,我們可以逐漸幫助用戶打消這些顧慮,幫助他們建立信心,讓他們感到一切都在順利的進(jìn)行著,防止用戶在做了正確的事情之后由于擔(dān)心自己操作有誤而撤消之前的行為。這一點(diǎn),對于那些對自己在計(jì)算設(shè)備操作能力方面缺乏信心的用戶來說尤為重要。這類用戶,其實(shí)未必真正缺乏操作技能,只是在很多時(shí)候,由于系統(tǒng)沒有作出足夠的正面反饋,致使他們對自己的判斷產(chǎn)生了疑慮。我們要利用這兩種機(jī)制打消大小用戶方面的顧慮。

在舉幾個(gè)負(fù)面反饋機(jī)制的案例,我們在來想象一種情景。接上述案例,軟件安裝完成,告知你的填寫序列號不符合規(guī)范,而且之前你填寫過的序列號并沒有保存下來,需要重新輸入。用戶心里此刻會(huì)有較大的落差,因?yàn)樽隽藷o用功,其實(shí)我們完全可以用戶在輸入序列號的過程中,實(shí)時(shí)匹配,如果序列號錯(cuò)誤,我們要要通過錯(cuò)誤提示,第一時(shí)間告訴用戶你填寫的序列號不正確,及時(shí)幫助用戶糾正錯(cuò)誤。.

通過負(fù)面反饋機(jī)制,我們也可以準(zhǔn)確無誤幫助用戶減少錯(cuò)誤的操作,確保在第一時(shí)間告知用戶的操作不正確,及時(shí)改正, 已達(dá)到用戶的輸入符合網(wǎng)站自身運(yùn)營需要。讓用戶感受到一切都在順利的進(jìn)行著,這一點(diǎn),對于互聯(lián)網(wǎng)專家型用戶,主流型和菜鳥級用戶都尤為重要。專家型的用戶特征習(xí)慣拿來一個(gè)網(wǎng)站,通常不會(huì)看你提供的文字介紹說明使用幫助,想通過網(wǎng)站希望盡快達(dá)成的自己目標(biāo)。比如說下載資料。

反饋式交互設(shè)計(jì)的優(yōu)秀案例

  正面反饋機(jī)制

用戶與數(shù)據(jù)內(nèi)容內(nèi)容發(fā)生交互時(shí),都需要正面反饋,比如說注冊、登陸、驗(yàn)證、微博的轉(zhuǎn)發(fā)評論等等。特別用戶在使用支付類的產(chǎn)品交易時(shí),我們要卻確保用戶輸入的信息是符合規(guī)范的,是正確的,所以我們要對用戶實(shí)施正確的引導(dǎo)。

1-120PR1463L11

(Google 注冊界面表單的提示信息 )

鏈接的移入和移出:網(wǎng)站產(chǎn)品特性不同,整個(gè)頁面的長度會(huì)在一屏顯示,在不影響視覺的前提了,我們需要對某個(gè)模塊弱化或者是強(qiáng)化。比如說網(wǎng)站頁腳,用戶點(diǎn)擊相對比例比較低,我們將弱化顯示,當(dāng)鼠標(biāo)移入到產(chǎn)品模塊當(dāng)中,模塊顏色會(huì)加深。在這方面twitter產(chǎn)品是一個(gè)不錯(cuò)的范例,默認(rèn)頁腳灰色字體,不會(huì)喧賓奪主,當(dāng)用戶鼠標(biāo)移入到這個(gè)模塊當(dāng)中,系統(tǒng)判斷用戶可能需要通過頁腳了解網(wǎng)站的相關(guān)信息,文字區(qū)域色值改變,由灰色變成黑色。在視覺呈現(xiàn)的方式上,正面反饋可以讓我們的用戶體驗(yàn)更上一層樓,如虎添翼。

1-120PR14P0955

按鈕的提示狀態(tài):內(nèi)容為空時(shí)不可點(diǎn)擊的按鈕狀態(tài)和有內(nèi)容的按鈕的區(qū)別。按鈕為灰色狀態(tài)不可發(fā)表內(nèi)容

1-120PR14T9124

(google plus當(dāng)前狀態(tài)不可發(fā)布內(nèi)容)

1-120PR1493II

(當(dāng)有內(nèi)容之后,按鈕被點(diǎn)亮,內(nèi)容可以正常發(fā)布)

加載的過程:下拉自動(dòng)翻頁的功能,會(huì)載入較多內(nèi)容,如果沒有l(wèi)oading..等字樣,告訴用戶你所看的內(nèi)容正在加載,榮請稍等片刻。用戶會(huì)感到迷惑之前,還容易導(dǎo)致用戶誤以為自己的操作有誤,容易撤銷之前的操作。除了文字提示以外,Google plus 的做法在Loading的圓球增加動(dòng)態(tài)的效果,告知用戶你所等待的內(nèi)容正在加載。

1-120PR15029416

(Google plus加載過程中圓球注水的效果)

  負(fù)面反饋機(jī)制

在人生的道路上,每個(gè)人都難免犯錯(cuò)誤,重要的是我們?nèi)绾渭m正自己的錯(cuò)誤。對于網(wǎng)站的使用者用戶而言,為了不讓用戶繼續(xù)錯(cuò)誤下去,我們幫助他們糾正錯(cuò)誤也同樣重要。在上文我們舉了一個(gè)序列號案例來做作為負(fù)面反饋機(jī)制的案例,為了讓讓大家理解更透徹,在這里在舉幾個(gè)案例,加深下印象。

文字超出提示文字:例如在Twitter中發(fā)表內(nèi)容時(shí),當(dāng)文字超出140字時(shí),TWITTER在第一時(shí)間用紅色負(fù)數(shù)的數(shù)字代表你已經(jīng)超出的字?jǐn)?shù),按鈕為灰色,不可點(diǎn)擊,希望你及時(shí)做刪減。

1-120PR15241U1

(Twitter文字超出提示狀態(tài))

1-120PR15329205

(豆瓣:不符合規(guī)范表單字段提示)

  反饋式交互設(shè)計(jì)常用的幾種方法:

  利用視覺來提供反饋式交互設(shè)計(jì)

我們可以改變界面的視覺呈現(xiàn)效果和視覺元素屬性來改變反饋的表型形式。譬如在鼠標(biāo)移入圖片增加浮動(dòng)層,改變風(fēng)格樣式,增加圖片圈選的效果,或者頁面的配色和大小等方式來實(shí)施正面反饋。前面提到鏈接被點(diǎn)擊之前和被點(diǎn)擊之后所呈現(xiàn)高對比的背景色。Google plus加載過程中注水的過程,或者用戶注冊時(shí)填寫正確時(shí)所給出的狀態(tài)提示圖標(biāo)。再比如Twitter中頁腳模塊,鼠標(biāo)劃入通過改變文字顏色等方式來突出顯示

在比如一個(gè)非常典型的例子,鼠標(biāo)指針的狀態(tài)變化。操作者(用戶)將鼠標(biāo)移動(dòng)到可輸入文字的文本區(qū)域,指針會(huì)發(fā)生變化,變成I的標(biāo)識,意味著可輸字。再比如鼠標(biāo)鼠標(biāo)指針的狀態(tài)變化,當(dāng)用戶將鼠標(biāo)指向一個(gè)可交互的界面元素,如鏈接或者是按鈕,他們會(huì)希望按鈕變成手形,鏈接變?yōu)槭中?,并增加下劃線,來反饋并告知用戶鏈接和文本區(qū)別。如果系統(tǒng)在這里并沒有做出符合或者達(dá)到符合用戶預(yù)期的反饋,那么用戶很有可能會(huì)為此感到迷惑,甚至不解。

 利用動(dòng)畫效果提供反饋

其實(shí),動(dòng)畫自身就屬于視覺表現(xiàn)的一種方式,比如說登陸WordPress管理后臺時(shí),用戶名和密碼錯(cuò)誤,登陸框表單會(huì)表現(xiàn)出抖動(dòng)的效果。提示用戶輸入用戶名或密碼錯(cuò)誤。根據(jù)動(dòng)畫的視覺表現(xiàn)是,也可以將動(dòng)畫效果運(yùn)用在反饋上

比如說頁面內(nèi)的錨點(diǎn)鏈接跳轉(zhuǎn),在系統(tǒng)默認(rèn)的情況下,錨點(diǎn)跳轉(zhuǎn)沒有任何動(dòng)畫過度效果,頁面只是很突兀的移動(dòng)到錨點(diǎn)所指定的位置,而現(xiàn)如今,我們可以在很多優(yōu)秀注重用戶體驗(yàn)的網(wǎng)站中看到具有平滑滾動(dòng)效果鏈接的跳轉(zhuǎn)。部分網(wǎng)站在頁面在目標(biāo)到達(dá)位置后,將錨點(diǎn)所指定的位置進(jìn)行高亮顯示。這種細(xì)微的改變使得整個(gè)交互方式更加符合用戶的直接。同時(shí)可以很清晰的講交互結(jié)果呈現(xiàn)給用戶。

  全文總結(jié):

例如文章中第三段落提到的“反饋和交互意味著通過合適的反饋以及和程序之間的交互從而讓用戶時(shí)刻知道現(xiàn)在發(fā)生了什么,而不僅僅是當(dāng)事情出錯(cuò)時(shí)顯示一個(gè)警告。我們暫時(shí)將反饋分成2種類型:一種正面反饋,另一種為負(fù)面反饋。對網(wǎng)站用戶而言反饋屬于提示信息類型的一種,從用戶注冊賬號輸入錯(cuò)誤的提示,到退出成功的提示,都是屬于反饋式交互設(shè)計(jì)的范疇?!?/em>通過正面反饋和負(fù)面反饋我們可以很清晰的讓用戶知道當(dāng)前正在發(fā)什么?幫助用戶打消疑慮,使用戶盡快完成自己的目標(biāo),同時(shí)也讓我們的網(wǎng)站更加易用,更加人性化。

感謝@小若的投稿

來源:PMTOO

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!