分享携程前端团队对于网站Web端表单的交互式设计思考

每当页面上出现表单时，用户就会开始感到头痛，有些用户会直接选择放弃，我想讨论的是如何让用户直接关注他们需要填写的必要项目，以减少不必要信息的干扰。今天的表格中出现了什么形式的必选项？1、以下是一份关于web表单设计的调查报告，结果来自100个引人注目的网站。41%的网站使用标签右对齐（YouTube,Facebook,Metacafe）30%的注册表使用顶部对齐（Behance.net,Wufoo,Tickspot,Mixx,DZone）29%使用标签左对齐（(Digg,Ning,Wykop.pl,43things，StudiVZ）2、表单的应用范围1)注册2)登录3)填写信息(支付，填写订单，个人信息填写等。)4)发布3、必选项显示形式1)以*显示形式a)*在信息标签的左侧b)*在信息标签和填写信息的右侧c)*在信息标签和填写信息的中间位置d)*在信息标签的右侧2)非*必选标志a)非*icon表示形式b)c）标注非必选项d，暗示4、深入思考1)*和非*思考a)*作为用户习惯已经存在多年，现在用户只需要看到文本框前面的*，基本上就知道它是必要的选项，有些网站已经直接隐藏了“*是必要的填充”等解释文本。然后，对于这个用户基本上不需要太多思考就知道的图标，对于需要简化用户思考的表单，它确实比其他一些非“*”icon要好。然后，对于这个用户基本上不需要太多思考就知道的图标，对于需要简化用户思考的表单，它确实比其他一些非“*”icon要好。b）有人会问一张表格，如果都是必填项，有必要用*来标记每个必填项吗？当没有必要的项目标志时，大多数人会有两种不同的理解，一种人会认为这些是必要的项目，另一种人会理解这里是非必要的项目，所以在这种情况下，如果标记必要的项目可以满足不同群体的思考。其他人会质疑，当一个表中的大部分项目是必填项，只有少数项目是非必填项时，我们能否直接在非必填项旁标记非必填项？当一个页面大部分是必填项目，只有少量非必填项目时，如果非必填项目太弱，整个页面将无法区分必填项目或非必填项目；如果非必填项目过于突出，则页面中需要削弱的信息项目反过来突出。相反，用户会关注他们可以填写或不填写的项目，这有点适得其反。所以我还是觉得当页面上的表单都是必填项或者大部分必填项的时候，我们还是会用“*”来标注，这样各种用户就不会有理解错误。当然，在不同的情况下，使用也不同，例如：用户登录认知，通常用户输入用户名、密码等信息，这些项目基本上是必要的，在此认知的基础上，即使没有*也不会造成任何理解问题，所以作为简化原则，通常可以删除*。c）文本框中必须填写的暗示，也是一种比较清晰的标志必须填写的方法，而且还非常节省空间。然而，现在许多网站在文本框中对文本框的填写方法提出了其他暗示。此时，必填项暗示将相对限制使用范围。作为必填项的暗示标志，还有两个致命的缺陷:当我完成填写时，我不知道什么是必填项，什么是非必填项，还有说唱。、checkbox、下拉框的必填性没有很好的解决方案。因此，在使用必填项暗示提示时，也可以在表单形式为文本框，文本框中没有其他暗示提示句时使用。2)*思考a)从这张热点图中可以看出用户对表单的视觉走向，表单类别的视觉走向主要是左标签向右延伸。大多数用户集中在标签位置，用户的填写顺序通常从上到下，从左到右，很少有用户选择跳跃式填写模式。b）*从上述用户的视线流可以看出，*的位置应该在标签附近，并且可以整齐地排列（这可能需要研究），这将更清楚地显示必要的项目。此时，当标签左对齐时，*直接出现在标签前面，这显然更好。然而，由于标签左对齐离表单太远，因此用户可能不知道哪个标签对应哪个文本框，因此此类标签方法不同意出现。所以当标签右对齐时，*出现在标签和文本框中，我认为它比前一个舒适得多。不仅使标签项、标志和文本框非常接近，而且*的位置也可以成为一条直线对齐。如果*出现在文本框或其他项目的后面，用户将不得不跳过视线，他们意识到什么是必要的，什么是不必要的。在宽度有限的情况下，标签顶对齐，这种方法经常出现，也是目前经常看到的一种表现方式。根据之前的理论，为了更好地展示视线流，我个人认为标签前带*会更好，这使得*、最近，标签和文本框的位置也使*能够直线显示。当然，还有一种特殊的例子，即表单一行中有多个填充项。这样，如果位置不当，很容易误解*的位置，如下图所示：在此图中，名称前的*很容易被误解为下拉框*。所以在这个时候，如果*的位置在标签和文本框中可以很好地避免这种误解。虽然目前我们认为标签是右对齐的，*出现在标签和文本框中的方式更好，但也会有特例。例如，如果标签和radio出现radiobox，则如下图所示：