產(chǎn)品交互的十大原則

原則一:狀態(tài)可見原則(Visibility of system status)

用戶在網(wǎng)頁上的任何操作敦间,不論是單擊炸渡、滾動還是按下鍵盤娜亿,頁面應即時給出反饋“龆拢“即時”是指买决,頁面響應時間小于用戶能忍受的等待時間。

從人的心理層面上講吼畏,如果一個人的行動得到反饋督赤,會增加人持續(xù)性行動的欲望,能促使人保持心情愉悅的狀態(tài)泻蚊。(平時說話的時候又何嘗不是呢=躲舌。= 老板也整天說feedback、feedbackP孕邸C恍丁)

下圖是一個網(wǎng)頁按鈕對用戶可見的三種狀態(tài)羹奉。第一種是普通狀態(tài),用戶未對該按鈕進行操作時的常規(guī)狀態(tài)约计;第二種是光標滑過時的狀態(tài)诀拭,即當用戶的光標移動到按鈕上時,按鈕的顏色就會相應的改變病蛉,告知用戶正對按鈕正處于可操作的狀態(tài)炫加。第三種是當用戶按下時按鈕顏色又會相應的加深,以告知用戶進行了點擊操作铺然。

當然俗孝,不只是按鈕的反饋,你點擊按鈕后進行了什么操作魄健,也是需要反饋出來的赋铝。比如說我想把老板幾百萬的訂單給刪了。沽瘦。革骨。額,原來別的同事在刪著析恋。

原則二:符合真實的世界(Match between system and the real world)

網(wǎng)頁的一切表現(xiàn)和表述良哲,應該盡可能貼近用戶所在的環(huán)境(年齡、學歷助隧、文化筑凫、時代背景),而不要使用第二世界的語言并村。

基于符合真實世界原則巍实,我對管理系統(tǒng)1.0版本的一個模塊中的篩選項做了以下改進。根據(jù)下圖哩牍,對于公眾號已經(jīng)群發(fā)的文章推送進行日期篩選棚潦,在1.0版本時是直接label加日期選擇框(包含提示信息)。但是咋一眼看來感覺像是輸入的樣子膝昆,并沒有暗示用戶這是一個日期選擇框丸边。所以在2.0的設(shè)計上,我在選擇框中的右方添加的一個日歷的icon荚孵,并顯示提示文字“選擇群發(fā)日期”原环。因為日歷的icon直接給了用戶提示,來告知用戶該框的具體作用是什么处窥,讓用戶一目了然嘱吗。

原則三:用戶的控制性和自由度(User control and freedom)

為了避免用戶的誤用和誤擊,網(wǎng)頁應提供撤銷和重做功能。

大家都說谒麦,世界上是沒有后悔藥的俄讹。。绕德。

然并卵患膛,在程序的世界里死了都能復活,就甭管后悔藥了耻蛇。

當用戶進行了一些重要的操作時踪蹬,為了防止用戶誤操作帶來嚴重的后果,程序就會設(shè)置一種“撤銷”的回退方式以讓用戶對誤操作進行補救臣咖。比如下圖跃捣,用戶在多公眾號系統(tǒng)中刪除了公眾號,刪除成功時會出現(xiàn)刪除成功的提示夺蛇,同時會出現(xiàn)幾秒的“撤銷”按鈕疚漆。生與死,就看這幾秒了刁赦。

原則四:一致性和標準化(Consistency and standards)

產(chǎn)品在遵循平臺慣例的基礎(chǔ)上也要保證產(chǎn)品功能操作娶聘、控件樣式、界面布局甚脉、提示信息的一致性丸升,不要讓用戶在使用產(chǎn)品的時候發(fā)現(xiàn)不符合產(chǎn)品規(guī)范的地方。

也就是說對用語牺氨、功能狡耻、操作需要保持一致。比如說在用語方面波闹,產(chǎn)品中使用了“新建”和“創(chuàng)建”兩個詞語來描述時酝豪,就會造成歧義涛碑,同時顯得不夠?qū)I(yè)精堕。

還有就是icon和其描述的文字也需要保持一致。在管理系統(tǒng)2.0版本中的賬號模塊蒲障,如下圖歹篓,每個icon和文案描述是一致的,如果我把“個人資料”的icon和“修改密碼”的icon對調(diào)揉阎,那就變得奇怪庄撮,也會引起用戶的困惑。

原則五:防止用戶出錯原則(Error prevention)

通過頁面的設(shè)計毙籽、重組或特別安排洞斯,防止用戶出錯。

