跳到主要內容

用案例解析資訊檢索 UI 的設計準則:讓使用者「不用猜」就能達成目標

【我們為什麼挑選這篇文章】有使用過類似國立臺灣圖書館的借用系統的人也許已經對冷冰冰、古板的排版跟設計麻痺,不免感嘆跟網路書店豐富、人性化的首頁有著極大的落差。
不過在去年底國圖默默更新了介面,長期有借閱習慣的設計師 Merci Kuo 仍然覺得 UI 設計美中不足,新版設計真的有對使用者更有好嗎?(責任編輯:鄧天心)
我(本文作者 Merci Kuo)是一個熱愛閱讀紙本書的人,目前主要的紙本書籍來源,約五成是透過 國立臺灣圖書館(後簡稱「臺圖」)借閱,平均兩週就會使用一次館藏查詢系統。而我使用臺圖的館藏查詢系統有超過 2 年以上,一直等著他們沒有 RWD(回應式網頁設計)並且畫面混亂到我不忍直視的系統什麼時候改版。
手機電腦都是一樣的呢!
好不容易,2018/12/22  館藏查詢系統改版上線 ,並且有 RWD !我終於不用兩指狂放大手機畫面,瞇著眼看查詢結果。
但實際使用過後,我不確定臺圖開發新查詢系統上線前是否經過「易用性測試」。

壞設計浪費大家的時間

先說總結,目前新的館藏查詢系統,我認為 違反了三個易用性準則:符合認知習慣、方便快捷、易於辨識,本文下面會有更清楚的補充 。
廣告
為什麼「壞設計會浪費你時間,好設計幫你高效完成任務」?搜尋任務上,有效的設計能引導使用者加速找到目標,完成任務。我身為一個臺圖的愛用者撰寫這篇文章(感謝有新年長假),嘗試以設計師的角度來發現哪些是壞設計,提出好設計的可能。

文章大綱

  • 界定題目範圍
  • 過易用性測試找出壞設計與問題
  • 建議解決方案
  • 總結

界定題目範圍

要談一個服務的改版或優化,若沒有設定範圍,是永遠都優化不完的,因為所有服務一定都可以有還可以更好的地方。臺圖資料庫龐大,要服務的使用者與任務眾多(一般借書民眾、需要大量期刊論文的學術研究者、不同語言的用戶等等),也因時間有限,我設定的題目,從自己的使用角色出發:
廣告
  • 使用者任務:從其他地方知道書名後,透過以下資訊判斷要不要去圖書館:了解圖書館目前是否有藏書、知道要閱讀該藏書的話,可以外借回家,或是要在館內閱讀?
  • 目標與行動:透過易用性測試,找到此兩頁的問題後,提出建議解決方案。
  • 調整方向:不大幅修改 CI 與風格 ,只透過「資訊重整」角度,重新設計介面。

透過易用性測試找出問題

我使用的方式如下:
  • 放聲思考(think out loud):尋找使用者給予任務,邀請他邊操作邊說出自己的任何想法:我找了兩位朋友 E 和 T,包含我自己共三位使用者用手機做測試。
  • 透過頁面目標 x 測試結果 x 發生頻率表 x 要解決問題 x 易用性準則等不同維度評估方式,排出建議修改的優先順序。

易用性測試+放聲思考

以下讓大家一起體驗使用查詢系統,使用者心裡想什麼。
任務:輸入「某個書名」後按搜尋。 (備註:以下畫面為事後截圖整理,非當下測試時就截圖,所以時間不連貫)
搜尋館藏結果:
初始畫面:(停一下)咦?結果沒有這本書嗎?…哦哦,原來在下面(繼續滑)。
經過畫面:有點長。(繼續往下滑)
最後停留畫面:(點擊圖片)欸?我怎麼進不去?(再嘗試點擊整張卡片)咦???是不能進去嗎?(最後發現要點「書籍標題」)
館藏單一書籍:
初始畫面:(安靜,往下滑)
經過畫面:嗯…我知道他在書架上。(點擊「預約請登入」,登入)
登入後停留畫面:(滑來滑去)咦,怎麼沒有預約按鈕了?(…最後放棄)

整理測試結果

如下表,紅色為頻率高,建議優先修改的項目。
易用性測試結果表
易用性準則相關定義(以下引用自《別做天兵設計!傾聽、思考、表達,滿足使用者體驗的 0 盲點設計關鍵》,書內有更完整的易用性準則):
  • 符合認知習慣:不違背使用者所知的經驗及認知習慣
  • 方便快捷:使用者能以最少操作完成相對應任務,達成目的
  • 易於辨識:在看到每個內容組織時,能容易快速定位到想看的內容

建議解決方案

