如何通過設(shè)計的手段,提高表單的錄入體驗
本文作者主要從七個方面來闡述他自己在日常工作中的方法,看如何通過設(shè)計的手段,提高表單的錄入體驗。
雖然現(xiàn)在的設(shè)計體驗一直在提高,但是依舊逃脫不了功能與體驗的角逐和對抗,往往好的體驗就是滿足不了需求,而滿足了需求也往往會拉低體驗,這好像無法調(diào)和。相信在做設(shè)計的小伙伴在日常工作中,也遇到和pm無法說服對方的場景。
雖然有很多問題,但是我還是想是不是有一種相對來說,兩方都能照顧的一個空間,來承載這兩個方面。我想從以下幾個方面來闡述一些自己在日常工作中的方法,請看圖:
不同于更多體驗設(shè)計師對于一個表單的判定標準,用戶瀏覽表單時,眼睛在不同注視點移動所花的時間,以及不同的點花的時間。我更傾向于如何讓用戶更容易的去填寫表單,如何在填寫過程中感到滿意和興趣濃厚。
下面有4張比較典型的案例供大家去分享和分析:
上圖算4類非常典型的設(shè)計排布方式:左對齊、右對齊、頂部對齊 ,在表單中,對表單進行了一個簡單的樣式說明。
再看下圖:
大家再看一下,這份眼動測試報告,就可以看出一些端倪:垂直頂部對齊的注意力熱度更加的集中,這也就更加的直觀。所以我總結(jié)一些規(guī)則在這里說一下,當然有更好的想法可以交流。
一、盡量采用垂直而不是水平
從日常的工作和附近身邊的人的習慣、聊天中獲得一個“吐槽”——“一直往下走多好,每次都要左右看,才行?!?/p>
我知道他們的意思:其實每次在填寫表格的時候,遇到水平排布的表單,感覺總是填不完;而遇到垂直排列的表單時,會覺得很流暢,看的也沒有那么累。所以,有時候表單的數(shù)量真不是左右用戶心理的主要標準,巧妙的心理暗示則為更重要。
二、左對齊或許更加整體
在日常的表單設(shè)計中我們可以看到不同對齊方式:
當垂直的設(shè)計方式受限的時候(垂直空間受限),水平的設(shè)計方式也是 一個可選的方案。但是到底是左對齊好,還是右對齊更佳;在我個人的設(shè)計工作中,我更傾向于左對齊。
原因有以下幾點:左對齊,在整個的表單設(shè)計中,會顯得更加整體一些,頁面也相對干凈。雖然在更多的可用性測試中,右對齊能夠更快速。但是為了用戶在閱讀過程中,不會感到擠壓、凌亂,我選擇了犧牲一部分時間作為代價。不選擇右對齊的主要原因則是,整個表單會顯得凌亂,用戶在閱讀的過程中,也無法一一對應(yīng)。
三、如果需要標題分組,更希望去將標題進行一個形式上的區(qū)分
上圖是找的一個眼動測試報告,里面說明了有顏色,和沒有顏色的設(shè)計 在用戶的使用過程中,音箱是如何的——有顏色的分組表單的聚焦度,明顯高于沒有樣式變化的表單。
因此在設(shè)計的過程中,遇到需要去分組的表單,我們應(yīng)該去思考,是否需要動用到這一個細節(jié)的設(shè)計,借此來使用戶在填寫的過程中是舒適的、無障礙的、易理解的。
四、***這個符號,是否有存在的必要?
這里是我自己的一個疑惑,我知道現(xiàn)在的表單設(shè)計規(guī)范中,已經(jīng)存在,而且必將長期存在。
我疑惑的是,是否有必要去用這個符號,來提示用戶的必填與可選?是否還存在用戶不知道這個符號的意思?是否存在其他方式?如果啟用到這個圖標的使用,勢必就意味著存在一些可以不填的的表格,那么為什么這些選填的表格要存在?或者非要存在,是否可以不采用這種分割方式,在選填的表格里,輸入漢字引導(dǎo)呢?
例如:
五、實時的反饋
當用戶在錄入一個信息時,都給予一個提示:時效性或者非實效性。
當填寫正確時,系統(tǒng)也應(yīng)該給予一個積極的反饋,這個反饋可以是時效性的。顯示一段時間就消失,這樣既可以起到提示用戶,也可以做到不打擾用戶。
當用戶錄入錯誤時,格式、屬性、方式等,系統(tǒng)也應(yīng)給予足夠的提示,出現(xiàn)一個持續(xù)性存在的提示,當用戶做出相應(yīng)的修改時,才會恢復(fù)正常的響應(yīng)機制。如果遇到備注,則應(yīng)與文本框保持水平,這樣做的理由是,布局統(tǒng)一。反之則是文本框和提示語混在一起,如果沒有很好的間隔系統(tǒng),很容易混亂。
六、自動補充
用戶在填寫一堆表格時,無論我們設(shè)計的多么好,過長的信息負載,足以壓垮用戶的耐心。而這時,我們應(yīng)該在這種場景下,考慮一點變化,也就是制動機制——是否可以根據(jù)用戶的一些信息的錄入,自動補全一些文本框的內(nèi)容?
這樣的體驗不用說很多,自然是讓用戶的心靈感動一絲喜悅的,因為他終于不用填他以為的那么多的內(nèi)容了。
七、合適的引導(dǎo)和鼓勵
填寫一個量大的表單是非??简炗脩舻哪托牡囊患?,所以我們在設(shè)計的時候,要對信息進行分類。一是方便用戶去讀取,二是方便我們在合適的時間去做一個引導(dǎo)與鼓勵。
比如:在注冊一些app時,我總會遇到,“你已經(jīng)完成了你信息的80%,請再接再厲”、“繼續(xù)完成你的信息,你的頭像將會不一樣哦”等等類似的鼓勵性話語,而這時,我總會耐著心去繼續(xù),至于為什么,我反問過自己。我的自我回答是:好奇心、虛榮感、成就感,以及“已經(jīng)到這里了,稍微再寫寫吧”的這種心態(tài)。
總結(jié)
合適的表單不僅能提供好的信息基礎(chǔ),這也是一個產(chǎn)品的內(nèi)在構(gòu)建是否合理的檢驗標準,如果你連一個表單的設(shè)計都做的很凌亂,讓用戶很抓狂,可想而知,用戶會對你的產(chǎn)品產(chǎn)生什么樣的看法。
作者:大碗海鮮,微信公眾號:海鮮君的設(shè)計物語。
題圖來自Unsplash,基于CC0協(xié)議
第二個,表單標題還是右對齊好,左對齊中間缺個口子,不整齊,人的視線會被打斷,破壞心流
感謝分享! ??
1,表單采用垂直排布
2,表單左對齊,顯得整體
3,標題分組,做形式上區(qū)分,如變色等
4,選填表單,做輸入引導(dǎo)
5,實時反饋,用戶錄入,給予時效性或非時效性提示
6,自動填充,信息聯(lián)動
7,引導(dǎo)和鼓勵
你好厲害??!棒