您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 交互設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

關(guān)于注冊(cè)登錄的設(shè)計(jì)原則之二:讓注冊(cè)過(guò)程更加輕松 (by: adaptive path \ 翻譯搬運(yùn):HuJiping)

“心理學(xué)和經(jīng)濟(jì)學(xué)理論認(rèn)為們追尋在投入最少的情況下使收益最大化。提高投入與收入的比例能夠激發(fā)人們?yōu)橹垢冻龈嗟男袆?dòng)。”——B.J.Fogg

下面的策略主要側(cè)重于提高“投入與收益”的比率,使注冊(cè)的過(guò)程更加輕松。如果注冊(cè)的過(guò)程使人感覺快捷簡(jiǎn)單,用戶會(huì)更加愿意去嘗試,即便他們有時(shí)不確定你的產(chǎn)品(網(wǎng)站)會(huì)帶給他們什么好處。

 

1. 簡(jiǎn)化初始注冊(cè)

簡(jiǎn)化初始注冊(cè)頁(yè)面僅僅包含最少的必須信息。通常會(huì)跟隨一個(gè)設(shè)置向?qū)А?/span>

 

用于…

  • 避免雍長(zhǎng)(即便是一個(gè)全能的、可以使用戶在一頁(yè)中完成任何事情)的初始表單使用戶產(chǎn)生畏懼感,打擊用戶嘗試新產(chǎn)品的信心。
  • 制造一種繼續(xù)前進(jìn)的慣性,一旦他們(指用戶)完成了第一步,他們便會(huì)更加愿意為之后的步驟付出更多的耐心與行動(dòng)。

補(bǔ)充

  • 如果一個(gè)用戶已經(jīng)確定要注冊(cè)(是用你的產(chǎn)品、具有剛性需求),那么他更希望快速完成注冊(cè)(獲得可以使用你的網(wǎng)站或產(chǎn)品的權(quán)利),直接跳轉(zhuǎn)并設(shè)置自己的信息頁(yè)面。

設(shè)計(jì)原則…

  • 不要問(wèn)需要用戶思考(猶豫)的問(wèn)題(例如,“取一個(gè)昵稱”),不然就沒(méi)有簡(jiǎn)化注冊(cè)的意義了。
  • 使用對(duì)其排列、長(zhǎng)度相等的表格項(xiàng)來(lái)減少視覺干擾,可能的話使用相同的字體。
  • 盡量保證這個(gè)頁(yè)面的信息在3~6項(xiàng)(比如,郵箱、用戶名和密碼)。
  • 思考一些更加簡(jiǎn)單得信息表達(dá)方式、操作方式、理解(例如,是否可以用“年齡:**”代替“出生日期:****年**月**日”)

 

Xanga的注冊(cè)頁(yè)面只需要用戶填寫用戶名(登錄名)、密碼

電子郵件地址、驗(yàn)證碼和生日。所有項(xiàng)目整齊排列在一個(gè)區(qū)塊中。

這個(gè)初始表格非常緊湊能夠一眼就可以把所有的信息瀏覽完畢。

 

2. 整合初始注冊(cè)

整合初始注冊(cè)頁(yè)面包含所有創(chuàng)建一個(gè)用戶檔案的所有重要信息。通常在完成后用戶會(huì)被跳轉(zhuǎn)到他們的首頁(yè),在那里會(huì)有新手引導(dǎo)。

用于…

  • 使用戶快速進(jìn)入網(wǎng)站(產(chǎn)品)的核心功能體驗(yàn)。
  • 幫助已經(jīng)決定要使用你的網(wǎng)站(產(chǎn)品)的用戶快速上手。
  • 立刻為用戶提供定制信息

補(bǔ)充

  • 沒(méi)有告知用戶教會(huì)得到什么回報(bào)的情況下索取過(guò)多的信息,會(huì)打擊用戶的信心與耐心,甚至?xí)衼?lái)質(zhì)疑
  • 過(guò)長(zhǎng)的初始表單增加了用戶的投入從而會(huì)給用戶最初進(jìn)入你的產(chǎn)品帶來(lái)障礙

設(shè)計(jì)原則…

  •  告知用戶為什么你要問(wèn)索取用戶信息的原因(他們?yōu)榇耍ò褌€(gè)人信息告訴你)能得到什么?)。
  • 如果某個(gè)問(wèn)題在后期可以(或不可以)再次被修改,應(yīng)該給予暗示,從而減少選擇(例如,在填寫昵稱的旁邊標(biāo)注“您可以隨時(shí)修改此項(xiàng)”)。
  • 明確的表示出哪些項(xiàng)目是必填的,那些是暫時(shí)可以跳過(guò)的。
  • 內(nèi)容區(qū)塊劃分,可能的話將必填項(xiàng)和可選項(xiàng)分開。

Linked In 為了能很快的幫助用戶建立“聯(lián)系網(wǎng)”,在注冊(cè)頁(yè)設(shè)置了很多

