如何通過(guò)設(shè)計(jì)的手段來(lái)提高表單的錄入體驗(yàn)

雖然現(xiàn)在的設(shè)計(jì)體驗(yàn)一直在提高,但是依舊逃脫不了功能與體驗(yàn)的角逐和對(duì)抗,往往好的體驗(yàn)就是滿足不了需求,而滿足了需求也往往會(huì)拉低體驗(yàn),這好像無(wú)法調(diào)和。相信在做設(shè)計(jì)的小伙伴在日常工作中,也遇到和pm無(wú)法說(shuō)服對(duì)方的場(chǎng)景。

雖然有很多問(wèn)題,但是我還是想是不是有一種相對(duì)來(lái)說(shuō)2方都能照顧的一個(gè)空間,來(lái)承載這2個(gè)方面。我想從以下幾個(gè)方面來(lái)闡述一些自己在日常工作中的方法:請(qǐng)看圖。


不同于更多體驗(yàn)設(shè)計(jì)師對(duì)于一個(gè)表單的判定標(biāo)準(zhǔn)--用戶瀏覽表單時(shí),眼睛在不同注視點(diǎn)移動(dòng)所花的時(shí)間,以及不同的點(diǎn)花的時(shí)間。我更傾向于如何讓用戶更容易的去填寫(xiě)表單,如何在填寫(xiě)過(guò)程中感到滿意和興趣濃厚。下面有4張比較典型的案例供大家去分享和分析。


上圖算4類非常典型的設(shè)計(jì)排布方式:左對(duì)齊 右對(duì)齊 頂部對(duì)齊 ,在表單中,對(duì)表單進(jìn)行了一個(gè)簡(jiǎn)單的樣式說(shuō)明。再看下圖


大家再看一下,這份眼動(dòng)測(cè)試報(bào)告,就可以看出一些端倪:垂直頂部對(duì)齊的注意力熱度更加的集中,這也就更加的直觀。所以我總結(jié)一些規(guī)則在這里說(shuō)一下,當(dāng)然有更好的想法可以交流。?

盡量采用垂直而不是水平

從日常的工作和附近身邊的人的習(xí)慣、聊天中獲得一個(gè)“吐槽”:“一直往下走多好,每次都要左右看,才行?!蔽抑浪麄兊囊馑迹浩鋵?shí)每次在填寫(xiě)表格的時(shí)候,遇到水平排布的表單,感覺(jué)總是填不完;而遇到垂直排列的表單時(shí),會(huì)覺(jué)得很流暢,看的也沒(méi)有那么累。所以:有時(shí)候表單的數(shù)量真不是左右用戶心理的主要標(biāo)準(zhǔn),巧妙的心理暗示則為更重要。

左對(duì)齊或許更加整體

在日常的表單設(shè)計(jì)中我們可以看到不同對(duì)齊方式:

當(dāng)垂直的設(shè)計(jì)方式受限的時(shí)候(垂直空間受限),水平的設(shè)計(jì)方式也是 一個(gè)可選的方案。但是到底是左對(duì)齊好,還是右對(duì)齊更佳;在我個(gè)人的設(shè)計(jì)工作中,我更傾向于左對(duì)齊。原因有以下幾點(diǎn):左對(duì)齊,在整個(gè)的表單設(shè)計(jì)中,會(huì)顯得更加整體一些,頁(yè)面也相對(duì)干凈。雖然在更多的可用性測(cè)試中,右對(duì)齊能夠更快速,但是為了用戶在閱讀過(guò)程中,不會(huì)感到擠壓,凌亂;我選擇了犧牲一部分時(shí)間作為代價(jià)。不選擇右對(duì)齊的主要原因則是,整個(gè)表單會(huì)顯得凌亂,用戶在閱讀的過(guò)程中,也無(wú)法一一對(duì)應(yīng)。

如果需要標(biāo)題分組,更希望去將標(biāo)題進(jìn)行一個(gè)形式上的區(qū)分。

上圖是找的一個(gè)眼動(dòng)測(cè)試報(bào)告:里面說(shuō)明了有顏色,和沒(méi)有顏色的設(shè)計(jì) 在用戶的使用過(guò)程中,音箱是如何的---有顏色的分組表單的聚焦度明顯高于沒(méi)有樣式變化的表單。因此在設(shè)計(jì)的過(guò)程中,遇到需要去分組的表單,我們應(yīng)該去思考,是否需要?jiǎng)佑玫竭@一個(gè)細(xì)節(jié)的設(shè)計(jì),借此來(lái)使用戶在填寫(xiě)的過(guò)程中是舒適的,無(wú)障礙的,易理解的。?

******這個(gè)符號(hào),是否有存在的必要。

