原則一:狀態(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ù)大哥們都沒那么多吐槽了竿报,測試人員也說用的舒服多了。
不得不說继谚,尼爾森交互原則烈菌,真的要炸了。花履。僧界。