來看看如何透過設計,解決以上的易用性問題?
館藏查詢結果
  • 增加「可外借」或「館內閱讀」標示,讓使用者第一時間知道書籍狀態
  • 將「查詢條件」與「排序方式」改為底部固定按鈕,幫助清楚一覽搜尋結果
  • 列表重新排序資訊的重要順序,將書籍封面縮小(封面對於要借書的使用者普遍來說不重要)、文字資訊簡化,單一本書內容群組面積變成原本的 1/3,一屏可以看到 3 則書籍資訊,減少原本三分之二的滑動次數與時間
館藏單一書籍
  • 縮減第一層看到的書籍資訊、刪去不必要資訊,讓第一屏就可以看到館藏狀態
  • 「預約」按鈕只出現在「可被預約」的書籍,而不是全部都有
  • 單一書籍更多資訊處,則強化「索書號」,因為實際到圖書館,必須按索書號找到實體的書籍,如下圖:

總結

透過這一次快速練習,重新思考在使用者體驗與介面上,什麼是好設計,什麼是壞設計?
  • 壞設計讓使用者疑惑猜測,好設計讓使用者不需思考
  • 壞設計破壞或不符合「可用性準則」,好設計符合「可用性」準則
  • 壞設計看不出優先次序與重點,好設計有明確清晰的優先次序(priorty)與行為召喚(CTA)
每一次疑惑猜測、過長但不精準的資訊導致多次滑動,都是在消耗時間。希望未來在做「資訊檢索」設計的你,可以一起思考「設計要如何幫助使用者更快達成目標」?
希望透過實際的練習案例對照,能讓各位有所啟發。
而臺圖改版後,有變得更好嗎?我覺得 2018 的改版視覺上有明顯的進化,但是資訊設計與使用者體驗上,仍有基本的易用性問題需要解決,也希望臺圖再接再厲優化館藏查詢系統,幫助使用臺圖的讀者們更高效地獲得自己想要的書:)
最後,設計沒有唯一解,此次 Redesign project 單純以我個人習慣使用臺圖館藏查詢系統借書的情境出發,我也很好奇不同情境、任務的使用者在乎哪些資訊、要達成何種任務,會導向不同的解決方案。
若有任何想法回饋,歡迎留言與我聊聊。
關於作者 Merci Kuo :
嗨,我是《女人迷》的服務設計師。平面/介面/產品設計/思考方法都涉獵,期許自己成為一個能夠解決問題,又充滿豐盛之愛的人。
__
(本文經作者 Merci Kuo 授權轉載,並同意 TechOrange 編寫導讀與修訂標題,原文標題為 〈壞設計浪費你時間,好設計幫你高效完成任務:國立臺灣圖書館 館藏查詢系統 Redesign〉。首圖來源:國立臺灣圖書館)

延伸閱讀

留言

這個網誌中的熱門文章

2017通訊大賽「聯發科技物聯網開發競賽」決賽團隊29強出爐!作品都在11月24日頒獎典禮進行展示

