» 家儒: 專注於網頁設計及搜尋引擎優化SEO等(香港)

Google Analytics 密技

家儒 — Fri, 26 Sep 2008 04:51:34 +0000

Google Analytics 已經被公認為最優秀的免費流量分析工具，只需簡單的把 Analytics 提供的一段程式置入網頁中即可使用。Analytics 不止功能強大，彈性也很高，如果有留意 help 頁面，會發現 Analytics 有著很多不為人知的小技巧和隱藏功能。

這些頁面包括:

追蹤錯誤頁面
How do I track error pages so they show up in my reports?
區別不同訪客
How can I classify my visitors according to what pages they visit on my site or what their responses on a form are?
除了地區、語言這些預設分類以外，你可以籍著使用 _setVar function 來自定訪客的類別。
記錄交易資訊
How do I track e-commerce transactions?
很酷的功能，透過 _addTrans() 和 _addItem() 兩個 function，你可以記錄每筆交易的資料及賣出產品，包括交易額、產品編號等。
將 Analytics 帶到 Flash 中
How do I track Flash events?
追蹤 JavaScript 事件
How do I track JavaScript events?
記錄下載次數
How do I track files (such as PDF, AVI, or WMV) that are downloaded from my site?
追蹤導出連結
How do I track clicks on outbound links?
在不 refresh 頁面的情況下多次記錄
The URLs for each step in my Defined Funnel Path are identical. How can I track each step as if it were a unique URL?

更多 Google Analytics API 點這裡。

毒奶粉事件的負面消息控制

家儒 — Fri, 19 Sep 2008 12:40:10 +0000

在美國，有一個 SEO 的洐生行業叫網上聲譽管理，主要工作就是把正面消息推到搜尋結果上方。聲譽管理的本質還是 SEO ，只是換個包裝而已，提供服務的還是那些 SEO 公司。中國這回也跟上了，百度在毒奶粉事件中，為三鹿公司提供了如下的deal:

目前在百度上享受新闻公关保护政策的企业有蒙牛、伊利、汇源等，政策享受起点为自然年度500万元的广告投放，鉴于三鹿集团在产品线上不如其他几家企业丰富，经公司与百度相关部门的多次深度沟通后，百度已经同意将对三鹿集团的公关保护政策降低至年度300万元广告投放，可以享受将目前几大事业部早期负面删除。我可考虑一旦透露“肾结石”负面消息放大后，百度可能会以负面作为要挟，要求增加投放量，因此我司迄今没有跟百度提及肾结石相关负面新闻，所以强烈建议在此事还未大肆曝光的特殊时期，尽快与百度签订300万的框架协议。

出處（附圖）: https://sites.google.com/site/baidurubbish/bai-du-bang-zhu-san-lu-sha-si-r-tong

此其一。其二，跟據網友熱心報導，有傳國內各大門戶亦有類似的 deal。為了避免某品牌的負面消息被他人搜尋到，網站在關鍵字上做手腳。先是用空格隔開（如:伊利），再是在字與字之間加入 HTML tag（如:伊利）。目前這些小手腳貌似已經不存在了。來源: http://hax.javaeye.com/blog/244077

其實不想被 search engine index 到，只需用 meta tags 即可。

To prevent all robots from indexing a page on your site, you’d place the following meta tag into the section of your page:

出處: http://www.google.com/support/webmasters/bin/answer.py?answer=61050

我很快就發覺我的想法是錯的。因為國內網站新聞一般都是互相轉載，而轉載的人是不會連 meta tags 都一併轉載的，所以作為新聞源頭的新浪網等門戶網站唯有出此下策。不過大家都知道，這些手段都是無用的。還不如事件過後，花500萬把正面消息推到搜尋結果頁面上，如果到時候三鹿還存在的話。

奧運與金牌，誰TMD在乎？當連個奶粉都做不好的時候。唉

網頁排名、廣告對品牌的影響

家儒 — Sat, 06 Sep 2008 01:45:05 +0000

來自 Enquiro 的一份 marketing reserach，結果顯示出自然排名跟廣告排名對使用者的影響。

結果顯示，當顧客在同時在自然排名及廣告排名中看到 Honda （是次研究之測試用品牌）時:

品牌親和力上升
認為 Honda 合適的顧客比完全不在排名之中的廠商高出 16%。
品牌認知上升
顧客記起 Honda 的機會比其他品牌高出 42%。
購買意圖上升
顧客購買 Honda 的意圖上升了 8%。其他完全沒在 search engine result page 出現的品牌則下降了 16%。

結論是，值得在進行搜索引擎最佳化 (SEO) 的同時購買右方的廣告位。

Enquiro White Paper: The Brand Lift Of Search

或到此處下載。

Micro-blogging 的一些思考

家儒 — Sat, 30 Aug 2008 09:10:24 +0000

今天才談 micro-blogging ，我對 IT industry 的反應會不會太遲鈍一點? 還好這個 Blog 從來都不是標榜預言趨勢的地方。

這番思考是前幾天看到思哲跟 moming2k 在 Twitter 上對 hyperlocal 的討論後引起的。思哲對 hyperlocal 的論述可見這裡，下為節錄:

如果早知鄰居的暴行，又或者，早知大廈鄰近堆填區、垃圾車逢深夜開入，傳來陣陣夜來香，思哲肯定不會租下現在的單位。但這些情況，如果睇樓的時間不對，當時沒碰上，租客或買家是不容易知道的。

