快好知 kuaihz订阅观点

 

设计师,你把「OK」放左边根本就不 OK 呀!

設計對話框的時候,設計師很常碰到的問題就是「ok」跟「取消」兩個按鈕要怎麼擺。

「ok」鈕是完成使用者動作的最關鍵;「取消」也同樣重要,因為可以剛剛的動作復原,回到原來的頁面,防止犯錯。根據上述的功能,要怎麼決定它們擺放的順序才是最好的呢?到底誰在左邊誰在右邊?

照慣例嘛,好不好?

很多人都覺得就照慣例來吧,但真的可以嗎?

慣例無法解決這個問題。其實要大家遵照慣例設計順序,是因為要讓使用者有一致的體驗;一致的體驗在設計界是個滿熱門的詞,也可能導致一種盲點,蒙蔽大家深刻思考使用者真正碰到的問題。如果大家都不明白慣例從何而來,那又如何知道遵守這慣例有什麼好處?如果這個慣例對使用者並沒有好處要怎麼辦呢?

當然我們有一些設計慣例是被廣泛使用的,但這裡的重點是UI設計師不應該被限制住,必須要能更深入看待問題,了解設計背後的理由。

視覺份量、標示很重要,如同順序

要讓按鈕更明顯的話,可以加強文字的視覺份量(例如使用加粗的文字),或者使用特別的標示(例如顏色)。而針對這兩項傳統來說,大家覺得比「順序」重要許多;可是視覺份量與標示雖然重要,如果忽略了順序,設計就不完整。

「ok」應該放在右邊

要仔細分析這個問題,其實需要先看設計師們常有的假設是否站得住腳。

有些設計師相信把第一順位的「確認」鈕放在左邊,也就是在第二順位的「取消」前面對使用者是比較好的,因為這樣比較先看到「確認」,可以花比較少時間按。聽起來也許有道理,但不能忽略使用者在決定要按什麼鈕之前,會先把所有的選項看過。

這代表大部分的使用者不會盲目的只按在左邊的(第一順位)按鈕,而不注意到在左邊的(第二順位)按鈕。在視覺上,很明顯就是一個在左邊,一個在右邊。然後他們就會把眼睛移回到左邊的按鈕然後按下去,這樣一來,就有三次的眼球動作。

當「ok」放在左邊,視覺方向比較複雜。

 OK按鈕放在右邊,視覺方向就一致了。

比較「ok」放在左邊跟右邊的效果:若把「ok」放右邊,就只有兩個視覺定點與一種視覺方向,視覺流動的速度就快許多。但如果放在左邊,會讓使用者比較比較容易按,但的確就會造成三個視覺定點,兩個視覺方向。所以把「ok」放在右邊的確會讓使用者的速度快很多。

設計要與經驗一致

使用者按「取消」的時候,他們不會預期有什麼動作,只是會回到原來的頁面而已。

所以,「取消」按鈕就像是「上一頁」一樣;但當使用者按了「ok」,就會期待接下來會如同按鈕上說的,把他們帶到下一個頁面。所以「ok」就像是「下一步」一樣。

把「上一頁」放在左邊,「下一步」放在右邊,其實也配合了使用者的心智模式,是他們可以預期的動作。把使用者帶到下一步的按鈕放在右邊,到上一步的在左邊,這種順序有邏輯的原因就是它符合使用者的左到右閱讀習慣,右邊代表的是向前,而左邊代表的是後退。

下圖的「ok」鈕把使用者帶往「下一步」,而取消就是回到原來的視窗。

 提供使用者更流暢的流程:放在右下的按鈕相當於是結束區

放在右下角的按鈕會讓使用者比較好按,是因為這遵守了Gutenberg diagram,也就是下面圖片所展示的「閱讀重力(reading gravity)」流向。

在Gutenberg diagram裡面,放在右下的按鈕相當於是結束區,也就是使用者視覺瀏覽方向的最後一站,放在這個位置能讓使用者了解最後一件要做的事是什麼。

這不僅改進了視覺方向的複雜度,也改善了使用流程。使用者瀏覽的時候不用再跳過「ok鈕」,因為在視覺的最後一站就會剛好看到它,所以就可以立刻按下去,進到下一步。

下圖這種對話框就比較方便瀏覽,因為視線會直接停留在「ok」鈕

要分開還是一起?

還有個設計師常常思考的問題是:要把兩個都放在右下角,還是一個放左下,一個放右下?

當你把兩個按鈕各放在兩邊角落時,也同樣能與「上一頁」「下一步」的使用習慣配對。但是,因為「ok」與「取消」按鈕並不完全是像「上一頁」「下一步」那樣的流程鈕,所以這樣做並沒有必要,而且壞處可能比好處多。

下圖這樣的擺放造成過大的視覺距離,讓人難以比較兩個按鈕。但在某些狀況中,我們需要衡量按這些鈕會發生什麼事情是。

如果要執行的是重要的動作,而且無法修改,那把「取消」跟「ok」放在一起是很重要的。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:左边  左边词条  设计师  设计师词条  根本  根本词条  OK  OK词条  
交互

 巧用视错觉 UI更有趣

巧妙的利用视错觉,有效地控制网页的设觉效果,从而创造出风格更和谐的网页设计, 同时也能更有效地将你的信息传达给用户。我们每个人在生活中都曾感受过视错觉(opti...(展开)

交互

 现有生产力 App 软件会加重用...

2013年消费市场的“生产力软件”领域非常活跃,特别是笔记类和日程管理类应用,我们目睹了各家公司的关停、巨额融资发布、并购和持续的增长。虽然有这么多吸引眼球的事...(展开)