数据捕获设计准则

简介

一名社区健康工作者看着移动设备。

对于大多数使用移动健康应用的医护人员来说,填写问卷是一项核心任务。

数据输入可能很困难,并且容易出错。我们推出结构化数据捕获 (SDC) 库和设计指南,旨在帮助您改善数据输入的用户体验并提高捕获的数据质量。

本部分涵盖了以下四个主题:

  1. 布局和导航
  2. 问题和说明
  3. 数据捕获
  4. 数据验证和错误消息

布局和导航

长滚动布局和分页布局的风格化视图。

长滚动和分页布局

比较长滚动布局和分页布局。长滚动式问卷在一个页面上显示 3 个问题,而分页式问卷在一个页面上显示 1 个问题。
长滚动布局(左)和分页布局(右)。

Android FHIR SDK 提供了两种布局选项供您选择:

  1. 长滚动(默认)
  2. 分页

长滚动问卷在一个页面上显示所有问题,用户通过滚动浏览每个问题。

分页问卷会在不同的页面上显示内容。相关问题或输入字段可以分组显示在一个页面上。返回和下一个按钮固定在页面底部,用于在页面之间切换。

了解如何在 GitHub 上创建分页问卷

您应选择哪种布局?

每种布局选项都有其优点和缺点。下面列出了每种布局类型的一些属性,供您在选择要使用的布局时参考。

长滚动 分页
导航速度 导航速度更快 导航速度较慢
导航的准确性 导航精确度较低 更精准的导航
在切换任务后重新聚焦于问题 中断后难以重新调整方向 中断后更容易重新定位
在就诊后完成数字问卷(从纸质问卷复制) 从纸质文档中复制时更轻松 从纸质文档中复制时难度更大
小屏幕 在小屏幕上效果更差 更适合小屏幕
无障碍功能 无障碍功能效果更差。难以浏览。 提升了无障碍功能。可由屏幕阅读器、文字转语音和其他技术处理的离散屏幕。
用于说明和解释的空间 指南和说明效果更差 更适合用于指导和说明

长滚动

问卷,问题标题前显示数字。
建议 - 为问题编号
为问题编号,以便在单页布局中更轻松地浏览。
比较问题标题字号。长滚动为 16 像素。分页为 28 像素。
建议 - 调整字体大小
使用长滚动时,缩小问题标题的字体大小,以便在屏幕上显示更多内容。示例:长滚动为 16 像素。 分页为 28 像素。

分页

分页问题“他们居住在哪个州?”,带有下拉菜单选择。
建议 - 每页一个问题
键盘、下拉菜单和其他组件会占用页面空间,因此请尽量做到每页一个问题。
分页的地址字段,其中底部字段在屏幕上不可见。
不显示 - 隐藏非首屏内容
内容应显示在首屏上方。
多个文本字段组合成一个问题。问题标题是备选联系人,输入字段包括姓名、关系和电话号码。
做法 - 将相关内容归为同一个问题
示例:以下三个文本字段都与备选联系人信息相关,因此它们被归为同一页。
同一页面上的不相关问题。第一个问题是保险保障范围,第二个问题是既往健康状况。
不要 - 将无关内容归为一组
避免将无关内容归为一组,以免造成混淆。

进度指示器

进度指示器反映了问卷的完成进度。

在长问卷中添加进度指示器,帮助用户浏览并查看进度。进度指示器可显示在问卷中的位置,以及还需完成多少内容。

位于顶部、问卷标题下方的进度指示器。
正确做法 - 长滚动布局
放置在顶部,位于问题上方,并进行锚定,以便即使在滚动时也始终可见。
位于底部导航按钮上方的进度指示器。
可以 - 仅限分页布局
也可以放置在底部,位于“返回”和“下一步”按钮上方。借助此布局,您还可以显示用户当前所在的页面。

导航按钮(返回、继续)固定在问卷底部。在无限滚动或分页调查问卷的最后一页上,下一个按钮的标签为“提交”。

将按钮放置在一致的位置,并始终使用标有操作(例如“返回”和“下一步”)的有效按钮。

导航按钮处于有效状态。带有蓝色填充的“下一步”按钮。
执行 - 活跃按钮
始终显示活跃按钮,即使表单不完整也是如此。点按“下一步”后,显示一个弹出式对话框,其中包含有关完成缺失字段或验证错误的说明。
“继续”按钮处于非活动状态。带有灰色填充的“下一步”按钮。
错误做法 - 无效按钮
无效按钮会让用户难以了解如何解决问题。
“下一步”按钮只有箭头图标,没有文字说明。
错误做法 - 仅含图标的按钮
请避免使用仅含图标的按钮。始终使用描述性操作为按钮添加标签。

