建站常識
關于“反饋提示”的交互設計
2009-05-08 08:08:00
反饋這個詞兒其實是控制論的基本概念,泛指發(fā)出的事物返回發(fā)出的起始點并產(chǎn)生影響。在信息交互過程(輸入輸出)中,它是一種界面輸出物,用以提醒信息輸入者他的操作結(jié)果。它有很多種形式,包括界面元素、聲音、影像變化和物理位移(如震動)等。
我們這里討論的反饋僅特指用戶對網(wǎng)頁表單元素進行操作所得到的可視化的輸出信息,為了加強區(qū)分避免歧義,我們這里姑且稱之為反饋提示(如圖)。這里分幾個方面對其設計中應注意的事項加以簡要說明。
位置:
頁面上的反饋提示作為一種信息輸出,最重要的屬性要求就是迅速明確的被信息輸入者所知曉,這也是對設計師來說最重要的設計原則。執(zhí)行起來,可以參照兩條具體標準:
1.當前頁面:反饋提示應該放在操作發(fā)生地的附近。
根據(jù)心理學的注意力分配模型,不熟悉或十分關注的操作都會占據(jù)人腦相當多的注意力資源,若任務有延時反饋,則操作完成后注意力發(fā)生聚焦,投射在行為發(fā)生地附近,以關注產(chǎn)生的結(jié)果。簡單點說就是,我在輸入框中輸入內(nèi)容,若有任何問題,我希望反饋就在這個輸入框旁邊發(fā)生。這是再正常不過的交互與反饋了。
這條原則對于有同理心的設計師們可以說是共識,他們普遍爭議的是另一個問題,反饋與表單元素的相對位置究竟該怎樣安排才最合理?實戰(zhàn)派的主張“左右”,理論派的則倡導“上下”… … 但其實這一點并不需要太糾結(jié),一般來說,如果寬度足夠或不希望表單過長(想在一屏內(nèi)解決戰(zhàn)斗)、過于跳躍的話,那么把反饋提示放在表單元素右側(cè)是可行的,例如淘寶的注冊頁:
如果對象是有嚴格邏輯順序(如縱向)的系列操作,那么反饋提示放在操作流向途中(對應的表單元素下面)則比較合理,并能達到更好的提示效果,例如淘寶的訂單頁:
所以,上下左右并不像想象中有那么大的關系,只要在發(fā)生地附近,用戶都是可以注意到的,只是程度不同而已。倒是怎樣清晰明確地表達反饋與對發(fā)生地之間的關聯(lián)、不讓用戶產(chǎn)生迷惑顯得更為關鍵,關于這一點,jQuery Validation 所提供的 Plugin Demo里給出了一個比較好的思路,設計師們可以考慮通過一些樣式的改變來制造一些聯(lián)系。
現(xiàn)在facebook采用的也正是這樣的一種方式,它通過加粗的邊線與箭頭更強的表達這種關聯(lián)性:
2.刷新頁面:反饋提示應該放在用戶最渴望看到它的地方或最容易注意到的地方。
網(wǎng)頁的加載特性讓我們的操作區(qū)域有可能會在頁面刷新后消失于我們注意力的聚焦范圍之內(nèi)。新的頁面中,緊張、“短暫失憶”的用戶不一定會拖動滾動條來找剛才的操作區(qū)域(原來的聚焦范圍也很快消失掉了),進而找到反饋結(jié)果。他們擔心、茫然,渴望在新頁面中一目了然地看到它。這個時候,把反饋提示放在新頁面中的顯著位置無疑是最佳選擇,頁面導航的下方和表單區(qū)域的上方都是不錯的位置。
狀態(tài),樣式:
關于狀態(tài)和樣式在這里不去做過多的探討,注意兩點:1.將狀態(tài)分類(對/錯/提/警等)并進行差異化設計是一個不錯的辦法,至少對你的中高級用戶會有一定的好處;2.icon能起到明顯的狀態(tài)提示作用,但選用時需慎重,要明確,要友好,不要夸張。至于形式上到底需不需要有底色、帶邊框、配icon、長箭頭等,對反饋來說并不必要,不需要很糾結(jié),具體情況具體分析一下,只要能引起注意、表意快速明確并且不讓用戶產(chǎn)生迷惑,所有的樣式都是值得嘗試的。
文案:
雖然說最好的文案就是沒有文案,但這只是個遙遠的vision,現(xiàn)實中文案必不可少,交互設計師是應該注意一些的,它的好壞直接影響用戶體驗。
首先你需要一個文案模板以輔助設計和保證統(tǒng)一性,業(yè)內(nèi)比較認同的是“[狀態(tài)+解釋]+(解決辦法)”的文案結(jié)構(gòu),一般來說,按照這個套路來,大體上都能保證文案的完備和明確。下圖中都是同形式同指意的反饋提示,百度說的就比YouTube要清楚。
除了明確、清楚之外,文案還需要尊重用戶的掃讀習慣和個人情感:比如,你想表達一個or的關系,用“或”會比用“或者”好些,因為“或”字會讓兩邊的主體內(nèi)容在掃讀的情況下變得更容易識別;再比如,你面向的是注重風水和彩頭的商人,也許“恭喜,只差一步…”就應該寫成“恭喜,還有一步…”,因為你的用戶們對負面的文字和語義會比其他人更加敏感… …
寫文案比寫文章困難,它需要更多細膩的心思和周全的考慮,在滿足基本要求的同時還必須在狹小的發(fā)揮空間內(nèi)體現(xiàn)出獨特的產(chǎn)品氣質(zhì),這是非常難能可貴的事情。如果你有精彩的案例,請跟我們分享吧!
出口:
出口,即上文中提到的解決辦法,它可以是用戶對當前反饋的非正常狀態(tài)的解決途徑,如圖中的[?];也可以是一個交互階段結(jié)束后,系統(tǒng)給用戶的操作引導,如圖中的文字鏈接。在某些情況下,這些出口是十分必要的,這就好像當你告訴用戶此路不通時最好指給他一條能通的路,當用戶走到一個丁字路口時,你最好能告訴他是該往左還是該往右。
需要提醒的是,這種出口切忌太多,階段交互結(jié)束后,對于思路中斷并且茫然的用戶來說,太多選擇甚至比不上沒有選擇(如下圖)。按照用戶心理需求和操作習慣排個序,最多放出兩個,一主一次。
可以說有交互就會有反饋,反饋是交互設計中最前線最直接的一環(huán),它的好壞直接影響產(chǎn)品體驗。實際設計中,由于缺乏意識或項目時間緊張,設計師對這一塊往往并不給以過多的關注,設計起來也比較倉促和盲目,這點需要特別糾正過來,在原型中期,就需要把表單元素的校驗規(guī)則以及可能的反饋情況都設計好。這是一個良好的習慣。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網(wǎng)站設計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網(wǎng)站建設公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設計都有哪些新的趨勢?
延伸閱讀
- [2009-06-12 08:33:00] 交互設計師是一個沒有前途的工作?(譯)
- [2010-07-01 08:18:00] 短兵相接勇者勝—緊張項目管理策略
- [2009-08-03 07:42:00] 如何理解與規(guī)劃設計師的職業(yè)生涯
- [2009-12-12 08:54:00] 交互設計有效性之操作入口明確
- [2009-06-04 08:18:00] 微軟Bing交互設計與用戶體驗
- [2010-06-02 08:47:00] 專題模板(v4.0)視覺升級隨筆
- [2010-06-29 15:19:00] 妖文化凝粹——QQ西游官網(wǎng)改版紀實
- [2010-06-21 22:36:00] 可用性在于細節(jié)
- [2010-01-11 21:41:00] 交互設計(5)–突出重點,一目了然
- [2010-11-15 08:26:00] 讀設計看需求
- [2010-11-01 16:39:00] 交互設計師五大關鍵素養(yǎng)
- [2010-12-17 08:28:00] 關于WEB登錄注冊系統(tǒng)的下午茶
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿(mào)行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關鍵字
網(wǎng)站優(yōu)化 手機網(wǎng)站 力圖 搜索引擎 圖形網(wǎng)格 青島網(wǎng)站建設公司哪家好 網(wǎng)站交互設計 青島flash網(wǎng)站 青島網(wǎng)站制作 微網(wǎng)站 微官網(wǎng) css 網(wǎng)站建設,手機網(wǎng)站 程序開發(fā) 網(wǎng)站設計 平面設計 php程序 集團性網(wǎng)站 視覺靈感 青島輪胎網(wǎng)站設計 中小型企業(yè)網(wǎng)站建設 網(wǎng)站改版 SEO 青島網(wǎng)站案例 企業(yè)網(wǎng)站為什么要備案 青島SEO 集團官網(wǎng) 響應式設計 審美 頁面設計