圖片加載失敗
首頁 動态

Our News

動态

網站按鈕的優先級選取與用戶體驗最佳實踐

  在網站和APP中的對(duì)話框通常會進(jìn)行信息說明,并提供若幹選項。最常見的選項數量通常是兩(liǎng)個——一個選項優先級最高,爲首選選項,而另外一個選項較少被(bèi)選,爲次要選項。(比如用戶填寫表單之後(hòu),結尾會提供兩(liǎng)個按鈕,一個爲提交,另一個爲取消)在今天的文章中,我們將(jiāng)這(zhè)個最常見的用戶體驗場景作爲探讨的對(duì)象,亦即“确認”和“取消”哪個按鈕優先級更高。

 天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作,内蒙古網站設計,内蒙古網站建設,呼和浩特網站建設,呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網:/

預防出錯正如同Jakob Nielsen 談及可用性設計所說的:“隻有謹慎小心的設計才能(néng)防患于未然。”你應當盡量避免容易出錯的情形,尤其是用戶容易作出錯誤選擇的情況下。

視覺重量。當兩(liǎng)個選項之間有明顯區别的時候,你應當讓兩(liǎng)個按鈕擁有不同的視覺重量,讓其中一個成(chéng)爲視覺的重心。處于視覺重心上的按鈕會獲得更多的注意力。

清晰而明顯的标簽。一個設計正确的對(duì)話框不應該僅僅給用戶提供選擇而已,也應該讓每個選項盡可能(néng)的明确。這(zhè)就是爲什麼(me)要讓每個選項的标簽盡可能(néng)的清晰明确。明确的标簽能(néng)給予用戶“恰到好(hǎo)處

的幫助”,讓用戶在作出正确選擇的時候不遲疑:

·通常帶有明确指向(xiàng)性和說明的标簽(按鈕内容,文本)會比通用的“OK”或者“确定”要更好(hǎo)。

·盡可能(néng)使用動詞,而不是OK,因爲前者意義會更明确,用戶不會斷章取義從而作出錯誤的選擇。

由于中文和英文在回答的模式上的差異,這(zhè)個對(duì)話框中的兩(liǎng)個選項OK 和 Cancel 在兩(liǎng)種(zhǒng)語言下回答是截然不同的。

接下來的這(zhè)個對(duì)比案例中,第一個對(duì)話框中,“No”僅僅是回答問題,但是并沒(méi)有指向(xiàng)性,并未指出這(zhè)麼(me)選擇的後(hòu)果。而第二個對(duì)話框則好(hǎo)了許多,“Cancel”和“Discard”兩(liǎng)個選項,後(hòu)者和前文所提出的問題相對(duì)應,指向(xiàng)性明确,而Cancel 的含義也就更加清晰了。

正向(xiàng)的首選操作(“發(fā)送”或“提交”等)

當首選操作是正向(xiàng)的時候,相關的表單和按鈕應當擁有更多的視覺重量,而次要的選項的視覺重量應當更輕,這(zhè)樣(yàng)可以最大程度減少潛在的出錯風險,并將(jiāng)用戶導向(xiàng)到正确的方向(xiàng)。

通常,我們所說的“保存”、“提交”、“發(fā)送”在多數時候都(dōu)算是正向(xiàng)的按鈕。

反向(xiàng)的首選操作(“替換”或者“删除”)

如果此時的操作主要是反向(xiàng)的,替換、删除、移除等,那麼(me)將(jiāng)這(zhè)些不可逆的操作對(duì)應的按鈕和選項賦予更多的視覺重量,其實比較危險的。因爲這(zhè)些操作的不可逆性,它們并不一定是“安全操作”,用戶在引導下可能(néng)并不明白它們的危害性而下意識操作,這(zhè)可能(néng)會導緻出錯。比如,當用戶在做替換文檔的操作的時候,執行速度本身并不重要,是否操作正确才是重點,隻有這(zhè)樣(yàng)才不會讓用戶後(hòu)悔。

“取消”是次要操作,但是它應當擁有更多的視覺重心。

“删除”和“擦除”相關的操作應當多留意。你有沒(méi)有誤删文檔事(shì)後(hòu)發(fā)現追悔不及的情況?許多用戶并不會仔細閱讀對(duì)話框中的确認信息就作出選擇。但是有時候,用戶确實是閱讀了提示,但是依然手滑作出了錯誤的選擇。(在應當“取消”的時候不小心點了“删除”)