這些沒多少人關注的資訊，不會在傳統媒體上出現，即使是地區性報章雜誌，也不可能經常報道。換句話說，地區新聞就是長尾，它不像陳冠希和雪災，廣泛的人並不會對其產生興趣。然而，對有切身關係的人，長尾新聞的價值卻非同小可…

我在想，沒有多少人願意提供那些沒多少人關注的資訊，因為成本太高，而且跟本不能肯定這些資訊對他人有無價值。而且這些資訊難以有系統地累積，因為這些資訊需求既然能跟長尾掛上關係，自然是系統難以考慮得到的。因此只能退一步，從已經存在的數據中入手。於是，我想到了 Twitter 這個 micro-blog，也引發了一聯串聯想……

當網路不再是媒體

在 Jas9 上看到這麼一句話：網路生態的供需本質，簡單地說，就是分享與搜尋。

的確，過往人們認為互聯網是大眾的媒體，一直有意識地為網路提供「有意義」內容，而對於「無意義」則棄之不理。Yahoo! 的新聞、aNobii 的書評、Blogger 的影評，它們都是有意義的內容，都是為他人創造價值的例子。這是人們視互聯網為媒體的結果。

及後網路趨向以個人為中心，相對無意義的內容開始出現在網上。Xanga 上的流水帳、Twitter 上的碎碎念，對絕大部份人來說都只是可有可無的數據。但這些內容真的是毫無意義的嗎？那倒不是，至少你身邊的朋友會對此感興趣。事實上，追蹤好友八卦這個需求已經被 Xanga 和 Twitter 很好地解決了。但我不認為 Twitter ，或更準確的說，micro-blogging，的價值會僅止於此。

在 logging 之後，這些碎碎念，可以通過有機的聚合，產生更大的價值。

網路不再只是簡單的分享與搜尋，還多了收集與整理。

收集與整理

我不是趨勢專家，所以我上面所提到的情況，其實已經正在發生。因為 Twitter 開放了其 API ，使 Twitter 變成了個平台，其他人可以利用 Twitter 上的資料來開發週邊應用。現在 Twitter（或其他 micro-blogging platform）除了可以記錄生活和追蹤朋友外……

你還可以用 Twitter 來補捉熱門話題，透過 TweetMeme、Twit Links ；

你還可以用 Twitter 來了解選舉趨勢，透過 perspctv；

你還可以用 Twitter 來問問題答問題，透過 ToAnswer；

你還可以用 Twitter 來留意身邊人事，透過 Twitter Local；

你還可以用 Twitter 來結交同道好友，透過 Twubble、Twits Like Me；

你還可以用 Twitter 來行銷宣傳公司，透過 cherp、twittad…

網路真的很神奇，所有的這些 application ，都源於你一句、我一句的碎碎念。上面我所提到的這些應用，都是 Facebook 力有不及的。Facebook 跟 Twitter 的最大分別在於，Twitter 更貼近生活，無論何時何地，人們都可以在裡頭暢所欲言，而站方亦同時能不著痕跡地了解真實、現在的你。而 Facebook 則相對刻意，內容限制較多，都是死板的居住地方、就讀大學、個人興趣等欄位，站方能從中提取得到的資料遠遠不及 Twitter 來得多樣豐富。就在你我的三言兩語、談笑之間，成就 Twitter 這個（我認為）比 Facebook 更革命性的平台。

雖然目前網路上的 micro-blogging 的洐生應用很多，而且還會有更多更多。但礙於相關技術尚未成熟，特別是用戶習慣、語意分析及平台本身的限制，micro-blogging 的發展空間還很大。但我相信，假以時間，它將普及，並成為網民的新寵兒。

目錄設計問題

家儒 — Sat, 23 Aug 2008 07:44:42 +0000

對於那些架構龐大、層次很深的網站，目錄的設計十分之重要。一旦設計得不好，很容易讓用戶有 lost 的感覺。要如何解決這個問題，小弟至今仍然沒有一個完美的解決方法。因此小弟比較幾個網站的目錄設計手法，並在此跟大家分享一下所得。

設計師常常會以顏色、字體、位置大小來突出當前被選中的選項。但對於多層次的網站，可能會有多過一個選項被選中的情況。雖然設計師可以同時突出多個項目，但當被突出項目太多的時候，反而會造成用戶認知的困難。正如 Digg 網站的頂部目錄（左方），分為上、中、下三列；三列中又包含五種不同功能的連結，分別為

Join Digg / About / Login
Article category
Popular / Upcoming
Type of digg (News / Videos / Images)
Customize (因大小關係，不在截圖中)

這數目我覺得已經很誇張了，當中更可同時有三個項目被選中（Word & Business, Videos, Popular），並運用了 7 種顏色（2種藍、4種不同深淺的綠、紅式的 icon），如此複雜的設計應該很難為人一下子理解吧。Digg.com 的其他細節都做得很到位，唯獨是目錄太過瘋狂了一點。再看看 funP 的目錄又如何:

相較之下，我覺得 funP 的目錄清晰得多了。不是因為 funP 的功能比較簡單，實際上， funP 網站的層次比 Digg 更加深、功能更加多。funP 的目錄看上去更清晰，全因它把不相關的功能/連結都分別放在不同地方，而不像 Digg 般都堆在一起。看看下方兩張圖就會明白:

這個是 Digg.com 的，所有色塊都在上方。

當然，說到架構龐大，應該沒人及得上 Yahoo! 了。下面是 Yahoo 的做法

[Before] Home page

[After] Content pgae

