資料擷取設計設計指南

簡介

社區健康照護人員看著行動裝置。

填寫問卷是大多數醫護人員使用行動健康應用程式的核心工作。

資料輸入可能很困難,而且容易出錯。我們希望透過結構化資料擷取 (SDC) 程式庫和設計指南,協助您提升資料輸入的使用者體驗,以及擷取資料的品質。

本節涵蓋四個主題:

  1. 版面配置和導覽
  2. 問題和操作說明
  3. 資料擷取
  4. 資料驗證和錯誤訊息

版面配置與導覽

長捲動和分頁式版面配置的風格化檢視畫面。

長捲動和分頁式版面配置

比較長捲動和分頁版面配置。長捲動式表單會在一個頁面顯示 3 個問題,而分頁式表單則只會顯示一個問題。
長捲動版面配置 (左) 和分頁版面配置 (右)。

Android FHIR SDK 提供兩種版面配置選項:

  1. 長捲動 (預設)
  2. 分為多頁

長捲動問卷會在單一頁面顯示所有問題,使用者可捲動至各個問題。

分頁問卷調查會將內容顯示在不同頁面。相關問題或輸入欄位可以分組顯示在同一頁面。頁面底部的「返回」和「下一個」按鈕可切換頁面。

瞭解如何在 GitHub 上將問卷調查分頁

您應該選取哪種版面配置?

每種版面配置選項各有優缺點。以下是各版面配置類型的屬性,供您選擇要使用的版面配置時參考。

長捲動 分為多頁
導覽速度 瀏覽速度更快 瀏覽速度較慢
導航準確度 導覽精確度較低 更精確的導覽
在切換工作後重新聚焦於問題 中斷後難以重新調整方向 中斷後更容易重新調整方向
在造訪後填寫數位問卷 (從紙本複製) 複製文件內容更輕鬆 從紙本複製時較困難
小型螢幕 不適合小螢幕 適合小螢幕
無障礙功能 無障礙功能較差。難以瀏覽。 更適合無障礙功能。螢幕閱讀器、文字轉語音和其他技術可處理的獨立畫面。
提供說明和解釋的空間 較不適合提供指引和說明 更適合提供指引和說明

長捲動

問卷調查,問題標題前方顯示數字。
建議做法:為問題編號
為問題編號,方便在單一頁面版面配置中瀏覽。
比較問題標題的字型大小。長捲動為 16 像素。分頁為 28 像素。
建議:調整字型大小
使用長捲動時,縮小問題標題的字型大小,讓畫面上顯示更多內容。示例:長捲動為 16 像素。 分頁為 28 像素。

分頁

分頁問題「他們住在哪個州?」,並提供下拉式選單。
建議:每頁一個問題
鍵盤、下拉式選單和其他元件會佔用頁面空間,因此建議每頁只放一個問題。
分頁地址欄位,畫面未顯示底部欄位。
不要 - 隱藏不需捲動位置以下的內容
不需捲動位置以上的內容應可見。
多個文字欄位會歸為一個問題。問題標題為
            替代聯絡人,並以姓名、關係和電話號碼做為輸入欄位。
建議做法:將相關內容歸為一個問題
範例:這三個文字欄位都與備用聯絡人資訊相關,因此歸為同一頁。
同一頁面上的問題不相關。第一個問題是保險涵蓋範圍,第二個問題是先前的健康狀況。
不要 - 將不相關的內容分組
避免在同一網頁上將不相關的內容分組,以免造成混淆。

進度指標

進度指標會顯示問卷的填寫進度。

在冗長的問卷中加入進度指標,協助使用者瀏覽及查看進度。進度指標會顯示問卷中的位置,以及還需完成多少內容。

進度指標位於頂端,問卷標題下方。
建議做法:長捲動版面配置
將錨點置於問題上方頂端,確保即使捲動畫面也能看見。
位於底部的進度指標,導覽按鈕上方。
適用於分頁版面配置:
可改為放置在底部,位於「返回」和「繼續」按鈕上方。使用這個版面配置時,您也可以顯示使用者目前所在的頁面。

導覽按鈕 (返回、下一步) 會固定在問卷調查底部。在無限捲動或分頁問卷的最後一頁,下一個按鈕會標示為「提交」。

按鈕位置應保持一致,並一律使用標示動作的有效按鈕,例如返回和下一步。

