(翻译)对话框中的OK按钮放在右侧效果最好的原因

  设计人员经常会问对话框中的OK按钮和取消按钮的摆放方式。OK按钮是完成任务的主要操作按钮。
  取消按钮属于次要操作按钮,点击该按钮会让用户放弃完成任务,返回原有界面。根据OK按钮和取消按钮的作用,它们的最佳摆放顺序是什么?OK按钮应放在取消按钮前面还是后面?

保持平台一致性还不够

  很多设计人员建议遵循平台一致性原则,这貌似可以解决上述问题,但实际上并非如此。平台一致性原则并未回答OK按钮和取消按钮怎么放置最好、原因是什么。为了一致性而遵循平台约定根本不够好,这让设计师一无所获[1]。
  “一致性”是设计人员中的流行语,它也是设计人员不想深入思考用户面临的设计问题时的常见借口。如果设计人员不清楚设计惯例的来龙去脉,那么遵循设计惯例能有什么好处?
  如果某种设计惯例对用户有害呢? 设计人员是否应该为了一致性而盲目地遵循设计惯例?设计人员是否想用平台设计一致性解决所有问题,从而导致糟糕的设计实践持续存在?
  现在还有一些对用户有用的平台设计惯例在广泛使用。但这里的重点在于,设计人员不应将平台设计一致性作为做事的唯一理由,而是要理解为什么用某种方式而不是另外的方式来设计用户界面。

按钮位置很重要

  可能有人会说,比起按钮位置,增加按钮视觉重量以及给按钮赋予清晰明确地名称,更能突显操作按钮。虽然按钮的视觉重量和名称属于重要的设计角度,但设计角度并不仅限于这两者。
  粗心的设计人员仅注重一个设计角度,而工作细致的设计人员会考虑每个设计角度对用户的影响。设计人员最难抉择的就是主次操作按钮的位置,因此OK按钮和取消按钮的位置之争在设计人员中很常见。

OK按钮放在右侧效果最好的原因
  跳过平台一致性之争后,就会疑惑OK按钮的最佳摆放位置在哪里。可以通过分析设计如何影响用户来回答该问题。
减少视觉凝视数量

  有必要看看设计人员所做的一般假设是否成立。 一些设计人员相信对用户最好的方式是将主要操作按钮放在次要操作按钮左侧,这样主要操作按钮距离用户浏览的文本内容更近,能减少鼠标点击时间。
  上述假设很有道理,但也不能忽视以下事实:用户看完所有选项后才会采取后续行动。这意味着大部分用户不会盲目地点击主要操作按钮,而是接着看完次要操作后才会进行决策。
  用户先是看到左侧的主要操作按钮,接着看到右侧的次要操作按钮,最后再将视线移回主要操作按钮上进行操作,整个过程中总共产生了位于多个方向上的3次视觉凝视。

在这里插入图片描述

OK按钮位于左侧,视觉凝视数量多且方向不一致

在这里插入图片描述

OK按钮位于右侧,视觉凝视数量少且方向一致

  与上面的放置方式相比,在对话框中将主要操作按钮放在次要操作按钮的右侧,用户首先看到次要操作按钮,然后将目光移动到主要操作按钮并点击该按钮,这种放置方式在一个方向上总共产生了两次视觉凝视,给用户更快的视觉流。
  每个按钮用户只会看一次,并最终将目光落在主要操作按钮上。将主要操作按钮放在左侧可能便于用户使用,但当从用户的心理过程和视觉凝视来看效率时,将主要操作按钮放在对话框右侧实际上更方便。

按钮预期功能映射

  用户点击次要操作按钮时,他们期望应用系统退回到原来的界面,其它什么都不要做。因此取消按钮的功能类似于回退功能。
  用户点击主要操作按钮时,他们期望应用系统执行按钮名称代表的操作,并跳转到后续界面。因此OK按钮的功能类似于下一步功能。因此,仿照退回功能和下一步功能,将次要操作按钮放在右侧,同时将主要操作按钮放在左侧,符合用户预期。
  这类似于分页功能按钮的位置。将用户带到下一页内容的按钮放在右侧,而将用户带到之前页面内容的按钮放在左侧。这种放置方式很实用,它符合用户从左到右的阅读习惯:右侧是前进的方向,而左侧是回退的方向。

在这里插入图片描述

OK按钮将用户带到后续界面,而取消按钮将用户带回之前的界面

  对话框中的OK按钮和取消按钮应遵循类似分页功能的交互模式,它们的功能很相似。不仅如此,西方用户习惯于左右方向模式,将主要操作按钮放在右侧,同时把次要操作按钮放在左侧,能让用户更方便直观地理解对话框按钮功能。