你應當爲用戶提供單一且明顯的确認操作按鈕,同時确保設計的可訪問性,不會因爲文化差異而出現理解偏差,包括色彩本身的指引性。

LinkedIn 的對(duì)話框中的選項就表述的非常明确。

此外,你應當基于核心的用戶數據爲關鍵性的操作設計一套不太相同的處理機制:比如爲了避免用戶誤觸,不提供而按鈕而是輸入框,讓用戶輸入“Delete”來進(jìn)行删除操作。

被(bèi)禁用的按鈕非活動的、被(bèi)禁用的按鈕有時候也是非常有用的,它可以告訴用戶某些操作的可能(néng)性。即使在當前情況下并不可用,用戶也會意識到在某些時候它們可能(néng)會被(bèi)用到。

這(zhè)類被(bèi)禁用的按鈕還(hái)有另外一個作用,就是在緊急情況下啓用,幫助陷入困境的用戶。“撤銷”按鈕很少見,但是它确實存在,而且從可用性的角度上來看,還(hái)相當的實用。用戶面(miàn)對(duì)誤觸或者意料之外的操作,會下意識“返回”,而“撤銷”按鈕的存在,讓操作的指向(xiàng)性更加明晰。

“确定”-“取消”還(hái)是“取消”-“确定”?

“确定/取消”按鈕是我們最常見的按鈕組合之一。而面(miàn)對(duì)這(zhè)一組按鈕最常見的問題是,首選按鈕應該是在前面(miàn)還(hái)是在後(hòu)面(miàn)。實際上,在實際效果和用戶偏好(hǎo)上,兩(liǎng)種(zhǒng)搭配方式并無顯著區别。

Apple、Google 和微軟的設計規範

平台的一緻性設計其實比先後(hòu)順序來的更加重要,但是幾個不同的平台之間的操作順序規定并不相同。

微軟的設計遵循下面(miàn)的順序:

·OK/[Do it]/Yes

·[Don't do it]/No

·Cancel

但是在 MacOSX 的設計規範中則不同,“能(néng)夠引發(fā)特定操作的按鈕應當處于右邊,而取消按鈕則應當在這(zhè)個按鈕的左邊。”這(zhè)樣(yàng)一來,在Mac平台上,取消按鈕在左,而确認按鈕在右邊。

Google Android 的設計規範中則規定,“‘取消’操作的按鈕始終處于左邊,當用戶執行這(zhè)個操作的時候會回到上一個狀态,而正向(xiàng)操作的按鈕則安排在右側。”也就是說,在Android當中,“取消”

按鈕是在“确認”按鈕的左邊。

如果你的設計是針對(duì)特定的平台,那麼(me)按鈕的排布順序倒是很清晰的,按照設計規範來就好(hǎo)了。相比于“個性化”的選擇,平台的一緻性原則優先級更高,對(duì)于用戶體驗上的加成(chéng)也更多,簡言之就是更好(hǎo)用、更直覺。不遵循規範的設計談不上錯誤,但是用戶會遲疑、猶豫,甚至誤觸。

基于網絡的平台

當然,如果你是要設計基于Web的應用程序的話,應當遵循什麼(me)樣(yàng)的設計就要看你所在平台的規範或者用戶的使用習慣了。你可以通過(guò)用戶分析和調研,來找出最适合平台的排列順序。在這(zhè)種(zhǒng)情況下,你需要基于可用性來進(jìn)行考慮,根據用戶的使用場景來推導用戶的理解方式,作出最優選。

“确定/取消”以及“是/否”的選擇符合東西方文化的基本溝通邏輯,“你同意我的說法麼(me)?——是/否”,“是”爲首選選項,“否”爲次要選項。如果用戶選擇“是”的機率比“否”要高的多,那麼(me)將(jiāng)“是”放在第一位,降低用戶誤觸的機率。

而“取消-确定”的排布方式修改了邏輯流程,這(zhè)種(zhǒng)排布方式讓靠後(hòu)的元素顯得更加重要。

兩(liǎng)種(zhǒng)方式各有優劣,但是本身通常不存在可用性問題。

原文地址:Medium

原文作者:Nick Babich 

優設譯文:uisdc.com

注:本文均來自百度搜索,如涉及版權問題,請聯系我們,我們會第一時間解決。