问题与说明

已添加注释的分页问卷,显示问题和说明组件。
本部分介绍的 9 个组件的概览,以及这些组件如何在分页问卷中组合使用。
  1. 问卷标题。
  2. 进度指示器。
  3. 群组标题。
  4. 问题标题。
  5. 说明。
  6. 输入字段。
  7. 条目格式。
  8. 必填字段。
  9. 帮助。

群组标题

问题组标题是显示在问题标题上方的文本标题。

使用组标题将类似的问题归为一组。仅当群组标题能提供有用的信息时才使用它。

组标题为“患者病史”。
建议 - 短标题
使用短标题将类似问题归为一组。示例:与患者病史相关的所有问题都归为一组。
群组标题是个人信息和生活方式信息。
不要 - 长标题
避免使用复杂或过长的标题,以免超出单行限制。

问题标题

问题标题简明扼要地描述了所请求的信息。 问题标题在网页上采用最大的字号,以吸引用户关注问题。

每个页面或问题都应有问题标题。问题标题应简短或以问题的形式表述。

问题标题为“出生日期”。
正确做法 - 简短的问题标题
简短的标题有助于用户轻松阅读。
问题标题为“您的出生日期是?”您是在哪个城市出生的?
不建议 - 问题标题过长
避免使用过长的问题或将两个问题嵌套在一起。
没有问题标题。
不建议 - 没有问题标题
请务必添加问题标题,以便用户更轻松地了解需要输入哪些信息。

操作说明

说明是显示在问题标题下方的可选文本字段。

使用 instructions 字段说明相关说明,例如问题是否为必答题、可以选择多少个选项(一个或多个),以及如果用户无法填写所有信息或回答问题,应该怎么做。

说明:请选择一项。必答题。
操作 - 说明需要做什么
使用说明字段告知用户问题是否为必答题以及可以选择多少个选项。
说明:如果确切的出生日期未知,请选中“出生日期未知”复选框。
应做 - 说明在遇到极端情况时应采取的措施
使用说明让用户知道,如果遇到无法填写所有字段等情况,应采取哪些措施。
说明:紧急情况下会使用备选联系人,备选联系人可以是近亲(例如伴侣、母亲、兄弟姐妹)。
操作 - 解释背景或定义
使用说明为问题标题中使用的术语提供更多背景信息或定义。

标签内容

标签文本用于告知用户文本字段或下拉菜单中需要填写哪些信息。选择该字段后,标签文本会从文本字段的中间移到顶部。

每个文本字段下拉框都应有一个标签。标签文本应简短、清晰且完全可见。

标签文本:名字。
正确做法 - 简明扼要
标签文字应简短、清晰且完全可见。
标签文本:输入客户名称。
不要过于冗长
标签文字不应过长、被截断或占用多行。
没有标签文字。
不 - 无标签
请务必为文本字段添加标签,以便用户知道要输入哪些信息。

条目格式

EntryFormat 显示在文本字段下方,用于告知用户需要以特定格式输入数据。错误消息将显示在 EntryFormat 字段中,并替换现有的 EntryFormat 说明。

针对日期、电话号码、单位和整数使用 EntryFormat。

日期格式:dd/mm/yyyy。
正确做法 - 使用 EntryFormat
在字段下方显示日期格式,并添加描述性短语。
没有日期格式。
否 - 无 EntryFormat
不显示数据格式可能会导致数据输入错误。
在“心率”文本字段下方,“输入格式”显示:正常范围:60-100 bpm。在“血氧饱和度”文本字段下方,“输入格式”显示:正常范围:95-100%。
正确做法 - 显示正常范围
输入医疗范围时,请提供正常范围的示例。这有助于用户发现错误或超出范围的数字。

必填字段

必填字段表示用户必须填写该字段,否则无法继续操作。

如需指明某个字段为必填字段,请在问题标题末尾显示星号 (*)。在说明字段中添加“必答题”,因为并非所有人都能清楚地知道星号 (*) 表示什么。如果没有问题标题,则在标签文字中显示星号 (*)。

问题标题后的星号和下方说明中的必答问题。
正确做法 - 文字说明
使用星号 (*) 表明该字段为必填字段,并添加文字说明来表明“必答问题”。许多人不知道星号(*) 的含义,因此说明会很有帮助。
问题标题后有星号,但没有书面说明来解释星号的含义。
错误做法 - 无说明
避免仅显示星号 (*),而不提供任何书面说明来解释其含义。
问题标题后的星号和必答问题如下方说明所示。
要点 - 本地化术语
使用用户最熟悉的术语。示例:“强制性”可能是一个更熟悉的术语,在某些国家/地区会使用它来代替“必需”。
没有星号。说明中会显示可选问题。
改用“可选”来表示问题
如果大多数问题都是必填问题,请改用“可选”来表示问题。
标签文本后的星号。以条目格式字段显示必填问题。
操作 - 在标签文本中显示星号
如果没有问题标题,则在标签文本中显示星号。

