关于网站UI设计中的表单设计的几个小技巧和建议

设计营销   2021-08-08

表单设计是很多数字产品成功的关键。如果你要求用户提供用于注册、注册演示或者购买的信息,那么这个过程必须是无缝的,难于使用的表单将破坏用户体验,并对转换造成负面影响。

形式的可用性是一个非常复杂的话题,本文只是一篇浅尝辄止。然而,这些提示对帮助你开始工作很有帮助。

表单设计基本:

如果不熟悉网站UI设计,一定要了解表单的不同部分。身为数字产品的消费者,可能会习惯于使用这些产品,因此术语可能不清楚,理解设计术语会帮助设计一个用户友好的表单。


保持字段标签可见

通常情况下,在用户输入数据之前,找到以占位符文本形式显示标签的形式。这个问题看起来很明显,但是令人惊讶的是,当用户开始输入时,很多表单没有继续显示出来。

如果用户继续输入,标签就消失了,这就会造成挫折感。这样的设计也许是为了节省空间,但是冒险并不值得付出代价。

当用户输入一个字段并分散注意力时,就很容易忘记标签是什么。多数情况下,用户必须删除刚才输入的内容,以再次看到表单标签。

有可能出现数据错误,这对用户和产品都有害。更严重的错误可能因产品而异(医疗数据、银行业务等)。

表单域标签。

一种简单的方法可以防止用户出错。总是保持字段标签的可见性可以帮助用户建立所输入数据和标签之间的联系。

可将标签放在字段的侧面或上面。一些窗体类型首先在字段中有标签,但是在焦点上,标签被移到输入上面。

这样就变成了一种常见的UI模式,确实解决了用户的潜在问题。


清楚地显示必填项和可选

使用者最后一件事就是填一张长表单设计。注意使用者的时间和注意力范围非常重要,所以第一步只包括必要的字段。

存在两种类型的字段,它们分别是必需的和可选的。假如你使用可选字段,要确保它们被清晰地标记。可以采取两种方法:

仅表示必需字段的标签文本。必填字段通常标有星号,在很多情况下,必填字段旁边都有必填文本。

只在标签文本中表示可选字段。一般情况下,该字段的标签文本中将包含“可选”。另外一种方法是只标记可选字段,这通常对用户更友好,也不那么令人生畏。

调查显示,如果字段被标记为可选,而非必需的方法,用户会提交更多的数据。

那一直都是真的?为了找出答案,一定要进行研究和测试,确保用户对此方法作出反应。

在测试你的表格设计时,你会知道你的用户喜欢什么,哪种方式更成功。

表单和错误信息提醒要清晰和必要

平心而论,大部分人都不喜欢填表格。特别是他们不愿意去猜测自己犯错的地方。

无法避免所有错误,这就是为什么错误消息需要用户友好。在出现错误时,一定要给用户提供清晰和丰富的错误消息。

格式化错误,用户忘了填写所需的字段,以及错误密码等等都是常见的表单错误。这样做可以让用户清晰地传达信息,从而优化体验。

就拿电子邮件域来说吧。这些资料必须清楚清楚,以帮助他们进行必要的修正。

写用户友好的错误信息时,一定要明确错误并帮助用户识别错误。并明确的告诉他们如何解决这个问题。

窗体错误信息。

如果电子邮件的格式有问题,用户就会明白错误是什么。忘记添加"@"符号,错误信息告诉我做错了什么。


节约查询功能时间

预测列表可以帮助节省时间和防止错误,让用户在需要用户选择其他有很多预定义选项的东西。

该方法可降低使用者的打字量和认知负担。如果填满名字、地址、邮编、国家等信息,就很有用了。

选项作为用户类型进行细化。多数情况下,这样做可以节省时间,因为他们不需要输入整个字符串来找到正确的选项。

按逻辑排列窗体并对相关信息分组。

形式是令人畏惧的,特别是当它们长的时候。财务申请、电子商务结帐和其他长表单设计这样的内容都应该被精心优化。

关联信息应该按照逻辑块进行分组,同时将相关的字段分组也有助于用户理解所需的信息。

举例来说,您希望姓名段、地址字段和信用卡信息位于不同的集合中,而且信息将会按照预期的顺序分组。

看起来有些奇怪,用户在输入你的名字之前输入邮政编码。


应有逻辑地从用户的角度询问表单细节
采用一种逻辑内容块的思想可以让用户清楚地知道他们在填什么信息,并向他们展示清晰的层次结构。或许只有我一个人,但当你完成一组并且知道你将会感到满足。

此表具有很好的逻辑组合,而且结算程序非常清晰。该表单是多步的,所以也使用了进度条。这可以帮助我们了解他们已经走了多远,完成任务还有多远。


移动端设计的重要

对手机设备进行表单设计非常重要,因为它要比桌面体验困难得多。由于用户可以很容易地向下滚动表单,所以简单的单栏设计最适合移动设备。

有一件事情似乎正在逐渐变好,那就是根据所需的输入类型显示正确的键盘。

虽然听起来无关紧要,但是如果做得好,确实有助于体验。举例来说,当我在iPhone上键入电话号码时,数字键盘弹出来的时候很棒。

这是自动的,不需要再点击一下键盘就可以了。若您执行输入姓名等操作,则最好将默认键盘设置为文本输入键盘。

如果输入类型与正确的键盘类型相匹配,那么这将非常有用。

手机用户应该能够精确的点击那个区域。拥有足够的填充物和最小高度,可以帮助防止由于超过目标区域或击打错误窗体区域而造成的错误。其中字段和按钮应至少具有48像素高。表单是创造无缝体验的极好机会,清楚地出错、节省时间增强、逻辑排序等等都能提供友好的设计。


维好维可-用户体验体验创新设计
合作咨询
+86-21-51115850
© 2010-2024  维好维可 | 用户体验创新设计公司
沪ICP备19006116号-1

联系我们,开启一场关于您项目的讨论会吧。

联系电话:
+86-21-51115850
商务邮箱:
hi@wellworks.cn
复制
公司地址:
上海市松江区茸阳路69号(百原PARK)贰号楼

©2010-2024 维好维可 | 用户体验创新设计公司-版权所有

沪ICP备19006116号-1

需求留言 + 获取方案

提交信息后,我们的专属顾问会在1个工作日内与您联系。

怎么称呼?
您的手机?
您的邮箱?
您的需求?