注册时明显需要向下滚动

今天我从一位用户那里收到了一些非常有价值的反馈。我不确定目前是否已有妥善的解决方案,如果没有,我认为这确实值得思考如何改进。

用户完成了如图所示的注册表单:

但在所有可见字段填写完毕后,用户并不清楚需要向下滚动才能找到最后一个必填字段/复选框:

虽然内容确实有轻微的渐隐效果,但对大多数人来说并不明显。

我不确定最佳的改进方案是什么——或许可以添加一个提示滚动的视觉线索?或者直接将注册弹窗展开,使所有字段都可见?

另外,有什么我可以立即采取的措施来改善用户的注册流程吗?

期待听到大家的想法!:slight_smile:

编辑:这似乎与 @sam 几年前发布的一篇帖子相关:You have not completed all user fields UX on signup should be improved

1 个赞

It really depends on the operating system; on some OSes the scrollbars are super minimized, specifically OSX.

I do agree with the underlying complaint, but you have to understand that it’s contextual to the browser and OS as well.

You can make a minor CSS adjustment to allow the modal to get taller on desktop devices, this should do it:

.d-modal.create-account .login-form form {
  max-height: 70vh
}

At the moment our default max-height is more restrictive, I can probably allow it to get a little taller by default… but there’s always going to be a point where the scroll cut-off isn’t obvious for someone with X number custom fields added. I really hate that macOS does this hidden scrollbar behavior.

6 个赞

Thanks @awesomerobot, I’ll give that a try! (I assume you meant max-height: 70vh; which seems to work perfectly!)

And I do appreciate that this primarily an issue on MacOS, @codinghorror. However, 1/3 of my desktop users are on MacOS, so it’s not an insignificant part of my audience.

Thanks again both of you!

Oops, yes exactly! Fixed it above.

6 个赞

这里也有同样的问题。必填自定义字段不可见,用户不明白为什么无法点击“创建新账户”:

我建议在你的实例中覆盖 CSS 以使其更清晰——如上所述,许多操作系统会大幅隐藏滚动条,所以我想我就引用一下自己吧:

2 个赞

我们能否通过 CSS 禁用注册框的滚动条,同时允许用户滚动?

感谢 @awesomerobot。经过这次自定义后,效果更棒了。

1 个赞

应用

.d-modal.create-account .login-form form {
  max-height: 70vh
}

我在 iPhone 6 上遇到了一个奇怪的副作用:

哦,这确实很奇怪,我似乎无法复现这个问题……你知道具体是哪个版本的 iOS 吗?

2 个赞
  • iPhone 6 Plus
  • iOS 12.4.5

使用 Safari 和 Firefox 的结果相同。

这个问题再次被提出:https://meta.discourse.org/t/not-obvious-that-sign-up-box-scrolls/149486

解决这一问题颇具挑战,因为大多数触摸设备默认隐藏滚动条,我们的注册表单位于模态框中,如果添加额外字段,注册表单的长度可能会变化,而且不同浏览器的窗口高度也各不相同。

除了将注册表单从模态框改为完整页面这一重大调整之外,我认为还有几种可行的解决方案,其中一种(或两种)或许能改善现状:

  • 在现代浏览器中,我们可以通过 CSS 强制显示滚动条。这意味着在触摸设备上滚动条将始终可见(从而让滚动操作更加明显)。但这同时也意味着我们将覆盖注册模态框中操作系统的默认滚动条样式,因此可能显得不协调。

  • 我们可以更改“创建新账户”按钮的行为。与其在表单未完成前禁用该按钮,不如允许用户点击它,然后自动滚动到第一个未填写的输入框。

强制显示滚动条应该可以简单地进行测试,@codinghorror/@sam,你们对此有什么看法?

6 个赞

我非常喜欢这个方案,@vinothkannans 你能负责吗?

我们在作曲器(composer)上也遇到过同样的问题多年,将其改为始终可点击后,大量问题随之消失。之前那种弹跳的红色动画确实让作曲器的问题变得复杂。

10 个赞

这已在下面的开放 PR 中完成

11 个赞

看起来不错,现在应该明显多了!

我还做了一项额外的修改:移除了边距,并在必填消息中将“supply”改为“enter”(因为我们在验证消息中使用的是“enter”,所以这里也沿用这个说法)。

8 个赞

谢谢。虽然我既没有技术(也没有勇气)来应用这个补丁。希望这个功能能尽快在未来的更新中出现。

我认为输入文本框应该用红色高亮显示,以提示缺失的内容。

顺便一提,我刚刚又遇到第二位用户因为这个问题无法创建账户……

PR 现已合并。

3 个赞