產品交互的十大原則

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

用戶在網頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應即時給出反饋。“即時”是指,頁面響應時間小于用戶能忍受的等待時間。

從人的心理層面上講,如果一個人的行動得到反饋,會增加人持續性行動的欲望,能促使人保持心情愉悅的狀態。(平時說話的時候又何嘗不是呢=。= 老板也整天說feedback、feedback!!)

下圖是一個網頁按鈕對用戶可見的三種狀態。第一種是普通狀態,用戶未對該按鈕進行操作時的常規狀態;第二種是光標滑過時的狀態,即當用戶的光標移動到按鈕上時,按鈕的顏色就會相應的改變,告知用戶正對按鈕正處于可操作的狀態。第三種是當用戶按下時按鈕顏色又會相應的加深,以告知用戶進行了點擊操作。

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

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

網頁的一切表現和表述,應該盡可能貼近用戶所在的環境(年齡、學歷、文化、時代背景),而不要使用第二世界的語言。

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

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

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

大家都說,世界上是沒有后悔藥的。。。

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

當用戶進行了一些重要的操作時,為了防止用戶誤操作帶來嚴重的后果,程序就會設置一種“撤銷”的回退方式以讓用戶對誤操作進行補救。比如下圖,用戶在多公眾號系統中刪除了公眾號,刪除成功時會出現刪除成功的提示,同時會出現幾秒的“撤銷”按鈕。生與死,就看這幾秒了。

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

產品在遵循平臺慣例的基礎上也要保證產品功能操作、控件樣式、界面布局、提示信息的一致性,不要讓用戶在使用產品的時候發現不符合產品規范的地方。

也就是說對用語、功能、操作需要保持一致。比如說在用語方面,產品中使用了“新建”和“創建”兩個詞語來描述時,就會造成歧義,同時顯得不夠專業。

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

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

通過頁面的設計、重組或特別安排,防止用戶出錯。

對于這個原則,也是深有感觸,因為管理系統的其中一條業務線,就是接收廣告訂單,每個訂單中包含多個公眾號,并且每個公眾號因為粉絲不同而使得每個公眾號所占訂單的金額不盡相同,以下是新增廣告訂單時添加對應的公眾號。

在1.0版本時,我沒有對所占金額進行輸入進行限制和相應的金額提醒,當用戶添加完所有公眾號之后,然后點擊添加廣告訂單時,發現輸入的公眾號總金額超過了訂單金額而導致添加失敗,此時用戶只能跑回去檢查哪個公眾號輸錯了。。。(還要用戶去找,哎。。。)

后來,在2.0版本的時候,我添加了輸入的限制條件,在輸入所占金額一項中,限制最大可輸入的金額為訂單所剩的金額,讓用戶在輸入時就能發現問題,并進行提示,這樣用戶能實時知道自己是否有錯誤,減少整個過程的試錯成本。

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

盡可能減少用戶回憶負擔,把需要記憶的內容擺上臺面。動作和選項應該是可見的。

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

所以在第二版本時,我把動作和內容都加上了,威武。。。

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

中級用戶的數量遠高于初級和高級用戶數。為大多數用戶設計,不要低估,也不可輕視,保持靈活高效。

為大多數用戶設計,兼容少部分特殊用戶。

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

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

在產品的設計或相關界面中,讓你的相關信息盡量一目了然不要過于復雜繁瑣,即讓自己的架構簡單界面簡潔突出重要內容去掉或弱化干擾和不相關的信息/內容。

當然,在當前扁平化和簡約設計大行其道的情況下,簡約的設計基本成為主流了,當然在公眾號管理平臺1.0版本中就已經使用了簡約設計的。如我們系統的登錄界面,因為我們的是ToB的后臺管理系統,所以會更加顯得簡單(好像又太簡單了。。。)

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

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

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

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

如果系統不使用文檔是最好的,但是有必要提供幫助和文檔。任何信息應容易去搜索,專注于用戶的任務,列出具體的步驟來進行。幫助性提示最好的方式是:1、無需提示;2、一次性提示;3、常駐提示;4;幫助文檔。

恩,我們當然也提供幫助文檔,只是還在編寫當中。。。。

到這里,十大原則就描述完畢了,總而言之,在做產品設計時把這十大原則引入到產品中,產品的體驗會發生質的飛躍。。。(原諒我用的次數還很少,說的有些夸張)

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

不得不說,尼爾森交互原則,真的要炸了。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,538評論 3 417
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,761評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,207評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,419評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,959評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,678評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,978評論 2 374

推薦閱讀更多精彩內容

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