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

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

出色的設(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í)，保持其一貫的半透明度。(某網(wǎng)站購物車)以安裝軟件為例，通常來說軟件的文件較大，安裝文件加載的時(shí)間會(huì)稍微長一點(diǎn)，軟件界面沒有任何反饋提示，想象一下你置身于中的情景，是不是非常容易讓人感到煩躁不安，原因是由于安裝軟件過程是由用戶主導(dǎo)的，用戶安裝軟件目的是為了完成他自身目標(biāo)，而此時(shí)界面無任何提示，用戶對(duì)此突然失去了控制，導(dǎo)致目標(biāo)中斷無法完成。此時(shí)此刻戶關(guān)閉軟件重新安裝，如果較長時(shí)間還沒有響應(yīng)，用戶會(huì)選擇離開。我們通過什么方法來避免或徹底解決這些問題呢?我們前面提到了兩種機(jī)制，分別是“正面反饋和負(fù)面反饋?！蔽覀兪遣皇强梢栽诎惭b的過程的界面增加一個(gè)安裝進(jìn)度條，數(shù)值和進(jìn)度同時(shí)變化，這樣不會(huì)偏離用戶把控范圍，如安裝進(jìn)度條，郵箱表單賬號(hào)輸入正確時(shí)，界面回饋給用戶的對(duì)勾提示狀態(tài)，稱之為正面反饋。(photoshop安裝安裝進(jìn)度提示條)(序列號(hào)輸入正確對(duì)勾提示狀態(tài))通過正面反饋機(jī)制，我們可以逐漸幫助用戶打消這些顧慮，幫助他們建立信心，讓他們感到一切都在順利的進(jìn)行著，防止用戶在做了正確的事情之后由于擔(dān)心自己操作有誤而撤消之前的行為。這一點(diǎn)，對(duì)于那些對(duì)自己在計(jì)算設(shè)備操作能力方面缺乏信心的用戶來說尤為重要。這類用戶，其實(shí)未必真正缺乏操作技能，只是在很多時(shí)候，由于系統(tǒng)沒有作出足夠的正面反饋，致使他們對(duì)自己的判斷產(chǎn)生了疑慮。我們要利用這兩種機(jī)制打消大小用戶方面的顧慮。在舉幾個(gè)負(fù)面反饋機(jī)制的案例，我們在來想象一種情景。接上述案例，軟件安裝完成，告知你的填寫序列號(hào)不符合規(guī)范，而且之前你填寫過的序列號(hào)并沒有保存下來，需要重新輸入。用戶心里此刻會(huì)有較大的落差，因?yàn)樽隽藷o用功，其實(shí)我們完全可以用戶在輸入序列號(hào)的過程中，實(shí)時(shí)匹配，如果序列號(hào)錯(cuò)誤，我們要要通過錯(cuò)誤提示，第一時(shí)間告訴用戶你填寫的序列號(hào)不正確，及時(shí)幫助用戶糾正錯(cuò)誤。.通過負(fù)面反饋機(jī)制，我們也可以準(zhǔn)確無誤幫助用戶減少錯(cuò)誤的操作，確保在第一時(shí)間告知用戶的操作不正確，及時(shí)改正，已達(dá)到用戶的輸入符合網(wǎng)站自身運(yùn)營需要。讓用戶感受到一切都在順利的進(jìn)行著，這一點(diǎn)，對(duì)于互聯(lián)網(wǎng)專家型用戶，主流型和菜鳥級(jí)用戶都尤為重要。專家型的用戶特征習(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ā)評(píng)論等等。特別用戶在使用支付類的產(chǎn)品交易時(shí)，我們要卻確保用戶輸入的信息是符合規(guī)范的，是正確的，所以我們要對(duì)用戶實(shí)施正確的引導(dǎo)。(Google注冊界面表單的提示信息)鏈接的移入和移出：網(wǎng)站產(chǎn)品特性不同，整個(gè)頁面的長度會(huì)在一屏顯示，在不影響視覺的前提了，我們需要對(duì)某個(gè)模塊弱化或者是強(qiáng)化。比如說網(wǎng)站頁腳，用戶點(diǎn)擊相對(duì)比例比較低，我們將弱化顯示，當(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)更上一層樓，如虎添翼。按鈕的提示狀態(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ā)布)加載的過程：下拉自動(dòng)翻頁的功能，會(huì)載入較多內(nèi)容，如果沒有l(wèi)oading..等字樣，告訴用戶你所看的內(nèi)容正在加載，榮請稍等片刻。用戶會(huì)感到迷惑之前，還容易導(dǎo)致用戶誤以為自己的操作有誤，容易撤銷之前的操作。除了文字提示以外，Googleplus的做法在Loading的圓球增加動(dòng)態(tài)的效果，告知用戶你所等待的內(nèi)容正在加載。(Googleplus加載過程中圓球注水的效果)(鏈接：用戶點(diǎn)擊過的鏈接狀態(tài))負(fù)面反饋機(jī)制在人生的道路上，每個(gè)人都難免犯錯(cuò)誤，重要的是我們?nèi)绾渭m正自己的錯(cuò)誤。對(duì)于網(wǎng)站的使用者用戶而言，為了不讓用戶繼續(xù)錯(cuò)誤下去，我們幫助他們糾正錯(cuò)誤也同樣重要。在上文我們舉了一個(gè)序列號(hào)案例來做作為負(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ì)常用的幾種方法：利用視覺來提供反饋式交互設(shè)計(jì)我們可以改變界面的視覺呈現(xiàn)效果和視覺元素屬性來改變反饋的表型形式。譬如在鼠標(biāo)移入圖片增加浮動(dòng)層，改變風(fēng)格樣式，增加圖片圈選的效果，或者頁面的配色和大小等方式來實(shí)施正面反饋。前面提到鏈接被點(diǎn)擊之前和被點(diǎn)擊之后所呈現(xiàn)高對(duì)比的背景色。Googleplus加載過程中注水的過程，或者用戶注冊時(shí)填寫正確時(shí)所給出的狀態(tài)提示圖標(biāo)。再比如Twitter中頁腳模塊，鼠標(biāo)劃入通過改變文字顏色等方式來突出顯示在比如一個(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)槭中危⒃黾酉聞澗€，來反饋并告知用戶鏈接和文本區(qū)別。如果系統(tǒng)在這里并沒有做出符合或者達(dá)到符合用戶預(yù)期的反饋，那么用戶很有可能會(huì)為此感到迷惑，甚至不解。利用動(dòng)畫效果提供反饋其實(shí)，動(dòng)畫自身就屬于視覺表現(xiàn)的一種方式，比如說登陸WordPress管理后臺(tái)時(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種類型：一種正面反饋，另