文本字段的样式在逐年发展,设计人员越来越有创意,但有时也有点太过了。引发众多关注的特殊样式之一为带下划线的文本字段,其新颖、极简的外观可能会吸引设计人员使用,但当了解它影响用户行为的方式后,设计人员就会重新考虑。
带下划线的文本字段难以识别和点击,如果会影响用户操作,他们就不会填写表单。这些问题令用户沮丧,弃填表单,降低表单转换率。
不是所有人都用不习惯带下划线的文本字段,技术达人和视力正常的用户通常都能正常操作,但许多老年人和视障用户用着很难受。老年人和视障用户一般会在表单上找要填写的文本字段,但当页面上只能看到文本标题和内容分隔符时,他们就会感到困惑并弃填表单。
文本字段还是内容分隔符?
用户很熟悉用于分隔内容的水平线,使用带下划线的文本字段时,很容易将下划线误认为内容分隔符。下划线和内容分隔符很像,字段标签看着像标题,有时字段内的占位符文本看起来特别像正文文本。
用户还有可能将带下划线的文本字段误认为内容列表,后者并不属于表单中的预期内容,这会让他们认为点错了页面并弃填表单。
不仅如此,由于没有边框,下划线的文本字段也难以点击。当缺少上边框和侧边框时,被点击目标变成一条细细的单像素线,这会降低点击精度,并导致误点。
有时候,用户会误点击临近的文本字段。没有明确的目标边界的话,手指很容易落在错误的区域。
外观看着可点击
文本字段应从外观看出可点击性,以便用户可以立即填写表单,并在字段间快速切换。不要隐藏部分边框,而应保留所有边框,增加目标区域,让文本字段更具可点击性。
将文本字段边框设置为圆角也能提高可点击性。研究发现,人们天生就亲近圆形的、弯曲的东西,讨厌尖锐的、有角的东西。这一发现表明,用户偏好带圆角的东西,愿意与它们互动。
文本字段还是禁用的元素?
文本字段除了从外观看出可点击性,还应看着是可填充的,而非已填充内容。很多设计人员误用纯灰色填充文本字段,虽然相比带下划线的文本字段有所改进,但仍不算最佳实践。
纯灰色使文本字段看着像处于禁用状态或未激活状态,让用户搞不清是否能与之交互。用户填写表单之前,看到这些混杂信号会令人混淆。
文本字段看着像禁用的对象,用户就不太可能立即与其交互。他们会先从页面中寻找正常的文本字段,当意识到这些禁用对象是唯一类似于文本字段的元素时,他们可能会与之交互。这种认知努力很费力,减缓了用户的填表时间。
最重要的是,纯灰色文本字段难以阅读输入内容及占位符文本。灰色文本放在灰色背景上,对比度不高,许多低视力的用户不方便阅读文本,进而可能会弃填表单。
漏看及难以阅读并不是纯灰色文本字段的所有问题,用户还难以将其与实际禁用的文本字段区分开来。如果表单中既有纯灰色文本字段,又存在禁用的文本字段,低视力用户很难看出差别。通常,两者之间的唯一区别是禁用字段的文本标签更模糊一些。
外观看着可填充
理想的体验是,用户看到文本字段就能立即填写内容,而只有在字段包含空白,外观看着可填充时,这种即时反应才会出现。空白属于明显的空缺提示,提示用户输入内容来填充空缺。
为了让外观看着可填充,用封闭的边框保持字段内部空白。加深边框,让字段轮廓看着像空方框,虽然看起来很简单,但这样能吸引注意,易于识别,是用户所需要的。
为了让文本字段的外观看着更具可填充性,将字段放在灰白色背景上。灰白色背景更加突出空白空间,给予文本字段最清晰的空白提示。除此之外,灰白色背景更易于区分表单中的禁用字段。
用上述方法,检查表单时,用户更易区分已填写字段和未填写字段。空白空间的亮度给予输入内容和占位符文本更高的对比度,提高可读性。放在灰白色背景上的文本能保持可读性,并且不会与输入内容或占位符文本发生视觉冲突。
谷歌搞错了
纯灰色文本字段和带下划线的文本字段的流行源于谷歌的设计体系,这些新颖的文本字段吸引了很多设计人员的注意,但也导致设计人员为了时尚而牺牲了可用性——从长远来看,这一举动并没有回报。
甚至谷歌自己也意识到了上述错误,他们在Gmail登录界面中将带下划线的文本字段替换为带轮廓线的文本字段。他们从大量的Gmail用户那里得到的反馈是,许多人在登录Gmail时操作都不方便。
在一项研究中,谷歌进一步分析了带下划线的文本字段的问题:“具有矩形形状的封闭文本字段比具有单下划线的非封闭文本字段表现得更好”。尽管谷歌仍然提倡使用纯灰色文本字段,但他们很快就会意识到这也是一个错误。
可用性优先
新颖、极简的文本字段样式如果不好用,那就没什么用。设计人员在考虑更改文本字段的样式之前,请将可用性作为必要条件,确保文本字段的样式对于视力正常和视力受损的用户都易于识别和点击。
增强表单组件的吸引力和时尚性没有问题,但不能以牺牲可用性和可达性为代价。设计人员不能随波逐流,而应优先考虑是否能满足用户需求,否则不仅会影响用户体验,还会损害转换率和底线。
原文地址:https://uxmovement.com/forms/why-you-shouldnt-use-solid-or-underlined-text-fields/