如何設計出易用性更高的iPad軟體

概要：iPad 軟體的介面設計缺乏統一性，各種功能不易被使用者發覺，使用者無意之間的手勢也很容易造成誤操作。此外，整個介面的隱喻【譯註一】過度接近印刷品，人機互動的方式也很怪異，這都會造成進一步的易用性問題。

「看上去像一台大號 iPhone，」這是我們要求使用者測試 iPad 時聽到的第一反應。（第二反應呢？「哇，好重。」）

但從互動設計的角度來看，iPad 的介面不應只是一個放大版的 iPhone 介面。

的確，我們的研究表明，iPad 底部的標籤欄遠不如 iPhone 的有效。在 iPhone 的小螢幕上，使用者即使將注意力集中在螢幕中央的內容，也很容易注意到靜靜待在底部的標籤欄。但 iPad 的大螢幕意味著使用者的視線會遠離標籤欄，並因而忽略（忘記）那幾個按鈕。

iPad 和 iPhone 還有一個重要區別：普通網站在 iPad 上的效果往往還算不錯。在我們之前做的 iPhone 易用性研究裡，使用者認為使用原生軟體的體驗遠勝於直接存取網頁。在那麼小的螢幕上訪問大多數網站都非常痛苦。（針對行動裝置最佳化的網站要好一些，但即便是這些頁面的易用性也不及原生軟體。）

在 iPad 的大螢幕上，常規網頁的易用性是可以接受的。當然，「手指肥大」的問題還是存在——這對於所有觸控屏都是問題，即手指較粗的使用者無法準確地點按螢幕上尺寸較小的目標。iPad 有「閱讀 / 點按尺寸不對稱」的問題：尺寸大到能讓使用者看得清的文字未必能夠讓所有人都很準確地點中。因此，對於想吸引 iPad 使用者的網站，我們強烈推薦使用較大的點按地區。

此外，iPad 軟體環境的視覺元素較為簡約，規則也比較完備，大部分網頁的體驗則要豐富繁雜得多。當使用者點擊某個原生 iPad 軟體裡的連結跳轉至瀏覽器時，可能會不適應。

過去十幾年來，每當我們問人對一個為案頭瀏覽器設計的網頁的第一印象時，他們最常用的詞都是「眼花繚亂」。而使用者對許多 iPad 軟體的第一印象則是「漂亮」。這種更讓人舒心的使用者體驗當然是好的，尤其是對於一台更偏向於休閑電腦——而非商用電腦——的裝置來說。不過，軟體如果只是漂亮，卻不能通過功能和內容讓使用者得到實際的好處，就不能說是合格。

初始研究

我們對於 iPad 軟體易用性的初始研究是在蘋果發布 iPad 的幾個星期之後進行的。我們對七名使用者進行了測試，其中每個人都有至少三個月的 iPhone 使用經驗，但只有一人事前用過 iPad。

（此人只用過一星期——過去我們進行易用性測試時，通常要求參與者有至少一年的裝置使用經驗。）

這份調查報告所呈現的當然只能算初步性結果。不過我們還是決定把它發布出來，因為 iPad 平台比較特殊，在未來數月，我們會看到相當多的 iPad 軟體誕生。如果我們目前對於 iPad 軟體的易用性問題已經有了一定瞭解（無論這些瞭解是多麼初級），但卻不共用給這些軟體的設計者，那是很可惜的。

我們測試了以下軟體和網站：

- ABC player
- Alice in Wonderland Lite
- AP News
- Art Authority
- BBC News
- Bloomberg
- craigsphone (Craigslist)
- eBay (原生軟體，以及 ebay.com 網站)
- The Elements (物理課程軟體)
- Endless.com
- Epicurious
- ESPN Score Center
- ESPN.com
- Gap
- Gilt
- GQ
- GWR Lite (吉尼斯世界紀錄)
- iBooks
- IMDb
- iverse Comics
- Kayak (kayak.com)
- Marvel Comics
- MLB.com
- Nike.com
- Now Playing
- NPR (美國國家廣播電台)
- The New York Times Editors’ Choice
- Popular Science
- Time Magazine
- USA Today
- virginamerica.com
- whitehouse.gov
- Wolfram Alpha
- Yahoo! Entertainment

怪異的介面

第一批 iPad 軟體讓人想起了 1993 年時的網頁設計。當時 Mosaic 剛剛發明了「映像熱區」技術，可以把任何圖片中的任何地區設為介面元素。於是平面設計師蜂擁而上：只要是能畫得出來的東西，都可以被用作介面元素，不管合不合理。

iPad 軟體也是一樣：任何能顯示、能觸摸的東西都可以用作介面元素。沒有標準可言，設計師也不知道使用者的期待為何。

更糟糕的是，對於各種螢幕元素在使用者點按之後應該有何反應的問題，目前還不存在大家普遍認可的規範。比較常見的美學風格是使用較為平扁的圖片和視覺元素，讓軟體看起來有如被蝕刻在 iPad 螢幕上一樣。沒有燈光模型，也沒有偽裝的立體感來暗示某個視覺元素是「凸起」或「沉下」的（因而是可以與之互動的）。

