網頁設計網頁註冊表單設計原則

網頁設計網頁註冊表單設計原則
發佈者:SEO香港優化專家 - Web Design
網站設計
　　如果你想最大化你的服務所帶來的效益，你就必須最大化你網站表單的成功率。僅僅簡單的讓用戶在你網站上註冊是不夠的，除非你有能夠讓訪問你網站的人一看就映像深刻的點子。為了讓服務達到最大化的體現，我們設計師需要提供用戶一個良好的用戶體驗。我們需要邀請用戶，為他們描述服務產品有多少好，給他們解釋為什麼他們需要填那些表單並且暗示他們會因此得到利益的回報。當然，我們也應該做的非常方便讓用戶來參與。
　　但是設計有效的頁面表單不是件容易的事情。有個不爭的事實就是：沒人喜歡填表單——無論是線上還是線下的。因此，作為設計師我們需要找出能夠讓表單百分百簡單、直接甚至無痛苦的正確的設計決策。
　　但是怎麼樣才能準確地找出這些決策？佈局上那些鏈接應該放在表單的什麼位置？我們應該怎麼設計它？我們應該怎麼樣高亮標籤，應該怎麼樣排列他們？頁面表單設計樣式怎麼樣才符合現代化的網站？我們拿這些問題問我們自己，並且通過實施調查來得到這些結果。
　　下面我們介紹一下現在互聯網web表單設計樣式的調查結果。這些結果是分析了100個擁有和web表單相關流程的網站而得出的。我們決定從註冊表單開始。
　　註冊表單設計調查
　　調查的目的主要是提供給那些憑直接來判斷有效性的設計師和開發人員參考依據。我們也會介紹一些如何讓web表單成為完美的友好用戶界面的指導方針。
　　我們已經選擇了100個和web表單有關的大型網站。這些網站是根據博客搜索和Alexa排名以及搜索引擎中的受歡迎程度等方面去考慮選擇的。這些網站直接商業目標的影響普遍和他們的web表單相關，因此在流程中需要指定為高優先級進行設計。尤其註冊表單是為解釋為什麼許多評論表單是來自於社會類型的網站的關鍵。
　　我們關注註冊表單是想把更多關鍵表單單獨開來（例如校驗表單）。然後我們分別完成每個被選擇網站的註冊表單並且分析這些表單的設計方法。
　　我們在每個表單中利用一個特殊的Email賬戶和特殊的用戶名，為了使調查盡可能地具有廣泛性，我們指出29個在設計web表單時會碰到的不同的設計問題和疑問。
　　我們將它們分類並試圖找出相似的設計方針和設計思路。我們試圖從可用性觀點上著手，不斷關注兩者的正面和反面的例子並將他們陳列在調查結果中。
　　請注意這個文章不是關於校驗表單——那是另外一個討論的話題，我們把它獨立開來看待成一個即將要討論的文章。我們要感謝Wufoo為我們提供構架來引導我們的調查。
　　1.表單的安置
　　1.1註冊表單鏈接的標題是怎麼樣的？
　　當用戶想要加入網站是，用戶會尋找正確的短語，用戶知道它們應該是“sign- up”，“register”，“join”，“join”，“become a member”或者“creat an account”等。顯然，用戶期望他們其中之一的鏈接可以鏈到註冊表單。不幸的是，情況不一定是這樣的。
　　從圖表可見，最受歡迎的標題是“Sign up”（40%），接著是“Join”（18%），“Register”（18%）以及“Creat account”（17%），我們觀察到極少數有類似於我們去年看到的按鈕那樣即大，又閃亮，並且寫著“start here”的字樣。顯而易見，設計師與其設計並強調服務的功能性還不如試圖去表達信息。
　　1.2註冊表單的鏈接放在哪兒？
　　當用戶第一次訪問一個站點，他們試圖找出單獨佈局塊是代表什麼。他們的眼睛運動是跳躍的，並且用戶試圖瞭解哪個區域是更重要的，他們想要的內容可能被放在什麼地方。為了滿足用戶體驗，設計師需要幫助用戶直觀地知道哪些是在開始使用服務前所需要做的事。
　　如果用戶找不到通往註冊表單的鏈接，他可能就不會註冊你的服務。因此讓鏈接盡可能地顯而易見是最關鍵的。那麼設計師應該把“註冊”的鏈接放在什麼地方才會讓用戶感覺更可接近？
　　根據我們的調查，這個註冊鏈接
59%的網站是放在網站的頂部（其中76%是被放在右上角）
21%的網站是放在首頁的突出位置（鏈接或者表單自己被放在首頁上）
有9%是被隱藏在頂部“登陸”鏈接之後（例如：Craigslist）
　　實際上註冊鏈接很少被放在側邊欄上（7%-Propeller,Xing），但是4%的站點為用戶直接提供服務，只有在用戶需要保存設置的時候才需要用戶進行註冊。
　　2.表單的設計
　　2.1需要簡化註冊表單的樣式嗎？
　　當用戶點擊了註冊鏈接之後，他很有可能想要註冊你提供的服務。更重要的是，他並沒有點擊那些探索更深導航操作的鏈接或者具有吸引力的閃亮的廣告鏈接。
　　因此，設計師嘗試去掉所有沒必要的詳細資料以及不能幫助用戶完成表單的描述。常常只是呈現一個logo和表單自身，沒有任何的導航操作和附加信息。想法：用戶必須盡可能地關注在他要去完成的任務上。任何會分散用戶注意力的因素不得不被刪除。
　　因此，設計師經常使用“最小化”的佈局來構建註冊表單。根據我們的調查，61%的web表單和普遍的頁面相比更簡單（例如：MovableType, Livejournal, Amazon, Yandex.ru）
　　根據雅虎的註冊表單可以看出，訪問者僅僅需要填寫賬戶信息即可，沒有別的干擾因素去分散用戶的注意力。注意表單中的語氣和語義都是吸引人的對話式，這既簡單又友好。
　　Flixster是個典型的反面例子，它把表單塞得很滿，一點也不尊重它的訪問者。註冊頁面上一下子提供了每種可能的操作導航，並且登陸頁面上右邊的廣告比登陸表單還要突出。這樣一點也不友好，Photobucket應該是我們見過的第二擁擠的web表單。
　　2.2需要提供任何附加信息嗎？
　　許多設計師試圖通過類似於幫助、信息內容要求甚至是版權申明的附加信息來鼓勵訪問者主動填寫表格。但是它不同於點對點，在大部分例子中註冊的好處依然是通過表單來體現。
41%的表單告訴用戶註冊的好處
(MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com)
28%僅僅是單純的註冊頁面，沒有任何附加信息
(Pownce, DeviantArt, Dailymotion)
11%告訴用戶需要多久時間來填寫。
(Threadless, Newsvine, Wordpress)
　　只有很少一部分（6%）網站正面提及在註冊過程中所需要填寫的信息。一些步驟中會提供一些警告（8%）和示意（6%，例如37signals, Bloglines）
　　2.3單頁表單VS多頁表單
　　調查結果中，93%的表單是單頁表單。顯然地，設計師試圖幫助用戶盡可能快速和無痛苦地完成註冊流程。只有一些網站利用多頁表單試圖把探索用戶參數選擇結合在註冊過程中。
　　比如，Meebo把一個完整的註冊過程整合在一張註冊表單中，並且通過一個彈出框的形式為用戶提供註冊嚮導。這個表單由6個頁面組成，用戶通過一些附加信息的選擇從而進行他們賬戶的設置。
　　2.4輸入框標附加信題需要突出嗎？
　　62%的註冊表單用加粗的方式去突出輸入框的標題。為了引人注目而不止一個的使用斜體去達到同樣的效果。為了讓標籤能夠更加可見，20%的註冊表單用色彩，18%的用純文本。
　　Large version
　　2.5標籤對齊
　　老實說，我們已經預料到可能對齊是一個很強的趨勢 。但是在我們看來，標籤對齊的趨勢已經不再那麼強烈了。
在調查中41%的網站使用標籤右對齊 (YouTube, Facebook, Metacafe)
30%的註冊表單使用頂端對齊　(Behance.net, Wufoo, Tickspot, DZone)
29%使用的是左對齊 (Digg, Ning, Wykop.pl, 43things, StupZ).
　　根據“Matteo Penzo的標籤放置研究結果”（1996）和“Luke Wroblewski的發現”（PDF），右對齊能夠戲劇性地減少完成時間因為它們幾乎不需要眼睛的注視。如果你想要達到相同的目的但是只有一塊受實際區域制約的垂直屏幕，標籤頂端對齊則會更好一些。還有以防你的表格要求人們掃瞄標籤去瞭解什麼是必須的（不熟悉或者高級的數據），左對齊則是最好的。
　　2.6有多少必填區域？
　　當進行一個調查時，我們已經注意到表單中的必填項越來越少了。幾年前，設計師要求訪問者填寫他們的姓名、地址、城市和個人興趣，但現在僅僅只需要登錄名、密碼和確認密碼。
　　我們發現54%的表單要求用戶最多填寫5個輸入框（其中6%的網站在使用服務前根本不需要註冊）。34%的表單使用6-8個輸入框，然而有12%的網站頂著用戶的忍耐度讓他們完成超過9個的必填項。
　　2.7有多少可選項？
　　和上面發現的類似，我們注意到大多數網站避免可選項並且要求用戶在完成註冊流程之後補全可選項。其中62%的表單根本就沒有可選項，還有98%的表單有少於5個的可選項。
　　2.8垂直或者水平的安排區域
　　在這個方面，垂直無阻礙延伸的垂直佈局區域是註冊表單表現出強大趨勢。86%的網站把輸入框垂直佈局。除此以外，15%的佈局更強調利用漂亮且吸引人的視覺設計來讓訪問者在填寫表單時感到更舒適。
　　Box.net提供了一個簡單的垂直佈局的輸入區域。當用戶輸入數據的時候，他們的眼睛固定在縱軸輸入框左側的交叉點上。
　　Mint是一個橫向佈局的註冊表單。當用戶輸入數據的時候，他們的眼睛需要跳來跳出。
　　更多的發現
調查結果中18%的註冊表單旁邊都會有登錄表單或者登錄連接。（例如, YouTube, Reddit, Digg, Lulu, Metacafe）
78%的註冊表單沒有用星號或者高光去表示必選框；大多數情況無論星號或者其他形式的高光都不會被使用。
9%的註冊表單用流程指示來告訴用戶他們進行到哪一步了，並且告訴他們哪些步驟是完成註冊的必填項。
85%的站點更喜歡用盡可能簡單的web表單。
區域通常都是用空白區來群組和拆分的，有時邊框的用途也和空白區一樣（22%），還有9%的情況是利用不同的背景色來區分。
　　概要
　　讓我們來為這個web表單設計樣式調查的第一部分做一個總結。請記住，我們只考慮註冊表單。
註冊鏈接的標題大多數是“sign up”（40%）並且被放在右上角。
註冊表單為了避免分散用戶的注意力而使用簡單的樣式。
93%的註冊表單是單頁表單。
41%的註冊表單通過解釋註冊的優勢來吸引用戶註冊。
62%的輸入框標題是通過加粗高亮的。
標籤不是都排成一條直線的。
設計師試圖不用必填項和可選項。
86%的註冊表單更喜歡用垂直佈局的表單。
　　第二部分的研究結果的翻譯會在下周給到大家，敬請期待~（網頁寄存