儂儂 (Bella) iPad 電子互動雜誌 Review

Posted By Mr. Monday (最新 UI 訊息同步 update 在 UIUI)

城邦媒體集團和遠傳電信合作推出了儂儂 iPad App 的互動電子雜誌,因其新穎的互動設計,加上媒體的大量報導。因此,這款 App 在短短的時間內就擠上了 iPad Lifestyle 銷售排行榜的第一名。(而在我進行 review 的當下,依然是雄踞第一名)。這款互動雜誌的推出就如同當時 Wired 推出第一本互動式電子雜誌一般轟動,雖然沒有 Wired 那麼誇張的火力展示,不過相去也不遠了。

由於 MMDays 長期關注電子書的發展,加上這款互動電子雜誌的程式執行團隊是 MMDays 的朋友,因此,特別邀請我們進行 Review。而因緣際會地,正準備休假的 Mr. Monday 在下就被賦予了這個任務。我已經將近有兩年沒有進行產品的 Review 了,就連產品的發表會的邀約都因為太過忙碌而婉拒參加,不過 Mr. Tuesday 極力讚賞這個產品,加上敝人也對電子書的互動非常感興趣,因此就犧牲一點休假的時間來幫忙做了 review。

為了避免大家覺得我們有幫產品宣傳的嫌疑,這邊先跟讀者說明,這次 review,為了維持 review 的客觀性,敝人沒有收取任何費用,就是純粹興趣性質的 review。而實際上,這篇文章不僅僅只是單純地 Bella 的 App review,在這篇文章裡我還有意藉題發揮闡述一些問題。希望這篇 review 的報告對各位讀者能夠有幫助。不過報告本身非常冗長,如果讀者們對於互動的內容分析不感興趣,你可以直接跳到結尾討論部分。

Reviewer

通常一般在做產品 Review 的時候,我們會找一個非常有產品經驗的人,因相信其專業,所以認為這樣子的人 review 出來的結果會特別有公信力。簡單來說,這樣子的 review 做法就是專家 review。好處是,我們可以從一個專家的角度,就可以得到許多非常有用的回饋。不過相對的壞處是,這樣子也有很多的意見就是專家的喜好問題了,加上專家因為已經成了專家,所以很多認為理所當然的東西就會成為專家的盲點。

這次,我決定來一次不一樣的 review: 專家 review + 使用者測試。透過使用者測試,觀察使用者的行為,專家可以非常敏略地抓出問題所在,並且修正自己的盲點,而同時保有專家的洞見。雖然這樣子 review 的 effort 會比較高一點,時間會稍微長一點,但是在過程中卻是值得的。此外,成本跟方法也沒有想像中的高以及複雜。在這邊,我是要做一個簡單的示範,跟業界的產品設計者分享透過這樣子的 review 方式,可以在讓你出貨前可以如何用最簡單的方式,最小的成本來獲得使用者意見。這種 combo 的 review 絕對是值得的。

首先,我們要找一個專家,因為整個測試都是由專家來主導,因此專家的知識是非常重要的。在一個組織裡面,你總可以找到設計專家,或是互動經驗相關的專家,如果都沒有的話,你可以找相關的朋友,如果連朋友都沒有的話…嗯…就趕快交一個吧!

專家

我想對於 review 這個電子性產品我或許可以算是專家。我本身是研究 HCI (人機互動介面),有產品設計經驗,同時也具有技術能力,對於操弄使用者測試,雖然說不到專業,但是一些簡單的使用者測試也算熟稔。此外,對於 3C 電子產品的互動介面,除了還在 lab 裡面秘密研究的東西之外,大概沒有什麼特別新奇的互動是我沒看過的。因此,任何新穎的 UI 在我面前要構成新穎的話,是有點困難。這邊只是想要闡述,敝人很難受到新穎性的 UI 的影響,這是好事也是壞事。好事是,我可以更客觀地評估可用性 (usability) 問題,壞事是,我會低估新穎性帶給市場的震撼。因為對於大部分的一般使用者,這類型的互動介面依然是超前的。這也說明了為什麼這款 App 在可用性如此之差的情況之下,也可以賣得這麼好的原因。

這邊我想要說明一下,賣得好不等於設計成功。除非你原本就預期是這個樣子。比如說,你原本預期的目標市場是 A,結果因為其他的因素,結果你在市場 B 成功了,那麼這個是瞎貓碰到死耗子,你無法準確地預測你的成功。因此,你可能以為你在市場 A 成功,所以,你下次就想要用同樣的手段進攻市場 A,但是你一直沒有搞清楚,其實你是在市場 B 成功。這次的 App 大賣,我想很多的因素或許是歸結於新穎性的互動,吸引了對這樣子嚐鮮感興趣的買家/玩家,但是或許不是讀者。我建議,可以對買家做個分析,以釐清問題。關於這樣子互動電子書的個人想法,我留到最後再來討論,畢竟是比較個人意見的部分。

