善用UX來提升UU:打造滿足新手和專家的UI

《善用UX來提升UU:打造滿足新手和專家的UI》書籍封面

全華人市場第一本中文通用使用性(UU, Universal Usability)專書

《善用UX來提升UU:打造滿足新手和專家的UI》書籍封面
《善用UX來提升UU:打造滿足新手和專家的UI》用淺顯易懂的文字、生活常見案例解析通用使用性理論與實務方法。

◆以淺顯易懂文字介紹通用使用性理論
◆以生活常見案例剖析新手與專家需求
◆以實務作法解說通用使用性的設計重點

本書內容改編自第11屆iT邦幫忙鐵人賽Modern Web組佳作網路系列文章──《介面設計如何讓新手與專家都容易使用?》。本書探討生活中經常出現的各式介面,包含購物網站、手機應用程式、家電產品的按鍵面板、停車場的繳費機、車站的自助購票機、銀行的自動櫃員機、餐飲店的自助點餐系統。但任何人都會操作這些介面嗎?初次使用者是否都能自行理解?現代人生活忙碌,能否快速完成任務也很重要,應避免讓經常操作的使用者感到繁瑣。本書將分享如何打造滿足新手和專家需求的介面設計,開始為您的介面設計進行「超前部署」吧!

三大重點

★認識介面設計新趨勢:通用使用性
介紹通用使用性理論、三項挑戰與未來趨勢,以及達到通用使用性的多種設計方法。

★了解不同使用者對介面操作的需求
帶領讀者掌握新手與專家的需求,以及面對不同使用情境、不同使用者能力應注意的事項。

★複雜介面也能簡單操作的設計重點
提出善用使用者紀錄進行分類、設置捷徑與推薦選項等方法來降低操作門檻、提升操作效率。

專業推薦

「一本通用易用的通用易用書」 ── 銘傳大學資訊管理學系 助理教授 陳書儀

「設計,讓每個人都能被更友善的對待」 ── 致遠體驗設計 創辦人 卓致遠

「通用設計讓智慧城市更有溫度」 ── 桃園市政府資訊科技局 局長 余宛如

書籍目錄

第一章 前言

第二章 現代介面設計的挑戰
2.1 能適應不同載具或系統的操作
2.2 盡量縮短使用者完成任務時間
2.3 讓初次使用者能自行完成任務

第三章 介面設計新趨勢:通用使用性
3.1 通用使用性的起源與發展
3.2 通用使用性的三項挑戰

第四章 新手和專家使用者需求大不同
4.1 使用者的類型
4.2 精準掌握使用族群的種類與需求
4.3 初次使用者與新手的需求
4.4 熟練使用者與專家的需求
4.5 同時滿足新手與專家使用者的需求

第五章 善用使用者經驗與紀錄
5.1 順應既定的使用者經驗
5.2 使用現行標準或熟悉元素
5.3 預想並貼近多數使用者需求
5.4 找新手與專家分別測試介面

第六章 進行介面分層與選項分類
6.1 凸顯重要選項、刪除非必要選項
6.2 透過分類減少使用者視覺負荷
6.3 善用「更多/其他」隱藏少用選項
6.4 提供使用者快捷鍵或捷徑
6.5 常用選項搭配自訂選項

第七章 適時提示與引導使用者
7.1 給使用者看得懂的資訊
7.2 減少使用者的記憶負荷
7.3 適時給予使用者提示
7.4 回饋應出現在操作區附近
7.5 推薦選項的設計原則

第八章 考量不同使用情境與使用者能力
8.1 提供輔助功能以幫助不同使用者
8.2 彈性操作以因應不同情境與能力
8.3 運用科技讓介面更智慧化與安全

第九章 結語

參考文獻

購書平台

天瓏網路書店

博客來網路書店

誠品網路書店

相關課程

通用使用性介面設計工作坊

相關閱讀:〈介面設計應如何設定目標族群?〉、〈介面設計應考量通用使用性〉、〈通用介面同時滿足新手與熟手〉、〈複雜介面的選項與流程應簡化或分類

