交互細(xì)節(jié)思考: Calender VS 下拉框

15 評論 12832 瀏覽 55 收藏 11 分鐘

微小的差別給用戶的感受可能完全不同。

近些天,各大互聯(lián)網(wǎng)公司的春招和暑期實(shí)習(xí)的網(wǎng)申陸續(xù)啟動。

網(wǎng)申的基本信息填寫,看起來似乎沒有什么惹人注目的交互,但只要稍微用心,就能體會到各大公司在頁面交互細(xì)節(jié)處理上的不同,即使是最簡單的時間信息的輸入,也能體現(xiàn)出公司的專業(yè)度,微小的差別給求職者的感受可能完全不同。

下面就騰訊、網(wǎng)易、京東、美團(tuán)四家的時間信息輸入的交互方式來談一談自己對交互細(xì)節(jié)的見解。

京東、美團(tuán)使用的時間錄入控件是Calender;騰訊、網(wǎng)易使用的時間錄入控件是下拉框。接下來的分析由Calender和下拉框的對比展開,而僅僅是選擇什么控件其實(shí)并不能決定一個交互,好的交互不論再微小,也會綜合考慮使用情境、用戶心理和巧妙的反饋細(xì)節(jié)等。

1.Calender比下拉框更高級?

比較而言,Calender是比下拉列表框更新奇的控件,我想,采用Calender代替下拉框的基本考慮應(yīng)該是:

  • Calender只用直觀選中一個點(diǎn),一步到位;而下拉表要進(jìn)行年/月/日三次選擇。
  • Calender在“日”選擇時更有優(yōu)勢(30左右的選項(xiàng),下拉框承載量確實(shí)過長。)

先來看第一點(diǎn),Calender中所謂的選中一個點(diǎn),在選中這個點(diǎn)之前,還是得對年、月、日三個要素進(jìn)行定位,實(shí)際的思考和選擇步驟數(shù)量是一樣的。

而且,實(shí)際的操作過程中,個人認(rèn)為日歷表更麻煩,選擇年、月時,下意識地操作是點(diǎn)擊左右的箭頭,而像下圖中京東的Calender,默認(rèn)日期是今天(年是2017),所以出生日期一般要點(diǎn)十幾次。

京東Calender 1

當(dāng)然,京東的Calender選擇年份信息不止是點(diǎn)擊左右箭頭這一種選擇方法,可以直接輸入或者內(nèi)置下拉框:

京東Calender2

理性地去考慮,確實(shí),可以使用比“點(diǎn)十幾次”更高效的方法。然而,我們考慮的是用戶的實(shí)際使用場景和心理特征。

在使用計算機(jī)時,用戶傾向性是:如果已經(jīng)啟動了一個操作,更多關(guān)注的是如何用這種方法把事情完成,而不會轉(zhuǎn)而思考另一種思路,更換輸入方式會消耗心理成本,增加挫敗感,少了那種“自然而然”的體驗(yàn)。如果目前的方法可以解決問題,是很難放棄已有的思路的,在心情不太放松的時候尤其如此。(開始網(wǎng)申時候,很多同學(xué)(不是所有人)其實(shí)也會在心理評估自己,多少會有些小小的不安。)

所以的確會有人點(diǎn)十幾次來選擇年份。

至于第二點(diǎn),Calender相比下拉框在選擇“日”時的優(yōu)勢,我們在第二部分討論。這里繼續(xù)來探討一下京東的Calender控件的設(shè)計,這個控件的設(shè)計初衷是為不同的需求提供不同的時間輸入方法,在默認(rèn)值為2017年的基礎(chǔ)上,至少有以下三種方式:

  1. 左右箭頭選擇——選擇離今年不遠(yuǎn)的年份(比如畢業(yè)時間)
  2. 點(diǎn)擊輸入框,鼠標(biāo)在內(nèi)嵌下拉框中選擇——離今年較遠(yuǎn)的年份
  3. 點(diǎn)擊輸入框,鍵盤輸入選擇——離今年很遠(yuǎn)的年份

這時間從近到遠(yuǎn),一一對應(yīng),都有“方便”的輸入方法,多方便。但這只是設(shè)計者的初衷。作為一個只有一般經(jīng)驗(yàn)的用戶,實(shí)際遇到的問題有:

  1. 直接下意識的直接點(diǎn)左右箭頭很多次,不想嘗試別的辦法。
  2. 年份可點(diǎn)擊是通過懸停手型進(jìn)行提示的,也就是說,如果不把鼠標(biāo)移到年份數(shù)字上,從外觀上是看不出可點(diǎn)擊的特征(如圖)的,是不知道那是個可輸入框的:有潛在的學(xué)習(xí)成本。
  3. 即使弄清楚了有不同的方法,還會本能地想一下用哪個(不過這個因人而異,有的人就是喜歡用鍵盤,看著能輸入就直接輸入想都不想。),可能存在輕微的選擇困難。