這里是我自己的一個(gè)疑惑,我知道現(xiàn)在的表單設(shè)計(jì)規(guī)范中,已經(jīng)存在,而且必將長(zhǎng)期存在。我疑惑的是,是否有必要去用這個(gè)符號(hào),來(lái)提示用戶的必填與可選。是否還存在用戶不知道這個(gè)符號(hào)的意思。是否存在其他方式?如果啟用到這個(gè)圖標(biāo)的使用,勢(shì)必就意味著存在一些可以不填的的表格,那么為什么這些選填的表格要存在?或者非要存在,是否可以不采用這種分割方式,在選填的表格里,輸入漢字引導(dǎo)呢?例如:

實(shí)時(shí)的反饋

當(dāng)用戶在錄入一個(gè)信息時(shí),都給予一個(gè)提示:時(shí)效性或者非實(shí)效性

當(dāng)填寫(xiě)正確時(shí),系統(tǒng)也應(yīng)該給予一個(gè)積極的反饋,這個(gè)反饋可以是時(shí)效性的:顯示一段時(shí)間就消失,這樣既可以起到提示用戶,也可以做到不打擾用戶。當(dāng)用戶錄入錯(cuò)誤時(shí),格式、屬性、方式、等,系統(tǒng)也應(yīng)給予足夠的提示,出現(xiàn)一個(gè)持續(xù)性存在的提示,當(dāng)用戶做出相應(yīng)的修改時(shí),才會(huì)恢復(fù)正常的響應(yīng)機(jī)制。如果遇到備注,則應(yīng)與文本框保持水平,這樣做的理由是,布局統(tǒng)一。反之則是文本框和提示語(yǔ)混在一起,如果沒(méi)有很好的間隔系統(tǒng),很容易混亂。

自動(dòng)補(bǔ)充

用戶在填寫(xiě)一堆表格時(shí),無(wú)論我們?cè)O(shè)計(jì)的多么好,過(guò)長(zhǎng)的信息負(fù)載,足以壓垮用戶的耐心;而這時(shí),我們應(yīng)該在這種場(chǎng)景下,考慮一點(diǎn)變化,也就是制動(dòng)機(jī)制,是否可以根據(jù)用戶的一些信息的錄入,自動(dòng)補(bǔ)全一些文本框的內(nèi)容;這樣的體驗(yàn)不用說(shuō)很多,自然是讓用戶的心靈感動(dòng)一絲喜悅的。因?yàn)樗K于不用填他以為的那么多的內(nèi)容了。

合適的引導(dǎo)和鼓勵(lì)

填寫(xiě)一個(gè)量大的表單是非??简?yàn)用戶的耐心的一件事,所以我們?cè)谠O(shè)計(jì)的時(shí)候,要對(duì)信息進(jìn)行分類,一是方便用戶去讀取,二是方便我們?cè)诤线m的時(shí)間去做一個(gè)引導(dǎo)與鼓勵(lì),比如:在注冊(cè)一些app時(shí),我總會(huì)遇到,“你已經(jīng)完成了你信息的80%,請(qǐng)?jiān)俳釉賲枴薄袄^續(xù)完成你的信息,你的頭像將會(huì)不一樣哦”等等類似的鼓勵(lì)性話語(yǔ),而這時(shí),我總會(huì)耐著心去繼續(xù),至于為什么,我反問(wèn)過(guò)自己。我的自我回答是:好奇心、虛榮感、成就感,以及“已經(jīng)到這里了,稍微再寫(xiě)寫(xiě)吧”的這種心態(tài)。

總結(jié):合適的表單不僅能提供好的信息基礎(chǔ),這也是一個(gè)產(chǎn)品的內(nèi)在構(gòu)建是否合理的檢驗(yàn)標(biāo)準(zhǔn),如果你連一個(gè)表單的設(shè)計(jì)都做的很凌亂,讓用戶很抓狂,可想而知,用戶會(huì)對(duì)你的產(chǎn)品產(chǎn)生什么樣的看法。謝謝。

個(gè)人微信公眾號(hào):海鮮君的設(shè)計(jì)物語(yǔ)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這個(gè)序可能會(huì)有些長(zhǎng) 先作個(gè)自我介紹,我是一名交互設(shè)計(jì)師,90后。我并不怎么喜歡編輯文章或?qū)扅c(diǎn)什么,就是因?yàn)閼?,所?..
    IxDKN閱讀 11,288評(píng)論 16 160
  • 今天 下雨了 空氣清新涼潤(rùn) 緩解了連日來(lái)的悶熱 早晨 在家里 一碗青菜肉絲面 面上臥著金黃的荷包蛋 一碗面宛如一幅...
    楚歌兒閱讀 281評(píng)論 6 4
  • 我不曾見(jiàn)過(guò)一個(gè)人一邊向前走,一邊回頭看。除非,他知道要回頭看。 歲月越流逝就會(huì)越快,我們經(jīng)歷越來(lái)越多的人離開(kāi),卻未...
    六月小姐姐閱讀 371評(píng)論 0 0

友情鏈接更多精彩內(nèi)容