2022-05-02 分類: 網(wǎng)站建設
表單提交對于一個企業(yè)來說和對個人來說都是十分重要的,在收集數(shù)據(jù)以及登記數(shù)據(jù)的時候大多都是通過表單方式進行在線提交而建立用戶友好型表單,這是提高完成率的關(guān)鍵性因素。深圳網(wǎng)站建設公司自主開發(fā)網(wǎng)絡表單提交,比如最簡單的HTML表單的提交,在表單的樣式上、表單的狀態(tài)、表單的按鈕等各個方面都有專業(yè)設計,這體現(xiàn)的不僅僅只是表單提交設計,更是網(wǎng)頁設計的一個表現(xiàn)。
一、表單解析
表單的目的、內(nèi)容、大小長度等雖然各不相同,但基本元素比較固定;合理組織這些元素有助于用戶輕松完成表單填寫。
△ Amazon創(chuàng)建賬戶表單解析
標題:這個元素幫助用戶引導完成表單填寫的整個過程,當你把信息分成很多組來讓用戶填寫的時候,標題就特別有用。例如:個人資料、職業(yè)詳情、財務明細。
標簽:標簽告訴用戶在任何特定的輸入?yún)^(qū)域期望他們填寫什么內(nèi)容。
占位符 :占位符是對標簽進行額外的信息描述。
錯誤信息提示:錯誤信息提示給予用戶錯誤反饋,提醒用戶為什么填錯了。
動作按鈕:動作按鈕是在表單的結(jié)尾,有個確認提交的動作控件。
二、表單狀態(tài)
基本上,表單在用戶的交互過程中需要經(jīng)歷三個階段。
默認狀態(tài):用戶在未進行任何操作前表單的狀態(tài)。
聚焦狀態(tài):這個狀態(tài)強調(diào)用戶正在填寫的區(qū)域,幫助用戶聚焦和減少反復掃描屏幕的時間。
反饋狀態(tài):反饋狀態(tài)是指用戶收到反饋時的頁面狀態(tài)(大多數(shù)是指錯誤信息反饋)。有時候?qū)τ谏弦粋€輸入信息的反饋在用戶聚焦到下一個填寫區(qū)域時就會顯示。然而,如果數(shù)據(jù)不能得到立即驗證的話,就要等到用戶點擊提交按鈕后再給予反饋提示。
三、好實踐
1. 保持簡潔
讓你的表單保持簡短精煉,只保留最有必要的數(shù)據(jù),避免以驗證的名義讓用戶重復輸入,例如不要重復密碼字段,取而代之的是要讓用戶直接看到他們輸入的密碼。
2. 使用及時驗證
當給予用戶輸入進行報錯時,最好將反饋定位到具體位置。
3. 將相近的字段打組
將相關(guān)信息進行分組并按照常見規(guī)則排序很重要。這樣的話可以幫助用戶減少認知負荷和注意力消耗。
4. 將標簽左對齊
要將標簽放置到輸入框上面(像上面所解析的 Amazon 的表單一樣)。不要把占位符文字作為輸入框的標簽,那樣的話用戶輸入完成后將看不到標簽,用戶將很難對已輸入的內(nèi)容做最終的核對,會讓他們思考很多。
始終將標簽放置在輸入框上面并左對齊,這是高效率的做法。
5. 輸入?yún)^(qū)域與內(nèi)容類型或尺寸相匹配
簡單地說,要保證輸入字段的長度與預期的輸入類型相匹配,例如:地址就要比郵政編碼長。
6. CTA(call to action)按鈕
在表單的末尾通常會有個確認按鈕或者下一步按鈕,在有些場景下,必須有一個以上的按鈕。要強調(diào)主要的按鈕,弱化次要按鈕。
7. 搜索區(qū)域
不要隱藏你的搜索框,特別是你的網(wǎng)站內(nèi)有大量內(nèi)容時,搜索或許是最好的選擇。
當用戶執(zhí)行了搜索操作后并顯示了搜索結(jié)果,不要立即清除搜索框內(nèi)的內(nèi)容,以便可以讓用戶很容易地去回顧他起初所搜索的內(nèi)容。
8. 清晰
給用戶傳達清楚的信息,給予他們所預期的,不要模棱兩可。沒有人喜歡填寫表單,沒有人愿意填寫兩遍。
深圳網(wǎng)站建設公司從以上8個方面介紹關(guān)于表單提交的設計,其價值不在于表單提交的內(nèi)容和價值,只是在于幫助用戶獲得好體驗感,這對于表單收集者來說和對用戶來說都是有利而無害的。
當前標題:創(chuàng)建用戶友好型表單需要遵循的8個原則
鏈接URL:http://aaarwkj.com/news7/149407.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、建站公司、微信小程序、搜索引擎優(yōu)化、云服務器、網(wǎng)站設計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容