導覽按鈕已啟用。藍色填滿的「下一步」按鈕。
Do — Active buttons
Always display active buttons, even if forms are incomplete. 輕觸「下一步」後,顯示彈出式對話方塊,內含填寫遺漏欄位或修正驗證錯誤的說明。
「下一步」按鈕已停用。灰色填滿的「下一步」按鈕。
請勿使用:停用按鈕
停用按鈕會讓使用者難以瞭解如何修正問題。
「下一步」按鈕只有箭頭圖示,沒有文字說明。
錯誤:僅顯示圖示的按鈕
請勿使用僅顯示圖示的按鈕。請務必為按鈕加上描述性動作標籤。

問題和指示

附註的問卷調查頁面,顯示問題和說明元件。
本節將介紹這 9 個元件,以及如何在分頁問卷中合併使用這些元件。
  1. 問卷標題。
  2. 進度指標。
  3. 群組標題。
  4. 問題標題。
  5. 操作說明。
  6. 輸入欄位。
  7. 輸入格式。
  8. 必填欄位。

群組標題

群組標題:顯示在問題標題上方的文字標題。

使用群組標頭將類似問題分組。只有在群組標頭可提供實用資訊時才使用。

群組標題為「病患病史」。
建議做法:簡短名稱
使用簡短名稱將類似問題分組。例如:與病史相關的所有問題都會歸類在同一組。
群組標題是個人資訊和生活方式資訊。
請勿使用長標題
避免使用複雜或超過一行的長標題。

題目

問題標題會簡要說明要求提供的資訊。 問題標題在頁面上的字型最大,可吸引使用者目光,讓他們注意到問題。

每個頁面或問題都應有問題標題。問題標題應簡短或以問句呈現。

問題名稱為出生日期。
建議做法:簡短的問題標題
簡短的標題可讓使用者更輕鬆閱讀。
問題標題為「你的出生日期為何?」你是在哪個城市出生的?
不要 - 長問題標題
避免問題過長,或將兩個問題巢狀排列在一起。
沒有題目。
請勿 - 沒有問題標題
請務必加入問題標題,方便使用者瞭解需要輸入哪些資訊。

操作說明

「說明」是顯示在問題標題下方的選填文字欄位。

在「說明」欄位中,說明相關指示,例如問題是否為必填、可選取幾項 (一項或多項),以及使用者無法填寫所有資訊或回答問題時應如何處理。

操作說明:請選取一項。必填問題。
Do — Explain what is required
Use instructions field to inform if a question is required and how many selections can be made.
操作說明:如果不知道確切的出生日期,請勾選「不知道確切的出生日期」核取方塊。
建議:說明如何處理特殊情況
提供操作說明,讓使用者瞭解遇到無法填寫所有欄位等情況時該怎麼做。
說明:替代聯絡人會在緊急情況下使用,可以是近親 (例如伴侶、母親、兄弟姊妹)。
Do — Explain context or definitions
Use instructions to provide additional context or definitions for terms used in the question title.

標籤文字

標籤文字會向使用者說明文字欄位或下拉式選單要求提供哪些資訊。選取欄位後,標籤文字會從文字欄位中間移至頂端。

每個文字欄位下拉式選單方塊都應有標籤。標籤文字應簡短、清楚且完全可見。

標籤文字:名字。
正確做法:保持精簡
標籤文字應簡短、清楚且完全可見。
標籤文字:輸入用戶端名稱。
請勿:冗長
標籤文字不應過長、遭到截斷或佔用多行。
沒有標籤文字。
錯誤做法:沒有標籤
請務必為文字欄位加上標籤,讓使用者知道要輸入哪些資訊。

輸入格式

文字欄位下方會顯示「EntryFormat」EntryFormat,告知使用者必須輸入的資料格式。錯誤訊息會顯示在 EntryFormat 欄位中,並取代現有的 EntryFormat 指令。

日期、電話號碼、單位和整數請使用 EntryFormat。

日期格式:dd/mm/yyyy。
建議做法:使用 EntryFormat
在欄位下方顯示日期格式,並加入描述性片語。
沒有日期格式。
請勿顯示格式
不顯示資料格式可能會導致資料輸入錯誤。
「心率」文字欄位下方會顯示「輸入格式」:正常範圍:60-100 bpm。「血氧濃度」文字欄位下方會顯示「輸入格式」:正常範圍:95% 至 100%。
建議:顯示正常範圍
輸入醫療範圍時,請提供正常範圍的範例。這有助於使用者找出錯誤或超出範圍的數字。

必填欄位

必填欄位表示使用者必須填寫該欄位,否則無法繼續。

