介面設計

人機互動(Human Computer Interaction, HCI)研究，主要探討如何讓使用者有效率與簡單 學習的介面設計系統，將資訊轉換成清楚的導引，並提供親切、直覺的使用經驗，以達到人、

介面與機器溝通之橋樑(Winograd & Wilson, 1997; Aaltonen, Hyrskykari, & Raiha, 1998；吳建 和，2002)。使用者介面一直是人機互動(HCI)研究中重要議題之一，以使用者為設計之出發 點，協助其完成目的(陳建豪，1998；蔡學鏞，2006)，好的介面設計亦有利於使用者操作 (Lindholm, Keinonen, & Kiljander, 2003)。隨著科技進步，產品的功能擴增與體積縮小，小螢 幕介面設計問題也接踵而來；許多研究者開始針對手機的顯示螢幕展開相關研究，並提出不 同的設計規範，因此整理出具代表性之設計原則，並做進一步探討，如表2-3所示。由上列設 計原則中可歸納出，手機介面設計所面臨的問題分為導覽與資訊尋求(Jones & Marsden, 2006；張寶芳，2008)：(1)導覽問題，使用者是否能在小螢幕手機中有效並直覺找出所要功能，

且選單設計會影響到使用者記憶上的負擔，表2-4與表2-5為目前手機選單結構之整理；(2)資 訊尋求問題，有關情境資訊的調適(Context adoption)與小螢幕的版面配置，目前手機版面大致 可分為矩陣式(matrix)、條列式(tree)與翻頁式(page-to-page)三種(陳曉煜，2003；楊智忠，2003；

Zhang, Shan, Xu, Yang, & Zhang, 2007)。

表 2-3 小螢幕設計法則的相關文獻

研究者(年份) 小螢幕設計法則

Philips IMS (1992) ¾ 一致性

¾ 親和性

¾ 簡單明瞭

¾ 謹慎使用顏色 陳慧昇 (1997) ¾ 一致性

¾ 簡單化和明確化

¾ 隱喻

¾ 所見即所得 (續下頁)

表 2-3 小螢幕設計法則的相關文獻(續) Single menu

¾ 優點：使用者快速明瞭所有項目

¾ 缺點：同時出現太多選項，造成視覺干擾 連續線性選單

Sequential linear menu

¾ 優點：不完全展開狀態下出現選單，使用者掌握所有選單資訊

¾ 缺點：選擇時是按照次序，前選單易被遮蓋住 同時性選單

Simultaneous menu

¾ 優點：選單間可同時做比較

¾ 缺點：選單數過多則無法同時呈現 階層式選單

Hierarchical menu

¾ 優點：選單間具有階段性或次序性

¾ 缺點：不熟悉選單涵義的使用者，操作上較費時 互連式選單

Connected menu

¾ 優點：可在選單間游走

¾ 缺點：缺乏經驗的使用者沒有依循的方向 資料來源：Norman, 1991；郭明怡，2006；徐瑜卿，2006。

表 2-5 圖像選單

圖像選單模式 內容特色

索引式選單 Index layout 第一層與第二層功能選均顯示出來 標籤式選單 Tab menu 第一層選單以標籤形式呈現

下拉式選單 pull-down menu 位於第一階層功能選單，項目數目大約5-10個，呈現方 式以文字為主

系列選單 cascading menu 可減少選單過長的問題

彈出式選單 pop-up-menu 特定功能需求時會跳出的快捷選單 可分離式選單 tear-off menu 可依使用者喜好移動、開啟或關閉選單 圖像式選單 iconic menu 選單以圖像化呈現

資料來源：徐瑜卿，2006；Gao, Hitomi, Patrick Rau, & Yoko, 2007；張煒翰，2008。

一般手機使用者迷失在功能選單中是常見的問題(Edwards & Hardmann, 1989; Kim &

Hirtle, 1995; McDonald & Stevenson, 1998; Ziefle & Bay, 2004, 2006; Ziefle, 2010), 更何況是對 於缺乏使用科技產品經驗的高齡者而言(Arning & Zielfe, 2007a, b, 2008)。高齡者在學習科技產 品最主要的障礙為：(1)視力退化，導致高齡者無法長時間看著螢幕；(2)記憶力退化，使高齡 者無法快速學習新事物，且容易遺忘所學內容；(3)認知，則讓高齡者排斥學習的心理因素 (Zajicek, 2001；蔡育珉，2007)。研究也指出以目前介面設計功能的複雜性，超出高齡者所能 理解範圍，對於閱讀螢幕上的訊息並記住、理解訊息內容、尋找目標選單與操作選單功能上，