使用者

對於這次測試,我知道儂儂是個女性雜誌。但是,Mr. Tuesday 是個男生,並且非常欣賞這樣子的互動設計。因此,我覺得內容跟互動可以分開來檢視,所以,測試的使用者不僅僅只有女生,也包括了男生。除此之外,此目標平台是 iPad,因此我在測試上面也測試了有 iPad 使用經驗的人,以及沒有 iPad 使用經驗的人。在使用者的背景上,全部都有資訊背景,這一點的確是比較偏頗。不過沒關係,因為在使用者測試之前,我已經充分玩過了,我玩過後的結論是,即使是擁有資訊背景經驗的人都會讓這個產品的可用性 (usability) 曝露出很大的問題,我就沒有必要找一個非資訊背景的人來折磨他/她了。

值得一提的是,使用者當中,的確有真正的 “原本的目標讀者”,如果設計者的意圖是要給原本閱讀儂儂這類雜誌的讀者的話。另外,在測試者當中,也有設計師,以及非常頂尖的 Geek,原因是,我想要從另外一個專家的角度來看這個互動。所以,你可以說,在使用者的尋找上面,我也是搭配了專家/非專家/目標群眾/非目標群眾,這是因為我想要從多元的角度來檢視這些互動。總共的測試者有七位,四女,三男。好了,我想使用者的 profile 到這邊應該可以了,再下去,可能連星座/出生年月日/MSN 帳號都要列出來了。

程序

每一位受測的使用者都非常 free,因為都是我的朋友,所以基本上不會有什麼非常緊張,或是以為自己在接受什麼智力測驗的這種問題。每一個位使用者,我都讓他們從 App 的 icon 親自點進去,第一頁一定是那堆文字漂浮的首頁。然後,我會跟他們說,這是我朋友做的軟體,想請你試用一下,基本上你在操作的時候,就按照你的喜好使用就好,除非你遇到非常大的困難,不然我只會在旁邊靜靜地看你的操作。如果你在玩的時候,有什麼意見或是想法你就直接說出來就好了。我沒有用任何筆記紀錄,因為筆記會讓操作者以為這是個非常嚴謹的測試,而記錄本身就會讓使用者的腎上腺素升高,而無法讓他們輕鬆自在。因此我選擇不用筆記,不過我相信我的記憶力應該沒什麼問題。

總體結果

這款軟體的確在互動上面讓使用者玩得非常開心,因為使用者通常非常少接觸到這麼多不同形式的互動。除此之外,使用者也對整體介面呈現的質感趕到讚賞 (不過這本來就是一款設計雜誌)。另外對於內容方面,在真正的使用者身上,大家一致感興趣的是瘦身的那個單元,除了那個單元的文字有被所有的女生閱讀之外,其它單元的文字大概就是被 “甩” 過去而已。而封面故事,以及人物專訪,通常是一個雜誌吸引讀者的核心 (這就是為什麼我們需要封面人物),對於儂儂的 “目標讀者” 來說,還算成功,因為這位讀者的確讀了封面故事以及人物專訪,並且非常喜歡嵌入的影音功能,因為一般的紙本雜誌不能達到這件事情。不過,這位讀者表示,內容似乎太少,尤其是衣服的部分。關於內容太少的部分,我會在後面的使用者測試,再度闡述這個問題是怎麼一回事。

前面都是使用者感到非常滿意的地方,而總體而言,除了幾次意外的當機之外,這個 App 設計得非常好玩,而不是非常好讀。因為整個 App 設計的有點類似遊戲,如果說是做火力展示 (像是 Wired 的電子雜誌), 這樣子就說得過去了。但是這樣子的設計有其缺點,最大的缺點就是裡面有 “太多” 互動的可能。因此,必須要使用者自己來 “探索” 這些互動的可能。加上這些互動的可能手勢非常混亂,混亂到使用者也搞不清楚在哪邊要用哪種手勢。不過沒關係,如果這個 App 只是想要突顯新穎性的話,這邊的確也成功了。

接下來我們就來仔細地 Review 使用者所遭遇的困難,然後我們可以一同透過這個使用者測試,或許可以讓我們瞭解互動的電子雜誌該要怎麼被設計。而本篇的 review 在措詞上面或許會稍微嚴厲一點,這主要是凸顯出問題的所在點。總體而言,此電子書的設計在台灣還是非常創新以及前端的,只是如果我們能夠在設計的時候,能夠更加注重這些設計的原則或是方法,可以讓互動更加順暢,也可提升產品的價值。

首頁