「《紐約時報》編者推薦」這款 iPad 軟體就是典型的所謂平扁化「蝕刻玻璃」式介面設計。（點擊可看 1024×768 的大圖）

相比之下，案頭軟體的設計一直都有大家普遍認可的圖形介面設計規約，例如看上去凸起的按鈕是可以點擊的，捲軸和其他互動元素在視覺上必須和內容有明顯區別。

傳統圖形介面設計中的「政教分離」特性——即內容與功能 / 指令的分離——被帶入了現代網頁設計的世界。1993 年的那種映像熱區設計早已失寵，任何想在互連網上進行商業發展的網站都不可能再用那種風格了。

iPad 軟體的那種「螢幕蝕刻」風格的確好看。沒有視覺幹擾，沒有看上去充滿技術感的按鈕。但這種好看是以易用性為代價的。具體而言，一個自 1990 年代中期就已消失的易用性問題再度出現了：使用者不知道哪裡可以點按。

過去十五年的網頁易用性研究所面臨的主要問題不是使用者不知道有哪些選項，而是他們不知道該「去哪」，不知道「該選那個選項」。iPad 軟體的介面讓我們又回到了這個原點。

不統一的互動設計

令問題進一步惡化的是：使用者搞清楚了介面的用法之後，無法在其他的 iPad 軟體裡重複應用這套用法。每個軟體用來實作類別似功能的介面都完全不一樣。

舉例來說，在不同的軟體裡，點按一張圖片可能造成如下五個結果：

- 無結果
- 圖片被放大
- 進入關於這張圖片的詳細頁面（超連結）
- 圖片被翻轉，顯示出同一地點的其他圖片（這裡的隱喻是新圖片位於原始圖片的「背後」）
- 彈出導航選項

USA Today 使用了最後一種設計：如果你點按報紙的標識，它會彈出一張導覽功能表，裡面列有報紙的各個版塊。這可能是我們測試過的互動設計中最令人意外的一項，沒有一個使用者想到會是這樣的。

（點擊可看 1024×768 的大圖）

同樣，當使用者讀到了螢幕底部之後，如想繼續閱讀，可能遇到如下三種不同的設計：

- 仍然停留在同一頁，並在文字地區內往下滾動。這裡的問題在於你必須在文字地區內滾動才行，但文字地區在螢幕上並無明顯區分，故使用者必須靠猜才知道哪些文字是可以滾動的。

- 用手往左滑動頁面（這有時會把你帶到「下一篇文章」，而不是同一篇文章的下一頁）。不過這一手勢也有問題，比如在《紐約時報》的 iPad 版裡，當一個地區被廣告擋住時，往左滑動就不管用了。

- 用手往上滑動頁面。

如果用手滑動上圖中廣告覆蓋的地區，是不會有任何結果的。（點擊可看 1024×768 的大圖）

iPad 的介面元素目前有三大問題會引起使用者的困惑：

- 不易發現：在「蝕刻玻璃」的視覺美學之下，介面元素被藏了起來，使用者不知道哪裡是可以進行互動的。

- 不易記憶：各款 iPad 軟體對互動手勢的設計不同，會增加學習難度。如能更多利用規範手勢，會大有裨益。

- 容易誤觸：使用者不小心按到了某處，或是某個手勢無意間觸發了一個功能。

把這三個易用性問題加在一起，iPad 上的使用者體驗就往往會出現「不知道發生了什麼事」或「不知道要再次出現同樣結果應該怎麼做」的情況。更糟糕的是，由於 iPad 軟體上沒有統一的「撤銷」（undo）功能（類似瀏覽器裡的「後退」按鈕），使用者經常不知道如何回到之前的狀態。

iPad 不是印刷品

很多以內容為主的軟體都採用了「用手指滑動螢幕以跳轉到下一篇文章」的設計，這是源自印刷品的一種介面隱喻。這種隱喻非常根深蒂固，以至於這些軟體的「封面頁」裡的文章標題都是無法點按以跳轉到文章本身的。iPad 軟體基本沒有首頁的概念，但我們的測試結果表明使用者都很需要類似首頁的功能。（他們常常也需要搜尋，這在很多軟體裡也是缺席的。）

在電子媒介中，線性「下一篇」這種概念並不合理。讀者更願意從一張由相互關聯的項目組成的菜單中挑選，自己決定下一步去看什麼。

關於 iPad 的使用者體驗設計有個策略性問題：究竟應該賦權於使用者，還是堅持作者的權威性？早期的一些設計限制過多。長期使用全球資訊網的經驗讓使用者學會了欣賞自由與控制權，過於線性體驗很難會讓他們滿意。

內容出版人希望藉由將每本刊物設計成一個獨立的軟體環境來增加其價值感。同樣，他們也希望使用者不再是在無數個網頁裡瞎逛，而是把時間花在少數幾個軟體裡，認為這樣會帶來更高的附加價值。