項(xiàng),但是設(shè)計(jì)整齊干凈。可選項(xiàng)被清晰地標(biāo)識(shí)出來(lái)。由于這些信息的

目的不言而喻,因此也沒(méi)有必要做過(guò)多的說(shuō)明。

3.設(shè)置向?qū)?/span>

向?qū)в脕?lái)指引用戶完成設(shè)置,通常是三步式,且每一步是一個(gè)任務(wù)。

用于…

  • 避免用戶喪失信心、無(wú)從下手。
  • 使用戶的注意力集中在一個(gè)任務(wù)上。
  • 與用戶溝通每一步的目的和價(jià)值。
  • 為每一步配備充分的資源。像上傳照片到帳戶的操作肯能需要更多的空間。

補(bǔ)充

  • 保持設(shè)計(jì)的簡(jiǎn)潔,因此用多個(gè)頁(yè)面問(wèn)簡(jiǎn)單、低效的問(wèn)題,也許不如用一個(gè)步驟明確的表格來(lái)做會(huì)有效得多。

設(shè)計(jì)原則…

  • 使用進(jìn)度條或任務(wù)清單來(lái)告知用戶當(dāng)下的狀態(tài):他們現(xiàn)在所處的步驟和他們將要做的。
  • 告知用戶哪些步驟可跳過(guò)并給予入口。
  • 如果整個(gè)設(shè)置過(guò)程或操作設(shè)置是可選的,用一個(gè)可取消的浮層呈現(xiàn)。
  • 整個(gè)過(guò)程使用統(tǒng)一(固定)的視覺呈現(xiàn)形式,包括標(biāo)題、設(shè)置步驟、排版。每一步的滾動(dòng)輪換形式也應(yīng)當(dāng)統(tǒng)一。

雖然ShareThis的設(shè)置頁(yè)面提供相當(dāng)豐富的的選項(xiàng),但其視覺呈現(xiàn)十分

簡(jiǎn)潔整體。進(jìn)入賬戶信息作為最后一步能夠一直抓住用戶的注意力。

(可忽略步驟舉例)

4.輸入項(xiàng)注釋與錯(cuò)誤提示

當(dāng)每項(xiàng)輸入項(xiàng)得熱焦點(diǎn)的時(shí),顯示該項(xiàng)的信息,并在失去焦點(diǎn)的時(shí)候進(jìn)行驗(yàn)證(不要再用戶點(diǎn)擊完成按鈕的時(shí)候在做這些事)。

用于…

  • 提供能夠被使用的內(nèi)容的幫助信息。
  • 詳細(xì)的解釋可以說(shuō)明每一個(gè)必要的信息的原因
  • 提示進(jìn)程
  • 避免用戶遭遇輸入不符規(guī)定的信息造成的錯(cuò)誤而帶來(lái)的挫敗感,以及面對(duì)錯(cuò)誤信息、重新輸入密碼、驗(yàn)證碼和修改錯(cuò)誤信息的沮喪。

補(bǔ)充

  • 在用戶填寫完整個(gè)頁(yè)面之前,某些錯(cuò)誤提示(例如,未填寫的空白、分段輸入的生日信息)也許沒(méi)有意義。
  • 多數(shù)情況下,在完成最后一項(xiàng)的時(shí)候,用戶不會(huì)自覺地將焦點(diǎn)移開(從而激活驗(yàn)證)
  • 頁(yè)面錯(cuò)誤驗(yàn)證作為條目錯(cuò)誤驗(yàn)證的補(bǔ)充,而不能被替代。

設(shè)計(jì)原則…

  • 當(dāng)一個(gè)輸入項(xiàng)得到焦點(diǎn),立即在預(yù)留的區(qū)域顯示提示信息。當(dāng)失焦的時(shí)候,顯示確認(rèn)信息,提示這條信息的是正確或者是錯(cuò)誤。
  • 用極具區(qū)分度與辨識(shí)性的圖標(biāo)代表不同的信息類型:解釋、確認(rèn)正確、錯(cuò)誤。
  • 當(dāng)用戶完成整個(gè)頁(yè)面并點(diǎn)擊完成按鈕后,驗(yàn)證整個(gè)頁(yè)面,并在表單的上部顯示信息,指引用戶到每一個(gè)仍存在錯(cuò)誤的項(xiàng)目。

Digg的輸入項(xiàng)說(shuō)明、正確提示和錯(cuò)誤提示簡(jiǎn)潔、一致、系統(tǒng)。錯(cuò)誤提示和

解釋信息使用有好、清晰地語(yǔ)言說(shuō)明。頁(yè)面驗(yàn)證檢查各個(gè)區(qū)域的錯(cuò)誤來(lái)補(bǔ)

充輸入項(xiàng)驗(yàn)證(例如,出生日期的問(wèn)題)。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/id1230.html
時(shí)尚電商網(wǎng)站交互分析
讓等待更加美好(交互設(shè)計(jì)優(yōu)化)
圖趣網(wǎng)微信
建議反饋
×