Yahoo 向來都會為不同服務設計一個獨立的頁面，而不是一種風格套用到整個網站中。所以如果用戶想轉換服務，必須點左上角的連結。你不會在一個子網站的目錄中找到其他服務的身影。雖然比較麻煩，比每個子網站的架構都會因此簡明得多，funP 亦是用此方法。另外 Yahoo! TV 的目錄設計新穎，結合了 tab、breadcrumbs 於一身，雖然尚未被廣泛接受，但仍然很值得參考。

無論如何，有些問題是難光靠設計便能解決的。如果網站的架構混亂，再好的設計也是難以起死回生，反之亦然。君不見 Apple.com 的網站只有 6 個 button 嗎？

用戶研究的幾種方法

家儒 — Sat, 26 Jul 2008 05:42:10 +0000

整理一下以往看過的各種用戶研究方法。當中人種誌、訪問、卡片分類法、角色扮演適用於產品開發初期，而焦點小組、可用性測試則可不斷進行，貫穿整個產品開發週期亦無不可。

人種誌 Ethnography
- 目的: 了解用戶。
- 方法: 研究人員可透過觀察日常生活了解某社會文化。
- 時間: 長年累月
- 人數: 不限
- 參考: 人種誌研究法的基本概念
訪問 Interviews
- 目的: 了解用戶。
- 方法: 訪問(潛在)用戶
- 時間: 1 小時
- 人數: 1~2人
卡片分類法 Card Sorting
- 目的: 了解真正符合使用者習慣的資訊分類方法。
- 方法: 將每個內容/類目寫到一張卡片之上，再讓用戶將其分組。
- 時間: 1小時
- 人數: 1~2人
- 參考: wiki
角色扮演 Personas
- 目的: 確保開發產品時專注於滿足用戶需求上，避免失焦。
- 方法: 為典型用戶定立一個或多個假想人物，並圍繞該人物之需求開發產品。
- 時間: -
- 人數: -
焦點小組 Focus Groups
- 目的: 改進產品。
- 方法: 討論、Brainstorming。
- 時間: 1~2 小時
- 人數: 4~5 人
可用性測試 Usability testing
- 目的: 改進產品。
- 方法: 讓用戶嘗試完成某項任務，研究人員從旁觀察，並嘗試從中找出現有設計之問題。
- 時間: 半小時
- 人數: 1人

兩位IT界候選人的競選網站

家儒 — Sun, 20 Jul 2008 23:50:49 +0000

此 Post 乃應思哲兄兩位IT界候選人的競選網站一文而生:

先問一下大家，以上兩個網站，純粹站在設計網站的角度，覺得怎樣，它們是不是好的教材？
兩位IT候選人均以專業作為標榜，如果唔講內容，純粹講UI上的interaction design & information achitechture，大家又覺得，佢地既網站專唔專業呢？

兩位候選人分別為 Charles Mok (Link) 及 Samson Tam (Link)。要評論網站之好壞，必先明確其目標。唯我非該侯選人，不知其目標為何，為討論方便，只能假設其目標如下:

讓選民知道有此一號人物
宣傳其政綱
吸引選民投票
當選

譚偉豪之網站

打開譚偉豪博士的網站，映入眼簾盡是綠意。網站僅有兩頁，設計簡潔。

網站首頁是篇千字參選宣言。愚以為，作為 landing page，首頁之作用首重 inform ，讓訪客在數秒內了解網站內容大概，於首頁長篇大論不甚明智。

頁面頂部大字標題說明這是譚偉豪博士之競選網站，網站主旨一目了然。唯文字跟背景之對比度不足，字體雖大卻不及內文突出。

另外網頁內文字體、行距稍小，每行字數過多。個人認為中文內文字體最佳大小為 13px、行距 1.6em 為佳、寬度能每行顯示約三十字為佳。

網站最大問題是內容不足，連政綱也沒有，很難相信靠一封信就爭取到選民支持。沒有內容，再優秀的設計也無補於事。點右圖放大。

莫乃光之網站

莫乃光博士的競選網站設計明顯是針對英文版而設，網站雖有中文版，但其字體大小、行距均顯過小，可讀性甚差。

首頁跟譚偉豪博士的網站一樣，都是宣言一篇，在此我不再多費脣舌。此外另有 Photo slide show，只是不知道幾張照片對選情有何幫助，何以會出現在首頁之上。內文主要分橙、黑二色，一般而言橙為連結，累為內文。然而網站多處使用橙色字的地方均非連結。

網站目錄方面，多個主目錄（如 About, Supporters）均為空白頁，用戶必需點擊其子目錄方有內文可讀。另外頁面的命名亦頗為令人費解（Charles @ the Internet? Charles @ Mutimedia?）。

總結

小弟實在難以明白，為甚麼兩個網站將宣言放於首頁之上，而隱去政綱？在首頁設計上，Firefox.com 的設計很值的參考。Firefox 首頁上只有區區幾行字，卻足以讓訪客了解該軟件的基本特性。但總體來說，兩個網站的設計還可以。

來自 LukeW 的幾本電子書

家儒 — Mon, 14 Jul 2008 02:47:06 +0000

