4表單驗證 使用者體驗 表單設計中的注意事項

2021-10-16 06:19:54 字數 2964 閱讀 8955

在下面的這篇文章中,我們來看看有助於你設計不同可用性表單的10個最佳實踐。

希望它對設計人員和開發人員都有用。玩得開心

好吧,讓我們開始吧!

通常,表單是乙個帶有標籤和字段的框,其中包含乙個號召性用語按鈕。

那麼,如何設計乙個使用者友好的表單?

一般來說,表單設計為使用者端隱藏了許多困難和痛苦的地方。因此,有必要設計乙個使用者友好的表單。

首先,表單設計的最佳實踐是做使用者測試,永遠不要忽視使用者的意見,即使你不同意。

進行使用者測試有助於找出生活中的小竅門,比如測量與表單互動的時間、檢測痛點、觀察使用者如何使用介面、他在**卡住或找不到必要的元素等等。

執行這些活動可以幫助初學者避免表單世界中最大的和無知的錯誤。

避免曲折介面空間布局。通過眼動追蹤測試可以看出,使用者花費更多時間從一列跳到另一列,並且在確定表單中的特定欄位時遇到了麻煩。

與此相反,單列設計只是從上到下的讀取,它建立了與表單的簡單互動。

具有多列設計的表單通常會導致使用者省略字段,原因很簡單,因為他們沒有注意到這些字段,或者因為他們誤解了多列的含義,或者填寫了不相關或不正確的字段,因為使用者將它們誤解為所需輸入的一部分。(c)愛德華斯科特

單列設計更有效

巴塞爾大學的研究人員發現,左對齊優於中心對齊是減少完成時間路徑的最佳方法; 如左對齊眼睛不需要跳過頁面。

標籤的正確對齊方式將注視時間減少了近一半,這表明這種布局大大降低了使用者完成任務所需的認知負荷。(c)matteo penzo

曲折的定位需要更多的時間來完成

當你需要設計大資料表單時,確保表單中的所有欄位都是真正必要的、唯一的、不重複的。即使您沒有機會優化您的大資料表單,也可以使用帶有步驟的嚮導。

很簡單:

嚮導和進度條使複雜的表單變得清晰

分組形式看起來有組織,整齊和清晰。因此,將相關資訊以長格式分組到標題或分隔符下。

為什麼要將相關資訊分組?

假設,使用者在填寫表單時想要更改任何特定欄位中的內容,突然覺得需要更改任何字段。在這種情況下,分組將幫助使用者快速記住必要字段出現在哪個部分。

大多數情況下,所有欄位都是必填項,只有幾個欄位是可選的。

用星號標記必填欄位是一種廣泛的實踐,但實際上這種形式開始用紅色星號表示。順便說一句,紅色會從使用者方面引起負面關聯,因為紅色只用於錯誤。

在我的經驗中,有一次在測試原型時,使用者問我星號是什麼意思?它是書中的標籤還是描述中的標籤?

奇怪,不是嗎?我們看到星號並不適合所有型別的使用者。

為了避免這種誤解,最好使用「僅可選字段」。

對於非必需字段使用可選標籤

使用者很懶,這是事實。

所以,當你有機會讓自己的生活更簡單時,他們會很感激。自動填充/自動填充使表單完成速度提高30%。因此,分析可以自動填充/自動填充的表單元素。

為了給您乙個想法,可以自動完成城市,國家,**,電子郵件等元素。

自動完成功能可以簡化使用者的生活

注意輸入字段格式。在任何地方只使用簡單的輸入或下拉框都是不好的做法。

字段型別是否更多並不重要。使用者喜歡資料字段的不同表示形式。

表示吸引人的資訊的最簡單方法是

嘗試對資料字段進行不同的修改

此外,永遠不要忘記關於輸入格式的規則

使用者不應該花很多時間去弄清楚應該使用哪個按鈕來執行乙個操作。例如:這個按鈕是用於提交表單還是丟棄表單?

因此,確保在表單中正確定義和區分主按鈕和輔助按鈕。

你可以簡單地使用不同的顏色。避免主按鈕和輔助按鈕使用相同的顏色,因為它們會誤導使用者。或者使用對比色來區分它們。

在主按鈕和輔助按鈕之間進行分隔

為cta按鈕使用簡短而清晰的名稱。這個按鈕的主要目的是吸引使用者的注意,並讓他們採取必要的行動。當它簡短而清晰時,閱讀的時間就會減少,完成的時間也會減少。

簡短意味著清晰

永遠不要忽視表單驗證的設計!不要把它放在開發人員的肩上。它是各種形式功能中最重要的部分。

作為設計人員,你必須為不同型別的錯誤狀態準備文字和檢視、幫助文字以及其他與使用者通訊的方法。花時間驗證微縮本。如果沒有為每種型別的錯誤準備文字的資源,請考慮全域性錯誤副本。

永遠記住,當你為錯誤訊息準備乙個文字列表時,永遠不要因為使用者的錯誤而責怪他。相反,要確保你傳達的資訊是清晰的、切題的。

重點是,使用者資料需要實時驗證。不要讓您的使用者填寫所有字段,然後單擊submit按鈕以了解有什麼地方出錯了。

不要強迫使用者找出錯誤

為了使您的表單設計更加出色,讓我們避免以下內容

所以,繼續考慮你的新表單設計,並祝你好運!

【ux使用者體驗設計】如何建立設計原則

交互動效|優秀的ui動畫設計技巧

表單設計改善使用者體驗

使用value屬性為輸入型表單域設定 預設值 使用title屬性幫助螢幕閱讀器使用者獲得足夠的提示資訊 當標籤 label 沒有包含所關聯的表單域時,可使用for屬性來匹配和關聯表達那域 繫結id值 這樣當使用者單機標籤時,當前表單域會自動獲得焦點 為每個表單域設定tabindex屬性,方便使用者使...

通達 表單設計器 子表單 表單設計的花絮

通達 表單設計器 子表單 讓我們看一下數字領域的能力,特別是我們如何運用這些原理並將其應用於我們建立的日常ui元素,例如按鈕,表單域,圖示,隱喻和其他可視元素。負擔是物體與個人之間可能發生的行為 例如,門把手產生扭轉運動。個人是否認識到該行動的可能性無關緊要 負擔仍然存在 另一方面,感知的承受能力 ...

分步表單 中後台介面 表單設計規範

寫在前面 表單是中後台系統最常見的元素模組之一,承載了各個流程中資訊資料的錄入使命。提高資訊資料錄入的效率可以加速使用者達成目標的時間與降低操作成本。一般要求在錄入前盡可能的使使用者理解資訊錄入的目的與 並判斷需要錄入的資訊內容,在錄入過程中盡可能的減少輸錯概率並幫助使用者快速達成,在錄入後即時糾錯...