如要指出欄位為必填,請在問題標題結尾顯示星號 (*)。在說明欄位中加入「必填問題」,因為並非所有人都知道星號 (*) 代表什麼。如果沒有問題標題,請在標籤文字中顯示星號 (*)。

問題標題後方有星號,且下方說明中包含必填問題。
Do — Written explanation
Show the field is required with asterisk (*) and include written instructions that indicate `required question.` Many are unfamiliar with what the asterisk(*) means and would benefit from the explanation.
問題標題後方有星號,但沒有書面說明星號的意義。
請勿 - 沒有說明
請勿只顯示星號 (*),而未說明其意義。
問題標題後方的星號和必填問題會顯示在下方說明中。
建議:本地化術語
使用使用者最熟悉的術語。示例:「必要」可能是較為人熟知的用語,在某些國家/地區會用來取代「必填」。
不得使用星號。說明中會顯示選填問題。
請改為指出選填問題
如果大部分問題都是必填,請改為指出選填問題。
標籤文字後方加上星號。「輸入格式」欄位會顯示必填問題。
Do — Show asterisk in label text instead
If there's no question title show the asterisk in the label text.

說明

問題標題旁會顯示說明圖示。輕觸圖示後,畫面上會顯示說明資訊方塊,內含其他資訊。再次輕觸該圖示,即可關閉說明資訊方塊。

這是選用元件。僅在有助於顯示額外資訊時使用,這些資訊不一定需要隨時顯示。

說明:季節性流感疫苗也稱為流感免疫接種。
建議:在說明方塊中顯示選用資訊
使用說明提供使用者可能只需要查看一次的資訊,或提供額外資訊。
說明:請選取一項。
請勿隱藏說明方塊中的操作說明
請勿在說明方塊中隱藏應向所有人顯示的操作說明。

資料擷取

八個資料擷取元件:文字欄位、日期挑選器、下拉式選單、滑桿、單選、布林值選項、複選和開放式選項。
Android FHIR SDK 中的八個主要資料擷取元件。

各元件的使用時機

資料輸入類型 布林選項 單選 選擇題 開啟選項 下拉式選單 日期挑選器 文字欄位 滑桿 自動完成
選取「是」或「否」
請選取一個選項
注意
選取多個選項
注意
文字
日期
Numbers
注意

文字欄位

文字欄位表示使用者可以輸入資訊。

如果問卷受訪者需要輸入文字,例如姓名、電話號碼或地址,請使用文字欄位。如果可以使用預先填入的選項 (單選或複選),請盡量避免需要輸入文字 (鍵盤) 的資料輸入方式。

在 material.io 上進一步瞭解文字欄位

問題標題:登記新成員。文字欄位 1:名稱。文字欄位 2:電話號碼。
建議:使用文字欄位輸入不重複的資料
使用文字欄位輸入需要打字的不重複字詞或數字。
問題名稱:看診原因?文字欄位:說明原因
不要 - 限制使用自由文字回覆
如果可以改用多選、下拉式選單或單選,請避免使用自由文字回覆。

單選和布林值選項

單一選項布林選項是選取控制項,當使用者需要從選項中選取一個選項時,會顯示為圓形按鈕。

如果只有「是」或「否」兩種選擇,請使用布林值選項。否則請使用單選元件。如果清單中有超過 10 個選項,請使用下拉式選單,而非單選。如果選項很多,下拉式選單會更密集,也更容易瀏覽。

問題標題:這是他們第一次造訪嗎?布林值選取選項為「是」和「否」。
Do — Boolean choice
Use Boolean choice when the options are 'yes' and 'no'.
問題標題:你的最高學歷為何?
            單選題選項包括:1. 不知道 2. 無學歷

            3.  小學 4. 中學。
單選
使用者只能從清單中選取一個選項時,請使用單選。
單選清單,顯示很長的州/省清單。顯示第 23 到 27 個狀態。
不要 - 非常長的清單
避免為非常長的清單 (10 個以上) 使用單選題,請改用下拉式選單。

日期挑選器

使用者可以透過日期挑選器和鍵盤輸入日期。輕觸日曆圖示即可啟動日曆日期選擇器。

請只使用日曆日期挑選器,選取接近今天的日期,例如上次月經來潮或下次就診日期。否則,請優先使用鍵盤輸入日期,例如生日。

