交互閑談丨你不知道的下拉刷新

啥?你問我下拉刷新是什麼... = =

----------------

去年看一本書,印象特別深刻。講的是盧克·米勒當年先後負責華爾街日報和華爾街日報視頻兩款產品。(簡稱WSJ和WSJ Live)

在負責華爾街日報的時候,(時間點大概還是零七零八年)由於全部是文字+圖片形式的item,所以採用的載入交互是下拉到一定位置鬆手然後載入一條新的,下滑到底再次滑動觸發載入更多舊的。

如圖:(你們以後可能要習慣我的這種謎一樣的原型)

下拉到一定程度然後鬆手出現loading(可能是轉動的菊花、也可能是向上的箭頭、也可能是任何一種形式反正你們肯定你們見過)然後刷新載入列表,這個交互出自一個叫羅蘭·布里切特的交互設計大師之手,這個交互是很有趣的。

早期的手機端交互設計大師都推崇這樣的一種觀念,要通過交互讓用戶學習產品,也就是教育用戶。當用戶第一次下拉載入發現上面會出現一個圖標的時候,哪怕沒有拉到刷新出發距離,item彈回,刷新動作失敗,但是用戶一定會重新試驗一下,第二次成功了之後,用戶就再也離不開了。(因為早期那個年代的觸摸屏實在是比較少,而且早期的人和屏幕交互方式受限於技術,只能有點擊,滑動兩種,不敢相信吧在那個用戶長按屏幕都很難識別的塞班橫行的安卓年代,為了不讓用戶一味地點擊刷新按鈕刷新頁面)交互設計師需要絞盡腦汁去創造方法,再通過方法去教育用戶,這是那個時代(也就是十年前)最偉大和迷人之處。

好了WSJ用這樣的交互當然沒有問題,過了一兩年,他要去做另一款產品叫做WSJ Live,可以理解為類似於早期的youku這樣的,是一個橫向的視頻列表,用戶點擊播放就開始播放。那麼WSJ Live肯定不如後來的youku那樣都是一個一個幾十分鐘的電視綜藝劇,WSJ Live它其實是華爾街日報app配的一個一個相對較短的視頻。

盧克·米勒在設計之初的設計目標是:華爾街日報的用戶在應用里輕鬆觀看短小的視頻。所以他想到了採用上文中提到的「拉動-鬆手」載入的方式去設計視頻載入。

如下圖所示:

對於視頻界面,現在的用戶都明白一套統一的交互:左邊拉動是控制亮度,右邊拉動是控制聲音,左滑右滑是快退快進。這些交互手勢在今天能夠被用戶熟練的使用都是慢慢教育出來的,大家是否還記得當年的優酷和愛奇藝等等產品剛開始使用這套交互方法的時候為了教育用戶放了多少年的提示浮層。

當年盧克·米勒的年代這些交互方式都不存在,所以盧克想出的方式是那我們能不能學習告訴用戶,下滑你可以載入下一條視頻。(如上圖所示)

結果拿去做測試的時候發現不行,實驗表明雖然事先已經提示了用戶存在這一樣的的功能,但是用戶也不太會在看視頻的時候下滑。盧克嘗試分析原因,最後得出的原因是可能橫屏看視頻對於用戶的心理活動是從左播到右的,如果有下一條視頻不應該是下滑,而應該是用戶單手左滑進入下一條視頻會更恰當(如下圖所示)

後來盧克滿心歡喜的測試這種交互,在小範圍內是反響不錯,於是正式開展使用。為了更好的教育用戶,盧克還在視頻的右側邊緣放上了一個小箭頭去提示用戶這裡可以拉動切換下一條。

但是,通過數據來看反響一點都不好,數據顯示在大家得到提示說有這個功能的前提下,這個滑動播放下一條的功能依舊沒有多少人用。

在後來複盤的時候,盧克米勒找到了原因,因為WSJ Live不像facebook和WSJ是圖文的內容item,用戶看內容item頁面的時候,視覺比較分散,但是用戶在觀看視頻的時候一般都是視覺比較集中,可能並不會看到右側的剪頭提示,那用戶什麼時候會注意到這個提示呢,往往是一個新聞視頻看完了的時候,那作為用戶,你說用戶是點擊播放下一個呢?還是退回尋找自己感興趣但是可能不是下一個的視頻播放呢?在當年,用戶一定是選擇退回列表頁然後尋找,(我猜很大一方面原因是)因為用戶浪費不起這個流量。(但是今天這種說法就不一定了,參考今天的秒拍和新浪微博的視頻連續播放機制。)

後來盧克為此付出了慘痛的成本代價,這個故事提醒我們產品設計師,在定交互方式的過程中,需要慎重思考:一個人認為有效的交互,不一定對用戶有效;甚至小範圍反響不錯的交互方式,用戶老爺們也也不一定吃這一套。

至於後來?牛逼的人永遠有牛逼的地方,盧克創造了另一種視頻界面的交互辦法,統治了視頻應用五六年的時間。(如下圖所示,你們應該能看懂,在視頻某個角落出現一個抽屜圖標,點擊之後左側彈出一個視頻表單,可以選擇集數或者視頻title)

盧克·米勒說過這樣的一句話:「做用戶體驗我學到的最有價值的是,每個用戶與產品互動的方式和他們的產品體驗都各不相同,這取決於各自的背景和生活環境。」我再用另一句話來做結尾,這也是我一直以來的準則,那就是:「在產品設計中,有用不等於被需要。

---------------

各位看官是不是很奇怪?說好的這一篇文章更新app的形式感呢?

其實交互閑談算是我寫的第二類文章,這類文章不像之前大家看到的那類字數那麼長,而且行文較為隨意,主要是和大家探討一些交互和互聯網方面的東西。希望大家能夠喜歡。


推薦閱讀:

iPhone X 設計資源
【可能性 | 產品與大設計】推薦閱讀(043期)
層次(產品設計的思考方式_連載2)
【 商品詳情產品分析 】

TAG:用户体验 | 交互设计 | 交互设计入门 |