【原創(chuàng)翻譯】Apple vs. Microsoft——網(wǎng)站可用性研究

今天我們要對(duì)兩家大公司——蘋果和微軟——的網(wǎng)站做一個(gè)比較。

這兩大巨頭都對(duì)生產(chǎn)尖端產(chǎn)品以及引領(lǐng)軟硬件的發(fā)展感到自豪，但他們的網(wǎng)站又怎么樣呢？如何做出比較？更重要的是，哪一個(gè)網(wǎng)站更好，更實(shí)用呢？

在本文中，我們將從網(wǎng)站可用性的角度，對(duì)這兩家公司的網(wǎng)站做一個(gè)嚴(yán)密的剖析。

在這一比較開始前，我們應(yīng)當(dāng)注意到，這兩家公司的業(yè)務(wù)是圍繞著不同的市場展開的。

微軟的利潤基本上來自于企業(yè)用戶，其中包括向計(jì)算機(jī)制造商銷售操作系統(tǒng)許可和向企業(yè)銷售辦公軟件。這并不是說他們不賣東西給個(gè)人用戶——他們賣，他們一樣擁有針對(duì)于個(gè)人用戶的產(chǎn)品線，比如 X-Box，當(dāng)然個(gè)人用戶也會(huì)購買 Windows 和 Office。微軟的客戶目標(biāo)是每一個(gè)人，從家用電腦用戶到開發(fā)者及企業(yè)用戶，這從側(cè)面又補(bǔ)充了他們的網(wǎng)站的目的：試圖服務(wù)每個(gè)人。

另一方面，蘋果的業(yè)務(wù)基本針對(duì)個(gè)人用戶，它的大部分利潤來源于銷售硬件，比如 iPod 和 Mac。這使得蘋果的目標(biāo)更加明確：推銷，銷售并提供售后服務(wù)。他們不必為賣給制造商許可而操心，因?yàn)樗麄兪俏ㄒ坏闹圃焐?，因此，他們的網(wǎng)站的主要目的就是宣傳產(chǎn)品，擴(kuò)展產(chǎn)品線，并通過在線商店銷售產(chǎn)品。

1.首頁

首頁是網(wǎng)站中的第一頁，最重要的頁面之一，在多數(shù)情況下，主頁是唯一打動(dòng)訪問者，并使他們繼續(xù)瀏覽下去的理由。你有幾秒鐘的時(shí)間說服訪問者你的網(wǎng)站對(duì)他們有足夠的價(jià)值，否則的話，他們就會(huì)走開。

蘋果公司的一貫做法是，通過主頁告訴大家，網(wǎng)站還在正常運(yùn)行著。他們把主頁當(dāng)做是一個(gè)廣告板，總是展示一個(gè)他們最新產(chǎn)品的大幅廣告，下面附帶著三個(gè)當(dāng)前同等重要的產(chǎn)品或新聞。如果對(duì)這四個(gè)條目都不感興趣，可以點(diǎn)擊上方的大型導(dǎo)航條，它被分成幾部分來代表蘋果公司的核心產(chǎn)品：Mac，iPod 和 iPhone，其下拉菜單中還有更多的鏈接，比如在線商店和售后支持。除此之外，還有個(gè)搜索欄。

有趣的是，這幅主體廣告相當(dāng)巨大，幾乎覆蓋了整個(gè)頁面。如果它不能吸引你的注意力，那意味著整個(gè)網(wǎng)站的失敗。幸運(yùn)的是，蘋果通過良好的產(chǎn)品營銷知道如何抓住用戶的吸引力，所以，他們沒什么好怕的。

另一個(gè)需要注意的是，其網(wǎng)站簡單的內(nèi)容。你不會(huì)被側(cè)邊欄，通知或是額外的導(dǎo)航項(xiàng)目而打擾——在頁面上只有很少的東西，吸引你的注意力，使人輕而易舉地找到下一步的去向。

微軟對(duì)自己的首頁有著不同的詮釋。首先，他們?cè)陧敳糠胖昧艘粋€(gè)風(fēng)格相似的廣告，目的是抓住人們的目光。這三幅巨大的圖片廣告——能夠通過鼠標(biāo)的滑過來輪流展示，很吸引人的眼球，但這可能會(huì)削弱其他兩個(gè)廣告的效應(yīng)。在頁面頂端的，是搜索欄和導(dǎo)航條。