出生日期。鍵盤日期輸入功能已啟用。文字欄位方塊右側的日曆圖示。核取方塊已勾選,表示日期為約略日期。
Do — Both entry options
For entering dates enable both keyboard entry (tapping text box) and calendar date picker (tapping icon).
日期挑選器的日曆檢視畫面。
不要 - 僅避免使用日曆
請勿只啟用日曆日期挑選器做為生日的輸入方式。難以瀏覽特定月份和年份。

下拉式選單可讓使用者從多個選項中選擇。使用者開始輸入內容時,系統會根據輸入內容篩選選項。這有助於使用者從長長的清單中快速找到合適的選項。

如果選項清單很長 (超過 10 個選項),下拉式選單單選的絕佳替代方案,因為佔用的空間較少。

州/省清單的下拉式選單 (A 到 F)。
適用情況:長清單
如果選項清單很長,請使用下拉式選單選取其中一個選項, 例如選取州或城市。
年齡下拉式選單,列出 1 到 6 的數字。
不要 - 輕鬆輸入時
如果輸入內容比捲動瀏覽所有選項更簡單,請避免使用下拉式選單,例如輸入年齡。

選擇題

複選題是一種選取控制項,當使用者可以從選項清單中選取多個項目時,會顯示為核取方塊。

如果使用者只能從預先決定的選項清單中選取,請使用多項選擇。如果使用者可以自行新增自由回應,請改用開放式選擇元件。在「instructions」(指示) 欄位中輸入「Select all that apply」(選取所有適用選項),讓使用者知道可以選取多個選項。

問題標題:你今天造訪這個網站的原因為何?顯示四個核取方塊和選項,每一列各一個。
請執行:每列選取一個選項
預設外觀是核取方塊周圍的容器,可清楚顯示可輕觸的區域。
問題標題:今天造訪的原因。顯示六個核取方塊和選項,每列兩個。其中兩個選項的部分文字遭到截斷。
不要 - 每列多個選項
避免每列顯示多個選項,因為手機螢幕大小和文字大小各不相同,文字可能會遭到截斷。

開啟選項

開放式選擇與多項選擇類似,但使用者可以選取「其他」並輸入任意文字。

如果選項清單是預先設定,但使用者可以新增其他選項,請使用「開放式選項」。如果大部分選項都是已知的,但您預期部分使用者會選取「其他」,因為提供的選項都不適用,請使用開放式選擇

已選取「其他」。用於新增任意文字的文字欄位已啟用。
            鍵盤會顯示。
建議使用:收集更準確的資料
如果準確收集資料非常重要,且沒有適用的預先定義選項,請使用這個選項。例如:職業。
問題標題:還有其他意見嗎?有三個選項:是、否和其他。已選取「其他」。用於新增任意文字的文字欄位處於啟用狀態。
不要 — 如果所有回覆都是其他
如果大多數回覆都需要選取「其他」,請避免使用。在這種情況下,請改用文字欄位或段落欄位。

滑桿

滑桿可讓使用者從多種不同的值中選擇。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. 請選取一個項目。
Do — Clearly describe how to fix error
Explain why there’s an error (required question) and what can be done to fix it (select one.)
錯誤訊息為「Error」。
請勿只寫「錯誤」
只顯示「錯誤」的錯誤訊息無法協助使用者瞭解如何修正錯誤。
出生日期。輸入的日期為 22/33/4444。錯誤訊息為「Wrong date format」(日期格式錯誤)。格式必須為 dd/mm/yyyy。
Do — Explain how to fix the error without blame
Example: "Wrong date format. 格式必須為「dd/mm/yyyy」。
出生日期。輸入的日期為 22/33/4444。錯誤訊息為「您輸入的日期格式錯誤」。
不要 - 指責使用者
避免在錯誤訊息中指責使用者,例如「你輸入的日期格式有誤」。
錯誤訊息,紅色文字前方有圖示,顯示「必填問題」。選取一或多個選項。核取方塊容器會顯示紅色外框。
正確做法:多種提示
使用顏色、圖示和文字,告知使用者發生錯誤。
沒有錯誤訊息或圖示。核取方塊容器會以紅色外框標示,
            這是唯一顯示錯誤的指標。
請勿只依賴顏色
為支援常見的視障問題 (例如紅綠色盲),請避免只依賴顏色傳達錯誤訊息。
核取方塊容器會顯示紅色外框,且每個容器後方都會顯示一個錯誤圖示。畫面會顯示 3 個圖示。
不要 - 過度使用圖示
通常一個圖示就夠了。請勿過度使用圖示來傳達錯誤訊息。