今天彎二老闆PASS過來一個網路上的使用者行為研究報告給PONY參考。
看過以後覺得頗有分享給大家的價值。就簡單翻譯一下。貼上來給大家。
身為一個網頁(網路媒體)設計工作者。不是只要把網頁做的漂漂亮亮的
就算是稱值的交差了事。網頁與其他印刷媒體(報章等等)有很多不一樣的
地方。最大的不同處就在於網頁提供極大的互動因素在裡面。而一般印刷
媒體最多的互動也不過就是翻下一頁而已。OK，不囉唆，先把文章翻譯過來。
以下為翻譯文
10 Useful Usability Findings and Guidelines
十個很實用的使用者行為(網路)研究與參考準則
1. Form Labels Work Best Above The Field
表單的標題最好擺在欄位的上方處。
A study by UX Matters
found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.
Positioning labels on the left also poses another problem: do you left-align or right-align the labels? Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does the reverses: it makes for a good-looking but less scannable form. Labels above fields work best in most circumstances. The study also found that labels should not be bold, although this recommendation is not conclusive.
很多設計者喜歡在製作網路表單的時候，把欄位標題擺在輸入欄位的左邊。主要是因為
這樣視覺上似乎較為美觀。但是實際上卻會增加使用者不便，為什麼咧？因為簡單說
使用者在填寫表單的行為基礎上都是由上而下前進的。左右排列的方式也許快速瀏覽上
可行，但是卻失去了各個欄位與標題的連結性。此外，研究還發現，欄位標題最好不要
使用BOLD(加粗)字體。不過這只是建議並非絕對就是了。
2. Users Focus On Faces
使用者的視線會聚焦在臉部(圖像)的方向
People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.
圖中紅色區域為使用者視線聚焦的區塊
And now the baby is looking at the content. Notice the increase in people looking at the headline and text.
Here’s an eye-tracking study that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad.
這是很有趣的實驗。當上圖寶寶的臉是面像閱讀者的時候。使用者對於右邊文字內容
的關注度明顯的低於下面的對照組(也就是當寶寶的臉是望向右邊的文字內容)。
這個實驗主要是彰顯出我們會不自覺的看向別人也正在看的方向。最好的說明也許是
漫畫(第一神拳)裡面青木的怪異絕招。當別人看到你在用一個訝異的眼光看往某處。
他們會不自覺的也跟著被吸引去看你正在看的方向。上面這點在製作網頁設計的時候
尤其是在選擇使用真人插圖時，頗具有參考性。相信學過設計(或是美術)的人，多少
都應該了解圖形(乃至於圖片照片等等)其實都有方向性的。搞錯了方向，不只會失去
使用者該注意的聚焦點。甚至會把使用者的注意力帶往錯誤的方向。用的好跟用的不好
效果加減相差不可謂不小。
3. Quality Of Design Is An Indicator Of Credibility
網站的被信賴度取決於設計的品質(翻譯的不太好容我下面說明)
We don’t know if Fever app is any good, but the sleek user interface and website make a great first impression.
One interesting finding of these studies is that users really do judge a book by its cover… or rather, a website by its design. Elements such as layout, consistency, typography, color and style all affect how users perceive your website and what kind of image you project. Your website should project not only a good image but also the right one for your audience.
Other factors that influence credibility are: the quality of the website’s content, amount of errors, rate of updates, ease of use and trustworthiness of authors.
研究參考文獻:
* Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
* What Makes A Web Site Credible? A Report on a Large Quantitative Study
* The Elements of Computer Credibility
簡單的說吧，使用者很可能會決定一個網站(或是公司)可不可信賴，就在他
網頁的設計品質上下定論。現在已經不是10幾年前那個網路剛剛上路的草創
時期了。當時，幾乎所有人的介面都醜到爆。但是大家拼的是IDEA還有功能性。
上面的研究只是在一次點出，一個網站設計品質的高低(這個高低涵蓋的範圍
非常廣)絕對直接影響到來訪的使用者對於該網站的信賴度評價。更重要的是
爛設計會產生低可信用的觀感。而低可信用的觀感直接的結果就是 使用者
不敢跟你做交易。這樣說夠直接了吧？不管你網站的IDEA多棒，不管你網站
內容多充實。如果你沒有一個夠水準的網路設計師把所有的內容用一個
夠水準的方式表現出來給來訪者。誰也不敢隨便跟你交易的。這點，不要說
一般網路使用者，連PONY這種網路老客在開啟一個新的陌生網站的時候
也會先用這個標準去評量這個網站是誠信可靠的還是唬爛詐騙的。
4. Most Users Do Not Scroll
大多數的使用者會(不會)往下拉網頁看??
Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit. This data highlights just how important it is to place your key content on a prominent position, especially on landing pages.
This doesn’t mean you should cram everything in the upper area of the page, just that you should make the best use of that area. Crowding it with content will just make the content inaccessible; when the user sees too much information, they don’t know where to begin looking.
This is most important for the home page, where most new visitors will land. So provide the core essentials there:
1. Name of the website,
2. Value proposition of the website (i.e. what benefit users will get from using it),
3. Navigation for the main sections of the website that are relevant to the user.
However, users’ habits have significantly changed since then. Recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. Many users are more comfortable with scrolling than with a pagination, and for many users the most important information of the page isn’t necessarily placed “above the fold” (which is because of the variety of available display resolutions a quite outdated, deprecated term). So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.
這個問題可以說爭議性一直存在。有一派認為使用者大多都只會看開啟的網頁的
上部視窗內容，而不會刻意去往下拉(滾輪)網頁看下面的內容。但是另一派則認為
使用者並不會排斥往下拉網頁看更多內容。這兩種主張PONY都看過研究報告。
其實，這個問題的起緣是在於早期滑鼠上並沒有滾輪這個標準配備。很基本的
滑鼠上面就只有左鍵跟右健而已。如今這種滑鼠幾乎已經在市面上找不到了。
更甚者，滑鼠上面的按鈕是越來越多。什麼滾輪上下轉 按鍵左右動 還有
上一頁下一頁的快速按鈕.....常常搞的PONY是昏頭轉向。所以至今，PONY仍然
用的是最基本的兩鍵一滾輪的滑鼠。簡單好用就好...(靠北...岔題了)
基本上來說，上面兩派學說其實都承認 當網頁一開啟後螢幕的第一個顯示畫面
(大約是1024*768)是最黃金重要的區塊。但是並不是所有網站的首頁都可以
把內容壓縮到這個區塊當中。硬擠有時候反而會更慘而已。因此如何有效配置
網站最重要(最有價值)的也最希望來訪者接收的訊息放在這個一開就一定會看到的
區域，是網頁設計工作者非常重要的任務。上面的文章提供了一點參考方向。
就是認為有三種東西一定要擺在這個區域當中。
1. 網站的LOGO 名稱 (這個有點廢話)
2. 網站最主要的訴求(服務)
3. 網站的主選單(也就是各個頁面可以來回換頁的選單)
PONY個人覺得這個建議有些含糊。第一跟第三點也是有點廢話。不過，這是
最基本的，換句話說，如果你在做網頁設計，卻連上面這三點都沒有顧好。
那你絕對是一個失敗的網頁(網站)設計師。
5. Blue Is The Best Color For Links
超連結還是藍色最好.....
While giving your website a unique design is great, when it comes to usability, doing what everyone else is doing is best. Follow conventions, because when people visit a new website, the first place they look for things are in the places where they found them on most other websites; they tap into their experience to make sense of this new content. This is known as usage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.
Google網站是一個很好的案例，他任何連結都一定是使用基本藍色+底線。
原因無他，只因為藍色加底線是被最多使用者接受的超連結印象。
What color should your links be? The first consideration is contrast: links have to be dark (or light) enough to contrast with the background color. Secondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usability if your priority, sticking to blue for links is best. The browser’s default link color is blue, so people expect it. Choosing a different color is by no means a problem, but it may affect the speed with which users find it.
簡單的說吧，上面的研究報告指出，絕大多數的使用者仍然最容易
辨識出網頁上的超連結選項當他們是藍色的(而且還有底線Underlone)
這點頗為讓PONY訝異。儘管今天CSS發達到不行。但是仍然有很多很多
的人單純的只是使用網路。這些人並非是什麼網路老手。但是對他們來講
容易辨識 又不會改變的視覺依據是對他們很重要的行為經驗影響。動物實驗
中，連猴子跟鴿子做幾次以後就都知道。按下發亮的按鈕就會有東西吃。
人也是一樣。當藍色又有底線的文字出現在網頁上時，沒幾次他們就知道
按了就會有相關聯結的網頁。這是很基本的。
但是進一步的來說，難道就非得要限制住設計者做到哪文字連結就一定
要是藍色的?? ㄚ萬一背景也是藍色的那不是死定了？ 好問題! 以PONY的
經驗來說，我負責做的網站(網頁)幾乎沒有幾個是有白底黑字的。絕大多數
都有很強烈的風格感(例如卡通 遊戲 或是運動等等)。這些網頁中很難去
要求一定要有白底可以放黑字。有時候是灰底 有時候更可能是彩色底。
第一個要考量的絕對是文字的辨識度以及閱讀的舒適度。不管是背景顏色
太花俏或是背景色與跟文字色太過接近，又或者是即使不接近但是閱讀上
很傷眼。這些都是要先避免掉的。再來說到文字超連結。儘管藍色也許
是研究報告裡最安全的選擇。但是不一定適用於所有地方。但是底線的
出現對於大多數網路使用者來說就是一個可辨識的參考。因此底線underline
使用絕對是必要的。再來就是即使不能用藍色。超連結的文字也應該要
讓他能夠與其它的純文字區隔開來，加上底線配合以及rollover滑鼠
移上後的顏色變化。(甚至再加上Alt""註解)這些就可以彌補掉不能用
藍色的問題(甚至有過之而無不及)。
6. The Ideal Search Box Is 27-Characters Wide
最好的搜尋輸入欄位是27個字元
What’s the ideal width of a search box? Is there such a thing? Jakob Nielsen performed a usability study on the length of search queries in website search boxes (Prioritizing Web Usability). It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.
The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.
Google’s search box is wide enough to accommodate long sentences.
Apple’s search box is a little too short, cutting off the query, “Microsoft Office 2008.”
In general, search boxes are better too wide than too short, so that users can quickly review, verify and submit the query. This guideline is very simple but unfortunately too often dismissed or ignored. Some padding in the input field can also improve the design and user experience.
這個是沒什麼好特別講解的了，27的字元是英文的基礎上研究出來的參考。
對於中文網頁可能不一定適用。但是上面文章的最後到是點出一個重點，
那就是 搜尋輸入欄位寧可過長 也不可過短。最基本的條件是使用者應該要
可以檢視 修改 自己輸入的關鍵字收尋 然後才送出(按鈕)。作者說雖然這點
聽起來很簡單，但是卻常常被忽略掉。最容易被忽略掉的原因PONY認為是
因為有些人希望節省空間，並且認為徒留一大條區塊給搜尋欄位是很浪費的。
這點非常不正確。對於一個已經知道自己要找什麼東西的使用者來說，
使用搜尋輸入應該是他最快找到他要的目標的方法。以這個觀點來看。一個
使用上極度不方便的搜尋欄位設計，變相的等於放棄了這個很可能是未來
顧客的使用者。對不對?
7. White Space Improves Comprehension
白(空白)的空間可以改善使用者對網頁內容的理解力
Most designers know the value of white space, which is the empty space between paragraphs, pictures, buttons and other items on the page. White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.
Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.
White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.
In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.
所謂寸土寸金的觀念也許不一定完全適用在網路媒體。過去一般的報章媒體常常會
因為版面的受限，變的巴不得把所有內容擠了又擠 擠了再擠。最明顯意見的莫過於
分類廣告欄版面吧。回到網路媒體，上面的研究顯示透過適當的使用預留空間
可以讓使用者對於網頁內容的理解力大大的增加了將近20%。適當的讓文章段落
圖片 按紐等等都有足夠的預留空間(上下左右)幫助網頁閱讀讀者在瀏覽時更專注
也更容易移動(視覺)。上面文章最後還寫到，儘管一些實驗並沒有辦法一定得到
預留多少空間才是適當足夠的。但是卻被證實 預留空白空間絕對會影響到使用者
的網頁使用滿意度跟使用經驗。 所以！當你老闆又要你非得要把所有文字 圖片
按紐等內容全部都擠在一起的時候。別再委曲求全了。拿出專業的數據來力爭吧。
8.Effective User Testing Doesn’t Have To Be Extensive
有效的使用者測試不一定就得要耗費人力
Jakob Nielsen’s study on the ideal number of test subjects in usability tests found that tests with just five users would reveal about 85% of all problems with your website, whereas 15 users would find pretty much all problems.
Source: Jakob Nielsen’s AlertBox
The biggest issues are usually discovered by the first one or two users, and the following testers confirm these issues and discover the remaining minor issues. Only two test users would likely find half the problems on your website. This means that testing doesn’t have to be extensive or expensive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.
這點比較偏向於網頁設計的後半部 驗證跟除錯的工作。PONY就不多說什麼，
人百密難免會有一疏。網頁設計也差不多。有QA團隊作上線前的檢測是必要的。
只不過上面的研究顯示幫忙檢測的人越多不一定代表能挑出等比例的錯誤。
也許適當的人力幫忙檢測就足夠了。
9. Informative Product Pages Help You Stand Out
資訊化(條理化)的產品說明會幫你的網頁比別人更突出
If your website has product pages, people shopping online will definitely look through them. But many product pages lack sufficient information, even for visitors doing a quick scan. This is a serious problem, because product information helps people make purchasing decision. Research shows that poor product information accounts for around 8% of usability problems and even 10% of user failure (i.e. the user gives up and leaves the website) (Prioritizing Web Usability).
iPod marketing page
Apple provides separate “Tech Specs” pages for its products, which keeps complicated details away from the simpler marketing pages, yet provides easy access when they’re needed.
Provide detailed information about your products, but don’t fall into the trap of bombarding users with too much text. Make the information easy to digest. Make the page scannable by breaking up the text into smaller segments and using plenty of sub-headings. Add plenty of images for your products, and use the right language: don’t use jargon that your visitors might not understand.
絕大多數網路上產品都會需要有詳細的產品說明頁面。不管是奇摩購物還是其他的
平台都可以看到。上文只是在一次強調，如何透過編排把使用者所需要的足夠資訊
有系統有調理的傳遞給瀏覽者對於他們做出購買與否的決定是很重要的。尤其，適當
的定義不在於丟給使用者一大堆未經消化的文字資訊。而後必須要透過中間的媒介
跟轉譯，把艱深乏味的產品數據跟資料轉化成消費者(使用者)可以理解並有興趣的
訊息，進而傳遞給他們甚至說服他們。在這個中間，設計者也許並不負責文字撰寫
的工作。但是編排就是設計者必須要肩負起的任務了。
10. Most Users Are Blind To Advertising
大多數的使用者會對於廣告產生"眼盲"效應!
Jakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.
The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.
FlashDen
The square banners on the left sidebar of FlashDen are actually not ads: they’re content links. They do look uncomfortably close to ad banners and so may be overlooked by some users.
That said, ads that look like content will get people looking and clicking. This may generate more ad revenue but comes at the cost of your users’ trust, as they click on things they thought were genuine content
這個研究對於我們做網頁網站的設計者可以說很重要。因為他指出網頁的
瀏覽者經過這幾年的經驗累積，已經演化出一種對於廣告BANNER有自動
忽略的"眼盲感"。就是說他們會自動的選擇忽略那些被他們下意識認定是
"廣告"區塊，不管它內容說什麼很可能都變的沒有多大的說服力。上面的圖片
案例中。左邊的上方的區塊其實不是廣告。但是他們其實是網站的主選單
但是因為太過於接近左邊下面三個大廣告BANNER，結果使用者往往下意識
的就把他們也歸類成廣告而忽略掉。導致整個網站反而似乎主選單被刻意
的忽略而失去重心。
另外，很重要的一點是，上文作者又點出另外一個反面思考。那就是
反而看起來不像廣告的網頁廣告比較容易被使用者注意到(因為他們誤以為
那個是網站內容)。不過代價就是使用者可能會有被欺騙感 進而失去對
網站的信賴度(這是很有可能的)。孰輕孰重只有設計者跟網站經營者自己
去拿捏衡量了.....
OK，以上就是這次分享給大家有關網頁設計的10個頗具參考價值的
使用者行為研究報告。我想，如果不是擔任跟網頁設計工作有關的人
可能不太會感興趣吧。但是，貼這篇還有一個很重要的意義。那就是.....
忘了貼....原文出處:
http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/m revenue versus long-term trust.
看過以後覺得頗有分享給大家的價值。就簡單翻譯一下。貼上來給大家。
身為一個網頁(網路媒體)設計工作者。不是只要把網頁做的漂漂亮亮的
就算是稱值的交差了事。網頁與其他印刷媒體(報章等等)有很多不一樣的
地方。最大的不同處就在於網頁提供極大的互動因素在裡面。而一般印刷
媒體最多的互動也不過就是翻下一頁而已。OK，不囉唆，先把文章翻譯過來。
以下為翻譯文
10 Useful Usability Findings and Guidelines
十個很實用的使用者行為(網路)研究與參考準則
1. Form Labels Work Best Above The Field
表單的標題最好擺在欄位的上方處。
A study by UX Matters
found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.
Positioning labels on the left also poses another problem: do you left-align or right-align the labels? Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does the reverses: it makes for a good-looking but less scannable form. Labels above fields work best in most circumstances. The study also found that labels should not be bold, although this recommendation is not conclusive.
很多設計者喜歡在製作網路表單的時候，把欄位標題擺在輸入欄位的左邊。主要是因為
這樣視覺上似乎較為美觀。但是實際上卻會增加使用者不便，為什麼咧？因為簡單說
使用者在填寫表單的行為基礎上都是由上而下前進的。左右排列的方式也許快速瀏覽上
可行，但是卻失去了各個欄位與標題的連結性。此外，研究還發現，欄位標題最好不要
使用BOLD(加粗)字體。不過這只是建議並非絕對就是了。
2. Users Focus On Faces
使用者的視線會聚焦在臉部(圖像)的方向
People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.
圖中紅色區域為使用者視線聚焦的區塊
And now the baby is looking at the content. Notice the increase in people looking at the headline and text.
Here’s an eye-tracking study that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad.
這是很有趣的實驗。當上圖寶寶的臉是面像閱讀者的時候。使用者對於右邊文字內容
的關注度明顯的低於下面的對照組(也就是當寶寶的臉是望向右邊的文字內容)。
這個實驗主要是彰顯出我們會不自覺的看向別人也正在看的方向。最好的說明也許是
漫畫(第一神拳)裡面青木的怪異絕招。當別人看到你在用一個訝異的眼光看往某處。
他們會不自覺的也跟著被吸引去看你正在看的方向。上面這點在製作網頁設計的時候
尤其是在選擇使用真人插圖時，頗具有參考性。相信學過設計(或是美術)的人，多少
都應該了解圖形(乃至於圖片照片等等)其實都有方向性的。搞錯了方向，不只會失去
使用者該注意的聚焦點。甚至會把使用者的注意力帶往錯誤的方向。用的好跟用的不好
效果加減相差不可謂不小。
3. Quality Of Design Is An Indicator Of Credibility
網站的被信賴度取決於設計的品質(翻譯的不太好容我下面說明)
We don’t know if Fever app is any good, but the sleek user interface and website make a great first impression.
One interesting finding of these studies is that users really do judge a book by its cover… or rather, a website by its design. Elements such as layout, consistency, typography, color and style all affect how users perceive your website and what kind of image you project. Your website should project not only a good image but also the right one for your audience.
Other factors that influence credibility are: the quality of the website’s content, amount of errors, rate of updates, ease of use and trustworthiness of authors.
研究參考文獻:
* Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
* What Makes A Web Site Credible? A Report on a Large Quantitative Study
* The Elements of Computer Credibility
簡單的說吧，使用者很可能會決定一個網站(或是公司)可不可信賴，就在他
網頁的設計品質上下定論。現在已經不是10幾年前那個網路剛剛上路的草創
時期了。當時，幾乎所有人的介面都醜到爆。但是大家拼的是IDEA還有功能性。
上面的研究只是在一次點出，一個網站設計品質的高低(這個高低涵蓋的範圍
非常廣)絕對直接影響到來訪的使用者對於該網站的信賴度評價。更重要的是
爛設計會產生低可信用的觀感。而低可信用的觀感直接的結果就是 使用者
不敢跟你做交易。這樣說夠直接了吧？不管你網站的IDEA多棒，不管你網站
內容多充實。如果你沒有一個夠水準的網路設計師把所有的內容用一個
夠水準的方式表現出來給來訪者。誰也不敢隨便跟你交易的。這點，不要說
一般網路使用者，連PONY這種網路老客在開啟一個新的陌生網站的時候
也會先用這個標準去評量這個網站是誠信可靠的還是唬爛詐騙的。
4. Most Users Do Not Scroll
大多數的使用者會(不會)往下拉網頁看??
Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit. This data highlights just how important it is to place your key content on a prominent position, especially on landing pages.
This doesn’t mean you should cram everything in the upper area of the page, just that you should make the best use of that area. Crowding it with content will just make the content inaccessible; when the user sees too much information, they don’t know where to begin looking.
This is most important for the home page, where most new visitors will land. So provide the core essentials there:
1. Name of the website,
2. Value proposition of the website (i.e. what benefit users will get from using it),
3. Navigation for the main sections of the website that are relevant to the user.
However, users’ habits have significantly changed since then. Recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. Many users are more comfortable with scrolling than with a pagination, and for many users the most important information of the page isn’t necessarily placed “above the fold” (which is because of the variety of available display resolutions a quite outdated, deprecated term). So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.
這個問題可以說爭議性一直存在。有一派認為使用者大多都只會看開啟的網頁的
上部視窗內容，而不會刻意去往下拉(滾輪)網頁看下面的內容。但是另一派則認為
使用者並不會排斥往下拉網頁看更多內容。這兩種主張PONY都看過研究報告。
其實，這個問題的起緣是在於早期滑鼠上並沒有滾輪這個標準配備。很基本的
滑鼠上面就只有左鍵跟右健而已。如今這種滑鼠幾乎已經在市面上找不到了。
更甚者，滑鼠上面的按鈕是越來越多。什麼滾輪上下轉 按鍵左右動 還有
上一頁下一頁的快速按鈕.....常常搞的PONY是昏頭轉向。所以至今，PONY仍然
用的是最基本的兩鍵一滾輪的滑鼠。簡單好用就好...(靠北...岔題了)
基本上來說，上面兩派學說其實都承認 當網頁一開啟後螢幕的第一個顯示畫面
(大約是1024*768)是最黃金重要的區塊。但是並不是所有網站的首頁都可以
把內容壓縮到這個區塊當中。硬擠有時候反而會更慘而已。因此如何有效配置
網站最重要(最有價值)的也最希望來訪者接收的訊息放在這個一開就一定會看到的
區域，是網頁設計工作者非常重要的任務。上面的文章提供了一點參考方向。
就是認為有三種東西一定要擺在這個區域當中。
1. 網站的LOGO 名稱 (這個有點廢話)
2. 網站最主要的訴求(服務)
3. 網站的主選單(也就是各個頁面可以來回換頁的選單)
PONY個人覺得這個建議有些含糊。第一跟第三點也是有點廢話。不過，這是
最基本的，換句話說，如果你在做網頁設計，卻連上面這三點都沒有顧好。
那你絕對是一個失敗的網頁(網站)設計師。
5. Blue Is The Best Color For Links
超連結還是藍色最好.....
While giving your website a unique design is great, when it comes to usability, doing what everyone else is doing is best. Follow conventions, because when people visit a new website, the first place they look for things are in the places where they found them on most other websites; they tap into their experience to make sense of this new content. This is known as usage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.
Google網站是一個很好的案例，他任何連結都一定是使用基本藍色+底線。
原因無他，只因為藍色加底線是被最多使用者接受的超連結印象。
What color should your links be? The first consideration is contrast: links have to be dark (or light) enough to contrast with the background color. Secondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usability if your priority, sticking to blue for links is best. The browser’s default link color is blue, so people expect it. Choosing a different color is by no means a problem, but it may affect the speed with which users find it.
簡單的說吧，上面的研究報告指出，絕大多數的使用者仍然最容易
辨識出網頁上的超連結選項當他們是藍色的(而且還有底線Underlone)
這點頗為讓PONY訝異。儘管今天CSS發達到不行。但是仍然有很多很多
的人單純的只是使用網路。這些人並非是什麼網路老手。但是對他們來講
容易辨識 又不會改變的視覺依據是對他們很重要的行為經驗影響。動物實驗
中，連猴子跟鴿子做幾次以後就都知道。按下發亮的按鈕就會有東西吃。
人也是一樣。當藍色又有底線的文字出現在網頁上時，沒幾次他們就知道
按了就會有相關聯結的網頁。這是很基本的。
但是進一步的來說，難道就非得要限制住設計者做到哪文字連結就一定
要是藍色的?? ㄚ萬一背景也是藍色的那不是死定了？ 好問題! 以PONY的
經驗來說，我負責做的網站(網頁)幾乎沒有幾個是有白底黑字的。絕大多數
都有很強烈的風格感(例如卡通 遊戲 或是運動等等)。這些網頁中很難去
要求一定要有白底可以放黑字。有時候是灰底 有時候更可能是彩色底。
第一個要考量的絕對是文字的辨識度以及閱讀的舒適度。不管是背景顏色
太花俏或是背景色與跟文字色太過接近，又或者是即使不接近但是閱讀上
很傷眼。這些都是要先避免掉的。再來說到文字超連結。儘管藍色也許
是研究報告裡最安全的選擇。但是不一定適用於所有地方。但是底線的
出現對於大多數網路使用者來說就是一個可辨識的參考。因此底線underline
使用絕對是必要的。再來就是即使不能用藍色。超連結的文字也應該要
讓他能夠與其它的純文字區隔開來，加上底線配合以及rollover滑鼠
移上後的顏色變化。(甚至再加上Alt""註解)這些就可以彌補掉不能用
藍色的問題(甚至有過之而無不及)。
6. The Ideal Search Box Is 27-Characters Wide
最好的搜尋輸入欄位是27個字元
What’s the ideal width of a search box? Is there such a thing? Jakob Nielsen performed a usability study on the length of search queries in website search boxes (Prioritizing Web Usability). It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.
The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.
Google’s search box is wide enough to accommodate long sentences.
Apple’s search box is a little too short, cutting off the query, “Microsoft Office 2008.”
In general, search boxes are better too wide than too short, so that users can quickly review, verify and submit the query. This guideline is very simple but unfortunately too often dismissed or ignored. Some padding in the input field can also improve the design and user experience.
這個是沒什麼好特別講解的了，27的字元是英文的基礎上研究出來的參考。
對於中文網頁可能不一定適用。但是上面文章的最後到是點出一個重點，
那就是 搜尋輸入欄位寧可過長 也不可過短。最基本的條件是使用者應該要
可以檢視 修改 自己輸入的關鍵字收尋 然後才送出(按鈕)。作者說雖然這點
聽起來很簡單，但是卻常常被忽略掉。最容易被忽略掉的原因PONY認為是
因為有些人希望節省空間，並且認為徒留一大條區塊給搜尋欄位是很浪費的。
這點非常不正確。對於一個已經知道自己要找什麼東西的使用者來說，
使用搜尋輸入應該是他最快找到他要的目標的方法。以這個觀點來看。一個
使用上極度不方便的搜尋欄位設計，變相的等於放棄了這個很可能是未來
顧客的使用者。對不對?
7. White Space Improves Comprehension
白(空白)的空間可以改善使用者對網頁內容的理解力
Most designers know the value of white space, which is the empty space between paragraphs, pictures, buttons and other items on the page. White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.
Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.
White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.
In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.
所謂寸土寸金的觀念也許不一定完全適用在網路媒體。過去一般的報章媒體常常會
因為版面的受限，變的巴不得把所有內容擠了又擠 擠了再擠。最明顯意見的莫過於
分類廣告欄版面吧。回到網路媒體，上面的研究顯示透過適當的使用預留空間
可以讓使用者對於網頁內容的理解力大大的增加了將近20%。適當的讓文章段落
圖片 按紐等等都有足夠的預留空間(上下左右)幫助網頁閱讀讀者在瀏覽時更專注
也更容易移動(視覺)。上面文章最後還寫到，儘管一些實驗並沒有辦法一定得到
預留多少空間才是適當足夠的。但是卻被證實 預留空白空間絕對會影響到使用者
的網頁使用滿意度跟使用經驗。 所以！當你老闆又要你非得要把所有文字 圖片
按紐等內容全部都擠在一起的時候。別再委曲求全了。拿出專業的數據來力爭吧。
8.Effective User Testing Doesn’t Have To Be Extensive
有效的使用者測試不一定就得要耗費人力
Jakob Nielsen’s study on the ideal number of test subjects in usability tests found that tests with just five users would reveal about 85% of all problems with your website, whereas 15 users would find pretty much all problems.
Source: Jakob Nielsen’s AlertBox
The biggest issues are usually discovered by the first one or two users, and the following testers confirm these issues and discover the remaining minor issues. Only two test users would likely find half the problems on your website. This means that testing doesn’t have to be extensive or expensive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.
這點比較偏向於網頁設計的後半部 驗證跟除錯的工作。PONY就不多說什麼，
人百密難免會有一疏。網頁設計也差不多。有QA團隊作上線前的檢測是必要的。
只不過上面的研究顯示幫忙檢測的人越多不一定代表能挑出等比例的錯誤。
也許適當的人力幫忙檢測就足夠了。
9. Informative Product Pages Help You Stand Out
資訊化(條理化)的產品說明會幫你的網頁比別人更突出
If your website has product pages, people shopping online will definitely look through them. But many product pages lack sufficient information, even for visitors doing a quick scan. This is a serious problem, because product information helps people make purchasing decision. Research shows that poor product information accounts for around 8% of usability problems and even 10% of user failure (i.e. the user gives up and leaves the website) (Prioritizing Web Usability).
iPod marketing page
Apple provides separate “Tech Specs” pages for its products, which keeps complicated details away from the simpler marketing pages, yet provides easy access when they’re needed.
Provide detailed information about your products, but don’t fall into the trap of bombarding users with too much text. Make the information easy to digest. Make the page scannable by breaking up the text into smaller segments and using plenty of sub-headings. Add plenty of images for your products, and use the right language: don’t use jargon that your visitors might not understand.
絕大多數網路上產品都會需要有詳細的產品說明頁面。不管是奇摩購物還是其他的
平台都可以看到。上文只是在一次強調，如何透過編排把使用者所需要的足夠資訊
有系統有調理的傳遞給瀏覽者對於他們做出購買與否的決定是很重要的。尤其，適當
的定義不在於丟給使用者一大堆未經消化的文字資訊。而後必須要透過中間的媒介
跟轉譯，把艱深乏味的產品數據跟資料轉化成消費者(使用者)可以理解並有興趣的
訊息，進而傳遞給他們甚至說服他們。在這個中間，設計者也許並不負責文字撰寫
的工作。但是編排就是設計者必須要肩負起的任務了。
10. Most Users Are Blind To Advertising
大多數的使用者會對於廣告產生"眼盲"效應!
Jakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.
The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.
FlashDen
The square banners on the left sidebar of FlashDen are actually not ads: they’re content links. They do look uncomfortably close to ad banners and so may be overlooked by some users.
That said, ads that look like content will get people looking and clicking. This may generate more ad revenue but comes at the cost of your users’ trust, as they click on things they thought were genuine content
這個研究對於我們做網頁網站的設計者可以說很重要。因為他指出網頁的
瀏覽者經過這幾年的經驗累積，已經演化出一種對於廣告BANNER有自動
忽略的"眼盲感"。就是說他們會自動的選擇忽略那些被他們下意識認定是
"廣告"區塊，不管它內容說什麼很可能都變的沒有多大的說服力。上面的圖片
案例中。左邊的上方的區塊其實不是廣告。但是他們其實是網站的主選單
但是因為太過於接近左邊下面三個大廣告BANNER，結果使用者往往下意識
的就把他們也歸類成廣告而忽略掉。導致整個網站反而似乎主選單被刻意
的忽略而失去重心。
另外，很重要的一點是，上文作者又點出另外一個反面思考。那就是
反而看起來不像廣告的網頁廣告比較容易被使用者注意到(因為他們誤以為
那個是網站內容)。不過代價就是使用者可能會有被欺騙感 進而失去對
網站的信賴度(這是很有可能的)。孰輕孰重只有設計者跟網站經營者自己
去拿捏衡量了.....
OK，以上就是這次分享給大家有關網頁設計的10個頗具參考價值的
使用者行為研究報告。我想，如果不是擔任跟網頁設計工作有關的人
可能不太會感興趣吧。但是，貼這篇還有一個很重要的意義。那就是.....
可以證明本部落格也是充滿知性了啊!!!
忘了貼....原文出處:
http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/m revenue versus long-term trust.
全站熱搜
留言列表