在主廣告下面的內(nèi)容就更有趣了，正如我先前所提到的，微軟的商業(yè)運(yùn)作涵蓋了從企業(yè)用戶到個(gè)人用戶的方方面面。這塊區(qū)域展示著微軟不同商業(yè)領(lǐng)域的新聞與重要信息。但是，其內(nèi)容是相當(dāng)枯燥無味的，大量信息充斥在這樣一個(gè)小空間內(nèi)，毫無條理而言。

誠然，這些內(nèi)容也被細(xì)分為了幾個(gè)要點(diǎn)，但其字號(hào)很小并缺乏圖片來區(qū)分條目?？傊?，它很難勾起我讀下去的欲望，因?yàn)樗_實(shí)，很沒勁。

2.流動(dòng)性

我所說的流動(dòng)的意思是：該網(wǎng)站的結(jié)構(gòu)布局，能讓人輕松地找到所需的信息嗎？我是否知道接下來應(yīng)該看什么——這個(gè)網(wǎng)站能否讓我更容易的到達(dá)目標(biāo)，或者說我需要在網(wǎng)頁內(nèi)容中努力尋找我想要的東西嗎？

這是 Apple.com 的 MobileMe 區(qū)塊：

蘋果在網(wǎng)頁架構(gòu)方面做得不錯(cuò)，在這個(gè)頁面，首先吸引你的應(yīng)該是右面的圖片，然后是左邊的大標(biāo)題?？戳舜髽?biāo)題后，可以繼續(xù)閱讀下面的推薦廣告，它們能夠輕松地引領(lǐng)人們?nèi)c(diǎn)擊免費(fèi)試用的注冊(cè)按鈕。每一項(xiàng)廣告下面都以鏈接到詳細(xì)內(nèi)容頁面的“Learn more”文本結(jié)束，這使得網(wǎng)頁沒有死角，并讓訪問者瀏覽下去。

微軟似乎努力過卻收效甚微。這是他們的 SharePoint  區(qū)塊：

是的，這兒是有個(gè)吸引目光的焦點(diǎn)——頂端長長的引述和一張服務(wù)器的圖片——但是接下來呢？下面所有內(nèi)容都極為單調(diào)，尤其是那個(gè)有 8 個(gè)鏈接的“Learn More”區(qū)塊。干巴巴的介紹讓訪問者缺乏瀏覽的欲望。有些微軟站點(diǎn)在布局上做的稍好些，能指引用戶的吸引力流動(dòng)，但它們都有一個(gè)通?。簝?nèi)容太多。

提供給用戶的多種選擇，增加了用戶的負(fù)擔(dān)——他們不得不思考自己想要什么，并處理更多的信息。通過減少選擇余地，蘋果引領(lǐng)用戶進(jìn)入了一個(gè)經(jīng)過精心設(shè)計(jì)的，提供了良好用戶體驗(yàn)的通道。

3.導(dǎo)航條

蘋果的網(wǎng)站上方有一個(gè)大型的導(dǎo)航條，這使網(wǎng)站的每個(gè)部分都能夠保持一致?？晒┻x擇的部分展示了蘋果的主線產(chǎn)品，同樣也有包括售后支持和在線商店在內(nèi)的重要內(nèi)容。導(dǎo)航條同樣集成了搜索功能，同時(shí)還進(jìn)行了品牌展示，比如主頁按鈕顯示的是蘋果的 Logo 而不是簡單的“Home”標(biāo)簽。任何額外的二級(jí)導(dǎo)航都位于個(gè)別頁面，而且都在網(wǎng)頁的內(nèi)文中，也許是在側(cè)邊欄，也許是個(gè)頂端的水平條。