介面設計應如何設定目標族群?

雅典地鐵自助購票系統結帳頁面會有歐元幣值與實際鈔票、硬幣的影像,讓外國人方便對照與理解

不久之前,我帶了一場「通用使用性介面設計工作坊」,讓學員練習簡化便利商店自助系統的「買火車票」流程,看是要刪減,或將兩個以上的步驟整併都可以。

成果報告時,有一組學員說要把「車次購票」的步驟刪掉,保留時段購票就好了,他認為根本沒有什麼人記得車次號碼,保留這個選項等於多此一舉。然而,另一位學員卻舉起手說,他都是記車次號碼而購票的!

又有一組學員,說要把本國人和外國人的選擇頁面刪掉,反正本國人就是輸入身分證字號、外國人就是輸入護照號碼,直接用輸入的號碼判斷就好了不是嗎?但另一組學員中剛好有位外籍人士,他提出除了護照號碼,也可以輸入居留證號碼喔!大家瞬間覺得使用者種類真的很多,需求差異也很大。

以使用需求進行使用族群的分類

很多時候,設計師或開發人員設定的「目標使用族群」可能不夠廣泛,也造成在設計系統的時候,忽略了少數人的需求。舉個例,如果請你想像「學校網站」的目標使用族群,大家可能很容易想到「教職員」、「在校學生」、「校友」和「訪客」,但如果是電商網站、交通購票系統、醫院自助掛號批價繳費呢?你能想出幾種不同的使用者?

類似這種可能有五花八門不同身分使用者的介面,可能很難用同一標準區分使用族群。這時,改由使用需求或使用者經驗進行分類,就比較容易切入了。

回到前面的例子,以「車次」購票或「時段」購票的兩種人,前者可謂「熟練使用者」或「專家」,後者比較是「偶爾使用者」或「新手」。這兩種使用者,就是通用使用性(Universal usability)所提到的,要顧及不同的「使用者知識差距」。因此,我們可以設計捷徑給熟練使用者或專家,讓他們能更快完成手續、不須過多引導。有些購票系統設有「快速購票」選項,就是一種捷徑。

而「本國人」與「外國人」有不同的身份識別資料要輸入,這兩種人則是通用使用性中提到的「使用者多樣性」。不同年齡、不同行為能力、不同國家和不同使用情境等等,都在這個範疇內。因此,公共操作系統最好可以提供多語言的操作介面,甚至透過國旗、紙鈔和硬幣等具體圖像搭配,讓外國人更容易理解。

任何介面的設計師或開發人員在設定目標族群時,不能只用年齡去評估,更不能只考量初次使用者,也要為熟練使用者提供更進階、有效率的服務,才有機會加強客戶黏著度。另外,使用者習慣或仰賴的操作需求不能隨意刪除,甚至要意識到使用者需求有可能會改變,例如因為操作類似介面的經驗增加,而變成專家使用者,或是因疫情關係,一些習慣實體店面購物的人也開始嘗試線上購物,他們就不再是毫無網購經驗的人了。這些都是在設計操作介面時可以考慮進去的。

原始來源:天下獨立評論 余虹儀專欄 「「簡化流程」不簡單!自動操作系統背後的人性需求

此文正式取得「獨立評論@天下」授權刊登

相關閱讀:〈通用使用性介面設計工作坊〉、〈介面設計應考量通用使用性〉、〈自助操作系統應滿足新手與熟手的需求〉、〈通用介面同時滿足新手與熟手

通用使用性介面設計工作坊

講師小魚針對學員們發表的介面設計做法提出看法

何謂「通用使用性」?

通用使用性(UU, Universal Usability)主要是強調同一使用者介面必須同時滿足新手和專家的需求,也就是讓不同知識和經驗的使用者都能有良好的使用性(usability)。此概念需考量使用者介面是否能支持大範圍的硬體、軟體和網路通路,也要適應不同技能、年齡、身障與文化等使用者,在不同的環境因素與情境也能理解與操作,且無論使用者的知識和經驗差距有多大,都要能讓他們能順利完成操作。

