原則一:狀態可見原則(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;幫助文檔。
恩,我們當然也提供幫助文檔,只是還在編寫當中。。。。
到這里,十大原則就描述完畢了,總而言之,在做產品設計時把這十大原則引入到產品中,產品的體驗會發生質的飛躍。。。(原諒我用的次數還很少,說的有些夸張)
最起碼開發的時候技術大哥們都沒那么多吐槽了,測試人員也說用的舒服多了。
不得不說,尼爾森交互原則,真的要炸了。。。