[Research] Realtime 時代對 UX 造成的衝擊

P.S. 文章刊載於  L5L

Image Credit

Realtime 又名即時性,在這個資訊爆炸的時代尤其重要。為什麼會這麼說呢?因為海量資訊的產生,使得人們對於冗長的事物失去了耐心,取而代之的是「快且精準」的需求,而這個層面不僅僅只於閱讀,更衍伸到 UX( User Experience 又稱使用者體驗 )的領域去。

其中最經典的例子,莫過於 Mike Krieger (Co-Founder of Instagram)對於 Instagram mobile app 上傳流程的設計:

投影片連結

這個改變看似簡單,但其背後卻存在著更多細節需要實作,在做進一步討論之前,我們就先估且稱這個改變叫做「前端欺騙(Front-End Cheating)」吧。

以剛剛的流程為例,在後端的設計就可能需要額外設計一個 Image Pool 來暫存這些無人認領的照片孤兒,直到該使用者「完成了整個上傳流程」才會把這張照片指定給他。而對前端來說,就必須捨棄原本的流程,從「拍照→濾鏡→填寫資訊→上傳→結束」改變成「拍照→濾鏡→上傳→填寫資訊→使用一個 identifier 告訴 backend 更新照片資訊→結束」。

不過,以上只是最理想的假設,因為現實生活中還多了許多變數,特別是在 3G 網路的不穩定性還有 app 與 desktop program 設計上的差異,使得上傳的流程不如以往的順利及穩定,造成許多中斷及錯誤的可能,所以在 Error Handling 的部分還要做額外的處理。

對 Instagram 來說,它還需要再設想幾個情境:

  1. 使用者已經上傳完照片,卻在最後一個 Moment 按下 Cancel 鍵取消了所有動作,那該怎麼辦?
  2. 當「前端欺騙」後,卻從 backend 發現先前的上傳失敗,那該怎麼辦?

以情境 1 為例,舊流程是完全不會有這個問題(因為根本沒有辦法讓你中途取消),但是在新流程卻發生了,不過解法也很簡單,就是透過 identifier 告訴後端,從 Image Pool 幹掉這張照片就好了。

而情境 2 就比較麻煩,雖然新舊流程都需要處理上傳失敗的 UI 設計,但是對新流程來說,我們還要特別處理掉原本因為「前端欺騙」所留下的 UI ,又多了一個要考慮的細節。

除了 Instagram 這個經典上傳照片的例子外,還有一個更常看到的就是 Facebook Like。

對 Facebook 來說,他們處理的是更海量的資料(從別人文章得到的數據是一天約 27 億個 Like),所以更需要這種「前端欺騙」的動作來滿足使用者,而 Like 就是一個很好的例子。對使用者來說,Like 是一種 … 該怎麼說,是一種食之無味卻又棄之可惜的東西,他的出現讓資料庫又塞了更多無用的資訊(27 億個 Like per day ),但是卻又可以為不想發言的使用者傳達「我有看過了」、「很棒」…  的意義。

這種類型的資料特別適合透過「前端欺騙」的方式來處理,怎麼說呢?因為你可能只是當下想表示一種「認同」,但是資料的正確與否你就不會特別在意,舉 Michael Jackson 在 Facebook 上隨便一則 Post ,就會出現像是「You and 177,449 others like this.」的字眼,但是你真的會很在意 others 是哪些人嗎?通常不會,因為你真正在意的,通常是「你」和「你朋友」而已,其他陌生人 Like 與否相對就沒有這麼重要了。如果真的這麼重要,Facebook 也有做分頁載入(以 Infinite Scroll 的方式實作)的機制,你頂多看前一兩百個陌生臉孔也就不想再看下去了,遑論是那第 177,447 人呢?

所以就我個人的觀點來說,Realtime 意指的「即時」並不是資料傳輸的即時,而是對於 UX 的即時反饋。而文章標題所謂的衝擊,則是人們對於這一個領域的重視,一個被眾人遺忘已久的枝微末節。

[Research] HTML5’s Client-Side Storage Mechanism

Image Credit

之前一直在研究 Chrome Extension,而其中頻繁地使用了 HTML 的 Client-Side Storage Mechanism,所以就花了一些時間去 survey 了一下資料並整理如下:

一開始我想要先了解一下為什麼有了 Cookie 的存在,卻又還要在 HTML specification 中提出新的機制來儲存資料?而根據 Wiki 的資料 顯示,Cookie 雖然只是一個純文字的文件檔,但其實在 Browser 與 Server 做溝通時,都會被附加在 HTTP Header 的 Cookie 欄位,這就是為什麼 Cookie 的資料在前後端都可以被存儲的原因。

就在我了解了其存在的意義後,我就想要了解為什麼都已經存在著 Cookie 這樣的存取機制,卻還要在 HTML5 的 Specification 中提出新的存取機制?這是一個好問題,在看了 Stack Overflow 的討論文之後得到了答案。

有的時候,我們並不需要與 Server 做太多的互動,只是需要一個前端可以互相使用的存取機制就好,哪怕只是傳遞一些簡單的識別代號。因為有了這樣子的需求,那 Cookie 在某種程度上來說就太大材小用了,甚至可以說是過於痴肥。所以在做了這樣的理解之後,就可以合理的推測前端「輕量級的存取機制」之必要性。(時間點就沒有考究了)

那在 HTML5 的 Specification 中到底提到了什麼樣子的新型存取機制?原本可以歸類為下面三類:

  1. Session Storage
  2. Local Storage
  3. Database Storage