但如果說,但這個Calender還算常規(guī),下圖美團(tuán)家的這個簡直了:

美團(tuán)Calender

中間兩個向下的箭頭是內(nèi)嵌的下拉框,但這種左右箭頭、上下箭頭的混合實(shí)在讓人有一種凌亂的感覺,而且在選擇過程中也缺乏一致性:①選年份上下選。②選月份可以左右也可以上下選。為什么??因?yàn)閼械米瞿攴莸淖笥壹^了還是位置不夠了,讓人有一種半成品的感覺。

2.同樣的下拉框,不同的交互體驗(yàn)

相比于日歷表,純粹的下拉框的優(yōu)勢是唯一性,即只有“點(diǎn)擊——選擇”一種輸入方法,在使用方式上沒有困惑。

那么這種方法是否高效?我們從年/月/日三項(xiàng)的輸入體驗(yàn)分別來看:

  1. :30個選項(xiàng),使用calender確實(shí)更直觀好選,但下拉框配上鼠標(biāo)滾輪的體驗(yàn)其實(shí)也不差。
  2. :12個選項(xiàng),用下拉框承載剛剛好。
  3. :很多選項(xiàng),下拉框是無法承載無限的年份,但也沒必要做。(騰訊的“畢業(yè)時間”下拉選項(xiàng)只有2017/2018/2019三個選擇,結(jié)合了具體場景解決問題,實(shí)現(xiàn)起來也更簡單)

對傳統(tǒng)下拉框進(jìn)行巧妙的優(yōu)化,可以實(shí)現(xiàn)簡潔、高效的使用。騰訊可以根據(jù)填寫的身份證信息,自動反饋出默認(rèn)的性別和出生日期:

騰訊:身份證號自動反饋性別/生日

我們看到的只是各個網(wǎng)申頁面身份證號、性別、出生日期的內(nèi)容在填寫時的順序位置不同,而交互設(shè)計師所考慮的是順序背后的數(shù)據(jù)的獲取和過程的優(yōu)化。

有的人會提到下拉框相比Calender外觀較差這個問題,這并不能一概而論,外觀是看整體效果的,設(shè)計下拉框時稍微用點(diǎn)心思(邊緣圓滑點(diǎn),內(nèi)部四周合適留白等),并且搭配好整個頁面的設(shè)計,即使是使用下拉框,仍然可以獲得較為良好的視覺效果,在我實(shí)際體驗(yàn)中,騰訊和網(wǎng)易都使用了下拉框,但騰訊的設(shè)計看上去比網(wǎng)易舒服多了,同樣的是使用下拉框,

網(wǎng)易呈現(xiàn)的感覺是“因?yàn)橥祽胁幌敫伦鋈諝v表,所以用以前一直在用的下拉框?!保ㄏ聢D)

而騰訊呈現(xiàn)的感覺是“因?yàn)榭紤]過下拉框和日歷表的不同,認(rèn)為下拉框更易用,并根據(jù)具體場景精心設(shè)計了下拉框的外觀和功能。”

3.用什么控件不是重點(diǎn),用心才是

上面所談到的所有內(nèi)容,似乎是想證明“別看Calender新,其實(shí)下拉框更好用?!逼鋵?shí)不是。

之所以探討這兩種控件的區(qū)別,以及帶有一點(diǎn)對下拉框的傾向性,是因?yàn)楸救俗罱W(wǎng)申的是上面四家公司,在這四家的界面中,對個人而言,騰訊的下拉框的使用體驗(yàn)最好。

根據(jù)身份證號自動反饋出生日期的功能,并不限于下拉框,也可以用于Calender,同樣的,不論是使用哪種控件,如果提供更符合使用情境的默認(rèn)值和選項(xiàng)等(類似畢業(yè)年份只提供2017/2018/2019三個選項(xiàng),或者京東Calender出生日期的默認(rèn)年份在95年左右),使用體驗(yàn)也會提升。

所以用什么控件不是重點(diǎn),用心才是。

當(dāng)然,任何脫離特定的用戶、具體使用場景、資源協(xié)調(diào)、統(tǒng)計數(shù)據(jù)等因素的綜合考慮所進(jìn)行的分析,都是耍流氓。

