07 May 2007

很久沒寫 blog 了,因為最近都沒玩新技術,所有的時間都花在訂便當管理系統上了... 想想也只能寫寫開發系統的一些... 呃,算心得吧?

這個系統的來由我就不再說明了,來說說當初設計的一些考量和想法吧

訂便當系統不用註冊就能使用

我不知道大家怎麼想,但我個人非常討厭註冊,需要註冊的網站我一個都不想去試。所以最初系統就設計成不需註冊也能使用大部份的功能。雖然一開始還是得開個群組帳號啦,但是開帳號的表單只需寫帳號和密碼,不用填 email。不用填 email 感覺就差很多了。再來是群組帳號開啟後,同組的十幾二十個人就直接可以建店家和開團,通通不用註冊。

"我非常討厭註冊" 是原由,不過這卻成為訂便當系統玩的起來的主因之一,試想在辦公室負責訂便當的人,找到了這個系統,想要在公司裡推廣,還得求每個人去註冊。哇咧,這玩的起來才有鬼 (有的員工甚至沒自己的電腦耶)。

首頁設計的考量

下面是首頁的截圖:

使用過系統的人,一定覺得訂便當首頁很醜 (講好聽一點的是單調...)。一方面原因是個人美工太差,另一方面則是 -- 這是工具網站啊!看看 成功的工具網站怎麼做的吧。對於工具網站來說,個人認為單純遠比其他花花綠綠的東西重要。

除了外觀之外,首頁的結構被分成兩段。上半部是最新的訂單列表,下半部則是訂單/店家的管理功能,這部份預設是藏起來的,要點一下才會展開。這樣的設計是考慮到系統有兩種主要的使用者:一個是開團的人,另一個是跟團的人,兩種人都使用同一個帳號登入,使用同一個首頁。一般來講會負責開團大概 1~2 個人,而跟團的可能會有十幾二十個的人。很明顯的,首頁預設要設計成適合跟團的,而不是開團的人。而且開團者算是系統內 power user,他們能夠接受稍微複雜的操作方式。

因此首頁一進去,預設就看到大刺刺地訂單,沒別的東西,訂單旁就寫著大大的 "我也要訂"。這樣一來開團的人就不用多廢唇舌解釋該怎麼使用。個人覺得這一點很重要,讓開團的人覺得麻煩的不是 "還要點一下才看的到的管理功能",而是 "拉人來使用系統時,一而再再而三的解說"。開團的人可是要教導/說服十幾二十個人來使用這個系統啊,系統得減輕她這方面的負擔才行。

訂單的管理 (算錢計帳)

訂單管理介面的截圖:

嗯,訂單管理介面就是一個大的表格,以二維的方式呈現訂購的統計,這沒什麼設計考量,只是像 excel 一樣的東西。比較特別的是算錢時,用點擊的方式變換紅色與綠色,分別代表已付和未付款。當初一開始就打算希望用滑鼠就能統計,而不是像 excel 一樣還要在格子裡打字,鍵盤滑鼠都得用到才行。至於實做的方法呢?最先想到的是 checkbox,因為它是 html 裡表示狀態的標準元件。但是它在大表格中辨識度太差,所以改用 link + 顏色來實做,而且也比較酷。至於為啥用紅色綠色,嘿嘿,那是因為在下每天都是在紅色綠色紅色綠色...間打轉 - 就是 JUnit啦 - 紅色表示錯誤/否定,綠色代表正常/確定,我們 team 裡面大家都很習慣這個配色 (訂便當一開始是給我們自己 team 用的),所以就這樣定案。訂便當裡最酷的地方就是這樣生出來啦,用清楚簡易的功能解決最麻煩的事囉

建立產品資料

建立產品的方式,系統是使用一個大的空白的 TextArea 讓人來填,如下:

魯肉飯, 50
珍珠奶茶, 中 20, 大 30

這是後來定案的做法,如果按照傳統的作法,一般可能會設計成這樣:

1. 品名: 副: 價錢:
2. 品名: 副: 價錢:
3. 品名: 副: 價錢:

傳統的作法看起來對使用者比較友善,因為寫的比較明白。其實不然... 觀察過便當店或是下午茶的 menu,就會發現項目通常很多,而且重覆性高。遇到要輸入這種資料,大家最愛拿記事本,或是 excel,然後複製貼上,再針對不一樣的地方做點小修改。這種使用習慣在上述的多個欄位設計法是做不到的。再者,很多負責訂便當的助理,在還沒有使用訂便當系統之前,可能已經替店家建過資料了,而大部份都是以 excel 方式儲存。選用textarea 讓大家可以自由貼上,可以省助理很多力氣,間接地降低門檻。

