歡迎來到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

跟蹤優(yōu)化用戶訪問足跡體現(xiàn)網(wǎng)站信任感

發(fā)布時(shí)間:2016-11-09 文章來源:  瀏覽次數(shù):2720
屏幕太小了,手指無法精準(zhǔn)觸摸,輸入過程中產(chǎn)生錯(cuò)誤簡直是家常便飯。
  輸入量是無法被無窮制的降低的,良多時(shí)候我們更需要考慮的是怎樣使輸入變得更加輕易。
  輸入蒙板是一種限制內(nèi)容格局、避免輸入錯(cuò)誤的方式。舉個(gè)例子,我們可以使電話號(hào)碼輸入框只接受數(shù)字內(nèi)容,而分歧錯(cuò)誤其它任何類型的字符做出響應(yīng)。所接納的數(shù)字也可以被限定在某個(gè)范圍或模式當(dāng)中。不外,輸入蒙板的功能不僅限于防錯(cuò),它同樣可以被用在更加“積極”的地方,例如將多項(xiàng)輸入內(nèi)容合并為一個(gè)邏輯序列,使用戶不必在多個(gè)輸入框中往返切換。
  以下譯文以原作者的第一人稱視角翻譯。
  最近我(英文原文作者)在Square的iPhone應(yīng)用(Square Wallet)當(dāng)中見到的輸入方式就蠻有意思的,用戶在一個(gè)輸入框當(dāng)中就可以完成信用卡類型、卡號(hào)、有效期、CVV號(hào)(卡片背后的3位數(shù)字)和郵政編碼的填寫。
 
  輸入框當(dāng)中的最左端是一個(gè)代表信用卡的圖標(biāo),主要內(nèi)容部門用于輸入卡號(hào),蒙板規(guī)則是典型的4位分隔。跟著用戶的輸入,系統(tǒng)會(huì)根據(jù)卡號(hào)判定卡片的種別,例如VISA或MasterCard,并相應(yīng)的改變左側(cè)的信用卡圖標(biāo)。這種方式幫用戶省掉了一個(gè)選擇卡片類型的步驟,而且是一種很積極的信息回饋方式,讓用戶能夠感慨感染到系統(tǒng)對(duì)他們的操縱產(chǎn)生了響應(yīng)(相關(guān)閱讀:為用戶的成功操縱提供正面反饋)。
  
  當(dāng)用戶準(zhǔn)確的完成了16位卡號(hào)的填寫,文本框會(huì)自動(dòng)改變顯示模式,之前輸入的卡號(hào)只會(huì)顯示出最后的4位,節(jié)省出的3個(gè)字段就分配給了有效期、CVV碼和郵編。用戶在鍵入這些內(nèi)容的時(shí)候同樣會(huì)得到輸入蒙板的輔助,例如格局限定、日期有效性的判斷、自動(dòng)添加斜杠、自動(dòng)聚焦到下一個(gè)字段等。
  
  這里有一個(gè)很棒的細(xì)節(jié),當(dāng)用戶在輸入CVV碼時(shí),左側(cè)的圖標(biāo)會(huì)發(fā)生變化(如上圖所示),提示用戶所謂的CVV碼就是卡片背后的3位數(shù)字;非常貼心。
  目前看來人們對(duì)這套交互模式的反響很好;這簡直是一定的。只用到一個(gè)文本框,即有效的利用了輸入蒙板的防錯(cuò)與輔助功能,又極大減少了傳統(tǒng)模式當(dāng)中文本框的使用量——Squre給力!
  另外值得一提的是,Zachary Forrest通過前端技術(shù)將這套交互模式“移植”到了Web端,有愛好的朋友們也不妨去圍觀。

上一條:淺談企業(yè)在線IT產(chǎn)品設(shè)計(jì)...

下一條:借助用戶群組細(xì)分進(jìn)行網(wǎng)站...