移动应用中的文本字段设计分析

1

在进行移动UX设计时会面临很多挑战。最大设计挑战就是如何在有限的屏幕空间上在进行点击输入操作。对设计师、开发人员和产品经理而言,为用户找到简化这一过程的最佳方法很重要。

本文重点介绍了提高信息输入体验的三个关键因素,这些因素可以缩短用户的输入时间,为用户提供帮助并指示直接关系到用户输入的问题。

将所需文本输入和键盘匹配起来

用户青睐于那些为输入类型提供合适键盘的app。不同于物理键盘,触摸式键盘可以做到对每个用户必填的表单域进行优化,文本标签确定了该字段中的字符类型。你应该优化的常见输入类型包括:

数字键盘:电话号码,信用卡号码,PIN

字母键盘:合适的名称,用户名

混合格式:电子邮件地址,街道地址,搜索查询

确保这个匹配在app中始终实现,而不是某些任务实现了而某些没有。

2

左图:在用户被要求输入信用卡号码时提供无法输入数字的键盘。

右图:在要求输入数字时自动为用户提供合适的数字键盘。

图片来源: Google

适当配置大写锁定(英语)

对于移动表单域的可用性而言,适当的配置大写锁定很重要。如果需要的话,每个文本字段和句子的第一个字母应该大写。例如,这是特别相关的输入字段:

1.要求写名字的,如用户的姓或名

2.包含一条类似于句子的消息,如短信

但你不应该在填写电子邮件的区域启用自动大写。因为大写锁定开启时用户会可能误以为输错邮件信箱,从而返回删除第一个字母。

 

3

图片来源: Baymard

当字典功能不够强大时禁用自动更正

当用户注意到糟糕自动更正是令人沮丧的,而且当他们不喜欢的时候,会是彻头彻尾的有害。自动更正对那些不在字典中的单词无能为力,如缩写,街道名,电子邮箱,用户名等等。

旧版亚马逊移动端的地址栏会打开自动校正模式,这造成了有效条目被自动更正重写。

4

图片来源: Baymard

这种情况常常出现,因为用户往往把注意力集中在他们正在输入的信息上,而不会关注键盘类型。在这种情况下输入地址信息,由于用户没有注意到自动更正已开启,有效地址往往在提交前被更新为无效地址。

固定的输入格式

不要使用固定输入格式。强制固定格式的一个常见原因是验证脚本限制(你在后端无法确定需要什么格式)。通常这是开发人员的问题,而不是用户的。当用户输入时不要强迫输入格式,你应该让用户在你的输入框内随意切换输入格式。

5

左:数据输入格式是固定的(比如电话号码的三个字段),下一个表单域隐藏在键盘后面

右:表单区域的信息格式很灵活,并且当它完成后这个表单在空间上处于最顶端。

来源: Google

默认值和自动完成

通常情况下,你应该预测用户可能选择的项目。并为用户提供默认预填值或根据之前输入提供数据提示,来帮用户简化这个过程。比如,你可以根据系统的地理位置数据为用户选择国家。

这个解决方案可以搭配自动完成功能使用,这大大加快了用户的操作速度。在下拉菜单自动提供实时建议,就可以帮助用户更准确、高效地填入信息。这对于那些有读写能力障碍或不擅拼写的人来说很有价值,特别是那些使用非母语的用户。

6

提供建议选项的文本字段

来源: Material Design

标签和有用信息

用户想知道在输入栏中输入什么样的数据,清晰的标签文本是一个提高UI可用性的主要的方法。标签可以告诉用户的文本字段的目的,当焦点在输入区域时也应保持标签的有效性,甚至在填写完成该领域后也应继续保持。

你还可以在输入字段的上下文中提供有用信息。有语境中的相关信息,可以协助用户更轻松地通过这一过程。

限制数量

大量标签是无法帮助文本理解的。你应该使用简短、描述性的标签(一两个词来表达),这样用户就可以快速浏览你的文本字段。

