2009年3月29日 星期日

UI小講: 從Facebook到Vista,一個失敗的UI是怎樣誕生的

最近Facebook UI又換了,而且和對上一個版本差異很大-更像Twitter的同時使用者(User)的反彈更大,新UI劣評如潮至令人不禁想大吼: FB的UI Team在搞什麼鬼?!

如果要講,Facebook的UI有主要三個問題: 轉變過密、功能過多、資訊流控制混亂

資訊流控制混亂和Vista的UI犯的問題相似,一部分是UI Control的排列方式問題-使用者無法從顯眼處得到足夠的提示,會迷失(Lack of Information and Feedback); 另一部分是根本沒有辦法這樣控制-這是對使用者了解不足的問題(User and variety of control)

然而導致上面的現象卻是功能過多-Marketing和Development搞了一堆功能,但UI卻無法配合以致東西在奇怪/不合適的地方出現,或者應該出現的東西沒有出現,Consistency(一致性)和資訊流完全暴走-這種情形下User會覺得無所適從而將整個learning curve拉至接近無限大 (此時UI已經只能依靠remember而非recognize,而那個資訊量實在太可怕了)

但真正致命的是三日一小變,三個月一大變的方針

因為FB的變不是拉高Learning Curve,而是將User的learning experience*1整個硬生生的壓回去*2-再Powerful的User也要從新適應,更何況是水平參差、學習時間較長的普通User? (另一個講法就是,他們的惰性較強)

再看所有成功的Web App,哪有一個會改版改的如此兇?

會犯這種錯誤是不理解User、不理解Facebook的User Goal,只一味追求gimmick又無視系統一致性的下場

也許今天facebook夠強大可以無視User反彈,但要FB一日抱著這種心態,當他朝出現FB的Killer App時FB只會變成今天的ICQ、Vista

-------

*1 即所謂的用家經驗(值),當成和一般RPG的經驗值(EXP)就是了-都是隨使用(戰鬥)次數累值的東西。不能累積EXP就沒法升User Level...
*2 某種意義上這和OLG的「砍掉重練」幾乎沒兩樣...

-------

p.s. UI Design我是 Shneiderman派的, Shneiderman 8 golden rules超實用 [詳細]

-------

Off Topic:話說最近FB Quiz造成了不少人的Newsfeed有洗版現象,但因為每個Quiz都是獨立的App所以只能遂個block...(i.e. FB Quiz其實是個App Generator)

2009年3月28日 星期六

[惡搞] Web Developer Map

