網頁註冊表單設計原則

來源:互聯網
上載者:User

  如果你想最大化你的服務所帶來的效益,你就必須最大化你網站表單的成功率。僅僅簡單的讓使用者在你網站上註冊是不夠的,除非你有能夠讓訪問你網站的人一看就映像深刻的點子。為了讓服務達到最大化的體現,我們設計師需要提供使用者一個良好的使用者體驗。我們需要邀請使用者,為他們描述服務供應項目有多少好,給他們解釋為什麼他們需要填那些表單並且暗示他們會因此得到利益的回報。當然,我們也應該做的非常方便讓使用者來參與。

  但是設計有效頁面表單不是件容易的事情。有個不爭的事實就是:沒人喜歡填表單——無論是線上還是線下的。因此,作為設計師我們需要找出能夠讓表單百分百簡單、直接甚至無痛苦的正確的設計決策。

  但是怎麼樣才能準確地找出這些決策?布局上那些連結應該放在表單的什麼位置?我們應該怎麼設計它?我們應該怎麼樣高亮標籤,應該怎麼樣排列他們?頁面表單設計樣式怎麼樣才符合現代化的網站?我們拿這些問題問我們自己,並且通過實施調查來得到這些結果。

  下面我們介紹一下現在互連網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%的註冊表單更喜歡用垂直布局的表單。

  第二部分的研究結果的翻譯會在下周給到大家,敬請期待~(



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。