首頁是漂浮文字,使用者可以透過在螢幕上滑動,可以拖曳瀏覽這群目錄。當然,貼心的設計者,也在每一個頁面,設計了一個小問號在右上角。這是為了讓使用者感到迷惑的時候,可以點選小問號來做操作。當按下小問號時,就會如同上面圖片一般,跳出使用者提示。每一個頁面會根據不同的互動要點,有不同的提示,可說是煞費苦心。不過,有經驗的設計師都知道,如果你的產品 (這邊只一般的消費型產品) 設計到需要使用者打開手冊查詢怎麼使用的時候,實際上,你已經離一般的使用用漸行漸遠了。

基本上,在使用者測試過程當中,使用者並不會主動去按那個問號,或者是說,根本沒有人想去按那個問號。除非用手誤觸到之外,那個東西是永遠不會被開啟的。使用者會儘力的嘗試可能的互動,當他/她認為互動以及被他/她 “探索完畢” 後,他/她就會自動跑去下一個單元了。

所以,另外一個問題就出現了。這些太多的互動設計,實際上,並沒有全部被使用者玩過。而大部分的使用者在初步測試的時候只有走過一半的內容,甚至不到。當然,這跟其奇差無比的目錄設計有關。我們在下面會討論到這個部分。簡而言之,使用者自以為玩完後,為了獲取其他遺失章節的使用者回饋,我會主動告知使用者沒有看到的部分。

目錄設計

這本 “雜誌” 設計地最敗筆的地方是它的目錄 (如果它還算是一本雜誌的話)。這本雜誌從讀者開始點入的瞬間,就已經讓讀者開始迷失了。 一般的實體書,因為有書本的厚度,因此,讀者可以藉由這個書本的厚度資訊,大概瞭解自己讀到了哪裡,或者是有哪些沒有看過。加上一般閱讀都是線性,或者說單一方向,就是從前面翻到後面,一般來說即使是跳過不感興趣的單元,也是這樣子線性跳過。

每次我都會笑笑的問: “你知道怎麼回到首頁嗎?” 能夠順利而無礙的操作的人只有一個,就是那個 Geek,我相信他應該跟我一樣宅,但是即使如他,他也沒有發現所有的手勢 (顯然我的宅度稍微高了一點)。沒有一個人知道要按左上角 (如上圖,是按過之後的中間動畫的一張) 就可以回到首頁目錄。因此,使用者總是在自以為是的情況之下以為閱讀完雜誌了。實際上是,他/她根本只看了一半或是一半都不到。對於雜誌製作的人,最悲慘的事情莫過於此吧!  真是讓我想到一個寓言,”如果一棵樹在森林中倒下了,可是它周圍沒有任何可以聽見它聲音的人,那請問這棵樹有產生聲音嗎?”

當使用者按下左上方之後,會切到目錄 (如上圖右),而不是首頁。不過這樣子設計也是對的,因為目錄才是重點,不過這個目錄顯然無法凸顯重點,多個使用者跟我反映,透過這些縮圖她/他根本搞不清楚裡面有什麼東西。我們想像一下,實體雜誌多少會在標題上面用文字解釋一下,這邊是連文字都省了 。當然也不是沒有文字說明,而是你要點選一個小 icon 後,下面就有文字說明,圖片上也有文字說明。不過這個跟一般雜誌 “一目瞭然” 的閱讀習慣有很大的差別,我們在最後會統一敘述。

瀏覽列

瀏覽列 (上圖右上角) 也是令人迷惑的地方。基本上,整本雜誌設計得很有質感,我也知道設計師都喜歡把按鈕藏得隱而不顯,不過或許是太過隱而不顯,我發現有一半以上的使用者非常費力地才找到按鈕,然後甚至有人會找不到。因為白色的按鈕搭配白色的背景,我想除了設計只之外,大概沒有人會覺得那樣子的按鈕會有多麼直覺。除了迷惑人的按鈕之外,大家對於兩個按鈕的中間也感到迷惑,迷惑的原因是,有時候它會出現一個小房子,有時候不會出現。使用者都以為那個小房子是要回到首頁。當然,的確是回到 “首頁”,但是是單元首頁。不過使用者顯然沒有猜到設計者的意圖,我看到使用者在小房子消失的單元裡面,還試圖點選中間的空白地方,其實他/她應該要點選的地方應該是左上角! 不過天曉得,左上角一個按鈕都沒有,誰又會知道要點左上角! (“沒關係,我們還有問號”…我們就不要再提這個東西了)

另外一個讓所有人都感到困惑的地方,就在於每一個單元,當走到最後一頁,或是最後一個互動的時候。使用者就會不其然地被卡住,而使用者必須要按右上角的按鈕來切換到下一章。每一個使用者,沒有一個例外,都會在任何一個章節被卡了兩三次後,才會意識到要換下一個單元了,該去右上角按一下了。這點就非常令人疑惑了,因為在一般翻閱雜誌的時候,使用者是不需要做一個奇怪的動作,然後才能翻到下一頁,因此,同樣的,如果在單元的最後一頁也應當要直接往下切換才是。對於這樣子的設計,我只能猜測是程式設計時,單元是切開來設計。不過這邊我不太想討論技術設計細節,因為所有的技術設計應該是要支援到無痛的互動。