是件困難的事情(趙榮州，2004；Hsiao & Chou, 2007; Kurniawan, 2008)；透過歸納高齡者之介 面設計領域的相關研究，整理出各項適用於高齡者的設計原則，如表2-6 所示。

現今的資訊產品追求輕薄短小、多功能，但對高齡者而言則會產生許多使用認知與操作 的問題(蔡旺晉，2004；謝承志，2004)，加上高齡者學習接受新事物的速度比年輕人緩慢(李 傳房與曾思瑜，2000)。因此，針對探討高齡者在操作手機介面上遇到的障礙與問題，是一個 必要與務實的基礎。本研究依據高齡者與手機介面之國內外各文獻研究結果的影響因素彙 整，如表2-7所示。從表七所列的各文獻中，綜合出適合高齡者之選單與介面特性進行之實驗 設計來進行測試，以確認本研究所設計之不同選單組合模式中，使用者在操作上有較高的適

用性。 曾數之階層架構目錄，有較佳的使用績效(Väyrynen, Törmänen, Tornberg, &

Prykäri, 2001)

¾ 階層數為二階層者，較易於操作(小松原明哲，1992)

¾ 保持頁面內容量少，顯示重要必備資訊(徐美瑜，2003)

¾ 使用者能所知道自己目前的目標位置(Marcus, 1998)

色彩配置 ¾ 保持色彩對比，避免使用藍、綠、紫組合，以免因色彩間相差太少產生辨 識困難(Charness & Bosman, 1990；管倖生與童鼎鈞，2000；陳美琪，2001)

¾ 避免使用低彩度、濁色色彩(蔡旺晉，2004)

¾ 亮度對比越大越可提昇使用績效 (葉栢虦，2005)

¾ 明度差異量、色相差異量、總色差值越大，視認度越好(陳美琪，2001) 文字設計 ¾ 避免小目標物或小於12級字體 : 研究顯示60-83歲高齡者在12-14級字體 的閱讀速度和表現上較佳(Vanderplas & Vanderplas, 1980; Hartley, 1994)

¾ 空心字體與粗體字型較不適合高齡者(李建宏，1997)

¾ 斜體以及加底線亦造成閱讀不易(蔡旺晉，2004)

¾ 避免使用特殊花俏字形(Hawthorn, 2000)

¾ 過大字型與字距會造成難以整合(蔡旺晉，2004)

讓使用者清楚辨別 (Fowler & Stanwick, 1995) (續下頁)

表 2-6 高齡者介面設計參考原則(續) 介面設計 具體內容

圖形設計 ¾ 尺寸大小不小於16 pixel (Fowler & Stanwick, 1995)

¾ 圖形中勿包含文字(徐美瑜，2003)

¾ 按鍵圖形大小一致，不宜超過2種size(蔡旺晉，2004) 功能設計 ¾ 適時提供提示、回饋與鼓勵，以引發使用動機和成就感

¾ 運用語音輔助，使用較低頻率(500~1000HZ)的聲音(Huey, Buckley, &

Lerner, 1994)

¾ 使用精簡語句，與適當的縮寫或簡稱(Tullis, 1988)

¾ 增加重要的視覺焦點大小(蔡旺晉，2004)

¾ 簡化輸入，利用固定選單方式或快速鍵，讓使用者直覺式思考(Marcus, 1998)

¾ 提供瀏覽基本控制鍵，首頁的導覽選項不需在次頁重複出現，並提供不必 要移動游標太遠就可回到首頁或上一個連結(Marcus, 1998)

表 2-7 高齡者之手機介面設計相關文獻

表 2-7 高齡者之手機介面設計相關文獻(續)

Successful and available: Interface design exemplars for older user

¾ 聲音輔助

¾ 圖示設計簡易清楚 Subramanya

& Byung (2006)

User interfaces for mobile content ¾ 聲音輔助

¾ 視覺提示

Zhang, Shan, Xu, Yang &

Zhang (2007)

An ergonomics study of

menu-operation on mobile phone interface