设计师经常会思考对话框中“确定”和“取消”按钮应该放在哪里。“确定”按钮是完成任务的主要操作。
“取消”按钮是辅助操作,可以让用户返回到原始屏幕而不完成任务。根据它们的功能,最佳的放置顺序是什么?“确定”按钮应该放在“取消”按钮之前还是之后?
许多人认为遵循平台惯例是解决问题的答案。虽然这看起来像是解决问题的办法,但实际上并非如此。它没有回答哪种布局对用户更有利以及原因。仅仅为了保持一致性而遵循平台惯例的建议根本不够好,只会让设计师徒劳无功。
“一致性”是设计师们常用的词。它也是人们不深入思考用户面临的设计问题的常见借口。如果连设计惯例存在的意义都不知道,遵循它又有什么意义呢?
如果某种设计惯例对用户有害怎么办?设计师是否应该为了保持一致性而盲目遵循它?是否应该因为设计师想要将平台设计一致性作为解决所有问题的答案而将糟糕的设计实践延续下去?
如今,某些平台设计惯例被广泛使用,因为它们对用户有用。但这里的重点是,平台设计的一致性永远不应成为设计师做某事的唯一理由。理解为什么应该以某种方式设计用户界面而不是另一种方式是关键。
有人可能会认为,通过增加操作按钮的视觉重量和清晰的标签使其更加突出,比其位置更重要。虽然操作按钮的视觉重量和标签是需要考虑的重要设计方面,但并非唯一的方面。
只关注一个设计方面而忽略其他方面,是粗心大意的设计师的表现。一个一丝不苟的设计师会思考每个设计方面如何影响用户。而主要操作和次要操作的布局,正是设计师最难搞清楚的。这就是为什么“确定”/“取消”按钮的争论在设计师中如此普遍。
当你克服了平台惯例的争论后,你会质疑哪种布局效果最好。你可以通过分析设计如何影响用户来解决这个问题。
有必要验证设计师们常见的假设是否正确。一些设计师认为,将主要操作放在左侧次要操作之前对用户更有利,因为左侧操作更靠近用户,因此点击时间更短。
这很有道理,但你不能忽视一个事实:用户在选择操作之前会查看所有选项。这意味着大多数用户不会盲目点击主要操作按钮,而不查看旁边的次要操作按钮。
他们会先看到左侧的主要操作,然后再看右侧的次要操作。之后,他们会将目光移回主要操作并点击它。这会在多个方向上形成总共三个视觉注视点。
左侧有“确定”按钮,视觉注视点更多,并流向多个方向
使用右侧的“确定”按钮,视觉注视点减少,并流向一个方向
将其与位于对话框右侧、次要操作位于左侧的按钮进行比较。用户的视线首先停留在次要操作上,然后移至主要操作并点击按钮。这在一个方向上产生了总共两次视觉注视,从而为用户提供了更快的视觉流。
用户只会在每个按钮上注视一次,最终停留在主要操作按钮上。将主要操作按钮放在左侧或许能让用户更容易触及,但从用户的思维过程和视觉注视角度来看,将主要操作按钮放在对话框右侧实际上会更快。
当用户点击辅助操作按钮时,他们希望应用程序不执行任何操作,并返回到原始屏幕。因此,“取消”按钮的功能类似于“返回”按钮。
当用户点击主要操作按钮时,他们期望应用程序执行按钮指示的操作,并将他们带到下一个屏幕。因此,“确定”按钮的功能类似于“下一步”按钮。将次要操作按钮放在左侧,将主要操作按钮放在右侧,可以映射用户期望的“上一步”和“下一步”按钮的功能。
这与分页按钮的放置方式类似。将用户带到下一页的按钮位于右侧,将用户带回上一页的按钮位于左侧。这种按钮放置方式之所以有效,是因为它与用户从左到右的阅读和导航方向相呼应,其中右侧是前进方向,左侧是后退方向。
“确定”可让用户前进到下一个屏幕,“取消”可让用户返回到原始屏幕
对话框中的“确定”和“取消”按钮应遵循类似的交互模式,因为它们的功能类似于分页按钮。不仅如此,左右方向的模式也符合西方用户习惯。将主要操作放在右侧,将次要操作放在左侧,将使对话框按钮更容易、更直观地被用户理解。
对话框右下角的按钮更容易被用户点击,因为它遵循了古腾堡图表。在古腾堡图表中,右下角是终端区域。这是用户完成浏览后视线最终停留的区域。
将按钮放置在终端区域,可以让用户最后看到需要执行的主要操作。这不仅改善了视觉流程,也优化了任务流程。用户在浏览时不会跳过主要操作按钮。他们的目光会在浏览过程中直接落在按钮上,因此可以立即点击。
扫描对话框并采取行动既快速又简单,因为用户的眼睛停留在主要操作按钮上。
设计师经常思考的另一个问题是,他们应该把按钮放在角落里还是把它们放在一起。当你把主要操作和次要操作放在对话框的角落里时,它们可以很好地映射到左右导航方向。然而,由于“确定”和“取消”按钮不是导航按钮,因此没有必要遵循方向映射。有时,这样做弊大于利。
按钮之间较大的视觉分离使得操作比较困难,并将一个操作与另一个操作隔离开来
如果应用程序即将执行用户无法撤消的关键操作,那么让用户能够同时看到“取消”按钮和“确定”按钮就显得尤为重要。在这种情况下,“取消”按钮的功能可能类似于“上一步”按钮,但它更重要的是,它充当了安全按钮,可以防止任何更改。
将“取消”按钮放在最左上角的危险在于,由于两个按钮之间的视觉距离过大,用户可能会忽略它。将“取消”按钮与“确定”按钮放在一起,可以让用户更容易地在一次注视中看到并比较这两个操作,从而选择最佳操作。
当用户需要阅读重要信息或执行重要操作时,设计师通常会使用对话框。按钮的放置顺序会影响用户选择的操作。如果按钮的放置顺序清晰高效,可以防止用户选择错误的操作并犯错。
按钮的位置很重要,但也要记住注意按钮的视觉重量和标签。所有这些设计方面都会在用户浏览对话框时发挥作用。既然您理解了为什么“确定”按钮放在右侧效果最佳,那么您就有比平台一致性更好的参考依据了。