這張圖,我弄上來還有另外一個事情需要說明。當使用者捲到最後的時候,這時候就會有如上圖的小對話框跳出來,提醒使用者點擊前往下一章節。結果,所有的人都點擊了那個小小的對話框,然後發現沒有反應,以為是觸控面板反應不良,繼續點擊,直到他/她誤觸了那個往右的箭頭。我猜自始自終,他/她大概都沒發現那個對話框是沒有辦法作用的吧。所以,何不讓那個對話框可以作用就好了呢? 這點可用性可以輕易地改善,只要透過這種簡單的使用者測試即可。

接下來我們終於要進入到內頁的部分了,在內頁的互動上面,幾乎是每一頁都有問題。所以,敝人認為這個電子書的設計真是個非常好的 Case ,可以讓我們從中討論學習到未來的電子書或是電子雜誌該要如何設計。

Cover Story

此本雜誌的設計用了一個一慣的手勢,就是照片往左走時,文字會往下拖動到對應的章節;同樣的,當文字往下拖動時,照片會往左或往右拖動到對應的照片。這點手勢正是令大部分的使用者感到困惑的地方。因為使用者不知道整體的手勢是要往左右拖,還是要往上下拖,重點是,無論是哪種拖動,整個頁面都在動。這個頁面還算簡單的頁面,往後的單元有比較更複雜一點的,我就看到使用者手忙腳亂的樣子了。

除了沒有統一的手勢以外,絕大部分的使用者並不知道這個文字可以按上面的小點點那一欄就可以縮下來了。而即使成功縮下來的使用者,顯然意圖就是想要看照片而已,但是一切到下一張照片,文字又跑上來了;然後使用者又要把它縮下去;如此來回,真是令人挫折。使用者跟我反應,他們實在不是很瞭解,當她/他想看照片時,她/他就是要看照片,為什麼無法只捲動照片就好呢? 這個問題充斥了整本雜誌。

Hot Items

這個單元似乎是測試使用者對於流行趨勢的敏感度,因此,當使用者把相關的物件從上方的那一欄拖曳列裡面拖到下方的六個空格,補滿之後,就可以按確認,然後系統就會給個評價。不過自始自終,沒有人搞清楚是怎麼評價的,因為似乎也不是看搭配 (如圖,使用者可以把六雙鞋子都拖進來,雖然不明白其意義)。我猜想是想要順便展示這些商品,不過這樣子展式的方式顯然效果大打折扣。因為根本沒有人會去理那個商品,整題而言,大家就是 “玩” 了一下,然後切到下一個單元。

Movie+Music

在這個單元裡面,有非常好玩的爆米花。這個爆米花會跳出來,然後你把 iPad 左右傾斜的時候,這堆爆米花也會跟著移動,然後…最後就擋住你要看的文字。當然,你還要在左右移動調整一下爆米花的位置,如果你對那一堆文字還感興趣的話。基本上,只有兩類的使用者,一類的使用者,沒有注意到爆米花可以移動,這類的使用者會開始看一下有沒有感興趣的電影;另一類的使用者會發現爆米花可以移動,然後就開始玩起爆米花,基本上內容不重點了,玩完後就進到下一個章節了。所以無論是哪一種使用者,我想爆米花除了好玩之外,弊多於利。

Fashion Notes

在這個小小的章節裡面,其實也 “藏” 了不少互動。我們可以看到如圖,設計者用了小小的箭頭來提示使用者,這個是個很貼心的設計。不過這個箭頭的位置,以及大小都值得商榷。因為在不同的章節裡面,我還有看到標示方向跟互動方向完全相反的箭頭,或者是太過隱而不顯的箭頭。總體而言,使用者沒什麼困難操作這個頁面,他們只是都沒有發現有一個互動而已,就是他們可以點選上方的任何一個小張圖片,然後左邊的模特兒就會如上圖改變。沒有一個人發現,所以,這個互動可以說是白做了。

Jewelry

使用者按了那個看似小門的 icon 後,就會跑出一個小拼圖。不過,沒有人把它玩完,因為玩完也不是重點,或許也沒人記得他們看到了什麼鑽石。不過,如果我們聚焦在討論那個拼圖該怎麼被互動的話,會發現使用者沒把它玩完的其中一個理由是,拼圖似乎不按照他們想要移動的方式移動。拼圖移動的方式不是用拖曳的,而是用點選的。不過,整個 App 都是用拖曳在完成事情,所以使用者認為應該有拖曳的手勢也是不意外。

1 item x 5 styles