Best Pratices For Form Design
關於表單設計的一流 presentation。讀過以後你就會大概了解介面設計是如何「小改變，大改善」。內有好多珍貴的參考資料，讓你從科學化的角度了解介面設計。我記得我在年幾前就讀過這個 pdf ，但現在這個 pdf 的封面卻打著2008，可能因為作者出書的關係， pdf 的內容應該有更新過，大家讀過可以再讀溫故知新喔。
WebForms_LukeW.pdf
Web Application Hierarchy
圍繞視覺層次的一些討論。
PageHierarchy_LukeW_06232008.pdf
The Web Now: Social
Social Web
IxDA_SocialWeb_LW.pdf
Web Application Solutions: A designer’s guide
比較了多種開發 Web App 方法的優劣
WebApplicationSolutions.pdf

專注於當前任務

家儒 — Mon, 23 Jun 2008 21:25:20 +0000

盡管「簡單就是美」這條法則備受大家推崇，但並不是人人都能夠貫徹其理念。在設計 UI 的時候，仍會不自覺地嘗試在頁面上放置盡量多的功能，並相信能夠籍此方便用戶。功能所指的不只是一般的功能，還包括內容、設計元素，甚至一條連結等。

舉個例子，「最新消息」、「熱門文章」等欄目已經成為網站的標準配備，我們要如何決定這些欄目是否應該出現在某個頁面之上呢？有哪些因素應該列入考慮範圍？要知道每個功能都有其作用，一個功能的增減必會帶來得失，決策者的工作就是在其中取得平衡。例如這些欄目能夠增加其他頁面的曝光率，對站方來說有利無害，但以用戶角度來看則未必。加入一些不必要的功能不但減漫了頁面的下載速度，也增加了用戶的認知負擔。

問題還不止於此，無謂的功能與資訊很可能令用戶在試圖達成某一目標時分心，減低網站和用戶的效率。分心的原因可能是這些多餘的資訊具有吸引力，使用戶忘記了手頭上的工作。正如一篇學術論文旁邊放著一堆了八掛新聞的連結，人們還能夠專心閱讀原文嗎？又或者購物網站在產品 A 的資料頁面上推薦著產品 B，用戶還能夠輕鬆作出購買決定嗎？

我個人認為，每一個頁面都負責著一個主要任務，而一個功能能否協助用戶達成當前任務，是決定其去留的重要考慮因素。如某頁面的任務是介紹某產品，而非協助用戶發現其他類似產品，則無必要在頁面上強調「類似產品」這欄目。另外，即使同一功能，在不同網站其重要性也會不同，因為並非所有網站的定位都相同。

Yahoo! Design Stencil Kit

家儒 — Wed, 04 Jun 2008 01:12:42 +0000

快訊一則：Yahoo! 發布了一系列 web development 常會用的 wire frames 模版供大家下載，支援多種格式，包括 OmniGraffle、Visio、PDF、PNG 等。

下載地址: http://developer.yahoo.com/ypatterns/wireframes/

內容包括:

Ad Units
Calendars
Carousels
Charts and Tables
UI Controls
Form Elements
Grids
Menus and Buttons
Mobile - General
Mobile - iPhone
Navigation and Pagination
OS Elements
Placeholder Text
Screen Resolutions
Tabs
Windows and Containers

SEO工具: Seoquake

家儒 — Sat, 24 May 2008 13:58:35 +0000

介紹一個我喜歡用的 SEO plugin 吧。想要自己的網頁在搜尋引擎的排名靠前，當然先要作一些競爭分析，了解一下為甚麼別人的網頁能位列前茅，跟自己的網頁又有甚麼不同。個人很喜歡 Seoquake 這個來自俄羅斯的 Firefox seo plug-in （也有 IE 版喔），它能夠讓你輕鬆地取得各種做 SEO 時會用上的數據。

這個 seo plugin 會在 Google、Yahoo 和 MSN 的搜尋結果頁上加上一些附加 SEO 數據，搜尋結果頁面上每個網頁的 Page rank、收錄數、domain age、external link 等一目了然。你還可以把頁面上的網站排名資訊下載成 excel 檔案（不太好用就是）。而且這個 seo plugin 的彈性非常強，如果你需要替國內公司進行 SEO 的話，你可以安裝相關的插件來取得百度的數據。除此以外還有關鍵詞密度計（Keyword Density）功能，雖然不支持中文分詞，但至少不會亂碼（可以輔以中文斷詞系統來使用）。

下列是部份常用而又可以從 Seoquake 上得到的數據:

Google PR
當前頁面的 Google PageRank
Google Index
被 Google 收錄了的頁面數量，主要用來看看網站有沒有被搜尋引擎除名。
Google link
指向當前頁面的外部連結數量。
Google cachedate
最後一次 Google cache 當前頁面的日期，可以理解成搜尋引擎最後一次光臨這頁面的時間。
Yahoo Index
被 Yahoo 收錄了的頁面數量
Yahoo link (L)
指向當前頁面的外部連結數量
Yahoo Linkdomain (LD)
指向當前網站的外部連結數量，是網站而不是單一頁面喔，而且只計算那些指向該 sub-domain 的。舉個例子，假設當前頁面是 user.blogspot.com/entry.html ，指向網站的連結數量就相等於指向 user.blogspot.com的連結數量。
Yahoo Linkdomain2 (LD2)
指向當前網站的外部連結數量，不過今次是指向該頂級域名。用上面的例子，就是指向 blogspot.com 的連結數量。正常情況下，LD2 > LD > L。
MSN Index
被 MSN 收錄了的頁面數量
MSN link
指向當前頁面的外部連結數量
MSN Linkdomain (LD)
同Yahoo Linkdomain，MSN 版本。
MSN Linkdomain2 (LD2)
同 Yahoo Linkdomain2，MSN 版本。
Alexa Ranking
網站在全世界的排名
Webarchive Age
Domain 年齡
Internal Link
頁面上的的內部連結數量。
External Link
頁面上指向外部的連結數量。

