第四章 研究討論
4.1 資料整理與分析結果
4.1.1 展覽導覽型 app 分析結果
從台灣 App Store 中挑出三個展覽導覽型 app,分別為 2011 臺北世界設計 大 展 Expo'11 、 台 北 電 信 應 用 展 、 木 乃 伊 傳 奇 – 埃 及 古 文 明 特 展 Quest For Immortality - Acoustiguide Smartour。從圖 4-1 2011 臺北世界設計大展這個 app 的架構圖來看,開啟 app 的歡迎頁面為提示使用者資料更新,更新完後自動進 入首頁。
圖 4-1 2011 臺北世界設計大展 app 架構圖
1. 首頁劃分成九宮格,可連往九個不同的頁面,如圖 4-2。下方分頁列也有 5 格,扣掉第一格為首頁外,其他四格和九宮格裡某些 icon 的名稱相同。重覆 的按鈕有活動一覽、參展廠商、展館介紹、最新消息。且活動一覽、參展廠商 icon 設計兩邊不同。以快速使用的角度來看,若點選九宮格中重複的按鈕,畫面 會幫使用者切換到分頁列可增快使用者的使用效率,初期也能減少使用者學習操 作的時間。但長期下來,同個畫面上放置兩個進入點可前往同個頁面是多餘的設 計,且首頁的層級與其他分頁同等,反而會造成使用者不明白首頁存在的必要性 並造成操作上的迷惘,增加錯誤機會。可將首頁移除,將九宮格內的功能全數挪 至分頁列,在 iOS5 中,分頁列若超過 5 格,便自動將第五格更名為「更多」,
點擊出現其他分頁項目的列表。
圖 4-2 2011 臺北世界設計大展首頁
2. 這個 app 有個最大的問題,就是「無限迴圈」,參考圖 4-3。3.1.1 廠商 詳細資料頁中可進入 3.1.2 的位置圖,放大縮小位置圖尋找廠商攤位地點,點擊 進入廠商詳細資料。在新進入的廠商資料頁中又可連至位置圖、從位置圖進入第 三個廠商詳細資料。待重覆操作幾次後,使用者若點擊回前頁按鈕,出現的會是 上一次操作的頁面,也就是說使用者若多次查詢後想回到最前頁,必須不停點擊 回前頁按鈕,此時使用者會瀏覽剛才所有開啟的頁面。無限迴圈在快速操作及相 對無錯上是個嚴重性極高的問題,強迫使用者重新回憶之前的操作過程而不是讓 系統運作減輕使用者的記憶量,靈活性低又沒有效率,將帶給使用者操作上的困 擾並降低耐用性。
圖 4-3 2011 臺北世界設計大展操作迴圈頁面
3. Human interface Guideline 中說明表格之中兩種鍵頭不同的使用時機。單 純的「>」符號代表點擊表格可前往下一頁閱讀更多資訊,若「>」為藍底圓型的 icon,則代表點擊表格欄位和點擊 icon 前往的頁面不同。在 圖 4-4 2011 臺北世 界設計大展這個 app 中的相關活動頁面,點擊表格可前往下一頁,但若點擊右 方放置藍色的圓型 icon 卻無反應。在這種僅是進入下一頁的表格欄位中使用最 常見的灰色「>」就可以了。此外,表格欄位文字、行高、間距、都經過考量,
圖片高度因壓縮而變形,回前頁的按鈕名稱和分頁列的名稱相同等細節部分,
以易於學習和快速使用的角度來看,既然表格欄位已使用預設樣板,更應依規範 進行開發,與現有規模使用一致性的提示和標準,預防使用者操作錯誤。
圖 4-4 2011 臺北世界設計大展預設元件誤用
4. 凡是所有需透過網路才能取得的資訊,都該考慮無網路及連線中斷的情 況,適時提示使用者。請使用這檢查網路是否開啟,或是告知現在連線不穩請稍 後再試。在快速使用的系統狀態回應原則之下,不該出現破圖、或是無止境的下 載中圖示或動畫狀態。使用者在久等之後遲遲未看到想看的內容,會產生挫折 感,降低對這個 app 的信賴度,如圖 4-5。
圖 4-5 2011 臺北世界設計大展連線狀態
台北電信應用展這個 app 的架構較 2011 臺北世界設計大展 Expo'11 簡單,
如圖 4-6。一樣採用從首頁點擊或操作分頁列出現相同資訊的作法,不同點在於 台北電信應用展的首頁為滿版顯示,分頁畫面的左上角有個回首頁的按鈕,點擊 後畫面無任何轉場特效直接跳回首頁。
圖 4-6 台北電信應用展架構圖
1. 由於首頁的視覺風格與內頁相差甚大,按鈕又幾乎和分頁列上的功能完全 一樣,這會讓使用者對首頁產生迷惘,不知道從首頁進入的頁面和從分頁列進入 的頁面有何不同。建立一致性的操作和標準是易於學習的重要關鍵。
圖 4-7 台北電信應用展首頁與內頁
2. 手勢在 iPhone 上非常重要,最常使用的手勢為單指點擊,其次為單指滑 動。在閱讀文字上最常使用的就是單指上下滑動,用以操縱捲軸方便閱讀大量文 字。另有 Page Control 功能,主要應用於畫面左右切換,呈現更多相似內容的頁 面,手勢為單指左右滑動。若在文字區域需上下滑動的範圍內又設定 Page Control 功能讓頁面可以左右滑動切換,表示在這個特定範圍內上下左右的手勢 都有其意義存在。使用者需精準滑動手指方向,稍不小心偏差就可能進行錯誤操 作。就以快速使用上,展覽導覽型 app 最重要的使用場所為展場裡參觀時,使 用者極可能在邊走動的情況下邊操作手持裝置,發生操作錯誤的機會更高。遵守 簡單設計去除多餘手勢、並結合相對無錯中的預防錯誤原則,同個畫面中可運用 的手勢越少越能降低使用者的出錯率。
因此在圖 4-8 台北電信應用展活動頁中使用者僅能在文字區域裡進行上下捲 動的操作,無法左右划動切換畫面。這又產生另一個問題,使用者明明看到 Page Control 的提示圖案,知道可以利用左右滑動的手勢切換不同頁面,卻在文 字區域中滑動沒有任何反應。使用者不會知道開發者設定成文字區域中僅能上下 滑動,若要切換左右頁面,需在文字區域外的空間操作。依單手持機的可操作性 論起,單手持機的操作手指為姆指,最方便的操作範圍為畫面下半部,正好是這 個頁面文字區域的部分。若使用者在展場中最有可能單手拿 iPhone、另一隻手提 包包或拿傳單,此時操作到這個頁面想看更多訊息時就會發生操作無反應的狀 況。使用者不會覺得是自己的問題,反而認定是 app 有錯誤、設計不良,對此 app 的信任度便會大打折扣。
圖 4-8 台北電信應用展活動頁面
3. 有些操作可能帶領使用者跳離現在開啟中的 app,如 Safari、地圖、電話 播打等功能。停止現在操作中的 app,跳出並開啟其它程式這個動作會中斷使用 者完成進行中的任務,在流程上最好加入提示或詢問使用者這個動作將使他離開 原本的 app,確定離開之類的警語。在相對無錯的原則下,需讓使用者有反悔的 機會。無預警讓使用者脫離操作中的程式不僅會讓使用者分心,無法將注意力集 中在自己的目標任務上,更有可能造成跳離後就乾脆關閉 app 放棄使用。此 外,點擊 Open in Safari 按鈕卻跳至地圖畫面,文字正確性上需特別注意,避免 誤導使用者,如圖 4-9。
圖 4-9 跳出並開啟其他 app 的錯誤
4. QR Code 是台北電信展一個很重要的功能,共有十五個 QR Code 可以掃 描。每頁五個,共分成三頁。畫面上對於分頁的提示性太低,Page Control 的圓 點在這個畫面裡很不起眼,使用者容易忽視,以為可以掃描的廠商僅有第一頁的 五個。掃瞄時相機畫面自動對焦,如果已掃描過這個 QR Code 會出現提示訊 息,告知使用者已掃過。若使用者掃瞄到非電信展中的 QR Code,也會出現提示 訊息說明掃瞄到的圖案不在活動範圍之內。掃描 QR Code 的程式可以在背景運 算,也就是說即使畫面已不再是鏡頭拍攝,但掃描的程式依然作用中。如果使用 者掃瞄到一張已掃過的 QR Code,在鏡頭仍對準 QR Code 的情況下,就算掃描 畫面沒有出現,提示使用者的訊息也會不停跳出,使用者按了很多次 OK 也無 法將提醒關閉,參考圖 4-10。這算是程式上的瑕疵,程式撰寫人員需考慮到這 點。對使用者而言,畫面顯示的是什麼,他就覺得現在正在運作的是什麼,不會 理解背後程式碼的構成。
圖 4-10 程式錯誤導致操作受挫
木乃伊傳奇–埃及古文明特展 Quest For Immortality - Acoustiguide Smartour 是一個付費軟體,針對 2012 年的特展進行量身打造的導覽 app,和 2011 臺北 世界設計大展 Expo'11 及台北電信應用展不同,這個 app 特別加入語音導覽系 統,可從列表中中選擇展品聆聽導覽,或是直接輸入展品代碼,參考圖 4-11。
圖 4-11 木乃伊傳奇–埃及古文明特展架構圖
1. 歡迎頁是一個 app 的門面,使用者對這個 app 的第一印象也來自與此 頁。但啟動歡迎頁越是吸引注意力,使用者越覺得軟體啟動緩慢。可做得成軟體 主頁一模一樣,製造軟體已開啟、資料讀取中的假象,參考圖 4-12。
圖 4-12 木乃伊傳奇–埃及古文明特展歡迎頁與首頁
2. 按鈕共有四種狀態,分別是正常、點擊中、無法點擊、隱藏,其中無法點 擊與隱藏這兩種狀態在運用上有特別的意義。按鈕大多代表某些功能或操作,無 法點擊是指在現在這個模式下沒辦法使用這個功能或操作,但在其他模式下可 以,若直接使用隱藏將這個按鈕藏起來,使用者永遠不會知道有這個功能存在。
隱藏則是開發者不希望使用者在這個模式下使用這個功能或操作。在木乃伊展的 app 選件這個分頁裡共有兩種模式,一個是全部、另一個是分類,如圖 4-13。在 全部模式下可以看到左方有搜尋按鈕、右方為我的最愛列表。分類模式下最愛功 能隱藏、搜尋鈕改成無法點擊的狀態。代表開發者希望搜尋功能僅能在全部模式 下操作,關鍵字也僅限於單個展品,無法搜尋分類。我的最愛功能不存在於分類
隱藏則是開發者不希望使用者在這個模式下使用這個功能或操作。在木乃伊展的 app 選件這個分頁裡共有兩種模式,一個是全部、另一個是分類,如圖 4-13。在 全部模式下可以看到左方有搜尋按鈕、右方為我的最愛列表。分類模式下最愛功 能隱藏、搜尋鈕改成無法點擊的狀態。代表開發者希望搜尋功能僅能在全部模式 下操作,關鍵字也僅限於單個展品,無法搜尋分類。我的最愛功能不存在於分類