UX 和 HTML5：讓我們幫助用戶填寫您的移動表單（第 2 部分）
已發表: 2022-03-10在第二部分中，我想更多地關注移動特定的功能。 例如，HTML5 為我們帶來了許多非常酷的功能來幫助用戶填寫移動表單並格式化他們的數據。 我們將詳細了解 HTML5 屬性如何為您提供幫助。 然後，我們將超越“經典”表單元素，了解如何使用相機、地理定位和指紋掃描儀等移動功能，真正將您的移動表單體驗提升到網站和原生應用程序的新水平。
幫助用戶使用 HTML5 格式化內容
在本系列的第一部分，我們看到了一些關於如何顯示字段的一般建議。 現在是時候更深入地了解幾行精心設計的 HTML5 代碼如何改進您的移動表單了。
HTML5 移動優化的優點
HTML5 為優化移動和触摸設備的表單打開了一個無限可能的世界。 許多有趣的新輸入類型可以觸發不同的鍵盤來幫助用戶。 我們還可以通過直接在瀏覽器中捕獲媒體來做一些有趣的事情。
輸入數值數據
input type= number
HTML5 <input type=number>屬性將輸入字段限制為數字。 它有一個內置的驗證系統，可以拒絕任何不是數字的東西。
在某些桌面瀏覽器中，此輸入在右側顯示有小箭頭，用戶可以單擊以增加數字。 在移動設備上，它會打開一個帶有數字的鍵盤，從而減少拼寫錯誤和表單驗證錯誤。 輸入的外觀和感覺取決於操作系統。
輸入應該允許小數和負數（但很少有鍵盤尊重這一點）。 正如 W3C 規範中所解釋的，“確定是否使用 type=number 的一種簡單方法是考慮輸入控件是否有一個旋轉框界面（例如，帶有'向上'和'向下'箭頭）是否有意義”。 這意味著輸入不應用於信用卡或區號。
pattern和inputmode屬性
要為您的數字輸入添加一些限制，您可以使用pattern屬性來指定要控制值的正則表達式。
這是它的樣子：
<input type="number" name="quantity" pattern="[0-9]*" inputmode="numeric" />您可以使用此模式在 iPhone（但不是 iPad）上調出大按鈕數字鍵盤。 此鍵盤沒有減號或逗號，因此用戶無法使用負數和小數。 此外，他們無法在此處切換回另一個鍵盤，因此在使用時要小心。
另外，請注意，模式可以應用於任何其他類型的輸入。
僅使用此模式不適用於大多數 Android 手機。 您仍然需要input type=number和屬性的組合才能完成這項工作。
input type=number 、 pattern和inputmode的 Android 和 iOS 演示。 （大預覽） inputmode
如果您只想觸發移動數字鍵盤但不想處理type=number和pattern混亂，您可以使用文本輸入並應用 inputmode=numeric 屬性。 它看起來像這樣：
<input type="text" name="quantity" inputmode="numeric" />不幸的是（在撰寫本文時），只有 Chrome 67 移動版支持此功能，但它應該在沒有標誌的情況下到達 Chrome 桌面 66。
要了解有關如何在表單中輸入數字的更多信息，請閱讀“我想輸入一個數字”。
input type=tel
如果希望用戶輸入電話號碼，可以使用輸入 type=tel。 正如您在下面的屏幕截圖中看到的，它在 iOS 的鍵盤上觸發與上述模式屬性相同的數字。 由於世界各地電話號碼的複雜性，這種輸入類型沒有自動驗證。
input type=tel （大預覽）輸入日期
即使它們在技術上是數字數據，日期也應該有自己的部分。 有幾種用於輸入日期的 HTML5 輸入類型。 最常用的是input type=date 。 它將在支持的瀏覽器中觸發日期選擇器。 日期選擇器的外觀取決於瀏覽器和操作系統。 要了解有關瀏覽器如何呈現input type="date"的更多信息，我建議您閱讀“讓input type=date變得複雜”。
input type=date的日期選擇器（大預覽） 還有type=week選擇一周， type=time輸入時間（最多小時和分鐘）， type=datetime-local選擇日期和時間（使用用戶的本地時間）。 這麼多選擇！
例如， input type=date適用於預訂界面。 不過，您可能有一些需求需要您構建自己的日期選擇器（正如我們在合理默認值部分中已經看到的那樣）。 但是如果您需要一個日期選擇器並且不想將整個 JavaScript 庫帶入網站來完成這項工作，那麼input type=date始終是一個不錯的選擇。
然而，有時不使用type=date作為日期會更好。 讓我們以出生日期為例。 如果我出生於 1960 年（我不是——這只是一個例子），如果我從 2018 年開始，我需要點擊很多次才能選擇我的出生日期。在 Android 上，我最近發現如果我按下年份在選擇器中，我得到了一種多年來的下拉輪。 好一點，但它仍然需要大量的滾動。
一位用戶在 Twitter 上告訴我：
“我出生於 1977 年，可以確認煩惱。滾動花費的時間越多，您就會感覺越老 :-(”
所以，也許出生日期不是日期選擇器的最佳人選。
URL、電子郵件、電話和搜索
手機隱藏了一些其他的鍵盤和輸入優化優點，可以增強用戶填寫表單時的體驗。 正如他們所說，魔鬼在細節中。
使用input type=url字段將在移動設備上調出優化的鍵盤，可以直接訪問/ （斜杠鍵）。 根據操作系統，您還可以快速訪問公共頂級域，例如下面屏幕截圖中的.fr 。 如果長按此按鈕，將出現其他頂級域的快捷方式。 這還帶有自動瀏覽器驗證，可檢查 URL 的格式是否有效。
input type=url鍵盤（大預覽） 輸入 type=emailfield 會打開一個電子郵件優化鍵盤，可以快速訪問@符號。 此輸入需要在字段中某處出現@才能有效。 這是它所做的唯一驗證。
input type=email鍵盤（大預覽）輸入 type=search 字段會調出一個搜索優化的鍵盤。 用戶可以直接從鍵盤上的按鈕啟動搜索。 還有一個小十字可以清除該字段並鍵入一個新查詢。
input type=search鍵盤（大預覽）範圍和顏色
我們研究的最後兩種輸入類型並沒有特別針對移動設備進行優化，但是通過使用它們，我們可以避免加載繁重的自定義 JavaScript 庫，這對移動用戶來說是個好主意。
input type=range 提供了一個可視化的 UI 滑塊來輸入數字。 此控件的 UI 取決於瀏覽器。
input type=color 為用戶輸入顏色值提供了一種簡單的方法。 在許多瀏覽器實現中，它帶有一個顏色選擇器。
input type=range和input type=color （大預覽）HTML 媒體捕獲：拍攝和上傳圖片並錄製聲音
我記得 iPhone 3 的時代，出於安全原因，Apple 甚至不允許在網站上使用簡單的input type=file 。 那些時代早已一去不復返了。 使用 HTML 媒體捕獲 API，現在可以訪問設備的不同傳感器。 我們可以拍攝照片和視頻，甚至可以直接在瀏覽器中錄製語音。
accept 屬性允許您指定在輸入中接受哪種媒體：音頻、圖像、視頻。 例如，用戶可以讓瀏覽器直接訪問他們的相機。
代碼如下所示：
<input type="file" accept="image/*"> 
accept屬性設置為image 。 瀏覽器詢問我是要直接訪問相機還是設備上的文件。 （大預覽） capture 屬性允許您指定首選的捕獲模式。 如果在accept屬性之上添加capture屬性，可以讓瀏覽器直接打開攝像頭或錄音機。
<input type="file" accept="image/*" capture> // opens the camera> <input type="file" accept="video/*" capture> // opens the camera in video mode <input type="file" accept="audio/*" capture> // opens the voice recorder 
有關如何在瀏覽器中直接使用媒體的更多詳細信息，請閱讀我關於移動瀏覽器的秘密力量的文章中的“直接在瀏覽器中訪問和處理圖像、視頻和音頻”部分。
HTML5 Autos：自動更正、自動完成、自動填充、自動大寫和自動對焦
HTML5 帶有大量自動屬性。 為了增強移動體驗，您需要了解哪些可以自動化，哪些不能自動化。 以下是一些一般的經驗法則：
- 對字典薄弱的事物禁用自動更正：電子郵件地址、號碼、姓名、地址、城市、地區、區號、信用卡號。
- 在適當的情況下禁用電子郵件字段和其他字段的自動大寫（例如，網站 URL）。 請注意，
type=email在最新版本的 iOS 和 Android 中為您完成這項工作，但對於舊版本或type=email不受支持時，無論如何都要禁用它。 - 您可以將 autocapitalize 屬性設置為
words以自動將用戶鍵入的每個單詞的首字母大寫。 這對於名稱、地點等可能很有用，但同樣要小心並對其進行測試。
input type=email作為電子郵件地址。 如果你不這樣做，至少禁用自動大寫。 沒有電子郵件地址以大寫字母開頭。 （大預覽）- 對於
input type=tel，設置autocomplete="tel"。 - 當用戶加載頁面時，您可以使用
autofocus將焦點賦予控件元素。 但僅僅因為用戶打開了“聯繫人”頁面，並不意味著他們已經準備好直接跳轉到表單的第一個字段。 因此，再次明智地使用它。
autofocus在用戶點擊按鈕後直接將其帶到第一個字段。 （大預覽）如果您想要更多自動完成選項，可以在 WhatWG Wiki 上找到完整列表。 只要確保你使用正確的。 實施、測試和再次測試。
HTML5 表單驗證
我不會在這裡詳細介紹技術細節，但您應該知道 HTML5 具有用於許多字段的內置表單驗證 API。 如果您不想使用 JavaScript 庫來顯示內聯驗證消息，那就太好了。 以下是作為 UX 設計師需要了解的有關 HTML5 表單驗證的主要內容：
- 驗證消息是一個瀏覽器控件。 你不能在 CSS 中設置樣式，而且每個瀏覽器都不一樣。
- 您可以使用
setCustomValidity在 JavaScript 中更改消息的文本。 - CSS3 為 HTML 表單驗證提供了 :invalid、:valid 和 :required 等偽類。 這些會在模糊時觸發，所以現在幾乎沒用。
在“原生表單驗證，第 1 部分”中，Peter-Paul Koch 詳細介紹了為什麼 HTML 和 CSS 表單驗證目前並沒有真正讓表單變得更好。
離線支持保存用戶數據
很多事情都可能出錯，尤其是在移動設備上。 錯誤發生。 用戶可能會誤按瀏覽器中的後退按鈕並丟失所有數據。
如果用戶回到頁面，最好再次顯示他們的數據。 如果瀏覽器崩潰或用戶關閉選項卡，情況也是如此。 您可以將用戶的數據存儲在本地或會話存儲中，以確保在出現問題時不會丟失任何內容。 Geoffrey Crofte 編寫了一個 JavaScript 庫來幫助您。
如果在用戶提交表單時連接丟失，他們也可能會丟失數據。 為避免這種情況，您可以結合使用** HTML5 離線 API** 和Service Workers API來：
- 將數據存儲在緩存中，
- 嘗試在連接恢復時再次自動發送。
要了解如何編寫代碼，請查看有關“離線友好表單”的文章。
移動設備功能可以將體驗提升到一個新的水平
在第 1 部分中，我們堅持使用基本的通用 HTML 表單元素和屬性來增強移動表單。 但移動設備的功能現在遠遠超出了顯示 HTML、CSS 和 JavaScript 網頁的範圍。 這些小設備配備了很多傳感器。 我們將能夠在本機應用程序和網絡上使用其中的許多功能，從而使我們用戶的生活變得更加輕鬆。
檢測用戶的位置
在上一節中，我寫了關於預先填寫地點和地址的信息。 這是一個好的開始。 我們可以更進一步。 我們可以檢測它，而不是要求用戶輸入位置。 滿足 web 的地理定位 API。 還有原生的 iOS、Android 和 Windows Phone 地理定位 API。
Citymapper 是一個幫助用戶計劃旅行的網站和應用程序。 當用戶進入第一個字段時，他們會看到“使用當前位置”選項。 如果他們選擇它，則會要求他們允許瀏覽器訪問他們的地理位置數據。 這是地理定位 API。 然後瀏覽器自動完成它找到的位置，用戶可以繼續到目標字段。 本機應用程序的工作方式幾乎相同。
請求用戶許可時要聰明
您可能已經在之前的視頻中註意到，我必須同意授予對 Citymapper 網站的訪問權限。 在瀏覽器中，用戶逐個網站、逐個 API 處理權限。
您還需要注意如何請求許可。 如果您問得太早，用戶可能會拒絕訪問地理位置、通知或其他 API。 如果他們不明白您為什麼需要許可，他們也可能會拒絕。 你有一次機會； 明智地使用它。 在那之後，幾乎不可能恢復。 我是一名 Android 高級用戶，當我想重置我授予網站的權限時，我什至必須在瀏覽器中搜索選項。 想像一下您的用戶將遇到的麻煩。
以下是有關在網絡上請求權限的一些一般建議：
- 不要成為令人毛骨悚然的地理位置或通知跟踪者：不要在用戶到達您的網站後立即請求許可。 他們可能還不知道您或您的服務。
- 讓用戶發現您的網站和服務。 然後，在上下文中請求許可。 如果您想訪問他們的位置，請僅在需要時詢問他們（Citymapper 就是一個很好的例子）。
- 解釋您為什麼需要許可以及您將如何使用它。
如果您想更進一步，Luke Wroblewski（是的，又是他）製作了一個很好的視頻來幫助您完成請求許可的過程。
更好的結帳體驗
表單的一大改進領域是整個結帳支付體驗。 同樣，設備上的傳感器可以使這成為一種幾乎無痛的體驗。 唯一的痛苦將是用戶花費的金額。
iOS 信用卡掃描儀
在上一節中，我寫了基於用戶先前輸入的信用卡自動檢測和自動完成功能。 這仍然意味著用戶必須至少輸入一次他們的信用卡數據。
Apple 通過其信用卡掃描儀將其提升到了一個新的水平。 自 Safari 中的 iOS 8 以來，用戶可以使用他們的相機來掃描和自動完成他們的信用卡信息。 要執行此魔術，您需要添加自動完成cc-number屬性和一些名稱以將其標識為信用卡字段。 蘋果官方並沒有太多關於它的信息，但是有人做了一些測試，並將結果放到了 StackOverflow 上。
Safari 還具有自動填充選項，用戶可以使用它來添加他們的信用卡，從而允許他們在多個網站上重複使用它。
使用 Google Pay API 讓結賬更進一步
谷歌推出了類似的東西：谷歌支付 API。 在網站上實施時，API消除了手動輸入支付信息的需要。 它更進一步：它還可以存儲帳單和送貨地址。
用戶會在 Chrome 中看到一個對話框，其中顯示了他們存儲的各種付款信息。 他們可以選擇使用哪一個，並且可以通過對話直接付款。
Payment Request API 的標準化版本目前是 W3C 候選推薦。 如果這在瀏覽器中實現，它將允許用戶使用單個按鈕進行結帳，該按鈕將請求 API。 此後的每一步都將由本機瀏覽器對話框處理。
使認證更容易
在大多數情況下，手機是人們通常不與他人共享的個人設備。 這為身份驗證開闢了一些有趣的機會。
魔術鏈接
我使用密碼管理器。 我不知道我 99% 的密碼。 它們都是隨機生成的。 為了登錄新的 Slack 工作區，我必須：
- 打開我的密碼管理器，
- 輸入我的主密碼，
- 搜索工作區，
- 將密碼複製並粘貼到 Slack 應用程序中。
這是一個乏味的過程，但 Slack 足夠聰明，可以提供更好的選擇。
許多用戶在手機上同步郵件。 斯萊克明白這一點。 當您在應用程序中添加新的 Slack 工作區時，您可以使用密碼登錄或詢問“魔術鏈接”選項。 如果您選擇後者， Slack 會向您的郵箱發送一個魔術鏈接。 打開郵件，點擊綠色的大按鈕，然後——ta-da！ ——您已登錄。
在幕後，這個神奇的鏈接包含一個身份驗證令牌。 Slack 應用程序會捕捉到這一點並在不需要密碼的情況下對您進行身份驗證。
指紋智能識別
我幾乎所有的銀行業務都是在我的移動設備上完成的。 在登錄我的銀行賬戶時，我的法國興業銀行應用程序和德國 N26 應用程序之間存在天壤之別。
在法國興業銀行，我有一個登錄字符串和一個密碼。 我可以讓應用記住登錄字符串，它是 10 個隨機數字。 我不記得那個了； 我為此使用密碼管理器。 我仍然必須記住並在定制的鍵盤上輸入六位數的密碼。 當然，每次我登錄時，數字的位置都會改變。安全性——是的，我知道。 另外，我必須每三個月更改一次此密碼。 上次我被迫更改密碼時，我做了大多數人都會做的事情：選擇幾乎相同的密碼，因為我不想記住另一個六位數的數字。 當然，我很確定我會記住它，所以我沒有在我的密碼管理器中輸入它。 菜鳥失誤。 兩週後，我嘗試登錄。當然，我忘記了。 我嘗試了 3 次失敗，然後我的帳戶被阻止了。 幸運的是，我只使用這個帳戶進行儲蓄。 在應用程序中，您可以要求輸入新密碼。 銀行花了將近一周的時間通過紙質郵件向我在盧森堡的家庭地址發送了一個新的六位數密碼。 是的。
另一方面，N26 使用我的電子郵件地址作為登錄字符串。 我記得沒有密碼管理器。 當我想登錄時，我將手指放在 Xperia 手機的開始按鈕上，就是這樣。 在後台，我的手機會掃描我的指紋並對我進行身份驗證。 如果這不起作用，我可以回退到密碼。
相同的設備，兩個應用程序，兩種完全不同的體驗。
Android 和 iOS 上越來越多的應用程序現在為用戶提供了使用指紋進行身份驗證的可能性。 不再需要密碼——這是一個有趣而優雅的解決方案。
當然，人們對此表達了一些安全擔憂。 對於美國國家標準與技術研究院 (NIST)，生物識別技術被認為不夠安全。 它建議將生物識別技術與第二個身份驗證因素結合起來。
指紋傳感器也可以被欺騙——是的，就像在間諜電影中一樣。 您是否聽說過飛機被迫降落，因為一名婦女在丈夫睡覺時用拇指解鎖手機後得知丈夫的不忠？
面部識別和麵部識別
2018 年，Apple 推出了帶有全新 Face ID 的 iPhone X。 用戶可以通過面部解鎖他們的 iPhone X。 當然，其他一些 Android 手機和 Windows 平板電腦也更早提出了這個功能。 但是當蘋果推出某些東西時，它往往會變成“一個東西”。 目前，該技術主要用作解鎖手機和計算機的身份驗證。
面部識別技術存在一些相當大的挑戰。 首先，一些算法可以被人物的照片所欺騙，這很容易被破解。 另一個更大的擔憂是多樣性。 面部識別算法往往難以識別有色人種。 例如，一名黑人研究人員必須戴上白色面具來測試她自己的項目。 研究員是 Joy Buolamwini，她在 TED 上就這個問題發表了演講。
一些海關部門還使用一些面部識別軟件來加快邊境處理速度。 它在新西蘭使用，並將在加拿大使用。
我們中的大多數人已經看過足夠多的科幻小說來了解大規模使用面部識別的系統的潛在問題和後果。 這種在解鎖手機的私人空間之外使用的技術可能會引起爭議和恐懼。
谷歌：一鍵註冊
如果用戶擁有 Google 帳戶，他們可以從 Google 的一鍵式註冊中受益。 當訪問網站並提示在內聯對話框中創建帳戶時，用戶無需輸入密碼。 Google 提供了一個基於令牌的安全無密碼帳戶，與用戶的 Google 帳戶相關聯。 當用戶返回時，他們會自動登錄。如果他們將密碼存儲在 Smart Lock 中，他們也會在其他設備上自動登錄。
注意：這是一個有趣的無密碼解決方案。 當然，通過使用它，用戶與穀歌相關聯，並不是每個人都會感到舒服。
結論
當您開始使用移動功能幫助用戶填寫表格時，您可以做很多非常酷的事情。 在構建表單時，我們需要一種移動優先的心態； 否則，我們會卡在我們熟悉的桌面功能上。
同樣，請注意設備的功能：如果傳感器發生故障或用戶拒絕訪問，請始終使用備用解決方案。 避免將這些功能作為這些功能的唯一選項（除非您正在構建依賴於地理位置的地圖應用程序）。
這是兩篇非常長的系列文章的結尾，我在其中為您提供了一些通用的用戶體驗和可用性建議以及最佳實踐。 最後，重要的是您的表單和用戶。 此處描述的某些內容甚至可能不適用於您的用戶——誰知道呢？ 所以，無論你做什麼，都不要相信我（或盧克）的話。 在真實設備上與真實用戶一起測試它。 測量它。 並再次測試。 做一些用戶研究和可用性測試。 用戶體驗不僅與您複製和粘貼的最佳實踐和魔術秘訣有關。 您需要調整配方以使其適合您。
所以，簡而言之：測試它。 在真實設備上進行測試。 與真實用戶一起測試它。