缺點倒是有一個，就是使用得太頻繁的話，search engine 可能會 block 了你的 ip ，讓你無法取得數據。如果碰到這種情況的話，換個 proxy 清一下 cookies 就可以了。

Tag: SEO, Plug-in, 搜尋引擎最佳化, 插件, Firefox, Seoquake

7±2 法則

家儒 — Mon, 19 May 2008 21:43:40 +0000

相信大家都有聽過「三次點擊」這條法則，雖然我個人不完全同意此法則，但「三次點擊」是旨在用來控制網站的深度，使網站內容容易被使用者發現。而 7±2 法則 則是為了控制網站的寬度。

7±2 法則指出，人們的短暫記憶只能記住 5 - 9 項訊息。也許因此，美國的電話號碼只有 7 個位。將這條法則應用在網站上，網站目錄不應該有超過 5 - 9 個項目。

當訊息無可避免會超過 7±2 項的時候，可以試著把訊息分類。例如:

item1, item2, item3, item4, item5, item6, item7, item8, item9, item10, item11, item12, item13

可以改成

Category 1: item1, item2, item3, item4, item5
Category 2: item6, item7, item8, item9
Category 3: item10, item11, item12, item13

一如其他法則，7±2 法則也有例外和不適用的地方，所以無必要嚴格執行。加上用戶並不需要記下網站上的訊息，對於 7±2 法則是否適用在互聯網上尚有很多爭論。無論如何，至少 7±2 法則為「多」與「少」下了一客觀、科學化的定義。相關連結:

The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information

信息排序

家儒 — Sat, 03 May 2008 06:45:33 +0000

有架設個人網站經驗的讀者可能會有為這麼一個問題煩惱過：目錄上各頁面的次序該怎樣排呢？「關於站長」這頁應放在靠前的地方還是目錄底部？有時候，客戶可能也會要求你更改目錄上的頁面次序，原因是因為某個頁面比較重要。究竟有沒有一個正確的排序方法呢？排序的目的是為了協助用戶過濾出所需資訊。合理的排序的方法，大概有以下幾種：按字母、按類別、按時間及按訊息的層次。以下我會簡述一下各種排序方法的優劣，歡迎大家補充。

按字母排序

以英文字母、數字或筆劃數來排序的方法。這種做法基本上是適用於任何地方。但家儒認為這種做法只比完全亂排好一點點，因為它太過通用了，未能幫助用戶有效地減少數據的數量。所以按字母排序一般都會在無法套用其他排序方法的時候才會使用。（當然啦，你是絕對可以同時套用多種排序方法）

按類別

例如家儒的這個 blog 是依「文章內容」來分類，動物也可以用「界門綱目科屬種」來分門別類。

按時間

大家很熟悉的排序方法，也是 photo album 常用方法。由於只適用於時間性很強的資訊（如新聞），很多地方都用不上。

按訊息的「層次」

這個很抽像，究竟甚麼是訊息的「層次」呢？舉個例子，Wordpress 後台的目錄是這樣排的:

目錄次序為: Dashboard, Write, Manage, Comments, Blogroll, Presentation, Plugins, Users, Options

這個目錄既不依字母排序，也不是按使用頻率（在下段會說明原因），更無法按類別來排序，因為它本身就是一個個類別。為甚麼 Wordpress 要這樣排呢？在這個例字，Wordpress 先是按「使用先後」來排序的: 因為你必需發表（Write）文章後才可加以管理（Manage）。但總括來說，Wordpress 是按各功能在整個 Blog 中的位置（層次）來排序的。首先，Write、Manage、Comments、Blogroll 此四項只會對 Blog 中的某一點（node）產生作用，所以排在前方；而 Presentation、Plugins 這兩個設定則會影響到整個 Blog ，因此排在較後的地方；Users、Options 更是整個Blog 的根本，放在最後是理所當然。

為甚麼不能按「使用頻率」排序

好多人都喜歡按使用頻率來排序，並認為這樣做可以方便到用戶，但其實這種排序方法是極不可靠的。網站之所以不應該按使用頻率來排序，是因為使用頻率是因人而異的。而且一個新用戶來說，根本完全沒有使用頻率可言。更糟糕的是，絕大部份時侯，這個使用頻率只是一個假設，強行把假設的使用頻率強加到新用戶上是不合理的，因為用戶並不了解你的假設。作為一個設計師，應該嘗試理解用戶心中所想（心理模型），再依照這個模型設計出一個易學易用的介面，而不是強迫用戶適應它。

當然，不是全部資訊都一定要使用這幾個方法來排序，可能還有一些更棒而我又不知道的方法。至於之前提及的那種按使用頻率排序來方便用戶的方法，我視之為「捷徑」而不是排序。桌面上那些 icon，或者滑鼠的右鍵菜單都是捷徑的一種。容我另文再述。

（全文完）

脫稿了一整個月……

預知: 意料之內的設計

家儒 — Sat, 29 Mar 2008 00:57:06 +0000

跟藝術、設計不同，主觀的喜好並不能夠作為判斷介面設計好壞的準則。一個很炫的 UI 未必一定 User friendly，一個簡陋的介面也不一定會難用。而「預知」是家儒常以用來判斷某設計好壞的方法，適用於大部份的設計，在此分享一下。

可預知性