帮助

问题标题旁边会显示一个帮助图标。点按该图标后,系统会显示一个包含其他信息的帮助信息框。再次点按该图标可关闭帮助信息框。

这是可选组件。仅在有助于显示不需要始终可见的其他信息时使用。

帮助:季节性流感疫苗也称为流感疫苗。
应做 - 在帮助框中显示可选信息
使用帮助来显示用户可能只需要查看一次或提供额外信息的帮助内容。
帮助:选择一项。
禁止 - 隐藏帮助框中的说明
避免隐藏帮助框中应向所有人显示的说明。

数据捕获

八个数据捕获组件;文本字段、日期选择器、下拉列表、滑块、单选、布尔选择、多选和开放式选择。
Android FHIR SDK 中的八个主要数据捕获组件。

何时使用哪个组件?

数据输入类型 布尔值选择 单选题 单选题 打开选择 下拉菜单 日期选择器 文本字段 滑块 自动补全
选择“是”或“否”
选择一个选项
警告
选择多个选项
警告
文字
日期
Numbers
警告

文本字段

文本字段表示用户可以输入信息。

当用户需要在问卷中输入文本(例如姓名、电话号码或地址)时,请使用文本字段。当可以使用预填充的选择项(多项选择或单项选择)时,限制需要输入文本(键盘)的数据输入。

详细了解 material.io 上的文本字段

问题标题:注册新人员。文本字段 1:名称。文本字段 2:电话号码。
建议 - 使用文本字段输入唯一数据
使用文本字段输入需要输入唯一字词或数字的数据。
问题标题:就诊原因?文本字段:说明原因
不要 - 限制使用自由格式文本回答
避免使用自由格式文本回答,而应使用多项选择、下拉菜单或单项选择。

单选题和布尔值选择题

单项选择布尔值选择是一种选择控件,当用户需要从多个选项中选择一个选项时,该控件会显示为单选按钮。

当有“是”或“否”二元选择时,请使用布尔值选择。否则,请使用单项选择组件。如果列表中的选项超过 10 个,请使用下拉菜单,而不是单选。如果选项较多,下拉菜单会更密集,也更易于浏览。

问题标题:这是他们的首次访问吗?布尔值选择选项为“是”和“否”。
使用布尔值选项 - 布尔值选择
当选项为“是”和“否”时,请使用布尔值选择。
问题标题:您的最高学历是什么?
            单选选项为:1. 不知道 2. 无教育

            3.  小学 4. 中学。
使用单选
当用户可以从列表中选择一个选项时,请使用单选。
单选列表,其中显示了很长的州/省/自治区/直辖市列表。状态 23-27 可见。
不要 - 非常长的列表
避免为非常长的列表(10 个以上)使用单选。请改用下拉菜单。

日期选择器

借助日期选择器,用户可以通过日历日期选择器和键盘输入日期。点按日历图标即可激活日历日期选择器。

仅针对接近当前日期的日期(例如上次月经期或下次就诊日期)使用日历日期选择器。否则,优先考虑通过键盘输入日期(例如出生日期)。

出生日期。键盘日期输入处于有效状态。文本字段框右侧的日历图标。复选框处于选中状态,表示日期为近似日期。
执行 - 两种输入选项
如需输入日期,请同时启用键盘输入(点按文本框)和日历日期选择器(点按图标)。
日期选择器的日历视图。
不要 - 避免仅使用日历
避免仅使用日历日期选择器作为出生日期的输入方法。很难导航到所需的月份和年份。

借助下拉菜单,用户可以从多个选项中进行选择。当用户开始输入内容时,系统会根据输入的内容过滤选项。这有助于用户从长长的列表中快速找到合适的选项。

如果选项列表非常长(10 个以上选项),下拉菜单是单项选择的绝佳替代方案,因为它们占用的空间更少。

用于列出州/省/直辖市/自治区(A-F)的下拉菜单。
推荐做法 - 适用于长列表
当从很长的选项列表中选择一个选项时,请使用下拉菜单, 例如选择州或城市。
年龄下拉菜单,列出了 1 到 6 的数字。
不要 - 在输入很容易时
如果输入内容比滚动浏览所有选项(例如年龄)更简单,请避免使用下拉菜单。

单选题

选择题是一种选择控件,当用户可以从选项列表中选择多个选项时,该控件会显示为复选框。

