菜单

日期输入表单字段:UX设计指南

通过 安吉莉2017年1月22日

摘要:日期输入字段必须是明确的,并使用正确的manbetx官方网站手机版模式支持任务完成小manbetx官方网站手机版更改可以防止大用户错误。


Formatting a date-entry field may seem like a minor detail; however, even small interactions can draw a process to a standstill if implemented improperly糟糕的日期输入会导致用户感到苦恼或烦恼 - 完全放弃表格的风险Even worse, if the user specifies the wrong date, the entire transaction could be a disaster -- think, for example, how you'd feel if you showed up at the theater excited for a new show, only to discover that you bought tickets for a different day.

必须考虑移动设备和全球受众用户的注意事项,以改善这一小而重要的输入本文讨论日期字段的常见输入模式,错误处理和国际输入。

日期输入模式

日历选择器是一次显示完整日历月的控制元素它们通常显示顶部的一周中的日子,并与桌面或墙壁日历的比喻相匹配。

Google日历应用上显示的移动设备上的日历选择器示例

应使用日历选择器接近现在的事件- 不到一年的时间However, they can be frustrating for users who choose dates far in advance because they require too much navigation to get to the desired input; for these users, it would be faster to simply type the year 

日历选择器对于选择日期范围特别有用在这些情况下,他们经常并排显示两个月。

实例/版本%20Examples / Expedia的%20Return%20-%20Highlight.png
Expedia使用柔和的蓝色突出显示所选出发和返回日期的日期范围出发日期和退货日期在日历中的颜色不同。
  • 在移动设备上滚动日期选择器很常见,但如果选择器包含许多日期,它们会很烦人In those situations, scrolling in a small space is slow and unproductive; it’s better to allow users to type the date directly.

    在Todoist应用程序中,用户可以使用无限滚动列表输入每个任务的截止日期This is not an issue if the deadline occurs on that Friday or Saturday, as shown below, however, if the deadline is even a few weeks away it is easier for the user to type the date instead (a functionality that the app also provides).

     

    实例/版本%20Examples / Todoist.PNG
    iPhone Todoist应用程序允许用户滚动以及输入日期输入(注意将当前日期表示为“今天:”的好处,如果用户不记得今天的日期,它会消除任何不确定性。)
  • 拆分日期字段,包含月,日和年的下拉列表需要很多不必要的步骤This method increases互动成本通过添加额外的点击和滚动我们建议不要使用这种模式。
    DeviantArt为日期字段的每个部分提供了下拉菜单。
  • 输入日期是日期输入的最基本选项,但在许多情况下它是最有效的选项,特别是当日期距离过去更远时(例如,出生日期)或未来我们建议您允许用户键入日期,即使其他输入方法可用。

日期输入设计指南

  • 对于有限数量的日期选项,请提供适用日期的列表。
    在某些情况下,用户只有几个日期选择例如,Google Express是一种在线购物服务,可让客户在线订购杂货并安排交货时间Google Express提供了一个简短的日期选项列表,而不是提供空白日期字段或无限选项的日历选择器任何不可用的日期都已显示为灰色并已禁用(或者,列表中可能不包含不可用的日期。)
    ../../../Downloads/express-date.PNG
    Google Express提供了一个带有递送选项的下拉菜单无法选择的选项已被禁用并显示为灰色。

    一般情况下,当有超过10个可用日期时,我们不建议使用此方法,因为人们扫描和滚动日期列表会变得很繁琐。

  • 不要求用户输入特殊字符来格式化日期。

    无论用户选择何种格式输入日期(月份,空格,斜线,月份,日期和年份组件之间的点),都应识别其输入而且,最左边的零不应该影响日期在下面的Priceline示例中,日期9-3-17被拒绝,并且09/08/17被接受,但在提交表单之前没有可见的格式要求。

    ../../../Documents/Priceline%20-%20Different%20Formats%20-%20Error%20
    Priceline拒绝了9-3-17的日期,甚至没有提供关于如何正确格式化它的建议相反,它应该接受它并为用户解析它。
  • 适当地报告错误。
    如果用户输入显然是错误的日期,例如11/81/17,则不做任何假设提供用户反馈并提供有关如何解决错误的建议。
  • 删除不合逻辑的日期选项。
    阻止用户选择不合逻辑的日期显然,合理的取决于具体情况:例如,130岁以上的日期对于出生日期不太可能,但对于文件日期来说是完全可以接受的Users should be prevented from entering a return date that takes place before the departure date or that is in the past通过禁用和灰显不可用或不合逻辑的选项来明确选择。
  • 保护用户的工作。
    If the same date information is required in a separate part of the form or later during a task, then don’t make users enter that date twice.
  • 保持日期范围一致。
    避免改变出发和返回对的日期范围例如,如果显示11月至12月的出发时间,请不要移动并显示返回日期范围的12月至1月这种变化可能会被忽视导致用户滑倒通过单击预定日期所在的位置。
    Southwest Airlines shifted the return date range based on the  出发日期  selectionAfter selecting the departure date 8-16-16 from the July–August date range, the return date range changed to show August–September. 
  • 如果您的网站迎合国际用户,您的日期格式应清晰易懂。

    日期输入字段取决于文化,并且可能对习惯于不同格式的用户造成重大问题“10/11/2016”可能意味着112016年10月对美国人,但11月10日来自欧洲的人当manbetx官方网站手机版日期为全球观众输入时,请遵循以下经验法则:

    • 添加标签并分隔字段清楚地说明哪些字段适用于月,日和年。
      ../Google%20Drive/manbetx官网手机登陆/Date%20Input%20Format/Examples/dateandtime.PNG
      此倒计时器将日期组件分开并清楚地标记它们。
    • 拼出这个月的名字把它与日子区分开来。
      ../Google%20Drive/manbetx官网手机登陆/Date%20Input%20Format/Examples/tepwireless.png
      用户可以租用便携式WiFi设备的Tep Wireless网站,列出了本月的名称,以服务其全球受众。
      欧洲之星,en.png
      欧洲之星网站以英语(美国)显示,支持多种语言,但未说明预期的日期格式 Here, the departure date could be read as July 2 or February 7.
    • 几个月使用带有明确拼写名称的日历选择器。

      一些框架,如Bootstrap,提供日历选择器以支持明确的日期选择。

      bootstrap calendar picker.png
      Bootstrap日历选择器拼写出月份的名称,清楚地指出要选择的日期。
      携程旅行网,english.png
      携程英文版的日历选择器没有拼写月份名称用户必须推断月份是在一天之前。

结论

日期输入模式不是相同的实施适合您的上下文的manbetx官方网站手机版模式当manbetx官方网站手机版日期输入字段支持文本输入并考虑您是否有国际受众避免使用含糊不清的manbetx官方网站手机版,因为它们可能会让人们对您的网站感到沮丧和烦恼请遵循这些指南以防止表单放弃和灾难性错误。