<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>&#187; 用戶體驗、可用性研究介面設計的相關文章</title>
	<atom:link href="http://ka-yue.com/blog/category/user-experience/feed" rel="self" type="application/rss+xml" />
	<link>http://ka-yue.com/blog</link>
	<description></description>
	<lastBuildDate>Mon, 15 Mar 2010 16:05:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>抽絲剝繭的 icon 設計</title>
		<link>http://ka-yue.com/blog/realism-in-ui-design</link>
		<comments>http://ka-yue.com/blog/realism-in-ui-design#comments</comments>
		<pubDate>Sun, 14 Mar 2010 19:16:49 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面設計]]></category>
		<category><![CDATA[界面設計]]></category>
		<category><![CDATA[設計]]></category>
		<category><![CDATA[設計隱喻]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=589</guid>
		<description><![CDATA[
一個 icon 設計的好壞，除了好看與否以外，還有是功能性的考量 － 是否容易、準確地讓用戶理解到其所想表達的意思。每一個 UI 上的 icon （符號）背後其實都是一個「隱喻」，運用真實世界所熟悉的概念來描述某功能。
其中一個影響 icon 表達能力的因素是 icon 的真實度（realism）。在《Realism in  UI Design》一文中作者舉出了如下例子：


可見 icon 的呈現並不是越真實越好。一個優秀的 icon 必須抽絲剝繭，把不必要的細節去除掉，同時又不能過於抽像。事實上，一個 icon 的認知度跟細節有如下圖的關係：

當然，抽絲之前當然先得確保對像是正確。特別是要形像化一些抽像概念的時候，選擇一個正確的符號會是整個設計中最困難的一個環節。Mac 軟件開發公司 Panic 的設計部門在設計 清除 Clear 按鈕的時候就嘗試了二十多種做法：

結果該團隊決定參考 Apple 的做法，直接寫 Clear 了事 XD
著名的 icon 設計公司 iconwerk.de 早前推出了一個 video podcast，展示了他們設計 icon 的過程。包括一些描像概念的 icon。

希望你喜歡本文章。
]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="size-full wp-image-590 aligncenter" title="iconwerkTV" src="http://ka-yue.com/blog/wp-content/uploads/2010/03/iconwerkTV.png" alt="" width="600" height="256" /></p>
<p>一個 icon 設計的好壞，除了好看與否以外，還有是功能性的考量 － 是否容易、準確地讓用戶理解到其所想表達的意思。<strong>每一個 UI 上的 icon （符號）背後其實都是一個「隱喻」</strong>，運用真實世界所熟悉的概念來描述某功能。</p>
<p>其中一個影響 icon 表達能力的因素是 icon 的真實度（realism）。在《<a title="Permanent Link to Realism in UI Design" rel="bookmark" href="http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/">Realism in  UI Design</a>》一文中作者舉出了如下例子：</p>
<p><span id="more-589"></span></p>
<p style="text-align: center;"><img class="size-full wp-image-591  aligncenter" title="realism_in_ui_design" src="http://ka-yue.com/blog/wp-content/uploads/2010/03/realism_in_ui_design.png" alt="" width="480" height="200" /></p>
<p>可見 icon 的呈現並不是越真實越好。一個優秀的 icon 必須抽絲剝繭，<strong>把不必要的細節去除掉，同時又不能過於抽像</strong>。事實上，一個 icon 的認知度跟細節有如下圖的關係：</p>
<p style="text-align: center;"><img class="size-full wp-image-592  aligncenter" title="confusion_cognition" src="http://ka-yue.com/blog/wp-content/uploads/2010/03/confusion_cognition.png" alt="" width="449" height="141" /></p>
<p>當然，抽絲之前當然先得確保對像是正確。特別是要<strong>形像化一些抽像概念</strong>的時候，選擇一個正確的符號會是整個設計中最困難的一個環節。Mac 軟件開發公司 <a title="panic" href="http://www.panic.com/" target="_blank">Panic</a> 的設計部門在<a title="clear button icon" href="http://www.panic.com/blog/2010/02/clear/" target="_blank">設計 清除 Clear 按鈕</a>的時候就嘗試了二十多種做法：</p>
<p style="text-align: center;"><img class="size-full wp-image-593  aligncenter" title="clears-button" src="http://ka-yue.com/blog/wp-content/uploads/2010/03/clears-button.png" alt="" width="515" height="235" /></p>
<p>結果該團隊決定參考 Apple 的做法，直接寫 Clear 了事 XD</p>
<p>著名的 icon 設計公司 <a title="iconwerk" href="http://www.iconwerk.de/" target="_blank">iconwerk.de</a> 早前推出了一個 video podcast，展示了他們設計 icon 的過程。包括一些描像概念的 icon。</p>
<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/DPj2cZNXkx4&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;hd=1" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="640" height="385" src="http://www.youtube.com/v/DPj2cZNXkx4&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;hd=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>希望你喜歡本文章。</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/realism-in-ui-design" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/realism-in-ui-design/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>何以視若無睹</title>
		<link>http://ka-yue.com/blog/failures-of-visual-awareness</link>
		<comments>http://ka-yue.com/blog/failures-of-visual-awareness#comments</comments>
		<pubDate>Sat, 06 Mar 2010 21:21:21 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UI design]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=577</guid>
		<description><![CDATA[
先來數一數白隊共互傳了多少次球？
如果有觀察過一些不熟悉電腦操作軟件／網頁的情況，大概會時常發生一些 developer 和 designer 難以理解的現像－何以這麼大的一顆按鈕、一個告示，居然會被忽略掉？
並不是因為他們有先天缺陷，「發雞盲」。如果明白到所有視覺影像都需先經大腦處理方可解讀，會發生以上情況就不是那麼難以理解了。學者稱之為「failures   of visual awareness」，其成因眾說紛紜，本文無意探討（『演化心理學！』蕭生聽眾如是說 XD）。failures   of visual awareness 可大概分為兩類，Change Blindness 及 Inattentional Blindness。

illinois university 對此兩者進行了一系列研究，並有大量錄像可供觀看，十分有趣：  http://viscog.beckman.illinois.edu/djs_lab/demos.html
Change Blindness 是指人對事的的變化視若無睹。例如緩慢的局部漸變往往很容易地被人忽略。在「A subject in a real-world person change event」這個實驗中，被實驗者甚至無法察覺到交談對像已被換掉（前提是不能是帥哥美女、年紀相近，否則印像太深會影響結果 XD）。
Inattentional Blindness 比較為人所熟知，是指注意力集中的時候往往會無視掉畫面上的其他元素。文章開頭的那則廣告已是一例，第一次看該影片的人沒多少個能發現那隻黑猩猩。影響 Inattentional blindness 的最大因素是用戶的認知負擔。負擔越大，需要更專心，便越容易無視身邊環境。其實就該實驗而言，兩隊顏色的相比度越高（即相似性減低），受試者會更難發現大猩猩。當然大猩猩跟兩隊的相似性也會影響結果。
對 UI 設計有何啟示？老生常談：

減低用戶認知負擔，一個 UI 只做一件事；
利用對比突出重點。

]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/hwCzasHBXNc&amp;hl=en_US&amp;fs=1&amp;rel=0" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="480" height="385" src="http://www.youtube.com/v/hwCzasHBXNc&amp;hl=en_US&amp;fs=1&amp;rel=0" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p style="text-align: center;">先來數一數白隊共互傳了多少次球？</p>
<p>如果有觀察過一些不熟悉電腦操作軟件／網頁的情況，大概會時常發生一些 developer 和 designer 難以理解的現像－何以這麼大的一顆按鈕、一個告示，居然會被忽略掉？</p>
<p>並不是因為他們有先天缺陷，「發雞盲」。如果明白到所有視覺影像都需先經大腦處理方可解讀，會發生以上情況就不是那麼難以理解了。學者稱之為「failures   of visual awareness」，其成因眾說紛紜，本文無意探討（『演化心理學！』蕭生聽眾如是說 XD）。failures   of visual awareness 可大概分為兩類，Change Blindness 及 Inattentional Blindness。</p>
<p><span id="more-577"></span></p>
<p>illinois university 對此兩者進行了一系列研究，並有大量錄像可供觀看，十分有趣： <a href="http://viscog.beckman.illinois.edu/djs_lab/demos.html" target="_blank"> http://viscog.beckman.illinois.edu/djs_lab/demos.html</a></p>
<p>Change Blindness 是指人對事的的變化視若無睹。例如<a href="http://viscog.beckman.illinois.edu/flashmovie/1.php" target="_blank">緩慢的局部漸變往往很容易地被人忽略</a>。在「A subject in a real-world person change event」這個實驗中，<a href="http://viscog.beckman.illinois.edu/flashmovie/12.php" target="_blank">被實驗者甚至無法察覺到交談對像已被換掉</a>（前提是不能是帥哥美女、年紀相近，否則印像太深會影響結果 XD）。</p>
<p>Inattentional Blindness 比較為人所熟知，是指注意力集中的時候往往會無視掉畫面上的其他元素。文章開頭的那則廣告已是一例，第一次看該影片的人沒多少個能發現那隻黑猩猩。影響 Inattentional blindness 的最大因素是用戶的<strong>認知負擔</strong>。負擔越大，需要更專心，便越容易無視身邊環境。其實就該實驗而言，兩隊顏色的相比度越高（即相似性減低），受試者會更難發現大猩猩。當然大猩猩跟兩隊的相似性也會影響結果。</p>
<p>對 UI 設計有何啟示？老生常談：</p>
<ol>
<li>減低用戶認知負擔，一個 UI 只做一件事；</li>
<li>利用對比突出重點。</li>
</ol>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/failures-of-visual-awareness" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/failures-of-visual-awareness/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>電子雜誌全新體驗</title>
		<link>http://ka-yue.com/blog/new-digital-magazine-experience</link>
		<comments>http://ka-yue.com/blog/new-digital-magazine-experience#comments</comments>
		<pubDate>Wed, 17 Feb 2010 13:27:21 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Digital Magazine]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[電子雜誌]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=554</guid>
		<description><![CDATA[
（影片可能無法在 RSS Reader 上正常顯示）
一直認為目前市場上所謂「電子雜誌」的存在是種倒退，將影印版原原本本地轉成 PDF 格式搬到電腦上，缺乏互動，麻煩之餘比網頁更加不如。

最近 Adobe 跟 WIRED magazine 在 TED 上展示了如影片中的電子雜誌概念，利用 tablet 提供讀者全新的使用體驗：

基於 touch screen 的設計
image slideshows
產品 360 度全觀可能
影音可能
當然跟 iPhone 一樣有垂直／水平版本

這大概是最接近我理想中的電子雜誌。而且變成現實的機會不少，因為成本上大概不會比傳統雜誌高出多少。除了那個 360 view 以外，其他素材都是可跟影印版共用。平台方面也是一次性的支出，只需開發一次，說不定 Adobe 還會提供個 framework 呢。唯一成本大概是要請幾個長駐的 developer。
此 demo 基於 Adobe AIR （Flash）建成的，不提供下載，亦大概不可能出現在 iPad 上。
]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="256" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="FlashVars" value="fileID=5117&amp;context=145&amp;embeded=true&amp;environment=production" /><param name="src" value="http://tv.adobe.com/assets//swf/player.swf" /><param name="flashvars" value="fileID=5117&amp;context=145&amp;embeded=true&amp;environment=production" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="425" height="256" src="http://tv.adobe.com/assets//swf/player.swf" flashvars="fileID=5117&amp;context=145&amp;embeded=true&amp;environment=production" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p style="text-align: center;"><span style="color: #888888;"><em>（影片可能無法在 RSS Reader 上正常顯示）</em></span></p>
<p>一直認為目前市場上所謂「電子雜誌」的存在是種倒退，將影印版原原本本地轉成 PDF 格式搬到電腦上，缺乏互動，麻煩之餘比網頁更加不如。</p>
<p><span id="more-554"></span></p>
<p>最近 Adobe 跟 WIRED magazine 在 TED 上展示了如影片中的電子雜誌概念，利用 tablet 提供讀者全新的使用體驗：</p>
<ul>
<li>基於 touch screen 的設計</li>
<li>image slideshows</li>
<li>產品 360 度全觀可能</li>
<li>影音可能</li>
<li>當然跟 iPhone 一樣有垂直／水平版本</li>
</ul>
<p>這大概是最接近我理想中的電子雜誌。而且變成現實的機會不少，因為成本上大概不會比傳統雜誌高出多少。除了那個 360 view 以外，其他素材都是可跟影印版共用。平台方面也是一次性的支出，只需開發一次，說不定 Adobe 還會提供個 framework 呢。唯一成本大概是要請幾個長駐的 developer。</p>
<p>此 demo 基於 Adobe AIR （Flash）建成的，不提供下載，亦大概不可能出現在 iPad 上。</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/new-digital-magazine-experience" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/new-digital-magazine-experience/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Moblin 2 Netbook Beta UI</title>
		<link>http://ka-yue.com/blog/moblin-beta-netbook-ui</link>
		<comments>http://ka-yue.com/blog/moblin-beta-netbook-ui#comments</comments>
		<pubDate>Thu, 21 May 2009 08:37:30 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[intel]]></category>
		<category><![CDATA[moblin]]></category>
		<category><![CDATA[netbook]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UI design]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>
		<category><![CDATA[用戶介面]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=479</guid>
		<description><![CDATA[
在 engadget 上看到這則關於 Moblin 2.0 beta 的消息。Moblin 是 Intel 旗下的一個 Linux-based netbook OS project，雖然目前只是 beta 版，但從 ui 上看已經非常成熟（金玉其外？）。我已經深深的被它的 ui 吸引，希望能取代 xp 成為主要的 netbook OS（當然絕大部份都會同時擁有兩個 os 啦）。就是風格方面有點像 sony 的 VAIO/PSP。
以下是官方提供的操作畫面：


流暢、簡單而華麗（？）的 UI，令人讚不絕口。我對 netbook 要求只有：email、calendar、RSS reader、browser、office、media player，目前 moblin 好像尚缺 open office （email、calendar、rss reader都可靠browser來完成），但已經滿足了我大部份需求。

上圖是 moblin alpha 版的 ui。喜見 beta 版的改進不單單只是重繪 icon 這麼馬虎草率，而是從根本裡重新制作。
如欲嘗鮮請到 http://moblin.org/
]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-480" title="m_zone" src="http://ka-yue.com/blog/wp-content/uploads/2009/05/m_zone.png" alt="m_zone" width="600" height="300" /></p>
<p>在 engadget 上<a href="http://chinese.engadget.com/2009/05/21/moblin-2-0-beta-impressively-demoed-on-video/">看到這則關於 Moblin 2.0 beta 的消息</a>。Moblin 是 Intel 旗下的一個 Linux-based netbook OS project，雖然目前只是 beta 版，但從 ui 上看已經非常成熟（金玉其外？）。我已經深深的被它的 ui 吸引，希望能取代 xp 成為主要的 netbook OS（當然絕大部份都會同時擁有兩個 os 啦）。就是風格方面有點像 sony 的 VAIO/PSP。</p>
<p>以下是官方提供的操作畫面：</p>
<p><span id="more-479"></span></p>
<p style="text-align: center;"><object width="560" height="340" data="http://www.youtube.com/v/vsCpIeLLoT8&amp;hl=en&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/vsCpIeLLoT8&amp;hl=en&amp;fs=1&amp;rel=0" /><param name="allowfullscreen" value="true" /></object></p>
<p>流暢、簡單而華麗（？）的 UI，令人讚不絕口。我對 netbook 要求只有：email、calendar、RSS reader、browser、office、media player，目前 moblin 好像尚缺 open office （email、calendar、rss reader都可靠browser來完成），但已經滿足了我大部份需求。</p>
<p><img class="aligncenter size-full wp-image-481" title="moblin-2-alpha" src="http://ka-yue.com/blog/wp-content/uploads/2009/05/moblin-2-alpha.png" alt="moblin-2-alpha" width="600" height="360" /></p>
<p>上圖是 moblin alpha 版的 ui。喜見 beta 版的改進不單單只是重繪 icon 這麼馬虎草率，而是從根本裡重新制作。</p>
<p>如欲嘗鮮請到 <a href="http://moblin.org/">http://moblin.org/</a></p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/moblin-beta-netbook-ui" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/moblin-beta-netbook-ui/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Designing Web Interfaces</title>
		<link>http://ka-yue.com/blog/designing-web-interfaces</link>
		<comments>http://ka-yue.com/blog/designing-web-interfaces#comments</comments>
		<pubDate>Sat, 14 Mar 2009 06:32:07 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[presentation]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=435</guid>
		<description><![CDATA[
Bill Scott 為其新書《Designing Web Interfaces》作了一場演講，內容主要圍繞著書中談及的 6 個網頁介面設計原則，並提供了大量例子和 patterns。該 6 個原則為：

make it direct
keep it lightweight
stay on the page
provide invitation
use transition
react immediately


作者很大方的把書中的大量圖片上載到 Flickr，大方得令人懷疑有再沒有購買的需要。就書的內容而言，雖然內容稍欠新意，但看在大量整理得井井有條的 patterns 份上，應該不失為一本優秀的參考書。而該演講已經可以在 Youtube 觀看，slides 亦可在 slideshare.net 下載。
]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-436" title="designing-web-interfaces" src="http://ka-yue.com/blog/wp-content/uploads/2009/03/designing-web-interfaces.png" alt="designing-web-interfaces" width="600" height="200" /></p>
<p>Bill Scott 為其新書《<a href="http://www.amazon.com/gp/product/0596516258?ie=UTF8&amp;tag=looksgoodwork-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0596516258" target="_blank">Designing Web Interfaces</a>》作了一場演講，內容主要圍繞著書中談及的 6 個網頁介面設計原則，並提供了大量例子和 patterns。該 6 個原則為：</p>
<ul>
<li>make it direct</li>
<li>keep it lightweight</li>
<li>stay on the page</li>
<li>provide invitation</li>
<li>use transition</li>
<li>react immediately</li>
</ul>
<p><span id="more-435"></span></p>
<p>作者很大方的把書中的大量圖片<a href="http://www.flickr.com/photos/designingwebinterfaces" target="_blank">上載到 Flickr</a>，大方得令人懷疑有再沒有購買的需要。就書的內容而言，雖然內容稍欠新意，但看在大量整理得井井有條的 patterns 份上，應該不失為一本優秀的參考書。而該演講已經可以在 <a href="http://www.youtube.com/watch?v=LW4MwvgW_ww&amp;fmt=18" target="_blank">Youtube 觀看</a>，slides 亦可在 <a href="http://www.slideshare.net/billwscott/designing-web-interfaces-book-oreilly-webcast?src=embed#" target="_blank">slideshare.net 下載</a>。</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/designing-web-interfaces" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/designing-web-interfaces/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Visual Communication for the Web</title>
		<link>http://ka-yue.com/blog/visual-communication-for-the-web</link>
		<comments>http://ka-yue.com/blog/visual-communication-for-the-web#comments</comments>
		<pubDate>Wed, 11 Mar 2009 22:55:53 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[LukeW]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>
		<category><![CDATA[可用性]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=430</guid>
		<description><![CDATA[
早前介紹過的 LukeW 在 VizThink 2009 中就網上視覺傳播作了一場演講，內容包括 介紹利用視覺組織來傳達重要訊息、實作技巧和案例。
雖然沒找到該演講的視頻，但 slides 已經可以公開下載，有興趣的讀者請按此處下載（5MB PDF）。

以下是一些重點：

The end goal of visual communication

Quicker communication

Usefulness - what is it?
Usability - How to use it?
Desirability - Why should I care?




What makes great presentation?

Visual Organization

Communicates the relationships between user interface elements


Personality

Communicates the brand essence of a product




Terms

Visual Communication is part
Visual Organization and part personality.
Visual Hierarchy is [...]]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-429" title="visual-communication-for-web" src="http://ka-yue.com/blog/wp-content/uploads/2009/03/visual-communication-for-web.png" alt="visual-communication-for-web" width="600" height="300" /></p>
<p><a href="http://ka-yue.com/blog/ebook-from-lukew" target="_blank">早前介紹過的 LukeW</a> 在 VizThink 2009 中就網上視覺傳播作了一場演講，內容包括 介紹利用視覺組織來傳達重要訊息、實作技巧和案例。</p>
<p>雖然沒找到該演講的視頻，但 slides 已經可以公開下載，有興趣的讀者請<a href="http://www.lukew.com/resources/articles/VisualCommunicationForWeb_LukeW.pdf">按此處下載</a>（5MB PDF）。</p>
<p><span id="more-430"></span></p>
<p>以下是一些重點：</p>
<ul>
<li>The end goal of visual communication
<ul>
<li><strong>Quicker </strong>communication
<ul>
<li><strong>Usefulness </strong>- what is it?</li>
<li><strong>Usability </strong>- How to use it?</li>
<li><strong>Desirability </strong>- Why should I care?</li>
</ul>
</li>
</ul>
</li>
<li>What makes great presentation?
<ul>
<li>Visual Organization
<ul>
<li>Communicates the <strong>relationships </strong>between user interface elements</li>
</ul>
</li>
<li>Personality
<ul>
<li>Communicates the <strong>brand </strong>essence of a product</li>
</ul>
</li>
</ul>
</li>
<li>Terms
<ul>
<li><strong>Visual Communication</strong> is part</li>
<li><strong>Visual Organization</strong> and part personality.</li>
<li><strong>Visual Hierarchy</strong> is a deliberate prioritization of</li>
<li><strong>Visual Weight</strong> enabled by the manipulation of</li>
<li><strong>Visual Relationships</strong> to create</li>
<li><strong>Meaning</strong> for users.</li>
</ul>
</li>
</ul>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/visual-communication-for-the-web" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/visual-communication-for-the-web/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Don&#8217;t Click It</title>
		<link>http://ka-yue.com/blog/dont-click-it</link>
		<comments>http://ka-yue.com/blog/dont-click-it#comments</comments>
		<pubDate>Thu, 05 Mar 2009 04:07:39 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[DontClick.it]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UI design]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=425</guid>
		<description><![CDATA[
Vista 其中一個為人垢病的地方，是其問長問短絮絮不休的介面，每一個多餘的點擊都令人不勝其煩。
想試一下「無點擊」的 UI 嗎？到 DontClick.it 體驗一下吧。這是一個建立於 2005 年的實驗性網站，這網站不允許訪客使用滑鼠點擊，否則會出現警告畫面。你會發現，人的習慣是很難改變的。

網站內包含了一些無點擊 UI 下可行方法的研究和實作。其實制作一個無點擊 UI 是有一定難度的，因為電腦上常用的 mouse events 在不允許點擊環境下只剩下 mouse over 一項。相反，一個 touch screen UI 卻沒有了 mouse over 這一 event ，因為每個 touch 都是一個 click。有甚麼情況是無法點擊呢？眼球控制的 UI 就是了，如果有的話。  
另外，dontclick.it 會把訪客的一舉一動記錄在案，並公開讓大家在網上重播。
]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-426" title="dontclickit" src="http://ka-yue.com/blog/wp-content/uploads/2009/03/dontclickit.png" alt="dontclickit" width="600" height="250" /></p>
<p>Vista 其中一個為人垢病的地方，是其問長問短絮絮不休的介面，每一個多餘的點擊都令人不勝其煩。</p>
<p>想試一下「無點擊」的 UI 嗎？到 <a href="http://www.dontclick.it/" target="_blank">DontClick.it</a> 體驗一下吧。這是一個建立於 2005 年的實驗性網站，這網站不允許訪客使用滑鼠點擊，否則會出現警告畫面。你會發現，人的習慣是很難改變的。</p>
<p><span id="more-425"></span></p>
<p>網站內包含了一些無點擊 UI 下可行方法的研究和實作。其實制作一個無點擊 UI 是有一定難度的，因為電腦上常用的 mouse events 在不允許點擊環境下只剩下 mouse over 一項。相反，一個 touch screen UI 卻沒有了 mouse over 這一 event ，因為每個 touch 都是一個 click。有甚麼情況是無法點擊呢？眼球控制的 UI 就是了，如果有的話。 <img src='http://ka-yue.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>另外，dontclick.it 會把訪客的一舉一動記錄在案，並公開讓大家在網上重播。</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/dont-click-it" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/dont-click-it/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Microsoft 未來辦公室概念展示</title>
		<link>http://ka-yue.com/blog/microsoft-%e6%9c%aa%e4%be%86%e8%be%a6%e5%b7%a5%e5%ae%a4%e6%a6%82%e5%bf%b5%e5%b1%95%e7%a4%ba</link>
		<comments>http://ka-yue.com/blog/microsoft-%e6%9c%aa%e4%be%86%e8%be%a6%e5%b7%a5%e5%ae%a4%e6%a6%82%e5%bf%b5%e5%b1%95%e7%a4%ba#comments</comments>
		<pubDate>Mon, 02 Mar 2009 16:12:10 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Concept]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Office Labs]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>
		<category><![CDATA[概念]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=412</guid>
		<description><![CDATA[
Microsoft 的研發部門 Microsoft Office Labs 最近把其對「未來辦公室」的概念研究成果公開，並制作成一段長達 5 分鐘的影片。片中展示了大量新的高科技產品和概念，如無處不在的 multi-touch 投射式螢幕（surface）、比哈利波特魔法世界更炫的電子報紙，透明螢幕、即時翻譯、cross-device interaction 等等。

雖然片中所及大部份都是天馬行空，但當中不少 UI 的設計都很具參值，特別是與人交互方面，值得留意。按此觀看影片。
觀看後欲罷不能？此 Powerpoint 介紹了片中的每個概念，方便大家參詳參詳。
PS: 感謝網友 Kin 提醒，應為「辦公室」而非「辦工室」。再次感謝。
]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-413" title="microsoft-office-labs" src="http://ka-yue.com/blog/wp-content/uploads/2009/03/microsoft-office-labs.png" alt="microsoft-office-labs" width="600" height="250" /></p>
<p>Microsoft 的研發部門 <a href="http://www.officelabs.com/" target="_blank">Microsoft Office Labs</a> 最近把其對「未來辦公室」的概念研究成果公開，並制作成一段長達 5 分鐘的影片。片中展示了大量新的高科技產品和概念，如無處不在的 multi-touch 投射式螢幕（surface）、比哈利波特魔法世界更炫的電子報紙，透明螢幕、即時翻譯、cross-device interaction 等等。</p>
<p><span id="more-412"></span></p>
<p>雖然片中所及大部份都是天馬行空，但當中不少 UI 的設計都很具參值，特別是與人交互方面，值得留意。<a href="http://www.istartedsomething.com/20090228/microsoft-office-labs-vision-2019-video/" target="_blank">按此觀看影片</a>。</p>
<p>觀看後欲罷不能？<a href="http://www.microsoft.com/presspass/download/exec/elop/2009/02-27ElopWhartonKEynote.ppt" target="_blank">此 Powerpoint</a> 介紹了片中的每個概念，方便大家參詳參詳。</p>
<p>PS: 感謝網友 Kin 提醒，應為「辦<strong>公</strong>室」而非「辦工室」。再次感謝。</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/microsoft-%e6%9c%aa%e4%be%86%e8%be%a6%e5%b7%a5%e5%ae%a4%e6%a6%82%e5%bf%b5%e5%b1%95%e7%a4%ba" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/microsoft-%e6%9c%aa%e4%be%86%e8%be%a6%e5%b7%a5%e5%ae%a4%e6%a6%82%e5%bf%b5%e5%b1%95%e7%a4%ba/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>TAT－創新手機UI設計</title>
		<link>http://ka-yue.com/blog/tat-mobile-user-interfaces</link>
		<comments>http://ka-yue.com/blog/tat-mobile-user-interfaces#comments</comments>
		<pubDate>Fri, 27 Feb 2009 23:59:17 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[mobile user interface]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UI design]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>
		<category><![CDATA[手機]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=408</guid>
		<description><![CDATA[
瑞典 UI 團隊 TAT–The Astonishing Tribe 設計了很多創新手機 UI，有興趣的讀者不妨瀏覽一下他們的 showcase 或 youtube 的 channel。例如上方影片所演示的 3D eyetracking UI，令手機 UI 變得有層次、有深度。


上面是 TAT 另一個很有新意的 UI 概念性作品－Print UI。Print UI 捨棄了傳統手機 UI 的造法，給使用者一種耳目一新的感覺。
如果 Google Android 的 UI 也這麼有設計感，應該會大賣吧？
]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><object width="480" height="385" data="http://www.youtube.com/v/7SImOIMcMlk&amp;hl=en&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/7SImOIMcMlk&amp;hl=en&amp;fs=1&amp;rel=0" /><param name="allowfullscreen" value="true" /></object></p>
<p>瑞典 UI 團隊 TAT–<a href="http://www.tat.se/">The Astonishing Tribe</a> 設計了很多創新手機 UI，有興趣的讀者不妨瀏覽一下他們的 <a href="http://www.tat.se/site/showroom/latest_design.html" target="_blank">showcase</a> 或 youtube 的 <a href="http://www.youtube.com/user/TATMobileUI">channel</a>。例如上方影片所演示的 3D eyetracking UI，令手機 UI 變得有層次、有深度。</p>
<p><span id="more-408"></span></p>
<p style="text-align: center;"><object width="480" height="385" data="http://www.youtube.com/v/u2EOk-8iuCk&amp;hl=en&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/u2EOk-8iuCk&amp;hl=en&amp;fs=1&amp;rel=0" /><param name="allowfullscreen" value="true" /></object></p>
<p>上面是 TAT 另一個很有新意的 UI 概念性作品－Print UI。Print UI 捨棄了傳統手機 UI 的造法，給使用者一種耳目一新的感覺。</p>
<p>如果 Google Android 的 UI 也這麼有設計感，應該會大賣吧？</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/tat-mobile-user-interfaces" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/tat-mobile-user-interfaces/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Progress bar 進度條效果研究</title>
		<link>http://ka-yue.com/blog/the-effect-of-the-progress-bar</link>
		<comments>http://ka-yue.com/blog/the-effect-of-the-progress-bar#comments</comments>
		<pubDate>Tue, 24 Feb 2009 16:31:56 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Progress bar]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=401</guid>
		<description><![CDATA[
本文轉載自 UIUI，很有參考價值的一篇文章。
來自 CMU 的研究, 他們在 UIST 2007 上面發表了一篇名為 Rethinking Progress Bar 的研究, 他們發現不同的進度表現方式, 使用者感受的確會有所不同, 恩, 聽起來真是廢話, 不過如果只有這樣子的廢話的話, 應該是上不了 UIST. 他們研究了九種不同的進度表現方式, 最後得出了一個結論:

測試顯示的結果告訴我們，凡是曲線中有明顯停頓的，使用者所感知的進度都比較慢，而進度中一直在加速的，使用者都會覺得進 度走得很快。研究者們還指出雖然一個穩 定的系統應該使用線性的進度條，但是如果能應用加速型的進度條，確實能小幅地改善用戶體驗。但是當進度並不能被準確測量時，進度條並不是一個很好的選擇， 實際情況下可以選用不斷重複的動畫來代替
恩, 所以, 下次設計 progress bar 時, 請讓它不停的跑, 然後讓它越跑越快…反正人的感情是很容易被欺騙了

順道一提, 九種 progress bar 為:

線性 （Linear）：遞增率是常量
前停頓（Early paus）：類似於線性，但在25%進度附近進度遞增非常慢
後停頓（Late paus）：類似於線性，但在75%進度附近進度遞增非常慢
慢速波狀曲線（Slow wavy ）：速度時快時慢，整個過程有3個週期
快速波狀曲線（Fast wavy ）：類似於慢速波狀曲線，但波長很短，有很多週期
平方曲線（Power）：進度的遞增率不斷在增加，也就是一開始很慢，隨後越來越快
反平方曲線（Inverse power）：和平方曲線像反，一開始很快，隨後越來越慢
快速平方曲線（Fast power）：類似于平方曲線，只是進度的遞增率更高
快速反平方曲線（Inverse fast power）和反平方曲線類似,只是進度的變化率更大

via: 譯言
]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-402" title="progress-bar" src="http://ka-yue.com/blog/wp-content/uploads/2009/02/progress-bar.gif" alt="progress-bar" width="600" height="200" /></p>
<p>本文轉載自 <a href="http://uiui.mmdays.com/2009/02/12/rethinking-progress-bar/" target="_blank">UIUI</a>，很有參考價值的一篇文章。</p>
<p>來自 CMU 的研究, 他們在 UIST 2007 上面發表了一篇名為 Rethinking Progress Bar 的研究, 他們發現不同的進度表現方式, 使用者感受的確會有所不同, 恩, 聽起來真是廢話, 不過如果只有這樣子的廢話的話, 應該是上不了 UIST. 他們研究了九種不同的進度表現方式, 最後得出了一個結論:</p>
<p><span id="more-401"></span></p>
<blockquote><p>測試顯示的結果告訴我們，凡是曲線中有明顯停頓的，使用者所感知的進度都比較慢，而進度中一直在加速的，使用者都會覺得進 度走得很快。研究者們還指出雖然一個穩 定的系統應該使用線性的進度條，但是如果能應用加速型的進度條，確實能小幅地改善用戶體驗。但是當進度並不能被準確測量時，進度條並不是一個很好的選擇， 實際情況下可以選用不斷重複的動畫來代替</p></blockquote>
<p>恩, 所以, 下次設計 progress bar 時, 請<strong>讓它不停的跑, 然後讓它越跑越快</strong>…反正人的感情是很容易被欺騙了</p>
<p><img class="aligncenter size-full wp-image-404" title="progress-bar-chart" src="http://ka-yue.com/blog/wp-content/uploads/2009/02/progress-bar-chart.png" alt="progress-bar-chart" width="354" height="349" /></p>
<p>順道一提, 九種 progress bar 為:</p>
<ul>
<li>線性 （Linear）：遞增率是常量</li>
<li>前停頓（Early paus）：類似於線性，但在25%進度附近進度遞增非常慢</li>
<li>後停頓（Late paus）：類似於線性，但在75%進度附近進度遞增非常慢</li>
<li>慢速波狀曲線（Slow wavy ）：速度時快時慢，整個過程有3個週期</li>
<li>快速波狀曲線（Fast wavy ）：類似於慢速波狀曲線，但波長很短，有很多週期</li>
<li>平方曲線（Power）：進度的遞增率不斷在增加，也就是一開始很慢，隨後越來越快</li>
<li>反平方曲線（Inverse power）：和平方曲線像反，一開始很快，隨後越來越慢</li>
<li>快速平方曲線（Fast power）：類似于平方曲線，只是進度的遞增率更高</li>
<li>快速反平方曲線（Inverse fast power）和反平方曲線類似,只是進度的變化率更大</li>
</ul>
<p>via: <a onclick="javascript:urchinTracker ('/outbound/article/www.yeeyan.com');" href="http://www.yeeyan.com/articles/view/jjying/26054">譯言</a></p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/the-effect-of-the-progress-bar" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/the-effect-of-the-progress-bar/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Viewzi：搜索介面的革命</title>
		<link>http://ka-yue.com/blog/viewzi%ef%bc%9a%e6%90%9c%e7%b4%a2%e4%bb%8b%e9%9d%a2%e7%9a%84%e9%9d%a9%e5%91%bd</link>
		<comments>http://ka-yue.com/blog/viewzi%ef%bc%9a%e6%90%9c%e7%b4%a2%e4%bb%8b%e9%9d%a2%e7%9a%84%e9%9d%a9%e5%91%bd#comments</comments>
		<pubDate>Tue, 10 Feb 2009 02:42:37 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面設計]]></category>
		<category><![CDATA[搜尋引擎]]></category>
		<category><![CDATA[網頁設計]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=380</guid>
		<description><![CDATA[
作為一名網頁設計／介面設計的愛好者，每次看到一些設計出色的網站都會令我有種莫名的興奮，心中暗嘆「原來還可以這樣作的！為甚麼我從來沒想到過！」。
介面設計其中一個令我著迷的地方是，it is all about improvements! 更研發不同，改進並不是要創造一樣全新的東西。改進，是把原有的事情做得更好。這要求設計師會用不同角度觀察同一件事情，才能想出一個不同的方法去達成同一目標，一個更友善更高效的方法。

Viewzi 是一個搜尋引擎。跟其他搜尋引擎不同，Viewzi 並不標榜其準確性、資料來源、Social 與否等等。Viewzi 只專注於一件事情：提供更優秀的搜索體驗。同一組搜尋結果，Viewzi 提供了近 20 個不同的 UI （views）供用家選擇。而且這些 UI 都有相當程度的可用性，跟那些中看不中用的實驗性作品有天壤之別。
搜尋結果除了來自 Google 外，還包括 Amazon、Flickr 和 Joost 等。
PS: 本文的標題起得太誇張了點嗎？要在十數字內畫龍點精不容易啊。
另，本 blog IE版修復。因為版面幾個月前做了些小修改，卻忘記了在 IE 下測試。感謝網友提醒。
]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-381" title="viewzi" src="http://ka-yue.com/blog/wp-content/uploads/2009/02/viewzi.jpg" alt="viewzi" width="600" height="243" /></p>
<p>作為一名網頁設計／介面設計的愛好者，每次看到一些設計出色的網站都會令我有種莫名的興奮，心中暗嘆「原來還可以這樣作的！為甚麼我從來沒想到過！」。</p>
<p>介面設計其中一個令我著迷的地方是，it is all about improvements! 更研發不同，改進並不是要創造一樣全新的東西。改進，是把原有的事情做得更好。這要求設計師會用不同角度觀察同一件事情，才能想出一個不同的方法去達成同一目標，一個更友善更高效的方法。</p>
<p><span id="more-380"></span></p>
<p><a title="viewzi" href="http://www.viewzi.com/" target="_blank">Viewzi </a>是一個搜尋引擎。跟其他搜尋引擎不同，Viewzi 並不標榜其準確性、資料來源、Social 與否等等。Viewzi 只專注於一件事情：提供更優秀的搜索體驗。同一組搜尋結果，Viewzi 提供了近 20 個不同的 UI （views）供用家選擇。而且這些 UI 都有相當程度的可用性，跟那些中看不中用的實驗性作品有天壤之別。</p>
<p>搜尋結果除了來自 Google 外，還包括 Amazon、Flickr 和 Joost 等。</p>
<p>PS: 本文的標題起得太誇張了點嗎？要在十數字內畫龍點精不容易啊。<br />
另，本 blog IE版修復。因為版面幾個月前做了些小修改，卻忘記了在 IE 下測試。感謝網友提醒。</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/viewzi%ef%bc%9a%e6%90%9c%e7%b4%a2%e4%bb%8b%e9%9d%a2%e7%9a%84%e9%9d%a9%e5%91%bd" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/viewzi%ef%bc%9a%e6%90%9c%e7%b4%a2%e4%bb%8b%e9%9d%a2%e7%9a%84%e9%9d%a9%e5%91%bd/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>總有更好的方法</title>
		<link>http://ka-yue.com/blog/better-way</link>
		<comments>http://ka-yue.com/blog/better-way#comments</comments>
		<pubDate>Sun, 14 Dec 2008 23:00:00 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[可用性]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=353</guid>
		<description><![CDATA[
有下載過 YouTube 影片的人都知道，一般下載網站都要求用戶提供影片的 URL，一切都看似很順理成章。直至看到這個 KickYouTube.com 所用的方法，大感佩服。使用方法請看上面的影片。
有一個令我印像很深的經典的可用性案例，是 Donald Norman 在 Design of Everyday Things 中提及的門把例子：為甚麼我們會看到一個拉把在一道推門上？


優秀的設計固然不容易做到，沒有靈感也是沒辦法的事情。但我相信我們都有能力分辨和避免一些糟糕設計。想像一下，如果有部空調的控制器，調節的是「噴出空氣的溫度」，而不是「室內氣溫」，會帶來甚麼問題？
]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="560" height="345" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/N_F3kI3a-WE&amp;hl=en&amp;fs=1&amp;rel=0" /><embed type="application/x-shockwave-flash" width="560" height="345" src="http://www.youtube.com/v/N_F3kI3a-WE&amp;hl=en&amp;fs=1&amp;rel=0" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p style="text-align: left;">有下載過 YouTube 影片的人都知道，一般下載網站都要求用戶提供影片的 URL，一切都看似很順理成章。直至看到這個 KickYouTube.com 所用的方法，大感佩服。使用方法請看上面的影片。</p>
<p style="text-align: left;">有一個令我印像很深的經典的可用性案例，是 Donald Norman 在 Design of Everyday Things 中提及的門把例子：為甚麼我們會看到一個拉把在一道推門上？</p>
<p style="text-align: left;"><span id="more-353"></span></p>
<p style="text-align: center;"><img class="size-full wp-image-355 aligncenter" title="doors-handle" src="http://ka-yue.com/blog/wp-content/uploads/2008/12/doors-handle.jpg" alt="" width="600" height="300" /></p>
<p>優秀的設計固然不容易做到，沒有靈感也是沒辦法的事情。但我相信我們都有能力分辨和避免一些糟糕設計。想像一下，如果有部空調的控制器，調節的是「噴出空氣的溫度」，而不是「室內氣溫」，會帶來甚麼問題？</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/better-way" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/better-way/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>目錄設計問題</title>
		<link>http://ka-yue.com/blog/web-navigation-design</link>
		<comments>http://ka-yue.com/blog/web-navigation-design#comments</comments>
		<pubDate>Sat, 23 Aug 2008 07:44:42 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[navigation]]></category>
		<category><![CDATA[usaibilty]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=283</guid>
		<description><![CDATA[對於那些架構龐大、層次很深的網站，目錄的設計十分之重要。一旦設計得不好，很容易讓用戶有 lost 的感覺。要如何解決這個問題，小弟至今仍然沒有一個完美的解決方法。因此小弟比較幾個網站的目錄設計手法，並在此跟大家分享一下所得。


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

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

這數目我覺得已經很誇張了，當中更可同時有三個項目被選中（Word &#38; 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! [...]]]></description>
			<content:encoded><![CDATA[<p>對於那些架構龐大、層次很深的網站，目錄的設計十分之重要。一旦設計得不好，很容易讓用戶有 lost 的感覺。要如何解決這個問題，小弟至今仍然沒有一個完美的解決方法。因此小弟比較幾個網站的目錄設計手法，並在此跟大家分享一下所得。</p>
<p style="text-align: center;"><img class="aligncenter" title="Digg's deep tab navigation" src="http://ka-yue.com/blog/wp-content/uploads/2008/08/tab-nav-1.png" alt="Digg's deep tab navigation" width="600" height="200" /></p>
<p><span id="more-283"></span></p>
<p>設計師常常會以顏色、字體、位置大小來突出當前被選中的選項。但對於多層次的網站，可能會有多過一個選項被選中的情況。雖然設計師可以同時突出多個項目，但當被突出項目太多的時候，反而會造成用戶認知的困難。正如 Digg 網站的頂部目錄（左方），分為上、中、下三列；三列中又包含五種不同功能的連結，分別為</p>
<ol>
<li>Join Digg / About / Login</li>
<li>Article category</li>
<li>Popular / Upcoming</li>
<li>Type of digg (News / Videos / Images)</li>
<li>Customize (因大小關係，不在截圖中)</li>
</ol>
<p>這數目我覺得已經很誇張了，當中更可同時有三個項目被選中（Word &amp; Business, Videos, Popular），並運用了 7 種顏色（2種藍、4種不同深淺的綠、紅式的 icon），如此複雜的設計應該很難為人一下子理解吧。Digg.com 的其他細節都做得很到位，唯獨是目錄太過瘋狂了一點。再看看 funP 的目錄又如何:</p>
<p style="text-align: center;"><img class="size-full wp-image-284 aligncenter" title="FunP Tab Nav" src="http://ka-yue.com/blog/wp-content/uploads/2008/08/tab-nav-3.png" alt="" width="600" height="259" /></p>
<p>相較之下，我覺得 funP 的目錄清晰得多了。不是因為 funP 的功能比較簡單，實際上， funP 網站的層次比 Digg 更加深、功能更加多。funP 的目錄看上去更清晰，全因它把不相關的功能/連結都分別放在不同地方，而不像 Digg 般都堆在一起。看看下方兩張圖就會明白:</p>
<p style="text-align: center;"><img class="size-full wp-image-286 aligncenter" title="tab-nav-funp" src="http://ka-yue.com/blog/wp-content/uploads/2008/08/tab-nav-funp.png" alt="" width="600" height="336" /></p>
<p style="text-align: center;">這個是 Digg.com 的，所有色塊都在上方。</p>
<p style="text-align: center;"><img class="size-full wp-image-287 aligncenter" title="tab-nav-digg" src="http://ka-yue.com/blog/wp-content/uploads/2008/08/tab-nav-digg.png" alt="" width="600" height="347" /></p>
<p style="text-align: left;">當然，說到架構龐大，應該沒人及得上 Yahoo! 了。下面是 Yahoo 的做法</p>
<p style="text-align: center;"><img class="size-full wp-image-289 aligncenter" title="tab-nav-yahoo" src="http://ka-yue.com/blog/wp-content/uploads/2008/08/tab-nav-yahoo.png" alt="" width="600" height="166" /></p>
<p style="text-align: center;">[Before] Home page</p>
<p style="text-align: center;"><img class="size-full wp-image-290 aligncenter" title="tab-nav-yahoo2" src="http://ka-yue.com/blog/wp-content/uploads/2008/08/tab-nav-yahoo2.png" alt="" width="600" height="166" /></p>
<p style="text-align: center;">[After] Content pgae</p>
<p style="text-align: left;">Yahoo 向來都會為不同服務設計一個獨立的頁面，而不是一種風格套用到整個網站中。所以如果用戶想轉換服務，必須點左上角的連結。你不會在一個子網站的目錄中找到其他服務的身影。雖然比較麻煩，比每個子網站的架構都會因此簡明得多，funP 亦是用此方法。另外 Yahoo! TV 的目錄設計新穎，結合了 tab、breadcrumbs 於一身，雖然尚未被廣泛接受，但仍然很值得參考。</p>
<p style="text-align: left;">無論如何，有些問題是難光靠設計便能解決的。如果網站的架構混亂，再好的設計也是難以起死回生，反之亦然。君不見 Apple.com 的網站只有 6 個 button 嗎？</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/web-navigation-design" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/web-navigation-design/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>用戶研究的幾種方法</title>
		<link>http://ka-yue.com/blog/%e7%94%a8%e6%88%b6%e7%a0%94%e7%a9%b6%e7%9a%84%e5%b9%be%e7%a8%ae%e6%96%b9%e6%b3%95</link>
		<comments>http://ka-yue.com/blog/%e7%94%a8%e6%88%b6%e7%a0%94%e7%a9%b6%e7%9a%84%e5%b9%be%e7%a8%ae%e6%96%b9%e6%b3%95#comments</comments>
		<pubDate>Sat, 26 Jul 2008 05:42:10 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Usability testing]]></category>
		<category><![CDATA[用戶研究]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/methods-of-testing</guid>
		<description><![CDATA[整理一下以往看過的各種用戶研究方法。當中人種誌、訪問、卡片分類法、角色扮演適用於產品開發初期，而焦點小組、可用性測試則可不斷進行，貫穿整個產品開發週期亦無不可。


人種誌 Ethnography

目的: 了解用戶。
方法: 研究人員可透過觀察日常生活了解某社會文化。
時間: 長年累月
人數: 不限
參考: 人種誌研究法的基本概念


訪問 Interviews

目的: 了解用戶。
方法: 訪問(潛在)用戶
時間: 1 小時
人數: 1~2人


卡片分類法 Card Sorting

目的: 了解真正符合使用者習慣的資訊分類方法。
方法: 將每個內容/類目寫到一張卡片之上，再讓用戶將其分組。
時間: 1小時
人數: 1~2人
參考: wiki


角色扮演 Personas

目的: 確保開發產品時專注於滿足用戶需求上，避免失焦。
方法: 為典型用戶定立一個或多個假想人物，並圍繞該人物之需求開發產品。
時間: -
人數: -


焦點小組 Focus Groups

目的: 改進產品。
方法: 討論、Brainstorming。
時間: 1~2 小時
人數: 4~5 人


可用性測試 Usability testing

目的: 改進產品。
方法: 讓用戶嘗試完成某項任務，研究人員從旁觀察，並嘗試從中找出現有設計之問題。
時間: 半小時
人數: 1人



]]></description>
			<content:encoded><![CDATA[<p>整理一下以往看過的各種用戶研究方法。當中人種誌、訪問、卡片分類法、角色扮演適用於產品開發初期，而焦點小組、可用性測試則可不斷進行，貫穿整個產品開發週期亦無不可。</p>
<p><span id="more-266"></span></p>
<ul>
<li>人種誌 Ethnography
<ul>
<li>目的: 了解用戶。</li>
<li>方法: 研究人員可透過觀察日常生活了解某社會文化。</li>
<li>時間: 長年累月</li>
<li>人數: 不限</li>
<li>參考: <a href="http://www.1493.com.tw/upfiles/skill01101086422.pdf" target="_blank">人種誌研究法的基本概念</a></li>
</ul>
</li>
<li>訪問 Interviews
<ul>
<li>目的: 了解用戶。</li>
<li>方法: 訪問(潛在)用戶</li>
<li>時間: 1 小時</li>
<li>人數: 1~2人</li>
</ul>
</li>
<li>卡片分類法 Card Sorting
<ul>
<li>目的: 了解真正符合使用者習慣的資訊分類方法。</li>
<li>方法: 將每個內容/類目寫到一張卡片之上，再讓用戶將其分組。</li>
<li>時間: 1小時</li>
<li>人數: 1~2人</li>
<li>參考: <a href="http://zh.wikipedia.org/wiki/%E5%8D%A1%E7%89%87%E5%88%86%E9%A1%9E%E6%B3%95" target="_blank">wiki</a></li>
</ul>
</li>
<li>角色扮演 Personas
<ul>
<li>目的: 確保開發產品時專注於滿足用戶需求上，避免失焦。</li>
<li>方法: 為典型用戶定立一個或多個假想人物，並圍繞該人物之需求開發產品。</li>
<li>時間: -</li>
<li>人數: -</li>
</ul>
</li>
<li>焦點小組 Focus Groups
<ul>
<li>目的: 改進產品。</li>
<li>方法: 討論、Brainstorming。</li>
<li>時間: 1~2 小時</li>
<li>人數: 4~5 人</li>
</ul>
</li>
<li>可用性測試 Usability testing
<ul>
<li>目的: 改進產品。</li>
<li>方法: 讓用戶嘗試完成某項任務，研究人員從旁觀察，並嘗試從中找出現有設計之問題。</li>
<li>時間: 半小時</li>
<li>人數: 1人</li>
</ul>
</li>
</ul>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/%e7%94%a8%e6%88%b6%e7%a0%94%e7%a9%b6%e7%9a%84%e5%b9%be%e7%a8%ae%e6%96%b9%e6%b3%95" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/%e7%94%a8%e6%88%b6%e7%a0%94%e7%a9%b6%e7%9a%84%e5%b9%be%e7%a8%ae%e6%96%b9%e6%b3%95/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>來自 LukeW 的幾本電子書</title>
		<link>http://ka-yue.com/blog/ebook-from-lukew</link>
		<comments>http://ka-yue.com/blog/ebook-from-lukew#comments</comments>
		<pubDate>Mon, 14 Jul 2008 02:47:06 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/ebook-from-lukew</guid>
		<description><![CDATA[
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&#8217;s guide
比較了多種開發 Web App 方法的優劣
WebApplicationSolutions.pdf

]]></description>
			<content:encoded><![CDATA[<ul>
<li>Best Pratices For Form Design<br />
關於表單設計的一流 presentation。讀過以後你就會大概了解介面設計是如何「小改變，大改善」。內有好多珍貴的參考資料，讓你從科學化的角度了解介面設計。我記得我在年幾前就讀過這個 pdf ，但現在這個 pdf 的封面卻打著2008，可能因為作者出書的關係， pdf 的內容應該有更新過，大家讀過可以再讀溫故知新喔。<br />
<a href="http://www.lukew.com/resources/articles/WebForms_LukeW.pdf">WebForms_LukeW.pdf</a></li>
<li>Web Application Hierarchy<br />
圍繞視覺層次的一些討論。<br />
<a href="http://www.lukew.com/resources/articles/PageHierarchy_LukeW_06232008.pdf">PageHierarchy_LukeW_06232008.pdf</a></li>
<li>The Web Now: Social<br />
Social Web<br />
<a href="http://www.lukew.com/resources/articles/IxDA_SocialWeb_LW.pdf"> IxDA_SocialWeb_LW.pdf</a></li>
<li>Web Application Solutions: A designer&#8217;s guide<br />
比較了多種開發 Web App 方法的優劣<br />
<a href="http://www.lukew.com/resources/WebApplicationSolutions.pdf">WebApplicationSolutions.pdf</a></li>
</ul>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/ebook-from-lukew" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/ebook-from-lukew/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>專注於當前任務</title>
		<link>http://ka-yue.com/blog/focus-on-a-task</link>
		<comments>http://ka-yue.com/blog/focus-on-a-task#comments</comments>
		<pubDate>Mon, 23 Jun 2008 21:25:20 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/focus-on-a-task</guid>
		<description><![CDATA[盡管「簡單就是美」這條法則備受大家推崇，但並不是人人都能夠貫徹其理念。在設計 UI 的時候，仍會不自覺地嘗試在頁面上放置盡量多的功能，並相信能夠籍此方便用戶。功能所指的不只是一般的功能，還包括內容、設計元素，甚至一條連結等。

舉個例子，「最新消息」、「熱門文章」等欄目已經成為網站的標準配備，我們要如何決定這些欄目是否應該出現在某個頁面之上呢？有哪些因素應該列入考慮範圍？要知道每個功能都有其作用，一個功能的增減必會帶來得失，決策者的工作就是在其中取得平衡。例如這些欄目能夠增加其他頁面的曝光率，對站方來說有利無害，但以用戶角度來看則未必。加入一些不必要的功能不但減漫了頁面的下載速度，也增加了用戶的認知負擔。
問題還不止於此，無謂的功能與資訊很可能令用戶在試圖達成某一目標時分心，減低網站和用戶的效率。分心的原因可能是這些多餘的資訊具有吸引力，使用戶忘記了手頭上的工作。正如一篇學術論文旁邊放著一堆了八掛新聞的連結，人們還能夠專心閱讀原文嗎？又或者購物網站在產品 A 的資料頁面上推薦著產品 B，用戶還能夠輕鬆作出購買決定嗎？
我個人認為，每一個頁面都負責著一個主要任務，而一個功能能否協助用戶達成當前任務，是決定其去留的重要考慮因素。如某頁面的任務是介紹某產品，而非協助用戶發現其他類似產品，則無必要在頁面上強調「類似產品」這欄目。另外，即使同一功能，在不同網站其重要性也會不同，因為並非所有網站的定位都相同。
]]></description>
			<content:encoded><![CDATA[<p>盡管「簡單就是美」這條法則備受大家推崇，但並不是人人都能夠貫徹其理念。在設計 UI 的時候，仍會不自覺地嘗試在頁面上放置盡量多的功能，並相信能夠籍此方便用戶。功能所指的不只是一般的功能，還包括內容、設計元素，甚至一條連結等。</p>
<p><span id="more-259"></span></p>
<p>舉個例子，「最新消息」、「熱門文章」等欄目已經成為網站的標準配備，我們要如何決定這些欄目是否應該出現在某個頁面之上呢？有哪些因素應該列入考慮範圍？要知道每個功能都有其作用，一個功能的增減必會帶來得失，決策者的工作就是在其中取得平衡。例如這些欄目能夠增加其他頁面的曝光率，對站方來說有利無害，但以用戶角度來看則未必。加入一些不必要的功能不但減漫了頁面的下載速度，也增加了用戶的認知負擔。</p>
<p>問題還不止於此，無謂的功能與資訊很可能令用戶在試圖達成某一目標時分心，減低網站和用戶的效率。分心的原因可能是這些多餘的資訊具有吸引力，使用戶忘記了手頭上的工作。正如一篇學術論文旁邊放著一堆了八掛新聞的連結，人們還能夠專心閱讀原文嗎？又或者購物網站在產品 A 的資料頁面上推薦著產品 B，用戶還能夠輕鬆作出購買決定嗎？</p>
<p>我個人認為，每一個頁面都負責著一個主要任務，而一個功能能否協助用戶達成當前任務，是決定其去留的重要考慮因素。如某頁面的任務是介紹某產品，而非協助用戶發現其他類似產品，則無必要在頁面上強調「類似產品」這欄目。另外，即使同一功能，在不同網站其重要性也會不同，因為並非所有網站的定位都相同。</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/focus-on-a-task" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/focus-on-a-task/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>7±2 法則</title>
		<link>http://ka-yue.com/blog/7-plus-or-minus-2-guideline</link>
		<comments>http://ka-yue.com/blog/7-plus-or-minus-2-guideline#comments</comments>
		<pubDate>Mon, 19 May 2008 21:43:40 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/7-plus-or-minus-2-guideline</guid>
		<description><![CDATA[相信大家都有聽過「三次點擊」這條法則，雖然我個人不完全同意此法則，但「三次點擊」是旨在用來控制網站的深度，使網站內容容易被使用者發現。而 7±2 法則 則是為了控制網站的寬度。
7±2 法則指出，人們的短暫記憶只能記住 5 &#8211; 9 項訊息。也許因此，美國的電話號碼只有 7 個位。將這條法則應用在網站上，網站目錄不應該有超過 5 &#8211; 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,  [...]]]></description>
			<content:encoded><![CDATA[<p>相信大家都有聽過「三次點擊」這條法則，雖然我個人不完全同意此法則，但「三次點擊」是旨在用來控制網站的深度，使網站內容容易被使用者發現。而 <strong>7±2 法則</strong> 則是為了控制網站的<strong>寬度</strong>。</p>
<p><strong>7±2 法則</strong>指出，人們的短暫記憶只能記住 5 &#8211; 9 項訊息。也許因此，美國的電話號碼只有 7 個位。將這條法則應用在網站上，網站目錄不應該有超過 5 &#8211; 9 個項目。</p>
<p><span id="more-254"></span><br />
當訊息無可避免會超過 7±2 項的時候，可以試著把訊息分類。例如:</p>
<ul>
<li>item1,  item2,  item3,  item4,  item5,  item6,  item7, item8,   item9,  item10,  item11,  item12,  item13</li>
</ul>
<p>可以改成</p>
<ul>
<li><em>Category 1: </em> item1,  item2,  item3,  item4, item5</li>
<li><em>Category 2:  </em>item6,  item7, item8,   item9</li>
<li><em>Category 3: </em> item10,  item11,  item12,  item13</li>
</ul>
<p>一如其他法則，7±2 法則也有例外和不適用的地方，所以無必要嚴格執行。加上用戶並不需要記下網站上的訊息，對於 7±2 法則是否適用在互聯網上尚有很多爭論。無論如何，至少 7±2 法則為「多」與「少」下了一客觀、科學化的定義。相關連結:</p>
<p><a href="http://www.musanim.com/miller1956/ " title="miller1956" target="_blank">The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information </a></p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/7-plus-or-minus-2-guideline" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/7-plus-or-minus-2-guideline/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>信息排序</title>
		<link>http://ka-yue.com/blog/information-ordering</link>
		<comments>http://ka-yue.com/blog/information-ordering#comments</comments>
		<pubDate>Sat, 03 May 2008 06:45:33 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>

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

按字母排序
以英文字母、數字或筆劃數來排序的方法。這種做法基本上是適用於任何地方。但家儒認為這種做法只比完全亂排好一點點，因為它太過通用了，未能幫助用戶有效地減少數據的數量。所以按字母排序一般都會在無法套用其他排序方法的時候才會使用。（當然啦，你是絕對可以同時套用多種排序方法）
按類別
例如家儒的這個 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，或者滑鼠的右鍵菜單都是捷徑的一種。容我另文再述。
（全文完）
脫稿了一整個月……
]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://ka-yue.com/blog/wp-content/uploads/2008/05/information-ordering-0.gif" alt="香港網頁設計" /></p>
<p>有架設個人網站經驗的讀者可能會有為這麼一個問題煩惱過：目錄上各頁面的次序該怎樣排呢？「關於站長」這頁應放在靠前的地方還是目錄底部？有時候，客戶可能也會要求你更改目錄上的頁面次序，原因是因為某個頁面比較重要。究竟有沒有一個正確的排序方法呢？排序的目的是為了協助用戶過濾出所需資訊。合理的排序的方法，大概有以下幾種：按字母、按類別、按時間及按訊息的層次。以下我會簡述一下各種排序方法的優劣，歡迎大家補充。</p>
<p><span id="more-251"></span><br />
<strong>按字母排序</strong></p>
<p>以英文字母、數字或筆劃數來排序的方法。這種做法基本上是適用於任何地方。但家儒認為這種做法只比完全亂排好一點點，因為它太過通用了，未能幫助用戶有效地減少數據的數量。所以按字母排序一般都會在無法套用其他排序方法的時候才會使用。（當然啦，你是絕對可以同時套用多種排序方法）</p>
<p><strong>按類別</strong></p>
<p>例如家儒的這個 blog 是依「文章內容」來分類，動物也可以用「界門綱目科屬種」來分門別類。</p>
<p><strong>按時間</strong></p>
<p>大家很熟悉的排序方法，也是 photo album 常用方法。由於只適用於時間性很強的資訊（如新聞），很多地方都用不上。</p>
<p><strong>按訊息的「層次」</strong></p>
<p>這個很抽像，究竟甚麼是訊息的「層次」呢？舉個例子，Wordpress 後台的目錄是這樣排的:</p>
<p style="text-align: center"><img src="http://ka-yue.com/blog/wp-content/uploads/2008/05/sequencing-1.gif" alt="香港網頁設計訊息排序" /><br />
<em>目錄次序為: Dashboard, Write, Manage, Comments, Blogroll, Presentation, Plugins, Users, Options</em></p>
<p>這個目錄既不依字母排序，也不是按使用頻率（在下段會說明原因），更無法按類別來排序，因為它本身就是一個個類別。為甚麼 Wordpress 要這樣排呢？在這個例字，Wordpress 先是按「使用先後」來排序的: 因為你必需發表（Write）文章後才可加以管理（Manage）。但總括來說，Wordpress 是按各功能在整個 Blog 中的位置（層次）來排序的。 首先，Write、Manage、Comments、Blogroll 此四項只會對 Blog 中的某一點（node）產生作用，所以排在前方；而 Presentation、Plugins 這兩個設定則會影響到整個 Blog ，因此排在較後的地方；Users、Options 更是整個Blog 的根本，放在最後是理所當然。</p>
<p><strong>為甚麼不能按「使用頻率」排序</strong></p>
<p>好多人都喜歡按使用頻率來排序，並認為這樣做可以方便到用戶，但其實這種排序方法是極不可靠的。網站之所以不應該按使用頻率來排序，是因為使用頻率是因人而異的。而且一個新用戶來說，根本完全沒有使用頻率可言。更糟糕的是，絕大部份時侯，<strong>這個使用頻率只是一個假設</strong>，強行把假設的使用頻率強加到新用戶上是不合理的，因為用戶並不了解你的假設。作為一個設計師，應該嘗試理解用戶心中所想（心理模型），再依照這個模型設計出一個易學易用的介面，而不是強迫用戶適應它。</p>
<p>當然，不是全部資訊都一定要使用這幾個方法來排序，可能還有一些更棒而我又不知道的方法。至於之前提及的那種按使用頻率排序來方便用戶的方法，我視之為「捷徑」而不是排序。桌面上那些 icon，或者滑鼠的右鍵菜單都是捷徑的一種。容我另文再述。</p>
<p>（全文完）</p>
<p>脫稿了一整個月……</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/information-ordering" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/information-ordering/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>預知: 意料之內的設計</title>
		<link>http://ka-yue.com/blog/predictable-ui</link>
		<comments>http://ka-yue.com/blog/predictable-ui#comments</comments>
		<pubDate>Sat, 29 Mar 2008 00:57:06 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/predictable-ui</guid>
		<description><![CDATA[
跟藝術、設計不同，主觀的喜好並不能夠作為判斷介面設計好壞的準則。一個很炫的 UI 未必一定 User friendly，一個簡陋的介面也不一定會難用。而「預知」是家儒常以用來判斷某設計好壞的方法，適用於大部份的設計，在此分享一下。

可預知性
「預知」是指用戶能否在未做出任何動作之前，就已經能估計到某 UI component （如連結、按鈕）的用途、操作方法，以及會帶來的結果。一個設計良好的 UI 應該是可預知的 (Predictable)，會讓用戶感到一切盡在掌握的樣子。如下圖的這個表單，藍色理所當然的是連結；按鈕理所當然是用來提交資料；那個圓型一如以往是個單選項；四方型的 check box 是多選項。一切都是那麼理所當然。也許它不是最漂亮的設計，但起碼使用的時候不會干擾到用戶，用戶不用去重新學習、理解 components 之間的關係。
 
漂亮的設計從來都不是必須的，可用性卻是不可或缺。
要 UI 做到可預知，最基本是要做到讓用戶察覺得到 UI component 的存在。如果  UI component 無法被人察覺，跟本就沒有人會去碰它。長輩經常告誡我們 超連結 的樣式一定要讓人感覺像條 超連結 才行（可以點擊的），千萬不要跟 內文 有所混淆，說的就是這件事。
誤解與一致性
然之後是避免用戶對某 UI component 作出錯誤的估計，不要讓操作的實際結果跟用戶設想的有所出入。舉個例子，下圖是從 aNobii 首頁上截出來的，大家能夠猜到點擊書本封面後會帶你到甚麼地方嗎？

 答案是「修改書本資料」，我想好多人都以為是「書本詳細資料」吧。事實上，aNobii 上大部份地方，點擊書本封面都會連結到「書本詳細資料」頁面，而不是修改資料。換言之，這些封面所以會引起誤解，是因為它們破壞了網站的一致性。明明點擊書本封面會連結去詳細資料頁面（這也是業界的一般做法，點擊產品圖片給你看詳細資料），為甚麼這次會不一樣？雖然在滑鼠停留在封面上的時候會有一個提示（如右圖示），但這種粗糙的做法就如臨時要求老闆更改會議地點一樣，並不可取。
始料不及
另一種令人出乎意料的狀況是，軟件自作聰明，做了一些用戶意料以外的動作。最經典的例子是，當用戶在音樂播放器的曲目庫中刪除一首歌，究竟該用戶是想該曲從曲目庫上移除，還是從電腦上刪走呢？

 寧可讓軟件蠢一些，也不要因自作聰明而犯錯。一個 UI 的好壞，比的不是有多好，而是誰比較少犯錯。
]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://ka-yue.com/blog/wp-content/uploads/2008/03/ui-predict-response-uompleted-01.jpg" alt="UI介面設計理論" /></p>
<p>跟藝術、設計不同，<strong>主觀的喜好並不能夠作為判斷介面設計好壞的準則</strong>。一個很炫的 UI 未必一定 User friendly，一個簡陋的介面也不一定會難用。而<strong>「預知」</strong>是家儒常以用來判斷某設計好壞的方法，適用於大部份的設計，在此分享一下。</p>
<p><span id="more-244"></span></p>
<h2>可預知性</h2>
<p>「預知」是指用戶能否在未做出任何動作之前，就已經能估計到某 UI component （如連結、按鈕）的用途、操作方法，以及會帶來的結果。<strong>一個設計良好的 UI 應該是可預知的 (Predictable)</strong>，會讓用戶感到一切盡在掌握的樣子。如下圖的這個表單，藍色理所當然的是連結；按鈕理所當然是用來提交資料；那個圓型一如以往是個單選項；四方型的 check box 是多選項。一切都是那麼理所當然。也許它不是最漂亮的設計，但起碼使用的時候不會干擾到用戶，用戶不用去重新學習、理解 components 之間的關係。</p>
<p align="center"> <img src="http://ka-yue.com/blog/wp-content/uploads/2008/03/ui-predict-response-uompleted-03.jpg" alt="網頁設計 界面設計" /><br />
漂亮的設計從來都不是必須的，可用性卻是不可或缺。</p>
<p>要 UI 做到可預知，最基本是要做到讓用戶察覺得到 UI component 的存在。如果  UI component 無法被人察覺，跟本就沒有人會去碰它。長輩經常告誡我們 超連結 的樣式一定要讓人感覺像條 超連結 才行（可以點擊的），千萬不要跟 內文 有所混淆，說的就是這件事。</p>
<h2>誤解與一致性</h2>
<p>然之後是避免用戶對某 UI component 作出<strong>錯誤的估計</strong>，不要讓操作的實際結果跟用戶設想的有所出入。舉個例子，下圖是從 aNobii 首頁上截出來的，大家能夠猜到點擊書本封面後會帶你到甚麼地方嗎？</p>
<p style="text-align: center"><img src="http://ka-yue.com/blog/wp-content/uploads/2008/03/ui-predict-response-uompleted-02.jpg" alt="網頁設計 香港 網頁設計師" /></p>
<p><img src="http://ka-yue.com/blog/wp-content/uploads/2008/03/ui-predict-response-uompleted-04.jpg" alt="香港網頁設計" align="right" /> 答案是「<strong>修改</strong>書本資料」，我想好多人都以為是「書本詳細資料」吧。事實上，aNobii 上大部份地方，點擊書本封面都會連結到「書本詳細資料」頁面，而不是修改資料。換言之，這些封面所以會引起誤解，是因為<strong>它們破壞了網站的一致性</strong>。明明點擊書本封面會連結去詳細資料頁面（這也是業界的一般做法，點擊產品圖片給你看詳細資料），為甚麼這次會不一樣？雖然在滑鼠停留在封面上的時候會有一個提示（如右圖示），但這種粗糙的做法就如臨時要求老闆更改會議地點一樣，並不可取。</p>
<h2>始料不及</h2>
<p>另一種令人出乎意料的狀況是，軟件自作聰明，做了一些用戶意料以外的動作。最經典的例子是，當用戶在音樂播放器的曲目庫中刪除一首歌，究竟該用戶是想該曲從曲目庫上移除，還是從電腦上刪走呢？</p>
<p style="text-align: center"><img src="http://ka-yue.com/blog/wp-content/uploads/2008/03/ui-predict-response-uompleted-05.jpg" alt="界面設計介面設計網頁設計" /></p>
<p> 寧可讓軟件蠢一些，也不要因自作聰明而犯錯。一個 UI 的好壞，比的不是有多好，而是誰比較少犯錯。</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/predictable-ui" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/predictable-ui/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>交互設計也可創造藍海</title>
		<link>http://ka-yue.com/blog/interaction-blue-sea</link>
		<comments>http://ka-yue.com/blog/interaction-blue-sea#comments</comments>
		<pubDate>Sun, 16 Mar 2008 09:05:44 +0000</pubDate>
		<dc:creator>家儒</dc:creator>
				<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/interaction-blue-sea</guid>
		<description><![CDATA[雖然我對交互設計甚為著迷，亦很著重交互設計，但始終不認為它是影響產品成敗的最關鍵因素。愚以為，交互設計者，最重要是避免犯錯；至於成敗，市場行銷比交互設計重要得多。我認為，產品與行銷，重要性各佔一半。剛才靈機一觸，發現我過往的想法不全然是對的。

我想到了 Apple。在個人電腦還沒誕生之前的 IBM 年代，電腦只是一台台只有少數專業人事才能與之交互的巨型機器。是甚麼改變了這個狀況？圖形介面（GUI）。圖形介面大大減少了人與機器之間交互的難度，遙不可及的電腦最終變成了每個人生活的一部份。從這個角度去看，是交互設計成就了 Apple，而不是現今被大力吹捧的工業設計。這就不難明白為甚麼 Apple 產品除了好看外，還這麼簡單易用了。（我覺得 Sony 的工業設計比 Apple 要好，但難用到死）
更重要的是，Apple 讓電腦從專家走向平民的這個舉動，不就是建立了一片「藍海」嗎？過往一直認為藍海只是行銷人的事情，而交互設計只是研發產品中眾多環節的其中一環，兩者互不相干。原來我忽略了一件事，原來交互設計不但能夠為產品加分，還能開闢一個全新的藍海市場！我以前只知道好的行銷必定有相配合的產品，現在發現原來產品也能倒過來領導行銷。小弟實在太孤陋寡聞了。（以前只是知道但不理解）
介面設計這件事今天看起來或許很簡單，不就開發一個軟件嘛。但是在當時 IBM 的年代， 大家都把時間花在如何減少晶體的數量、增加運算的速度上。輸入指令是唯一跟電腦交互的辦法，而按鈕、圖標這些東西，是想也無法想像出來的吧？想到這裡，不禁感嘆 Apple 改變世界的偉大啊。（可以用「眾人皆醉我獨醒」來形容當年的 Apple 嗎？XD）
你我身邊，又有沒有這樣被忽視的市場呢？
全文完。
PS: 我並不是說全部交互設計都能起到建立藍海的作用。想想雪中送炭與錦上添花的分別，前者是致勝，後者是加分。謝謝。
]]></description>
			<content:encoded><![CDATA[<p>雖然我對交互設計甚為著迷，亦很著重交互設計，但始終不認為它是影響產品成敗的最關鍵因素。愚以為，交互設計者，最重要是避免犯錯；至於成敗，市場行銷比交互設計重要得多。我認為，產品與行銷，重要性各佔一半。剛才靈機一觸，發現我過往的想法不全然是對的。</p>
<p><span id="more-242"></span><br />
我想到了 Apple。在個人電腦還沒誕生之前的 IBM 年代，電腦只是一台台只有少數專業人事才能與之交互的巨型機器。是甚麼改變了這個狀況？圖形介面（GUI）。圖形介面大大減少了人與機器之間交互的難度，遙不可及的電腦最終變成了每個人生活的一部份。從這個角度去看，是交互設計成就了 Apple，而不是現今被大力吹捧的工業設計。這就不難明白為甚麼 Apple 產品除了好看外，還這麼簡單易用了。（我覺得 Sony 的工業設計比 Apple 要好，但難用到死）</p>
<p>更重要的是，Apple 讓電腦從專家走向平民的這個舉動，不就是建立了一片「藍海」嗎？過往一直認為藍海只是行銷人的事情，而交互設計只是研發產品中眾多環節的其中一環，兩者互不相干。原來我忽略了一件事，原來<strong>交互設計不但能夠為產品加分，還能開闢一個全新的藍海市場</strong>！我以前只知道好的行銷必定有相配合的產品，現在發現原來產品也能倒過來領導行銷。小弟實在太孤陋寡聞了。（以前只是知道但不理解）</p>
<p>介面設計這件事今天看起來或許很簡單，不就開發一個軟件嘛。但是在當時 IBM 的年代， 大家都把時間花在如何減少晶體的數量、增加運算的速度上。輸入指令是唯一跟電腦交互的辦法，而按鈕、圖標這些東西，是想也無法想像出來的吧？想到這裡，不禁感嘆 Apple 改變世界的偉大啊。（可以用「眾人皆醉我獨醒」來形容當年的 Apple 嗎？XD）</p>
<p>你我身邊，又有沒有這樣被忽視的市場呢？</p>
<p align="center">全文完。</p>
<p align="left">PS: 我並不是說全部交互設計都能起到建立藍海的作用。想想雪中送炭與錦上添花的分別，前者是致勝，後者是加分。謝謝。</p>
<script src="http://feeds.feedburner.com/~s/?i=http://ka-yue.com/blog/interaction-blue-sea" type="text/javascript" charset="utf-8"></script>]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/interaction-blue-sea/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