對于這個原則,也是深有感觸烙如,因為管理系統(tǒng)的其中一條業(yè)務(wù)線么抗,就是接收廣告訂單,每個訂單中包含多個公眾號亚铁,并且每個公眾號因為粉絲不同而使得每個公眾號所占訂單的金額不盡相同蝇刀,以下是新增廣告訂單時添加對應的公眾號。

在1.0版本時徘溢,我沒有對所占金額進行輸入進行限制和相應的金額提醒吞琐,當用戶添加完所有公眾號之后,然后點擊添加廣告訂單時然爆,發(fā)現(xiàn)輸入的公眾號總金額超過了訂單金額而導致添加失敗站粟,此時用戶只能跑回去檢查哪個公眾號輸錯了。施蜜。卒蘸。(還要用戶去找,哎翻默。缸沃。。)

后來修械,在2.0版本的時候趾牧,我添加了輸入的限制條件,在輸入所占金額一項中肯污,限制最大可輸入的金額為訂單所剩的金額翘单,讓用戶在輸入時就能發(fā)現(xiàn)問題,并進行提示蹦渣,這樣用戶能實時知道自己是否有錯誤哄芜,減少整個過程的試錯成本。

原則六:識別比記憶好(Recognition rather than recall)

盡可能減少用戶回憶負擔柬唯,把需要記憶的內(nèi)容擺上臺面认臊。動作和選項應該是可見的。

在系統(tǒng)1.0版本的時候锄奢,我對于刪除這種含有危險性的操作都會進行彈窗以提示用戶是否確定進行刪除操作失晴,但是提示中的語言基本上是一致的。也就是“確定是否刪除XXX拘央?”之類的描述涂屁。并且都是使用同一樣式的確定/取消按鈕。但是如果用戶在不注意的情況下忘記了他是想刪除哪一項灰伟,需要點擊取消拆又,然后倒回去查看,然后再找到對應項再進行刪除操作。這個流程完全是沒有考慮到減少用戶的記憶負荷所造成的結(jié)果帖族。為了提高體驗义矛,我們應該把動作和選項都設(shè)置為可見,即把需要記憶的內(nèi)容展示出來盟萨。

所以在第二版本時凉翻,我把動作和內(nèi)容都加上了,威武捻激。制轰。。

原則七:使用的方別快捷(靈活高效原則)(Flexibility and efficiency of use)

中級用戶的數(shù)量遠高于初級和高級用戶數(shù)胞谭。為大多數(shù)用戶設(shè)計垃杖,不要低估,也不可輕視丈屹,保持靈活高效调俘。

為大多數(shù)用戶設(shè)計,兼容少部分特殊用戶旺垒。

用戶在使用產(chǎn)品時能夠方便快捷的完成相關(guān)任務(wù)或動作彩库,即讓用戶以最快最便捷的方式完成任務(wù)。如下圖先蒋,圖下方有一個“下一條”的按鈕骇钦,這個按鈕就是給用于提供一個快捷輸入的入口,當用戶添加完一個公眾號后竞漾,可以點擊下一條直接添加第二個公眾號眯搭,不用再回到主頁面點擊添加再進行廣告公眾號的添加。

原則八:審美和簡約的設(shè)計(Aesthetic and minimalist design)

在產(chǎn)品的設(shè)計或相關(guān)界面中业岁,讓你的相關(guān)信息盡量一目了然不要過于復雜繁瑣鳞仙,即讓自己的架構(gòu)簡單界面簡潔突出重要內(nèi)容去掉或弱化干擾和不相關(guān)的信息/內(nèi)容。

當然笔时,在當前扁平化和簡約設(shè)計大行其道的情況下棍好,簡約的設(shè)計基本成為主流了,當然在公眾號管理平臺1.0版本中就已經(jīng)使用了簡約設(shè)計的糊闽。如我們系統(tǒng)的登錄界面梳玫,因為我們的是ToB的后臺管理系統(tǒng)爹梁,所以會更加顯得簡單(好像又太簡單了右犹。。姚垃。)

原則九:容錯原則(Help users recognize, diagnose, and recover from errors)

幫助用戶從錯誤中恢復念链,將損失降到最低。如果無法自動挽回,則提供詳盡的說明文字和指導方向掂墓,而非代碼谦纱,比如404。