這個有趣的章節,或許應該會很受女生喜愛,不過這個有幾個互動設計上的缺點。讓這個單元的有趣性下降了,甚至是消失了。有數位使用者直接跳過了這個章節,我最初以為他們是不感興趣。結果其實不是的,是因為他們以為這個就只有一頁。他們當然也不會注意到,當你把 iPad 往左右傾斜的時候,那個標籤還會左右飄盪。那個進入提示真是太隱而不顯了。非常漂亮地融入到了背景當中。

好吧,如果使用者順利進到內頁。這時候,設計師又假設了使用者會把所有的服裝翻完一圈,然後就會在最後的 Weekend 上面看到一個類似小門的進入按鈕,接著進去後就可以做這個換衣服有趣的互動。這邊設計師,又再度提高了使用者玩這個最有趣的東西的門檻,因為你一定要翻到一個特定的頁面,才會有那個按鈕存在,最後你才會進到這個遊戲。如果以階層計算,你要走三層,如果以步數計算,你從封面走到這個互動大概要 10 步。所以,有一半的使用者玩不到這個互動也是理所當然,因為設計師自己架設了莫名的高門檻。

好不容易進入這個好玩的遊戲之後,我發現可以換衣服的手勢似乎只有在某些區域可以運作,而這某些區域還不在衣服上面。所以,我看到使用者們,轉了幾下後,大多是玩了一次就出去了。因為光是要搭好一個全身上下的衣服所花費的力氣就非常高了。沒有人會想再搭第二次了。非常可惜地,因為女生都很喜歡搭衣服。但是顯然這邊有著太多令人費解的門檻提高了跟這個單元的互動。

Fashion trends

在這個章節,使用者必須要把 iPad 往下傾斜。關於這一點,對其中一半的使用者幾乎沒什麼問題,因為他們在使用的時候,本來就是呈現最優閒的姿態– 將 iPad 放在大腿上傾斜閱讀。另外一半的使用者,會把它放在桌上,然後就會點選那個要使用者傾斜的提使標示,他們誤以為那個是按鈕,當然沒有任何說明說要把 iPad 傾斜。而這些把 iPad 放在桌上的人,顯然也不想要拿起來,關於這一點,我會在後面說明閱讀器的本身會怎麼影響使用者的互動。所以,對另外一半的使用者,他們會嘗試在整個畫面上面亂畫手勢,這時候,我就會告訴他們…你該把 iPad 立起來玩了…

當使用者把 iPad 立起來之後,他們又會遇到一個小關卡,就是它們會看到所有的東西都退去了,只留下中間的空白。沒關係,他們依然會亂揮,因為他們不會看到左邊小小的向上箭頭 (如上面右圖) 告訴他們其實就是用一個向上手手勢而以。不過沒關係,到這邊為止,通常只要不是一開始就進入這個單元的使用者,已經很習慣要 “探索” 這件事情了。所以,在一陣混亂的手勢之下,他們可以找到互動的方式…

Fashion trends – slideshow

這個單元應該理所當然是最簡單的單元才是。不過還好我們有做使用者測試,才避免到這個盲點。在這邊使用者應該是只要看 slideshow 就好,但是這邊又牽扯到一個問題了,如果這個不是使用者進入到的第一個單元,經過長久而新奇的互動,使用者想這件事情絕對不是這麼簡單。所以,他們會以為這個是照片而不會認為這個是影片 (喔, 對於非技術人員來說,看起來像照片的東西應該就是照片)。所以,我就會看到使用者嘗試著用左右拖曳的手勢想要 “換” 到下一張照片。甚至有些人用起多點觸控手勢,然後想要放大縮小,關於這一點是屬於使用的閱讀器問題我們稍後會一併闡述。

當使用者發現怎麼都無法互動時,大部分的人會轉過頭來問我,總可以快轉吧? 我這時候就只能聳聳肩,沒有,這一個章節沒有互動。所以,到這邊,大家瞭解到使用者 “適應性” 跟 “慣性” 有多強了吧。

Beauty Trend

這個互動章節看似沒有問題,要是我獨自一人寫 review 的話,我大概也就幾句話帶過了。不過我發現使用者有很大的問題,大家是否注意到瓶瓶罐罐的旁邊有小小的加號,這些都是可以打開一個窗口來看產品的細節。不過我發現有高達一半的使用者沒這麼做,沒這麼做的原因是因為他們完全忽略那幾個小小黑黑的圈圈。除了這一點以外,我們在最之前有提到,圖片是向左右的手勢,文字是向上下的手勢,然後無論你動哪一個,整個畫面都會動起來。這邊就是真正的大魔王了,整個畫面動得眼花撩亂,然後我也看使用者弄得手忙腳亂,在圖片上面嘗試著上下,在文字上面嘗試著左右,然後畫面就忽前忽後。真是具有極高的互動性…

Step by Step