7

‘电话’,’入住’,’离店’是输入字段的标签

如果你需要更多有关这一文本字段的信息,使用帮助文本是一个好方法,它有助于消除用户可能会面临的混乱和可能错误。

8

”Phone“区域下面的信息是帮助文本。

图片来源: Google

简单的语言

与你的用户讲同样的语言。未知的术语或短语会增加用户的认知负荷。明确的沟通和功能优于专业术语和品牌信息。

 

9

左:非常用术语可能迷惑用户

右:用辞清晰,便于理解

内联标签

内联标签(或占位符文本)为用户名或密码这种简单区域做出伟大贡献。

 

10

图片来源: snapwi

但当屏幕上有超过2个文本字段时,内联标签是单独的文本标签的替代品。虽然他们很受欢迎,他们看起来很美观,但他们有2个严重的问题:

1.一旦用户点击文本字段内联标签就消失了,因此用户不能进行再次检查他/她写的是什么。

2.当用户看到文本框内的文字时可能认为它已被预填过了,并因此忽略它。

占位符文本的一个很好的解决方案是浮动标签-当用户开始输入文本时,内联标签浮动到文本区域上方。

11

浮动内联标签

来源: Dribbble

小结: 不要仅仅依靠占位符或标签。一旦某领域被填充,占位符不再可见。你可以使用浮动标签来确保用户填写正确的文本。

标签色彩

标签色彩应该呼应你app的主色调,同时也应具有合适的对比度(不应该太亮或太暗)。

12

图片来源: Material Design

验证

区域验证是指与用户交谈,引导他们度过这段有错误和不确定性的困难时期。这个过程的输出是情感而不是技术。错误处理部分是最重要的问题之一,往往也是数据处理最令人讨厌的部分。犯错是人的天性,而用户在输入区域也不免会犯错。使用正确时,验证可以把模糊的交互过程变得明确。

实时验证

用户不喜欢当他们通过完成数据输入后,在提交时才得知他们犯了一个错误。用户提交信息后的一刻是提供数据成败信息的正确时间。

实时在线验证,立即通知用户提供的数据的正确性。这种方法允许用户实时纠正错误,而不用等到点击提交才看到错误。使用对比色显示错误状态,如红色或橙色的暖色调。

13

提交验证VS实时验证

左:在提交后才验证表单填写,并且错误信息脱离了语境,没有提供改正建议。

右:在数据输入上方实时验证,并在语境中提供了附有改正建议的错误信息。

图片来源: Google

验证不应该只告诉用户他们做错了什么,而应该同时告诉他们如何改正。这给了用户通过整个输入流程的信心。

14

图片来源: Dribbble

明确的信息

应该直接在用户的错误下方给出“发生了什么,为什么?“的答案。你的验证信息应该清楚地说明:

哪里出错了,可能原因。

用户应该采取什么步骤来解决这个错误。

同样应该避免使用技术术语。规则很简单,但不知为何这一规则很容易被忽略。

正确的颜色

颜色是设计验证时使用的最佳工具之一。颜色在本能层次上起着作用,红色的错误信息,黄色警告信息,和绿色成功消息的说服力强大到令人难以置信。下面是验证密码文本的一个好例子:

15

密码区域的警告状态

另一个合理使用颜色的好例子是输入文本字段的字符限制。字符计数器的红色线条显示字数已超过限制。

16

图片来源: Material Design

但是验证信息不要仅仅依赖于颜色!为确保UI的可用性,良好视觉设计是非常重要的一个方面。

结论

你应该使数据输入过程尽可能简易。即使是自动大写或说明各区域的信息这类轻微变化,也可以显著提高输入的可用性和整体用户体验。深入地思考在用户输入信息的实际操作中,是如何使用你的app的,并在设计app时确保你没有遗漏什么重要的设计规则。

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部