Forms are a common way to engage with users and could be a user’s first impression of your product. Since forms aren’t always the user’s favourite thing, it is essential to make filling out forms as easy as possible. Let’s go over a few tips for creating great forms.

表單是與用戶互動的一種常見方式，并且可能是用戶對您的產品的第一印象。 由于表單并不總是用戶喜歡的東西，因此使填寫表單盡可能容易是必不可少的。 讓我們看一下創建出色表單的一些技巧。

使用單列布局 (Use a Single Column Layout)

Limiting your form to one column makes it easier for users to read and lets you predict the order in which the form should be filled. A single column form also favours keyboard users by making it simple to tab from one field to another. If you have a long form, consider grouping related fields and placing them in different sections.

將表單限制為一列可以使用戶更容易閱讀，并可以預測表單的填充順序。 單列形式也很容易通過從一個字段切換到另一個字段來吸引鍵盤用戶。 如果格式較長，請考慮將相關字段分組并將其放在不同的部分。

頂部對齊標簽 (Top Align Labels)

registration form報名表格

Top-aligned labels tend to reduce how long it takes to complete a form. Especially for familiar data (i.e. phone number, credit card etc.) because they only require a single eye fixation to take in both input label & field. Top aligned labels also work well with single column forms.

頂部對齊的標簽往往會減少完成表格所需的時間。 特別是對于熟悉的數據(例如電話號碼，信用卡等)，因為它們只需要一個眼睛注視即可同時輸入標簽和字段。 頂部對齊的標簽也適用于單列表單。

使用描述性內聯錯誤 (Use Descriptive Inline Errors)

Send coins form發送硬幣表格

Simply changing the appearance of a field with an invalid input is not enough to let the user know exactly what they are not doing right and this can be frustrating. This is why adding a clear error directly under the invalid field is good practice. With this method, the user would know where and why the error occurred.

僅使用無效輸入更改字段的外觀不足以讓用戶確切地知道他們在做什么不正確，這可能令人沮喪。 這就是為什么在無效字段下直接添加清除錯誤是一種好習慣的原因。 使用這種方法，用戶將知道 哪里 和 為什么 發生錯誤。

垂直排列單選按鈕和復選框 (Vertically Arrange Radio buttons and Checkboxes)

horizontally arranged radio buttons水平排列的單選按鈕

Horizontally arranged radio buttons, as shown above, should be avoided. The labels and buttons are placed on one line, even though this may seem great for maximising space, it creates an error-prone condition for the user.

如上所示，應避免水平排列的單選按鈕。 標簽和按鈕放在一行上，即使這對于最大化空間來說似乎很棒，但它為用戶創建了容易出錯的條件。

Cryptocurrencies’ radio buttons加密貨幣的單選按鈕

The recommended practice is to place each option on its own line as done above. This greatly reduces the chance of a user picking an unintended option.Plus, placing buttons/boxes underneath each other improves readability.

建議的做法是如上所述將每個選項放在自己的行上。 這大大減少了用戶選擇意外選項的可能性。此外，將按鈕/框置于彼此下方可提高可讀性。

使號召性用語更具描述性 (Make Call-to-Actions Descriptive)

telegram bot notification form電報漫游器通知表單

The call-to-action (CTA) in the form above is the purple button. CTAs are obvious and should state their intent so the user is aware of the effects of interacting with the CTA in question.

上方表格中的號召性用語(CTA)是紫色按鈕。 CTA很明顯，應說明其意圖，以便用戶知道與所討論的CTA交互的影響。

區分主要和次要動作。 (Differentiate Primary and Secondary Actions.)

Confirm Purchase page確認購買頁面

The primary action(Purple button) allows the user to accomplish their most common or most important goal. Secondary actions(Hyperlink text) are any less important actions. Primary actions should always stand out and come first (top or left). This reduces the likelihood a user will make the wrong choice.

主要動作 (紫色按鈕) 允許用戶完成最常見或最重要的目標。 次要操作 (超鏈接文本) 是次重要的動作。 主要動作應始終脫穎而出，排在第一位(頂部或左側)。 這減少了用戶做出錯誤選擇的可能性。

在觸發的進程運行時禁用按鈕 (Disable buttons while a triggered process runs)

Telegram bot notifications form電報漫游器通知表單

To stop users from clicking the same button twice within a short period, buttons should be disabled while the triggered process runs. This is a minor change but it will save you a lot of headaches especially in situations where users submit data.

要在短時間內阻止用戶單擊同一按鈕兩次，應在觸發的進程運行時禁用按鈕。 這是一個很小的更改，但是它將為您省去很多麻煩，尤其是在用戶提交數據的情況下。

That’s it, folks! With the tips above you can take your forms to the next level. Remember, building great forms is not an event, it’s a continuous process because the needs and preferences of users constantly change.

就是這樣，伙計們！ 通過上面的提示，您可以將表格提高到一個新的水平。 請記住，構建出色的形式不是一件事情，而是一個連續的過程，因為用戶的需求和偏好會不斷變化。

翻譯自: https://medium.com/buycoins/creating-user-friendly-forms-48c5f06d2487

總結

以上是生活随笔為你收集整理的创建用户友好的表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。