現在生活中有很多自助操作系統(Kiosk),如停車場的自助繳費系統、醫院的自助掛號機、賣場與超市的自動結帳機、各家便利商店的便利生活自助操作機台,以及高鐵、台鐵、捷運等車站的自動購票機。甚至因為疫情關係,本來都在實體店家消費的民眾,可能開始嘗試使用手機應用程式點餐、在網站上買生活用品、學習遠距會議的軟體等等。面對各式各樣的介面,在沒有專人指導與協助下,初次使用者是否都能理解操作、容易上手呢?

不同世代的操作習慣不同,產品或環境中的介面設計都應考量不同知識、經驗的使用者需求。

「通用使用性介面設計」工作坊目的

在資訊時代、智慧城市,隨處可見使用者介面。不論是硬體或軟體,介面設計發展已久,很多技術都很成熟,加上載具越來越多元,挑戰自然也多,但唯一不會改變的是以使用者為中心的設計方向,如何讓不同知識、經驗的使用者都有良好體驗,介面設計必須考量通用使用性。特別是許多先進國家都進入高齡化社會,上了年紀的使用者越來越多,在介面設計上也應考量其經驗與需求。

然而,在同一介面,要考量不同使用族群的需求、不同載具與使用情境的操作,讓初次使用者可以直覺操作、順利完成任務,熟練使用者操作時不感到繁瑣都非易事。講師鑽研通用使用性多年,並以此研究主題取得博士學位,希望引導更多介面設計相關人員認識通用使用性介面的設計重點,讓生活周遭的介面能更符合不同年齡、身體與認知能力、知識與經驗的使用者的需求,讓較無資訊科技使用能力的人也容易理解與操作。

「通用使用性介面設計」工作坊重點

透過幾個常見的介面設計問題,從案例解析實作練習,讓參加的人員可以快速掌握通用使用性的設計重點,實際應用在設計介面,以優化使用者經驗。

  1. 如何讓使用者正確理解資訊?
  2. 如何減少使用者視覺負擔
  3. 如何簡化與安排介面眾多選項?
  4. 如何加速使用者操作效率
  5. 如何善用使用者經驗於介面設計之中?
善用使用者經驗可提升操作效率與優化服務。例如,要拿收據的少數使用者才需要按下「列印收據」這個步驟。

「通用使用性介面設計」工作坊對象

  1. 自助操作系統(Kiosk)為主要產品的公司與研發人員。
  2. 從事網站、電腦軟體、手機應用程式(App)或系統介面的開發、設計與優化使用者經驗等人員。
  3. 介面設計(user interface design)使用者經驗設計(user experience design)通用使用性(universal usability)有興趣的人。

「通用使用性介面設計」課程分享