有高達一半以上的使用者就在上面用左右的手勢看完照片後就出去了。也就是說,有一半的使用者並不知道他們要點選進去,然後裡面有互動。當然,融入背景的提示居功厥偉。當使用者進入到裡面開始幫模特兒上妝時 (如上面右圖),使用者嘗試了一下就知道要拖曳到臉上了,沒關係這個門檻不高。不過讓使用者迷惑的是,這個拖曳似乎沒有意義,因為無論他們拖到眼睛還是鼻子還是嘴巴上面都無關緊要。對於左邊的長條 bar,使用者也會嘗試著想要直接跳到其他的步驟,不過顯然沒有意義,因為左邊的 slide bar 是無法互動的。只有兩個人做完這個上妝動作。我猜也沒有人在意裡面到底放了什麼牌子的化妝品。

Beauty special report

這個單元前面有一些簡單的互動,像是是非題之類的。大部分的使用者對於美白似乎不這麼感興趣,或者是說,這樣子的排版,讓她們感興趣不起來,這邊我說的她們是指那四個女生。沒關係,經過導引後,大家都會到這個有趣的轉輪上面。然後我又再一次看到使用者不解地操作。這個轉輪似乎是很直覺地要用滑動手勢,不過不知道為什麼使用者在這個地方反而在用點選的手勢,當然,點選手勢無效。對於上方的標題,我們在整本雜誌,終於首次出現了提示使用者前後頁的 icon 了。由於出現的是 icon,所以使用者又下意識地點選,而不是用滑動手勢。這點觀察是頗有趣的,因為在大量的手勢互動之後,使用者應該很習慣用手勢,但是我們可以看到 icon 的制約力有多麼強大。只要是 icon 出現,使用者就會進入點選制約模式,這當然是長久的視窗介面訓練的結果。

Body

這個章節 highlight 出來,不是因為它有問題,而是它沒問題,而且是設計地非常成功。所有的使用者 (這邊我指女性們) 都對這個章節的內容感興趣,並且可以順利地互動。這個章節代表著僅存的成功設計。我們會在後面討論這樣子的設計究竟帶給我們什麼樣的啟發。

Travel

這個章節或許也沒什麼問題,因為使用者就看看文字,看看照片就好了。但是經過使用者測試後,發現問題還蠻大的。我們之前說過,當你拉動下面的文字的時候,上面的圖片會跟著轉動。不過有些小章節裡面,介紹的圖片過多,因此文字不夠捲動完圖片。因此設計師就貼心地在圖片右下角放了一個提示 (不過是跟手勢相反的提示),不過這個提示非常隱而不顯。結果,使用者測試完畢,只有我知道有多餘的相片可以看。或許這些多擺的相片也是放心酸的吧。

隱藏手勢

終於我們到了內容的尾聲。當使用者盡情互動完後,我們瞭解到這個雜誌的設計只有單點觸控的手勢。除此之外,當你拖到單元的結尾的時候,你不得已必須要按右上方的按鈕切換到下一個單元。其實,切換單元不必這麼麻煩,你只要用兩根手指頭拖曳一下,就可以切到下一個單元了。而這也是全部 App 裡面僅有的多點觸控手勢。不過這個手勢顯然設計地太過進階,常人是無法發掘的,只有阿宅中的阿宅才會發現這個神奇的手勢。(別問我怎麼發掘的,或許這就是專業的所在?)

總體討論

市場

我想這個產品無遺的是個很好的 case,讓我們透過了這次的 case study,深入瞭解了一個電子書如何被設計,以及設計出來的手勢對使用者會造成什麼問題。透過簡單的使用者測試,顯示了這款產品在易用性 (usability) 的度量上面是失敗的,除了易用性上面的失敗以外,內容也是失敗的,因為使用者是 “玩” 得很開心,不是 “讀” 得很開心。那麼為什麼這款產品又會賣得這麼好呢?  我想歸結的原因就是新穎性,因為市面上沒有類似的產品,因此這個產品在初步推出後可以獲得成功,這一點是合理的。

因為新穎性,而吸引到了許多喜歡嘗鮮的玩家,也就是在 “Crossing the Chasm” 裡面所提到的 “Early Adopter”。而一般目前買 iPad 的使用者大部分都是屬於 “Early Adopter”。因此,至於產品的設計成功或是失敗,就要端看產品設計者是否一開始就瞄準的是這樣子的客群。如果原本是瞄準 A 市場,最後在 B 市場成功,這樣子的成功不能算是成功,反而會給團隊帶來很大的誤解,而朝著錯誤的方向走去。所以,我建議可以檢視購買的族群,而根據我的猜測,購買此 App 的人是對 “互動的新穎方式” 感到興趣,而不是對內容感到興趣。 如果是這個樣子的話,這樣子的設計就不足以為長遠設計的依據,因為喜歡嘗鮮互動的人,並不對內容感到興趣,而是對表現的手法感到興趣。所以,如果要瞄準同一個市場,你下一版唯一的方式,就是弄出一套完全不一樣的互動方式,這樣子你可以吸引到同一個群族的人。