微軟的主頁有一個(gè)類似的導(dǎo)航條，但它在網(wǎng)站中并不是始終一致的。事實(shí)上，所有的子頁面都有各自不同的導(dǎo)航條——不論在樣式上還是內(nèi)容上。主頁的導(dǎo)航條幾乎是微軟網(wǎng)站各個(gè)部分的網(wǎng)站地圖。在包括主頁在內(nèi)的許多導(dǎo)航條上，微軟都使用了下拉菜單——與蘋果不同，蘋果不光使用下拉菜單——而且是巨大的下拉菜單。有時(shí)候，下拉菜單竟然還有一個(gè)滾動(dòng)條！（Firefox 中）

這是好是壞？在最近的一篇文章中，Jakob Nielsen——有名的可用性大師——寫到，巨型的下拉菜單還是可行的。說它可行是因?yàn)樗?STRONG>集中提供了多種選項(xiàng)，使人更容易地檢索并獲取所需。通過它能夠達(dá)成某個(gè)既定目標(biāo)，比如將只需要顯示一次的命令集中放在一起。

微軟使用大型下拉菜單也有一定的道理，但他們做的有點(diǎn)兒過了。有些不同的選項(xiàng)都指向了同一個(gè)內(nèi)容，像‘Office’下拉項(xiàng)和‘All Products’下拉項(xiàng)中的‘Office’選項(xiàng)。大型下拉菜單還遮擋了其下面的頁面內(nèi)容，如果鼠標(biāo)不小心滑過了菜單，還要刻意移開鼠標(biāo)以繼續(xù)瀏覽——同時(shí)還要小心謹(jǐn)慎，不把鼠標(biāo)移到其他條目上。

大的下拉菜單同樣包含了不少內(nèi)容——有時(shí)一次顯示大約 13 個(gè)條目，這使得分辨選項(xiàng)更加困難。同樣，網(wǎng)站各區(qū)塊導(dǎo)航菜單的不一致也給頁面跳轉(zhuǎn)制造了障礙。像從 Office 網(wǎng)站跳轉(zhuǎn)到 XBox 網(wǎng)站。

4.可讀性

因?yàn)榫W(wǎng)站中的主要內(nèi)容都是文字，所以確保每部分內(nèi)容都清晰易讀是尤其重要的。下面是改進(jìn)網(wǎng)站可讀性所需考慮的要點(diǎn)：

• 使文本足夠大以便閱讀；
• 確保文字與背景有足夠的對(duì)比；
• 在文字周圍提供足夠的留白以避免其他圖片和內(nèi)容干擾讀者；
• 提供充足的大標(biāo)題和高亮/粗體字，以便讀者快速獲取關(guān)鍵信息；
• 為個(gè)別文字區(qū)域添加圖片和圖標(biāo)來強(qiáng)調(diào)內(nèi)容，如產(chǎn)品或功能描述；
• 保持文字簡潔并突出重點(diǎn)；

現(xiàn)在讓我們來看看蘋果和微軟在這方面做得如何。這是 Apple.com 上一個(gè)典型的頁面：

蘋果使所有東西都輕松易讀。其文字雖然很小，但都不至于太小使閱讀困難。標(biāo)題很大很突出，使人很快就能找到這一部分的要點(diǎn)。蘋果還大量地運(yùn)用留白以區(qū)分每一部分，并添加圖片提升每段文字的趣味性。

這是 Microsoft.com 上的一個(gè)典型頁面：

它遵循了可用性設(shè)計(jì)的通常準(zhǔn)則，把大塊的東西分割成容易理解的小段文字。其頁面上的更多內(nèi)容和對(duì)標(biāo)題及高亮文字的多種不同處理方式，使它看起來要比蘋果的網(wǎng)站忙得多。

頁面上的過多樣式導(dǎo)致了視覺的混亂，各種不同的顏色和粗體字吸引著人們的注意力，在這種情況下，頁面需要簡單化以使訪問者更易閱讀。這是微軟的另一個(gè)網(wǎng)頁，微軟安全中心：

頁面上的文字過小而難以閱讀，而且它需要更多的留白來把文本分離開來。再來看看 Apple.com 上一個(gè)繁忙的頁面：

這是蘋果在線商店，到處都有大量的商品信息和分類鏈接。字體小得恰到好處以容納更多內(nèi)容，當(dāng)然，留白的良好運(yùn)用仍然確保了頁面的可用性。