以上對“時間輸入框”的分析,對①網(wǎng)申用戶群體(20左右年輕人,可能就是認(rèn)為下拉框low,偏愛Calender)、②具體使用場景(只是站在私人的角度來談可用性,沒有去調(diào)研)、③資源協(xié)調(diào)情況(工程師們天天忙著很多事,校招這界面稍微舊點(diǎn)差點(diǎn),你喜歡公司你還是會投,不投說明你忠誠度并不高,所以按照工作的性價比,代碼就不改了。)的考慮并不周到,有個人的局限性。

 

本文由 @小C 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 你好~最近正好設(shè)計中涉及到這個,想要轉(zhuǎn)載或截取你的文章,不商用,可以嗎?會標(biāo)注轉(zhuǎn)載地址和作者

    來自江蘇 回復(fù)
    1. 轉(zhuǎn)載后把您的作品地址私給我就好啦。

      來自湖北 回復(fù)
  2. 脫離實(shí)際場景談交互或者需求就是耍流氓了,日期選擇器的存在主要是為了程序更豐富的信息,并不是所有場合都適用的,比如定酒店和機(jī)票的時候,日期選擇器可以顯示灰色區(qū)域,告訴用戶那些日期無法預(yù)訂,這個就是比下拉框好的地方,僅僅舉幾個案例從操作便捷性來談,我覺得考慮不算周全

    來自浙江 回復(fù)
    1. 您說的沒錯。但我想您沒看我最后兩段話就急著評論了吧。

      來自湖北 回復(fù)
    2. 所以說本文不存在討論孰是孰非的價值,最后兩句話就可以了吧?

      來自浙江 回復(fù)
  3. 作者觀察的好細(xì)致呀……不過有一點(diǎn),其實(shí)我們填簡歷的時候記得具體到幾號的很少,有這個要求的都是隨便填的,如果除去對具體日期的要求,我個人覺得下拉框還是好用一些,用滾動條的效率會比翻頁高很多

    回復(fù)
    1. 對呀!在思考這玩意兒好不好用之前,先想清楚它有沒有必要??

      回復(fù)
  4. 作者還是蠻用心的,我都沒在意過要分析這些。
    不過我不明白,有了身份證號為何還要重復(fù)輸入生日和性別……
    以前填寫各種信息的時候經(jīng)常吐槽這個。不知道是不是有什么玄機(jī)在這里?

    回復(fù)
    1. +1

      來自湖北 回復(fù)
    2. 身份證號包含了需要的必要信息。把性別和生日提出來可能是信息的可用性更好?便于顯示和單獨(dú)處理?這是我的想法??

      回復(fù)
    3. 性別和生日在身份證號里一目了然,對于程序后臺來說沒有什么好處理不好處理的。就算單獨(dú)拎出來,處理方法又有什么區(qū)別么?
      顯示給誰?應(yīng)該是輸入者,他不需要單獨(dú)顯示,因?yàn)槠鋵?shí)他并不關(guān)系這個東西,只是需求方需要而已。
      處理由誰處理?需求方后臺處理,前面說了,后臺沒必要再來一段處理,也有可能跟數(shù)據(jù)庫的結(jié)構(gòu)有關(guān)系吧,就算需要,這也是技術(shù)層面的,不應(yīng)該把技術(shù)層面的東西暴露給你的用戶。我感覺~
      anyway,我覺得從體驗(yàn)角度上來說這個對用戶太重復(fù)了,感覺沒必要。
      只是一直很迷茫,幾乎所有的信息錄入系統(tǒng)里都是這樣重復(fù)的。

      來自北京 回復(fù)
    4. 哈哈,或許是“歷史習(xí)慣”,別想這啦

      來自湖北 回復(fù)
    5. 因?yàn)橛泻芏嗌矸葑C號上的出生日期在上戶口的時候弄錯了,實(shí)際出生日期根本不是身份證號上顯示的那樣,很多人也懶得去改

      來自廣東 回復(fù)
  5. 看來還是騰訊最棒,雖然求職門檻高,但是對待所有用戶都是一樣用心的。

    來自北京 回復(fù)
    1. 額…從文中討論到的地方來看可以這么說,但其實(shí)各家都有自己做的好的地方,我只是在吹毛求疵(°_°),以及我在自己的知乎專欄里提到的內(nèi)容更全面,如果有興趣可以看看*/ω\*)https://zhuanlan.zhihu.com/p/25860030

      回復(fù)