之所以會說「原本」是因為 Database Storage 不知道因為什麼緣故就停止維護了(參閱下圖),所以我們就在此不做深入討論,只討論 Session 和 Local Storage。

如果要快速地了解兩者的差異,就是自己動手玩看看

接下來還是要說明一下:Session 的中文是叫「會期」,就是一段會議、對話的期間,而在 HTML5 下,如果我們採用 Session Storage ,則我們資料的生命週期(Persistence)及生存範圍(Scope)都只能在一個 tab / window 下。說實在的,一時真的想不到該機制能應用在什麼樣的情況下,但 W3C 有提到一個有趣的情況,就是當一個使用者在進行拍賣的交易的時,雙開了兩個同樣帳號的 tab 來做購買的動作(接下來是我個人的情境補完),如果我們是利用 cookie 來紀錄欲購買商品的編號,那其實就很有可能因為兩個 tab 存取相同的 cookie 檔(沒有 lock)而造成交易上的異常。所以在這種時候 Session Storage 就相當適用。

而另外一個 Local Storage 和 Session Storage 的差異就在於 Persistence 和 Scope ,它是一個可以長時間儲存的機制,即使是在關閉 tab / window 之後,先前所儲存的資料依然保留著,而範圍就是所有的 tab / window 都能夠存取使用,除此之外,還能夠允許同個 domain 間的資料互相存取,因此在資料的傳遞上面佔有很大的優勢。以我自己為例,我在 Google Chrome Extension 的開發時,就大量應用到 Local Storage 來幫助我的外掛記錄使用者的偏好設定,以便於在各個子腳本中做資訊的傳遞。

以上就是這次 Client-Side Storage Mechanism 的研究,歡迎留言指教 :]

[Research] Our next generation of Search Engines ?!

自從Google PageRank的論文出現之後,Google於搜尋引擎的市場就一直處於龍頭的地位,但是卻可以發現近期Google在Search Engine上的改良並沒有說特別的另人印象深刻,除了之前「社交資訊搜尋」及「改良介面後的圖片搜尋」這兩個服務還蠻有新意之外,似乎就只剩下頗具玩具性質的Google Instant而已。

特色沒什麼增加之外,不便性反而增加許多。而最近最讓我無法接受的就是Google Search的防洪機制,只要你多搜尋幾次同樣的關鍵字,就直接被導向到sorry.google.com…不知道是不是學網的問題,我很常遇到這個狀況,所以還要透過Yahoo的Search Engine才能找我想找的東西,真的是很不方便。

在傳統IR的時代之後,我們實驗室雖然是在做Search Engine,但是就立志要走和主流不同的方向,採用藍海策略以試圖在這片大海中找尋一盞明燈。「有用的創新」是我跟著老師這半年所學到的最重要的事情,也是實驗室研究的方向,如果我們想的是一個沒有用的點子,那我們不做,又如果我們做的是有用但是沒有創新的點子,我們還是不會讓步。我們只做有用又有創新的點子。

實驗室這一屆的專題生,也就是我和同學godChess,我們試著設計出專注於Plurk社交平台的Vertical Search Engine,所有的資料都是靠Spider從Plurk上抓下來的,完完全全只利用你在Plurk上提供的所有資訊(如個人資料或是噗的內容)而不依靠其他資訊,是一個完全信任於這個社交平台的搜尋引擎。

plurk

Image from Here

而有別於傳統搜尋引擎,我們提供給使用者搜尋的是「關係」而不是「關鍵字」,舉個例來說,你也許是一個很喜歡音樂的人,而你也想認識一些和你有同樣興趣的噗友,所以你就可以試著在Search Bar那邊輸入「音樂」這樣的關係,之後就會把分析過後,並符合該關係的噗友資訊提供給你,進一步把人與人之間的距離拉近,甚至是打破了虛擬與現實世界的界線。

而目前整個計畫已經進行到40%左右了,大約能夠在十二月完工,到時候再釋出網站連結來請有帳號的噗友來做個壓力測試吧,希望你們會喜歡:)。

[Research] Dartboard Statistics Method

我的我

共有16筆資料

2.2(-1.1)

4.1(+0.8)

3.5(+0.2)

4.5(+1.2)

3.4(+0.1)

1.6(-1.7)

3.1(-0.2)

3.2(-0.1)

3.2(-0.1)

3.7(+0.4)

3.0(-0.3)

2.6(-0.7)

3.8(+0.5)

3.1(-0.2)

4.7(+1.4)

3.7(+0.4)

平均≒3.3

說明:

圖上的每個間距是0.5(看統計者要統計到多詳細),而中間那條線代表平均值(在本例為3.343)而藍色部分代表的是大於平均值的資料,紅色部分代表的是小於平均值的資料,然後依照離均差的大小來決定資料點是落在哪個圓內,之後依照圓內點的數目比上所有點的數目求出分佈機率(ex:最小圓有10個點,全部有16個點,其分佈機率為62.5%)





如果我們以平面的角度來看的話,會發現他的分佈情況是呈現在一個呈現兩色的二維鏢靶上,可以很明顯的看出整體資料的離均情況。在這邊要特別討論一下這個圖的優點,因為我認為就算是一些不常出現的極值,還是整體資料的一部分,所以如果為了建出理論的完美模型而拾棄那些極值,反而是和現實生活不合的情況。因此我是以離均的大小來建構出這個圖,所以就算是少數極值也只會分配在最外圍的圓上,不會對整體架構產生太大的影響。





統計方法命名:

Dartboard Statistics Method – 鏢靶統計方法