閱讀還是玩樂?

在這次的體驗裡面,無論是我個人覺得,或是經過使用者觀察後,我發現這個經驗都不能稱之為閱讀經驗了,我倒是覺得比較是在玩遊樂器。而且太多的互動,反而讓整體的閱讀失焦了。我想我們這邊是談論電子書,所以另外一面玩樂怎麼設計我們就不討論了。這個 case 很明顯的告訴我們,當使用者有太多的手勢或是互動需要探索的時候,使用者本身的注意力已經不在內容本身,而是在於如何理解這些互動。而有興趣理解這些互動的人,本身也僅僅只是對互動設計感興趣,而不是對雜誌內容感興趣。也就是,做為儂儂雜誌,所謂的 “雜誌” 本身已經蕩然無存。

此外,過多的手勢,造成使用者的困擾不言而喻。我們在產品設計的時候,我們都一定會強調產品的使用經驗的一致性。這個一致性不是因為產品設計師想要,所以我們要設計一致性;而是這樣子的一致性是使用者的天性的需求。我們在前面已經述說了,使用者對於使用產品會有慣性的行為,這樣子的行為我們就稱之為一致性。如果我們硬要套上一個學術名詞的話,那就是心智模型 (mental model),不過這邊我們還是把這個先擺在一邊。所以,當使用者在開始接觸到這個 App 之後,發現手勢很多,能夠互動的元件很多時,每當進入到一個新的章節時,我就會看到使用者嘗試著用各種不同的手勢尋找可能隱藏的互動,包括把整個 iPad 晃來晃去,倒過來使用之類的;因此我們就不意外,為什麼使用者對於 slideshow 的章節會期待應該要有所互動了。

不過,無論是怎麼樣的互動,這樣子的互動都太誇張,而且超過了一般電子雜誌閱讀的需求。試著想想,請問你看雜誌的時候會有這樣子的動作嗎: 把書本晃來晃去、費盡心力去尋找可以被互動的元件。閱讀本身應該是安靜的,而既然是閱讀,就應該要支援閱讀的一些功能。比如說,目錄,或是 index,可以方便讓使用者知道自己在哪兒。而這整本雜誌的設計,顯然是讓使用者完全迷失了。而不良的設計不但讓使用者迷失了,並且連帶地連這些內容都被使用者不自覺地忽略了。

此外,這些過度注重美感的設計,把所有的按鈕以及該要顯示的使用者提示全部都藏得非常好,我想這邊就是設計師的失誤。為了維持美感,而妨害到了易用性 (usability) 這可是最大的忌諱,美感是要兼具易用性,而不是設計得看起來非常好看,但是非常難用。當我們設計互動的時候,我們要特別注意到使用者的 flow,這邊所謂的 flow 就是只當使用者進入到使用的 mode 的時候,眼睛會不自主地聚焦在部分區域,並隨著工作流程而改變注意的地方,因此會產生所謂的 “Selective Attention” 現象 (如上圖 video)。所以,除非是自然的一些必然的互動,不然一些什麼額外的提示,都會自然地被使用者排除在注意力範圍之外。而此 App 就因此做了很多 “無用” 的設計,這邊指的無用並不是指真的無用,而是指,使用者根本沒有用到,或是沒有意識到,那整個設計無論多麼費力都是白搭。

閱讀器本身

使用的閱讀器本身實際上也提供了強大的制約效果。iPad 是 Apple 非常有名的產品,因此,使用者對於 iPad 的期待,會自然地轉移到對於 App 的期待。這是因為使用者無法辨別這是 iPad 所提供的技術,還是 App 本身所應該要提供的技術。不過對於使用者來說,iPad 所提供的技術,不是本來應該就要有的嗎?  所以,當使用者開始看照片時,我可以看到使用者會試著用多點觸控地手勢想要放大看這些照片,或者是想要用 zoom in 的手勢將文字放大。使用者這些行為都是對的,因為這些行為都是 Apple 教導他們應該有的行為,就好像我在任何的文書處理軟體裡面要做 “剪下” 的快捷鍵是 Ctrl+x 一般,如果當我下了這個指令沒有動作我自然會困惑;如果出現其它的動作我就會更加困惑!  所以,當我們建立在一個閱讀器上面實現互動的閱讀時,我們要特別注意,到底使用者對於這個閱讀器的使用習慣是什麼,這些都是應該被考慮到互動設計元素裡面。