如果用户只能从预定的选项列表中进行选择,请使用多项选择。如果用户还可以添加自己的自由回答,请改用开放式选择组件。在说明字段中,输入“请选择所有适用的选项”,以便用户知道他们可以选择多个选项。

问题标题:您今天访问的原因是什么?显示了四个复选框和选项,每行一个。
执行 - 每行一个选择
默认外观是复选框周围的容器,以便清楚显示可点按的区域。
问题标题:您今天访问此网站的原因是什么。显示了 6 个复选框和选项,每行 2 个。其中两个选项的部分文字被截断。
不要 - 每行显示多个选项
由于手机屏幕尺寸和文字大小各不相同,因此应避免每行显示多个选项,以免文字被截断。

打开选择

开放式选择题与多项选择题类似,但增加了用户选择其他并输入自由文本的功能。

如果存在预设的选项列表,但用户也可以添加其他选项,请使用开放式选择。如果已知大多数选项,但您预计部分用户会选择其他,因为提供的选项都不适用,请使用开放式选择

选择了“其他”。用于添加自由文本的文本字段处于活动状态。
            键盘可见。
使用 - 用于更准确地收集数据
当需要收集准确的数据,但没有适用的预定义选项时,请使用此值。示例:职业。
问题标题:还有其他补充吗?三个选项:是、否和其他。选择了“其他”。用于添加自由文本的文本字段处于活动状态。
不建议使用 - 如果所有回答都将是“其他”
如果大多数回答都需要选择其他,请避免使用。在这种情况下,请改用文本字段或段落字段。

滑块

滑块可让用户从一系列值中进行选择。Android FHIR SDK 中的滑块是离散滑块。用户可以通过离散滑块从预定范围内选择特定值。勾号可用于指示可用值。避免使用滑块输入数值数据。 请改用文本字段或下拉菜单。

在 material.io 上详细了解滑块

问题标题:客户有几个孩子?选择了数字 4 的滑块。
不建议 - 使用滑块输入特定数字
如果范围较大,请避免使用滑块输入特定值。请改用支持键盘输入的文本字段。

数据验证和错误

数据验证

数据验证会限制可在文本字段中输入的数据类型或值。数据验证可以提高所收集的数据的质量。

使用 EntryFormat 字段可显示格式或值限制。内嵌显示有意义的数据验证错误消息,以便用户立即修正错误。

标签文本:电话号码。输入格式:8 位数字。
Do — Show validation restrictions
Show data validation restrictions upfront so users know how to enter the data.
标签文本:电话号码。条目格式:无。
不显示 - 隐藏验证限制
如果不显示电话号码需要多少位,用户很可能会遇到错误,并且需要更长时间才能完成操作。
输入的日期为 22/33/4444。错误消息:日期格式错误。格式必须为:dd/mm/yyyy。
建议 - 立即显示验证错误
在完成字段填写后立即显示有意义的数据验证错误。错误消息会替换现有的条目格式文本。
对话框。修正以下错误。1. 电话号码。2. 出生日期。
            按钮 1:仍然提交。按钮 2:修正错误。
不要 - 等到提交后
不要等到用户按了“提交”按钮后才首次显示验证错误。

错误

错误消息会在出现问题时提醒用户,并告知用户如何解决问题。

使用颜色、图标和文字来传达错误。

详细了解 material.io 上的错误消息

错误消息为“Required question. 请选择一项。”
正确做法 - 清楚说明如何修正错误
说明出现错误的原因(必答问题)以及可以采取哪些措施来修正错误(选择一项)。
错误消息为“错误”。
错误示例 - 仅显示“错误”
仅显示“错误”的错误消息无法帮助用户了解如何修正错误。
出生日期。输入的日期为 22/33/4444。错误消息为“日期格式错误”。格式必须为:dd/mm/yyyy。
正确做法 - 说明如何修复错误,但不指责
示例:“日期格式错误。格式必须为 dd/mm/yyyy”。
出生日期。输入的日期为 22/33/4444。错误消息为“您输入的日期格式有误”。
不要 - 指责用户
避免使用包含“您”的错误消息来指责用户。示例:“您输入了错误的日期格式。”
错误消息,红色文字前面带有一个图标,显示“必答题。选择一个或多个选项。复选框容器带有红色轮廓。
正确做法 - 多种提示
使用颜色、图标和文字来告知用户存在错误。
没有错误消息或图标。复选框容器带有红色轮廓,这是唯一表明存在错误的指示。
请勿 - 仅依赖颜色
为支持常见的视觉障碍(例如红绿色盲),请避免仅依赖颜色来传达错误。
复选框容器具有红色轮廓,并且每个容器后面都显示一个错误图标。3 个图标可见。
不要过度使用图标
一个图标通常就足够了。不要过度使用图标来传达错误。