譯文 | 交互設(shè)計基本原則

前言:
下面的原則對于有效的用戶界面的設(shè)計和實現(xiàn)都是最基本的,不管是針對傳統(tǒng)的圖形用戶界面還是針對任意的可聯(lián)網(wǎng)的智能電子設(shè)備都是有用的。
有效的用戶界面是視覺明顯的并且寬容的,會帶給用戶一種控制感。用戶能很快明白他們可以做的事,知道如何實現(xiàn)他們的目標(biāo),并且可以不受打擾的完成他們的工作;有效的界面不會讓用戶知道系統(tǒng)的內(nèi)部是怎么運轉(zhuǎn)的,用戶的工作被仔細連續(xù)不斷的保存下來,并且可以允許用戶在任何時間重做他們的工作;有效的應(yīng)用和服務(wù)自己做大量的幕后工作,只讓用戶做少量的事。
我喜愛蘋果公司及產(chǎn)品,但它并不完美
在這篇文章里我用了很多的蘋果公司產(chǎn)品的例子,大多是反面的例子。蘋果公司在交互設(shè)計領(lǐng)域已經(jīng)做出了很多的革新,我希望他們繼續(xù)下去。但是他們也會犯錯誤,雖然沒有其他的產(chǎn)品錯誤多,但是因為我頻繁使用蘋果的產(chǎn)品,導(dǎo)致一直看到那些錯誤。在寫這篇文章的時候我用了好多的蘋果產(chǎn)品,從iMac到iPad,因此我很容易立即就能找到那些反面的例子。
但是不要因為這篇文章就認為我對蘋果懷恨在心。事實上在1978年,在被喬布斯雇傭后我設(shè)計了蘋果的第一個人機界面。之后超過14年我一直在這個公司工作,新產(chǎn)品發(fā)布后我會第一時間買幾乎所有的蘋果產(chǎn)品,并且投資了很多的蘋果公司的股票。我喜歡蘋果,支持蘋果,但同時希望它變得更好。
美學(xué):
原則:美術(shù)設(shè)計應(yīng)該留給那些受過正規(guī)訓(xùn)練的有足夠技術(shù)能力的圖形或視覺設(shè)計師
原則:設(shè)計潮流應(yīng)該先考慮可用性
從衣服到汽車出于商業(yè)的目的為了賣出更多的產(chǎn)品公司會人為地推出新設(shè)計來使舊產(chǎn)品過時。但是新的設(shè)計潮流不應(yīng)該對產(chǎn)品的可用性不利。
原則:像測試交互設(shè)計一樣也要對視覺設(shè)計進行測試
在美學(xué)風(fēng)格變化之后進行用戶測試,要確保產(chǎn)品的可學(xué)性,用戶的滿意度和工作效率等會提高或至少不會降低。如果不是的話,新變化的美學(xué)風(fēng)格所造成的問題需要重新考慮。
原則(譯者補充):保持一致性
一致性也是非常重要的,不一致的設(shè)計不但會讓用戶迷惑,而且會讓他們覺得設(shè)計很丑。一致性包括很多內(nèi)容,1)與平臺設(shè)計語言的一致,比如iOS7+系統(tǒng)都變得扁平了,如果某個應(yīng)用仍然是十分?jǐn)M物的,單獨看可能會不錯,但如果與其他的應(yīng)用比較用戶可能就會覺得這個設(shè)計很丑;2)自身版本更新時前后一致,不要突然大幅度變化設(shè)計風(fēng)格讓用戶難以接受;3)應(yīng)用的當(dāng)前版本內(nèi)部各個設(shè)計也要一致,比如圖標(biāo)風(fēng)格一致,顏色一致,不要隨便選擇按鈕的顏色,圓角的角度
預(yù)知需求:
原則:在用戶達成目標(biāo)的每一步都把所有必要的信息和工具帶給用戶
不管是軟件還是硬件都要盡力去預(yù)知用戶的需求。不要期待用戶離開當(dāng)前的頁面去尋找他所需要的信息。所需的信息和工具必須放在合適的位置并且要明顯可見。
預(yù)知要求設(shè)計師對于用戶和用戶的目標(biāo)有一個很深的理解,它也請求有效的可用性測試來保證達成了目標(biāo):如果所需的工具和信息已經(jīng)在屏幕上了,但是用戶卻不能發(fā)現(xiàn)他,可能預(yù)知地不是很準(zhǔn)確。
設(shè)計師沒能預(yù)知用戶的需求所帶來的損失經(jīng)常是很快并且長久的,特別是如果你還沒有忠實用戶,對于大眾服務(wù)類網(wǎng)站或應(yīng)用,這些用戶可能就不會再重新使用你的產(chǎn)品了。甚至是如果你已經(jīng)有了一些忠實用戶,但是你也很難將他們轉(zhuǎn)為為忠實的付費客戶,這時往往是你的競爭對手超越你的機會。
用戶自主:
原則:不管是硬件環(huán)境還是軟件環(huán)境都應(yīng)該屬于用戶,但是這不是說用戶自主控制就意味著我們要放任這個規(guī)則
給我們的用戶一些“呼吸”的空間(自由)。用戶可以快速學(xué)習(xí)并且掌握我們的產(chǎn)品。然而,有時候人們在沒有邊界的自由中也會感到不自由,掌握好這個度。一個小孩子被放在一個小的空間中或者放在一個特別大的倉庫中他都會感到不舒服甚至哭。我們成年人也一樣,在一個既不會受限也不會太放任的環(huán)境中會感到更舒適,這個環(huán)境可以留給人們探索的空間但是沒有危險。
原則:讓人們自主做出決定,盡管有些用戶沒有好的審美或者行為并不高效
用戶自主意味著用戶來決定他們使用鍵盤的哪個按鍵,他們把他們的電腦桌面弄成什么樣子(盡管可能會很丑),或者他們用哪個APP。當(dāng)開發(fā)者從用戶的手中帶走控制權(quán)時,用戶會感到挫敗和生氣。
原則:一步步實踐來提供給用戶恰當(dāng)?shù)目刂?/strong>
留給用戶自主控制并不意味著設(shè)計師要放任所有的控制,相反的,設(shè)計師必須采用有必要的控制?!坝脩舨粦?yīng)該被給一把槍來自殺”。目前,很多設(shè)計師們不但采用了過多的控制,而且在這些過程中犯了很多人機交互的基本錯誤,比如限制人們閱讀普通人眼難以閱讀的文字大小和字體。他們甚至讓用戶用“肥胖的”手指定位到像素級別的文本輸入框中,卻不用必要的箭頭按鍵,僅僅是因為設(shè)計師覺得好看。這些都損失了易用性。
設(shè)計師們設(shè)定一個武斷的時間長度和移動距離來判斷一個用戶是否故意點擊一個鏈接,但是用戶很可能就只是在上下滑動的過程中想暫停一下不小心就觸發(fā)了那個鏈接(譯者對移動端medium的鏈接已經(jīng)討厭死了)。設(shè)計師沒有提供用戶改變那個觸發(fā)門檻的方式,因此很多用戶發(fā)現(xiàn)他們每天很多次很多次觸發(fā)了他們并不想要打開的鏈接。這就是應(yīng)用不負責(zé)任控制的例子。我們30年前發(fā)現(xiàn)用戶使用滑塊所需的努力相當(dāng)于需要鼠標(biāo)倆次點擊所需要的努力。觸摸屏的用戶對于鏈接的處理也需要如此:
每次完美的鏈接觸發(fā)機制
在思考如何解決像偶然的鏈接觸發(fā)問題的時候,我們必須考慮用戶偶然觸發(fā)鏈接和用戶有意觸發(fā)鏈接的區(qū)別。
當(dāng)我們考慮后這倆者的區(qū)別是顯而易見的:當(dāng)我看那個鏈接時我是下意識想打開那個鏈接的,當(dāng)我不看那個鏈接時那么我就是偶然觸發(fā)的那個鏈接。打開設(shè)備的攝像頭或者使用內(nèi)置的專用眼動追蹤儀去查看用戶的眼睛軌跡。如果用戶長時間恰好在看那個鏈接,那么就是用戶想要打開那個鏈接;相反,如果用戶沒有看那個鏈接,他就是不小心觸碰到了那個鏈接。當(dāng)你已經(jīng)能決定用戶是不是有意識的觸碰鏈接了,這個問題 就很好解決了。如果用戶不小心觸碰鏈接,不理睬那個事件就可以了。
為了節(jié)省電量,采用這個方法的時候只在用戶按壓鏈接的時候打開攝像機或者內(nèi)置眼動儀。這個技術(shù)和算法可能需要對時間進行微調(diào),但是一旦成功就是相當(dāng)精確地。
這個方法可能已經(jīng)被發(fā)明了,它叫做:“用眼動追蹤來減少偶然的鏈接喚起錯誤”。我在這里將它公之于眾。
原則:設(shè)備狀態(tài)讓用戶可知
用戶自主需要讓用戶有控制權(quán),這就需要讓用戶清楚地知道有效的設(shè)備狀態(tài)信息,比如電量,網(wǎng)絡(luò)情況等。狀態(tài)機制為用戶響應(yīng)產(chǎn)品使用過程中狀況的改變提供了必要的信息。
原則:讓狀態(tài)信息保持及時更新并且容易看到
用戶不應(yīng)該去尋找那些狀態(tài)信息。而應(yīng)該如此:他們應(yīng)該能夠輕易看到他們的工作狀況并且能夠收集到最重要的狀態(tài)信息。
原則:確保狀態(tài)信息是精確的
狀態(tài)信息不但應(yīng)該及時更新,更應(yīng)該是準(zhǔn)確無誤的。截止目前,當(dāng)一個用戶更新iPhone或者iPad的系統(tǒng)時,一個進度指示條將會出現(xiàn)告知完成更新過程大概會用5分鐘。但是實際上,它可能會花費1個多小時(新的系統(tǒng)可能5分鐘確實就弄好了,但是其他的很多內(nèi)容信息必須被重新加載才能使用)。用戶,被欺騙了,他不知道設(shè)備什么時候可以正常使用,沒有自主控制感。
顏色:
原則:在用戶界面設(shè)計中你想通過顏色傳達信息時,你應(yīng)該也要使用第二個線索來給那些不能準(zhǔn)確看清楚顏色的用戶傳達清楚信息。
目前大多數(shù)人沒有顏色問題,然而,大約10%的男性用戶,少于1%的女性用戶,有不同程度的色盲。其中很多男性用戶對細微的顏色差別不是很敏感。
原則:測試一下你的網(wǎng)站去看一看色盲用戶眼中你的網(wǎng)站是什么樣子
通過谷歌搜索一些這樣的模擬工具。比如,對于網(wǎng)站,你可以嘗試http://enably.com/chrometric/
對于圖片,你可以嘗試這個:http://www.color-blindness.com/coblis-color-blindness-simulator/
原則:不要因為不是每個用戶都能看清楚每個顏色而避免在界面中使用顏色
對于我們設(shè)計師,顏色是一個重要的交流工具。對于色盲用戶拿走他們不能看到的顏色無異于完全沒有視力的人們看不清楚任何東西。即使對于色盲用戶顏色也是一個重要的線索。
原則:在用戶界面中不要因為一時的時尚潮流完全不用顏色或者使用大量的顏色線索
從服裝到汽車領(lǐng)域人為地制造一些時尚來使產(chǎn)品過時從而獲得利潤是一個有效的方式,然而時尚不應(yīng)該也不需要讓用戶使用軟件時有所不便。在軟件的美學(xué)改變后進行用戶測試,標(biāo)記那些新的設(shè)計變化。確保整個軟件的可學(xué)性,滿意度并且確保整個產(chǎn)品已經(jīng)提高了那些指標(biāo)或者至少保持不變。如果不是的話,新增加的美學(xué)風(fēng)格正在引起一些需要重新被考慮的問題。
一致性:
下面所說的四個一致性原則,在產(chǎn)品的更新過程中提供給交互設(shè)計師一些參考。具有一致性的產(chǎn)品對于用戶來說是重要的。
(1)一致性的不同等級
原則:按照等級的不同維持嚴(yán)格的一致性
下面的清單是根據(jù)苛求最少的連續(xù)性到苛求最多的連續(xù)性排序的(很多人們認為下面的一致性順序應(yīng)該按照相反的順序排序,那真的才會導(dǎo)致用戶對看起來熟悉,但是交互完全不同的界面迷惑):
1,平臺一致性和內(nèi)部產(chǎn)品的一致性:
讓產(chǎn)品與所在的平臺規(guī)范盡量保持一致。在你公司的不同產(chǎn)品或服務(wù)之間維持一個普遍的樣子或感覺。傳播你的品牌可以使你的其他產(chǎn)品更快更容易被用戶接受。
2,系列產(chǎn)品的一致性:比如微軟的office
3,應(yīng)用的的歡迎屏,首頁等設(shè)計元素的總體的視覺一致性:
視覺設(shè)計師應(yīng)該建立一個有目的的經(jīng)過思考的視覺語言,并通過可用性測試。用戶的行為應(yīng)該能在不同的版本的產(chǎn)品之間一致。
4,小的可見的結(jié)構(gòu)元素一致性,比如icons,按鈕,滾動條等
這些元素的視覺設(shè)計應(yīng)該需要被嚴(yán)格的控制。他們的位置雖然沒有視覺設(shè)計重要,但依然需要認真考慮,如果標(biāo)準(zhǔn)化他們的位置是有意義的,那就這么做吧。(譯者注:元素的位置應(yīng)該遵守用戶的習(xí)慣,建議看下面這篇文章:http://uxmovement.com/buttons/how-button-placement-standards-reinforce-user-habits/)
5,不可見的產(chǎn)品元素的一致性:
比如Word的“聰明的小左邊框”(譯者注:不知道這里指的什么,原文是:clever little left border)有各種各樣的神奇的屬性。如果你曾經(jīng)在某個地方發(fā)現(xiàn)了他,他可能在你的Word中又沒有了。如果你真的找不到了,你可能再也不確定她是不是在那里。這真的就是不可見的元素的錯誤,如果你堅持用他們,務(wù)必要保證他們的一致性。
蘋果公司也很明顯地認為不可見的元素是一個好主意,然后開始模仿微軟,到處在它的產(chǎn)品中增加不可見的控制,從滾動條到按鈕。在mac上這種情況很糟糕,在2010年之前,一個用戶知道怎么在電腦上使用那些最基本的功能唯一的方式就是通過谷歌搜索(了解更多,看之后的“可見性”)
一些元素,嚴(yán)格的說,明顯沒有表現(xiàn)出用戶可以控制他們,因此用戶,即使離開他們的設(shè)備后,可能也不會發(fā)現(xiàn)他們可以被操控。如果你堅持要隱藏一些控制,一定要保證對于用戶來說那些規(guī)則是簡單的,比如:“你能通過點擊和拖動當(dāng)前窗口的邊緣來縮放窗口”,不應(yīng)該是:“你能通過點擊和拖動有時候是一個物體來實現(xiàn)他們,有時候又是另外一個物體”。因此嘗試觀察一些用戶看他們是怎么做的。
物體是傳達信息的,而不是用來產(chǎn)生信息的,很少應(yīng)該保持不可見。蘋果公司在mac上讓用戶只有把鼠標(biāo)放到特定的地方才能讓滾動條出現(xiàn),這已經(jīng)違反了這些原則。
6,用戶行為的響應(yīng)
改變你的用戶已經(jīng)習(xí)慣的某個行為的系統(tǒng)響應(yīng)是你對你的用戶做的最差勁的事情之一??旖萱I必須維持他們的意義。一個用戶已經(jīng)習(xí)得的手勢動作必須被系統(tǒng)以標(biāo)準(zhǔn)的方式響應(yīng)。比如說如果某一個把用戶帶到下一個頁面的按鈕30年來一直是放在右下角,你就不要突然把他移到右上角,除非你有足夠的理由。請求用戶忘記已經(jīng)學(xué)會了的動作重新學(xué)習(xí)新的動作會令用戶及其沮喪。用戶甚至可能不知道在發(fā)生什么從而猜想他的硬件或者軟件發(fā)生了錯誤。
如果你想吸引新的用戶使用你的產(chǎn)品,你應(yīng)該設(shè)計你的系統(tǒng)以用戶熟悉的方式響應(yīng)用戶的命令。比如,允許他們重新用他們已經(jīng)學(xué)會的相同的快捷鍵。
案例研究:蘋果的“Command”修飾鍵
很多年前蘋果最終給Windows用戶一個簡單地方式來使用“Control”鍵,而不是“command”鍵。對于鍵盤的快捷鍵,新使用Mac的Windows用戶有很大的困難去放棄重新學(xué)習(xí)如此根深蒂固的習(xí)慣。當(dāng)用戶在家里或辦公室里必須在倆種不同的操作系統(tǒng)之間轉(zhuǎn)換,他們必須每天學(xué)習(xí)使用倆種不同的鍵盤快捷鍵,可想而知他們會經(jīng)常犯錯誤或思考到底按哪個修飾鍵,而我們說不要讓用戶思考。在使用倆種不同的操作系統(tǒng)間的用戶會面臨著很大的困難由于缺失轉(zhuǎn)換的才能,而這一切在開始時都是完全沒有必要的。
(2)不一致性
原則:就像當(dāng)元素行為一樣時視覺一致一樣當(dāng)元素行為不同時保持視覺不一致也是極其重要的
讓那些行為不同的元素看起來也要不同。比如,一個垃圾桶應(yīng)該是用戶可以把文件放進去然后又可以拿出來。如果你想要一個功能只允許用戶刪除文件而不能恢復(fù),這是可以的。但是要保證它看起來不是一個垃圾桶,你可以讓他是一個焚化爐或者碎紙機甚至其他東西。
讓已經(jīng)變化的頁面看起來也變化。如果用戶遇到一個已經(jīng)更新的網(wǎng)站頁面或者APP,他們知道四處看看找出哪里有不同,如果他們找不到不同,他們會嘗試像之前使用的方式去使用你的產(chǎn)品,但那可能會失效。
(3)連續(xù)性
原則:經(jīng)過一段時間,追求連續(xù)性而不是一致性
如果你們想出一個你們產(chǎn)品完全重新變化的區(qū)域或者甚至一個完全新的產(chǎn)品,讓用戶一眼就能知道大的變化已經(jīng)發(fā)生了是重要的。否則,他們將會無視那些變化像往常一樣使用你的產(chǎn)品但是產(chǎn)品卻不正常工作?!安蛔冃浴笔侵改愕南乱话姹镜漠a(chǎn)品和你的上一個版本是完全一樣的,明顯這樣不合適,但“一致性”允許在產(chǎn)品的版本更新中不斷成長進化。我們的目標(biāo)是連續(xù)性,就像有一根線把我們的不斷更新的產(chǎn)品串聯(lián)起來,引導(dǎo)我們的用戶,而不是把我們綁在過去。
(4)用戶期待的一致性
最重要的一致性是用戶期待的一致性
如果用戶期待某些事以不同的方式運作,你會發(fā)現(xiàn)去改變這些期待時你無法取勝。如果你的方式?jīng)]有明確的優(yōu)點,那就按照你的用戶期待的方式來吧。比如下面這個例子:
案例研究:“The Xerox Star”的拖動規(guī)則(譯者注:“The Xerox Star”是一款早期的電腦名字)
1,被提議的規(guī)則:從一個地方(比如文件夾或硬盤)拖動一個文檔圖標(biāo)到另一個地方將會移動文檔
容易學(xué)習(xí),容易理解,合邏輯的。然而,也是很糟的。這個規(guī)則,公正的說,在大多數(shù)時間工作的很好,這甚至比我們目前為止所用的復(fù)雜的規(guī)則工作的更好。舉個例子來說明這個規(guī)則:在你工作用的電腦上,如果你拖動一個文檔到你的移動硬盤上,這將移動那個文檔,而不是在你的移動硬盤上復(fù)制一份。如果你在家里通過移動硬盤對那個文檔做出一點改變,當(dāng)你明天早上把那個文檔再放到你的工作用的電腦上時,這時候你的工作用的電腦上的那個文檔就只有新的已經(jīng)變化的那個文檔,舊的文檔就沒有了。因為這個規(guī)則是 移動 文檔。
這個規(guī)則一直工作的都非常好但是遇到下面這個情況時就很糟糕了:當(dāng)你打印文檔時,你將會把文檔拖動到打印機的圖標(biāo)上來打印。這時文檔被傳輸?shù)酱蛴C并且從原來的位置永遠刪除那個文檔。于是你辛辛苦苦的工作就沒有了。對于這個規(guī)則設(shè)計師和工程師討論了倆周,最終設(shè)計師贏了,改為我們今天使用的規(guī)則:
2,從一個地方拖動一個文檔到另一個地方有時會移動它,有時會復(fù)制它。
就像上面說的,拖動到移動硬盤上會移動它,拖動到打印機上會復(fù)制它。99%以上的用戶可能都不能告訴你這個規(guī)則具體是什么,然而他們明白規(guī)則不用我們教他們。為什么?因為這是用戶期待的一致性,他們期待做一些事時不會讓他們的工作成果損失。
默認:
原則:輸入框中字段的默認行為
當(dāng)用戶激活一個輸入框中的字段時(比如谷歌瀏覽器的網(wǎng)址輸入框),當(dāng)前的字段應(yīng)該被自動全部選中,而且按“Backspace或Delete”鍵或者開始輸入字符都會刪除當(dāng)前的選中。用戶也可以點擊字段的某個位置來取消選擇所有,或者移動鼠標(biāo)光標(biāo)來把那些字段移到相應(yīng)的位置。這個規(guī)則一直被沿用至今。(然而有時候很糟糕的編碼會導(dǎo)致把文本拖動到不可預(yù)測的位置)
原則:默認應(yīng)該是智能的,被大多數(shù)人采用的
不是每個東西都應(yīng)該有一個默認。如果確實不知道應(yīng)該采用哪個選項作為默認的選項,那么就考慮一下不要采用默認了。用戶會花費寶貴的認知負擔(dān)來找到默認設(shè)置項并且有大概25%的情況用戶會決定不使用默認選項。如果沒有足夠的理由提供默認項還不如讓用戶去選自己想要的選項。
原則:用一個更有意義的術(shù)語來代替“默認”這個單詞
在一個給定的場景中用戶經(jīng)常不知道“默認”到底指的是什么?(當(dāng)然他們肯定知道字面上的意思)用“使用標(biāo)準(zhǔn)設(shè)置”,“自定義設(shè)置”,“儲存初始設(shè)置”或其他的更有意義的能描述會發(fā)生什么的術(shù)語來代替“默認”這個單詞。進行小的用戶測試來發(fā)現(xiàn)那個術(shù)語會不會讓你的用戶精確地預(yù)測你的軟件將會做什么。
原則:你的用詞和視覺設(shè)計都必須傳達出系統(tǒng)能恢復(fù)(復(fù)位)的范圍
要確保通過用戶測試來看用戶是否明白系統(tǒng)能恢復(fù)的范圍或程度:恢復(fù)系統(tǒng)僅僅通過用戶簡單地注冊幾步還是他們將會花費幾天的時間來給每個應(yīng)用重新輸入用戶名密碼登錄進去。
測試你的恢復(fù)選項來發(fā)現(xiàn)用戶覺得點擊按鈕之后會導(dǎo)致什么結(jié)果。如果你做的是對用戶來說是很方便的,但是用戶覺得那會有潛在的破壞性的影響,他們就不會用那些默認選項。
當(dāng)設(shè)計選項卡的控件時,比如屬性和優(yōu)先級窗口,確保視覺設(shè)計能使復(fù)位按鈕所影響的范圍清晰。單獨的選項卡片應(yīng)該與周圍的窗口視覺上明顯隔離因此放在單獨選項卡內(nèi)部的按鈕或者放在周圍窗口的按鈕應(yīng)該能指示那個按鈕將會影響是當(dāng)前選項卡的還是所有選項卡的。設(shè)計師從來都不應(yīng)該做出模糊不清的設(shè)計。(這一部分感覺翻譯的不太好,建議大家看原文)
可發(fā)現(xiàn)性:
原則:任何隱藏復(fù)雜性的嘗試都會增加復(fù)雜性
功能性軟件不需要看起來像一個拖拉機,他可以看起來像一輛保時捷。然而真的是這樣嗎?很明顯不是,看起來像保時捷往往會使他缺失必要的輪子,剎車閘,或加速器。然而很多公司自上世界90年代后開始有目的的隱藏他們最基本的控制項,往往帶給他們的用戶嚴(yán)重的傷害。為什么他們這樣做呢?因為他們認為給潛在的買家展現(xiàn)軟件的表面簡單要比給真實用戶展現(xiàn)那一堆復(fù)雜性要更重要。
由于利益驅(qū)動軟件公司會隱藏復(fù)雜性因為它能帶來短期的利益:大多數(shù)潛在的軟件買家是根據(jù)售貨員展示的幾分鐘軟件demo來判斷軟件是不是容易學(xué)會的,而不是通過坐在那好長時間上手試驗來判斷。拿走滾動條,隱藏必要的按鈕,這可能會增加短期利益,但是是短期的。
案例研究:隱藏的Mac滾動條
滾動條被用來指引信息,用戶通過點擊或拖動滾動條來通知軟件他希望移動到文檔或頁面的某個位置。然而,經(jīng)常性的,用戶也會一撇滾動條僅僅是看他們在頁面的哪個位置。用戶會努力維持倆種水平上的位置感:第一:他們的位置恰好在可見頁面的哪個部分;第二:他們在整個文檔的哪個位置。用戶為了讓滾動條可見來知道在整個文檔的哪個位置卻被強迫把鼠標(biāo)指針從他們的當(dāng)前位置點移開卻忘了在可見頁面的哪個部分。
讓復(fù)雜的控制項隱藏比如隱藏滾動條也會讓用戶使用滾動條的速度慢下來:滾動條不可見時,他無法知道滾動條上的控制點在哪里,他必須嘗試找出。首先他必須把指針放在滾動條的某個位置(步驟一),然后再往上或往下移動到控制點(步驟二)。根據(jù)菲茨定律就知道這很糟糕。讓我們假定額外一步需要額外一秒,一個非常保守的估計,每人每天10次滾動,6千6百萬Mac的用戶(截止原作者寫的時候)=每天浪費21個人的生命。這僅僅是因為為了讓商店中的產(chǎn)品看起來簡單。
原則:如果你選擇隱藏復(fù)雜性,只在陳列室隱藏
你從不需要決定是支持潛在的買家還是最終的用戶。我們不是和固定的硬件打交道,而是和純粹的軟件或者軟件驅(qū)動的硬件。一個設(shè)計師能容易得創(chuàng)造出一個系統(tǒng)完美的支持買家或者用戶,只需要依據(jù)當(dāng)前的需要轉(zhuǎn)換軟件的樣子就可以了。比如,你可以為操作系統(tǒng)設(shè)計一個軟件,將會在商店中展示一個簡單地形式;而對于真實用戶提供更必要的功能項,使他們更有技巧效率更高。
做一個看起來簡單地界面可能會幫助短期的銷售,但是長期來看,他會導(dǎo)致你遭遇銷售瓶椎,你的存在的消費者,不只會離開你,也會告送你潛在的買家離你越遠越好。
原則:軟件中一個功能如果用戶不能發(fā)現(xiàn)他,就表示沒有這個功能
并不是所有的買家都很天真,甚至是天真的買家有一天也會變。只有最堅持的的買家、用戶才會在你的網(wǎng)站到處瀏覽查找你為他們隱藏的數(shù)據(jù)。大多數(shù)用戶如果發(fā)現(xiàn)不了功能就很簡單的轉(zhuǎn)向你的競爭者,告訴你你的軟件沒有那個功能。
案例研究:Mac上的Safari瀏覽器
我發(fā)現(xiàn)Safari并不支持對PDF文件另存為時我拋棄了Safari轉(zhuǎn)向了火狐瀏覽器。2年后,我再一次嘗試Safari,猜想蘋果可能修訂了這個bug。但是仍然存在,但是我這次堅持了下來,花了20分鐘谷歌了一下解決方法。我發(fā)現(xiàn)了什么?不要用另存為來保存PDF文件,而是:鼠標(biāo)從窗口的頂部移開(通常這一般是文件操作工具的地方),移到窗口的底部(通常這一塊什么也沒有,除了存在的內(nèi)容)。突然,一個灰色的背景條上出現(xiàn)了一個磁盤圖標(biāo),點擊那個圖標(biāo),Safari會保存你的PDF文件。
原則:使用“主動地發(fā)現(xiàn)”來引導(dǎo)人們進入更高級的內(nèi)容
主動發(fā)現(xiàn),你不需要等待用戶去發(fā)現(xiàn)數(shù)據(jù),代替的是,向他們提供。理想的情況下,你的系統(tǒng)意識到他們現(xiàn)在需要什么并且提供給他們。但是在大多數(shù)情況下,我們還遠不能做到這些,一個妥協(xié)的方法是:
- 在用戶需要數(shù)據(jù)之前提醒用戶那個數(shù)據(jù)存在;
- 智能的間隔周期來提醒用戶,而不是一遍又一遍的重復(fù);
- 一旦用戶已經(jīng)發(fā)現(xiàn)了功能或數(shù)據(jù)就不要再去提及它;
在開始的時候你展示的提示信息可能是這樣的形式:“你知道……?”。如果你看到很大比例的用戶關(guān)閉了你的那些提示,這反映了你正在過早的提示信息,給他們過于頻繁的提示或者提示信息已經(jīng)被用戶知道了你還在告訴他們。當(dāng)用戶打開你的應(yīng)用的時候不必要每次都要給出一個幫助信息。用戶更可能會在必要的上下文環(huán)境中讀那些信息
案例研究:iPhone上的GroceryIQ APP
GroceryIQ能使用戶掃描他們廚房中的食品的條形碼或打上物品的關(guān)鍵字來提醒用戶去雜貨店買哪些東西。這個工具是有效的,快速的,設(shè)計適合的。這個工具沒有刻意去隱藏復(fù)雜性。然而,用戶如果需求擴大,比如多設(shè)備同步可以花幾分鐘去探索這個軟件的更遠一步的復(fù)雜性。GroceryIQ也有這個功能不過需要探索。一個新的類似APP發(fā)布了也能使用戶在不同的設(shè)備之間同步信息,比如,妻子新加了一個項目:一份牛奶,然后在幾秒鐘之后丈夫的購物列表里那個項目就會出現(xiàn),于是很多人結(jié)果就拋棄了GroceryIQ轉(zhuǎn)而去用那個新的APP。這個例子哪里有趣呢?因為GroceryIQ比那個新的APP早有這個多設(shè)備同步的功能已經(jīng)5年了,那很容易設(shè)置并且很可靠,也沒有被有目的地隱藏,確實只是沒有被直接顯示,問題是那是在“更多”的子菜單中,而不是直接展示在手機的底部。
一個主動發(fā)現(xiàn)的提醒,在APP被安裝之后一些天提醒用戶有那個功能,甚至是很長時間之后如果用戶不經(jīng)常用那個功能再給用戶一些提示就可以有效的避免在5年后新APP發(fā)布后大量的消費者損失。
原則:為了用戶能成功的使用軟件必要的對象應(yīng)該時刻可進入
對象應(yīng)該要么可見要么在一個可見的對象里面(比如文件夾里的文檔,菜單里面的菜單項),換句話說,應(yīng)該時刻易進入。
對于一個日常的軟件系統(tǒng)例外也是有的,比如手機瀏覽器或閱讀器:
- 由于屏幕大小有限展示當(dāng)前不需要的項目是不實際的
- 為了防止用戶偶然的喚起一個控制項,只要確保用戶可以發(fā)現(xiàn)他們的存在就可以了。
在手機設(shè)備上標(biāo)準(zhǔn)的廣泛使用的操作系統(tǒng)會包含這些例外,只要用戶能被給一個簡單地明顯的引導(dǎo)就行了。
原則:對于不可見沒有“優(yōu)雅的”例外
一些設(shè)計師,愛上了智能手機里面的干凈的線條,認為在手機屏幕里使用同樣干凈的線條是好的。大錯特錯!隱藏功能性來創(chuàng)造出一個視覺上的簡單是一個降低用戶效率的方法,會給產(chǎn)品的競爭對手可乘之機。
原則:即使在小的手機設(shè)備中存在例外 控制項也不應(yīng)該在內(nèi)容區(qū)域的中間
智能手機中的控制項有時候被強迫放進內(nèi)容區(qū)域中因為屏幕實在太小了。盡管這樣,你也需要提供一個標(biāo)準(zhǔn)的喚起,比如在內(nèi)容區(qū)域中點擊一下,這將讓隱藏的icons和按鈕出現(xiàn)因此用戶不需要到處找這些控制項。
原則:用視覺的線框圖傳達你的手勢用詞
包含一個展示手勢如何使用的幫助頁面是可以理解的。當(dāng)用戶第一次打開APP的時候展現(xiàn)那個頁面并且清晰地告訴用戶如何之后再次找到那個幫助頁面。對于雜志和相似的類型的APP,讓幫助頁面在第一次打開一本雜志的時候出現(xiàn)。
原則:尋求平衡
這不是1980年,那時候大多數(shù)人都沒有見過電腦,我們有必要讓每件東西都保持高度可見。而現(xiàn)在你可以在設(shè)計中使用一些微妙的東西:不要在一個頁面上每個單獨的項目旁邊都放一個信息的icon,可以是用上像Google+snapseed的遮蓋圖層一樣一次解釋每個形狀或手勢:
把遮蓋層放在那里很難看清,但是開發(fā)者通過標(biāo)簽和箭頭優(yōu)雅地強調(diào)了他們的各個選項。你如何發(fā)現(xiàn)這種強調(diào)是不是必要的?你怎么發(fā)現(xiàn)用戶是不是知道點擊什么?
看下面的那個原則:
原則:通過用戶測試看具不具有發(fā)現(xiàn)性
為了發(fā)現(xiàn)你需要提供給用戶什么信息并且確保你成功的傳達出這些信息,你必須做貫穿整個項目的可用性測試。看用戶是不是能找到,學(xué)會使用你期待你的用戶執(zhí)行任務(wù)時所需要的工具。如果他們不能找到,通過迭代設(shè)計知道他們可以找到。利用主動發(fā)現(xiàn)等方法確保你的用戶能發(fā)現(xiàn)和使用你的產(chǎn)品所提供的功能。
上面我所提到的那些錯誤在推向市場時都沒有經(jīng)過可用性測試,基于測試結(jié)果變更設(shè)計。
用戶效率:
原則:看用戶的生產(chǎn)效率,而不是軟件的花費成本
為了評判一套系統(tǒng)的效率,不只是要看機器的花費成本。人們花比機器更多的錢,同時增加機器的使用效率一定會導(dǎo)致增加人們的工作效率,反之亦然。舉一個例子,強迫用戶在不合理的按鍵間隔和功能的電話機上鍵入電話號碼可能會節(jié)省代碼量(節(jié)省開發(fā)軟件的時間和花費),但是也會導(dǎo)致人們不能正確的輸入電話號碼,并且容易出現(xiàn)錯誤。單個用戶浪費的時間可能就會抵消開發(fā)蹩腳軟件節(jié)省的時間。容易出錯的電話號碼也會導(dǎo)致流失的銷售,丟失的銷售所帶來的利潤損失可能就開發(fā)出很多高質(zhì)量的軟件了。
原則:讓用戶能不間斷使用軟件
可以說到目前為止最高的花費仍然是勞工花費。任何雇員任何時間因為系統(tǒng)問題等待系統(tǒng)響應(yīng)時,錢財就丟失了。
原則:為了最大化一個公司的效率,你必須最大化每個人的效率,不僅僅是IT部門的效率
大的公司趨向于把部門進行劃分,每個部門只做自己的事,有時候從整體來看這并不總是有利的。信息技術(shù)部門經(jīng)常掉入陷阱導(dǎo)致增加自己的開發(fā)效率和降低信息資源部門的花費,但是整體上這會導(dǎo)致公司的較低的生產(chǎn)率。設(shè)計師們必須花時間研究新的設(shè)計是不是能增加或者減少受影響的雇員的生產(chǎn)率,如果能增加的話,需要花費多少IT部門的投入。
作為設(shè)計師應(yīng)該和HR去查找受影響的雇員的平均每小時的花費,看新設(shè)計是不是整體上能提升公司的效益,要考慮新設(shè)計開發(fā)時所需的開發(fā),設(shè)計代價,同時考慮新設(shè)計所能提升的公司效益,把倆者比較看哪個高一些。如果提升的效益高,那么可以說服公司采用新的設(shè)計。
原則:在軟件中提升效率的最大的突破是系統(tǒng)信息架構(gòu)的變化,而不是界面的表面設(shè)計
這個簡單的真相解釋了為什么對于軟件項目中的人應(yīng)該意識到把用戶工作目標(biāo)放在第一位是重要的,如果用戶目標(biāo)能被實現(xiàn)也需要軟件開發(fā)人員和人機交互設(shè)計師的密切合作。
看一看iPad和筆記本的不同吧,這不同與打開郵箱時具體按哪個鍵無關(guān),關(guān)鍵是iPad根本就不需要按任何的按鍵。
原則:錯誤信息應(yīng)該有幫助
錯誤信息應(yīng)該被有思考的寫出:
- 解釋哪里出錯了
- 告訴用戶關(guān)于那個錯誤應(yīng)該做什么
- 千萬不要讓錯誤信息由于系統(tǒng)故障被不合適的生成(比如出現(xiàn)亂碼錯誤)
“error-1264”這條信息對于用戶沒有任何鳥用。甚至很少有錯誤信息能遵守上面的第一條,而你應(yīng)該遵守上面三條。你們的測試小組應(yīng)該能向你反饋哪里有錯誤信息沒有遵守那些標(biāo)準(zhǔn)。
可探索的界面:
原則:給用戶清楚標(biāo)記的路徑,并且讓他們能夠快速使用軟件
對于一個服務(wù)不要只給用戶提供一條路徑,但也保證能讓他們順利使用。這讓新用戶和就想以最快的方式讓工作完成的用戶來說是一個不費腦子的活動,仍然也能使想要探索軟件的高級用戶得到滿足。
原則:提供給用戶預(yù)知線索
穩(wěn)固的視覺元素不僅能讓用戶快速導(dǎo)航,他們也扮演著一個獨立的標(biāo)志角色,給用戶一種家的意識。在網(wǎng)站的每個頁面上,固定的放置一個公司logo,都能使用戶到達主頁,讓用戶感到安全。矛盾的是,如此的安全的線索能讓用戶不會輕易返回主頁,因為他們知道主頁就在那。
原則:讓動作可逆
用戶以各種各樣的方式在導(dǎo)航中探索,有時候他們想知道如果他們點擊潛在危險的動作會發(fā)生什么,有時候他們沒有刻意發(fā)現(xiàn),就只是偶然點了。通過讓動作可逆,用戶可以安心的探索界面不必擔(dān)心發(fā)生危險。
原則:給用戶提供“撤銷”
不支持撤銷操作不可避免的結(jié)果是你必須給用戶提供一大堆的對話框:“你真的想……,你確定嗎?”毫無疑問,這會讓用戶工作變慢。
如果你不提供對話框,但又不提供撤銷操作,這只會讓用戶的行為更慢。幾年前的一個研究表明在危險的環(huán)境中人們比在安全的環(huán)境中犯更少的錯誤,但同時他們的工作效率極慢,他們總是小心的避免出錯。這對生產(chǎn)率是一個極大地打擊。
我們通常會認為不提供撤銷操作是因為開發(fā)工程師太懶了,但是有時候設(shè)計師們也有目的的這樣做——不提供撤銷操作。比如,一旦你把東西放到購物車?yán)铮恍╇娮由虅?wù)網(wǎng)站讓你很難的才能把你不想買的物品取出,他們認為這會增加購買率,但這被證明是愚蠢的策略:一個我們在nngroup做的電商研究表明,當(dāng)網(wǎng)站讓用戶很容易的能從購物車取消不想買的物品時,像期待的那樣,人們更愿意往購物車?yán)锩嫒麞|西,反正很容易取啊。同時這些用戶也會買更多的東西。
原則:總是允許用戶以一種方式出去
用戶不應(yīng)該感到在迷宮中出不去,他們應(yīng)該有一個清楚的路徑出去,比如引導(dǎo)頁面提供一個“skip”的按鈕操作。
向?qū)Ш腿∠?/p>
在向?qū)е腥∠翘貏e重要的,讓人們在任何時間可以離開,但是確保告訴他們能在之后重新找到向?qū)А?/p>
原則:讓用戶很容易沉浸到一個過程中
一個清楚的,可見的工作流能讓人們理解他們在哪里,他們要到哪里去,或者向前向后移動,這會鼓勵用戶堅持完成一個任務(wù)??紤]下面的一個例子,一個多步驟的支付過程。通過把每一步都清楚地標(biāo)記在Tab上使導(dǎo)航可見將會讓用戶知道他們在整個過程的哪一步。點擊一個更早的Tab應(yīng)該允許用戶跳到那一步修正錯誤或者僅僅改變他們的想法,比如,選擇一個不同的收貨地址。當(dāng)你禁止用戶這樣做的時候,或者不保留用戶的數(shù)據(jù),用戶可能會很失望并不會用你的軟件。
菲茨定律:
原則:到達一個目標(biāo)(通常指的是按鈕)的時間與目標(biāo)的大小、與目標(biāo)的距離有一個函數(shù)關(guān)系
為重要的功能安排一個大的按鈕,可以讓用戶更快點擊。為你不想要用戶執(zhí)行的功能安排一個較小的按鈕。
在你的系統(tǒng)的展示窗口里,側(cè)邊、底部、頂部、或者四個角上適當(dāng)使用固定動作(“pinning actions”,比如Windows系統(tǒng)的開始菜單放在左下角),可以讓點擊的速度變快:Mac系統(tǒng)里軟件的菜單欄總在頂部。
初看這條定律,似乎是非常明顯的,然而在設(shè)計中設(shè)計師經(jīng)常忽略這個定律。菲茨定律可以計算出Mac系統(tǒng)的下拉菜單使用的速度要比使用Windows系統(tǒng)的軟件的下拉菜單速度快大約五倍(因為Mac系統(tǒng)下軟件的菜單都放在顯示屏幕頂部,Windows系統(tǒng)的軟件的菜單跟隨軟件的位置變化)這個已經(jīng)被實驗證明了。
菲茨定律指出Windows的開始菜單展開后,最常使用的應(yīng)用與左下角比較遠,因此消耗時間長。菲茨定律也指出在任何屏幕里最快捷的操作目標(biāo)總是在屏幕的四個角落里,因為他們“無限延伸”,然而,至今為止,他們似乎很少被設(shè)計師注意到。
原則:到達多個目標(biāo)的時間之和是到達每個單個目標(biāo)的所需時間的總和
在嘗試使用菲茨定律時,不只是要注意目標(biāo)的距離和大小,也要注意完成一個任務(wù)時一共需要多少個點擊目標(biāo)。記住一共有倆類目標(biāo):
- 在屏幕里面的目標(biāo)——按鈕,菜單,滑塊……
- 真實世界中的目標(biāo)——鍵盤和上面的按鍵,鼠標(biāo)……。所有的這些對于菲茨定律都適用。
原則:無論是定點設(shè)備還是觸控設(shè)備菲茨定律都適用
菲茨定律不會對智能手機和平板電腦失效。菲茨,在20世界40年代提出了這個定律,當(dāng)時他在飛機駕駛艙針對物理的控制按鈕做設(shè)計,這與直接的觸控界面更類似而不是和有鼠標(biāo)的定點設(shè)備更類似。在觸控設(shè)備中,在屏幕的四周和邊緣放置按鈕沒什么效果,但是目標(biāo)的大小和距離原則依然適用。
原則:根據(jù)菲茨定律所得的設(shè)計依然需要可用性測試
像人機交互領(lǐng)域的大多數(shù)法則一樣,你必須還要做及時的可用性測試來證明菲茨定律對你的設(shè)計是有幫助的。
更多關(guān)于菲茨定律的文章,可以看:http://www.asktog.com/columns/022DesignedToGiveFitts.html
人機交互對象:
人機交互對象不同于面向?qū)ο笙到y(tǒng)(有一些程序語言是面向?qū)ο蟮模┲械膶ο螅覀兊膶ο蟀ㄎ募A,文檔,按鈕,菜單以及垃圾桶。用戶所要面對的對象可能會也可能不會與面向?qū)ο蟪绦蛑械膶ο笙鄬?yīng),倆者沒有關(guān)系,實質(zhì)上,早期的圖形用戶界面完全不是在面向?qū)ο笙到y(tǒng)上建立起來的。(譯者猜測作者是怕學(xué)過面向?qū)ο蟪绦虻淖x者把當(dāng)中的對象與交互設(shè)計中的對象混淆)
原則:人機交互中的對象應(yīng)該能被看到,聽到,或感覺到
能被看到的人機交互對象在圖形用戶界面中是非常常見的。能被其他感官比如聽覺和觸覺覺察到的對象不是那么的熟悉,也不必要被我們認知到。比如鈴聲是音頻對象,但是我們思考他就只是把它當(dāng)做鈴聲,不會把它當(dāng)做更高水平的數(shù)據(jù)。
原則:人機交互對象應(yīng)該有一種標(biāo)準(zhǔn)的操控方式
比如按鈕是被點擊的,滑塊是被拖動的。
原則:人機交互對象有一種標(biāo)準(zhǔn)的行為
把一個文檔拖到一個垃圾桶并不會刪除它,只是把它儲存到垃圾桶中了。用戶可以恢復(fù)。選擇“清空垃圾桶”才會真的刪除那個文檔。
原則:人機交互對象應(yīng)該能被理解,保持一致性,并且是穩(wěn)固的。
原則:當(dāng)你希望用戶以一種不同的方式與已有的標(biāo)準(zhǔn)對象交互時或交互后出現(xiàn)不同的結(jié)果那就使用一種新的不同的對象。
如果拖動一個文檔到你的刪除文件的icon中將會立即永久刪除它,就不要讓那個icon對象看起來像一個垃圾桶。人們對之前遇到的對象有預(yù)知。不要讓用戶迷惑這樣的預(yù)知是十分重要的。舉個例子,如果你用一個垃圾桶的icon,但是一旦用戶立即把文檔拖動到那里就刪除了文檔,他拓寬了垃圾桶的標(biāo)準(zhǔn)規(guī)則。標(biāo)準(zhǔn)規(guī)則是這樣的:“拖動一個文檔到垃圾桶里并不會刪除文檔。他只是把文件從原來的地方儲存到垃圾桶里了。選擇清空垃圾桶才會真正的刪除那個文檔”。而你拓寬了的垃圾桶規(guī)則是這樣的:“拖動一個文檔到垃圾桶里要么立即刪除那個文檔要么保留6個月之后刪除”這樣做不僅讓你的用戶疑惑,而且對其他合理的使用垃圾桶的程序不利,因為用戶對垃圾桶的預(yù)知已經(jīng)變了。
較少延遲:
原則:無論什么時候,用多線程技術(shù)把系統(tǒng)延遲放到背景中
延遲經(jīng)常通過多線程技術(shù)對用戶隱藏,把用戶傳輸數(shù)據(jù)或者系統(tǒng)計算的過程放到背景中,以便讓用戶繼續(xù)他們的工作?,F(xiàn)代的網(wǎng)頁瀏覽器都能預(yù)先抓取所需的數(shù)據(jù),當(dāng)用戶完成當(dāng)前任務(wù)準(zhǔn)備到下一個頁面的時候不需等待很長時間。
原則:降低用戶對延遲的感知
- 在50毫秒內(nèi)對任何按鈕的點擊給用戶視覺或聽覺的反饋
- 避免用戶對同一個對象的多次點擊
因為網(wǎng)絡(luò)速度還不夠快,在按鈕沒有反饋的時候人們經(jīng)常重復(fù)的點擊同一個按鈕,造成事情變得更慢。
原則:當(dāng)用戶面對延遲的時候讓他們知道
易學(xué)性:
理想的情況下,產(chǎn)品應(yīng)該沒有學(xué)習(xí)曲線:用戶第一次使用的時候能很快學(xué)會并且立即精通軟件的操作,然而,在實際情況中,所有的應(yīng)用和服務(wù),無論設(shè)計的多么簡單,都會顯示一個學(xué)習(xí)曲線。
原則:考慮易學(xué)性與可用性
易學(xué)性與可用性是相關(guān)的,要決定哪個是最重要的,然后把焦點放在那上面。
你如何決定易學(xué)性和可用性哪個更重要呢?你需要做的第一件事是定義使用頻率:你的產(chǎn)品使用人群使用你的產(chǎn)品時是僅僅一次或者不頻繁的,還是要經(jīng)常使用它?如果是不頻繁的使用,答案是明顯的,易學(xué)性更重要一些。如果用戶使用你的產(chǎn)品幾乎每天都用,應(yīng)該先考慮可用性更好一些。
接下來,考慮買家是誰?如果使用產(chǎn)品的人也是做出購買決定的人,易學(xué)性可能會是一個更重要的因素導(dǎo)致他購買,但同時可用性會決定他會不會向其他人推薦你的產(chǎn)品。
原則:避免只測試易學(xué)性
大多數(shù)可用性測試是進行一些列的測試:你和你招募的志愿者固定的花費20分鐘到一個小時,你最終知道用戶開始用你的產(chǎn)品的學(xué)習(xí)曲線,但是你不知道長期的產(chǎn)品學(xué)習(xí)曲線,用戶最終把你的產(chǎn)品掌握到什么程度你也不知道。
如果你設(shè)計的一個應(yīng)用是用戶經(jīng)常會使用的,就要改變一下可用性測試的方法:和HR在一起招募一些臨時的志愿者,然后,讓他們花費一到倆周去用你的產(chǎn)品,通過測試研究一下你的產(chǎn)品的總體的學(xué)習(xí)曲線是什么樣子,以及最終的產(chǎn)品的工作效率。
隱喻:
原則:選擇能使用戶立即抓住概念模型細節(jié)的隱喻
好的隱喻能在用戶的大腦中把過去的真實世界的體驗或之前的使用軟件的體驗與你的產(chǎn)品連接起來,能快速的并且精確地讓用戶形成一個你的系統(tǒng)能干什么不能干什么的意識。
原則:通過喚起用戶的認知(視力,聲音,觸摸,甚至他們的記憶等)來設(shè)計好的隱喻
在軟件中盡力使你的概念視覺明顯。如果有困難,通過插圖的形式。插圖應(yīng)該是簡潔的并且有意義的。測試它是否有效,然后應(yīng)用它。
案例研究:蘋果的超級卡片瀏覽器
對于網(wǎng)頁,有三層結(jié)構(gòu)。每個網(wǎng)頁上都有的公共部分叫做背景層;一個前景層:擁有與每個單獨的卡片有關(guān)的元素;還有一個邏輯控制層,帶有各種各樣的按鈕等元素。如果你不明白這個概念,你就不能使用這個東西。幾乎沒有人能明白這個概念除了一個圖形設(shè)計師,Kristee Kreitman,畫了一個分層的圖片展示了這三層。當(dāng)我們測試的時候,每個人立即明白了他。他的發(fā)明者用了20頁的文字說明它,沒有任何效果。一個圖片完全搞定。
原則:不必完全照抄真實世界的東西
好的隱喻能使用戶感到熟悉,但是通常也能增加新的功能。比如電子報刊可能與傳統(tǒng)的報紙非常相似,但是增加超鏈接可以讓用戶點擊自己更關(guān)注的文章里面去,用傳統(tǒng)報紙是不可能的。不需要完全照抄真實世界的對象(擬物設(shè)計),那會限制軟件的功能,通常完美的模仿經(jīng)常是一個糟糕的設(shè)計。
擬物設(shè)計的相反一面是抽象,我們現(xiàn)在叫他扁平化設(shè)計,自2013年開始慢慢流行,把有意義的icons和其他對象轉(zhuǎn)化為無意義的抽象甚至是錯誤的符號。(比如,iPhone上面的瀏覽器圖標(biāo)是一個指南針,只是通過很模糊的抽象與網(wǎng)頁有關(guān)聯(lián)。iPhone事實上還有一個指南針,因此蘋果設(shè)計師把那個指南針畫成一個……另一個指南針。倆個指南針的icons:一個能告訴你南北區(qū)分方向,另一個能告訴你如何寫論文。設(shè)置的圖標(biāo)看起來像鐘表內(nèi)部的結(jié)構(gòu),清楚的傳達了這是一個能讓你看到并且影響到iPhone內(nèi)部如何工作的APP。這個抽象的表明了他真的是一個大的工業(yè)迷。
原則:如果隱喻不會幫助你,就拋棄隱喻
通常隱喻有利于你的用戶理解軟件,然而,有可能它也會起相反的效果。(譯者注:記得之前錘子系統(tǒng)的京東圖標(biāo)是一個紙箱子,灰色的,第一張圖,用戶一眼一看根本就無法第一時間找到,因為與原紅色的京東圖標(biāo)差距很大,雖然很漂亮,但是實用性不好。之后他們把圖標(biāo)改了,如第二張圖,這樣效果好多了)
保存用戶的工作:
原則:確保用戶從不會丟失他們的工作
這個原則很重要。用戶不應(yīng)該由于一些錯誤而丟失他們未保存的工作,除了不可避免的原因,比如突然系統(tǒng)沒電了(譯者注:其實軟件完全可以檢測電量沒電時提醒用戶注意信息保存)。我們已經(jīng)經(jīng)常成為數(shù)據(jù)丟失的罪犯甚至我們自己都沒有注意到,因此考慮到盡可能多的情況:
你進入你們那的一家商店,在做出選擇后,你被讓填完一個四頁的表格。然后一個紳士進來了,看了看那個表格,然后盯到第三頁的你寫的電話號碼的位置,“對不起”,他說“看這里,看你怎么用電話號碼的格式的,這不對???”當(dāng)你點頭,他繼續(xù)說,“我們不期待你那樣做?!比缓?,他重新拿起了一份四頁的空表格讓你重新寫完。
你可能從不會遇到過這樣的情況,但我確實在互聯(lián)網(wǎng)世界中遇到過類似的情況:有一次我被讓填寫一個緊急的聯(lián)系信息,每次我填寫完表格中的那八個輸入框,總會有至少一個輸入框顯示輸入錯誤,而這同時把所有的輸入框都清空了。同時我并不知道網(wǎng)站到底需要什么信息,我嘗試了20分鐘后放棄了,我確信很多人也會像我一樣放棄的。
上面所說的那種情況只是冰山一角,普遍存在的很多網(wǎng)站和應(yīng)用對于用戶的辛苦工作一直保持傲慢的態(tài)度,并沒有停下來的趨勢。傳統(tǒng)網(wǎng)站和應(yīng)用經(jīng)常崩潰還總是以系統(tǒng)崩潰為由。目前桌面電腦系統(tǒng)已經(jīng)很穩(wěn)定了,上面的很多軟件還不支持自動保存功能真的很難讓人接受。
可讀性:
原則:易讀的文本必須要有高的對比度
最好把黑色文本放到白色的背景上,避免放到灰色背景
原則:用上足夠大的字體保證可讀性
你需要讓你們的市場部門告訴你你們的顧客大體的顯示器大小。然后和你們的圖形設(shè)計師以及工程師合作來確保字體在那顯示屏上會顯示合適的大小。這不需要一個字體大小適配所有顯示器,比如,CSS可以根據(jù)顯示屏的大小來找到合適的字體大小。
原則:與標(biāo)簽比起來為你想要展示的數(shù)據(jù)用大的字符
比如,標(biāo)簽“用戶名”,能被顯示的較小一些。大多數(shù)用戶會知道那幾個字就是指“用戶名”,甚至是對于新用戶,基于表格的上下文,會很容易猜測那指的就是“用戶名”。然而用戶真正輸入的用戶名比如“張三”應(yīng)該保證清晰可讀。這個對于數(shù)字來說更重要,人類語言,是高度過剩的,即使不給展示足夠的信息,也大體能猜到大致的意思,然而對于數(shù)字就不一樣,錯一個字符就全錯了,因此人們需要理解閱讀每個單獨的字符的意思。
原則:菜單和按鈕應(yīng)該首先有關(guān)鍵字,形成獨一無二的形式
有經(jīng)驗的用戶只讀菜單項的部分文字來區(qū)分不同的菜單項。更有經(jīng)驗的專家用戶甚至只看那些標(biāo)簽的外部的輪廓來區(qū)分不同,他們根本不讀任何東西。
原則:針對你的年齡大的目標(biāo)用戶進行測試
年齡超過45歲的用戶可能會有一些視力上的問題,比如老花眼或其他的,不要信任你自己的眼睛來確定字體的大小,你不能夠代表他們。
原則:字體的漂亮與否與可讀性經(jīng)常有相反的關(guān)系
特別的,抗鋸齒會柔化字體的邊緣,給電子屏幕上的字一個更流利的外表??墒菃栴}是人類的視覺系統(tǒng)會對尖銳的邊緣更敏感。因此,對于小的字號,一個抗鋸齒的字體,經(jīng)??雌饋砀哂形?,但是理解起來會有困難?,F(xiàn)在有抗鋸齒技術(shù)能特定地增大邊緣的銳利程度。在使用特殊的字體時可以考慮進行閱讀速度的測試。
簡化:
原則:平衡易于使用和設(shè)置
作為一個設(shè)計師,我們需要努力簡化用戶的生活。這經(jīng)常需要做出一個對于產(chǎn)品更容易安裝設(shè)置和產(chǎn)品更容易使用之間的微妙平衡。
考慮一下瀏覽器的自動填充數(shù)據(jù):用戶可以選擇瀏覽器保存賬戶名和密碼。但是一旦任何東西變化了,瀏覽器就多了一條記錄,用戶就需要再次選擇。另外,瀏覽器經(jīng)常還不能正常工作,不會響應(yīng)或者把數(shù)據(jù)填在了錯誤的地方。
蘋果已經(jīng)簡化了設(shè)置過程,它能讓用戶把Safari的自動填充數(shù)據(jù)和用戶的聯(lián)系人以及他的地址聯(lián)系起來,然而,Safari自動填充表單的能力依然是非常有限的,很大程度上是因為HTML并沒有標(biāo)準(zhǔn)的標(biāo)簽,定位等表單特性。
我用了一個更技術(shù)復(fù)雜的解決方法:有一個應(yīng)用叫做Keyboard Maestro,能根據(jù)使用場景尋找特定的組合按鍵。當(dāng)它發(fā)現(xiàn)我已經(jīng)設(shè)置好了時,它自動的把我輸入的文字替換成我之前儲存的與之對應(yīng)的文字。設(shè)置過程是有些復(fù)雜,但是當(dāng)我現(xiàn)在輸入一個表單時,我能用“bbbb”代替我的名字或地址等其他東西。這會花費大概30秒填充一個表單,比自動填充表單的功能花費的時間略長,但是這個方法每次為一個單獨的表單項有效,這不但節(jié)省時間,而且還有效,不會讓我迷惑。
原則:避免只是“視覺簡單”
在這個世紀(jì)的早期,蘋果公司太過于關(guān)注于為潛在的買家設(shè)計視覺的簡單的東西,但這些已經(jīng)嚴(yán)重降低了生產(chǎn)的效率。他們認為這樣做有一個好的原因:他們想要給潛在的買家生產(chǎn)看起來漂亮的,簡單地東西。這是一個極好的目標(biāo),但是真正的簡約性是通過簡化事情,而不是隱藏復(fù)雜性。
讓你的展示產(chǎn)品看起來簡單是沒問題的,但是,你想要隱藏復(fù)雜性的目的是擔(dān)心嚇跑買家,在展示的時候這樣做就可以了,而不是在家里或工作的地方,因為消費者要在那里完成任務(wù)。我在1978年開始進入蘋果公司后推廣這種特別的銷售模式,因此產(chǎn)品將會在家里和展覽室里看起來不同,計算機允許這樣做,人們買回家的時候就會忘得,只要他們能很好地完成工作。
原則:用漸進的啟示讓學(xué)習(xí)曲線變平
當(dāng)用戶學(xué)習(xí)的時候通過隱藏高級的功能讓軟件簡單一些是合適的,在用戶需要他們并且知道如何處理的時候再把那些功能逐漸展示給用戶。這不同于上面提到的只是視覺的簡單。漸進的啟示能讓用戶更快的學(xué)習(xí)如何使用軟件。
原則:不要通過去除必要的功能來簡化軟件
蘋果在它的移動設(shè)備發(fā)布之后犯了這個錯誤,2014年的時候mac上,你能設(shè)置一個日歷事件并設(shè)置提醒在之前90分鐘提醒你。在iPad上,你能設(shè)置在1個小時或2個小時提醒你,但是不是90分鐘。如果一個用戶需要一個在事件之前90分鐘提醒你,就需要另外麻煩的方法。蘋果簡化了見面,不讓用戶設(shè)置任意的時間,但這不能滿足一些場景的需求。
同樣的,蘋果對用戶查找照片有一個非常簡單地界面:你瀏覽你所有的照片,一次只能一張,直到你發(fā)現(xiàn)你正在尋找的照片。蘋果沒有讓你通過標(biāo)題,備注,關(guān)鍵字來過濾,搜索照片,你必須小心的一張一張查找。用戶會指責(zé)那界面太簡單了:如果你想要在20000個照片里找一張照片,你就一張一張找吧,會累死你。你不需要學(xué)會搜索,不需要記得那標(biāo)題名字,就需要20分鐘來花時間滾動屏幕就可以了。
幸運的是,一段時間后,有一些應(yīng)用如“Photo Shack HD”能讓你通過搜索一些條件來更容易的找到照片。確實搜索也算是一個高級功能了,但是幾乎所有的用戶都知道如何搜索。
狀態(tài):
原則:我們可以利用那些能幫助改善用戶體驗的數(shù)據(jù)
我們的系統(tǒng)應(yīng)該知道:這是不是用戶第一次使用?當(dāng)用戶離開的時候他上次是在什么位置?用戶現(xiàn)在在哪里在干什么?……以及其他的細節(jié)。只要簡單的知道我們的用戶在哪里,我們就能好好利用這個信息幫助他們更快完成任務(wù)。
一個好的例子是亞馬遜,他們會根據(jù)我們的瀏覽歷史給我們做出推薦,他們知道我們在過去重復(fù)購買過什么東西等等。
原則:當(dāng)用戶注銷后用戶的狀態(tài)信息應(yīng)該加密后儲存在服務(wù)器上
用戶應(yīng)該能夠在辦公室退出,回家,然后在從他們退出的地方在家里繼續(xù)他們的操作。遵循保存用戶工作的原則,無論他們上次進行到哪里下次繼續(xù)操作時應(yīng)該能夠回到那個位置。
對于醫(yī)生這樣的私人服務(wù),“Physicians on Line”,做了一個極好的工作。醫(yī)生會95%的情況做一個復(fù)雜的工作,然后退出軟件,幾周后又從另一個地方重新登錄,程序會問他們是否從他們之前工作的地方繼續(xù)。
原則:把你從用戶那得到并保存的數(shù)據(jù)信息明確的告訴用戶
狀態(tài)數(shù)據(jù)不能說好也不能說壞,但是他可以用來做壞事也可以用來做好事。在你的私有政策中你應(yīng)該陳述清楚你將保存信息,如何使用它。任何從用戶那得到的數(shù)據(jù),應(yīng)該被加密并安全保管。
可見導(dǎo)航:
原則:讓導(dǎo)航可見
大多數(shù)用戶不會盡力去記住你的網(wǎng)站的站點地圖,如果你們期待他們這樣做他們可能會很累或者在網(wǎng)站中迷失。
萬維網(wǎng)聯(lián)盟,它的所有的屏幕和按鈕設(shè)計都很完美,但是,卻沒有可見的導(dǎo)航。事實上,你可以看到你具體在哪個頁面上,但是你無法看到其他的頁面內(nèi)容。一個用戶到達我們的網(wǎng)站上,我們必須小心的安排導(dǎo)航確保導(dǎo)航是清楚的自然地。
原則:限制頁面數(shù)量
在設(shè)計復(fù)雜的應(yīng)用時,努力設(shè)計出最小數(shù)量的頁面,每個頁面表示一個獨立的用戶將要完成的任務(wù)。當(dāng)用戶執(zhí)行一個子任務(wù)時,設(shè)計一個比全屏幕小的覆蓋層,因此用戶仍然可以看到變黑的主任務(wù)的屏幕(譯者注:比如手機支付寶輸入密碼時并不是在新的頁面上)。因此用戶并不需要記住當(dāng)前在哪里。
已完。
原文鏈接:http://asktog.com/atc/principles-of-interaction-design/
#專欄作家#
法海,微信公眾號:uxd_design。人人都是產(chǎn)品經(jīng)理專欄作家。熱愛交互設(shè)計,熱愛用戶體驗。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。
MAC隱藏滾動條是因為在mac的交互中,滾動條的作用不大,mac的上下滾動操作不管是用鼠標(biāo)還是觸控板都是非常方便的,根本不需要使用滾動條,如果使用滾動條,反而會降低操作的效率。用windows的陳舊交互來評判MAC的先進體驗,這個怕是難以令人信服。
在別的地方看到是這個標(biāo)題“史上最完整交互設(shè)計基本原則”,果然還是找到來源看舒服一些,辛苦辛苦。