回想起自己對公眾號管理系統(tǒng)1.0版本進行設(shè)計時君编,由于微信那邊對第三方平臺的限制跨嘉,自定義菜單時需要用戶跑到微信后臺去填寫配置信息,并且需要提交并啟用配置吃嘿。步驟相對較多祠乃,并且操作繁瑣(當時有想過砍掉這個功能,但由于是客戶提出的必要需求兑燥,只能從產(chǎn)品上改進)亮瓷。后來為了防止用戶忘了在后臺配置相關(guān)信息而導致在我們系統(tǒng)中的操作無效,所以我們在對應的操作中添加了提示降瞳,便于用戶可以找到正確的操作指引嘱支。

原則十:人性化原則(Help and documentation)

如果系統(tǒng)不使用文檔是最好的,但是有必要提供幫助和文檔挣饥。任何信息應容易去搜索除师,專注于用戶的任務(wù),列出具體的步驟來進行扔枫。幫助性提示最好的方式是:1馍盟、無需提示;2茧吊、一次性提示贞岭;3、常駐提示搓侄;4瞄桨;幫助文檔。

恩讶踪,我們當然也提供幫助文檔芯侥,只是還在編寫當中。乳讥。柱查。。

到這里云石,十大原則就描述完畢了唉工,總而言之,在做產(chǎn)品設(shè)計時把這十大原則引入到產(chǎn)品中汹忠,產(chǎn)品的體驗會發(fā)生質(zhì)的飛躍淋硝。雹熬。。(原諒我用的次數(shù)還很少谣膳,說的有些夸張)

最起碼開發(fā)的時候技術(shù)大哥們都沒那么多吐槽了竿报,測試人員也說用的舒服多了。

不得不說继谚,尼爾森交互原則烈菌,真的要炸了。花履。僧界。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市臭挽,隨后出現(xiàn)的幾起案子捂襟,更是在濱河造成了極大的恐慌,老刑警劉巖欢峰,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件葬荷,死亡現(xiàn)場離奇詭異,居然都是意外死亡纽帖,警方通過查閱死者的電腦和手機宠漩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來懊直,“玉大人扒吁,你說我怎么就攤上這事∈夷遥” “怎么了雕崩?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵,是天一觀的道長融撞。 經(jīng)常有香客問我盼铁,道長,這世上最難降的妖魔是什么尝偎? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任饶火,我火速辦了婚禮,結(jié)果婚禮上致扯,老公的妹妹穿的比我還像新娘肤寝。我一直安慰自己,他們只是感情好抖僵,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布鲤看。 她就那樣靜靜地躺著,像睡著了一般裆针。 火紅的嫁衣襯著肌膚如雪刨摩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天世吨,我揣著相機與錄音澡刹,去河邊找鬼。 笑死耘婚,一個胖子當著我的面吹牛罢浇,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播沐祷,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼嚷闭,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了赖临?” 一聲冷哼從身側(cè)響起胞锰,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎兢榨,沒想到半個月后嗅榕,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡吵聪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年凌那,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吟逝。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡帽蝶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出块攒,到底是詐尸還是另有隱情励稳,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布囱井,位于F島的核電站麦锯,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏琅绅。R本人自食惡果不足惜扶欣,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望千扶。 院中可真熱鬧料祠,春花似錦、人聲如沸澎羞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽妆绞。三九已至顺呕,卻和暖如春枫攀,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背株茶。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工来涨, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人启盛。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓蹦掐,卻偏偏與公主長得像,于是被迫代替她去往敵國和親僵闯。 傳聞我的和親對象是個殘疾皇子卧抗,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 古有力學三大定律,現(xiàn)有交互十大原則鳖粟。讓我產(chǎn)品一溜一溜的社裆。沒錯,這里所說的“十大交互原則”向图,就是尼爾森交互原則浦马。那么...
    kimson閱讀 3,450評論 9 66
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,747評論 25 707
  • 社交紅利閱讀筆記 書名:社交紅利(修訂升級版) 作者:徐志斌 出版社:中信出版社 正文前筆記: 推薦序1摘要 社交...
    鳧水閱讀 8,913評論 4 26
  • 最近做的工作內(nèi)容就是總結(jié)分析常見常用的交互原則。在閱讀整理的基礎(chǔ)上张漂,我將目前常見常用的交互法則總結(jié)如下晶默。本文整體結(jié)...
    壹玖貳貳閱讀 2,399評論 1 18
  • 在我以為磺陡,有一類人是極其幸福的,他們從小時候開始漠畜,對于自己人生中的每一個階段币他,想要什么、接下來該做什么憔狞,都無比清...
    夢溪_閱讀 309評論 1 1