2017通訊大賽「聯發科技物聯網開發競賽」決賽團隊29強出爐!作品都在11月24日頒獎典禮進行展示 LIS   發表於 2017年11月16日 10:31   收藏此文 2017通訊大賽「聯發科技物聯網開發競賽」決賽於11月4日在台北文創大樓舉行,共有29個隊伍進入決賽,角逐最後的大獎,並於11月24日進行頒獎,現場會有全部進入決賽團隊的展示攤位,總計約為100個,各種創意作品琳琅滿目,非常值得一看,這次錯過就要等一年。 「聯發科技物聯網開發競賽」決賽持續一整天,每個團隊都有15分鐘面對評審團做簡報與展示,並接受評審們的詢問。在所有團隊完成簡報與展示後,主辦單位便統計所有評審的分數,並由評審們進行審慎的討論,決定冠亞季軍及其他各獎項得主,結果將於11月24日的「2017通訊大賽頒獎典禮暨成果展」現場公佈並頒獎。 在「2017通訊大賽頒獎典禮暨成果展」現場,所有入圍決賽的團隊會設置攤位,總計約為100個,展示他們辛苦研發並實作的作品,無論是想觀摩別人的成品、了解物聯網應用有那些新的創意、尋找投資標的、尋找人才、尋求合作機會或是單純有興趣,都很適合花點時間到現場看看。 頒獎典禮暨成果展資訊如下: 日期:2017年11月24日(星期五) 地點:中油大樓國光廳(台北市信義區松仁路3號) 我要報名參加「2017通訊大賽頒獎典禮暨成果展」>>> 在參加「2017通訊大賽頒獎典禮暨成果展」之前,可以先在本文觀看各團隊的作品介紹。 決賽29強團隊如下: 長者安全救星 可隨意描繪或書寫之電子筆記系統 微觀天下 體適能訓練管理裝置 肌少症之行走速率檢測系統 Sugar Robot 賽亞人的飛機維修輔助器 iTemp你的溫度個人化管家 語音行動冰箱 MR模擬飛行 智慧防盜自行車 跨平台X-Y視覺馬達控制 Ironmet 菸消雲散 無人小艇 (Mini-USV) 救OK-緊急救援小幫手 穿戴式長照輔助系統 應用於教育之模組機器人教具 這味兒很台味 Aquarium Hub 發展遲緩兒童之擴增實境學習系統 蚊房四寶 車輛相控陣列聲納環境偵測系統 戶外團隊運動管理裝置 懷舊治療數位桌曆 SeeM智能眼罩 觸...
你掛65號,到醫院發現才看到7號怎麼辦?這家公司想出好方法,現值50億美金 創新拿鐵   2018-12-19 17:00 209801   人氣       現正熱映中 熱門文章 你掛65號,到醫院發現才看到7號怎麼辦?這家公司想出好方法,現值50億美金 創新拿鐵 2018-12-19 17:00 防堵非洲豬瘟的大功臣!超萌檢疫犬敬業值班「精彩故事多」,奇葩陸客最令人哭笑不得… 中央社 2018-12-17 11:41 機票錢根本花的冤枉⋯又貴、又擠、又騙!世界「六大最雷景點」,不要再輕信網路「照騙」了! 周佳萱 2018-12-14 13:58 活活燒死193人!列車駕駛叫大家「坐好別動」卻拔鑰匙逃跑…韓「大邱地鐵縱火案」離譜內幕 黃瑜敏 2018-12-18 12:34 火鍋的靈魂:湯底的秘密⋯國宴名廚:只要「這樣做」,清湯白水也能煮出好滋味! 食力foodNEXT 2018-12-16 10:00 駭人實驗!失散19年三胞胎感人重逢,意外揭穿「失散真相」是一樁慘無人道的心理實驗… 黃瑜敏 2018-12-17 15:04 誰理你們!從SARS爆發冷血嗆聲,到非洲豬瘟疫情不通報…看見「兩岸一家親」不過是場笑話 潘渝霈   蔡佳妘 2018-12-18 17:47 向老闆提升遷遭拒!3年後他當上主管才看透真相:太認真、太專業、太忠誠都是升遷阻礙... 洪雪珍 2018-12-19 14:34 醫院藥師月薪5萬起跳、只要包藥發藥很好賺?過來人痛揭醫院「領藥得來速」的黑暗真相 時報出版 2018-12-17 14:19 男孩與美洲豹玩耍照片竄紅網絡引發深思 BBC中文網 2018-12-17 12:24 更多文章   熱門分享 你掛65號,到醫院發現才看到7號怎麼辦?這家公司想出好方法,現值50億美金 創新拿鐵 2018-12-19 17:00 ...
哈密瓜、榴槤、棗子、火龍果的英文怎麼說?40 種常見水果單字大集合 31210 2018-07-20 整理‧撰文 陳婉玲 分享 575 Valeriy n Evlakhov via Shutterstock 在台灣,一年四季都能嘗到美味可口的水果,且因水果種類豐富,享譽國際,因此台灣素有「水果王國」之稱,是另類的「台灣之光」。 水果的種類這麼多,它們的英文你會說嗎?當外國朋友問你「What is your favorite fruit?」時,可別只會回答 apple、banana、orange!以下是分別是在四季中盛產與進口的水果英文,一起來看看! 春天 spring 蓮霧 wax apple / jambu fruit / java apple / bell apple 產期是 11 月 ~ 隔年 7 月。含鈣、鐵、維生素 A、維生素 B1、維生素 B2、維生素 C 等營養成分。 枇杷 loquat 產季在 3、4 月。 李子 plum 產季為 3 ~ 8 月。李子未成熟時,果酸含量極高,若腸胃消化不良者,不建議多吃,否則可能導致腹瀉或胃痛。不過,酒醉不醒者若想解酒,可利用其果酸幫助醒腦。 美濃瓜 / 甜瓜 / 香瓜 muskmelon 產季在 6 ~ 9 月。 楊桃 carambola / star fruit 「楊桃」較口語的說法為 star fruit,以它的形狀而得名,產期是 10 月 ~ 隔年 3 月,含蘋果酸、檸檬酸、草酸、維生素 A、維生素 B1、維生素 B2、維生素 C 等成分。 奇異果 kiwi fruit 產季為 9 月至隔年 4 月。奇異果含有豐富維生素 C、β 胡蘿蔔素、維生素 E 多醣、多酚、膳食纖維等。 番茄 tomato 產季通常為 1 ~ 4 月。 甘蔗 sugar cane 產期是 10 月到隔年 5 月。白甘蔗含糖量較高,但因質地較硬,不適合生吃。 梅子 (Asian) plum 原產於中國,後來傳入韓國、日本等地。一般在春末夏初為果實成熟期,可做成梅干、梅子醬、梅酒、酸梅湯、話梅等加工食品。 夏天 summer 桑葚 mulberry 產季在 4 月。 ...