像這樣的珍珠奶茶, 中 20, 大 30格式,算是針對訂便當這樣的領域發展出來的小語言吧。我自己戲稱為 Domain Specific Format (因為還不到 Domain Specific Languange 的程度 XD)。設計這種特殊格式也是挺風險的,弄的太難會嚇跑一些人。所以設計的原則是 "簡單到一看就懂"。除此之外,一大格的寫法也讓產品的資料變得很好攜帶,這是後來做到公用店家時發現的,算是意外嘗到的甜頭 :-)

改版方式

訂便當系統的改版週期我刻意壓的很短。基本上 bug 要當天晚上修復好並且上線。而一週會有一 ~ 二次的新增小功能 (很小的),然後隔個一兩個月會加大的新功能。訂便當系統算是小站,而且晚上通常沒人,所以斷個幾十秒升級新版不是問題。這樣的策略,其實也沒啥特別的,open source 界有句老話 Release Early, Release Often ,意思很直接,就是盡量早一點發佈,並且要常常發佈新版。用多了 open source 的東西,也受到一些感染,就很自然這樣做了。運行半年下來,我自己覺得最大的好處是 - 建立用戶信賴

訂便當系統是個小不拉幾的個人興趣網站,有誰願意相信這名不見經傳的網站?還不知道會不會倒咧!要建立信賴,我想唯一能做的就是盡可能快速反應使用者需求,也就是不斷的修正和推出新功能,即使是再小的功能也好,要讓用戶覺得你的網站是活的有在聽他們的聲音。不用太擔心這樣臨時堆出來的功能會造成往後維護的困難,因為如果是設計不良的功能,使用者多半也沒在用,後續要轉移或是砍掉都不會有太大的問題。只要方向大概對了,我想應該沒啥問題... (我只有半年經驗... 老實說也不知道未來會怎樣哩)

這樣的改版方式代價是很高的,我目前還有正職,所以只能晚上和放假時做... 嘿嘿,自開站以來我就沒有所謂的 "放假" 了.......

行銷

訂便當系統沒有行銷,我不會行銷,我也不想做行銷的事。所以我連最基本的跟 blogger 打好關係都沒做... 網路上很多熱情的愛用者寫了介紹和說明,我也沒去打聲招呼... 在此說聲抱歉啦,在下是個很宅的人啊...(苦笑)。

盡管如此,訂便當系統還是一直有人來用地。事後推敲大概是訂便當這個 domain 很特殊吧 (應該說是辦公室圈)。訂便當系統的傳播方式並不是以個人為單位,而是以一個公司為單位,怎麼說呢?通常負責訂便當的助理發現這個站之後,便希望能在公司裡使用,以減輕自己的負擔。所以助理會推銷或甚至是 "強迫" 公司全部的人使用系統 (最極端的還可以說: 不來用就別想吃飯!),因此一口氣就多十來個新的使用者。照這樣倍增的速度傳播下去,再爛的行銷也活的下來... 我想訂便當系統在行銷上真的算是贓到了,下次如果玩別種類型的網站就沒這麼好康囉。

Search Engine

SEO 這一塊我一直沒什麼著力,原因是系統幾乎所有的網頁都是封閉的,而且還用了很多 Ajax。只有公用店家這一塊,我特別調整成可以讓 google 查的到,不過也還沒有最佳化的程度。公用店家也算是系統中獨特的地方,我想全國沒有其他地方有這麼詳細的店家資料了。一般網頁都是只有電話、地址和一些廣告詞,而且都是挶限於較大的連鎖店。訂便當系統則是涵蓋了藏在大街小巷的便當店和飲料小站,而且還有詳細的菜單。這些都是使用者的一字一字敲出來,這是相當寶貴的資產。讓大家能在 yahoo/google 查的到這些明細,一方面增加網站的曝光,另一方面也是提供大眾資訊。算得上是雙贏吧~

Business Plan

沒有

小結

好了,覺得寫太多了點,謝謝耐心看完啊。還有一些沒寫到,看下次心血來潮時再繼續寫吧


回響

可以用 Tag <I>、<B>,程式碼請用 <PRE>