此外,我也發現 iPad 本身重量不輕。因此,使用者不是放在桌上,就是放在大腿上,然後就很少移動了。幾乎很少人單手立起來看,因為這實在太不舒服了。瞭解到這一點,我們就瞭解到那個爆米花的設計是多麼讓使用者費力。當有許多種技術可以被實現的時候,並不代表我們就一定要實現它;你可以做得到的事,並不代表你一定要這麼做。所以,除非有特別特殊的應用,不然就不要隨隨便便用到 iPad 的 Gyroscope 或是 Accelerator,除非你想讓使用者鍛鍊他的臂部肌肉。而實際上,在閱讀的時候,本身也沒必要這樣子晃來晃去。

良好的設計

在前面,我們說 Body 那個章節是個良好的設計,為什麼說它良好,主要是它符合了幾個重要的事情。第一個,使用者可以專心在內容上面;第二個,使用者可以利用已知的自然手勢來做互動,毫不費力。這樣子是否給了我們什麼樣的啟發呢?  的確,如果是一本閱讀刊物,我們的互動應該是要讓使用者能夠對內容物本身感興趣,而互動是用來幫助使用者能夠方便探索內容物,或是方便理解內容物。因此,增加 Video 是好的,因為傳統的雜誌做不到這件事情;增加圖表是好的,尤其是可以縮放或是具有不同深度/複雜度表現的圖表 (level-of-detail); 很多的漂亮的圖片是好的;可以簡單做書籤,做筆記是好的。

另外由於儂儂是針對女性一些衣飾的雜誌,因此,有些特性也應該要具有。比如說,傳統雜誌一個頁面可以呈現多種商品讓使用者比較,這邊的 App 反而在一個頁面的內容減少了,或者是排版的關係,讓使用者甚至覺得內容比傳統雜誌少很多。因此,如果能夠有一個介面可以把這些商品都在同一個頁面陳列,以視覺的方式做比較,這也比較好;此外,如果能夠把一些喜歡的東西放入到 “我的最愛” 或是個人虛擬衣櫃裡面也很不錯。

另外,這種雜誌說明白點,就是希望女性能夠購買這些介紹的商品。然而如何去那兒購買,購買的資訊如何等,都非常不清楚。或者是,這些資訊都離物件本身非常遙遠。既然有電腦互動技術的支援,這些東西應該可以用一個小標籤標在物件旁邊方便使用者查詢;又或者是可以連到購物商店直接做購買 (當然這就要看電子書本身的規範是否支援了);又或者是可以連到相關網頁看更多的資訊。既然是連網的電子書,是否可以更加發揮網路的優勢呢? 對於某一些商品,使用者是否可以直接評論,而其他的讀者也可以即時看到這些評論而參與討論呢?

既然是在 iPad 上面做設計,我推薦觀看此影片,或許可以增加一些設計上面的 sense:

Designing Graceful, Gracious Interfaces for iPad from The Omni Group on Vimeo.

結論

我想設計一個新產品是困難的,尤其是利用新的科技設計新的產品。我們都是在科技的前緣探索互動的可能。但是在設計產品的時候,我們或許要記得,一般使用者離這些前緣非常遙遠,如果我們一定要介紹新的互動給使用者,我們就必須要教導他們;而一個新的產品,或是一個新的應用,如果有新的互動,最好不要超過三個,因為你總要讓使用者慢慢適應,慢慢習慣這些新的互動方式。而當你一旦創立了某種互動的手勢,這個互動的手勢既不可以跟以前既有的手勢衝突,也不可以跟以後即將開發的手勢衝突,簡而言之,就是要有一致性。而且最好的是,我們應當設計最小的手勢集合來互動絕大多數的功能。80/20 原則永遠適用,讓80% 的功能由 20% 的手勢完成。不要挑戰使用者的記憶力或是學習能力,使用者不是來上軟體訓練班,他們只是想要用這些軟體達到他們要做的事情而以,用這些軟體對他們而言只是過程而已。況且,如果是閱讀的話,我就更想不到為什麼我們要挑戰使用者的破關能力了。

在這邊,我示範了簡單的專家搭配使用者測試,我們就可以得到許多設計上面的啟發以及修正。這些都只需要非常低的成本,以及相對少的時間就可以達成。我期望未來的產品設計者,都能夠用這種方式跟目標使用者做接觸。親自瞭解使用者,會讓你的產品的設計更貼近使用者,也會讓你的設計經驗以及設計技巧更上一層樓。

最後,我要用我的好友的話來結尾。最好的設計,應當是讓使用者察覺不出有經過設計的設計;也就是說,當使用者用的時候覺得理所當然的時候,那就是成功的設計了。

好了,我該關機休假去了。希望這篇文章對大家有所助益。如果你想獲得一些比較即時的 UI 資訊,或是想跟我討論的話,歡迎你到 Facebook UIUI

註: 本文章圖片來源均截圖自儂儂 (Bella) iPad App,所截取圖片皆經過授權

喜歡這篇文章嗎? 分享出去給作者一點鼓勵吧!
  • http://www.facebook.com/profile.php?id=1351026265 劉欣怡

    有點長!!!!但很仔細!