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

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

出色的設(shè)計(jì)源于生活，那么我們就從生活中說(shuō)起，我們依照用戶生活的使用情景來(lái)設(shè)計(jì)一款產(chǎn)品，我們不需要重新培養(yǎng)的用戶的使用習(xí)慣，用戶可以在第一次使用你的產(chǎn)品來(lái)完成自己的目標(biāo)，并且不需要他人的指導(dǎo)。比如說(shuō)蘋(píng)果公司在設(shè)計(jì)第一代iMac的過(guò)程中，喬納森及其團(tuán)隊(duì)前往日本，曾向日本某糖果行業(yè)的人請(qǐng)教，如何在生產(chǎn)糖果顏色的電腦外殼的同時(shí)，保持其一貫的半透明度。(某網(wǎng)站購(gòu)物車)以安裝軟件為例，通常來(lái)說(shuō)軟件的文件較大，安裝文件加載的時(shí)間會(huì)稍微長(zhǎng)一點(diǎn)，軟件界面沒(méi)有任何反饋提示，想象一下你置身于中的情景，是不是非常容易讓人感到煩躁不安，原因是由于安裝軟件過(guò)程是由用戶主導(dǎo)的，用戶安裝軟件目的是為了完成他自身目標(biāo)，而此時(shí)界面無(wú)任何提示，用戶對(duì)此突然失去了控制，導(dǎo)致目標(biāo)中斷無(wú)法完成。此時(shí)此刻戶關(guān)閉軟件重新安裝，如果較長(zhǎng)時(shí)間還沒(méi)有響應(yīng)，用戶會(huì)選擇離開(kāi)。我們通過(guò)什么方法來(lái)避免或徹底解決這些問(wèn)題呢?我們前面提到了兩種機(jī)制，分別是“正面反饋和負(fù)面反饋?！蔽覀兪遣皇强梢栽诎惭b的過(guò)程的界面增加一個(gè)安裝進(jìn)度條，數(shù)值和進(jìn)度同時(shí)變化，這樣不會(huì)偏離用戶把控范圍，如安裝進(jìn)度條，郵箱表單賬號(hào)輸入正確時(shí)，界面回饋給用戶的對(duì)勾提示狀態(tài)，稱之為正面反饋。(photoshop安裝安裝進(jìn)度提示條)(序列號(hào)輸入正確對(duì)勾提示狀態(tài))通過(guò)正面反饋機(jī)制，我們可以逐漸幫助用戶打消這些顧慮，幫助他們建立信心，讓他們感到一切都在順利的進(jìn)行著，防止用戶在做了正確的事情之后由于擔(dān)心自己操作有誤而撤消之前的行為。這一點(diǎn)，對(duì)于那些對(duì)自己在計(jì)算設(shè)備操作能力方面缺乏信心的用戶來(lái)說(shuō)尤為重要。這類用戶，其實(shí)未必真正缺乏操作技能，只是在很多時(shí)候，由于系統(tǒng)沒(méi)有作出足夠的正面反饋，致使他們對(duì)自己的判斷產(chǎn)生了疑慮。我們要利用這兩種機(jī)制打消大小用戶方面的顧慮。在舉幾個(gè)負(fù)面反饋機(jī)制的案例，我們?cè)趤?lái)想象一種情景。接上述案例，軟件安裝完成，告知你的填寫(xiě)序列號(hào)不符合規(guī)范，而且之前你填寫(xiě)過(guò)的序列號(hào)并沒(méi)有保存下來(lái)，需要重新輸入。用戶心里此刻會(huì)有較大的落差，因?yàn)樽隽藷o(wú)用功，其實(shí)我們完全可以用戶在輸入序列號(hào)的過(guò)程中，實(shí)時(shí)匹配，如果序列號(hào)錯(cuò)誤，我們要要通過(guò)錯(cuò)誤提示，第一時(shí)間告訴用戶你填寫(xiě)的序列號(hào)不正確，及時(shí)幫助用戶糾正錯(cuò)誤。.通過(guò)負(fù)面反饋機(jī)制，我們也可以準(zhǔn)確無(wú)誤幫助用戶減少錯(cuò)誤的操作，確保在第一時(shí)間告知用戶的操作不正確，及時(shí)改正，已達(dá)到用戶的輸入符合網(wǎng)站自身運(yùn)營(yíng)需要。讓用戶感受到一切都在順利的進(jìn)行著，這一點(diǎn)，對(duì)于互聯(lián)網(wǎng)專家型用戶，主流型和菜鳥(niǎo)級(jí)用戶都尤為重要。專家型的用戶特征習(xí)慣拿來(lái)一個(gè)網(wǎng)站，通常不會(huì)看你提供的文字介紹說(shuō)明使用幫助，想通過(guò)網(wǎng)站希望盡快達(dá)成的自己目標(biāo)。比如說(shuō)下載資料。反饋式交互設(shè)計(jì)的優(yōu)秀案例正面反饋機(jī)制用戶與數(shù)據(jù)內(nèi)容內(nèi)容發(fā)生交互時(shí)，都需要正面反饋，比如說(shuō)注冊(cè)、登陸、驗(yàn)證、微博的轉(zhuǎn)發(fā)評(píng)論等等。特別用戶在使用支付類的產(chǎn)品交易時(shí)，我們要卻確保用戶輸入的信息是符合規(guī)范的，是正確的，所以我們要對(duì)用戶實(shí)施正確的引導(dǎo)。(Google注冊(cè)界面表單的提示信息)鏈接的移入和移出：網(wǎng)站產(chǎn)品特性不同，整個(gè)頁(yè)面的長(zhǎng)度會(huì)在一屏顯示，在不影響視覺(jué)的前提了，我們需要對(duì)某個(gè)模塊弱化或者是強(qiáng)化。比如說(shuō)網(wǎng)站頁(yè)腳，用戶點(diǎn)擊相對(duì)比例比較低，我們將弱化顯示，當(dāng)鼠標(biāo)移入到產(chǎn)品模塊當(dāng)中，模塊顏色會(huì)加深。在這方面twitter產(chǎn)品是一個(gè)不錯(cuò)的范例，默認(rèn)頁(yè)腳灰色字體，不會(huì)喧賓奪主，當(dāng)用戶鼠標(biāo)移入到這個(gè)模塊當(dāng)中，系統(tǒng)判斷用戶可能需要通過(guò)頁(yè)腳了解網(wǎng)站的相關(guān)信息，文字區(qū)域色值改變，由灰色變成黑色。在視覺(jué)呈現(xiàn)的方式上，正面反饋可以讓我們的用戶體驗(yàn)更上一層樓，如虎添翼。按鈕的提示狀態(tài)：內(nèi)容為空時(shí)不可點(diǎn)擊的按鈕狀態(tài)和有內(nèi)容的按鈕的區(qū)別。按鈕為灰色狀態(tài)不可發(fā)表內(nèi)容(googleplus當(dāng)前狀態(tài)不可發(fā)布內(nèi)容)(當(dāng)有內(nèi)容之后，按鈕被點(diǎn)亮，內(nèi)容可以正常發(fā)布)加載的過(guò)程：下拉自動(dòng)翻頁(yè)的功能，會(huì)載入較多內(nèi)容，如果沒(méi)有l(wèi)oading..等字樣，告訴用戶你所看的內(nèi)容正在加載，榮請(qǐng)稍等片刻。用戶會(huì)感到迷惑之前，還容易導(dǎo)致用戶誤以為自己的操作有誤，容易撤銷之前的操作。除了文字提示以外，Googleplus的做法在Loading的圓球增加動(dòng)態(tài)的效果，告知用戶你所等待的內(nèi)容正在加載。(Googleplus加載過(guò)程中圓球注水的效果)(鏈接：用戶點(diǎn)擊過(guò)的鏈接狀態(tài))負(fù)面反饋機(jī)制在人生的道路上，每個(gè)人都難免犯錯(cuò)誤，重要的是我們?nèi)绾渭m正自己的錯(cuò)誤。對(duì)于網(wǎng)站的使用者用戶而言，為了不讓用戶繼續(xù)錯(cuò)誤下去，我們幫助他們糾正錯(cuò)誤也同樣重要。在上文我們舉了一個(gè)序列號(hào)案例來(lái)做作為負(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í)做刪減。(Twitter文字超出提示狀態(tài))(豆瓣：不符合規(guī)范表單字段提示)反饋式交互設(shè)計(jì)常用的幾種方法：利用視覺(jué)來(lái)提供反饋式交互設(shè)計(jì)我們可以改變界面的視覺(jué)呈現(xiàn)效果和視覺(jué)元素屬性來(lái)改變反饋的表型形式。譬如在鼠標(biāo)移入圖片增加浮動(dòng)層，改變風(fēng)格樣式，增加圖片圈選的效果，或者頁(yè)面的配色和大小等方式來(lái)實(shí)施正面反饋。前面提到鏈接被點(diǎn)擊之前和被點(diǎn)擊之后所呈現(xiàn)高對(duì)比的背景色。Googleplus加載過(guò)程中注水的過(guò)程，或者用戶注冊(cè)時(shí)填寫(xiě)正確時(shí)所給出的狀態(tài)提示圖標(biāo)。再比如Twitter中頁(yè)腳模塊，鼠標(biāo)劃入通過(guò)改變文字顏色等方式來(lái)突出顯示在比如一個(gè)非常典型的例子，鼠標(biāo)指針的狀態(tài)變化。操作者(用戶)將鼠標(biāo)移動(dòng)到可輸入文字的文本區(qū)域，指針會(huì)發(fā)生變化，變成I的標(biāo)識(shí)，意味著可輸字。再比如鼠標(biāo)鼠標(biāo)指針的狀態(tài)變化，當(dāng)用戶將鼠標(biāo)指向一個(gè)可交互的界面元素，如鏈接或者是按鈕，他們會(huì)希望按鈕變成手形，鏈接變?yōu)槭中?，并增加下劃線，來(lái)反饋并告知用戶鏈接和文本區(qū)別。如果系統(tǒng)在這里并沒(méi)有做出符合或者達(dá)到符合用戶預(yù)期的反饋，那么用戶很有可能會(huì)為此感到迷惑，甚至不解。利用動(dòng)畫(huà)效果提供反饋其實(shí)，動(dòng)畫(huà)自身就屬于視覺(jué)表現(xiàn)的一種方式，比如說(shuō)登陸WordPress管理后臺(tái)時(shí)，用戶名和密碼錯(cuò)誤，登陸框表單會(huì)表現(xiàn)出抖動(dòng)的效果。提示用戶輸入用戶名或密碼錯(cuò)誤。根據(jù)動(dòng)畫(huà)的視覺(jué)表現(xiàn)是，也可以將動(dòng)畫(huà)效果運(yùn)用在反饋上比如說(shuō)頁(yè)面內(nèi)的錨點(diǎn)鏈接跳轉(zhuǎn)，在系統(tǒng)默認(rèn)的情況下，錨點(diǎn)跳轉(zhuǎn)沒(méi)有任何動(dòng)畫(huà)過(guò)度效果，頁(yè)面只是很突兀的移動(dòng)到錨點(diǎn)所指定的位置，而現(xiàn)如今，我們可以在很多優(yōu)秀注重用戶體驗(yàn)的網(wǎng)站中看到具有平滑滾動(dòng)效果鏈接的跳轉(zhuǎn)。部分網(wǎng)站在頁(yè)面在目標(biāo)到達(dá)位置后，將錨點(diǎn)所指定的位置進(jìn)行高亮顯示。這種細(xì)微的改變使得整個(gè)交互方式更加符合用戶的直接。同時(shí)可以很清晰的講交互結(jié)果呈現(xiàn)給用戶。全文總結(jié)：例如文章中第三段落提到的“反饋和交互意味著通過(guò)合適的反饋以及和程序之間的交互從而讓用戶時(shí)刻知道現(xiàn)在發(fā)生了什么，而不僅僅是當(dāng)事情出錯(cuò)時(shí)顯示一個(gè)警告。我們暫時(shí)將反饋分成2種類型：一種正面反饋，另