「預知」是指用戶能否在未做出任何動作之前，就已經能估計到某 UI component （如連結、按鈕）的用途、操作方法，以及會帶來的結果。一個設計良好的 UI 應該是可預知的 (Predictable)，會讓用戶感到一切盡在掌握的樣子。如下圖的這個表單，藍色理所當然的是連結；按鈕理所當然是用來提交資料；那個圓型一如以往是個單選項；四方型的 check box 是多選項。一切都是那麼理所當然。也許它不是最漂亮的設計，但起碼使用的時候不會干擾到用戶，用戶不用去重新學習、理解 components 之間的關係。

漂亮的設計從來都不是必須的，可用性卻是不可或缺。

要 UI 做到可預知，最基本是要做到讓用戶察覺得到 UI component 的存在。如果 UI component 無法被人察覺，跟本就沒有人會去碰它。長輩經常告誡我們超連結的樣式一定要讓人感覺像條超連結才行（可以點擊的），千萬不要跟內文有所混淆，說的就是這件事。

誤解與一致性

然之後是避免用戶對某 UI component 作出錯誤的估計，不要讓操作的實際結果跟用戶設想的有所出入。舉個例子，下圖是從 aNobii 首頁上截出來的，大家能夠猜到點擊書本封面後會帶你到甚麼地方嗎？

答案是「修改書本資料」，我想好多人都以為是「書本詳細資料」吧。事實上，aNobii 上大部份地方，點擊書本封面都會連結到「書本詳細資料」頁面，而不是修改資料。換言之，這些封面所以會引起誤解，是因為它們破壞了網站的一致性。明明點擊書本封面會連結去詳細資料頁面（這也是業界的一般做法，點擊產品圖片給你看詳細資料），為甚麼這次會不一樣？雖然在滑鼠停留在封面上的時候會有一個提示（如右圖示），但這種粗糙的做法就如臨時要求老闆更改會議地點一樣，並不可取。

始料不及

另一種令人出乎意料的狀況是，軟件自作聰明，做了一些用戶意料以外的動作。最經典的例子是，當用戶在音樂播放器的曲目庫中刪除一首歌，究竟該用戶是想該曲從曲目庫上移除，還是從電腦上刪走呢？

寧可讓軟件蠢一些，也不要因自作聰明而犯錯。一個 UI 的好壞，比的不是有多好，而是誰比較少犯錯。

交互設計也可創造藍海

家儒 — Sun, 16 Mar 2008 09:05:44 +0000

雖然我對交互設計甚為著迷，亦很著重交互設計，但始終不認為它是影響產品成敗的最關鍵因素。愚以為，交互設計者，最重要是避免犯錯；至於成敗，市場行銷比交互設計重要得多。我認為，產品與行銷，重要性各佔一半。剛才靈機一觸，發現我過往的想法不全然是對的。

我想到了 Apple。在個人電腦還沒誕生之前的 IBM 年代，電腦只是一台台只有少數專業人事才能與之交互的巨型機器。是甚麼改變了這個狀況？圖形介面（GUI）。圖形介面大大減少了人與機器之間交互的難度，遙不可及的電腦最終變成了每個人生活的一部份。從這個角度去看，是交互設計成就了 Apple，而不是現今被大力吹捧的工業設計。這就不難明白為甚麼 Apple 產品除了好看外，還這麼簡單易用了。（我覺得 Sony 的工業設計比 Apple 要好，但難用到死）

更重要的是，Apple 讓電腦從專家走向平民的這個舉動，不就是建立了一片「藍海」嗎？過往一直認為藍海只是行銷人的事情，而交互設計只是研發產品中眾多環節的其中一環，兩者互不相干。原來我忽略了一件事，原來交互設計不但能夠為產品加分，還能開闢一個全新的藍海市場！我以前只知道好的行銷必定有相配合的產品，現在發現原來產品也能倒過來領導行銷。小弟實在太孤陋寡聞了。（以前只是知道但不理解）

介面設計這件事今天看起來或許很簡單，不就開發一個軟件嘛。但是在當時 IBM 的年代，大家都把時間花在如何減少晶體的數量、增加運算的速度上。輸入指令是唯一跟電腦交互的辦法，而按鈕、圖標這些東西，是想也無法想像出來的吧？想到這裡，不禁感嘆 Apple 改變世界的偉大啊。（可以用「眾人皆醉我獨醒」來形容當年的 Apple 嗎？XD）

你我身邊，又有沒有這樣被忽視的市場呢？

全文完。

PS: 我並不是說全部交互設計都能起到建立藍海的作用。想想雪中送炭與錦上添花的分別，前者是致勝，後者是加分。謝謝。

讓用戶三思而後行

家儒 — Mon, 03 Mar 2008 08:20:39 +0000

Window 軟件移除程式

熟悉電腦的人或多或少都會有這樣的一種體驗︰安裝軟件的時候想也不想就一直按 Next、Next、Next；看到「I accept……」字樣的時候也不把整句讀完就接受了，可能該句是問你是否願意更改首頁設定而非使用條約；甚至在警告視窗彈出來後就直接點確定，也不管那是甚麼。

雖然 Don’t make me think 是介面設計的重要指導原則，但有時候我們或許想用戶在點擊前三思而後行。但當連警告視窗都被人們所忽略的時候，我們該如何把訊息有效地傳達給用戶呢？Adobe 的做法就很值得我們借鑑：

Adobe AIR Installer

比較上下兩圖，Window 的 Yes or No 做法比較空洞，而文字有可能會被用戶所忽略；而 Adobe 明確地在按鈕上告訴用戶接下來會發生的事情（Uninstall），大大減少被忽略的可能性。如果旁邊的 Icon 設計精細一點，相信會有更好效果。