给用户更高效的任务流
  按钮放在对话框右下角更便于用户点击,这符合古腾堡图表法则,即右下角区域属于最终视觉落点区域,用户浏览完界面内容后,视线会落到该区域。

  将按钮放在最终视觉落点区域,让用户看到最终需要他们执行的主要操作,对视觉流和任务流都有所提高。用户不会在内容浏览过程中跳过主操作按钮,而是在完成浏览时正好看到主操作按钮,这样就可以立即点击它。[2]

在这里插入图片描述

用户浏览对话框内容并最终将目光落在主要操作按钮上,可以便捷地采取行动
按钮散在两侧还是放在一起?
  设计人员经常遇到的另外一个问题是,应该将主次操作按钮散在对话框两侧还是放在一起?将主次操作按钮散在对话框两侧,符合用户从左往右的浏览习惯,但OK按钮和取消按钮不是导航按钮,不用完全遵循阅读方向功能映射,否则有时会弊大于利。

在这里插入图片描述

按钮间的巨大目视间隔使得主次操作难以比较且相互隔离
  如果用户无法撤消应用程序即将执行的关键操作,则让用户看到取消按钮和OK按钮放在一起就十分重要。 这种情况下,取消按钮的功能类似于退回功能,可以将其作为安全按钮以防止任何更改。[3]

  将取消按钮放在对话框左下角的风险是,由于两个按钮间的目视间隔巨大,可能导致用户忽略取消按钮。将取消按钮与OK按钮放在一起,能让用户一眼看到这两个按钮并进行比较,以便做出最佳决策。

结语
  当有重要信息需要用户浏览或者重要操作需要用户执行时,设计人员经常采用对话框与用户交互。按钮的放置方式会影响用户的决策,当按钮位置清晰高效时,能够避免用户选择错误操作,防止他们犯错。

  按钮位置十分重要,但也要重视按钮的视觉重量和名称。用户浏览对话框时,所有的设计手段都会起作用。既然理解了OK按钮放在右侧效果最好的原因,就不会再依据平台一致性进行按钮位置设计了。

原文地址:https://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/

[1]原文:The suggestion to follow platform conventions for the sake of consistency is simply not good enough and leaves designers empty-handed.
[2]原文:Placing your button in the terminal area allows users to see the primary action they need to take last. This not only improves the visual flow, but the task flow as well. Users won’t skip past the primary action button as they’re scanning. Their eyes will land right on it when they’re through, so they can click it right away.
[3]原文:If the application is about to carry out a crucial action that the user cannot undo, it’s important that users can see the ‘Cancel’ button along with the ‘Ok’ button. In this case, the ‘Cancel’ button might function like a ‘Previous’ button, but it’s more important because it acts as a safety button to prevent any changes.

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这是一个基于Android开发的界面交互问题,需要使用Java语言编写代码。以下是基本的实现思路: 1. 在布局文件添加一个EditText和两个Button控件,EditText用于显示日期,Button1用于弹出日期选择对话框,Button2用于跳转到界面2并传递EditText上的文本。 2. 在Java代码,给Button1添加一个点击事件监听器,当用户点击Button1时,会弹出一个日期选择对话框。在对话框选择日期并单击OK按钮后,将选择的日期显示在EditText上。 3. 给Button2添加一个点击事件监听器,当用户点击Button2时,跳转到界面2,并将EditText上的文本传递给界面2。 下面是代码实现的基本思路: ``` // 在布局文件添加EditText和Button控件 <EditText android:id="@+id/date_text" android:layout_width="match_parent" android:layout_height="wrap_content"/> <Button android:id="@+id/date_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Select Date"/> <Button android:id="@+id/goto_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Go to Page 2"/> // 在Java代码给Button1添加点击事件监听器 Button dateButton = findViewById(R.id.date_button); final EditText dateText = findViewById(R.id.date_text); dateButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // 弹出日期选择对话框 DatePickerDialog datePickerDialog = new DatePickerDialog(MainActivity.this, new DatePickerDialog.OnDateSetListener() { @Override public void onDateSet(DatePicker datePicker, int year, int month, int dayOfMonth) { // 将选择的日期显示在EditText上 String date = year + "-" + (month + 1) + "-" + dayOfMonth; dateText.setText(date); } }, Calendar.getInstance().get(Calendar.YEAR), Calendar.getInstance().get(Calendar.MONTH), Calendar.getInstance().get(Calendar.DAY_OF_MONTH)); datePickerDialog.show(); } }); // 在Java代码给Button2添加点击事件监听器 Button gotoButton = findViewById(R.id.goto_button); gotoButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // 跳转到界面2,并将EditText上的文本传递给界面2 Intent intent = new Intent(MainActivity.this, SecondActivity.class); intent.putExtra("date", dateText.getText().toString()); startActivity(intent); } }); ``` 需要注意的是,界面2需要在Java代码获取传递过来的EditText上的文本,并将其显示在界面2上,具体实现方法可根据需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值