普通使用者使用案頭瀏覽器時，一周可以輕易訪問一百個網站，其中大部分都只看一到三個頁面。（舉例來說，在某次測試裡，幾位 B2B 使用者總共訪問了十五個網站，平均在每頁停留的時間是二十九秒。）大部分網站只會被訪問一次，因為它們要麼是使用者在搜尋過程中無意碰到的，要麼是使用者從其他網站或社交媒體上的文章裡撞見的連結。在缺乏真正的使用者關係的情況下，內容網站是沒有價值的，而使用者花在網上的時間所產生的經濟價值有 90% 都被搜尋引擎佔去了。

iPad 軟體目前的設計策略無疑是朝著營造浸入式體驗的方向發展，這是為了增加使用者對個別資訊源的粘性。這一點與全球資訊網給我們的啟示相悖。參差多態才是全球資訊網的力量的源泉，沒有網站能期望抓住使用者的全部注意力。使用者在網站和網站間頻繁跳轉，驅使設計者遵循介面設計的規範，創造使用者出無需學習（甚至不用怎麼看）即可使用的網站。如果 iPad 使用者真的只鎖定某幾個常用軟體的話，那麼它的設計思路則會很不一樣。

「卡片」與「捲軸」

使用者介面先驅傑夫·拉斯金（Jef Raskin）曾經用「卡片」與「捲軸」來區分兩種截然不同的超文本模型：

卡片的畫布尺寸是固定的。你可以在這個二維空間裡隨意安排資訊（可以實現漂亮的布局），但你不能擴大該地區的尺寸。使用者要看更多的資訊，就必須跳去另一張卡片。HyperCard 就是卡片模型的最著名執行個體。

捲軸有足夠的空間容納任何數量的資訊，因為畫布可以隨意延展。使用者不需要經常跳轉，但捲軸的布局通常不那麼精緻，因為設計師無法控制使用者在任意時間點能夠看到哪些內容。

全球資訊網絕對是捲軸派的，尤其是在今天。滾動網頁是家常便飯，使用者有時會查看長網頁底部很深處的資訊。即便是手機軟體也經常利用捲軸式介面來呈現小螢幕無法容納的資訊。

對比之下，卡片派設計在早期的 iPad 軟體設計中佔主導地位。捲軸也會不時出現在螢幕上，但大多數軟體都試圖在這塊漂亮的螢幕上呈現出一個固定的頁面配置。

這兩種模式如果並存下去並不奇怪：iPad 上是卡片派主導，案頭電腦上是捲軸派主導（手機則居於兩者之間）。但兩種模式的融合也有可能出現，捲軸式互動風格的優勢或許會令使用者期待 iPad 軟體更多地採納它。

如何改善 iPad 的使用者體驗

儘管這次初步的使用者研究有其局限性，但它還是為如何設計出易用性更高的 iPad 軟體提供了方向：

- 增加介面元素的立體感，更好地定義個別的互動地區，讓使用者能夠意識到這個元素可能提供的功能，從而減少發現互動元素的難度。

- 為了達成上述互動方面的改善，有必要適度放棄蝕刻玻璃美學。第一批 iPad 軟體大量使用了平扁化的視覺元素，在這一基礎上添加其他視覺元素或許會令螢幕看上去沒那麼美觀，但設計師可以通過使用更加微妙的圖形介面來彌補這一點。例如，Windows 7 從蘋果那裡繼承的圖形介面風格就顯得太粗放了。

- 不要試圖通過古怪的設計來增加附加價值。更好的方法是保持互動元素的統一性，讓使用者專註於內容本身，而不是為如何找到內容而煩惱。

- 支援標準化導航，在大多數軟體裡增加「後退」、搜尋、可點擊的文章標題、以及首頁等選項。

雖然我們的足本報告給出了更多更細化的建議，但我們顯然還未能制訂出一套完整的設計規約。

有一個重要問題大概在一年之後——在我們觀察了人們平日使用 iPad 的行為之後——才會有答案：與案頭電腦和移動全球資訊網相比，使用者在 iPad 上的活動會不會以更加浸入性的體驗為主？換言之，人們究竟會不會鎖定幾個軟體並深度使用之？還是說會在多個軟體之間頻繁跳轉，每個都是蜻蜓點水？

或許人們會選擇在案頭電腦上進行目的較為明確的活動，例如對新課題進行調研，或是購物和投資管理等直接了當的事務。iPad 則以休閑為主，例如用來追新聞（無論是「真正的」新聞還是社交網站上的社交動向更新更新）和消費娛樂性內容。這個問題的答案我們還不知道，但它決定了 iPad 目前那怪異的使用者介面需要在多大程度上進行改進。

—

【譯註一】這裡所謂「隱喻」（metaphor），指的是圖形介面對真實世界實體物的映射。例如電腦的「案頭」這個概念即實體辦公案頭的隱喻，用來代表資源回收筒的垃圾桶是實體垃圾桶的隱喻，iBooks 的翻頁效果是實體紙書翻頁效果的隱喻，等等。