一切由Twitter上的一個tweet開始
@kayue table 深深深幾許,tr 一堆,td 無重數。
然後是我想起Deep Table Ocean...
@vincicat RT @kayue table 深深深幾許,tr 一堆,td 無重數。 (aka. Deep Table Ocean)
之後就手癢把xkcd的online community map拿出來去字、修補,變成了version 1的Web Developer Map:
Web Developer Map based on xkcd's map
不過海不夠大,於是搞出了wide-screen版出來:
Web Developer Map (xkcd's map mod) , 16:9 ver
以上兩張圖歡迎大家用"add note"方式圈地加入自己的地名XD
***要求***
1. 叫做Web Developer Map,地名須和網絡科技/網頁開發有關,圈地實例見version 1
2. 要add note要有flickr account

Earth Hour 2009 - 地球一小時@HK

earth hour 2009 banner via only in silence
地球一小時是個支持環保減少光害的活動,該活動要求參與者在根據身處地區在某個特定時間關掉非緊急照明
香港區是28日8時30分,維港兩岸建築和大學都會參與
而各位在家的也可以關上家中電燈響應,還一個漆黑的地球和明亮的星空!
Earth Citys Lights by NASA
更多大小可參考NASA的Earth's City Lights
*Off Topic: Google Earth也有Earth 's Light的Layer呢...[Earth at Night]

2009年3月20日 星期五

Laughing哥不用死的方法?

如果有看過TVB的高清Laughing之死,相信Laughing要不死實在甚難,除非...
A. 子彈居然卡住
B. Laughing的心臟在另一邊/偏了...(總之就是不在正常的位置)
C. 車上的是假人
不過要是如此大家反檯吧? 那麼看看Laughing如何繼續出鏡會否更實際?
A. Flashback: 大開回憶Mode/事件重演Mode
B. 平行世界: 另一個學警狙擊,不過玩平行世界,同一班角色演員但完全另一個故事
C. 無間道Mode: 來個前傳+後傳讓Laughing哥繼續出鏡
D. 特別版: 這招太多劇集玩過,不贅
E. 金手指: 這個太頹廢但有可能...就是完全無視劇情讓Laughing哥復活!
F. 外傳: 最正常也最有可能,每個角色多少有點空白期可以任編劇玩嘛...
不過看學警的Blog似乎劇情走向是全部人自相殘殺死? (但真的出了Laughing Fans會很高興吧...)

*除了Facebook的「永遠懷念Laughing哥」的App外,TVB的PA手記也有Laughing悼念專文:為Laughing默哀
*大家有idea就留言分享下啦~
[Update 22/3] 結果是E...[Laughing哥死過翻生]

2009年3月19日 星期四

Laughing 哥小聯想

Laughing哥會紅是某程度上是意料之內的事
因為
他和Gundam Seed的尤拿、Code Geass的Orange(傑瑞米亞)一樣都是表面很正經但實際很搞笑的反派角色...
雖然是反派,但他們的相關惡搞簡直是排山倒海...所以laughing哥在被編劇們送回後台領便當去時Facebook簡直變了Laughingbook...悼念、解構文章一堆
一個劇集角色在網上如此紅實屬奇聞...
------------------
話說langhing哥這種紅法在網絡上不是沒前科-台灣的唐先生與劉文聰在2003年也掀起過相似的熱潮...尤其劉文聰和Laughing哥角色背景極為相似,又是在網上爆紅... [台灣來鴻: 唐先生與劉文聰]
------------------
[背景]
Laughing哥,TVB劇集《學警狙擊》的警方臥底。本名梁笑棠,謝天華飾。因為角色搞笑、金句多,加上謝天華精湛演繹於是掀起話題,連帶laughing哥也成為謝天華別名 [wikipedia]
不過Laughing哥正確來說成名於Facebook,其Facebook Group於月中已有6萬Member,更有人發起不准Laughing哥死的post並得到千人回應,不過殘忍的編劇還是安排他在3月18日22集死亡,翌日Facebook Group有九萬member,Forum的哀悼post多不勝數,更有拜祭laughing哥的App出爐...
------------------
註:以上提到的動畫/劇集和我沒有認真追,有錯請指正m(_ _)m
註2:確實有錯,已更正
------------------
[Update #1 (19/3)] Laughing哥的Facebook Group正向10萬member進發,目標是今晚內完成?!
[Update #2 (19/3)] Laughing哥的App有一萬Fans,實際User數量不詳...
[Update #3 (20/3)] Laughing哥的Facebook Group member已過10萬...

2009年3月18日 星期三

以物換物的世界: 贈物網和Tradeduck.com

其實網絡以物換物這很早以前就有,還有人用萬字夾一直換到一間屋喔...
以前沒那麼流行的,可是近來經濟不景大家都節儉起來,不要的東西都儘量不直接丟。昔日的做法是丟拍賣網站,但不一定有人投之餘賺的又不多、手續又麻煩,倒不如送人或交換-但換物啟事可以放在哪? 在歐美可以丟上craigslist.org這些分類廣告網站,可是如果人在香港、台灣丟到craigslist運費賠很大,於是本地換物網應運而生

[HK]
香港其實不少討論區都有換物區,不過比較分散找心頭好很麻煩,於是有心人成立了網上交換平台Tradeduck.com (香港以物易物網)
Tradeduck有分類、有最新成交,行會員制,運作大約一年

[TW]
要換東西其實可以在BBS換,不過台灣最近有個比較另類的網上交換平台贈物網,行會員制、有分類瀏覽,不過網站主要是提供一個Give-a-way平台-東西免費送出去! 想要什麼則搜尋、在求贈區貼文,實行一邊施比受更有福時又可以找到人提供自己需要的東西。因為是捐贈平台,除了個人也有慈善團體區給慈善團體呼籲物品捐贈,如果人在台灣想做點善事可以去看看~
(至於為什麼算是以物換物? 因為如果你有東西捐出去又有一堆人要時,一般人會優先給以前給過你東西的人-想有收穫必須先付出)
-----------
其實文首的經典人物 Kyle MacDonald 反映了換物之道-有些對你來說是貴的東西對別人來說不過是很平凡,一件物件價值如何還得看人
所以以物換物/Give-a-way最重要的是大家高興

2009年3月15日 星期日

Lazy Twitterholic Test (推特中毒測驗懶人版)

推特(twitter)中毒測驗 (Beta)

因為原文是人手計分太麻煩,所以本喵弄了個懶人版...
目前為Beta版,有問題/Bug請在comment留言或上我的Twitter反映(@vincicat)
原文: 推特(twitter)中毒測驗
[Update 18/3: 字眼修正]
[Update 15/3: bug修正、加入Reset按鈕(*分數不會即時重設)]

2009年3月10日 星期二

Talk about Twitterer-各式各樣的推客們(及有趣的profile)

這次要講的是推客-Twitter的用家(又稱Twitterer、推客是台灣的叫法)
因為這次要講的是推客,所以要稍為說明一下twitter(推特,也是是台灣的叫法)是什麼XD
Twitter是個有趣的「微網誌服務,服務重點在於讓用家可以碎碎念(發送消息)和收看自己想看的碎碎念-簡單來說想像成和很多人msn就成了(不過沒msn那麼短和私密-雖則twitter的私隱可以控制,但那1-to-many的原則不變)。因為有API可以用程式發推文(tweet)、搜尋推文(條件超豐富),於是有了一些超有趣的推客:
以下是從本喵的following和followers中觀察所得...少數為推友提及的 ([]內是twitter id)

改版進行中 (版面問題反映專文)

受不了Blogger亂出八糟的版面設定於是下決心改

...誰不知這竟又是一個div海...(header最為經典)

身為一個web developer,這是不容許的

所以我會逐個section清理清理...如果有什麼問題在本文留言反映
(*請註明解像度和瀏覽器版本)

2009年3月4日 星期三

網絡十大神獸

本文是「十大神獸」的懶人包,會以最文雅的方式解釋,所以「看」是非常安全的

[前言]

我曾經很認真的想過要不要寫,不過看見那過深的誤會和精美的惡搞似乎非寫不可。
而且我母語是廣東話這對我來說一點禁忌也沒有啊!

WARNING:
本篇含有強烈語言(Strong Language),切勿胡亂濫用,更應避免在公眾場所大聲說出神獸名字以免引起不必要的誤會

2009年3月3日 星期二

[JS] 嚇一跳的效能差異: += VS array.join

這個大概很多人沒想到,這兩件風馬牛不相干的東西可以做相同的事,而且有效能上的差異
那麼...+=和array.join其實有什麼關係呢?
  1. +=可以用array.push + array.join代替
  2. array.join一般來說*會比+=快
*此"一般來說"是指在市場上流通的browser的主要版本
原因...正是因為javascript的string也是immutable**的
因為其immutable特性造就string concat時大量的object生產、reference切換,其影響可以比string的長度及concat次數對整個operation的效能影響更大(和早期Java類似)
**1. 如果你有學過Java,Javascript的string和Java的String/string一樣-一旦被賦值即不可更改,要改要生新object
2. 這immutable的特性加上js對primitive object的處理手法導致string method的寫法十分古怪

數據: [Further analysis of += vs array.join, broken down by browser]
這個branchmark的string size及loop次數很夠,加上一些library的bug report,IE那部分絕對可信
觀察:
  1. 在數據被足夠放大的情形下,舊版FF及Safari的array.join略快;opera及chrome v8除外,他們是+=比較快
    不過前兩者的新版也修正了
    (其實Chrome和Opera是正確的,operator應該是比較快而且+=是比較多人用的寫法..除perl派外很少人會用join吧?)
  2. IE的+=慢得嚇死人...似乎IE對於object lifecycle control及code優化做的很差
結論:如果你是支援IE 6和7為主又有一定數量的string concat,你最好用array.join...
另外,IE要自己做的優化比較多
(M$實在不擅長搞script engine和string,orz)