全文完。碎碎念始。

有訂閱 Mr./ Ms. Days 的讀者應該知道，家儒加入了 MMDays 客座作者的行列。MMDays 是目前台灣最大的共筆部落格，主題圍繞網路、軟體、趨勢等。說實在的，沒想到大家會這麼喜歡這裡的文章，真是受寵若驚，我會繼續努力的。以後非技術性的文章我都會發一篇到 MMdays 當客座。說真的，MMDays 內容質素之高，給了我不少壓力，我總不能打爛 MMDays 的招牌是吧？

SEO到底是幹甚麼的?

家儒 — Sat, 23 Feb 2008 09:57:24 +0000

搜尋引擎對網站和公司業務的影響開始為人所知，也開始了解到搜尋引擎優化（Search Engine Optimization，以下簡稱SEO）的重要性。如果你是網路從業員，更是必須對 SEO 有所認識。

搜尋引擎排名算法的複雜可是人所共知的，所以很多人認為 SEO 也是種高技術含量的東西。加上搜尋引擎的排名算法本身是不公開的，更為 SEO 添上了一層神秘的面紗。本文將從非技術的角度，淺談一下到底 SEO 是何方神聖，並嘗試釐清大家對 SEO 的一些誤解。

SEO不等於作幣

恐怕這是人們對 SEO 的最大誤解。曾幾何時，SEO 業界的確大量利用 黑帽SEO方法 來提升網站排名。黑帽是指利用搜尋引擎排名算法的漏洞和不完美之處，透過各種欺騙手段來促進網站排名。由於黑帽SEO對搜尋結果有嚴重的負面影響，各家搜尋引擎都積極打擊黑帽SEO。搜尋引擎一方面改進算法，另一方面處罰使用黑帽SEO的網站。網站一旦被認為使用了黑帽SEO，有可能會被搜尋引擎從搜尋結果中移除，著名的例子有BMW德國站被 Google 處罰。

由於算法的改進和嚴厲的處罰，黑帽SEO已經日漸息微。取而代之的是遵循合理方法優化網站的白帽SEO。本文接下來將會探討一下白帽 SEO 的基本概念。

內容為王

「為讀者，而非搜尋引擎創造內容」是搜尋引擎和SEO都提倡的宗旨。優秀的內容是網站擭得良好排名的基本條件，SEO只是輔助。在要求搜尋引擎給你的網站一個好排名之前，請先問問自己，為甚麼它要給你好排名。從另一方面來看，即使搜尋引擎讓網頁名列前矛，但如果網頁內容不足以留下用戶，這些流量也是毫無意義的。

糟糕的內容，即使用上再好的SEO技術也無法對排名有多大影響；優秀的內容，則會引起談論和吸引別人連結，網站口碑載道之餘還能促進網頁排名。而對搜尋引擎來說，好的網頁內容應該包括：

原創內容：複製自別人的內容會降低搜尋引擎對網頁的信任度；
圖文並茂：圖片有助提升網站排名；
內容豐富，主題集中。

優化網頁內容

此部份方為 SEO 工作的真正核心。如果要我以一句話總結 SEO 在做的事情，我相信是「讓搜尋引擎準確地了解網頁內容」。因為搜尋引擎跟人不一樣，搜尋引擎用以索引網站的蜘蛛機器人（spider）其實並不了解文章和圖片的內容，網頁對它們來說只是一堆數據。搜尋引擎基本上只是將人們提交的關鍵字跟這堆數據進行比對，並將最相似的網頁優先列出。而在比對的過程中，搜尋引擎會給予網頁上某些部份的內容較大的權重（如標題），這些內容對結果會有較大影響。因此，只要掌握了搜尋引擎的算法，就能有效提升網站排名。而 SEO 工作中很重要的一部份，便是讓關鍵字出現在這些有較高權重的地方。這些地方包括:

網址
網站標題
圖片
粗體文字
超連結
….

各家搜尋引擎的算法都有所不同，所以一個優秀的 SEO 工作者還應該考慮到這些不同，對症下藥。

SEO的其他部份

雖然 SEO 並不是甚麼高深的技術，但也不能過份將之簡化。SEO 並不是在網頁上做些手腳就足夠的，除了以上所提及的內容優化技巧以外，SEO還包括很多其他的方面，例如：

關鍵字的選擇：影響到網站內容的取材；
競爭對手研究：知己知彼，百戰百勝；
外部連結的建立：連結是影響網站排名的最重要因素之一；
網站流量分析與觀察：作為增加、修改內容的依據；
….

本文忽略了很多執行上的細節，SEO 還會涉及到網站架構、程式設計等多方面，視乎情況而定。如果你正想架設網站，建議盡早把 SEO 納入網站開發的框架之內。對於一個開發中的網站來說，SEO本身並不會很大地提高成本，絕對是件一本萬利的事情。

關鍵字的選擇-SEO教學

家儒 — Sat, 09 Feb 2008 05:33:48 +0000

很多人都認為搜尋引擎優化（SEO）只是一些~~旁門左道的~~網站設計技巧。其實搜尋引擎最佳化的工作除了指代碼上的優化外，還有很多事情常為人所忽略，關鍵字（Keywords）的選擇就是其中一項。關鍵字的選擇是搜尋引擎最佳化的前期工作，而一個好的關鍵字能讓你的網站優化工作事半功倍。

