Xanga的注冊頁面只需要用戶填寫用戶名(登錄名)、密碼
電子郵件地址、驗證碼和生日。所有項目整齊排列在一個區塊中。
這個初始表格非常緊湊能夠一眼就可以把所有的信息瀏覽完畢。
2. 整合初始注冊
整合初始注冊頁面包含所有創建一個用戶檔案的所有重要信息。通常在完成后用戶會被跳轉到他們的首頁,在那里會有新手引導。
用于…
- 使用戶快速進入網站(產品)的核心功能體驗。
- 幫助已經決定要使用你的網站(產品)的用戶快速上手。
- 立刻為用戶提供定制信息
補充
- 沒有告知用戶教會得到什么回報的情況下索取過多的信息,會打擊用戶的信心與耐心,甚至會招來質疑
- 過長的初始表單增加了用戶的投入從而會給用戶最初進入你的產品帶來障礙
設計原則…
- ?告知用戶為什么你要問索取用戶信息的原因(他們為此(把個人信息告訴你)能得到什么?)。
- 如果某個問題在后期可以(或不可以)再次被修改,應該給予暗示,從而減少選擇(例如,在填寫昵稱的旁邊標注“您可以隨時修改此項”)。
- 明確的表示出哪些項目是必填的,那些是暫時可以跳過的。
- 內容區塊劃分,可能的話將必填項和可選項分開。
Linked In 為了能很快的幫助用戶建立“聯系網”,在注冊頁設置了很多
項,但是設計整齊干凈??蛇x項被清晰地標識出來。由于這些信息的
目的不言而喻,因此也沒有必要做過多的說明。
3.設置向導
向導用來指引用戶完成設置,通常是三步式,且每一步是一個任務。
用于…
- 避免用戶喪失信心、無從下手。
- 使用戶的注意力集中在一個任務上。
- 與用戶溝通每一步的目的和價值。
- 為每一步配備充分的資源。像上傳照片到帳戶的操作肯能需要更多的空間。
補充
- 保持設計的簡潔,因此用多個頁面問簡單、低效的問題,也許不如用一個步驟明確的表格來做會有效得多。
設計原則…
- 使用進度條或任務清單來告知用戶當下的狀態:他們現在所處的步驟和他們將要做的。
- 告知用戶哪些步驟可跳過并給予入口。
- 如果整個設置過程或操作設置是可選的,用一個可取消的浮層呈現。
- 整個過程使用統一(固定)的視覺呈現形式,包括標題、設置步驟、排版。每一步的滾動輪換形式也應當統一。
雖然ShareThis的設置頁面提供相當豐富的的選項,但其視覺呈現十分
簡潔整體。進入賬戶信息作為最后一步能夠一直抓住用戶的注意力。
(可忽略步驟舉例)
4.輸入項注釋與錯誤提示
當每項輸入項得熱焦點的時,顯示該項的信息,并在失去焦點的時候進行驗證(不要再用戶點擊完成按鈕的時候在做這些事)。
用于…
- 提供能夠被使用的內容的幫助信息。
- 詳細的解釋可以說明每一個必要的信息的原因
- 提示進程
- 避免用戶遭遇輸入不符規定的信息造成的錯誤而帶來的挫敗感,以及面對錯誤信息、重新輸入密碼、驗證碼和修改錯誤信息的沮喪。
補充
- 在用戶填寫完整個頁面之前,某些錯誤提示(例如,未填寫的空白、分段輸入的生日信息)也許沒有意義。
- 多數情況下,在完成最后一項的時候,用戶不會自覺地將焦點移開(從而激活驗證)
- 頁面錯誤驗證作為條目錯誤驗證的補充,而不能被替代。
設計原則…
- 當一個輸入項得到焦點,立即在預留的區域顯示提示信息。當失焦的時候,顯示確認信息,提示這條信息的是正確或者是錯誤。
- 用極具區分度與辨識性的圖標代表不同的信息類型:解釋、確認正確、錯誤。
- 當用戶完成整個頁面并點擊完成按鈕后,驗證整個頁面,并在表單的上部顯示信息,指引用戶到每一個仍存在錯誤的項目。
Digg的輸入項說明、正確提示和錯誤提示簡潔、一致、系統。錯誤提示和
解釋信息使用有好、清晰地語言說明。頁面驗證檢查各個區域的錯誤來補
充輸入項驗證(例如,出生日期的問題)。
(待續~)
來源:搜狗UED
內容很不錯很實用,贊一個。不過,作者很匆忙么,打字手誤好多好多貫穿始終啊,連開頭引用的那句都打錯了呀。
說的很棒,學習很多!