各組學員針對現有介面的設計問題進行探討,將所學的通用使用性觀念導入。(照片提供:臺灣互動設計協會 IxDA Taiwan
透過實作練習與各組發表,學員們可以更了解通用使用性的理論與可能做法。(照片提供:臺灣互動設計協會 IxDA Taiwan

通用使用性是一個很新的理論,絕大多數的學員都是初次接觸,但對於生活中使用某些自助繳費機或網站購物介面的糟糕經驗,大家都不陌生,而這些常見的介面設計問題,都是可以透過提升通用使用性來改善的。除了以生活常見案例讓學員們快速理解,工作坊的實作練習與解析也能幫助學員更加熟悉,並且聽到其他組別分享的可能做法。很開心能看到學員分享心得與收穫,更期待每一位介面設計相關從業人員都能考量到不同能力與經驗的使用者需求,讓我們生活中出現更多很棒的介面設計。

相關閱讀:〈介面設計應如何設定目標族群?〉、〈介面設計應考量通用使用性〉、〈通用介面同時滿足新手與熟手〉、〈複雜介面的選項與流程應簡化或分類

為使用者優化服務、提供重要資訊

東京地鐵車廂門上方的資訊看板

「老闆,雞排要切不要辣」、「老闆,雞排要辣不要切」、「糖要正常還半糖?少冰還去冰?要大杯還中杯?」在台灣,點份雞排、喝杯手搖飲料,甚至來碗蚵仔麵線要香菜或蒜末,都要做決定。有些餐廳的菜單厚厚一本,讓人看得眼花撩亂,點菜像讀本小書一樣久,有些則是像考試的答案卡,塗塗改改,得花上好一陣子才能完成點菜。菜單上呈現很多選擇與配對方式,看似貼心,對於有選擇障礙的人來說可能是一大折磨。

隨著健康飲食與個人化飲食的風氣,餐點客製選項越來越多。
有時點餐流程還需要服務生特別「教學」,點個餐像是做考題一樣費時。

我們的生活中,常充斥著複雜的設計與服務,有些確實讓人感到很貼心,有些卻讓人感到很麻煩,這中間的界線應該如何拿捏呢?

先在生活中找找,哪些資訊讓人眼花撩亂?哪些資訊讓人一目瞭然?哪些服務讓人感到貼心?哪些服務讓人感到不便?久而久之便能掌握那條界線了。

常以觀者角度思考

以前唸書時,不是用紅色原子筆就是拿黃色螢光筆來畫重點。現在畫重點的工具更多種,如果是用數位產品閱讀還可以變出更多花樣。然而,畫重點的原則仍是一樣的,那就是「重點畫太多就沒重點了」!資訊的安排也一樣,如果不能把真正重要的部分提示出來,而是什麼資訊都想呈現,都想強調,那麼,觀者在閱讀上就無法快速且精準地掌握重點了。

一個公告上出現了四種重點顏色,到底什麼才是重點?

重要資訊必須適時適地出現

不論是在公共場所,或是大眾交通運輸工具,經常可見很多重複的標示或警語,無非是怕民眾沒看到而使用錯誤發生危險。然而,重要資訊並不需要一直出現民眾眼前,只要在最關鍵的時候、最適當的地方出現,即能映入眼簾、進入腦海。

像是指引方向或目的地的標示,應放在人們最容易迷路的關鍵處,也就是岔路口。或者在較長的路徑上,怕使用者走久了產生不確定性,途中需要增加標示或提醒。除了上述兩種情況,同一條路徑上有多個相同的引路資訊,都是多餘的設置。

在視線範圍內即可看到「西一門」,就不需要再設置西一門的引路標示了。

資訊爆炸的時代需要整合

現在是一個資訊爆炸的時代,即使使用智慧型手機訂閱資訊,也需要使用整合手法或工具才不至於資訊爆量,如訂閱Google關鍵字、設定LINE關鍵字提醒等。如果這些資訊沒有被有效整合,也很難進到閱聽者的大腦裡。特別是緊急、重要或行銷重點資訊,不宜被廣大資訊淹沒。

任何類型的公告都應做有效整合,才不會讓訪客眼花撩亂。

以減法設計減少視覺負擔與使用困擾

而「減法設計」就是一種整合的思維,可以用來整合動線、標示與資訊,也能用來簡化服務流程,避免讓使用者感到繁瑣,或產生「鬼打牆」的糟糕體驗。

什麼是減法設計呢?就是盡量減少、去除不必要的資訊,避免讓使用者產生困擾與過多的視覺負擔。很多時候使用者不一定知道自己想要什麼,設計或服務提供者最好能洞察市場或使用者需求,提出較佳方案或優化體驗。

像是日本東京有些電車到站資訊,除了語音報站名、顯示何側開門之外,還會標示出所在車廂號碼,以及出車廂後各出口及設施的方向。提供給旅客的資訊很多,但透過突顯重點資訊(即將抵達的站名:大井町),次要資訊用色塊(目前所在車廂:第六節)和圖示(出車廂往右走會有電梯和電扶梯)顯示,不會顯得凌亂,且在短時間內能快速掌握與理解,就是減法設計可以參考的形式之一。

資訊豐富也能一目了然的日本東京電車看板。

原始來源:天下獨立評論 余虹儀專欄 「覺得眼花撩亂、有選擇障礙?來試試減法設計吧!

此文正式取得「獨立評論@天下」授權刊登

相關閱讀:〈拿掉顏色檢視視覺設計〉、〈路標設計與登山教育〉、〈門牌設計的通用設計考量

複雜介面的選項與流程應簡化或分類

KTV點歌介面非常複雜

回想一下,你第一次去KTV唱歌的時候,看著複雜的點歌機介面,花了多久的時間才學會怎麼操作?學會之後,最常使用的功能是什麼?有沒有哪個功能,到現在都還沒用過?如果去到別家KTV,是覺得系統類似駕輕就熟,還是又要再學一次哪個功能該從哪裡進去、按哪個按鈕?

我們生活中有很多類型相似的產品,卻使用差異很大的操作介面,如果都夠直覺、容易上手倒也無妨,但我們卻常發現產品強調「多功能」,眼花撩亂的選項和資訊,讓沒那麼常使用科技產品的長者,或對科技產品缺乏信心的使用者望之卻步,甚至不知該從何展開操作。

很多人在KTV最常使用的功能是「切歌」鍵,但在介面上並不醒目。

複雜的介面,需要好好分類

越複雜的介面,越需要好好分類,以減少使用者視覺搜尋與心智負荷的程度。所謂的「複雜」,不只是操作步驟或功能按鍵多,資訊量也會提高介面設計的複雜度。而分類的方式很多種,包括選項的位置、形狀、顏色和大小等,都能作為分類的元素。

位置:如果是大家習以為常,甚至使用者經驗已根深蒂固的選項位置,通常不能隨意改動。例如,通常網頁會把返回首頁或上一頁的選項放在左上角。許多重要資訊也常會放在左上角的區域,讓使用者較容易發現。

手機操作介面通常將返回上一層的按鍵放在左上角。

形狀:選項的形狀能作為不同功能或類型的區別,甚至對於比較特殊的功能,會用更特殊的形狀去表示,例如星星形狀常用來當作「我的最愛」,設為常用項目或捷徑功能。若是觸碰式的介面,為避免誤觸隔壁選項,盡可能會採用方形或長方形,將空間有效使用。

書籤功能通常做成星星的形狀,方便使用者辨認。

大小:選項的大小也能作為分類,但更適合被用來呈現該選項的重要性或使用頻率。例如拍照APP的快門鍵常較其他功能來得大,購物網頁的「放入購物車」、「結帳」等功能也常比其他選項大,看起來更明顯。

從新手和專家視角解析介面設計問題

同一個介面的設計,不僅要讓新手可以自行理解、正確操作,或者方便找到解惑提示,在過程中不會產生挫敗感,也要能讓熟練使用者和專家可以跳過冗長重複的步驟,在過程中不會感到不耐,甚至提供捷徑以提升操作效率或使用者經驗。

然而,新手和專家的需求可能截然不同,甚至往往是天秤的兩端,如何整合、讓兩者都能順利操作完成,是介面設計很重要的課題。善用分類簡化資訊、凸顯重點,對初次或熟練使用者皆有幫助。在追求無人商店、廣設自助操作系統的科技時代,必須從新手和專家的視角及需求同時考量,才可能成為較通用的介面設計。

捷克超市有自助結帳機器,以減少人力負擔。 

原始來源:天下獨立評論 余虹儀專欄 「自助機器好難用?這時候,你就了解「使用者介面」設計的重要

此文正式取得「獨立評論@天下」授權刊登

相關閱讀:〈介面設計應考量通用使用性〉、〈自助操作系統應滿足新手與熟手的需求〉、〈通用介面同時滿足新手與熟手

自助操作系統應滿足新手與熟手的需求

匈牙利火車自助購票系統有快速購票的介面選項

科技發達、人力缺乏的時代,越來越多無人商店與自助操作系統(Kiosk)出現在我們的生活環境之中。停個車,要使用自助繳費系統,借個u-bike也要先用自助操作系統進行悠遊卡設定。醫院有自助掛號批價繳費機,高鐵或台鐵車站有自助購票機,各家便利商店也都有自助操作系統,影印、購票或寄貨都可以自己來。

然而,我們也經常看到很多民眾在機器前「卡關」。無論是繳費、掛號或購票,在操作過程中產生挫敗後,往往還是仰賴櫃檯人員或志工協助。這呈現出自助操作系統在介面設計上存有不少問題。

「初次」和「熟練」使用者的需求大不同

長久以來,自助操作系統為了避免初次使用者操作錯誤或失敗,大多採取一步一步的操作方式,也就是一次只讓使用者思考與回答一個問題。然而,這種做法會讓熟練使用者感到繁瑣囉嗦。例如列印一份文件,要先用好多個畫面解決下列問題:要印黑白還是彩色?A3還是A4?要不要放大縮小?要印多少張?對已經熟悉流程的使用者來說,很容易感到不耐。而大多數使用者可能都是要列印黑白、A4與單張文件,如果一開始就給使用者這個預設組合,或許可以更快完成任務,也不容易出錯。

由於初次使用者可能無法一次處理太多問題,熟練使用者卻傾向快速操作完成任務,因此可考慮提供快捷鍵的方式,讓熟練使用者可以加速流程,而初次使用者仍可維持原本的操作步驟。像是匈牙利的地鐵自助購票機在介面首頁就有提供「快速購票(Quick purchase)」按鍵,讓使用者可以一次完成選擇目的地、車票種類與張數等設定,對於經常使用或趕時間的旅客,這樣的操作方式可減少使用者不耐,也能提升購票效率。

匈牙利地鐵自助購票機有提供快速購票的功能。

過多選項應簡化或分類

生活品質提升,產品與服務也越來越多。便利商店自助操作系統所提供的服務項目多到讓人眼花撩亂,光是購票就有分交通票、博物館和演唱會等多種票券,使用者不僅難以分辨,瀏覽與查找也頗為費時。

根據短期記憶理論,人在短時間內可記憶的項目大約在數字7,最多是再加、減2的範圍內。然而,很多自助操作系統的服務或功能選項都超過7項。

簡化選項,主要可以避免使用者視覺搜尋時間過長,間接影響其操作意願或任務完成率。但有些選項是無法刪減的,例如台鐵購票系統即使已經先區分出北、中、南、東等區域,但每個區域還是有超過7個站必須列出;又如許多大城市的地鐵購票系統為了因應國際觀光客,往往需要多國語言,也很可能超過7種。

其實,面對選項太多的情況,可以將常用選項與不常用選項進行劃分,常用選項可直接列出,不常用選項都以「其他/更多」的選項收納,有需求者再自行點選。

奧地利地鐵自助購票系統僅呈現3種常用語言,其他語言都放在「更多」的選項中。

一個良好的自助操作系統必須滿足所有使用者需求,不管是初次使用、相當熟悉、有過類似操作經驗等等的使用者,要符合所有人的情況確實不易。因此,介面設計是否有做到「通用使用性」(universal usability)便顯得重要。除了要讓不同年齡、能力和經驗的使用者都能自行完成任務,在不同情境,或是使用不同載具的狀況下,也要有良好的操作體驗。

原始來源:天下獨立評論 余虹儀專欄 「自助購票繳費系統好難用?讓生活更便利的設計巧思

此文正式取得「獨立評論@天下」授權刊登

相關閱讀:〈介面設計應考量通用使用性〉、〈通用介面同時滿足新手與熟手〉、〈複雜介面的選項與流程應簡化或分類