其實任誰都說得出自家網站的核心關鍵字是甚麼 - 不就是網站的主題嘛，一個以搜索引擎排名優化為主題的網站，它的關鍵字自然是「搜索引擎優化」、「SEO」了，難道還會有別的？

那我倒想問一下，你怎樣肯定用戶會用「搜索引擎」來當關鍵字？為甚麼是「搜索引擎」不是「搜尋器」？知道 SEO 這個簡寫的人會是你的潛在客戶還是你的對手？

選擇關鍵字其實有很多事情需要考慮。以下我總結了我選擇關鍵字時的一些技巧，放出來分享一下。

關鍵字的普及度

搜尋引擎第一戒: 不要花時間在一個沒人用的關鍵字上面。網站在這種無用的關鍵字上排第一，對流量並不會有所幫助。除非是街知巷聞的公司品牌，否則大部份公司名字都屬於這種無用的關鍵字。

我們無法獲得某個關鍵字的被搜尋次數（以前 Overture 有提供相關數據，但是最近被停止了），但是仍可從 Yahoo! 的「搜尋建議」中看得出一些端倪。看看上圖，你會發覺「搜尋引擎」、「搜尋器」都是比「搜索引擎」熱門的關鍵詞。

結果頁面對用戶的影響

搜尋引擎結果頁面上的內容也會對用戶做成影響，因為用戶可能會依照頁面上的內容來作為下次搜尋時的參考。例如上圖，用戶如果對當前頁面的結果不滿意的時候，很可能會改以「搜尋引擎最佳化」作關鍵詞。用戶甚至會從廣告上提取關鍵字，例如「搜尋引擎廣告」、「網上推廣」或者「網路市場推廣」都有可能。B2B 網站要特別了解這一點，因為這類型的用戶一般都會貨比三家，轉換多個關鍵字來作搜尋。

關鍵字的「長尾」

上面都是針對如何選擇較為熱門的關鍵字，但這並不代表冷門的關鍵字毫無價值，只是不值得作為重點優化的關鍵字而已。而 Blog 正是最適合開發冷門的關鍵字的地方。冷門的關鍵字包括:

錯別字！（真是無孔不入啊）
簡寫
別稱
同義詞、近義詞
關鍵詞的各種組合
「如何？」、「免費」、「為甚麼」等熱門詞彙

究極的 IE Hack

家儒 — Fri, 25 Jan 2008 18:25:58 +0000

大家都應該有聽說了，Microsoft 忽然大發慈悲，決定在下個月強制把 Internet Explorer 6 更新為 Internet Explorer 7 。對於網頁設計師來說，IE6 簡直是個惡夢，所以這次更新，對廣大的網頁設計師來說簡直是個福音。

但是按家儒我手上的數據來看，香港目前 IE7 的市佔率為 18% 左右，IE6 為 72%。比例會因網站屬性而有所不同，本站 Firefox 用戶就佔了近 40%。無講如何，即使在強制更新後，IE 6 的使用率應該仍然未至於可以忽略的水平。所以短時間內， IE Hack 仍然會是所有網頁設計師必備的安家良藥。

所以今天我會介紹一個超級好用的 IE Hack，一個簡單的 Hack︰
h1 { color:blue; #color:red; /* IE7 */ _color:green; /* IE6 */ *color:yellow; /* for all IE */ }

一個符號，就這麼簡單﹗

這個方法已經可以解決大部份簡單的 IE 移位問題。

雖然 IE6 的 Bug 很令人討厭，但不失為構建個人競爭力的一種好途徑吧？畢竟網頁製作的門檻已經很低了，想靠製作網頁維生實在是件很危險的事。

雖然 Web Standard 跟 SEO 在某程度上小小地提高了進入門檻，但是此兩者說白了都不過是一些很簡單的理念。但是 IE 的 Bug 卻大大提高了它們學習的門檻，同一句程式碼卻得來兩個結果，想想也覺得討厭吧。有時候遇到一些奇怪的 bug，想用 Google search 一下，卻不知道要怎麼形容… Orz。

另外，神級網頁開發人員跟一般網頁設計師的分別在哪裡？就是 debug 的速度啊﹗每次 debug 的時候，我都會這麼想的。

btw，小弟我已經慢慢把學習重心移向 back-end 了，決心當一個會設計介面、SEO、Photoshop 的 Programmer。

iPhone很酷嗎?先看這個!

家儒 — Thu, 17 Jan 2008 01:30:06 +0000

很多人都說 iPhone 的介面很醋，用戶體驗又很棒等等一堆的。有沒有想過，其實一般手機，即使沒有多點觸控、水平偵測等那一堆高科技的加持下，也有能力做到令人 WoW! 聲的效果呢？快看看這個叫 Cell UI 的 Project，裡面有精彩得令人大叫 WOW! 的創新手機 UI Demo!

這些介面雖然都很破舊立新，但大部份的設計其實都很易上手，易學性滿分。
我真的不需要二百萬像素、Touch screen，也不需要甚麼 Google Android。給我一台可以套用上面這些 Flash UI 的手機我就很滿足了。希望台灣有那家廠商能夠推出一部，低價但UI和工設都人叫 WOW 的手機，一整個藍海啊。

（全文完，碎碎念始）

這個 Blog 已經近兩個星期沒更新了。主要原因是本人最近超級忙，完全沒有時間投放在這個 Blog 上。由於本人重質不重量的喜好，類似情況可能還會持續多一陣子。不過保證這裡每篇文章都不會浪費你的時間。