Systems Analysis & Design
5th Edition
第7章
使用者介面、輸入與輸出設計
學習目標
● 解釋使用者介面設計及人與電腦互動的概念，
包括以使用者為中心的基本設計原則
● 列出使用者介面設計的具體準則
● 描述使用者介面技術，包括畫面元件及控制
● 解釋輸入設計概念、技術，及方法
2
學習目標
● 描述資料輸入畫面設計之準則
● 使用驗證檢查以減少輸入錯誤
● 設計有效的原始文件及輸入控制
● 討論輸出設計問題及各種不同的輸出類型
● 設計各種類型的列印報表，並建議必要的輸出
安全控管
3
簡 介
● 使用者介面、輸入，及輸出設計接續 SDLC
系統設計階段
● 使用者介面設計包括使用者與電腦的互動以
及輸入及輸出相關事項
4
使用者介面設計
● 在邏輯模型完成建構後，系統分析師接著將
其注意力轉到實體設計
● 有一個重要設計元件是使用者介面 (UI, user
interface)
● 使用者介面包含所有影響使用者與電腦雙向
溝通的硬體、軟體、螢幕畫面、選單、功能
，及特性。
5
使用者介面設計
● 使用者介面的演進
– 隨著資訊系統管理的發展從集中式資料處理演變到
動態及遍及整個企業的系統，其主要的焦點也隨之
改變──從資訊科技部門轉移到使用者本身
– 使用者為中心的系統(User-centered system)
– 需要了解人與電腦的互動及以使用者為中心的設計
原則
6
使用者介面設計
● 人與電腦互動
– 人與電腦互動 (HCI, humancomputer
interaction) 描述電腦與使用這些電腦來執行與
營運相關工作的人之間的關係
– IBM 使用其 Almaden 電腦科學研究網站來專注
於使用者及他們如何體驗科技
7
使用者介面設計
● 人與電腦互動
– IBM 追蹤人與電腦接觸的歷史與演進，由使用
者在一個黑色螢幕上打入綠色文字的複雜指令開
始，再經由介紹具有圖形物件及指引設備的圖形
使用者介面 (GUI, graphical user interface)
– Clare-Marie Karat 博士提到：「在新的電腦世紀
中，客戶不僅是對的，他們更擁有權益。」
8
使用者介面設計
● 人與電腦互動
– Karat 博士所述的使用者權益包括下列十項：
• 角度 (perspective)
• 安裝 (installation)
• 承諾 (compliance)
• 說明 (instruction)
• 控制 (control)
• 回饋 (feedback)
• 可靠 (dependencies)
• 範疇 (scope)
• 協助 (assistance)
• 可用性 (usability)
9
使用者介面設計
● 使用者為中心設計的基本原則
– 了解基本營運功能
– 圖形效益最大化
– 了解系統的使用者
– 以使用者的角度思考
– 使用雛型
• 可用性度量 (usability metrics)
10
使用者介面設計
● 使用者為中心設計的基本原則
– 設計易於了解的介面
– 持續回饋程序
– 建立介面設計文件
11
使用者介面設計
● 使用者介面設計準則
– 遵循八個基本準則
1. 著眼於基本目標
2. 建構易學易用的介面
3. 提供增進效率的功能
4. 讓使用者易於取得協助或更正錯誤
5. 儘量減少輸入資料問題
12
使用者介面設計
● 使用者介面設計準則
– 遵循八個基本準則
6. 提供回應給使用者
7. 建立吸引人的佈局及設計
8. 使用熟悉的術語及圖形
– 良好的使用者介面設計是以人體工學、美學，
及介面科技的組合為基礎
13
使用者介面設計
● 使用者介面設計準則
– 著眼於基本目標
• 使系統設計目標易於完成
• 產生容易使用與記憶的設計
• 設計介面以增進使用者效率及產能
• 編寫命令、動作，及系統回應要一致且可預期
14
使用者介面設計
● 使用者介面設計準則
– 建構易學易用的介面
• 將所有控制項、按鍵，及圖像都加以標示說明
• 選擇使用者易於了解的圖案
• 畫面所提示的指令要合乎邏輯、簡單，且清楚
• 顯示選單的所有命令
15
使用者介面設計
● 使用者介面設計準則
– 提供增進效率的功能
• 將工作、命令，及功能群組化以反映實際的營運作業
• 產生依字母排序的選單表列
• 提供捷徑給有經驗的使用者，以跳過多層的選單
• 使用複製內容值的功能，讓使用者在輸入新紀錄的值
時，會引入前一筆紀錄中相同欄位中的內容值
16
使用者介面設計
● 使用者介面設計準則
– 讓使用者易於得協助或更正錯誤
• 保證隨時可以取得求助資訊
• 提供使用者選擇的線上求助及內文相關的線上求助
• 提供直接路徑，讓使用者可以從所要求的求助點回到
本來畫面
• 放入聯絡資訊
17
使用者介面設計
● 使用者介面設計準則
– 儘量減少輸入資料問題
• 提供資料驗證檢查
• 顯示事件驅動訊息及提醒
• 建立預設值的表列，讓使用者可以直接按鍵選擇
• 內建增強資料完整性的原則
• 使用輸入遮罩 (input mask)
18
使用者介面設計
● 使用者介面設計準則
– 提供回應給使用者
• 在畫面的合適位置顯示訊息，並且要保持一致
• 警告使用者處理時間過長或是有延遲
• 讓訊息在畫面停留的時間足夠使用者讀完
• t讓使用者知道該工作或是作業是否完成
19
使用者介面設計
● 使用者介面設計準則
– 建立吸引人的佈局及設計
• 使用適當的顏色來強調畫面的不同區域
• 節制地使用特殊效果
• 使用超連結讓使用者可以跳到相關議題
• 將相關的物件及資訊群組化
20
使用者介面設計
● 使用者介面設計準則
– 使用熟悉的術語及圖形
• 記得使用者是已經習慣於：紅色代表停止；黃色代表小
心；及綠色代表通行的行為模式
• 為每一個選單命令提供由鍵盤輸入的選擇
• 儘可能使用熟悉的命令
• 如果使用者對 Windows 視窗應用軟體相當熟悉，則可
以在介面設計中提供類似視窗的外觀及感覺
21
使用者介面設計
● 使用者介面控制
– 選單欄 (menu bar)
– 工具欄 (toolbar)
– 命令按鈕 (command button)
– 對話框 (dialog box)
– 文字框 (text box)
– 開關按鈕 (toggle button)
22
使用者介面設計
● 使用者介面控制
– 表列框 (list box) -- 滾動軸 (scroll bar)
– 下拉式表列框 (drop-down list box)
– 選項按鈕 (option button) 或圓圈按鈕 (radio
button)
– 核選框 (check box)
– 日曆控制 (calendar control)
– 控制面板 (switchboard)
23
使用者介面設計
● 使用者介面控制
24
輸入設計
● 輸入科技在最近幾年中有非常大的改變
● 不管資料是如何輸入到資訊系統中，輸出的
品質也是與輸入的品質同等重要
– 垃圾進，垃圾出 (GIGO, garbage in, garbage out)
– 資料擷取 (data capture)
– 資料登錄 (data entry)
25
輸入設計
● 輸入與資料登錄方法
– 批次輸入 (batch input)
• 整批 (batch)
– 線上輸入
• 線上資料輸入 (online data entry)
• 原始資料自動化 (source data automation)
• 資料磁條 (magnetic data strips) 及掃描器 (swipe
scanners)
• 銷售時點系統 (POS, point-of-sale)，自動提款機 (ATM,
automatic teller machine)
26
輸入設計
● 輸入與資料登錄方法
– 互為取捨
• 除非使用原始資料自動化，否則人工資料輸入比批次
輸入要慢且昂貴，因為這是進行於交易發生的同時，
而通常在這種時候，電腦使用的需求是在最高點
• 使用批次或是線上輸入的決策是要依企業的需求而定
27
輸入設計
● 輸入量
– 以下準則可以幫忙降低輸入量
1. 只輸入必要資料
2. 不要輸入使用者可以從系統檔案取得或是透過其他
資料加以計算就可以得到的資料
3. 不要輸入不變的資料
4. 使用代碼
28
輸入設計
● 設計資料登錄畫面
– 線上資料登錄最有效方法是填表 (form filling)
– 協助你設計出易學易用的資料登錄畫面的準則
1. 限制使用者只能存取欲登錄資料之畫面位置
2. 每一個欄位都提供描述性標題，顯示出使用者可在
哪裏輸入資料及需要的或是最大的欄位大小
29
輸入設計
● 設計資料登錄畫面
– 協助你設計出易學易用的資料登錄畫面的準則
3. 如果使用者必須在欄位中輸入特定格式就該顯示樣
本格式
4. 每一個欄位都需要一個結束確認按鍵
5. 不要要求使用者在輸入數字欄位時，在數字的前面
補0
6. 不要要求使用者在輸入含小數的數字欄位時，在小
數點之後補 0
30
輸入設計
● 設計資料登錄畫面
– 協助你設計出易學易用的資料登錄畫面的準則
7. 顯示內定值，讓操作者可以只要按 ENTER 鍵，以接
受此建議值
8. 當欄位的值在接下來的輸入紀錄中或是整個輸入程序
中將會持續不變時，則將此值定為內定值
9. 顯示欄位可接受之內容值的表列，且如果使用者輸入
不被接受的值時，則提供清楚的錯誤訊息
31
輸入設計
● 設計資料登錄畫面
– 協助你設計出易學易用的資料登錄畫面的準則
10. 提供一個方法，在任何時候都可以離開資料輸入畫
面而不用登錄目前的紀錄
11. 提供使用者可以再確認輸入資料正確的機會，可在
登錄資料之前，在畫面上顯示某些訊息
12. 提供方法讓使用者可以在表格中的各個欄位間以標
準順序
32
輸入設計
● 設計資料登錄畫面
– 協助你設計出易學易用的資料登錄畫面的準則
13. 設計畫面格式佈局以匹配原始文件的佈局
14. 允許使用者可以新增、更改、刪除，及查看紀錄
15. 提供方法讓使用者可以搜尋某特定資訊
33
輸入設計
● 輸入錯誤
– 減少輸入錯誤的次數可提高資料品質
– 資料驗證檢查 (data validation check) 利用檢查資
料未滿足某些特定條件則拒絕接受其登錄的方法
來提高輸入品質
34
輸入設計
● 輸入錯誤
– 至少可以設計八項資料驗證檢查
1. 順序檢查 (sequence check)
2. 存在檢查 (existence check)
3. 資料類型檢查 (data type check)
4. 範圍檢查 (range check) -- 界限檢查 (limit
check)
5. 合理性檢查 (reasonableness check)
35
輸入設計
● 輸入錯誤
– 至少可以設計八項資料驗證檢查
6. 驗證檢查 (validity check) -- 參考完整性
(referential integrity)
7. 組合檢查 (combination check)
8. 批次控制 (batch controls)
36
輸入設計
● 原始文件
–原始文件 (source
document)
–表格佈局 (form layout)
–標題區 (heading zone)
–控制區 (control zone)
–指示區 (instruction zone)
–主體區 (body zone)
–總計區 (totals zone)
–認可區 (authorization
zone)
37
輸入設計
● 原始文件
– 資訊流動方向必須是從左到右，從上到下，以符
合使用者閱讀文件的自然習慣
– 以 Web 為基礎的表單設計的主要挑戰是相較於
紙張表單，大多數人以不同的方式來閱讀及填寫
線上資訊
38
輸入設計
● 原始文件
– Jakob Nielsen 博士相信使用者只是掃描一下頁
面，挑出個別的字眼和句子
– 因此，網頁的設計者必須使用易於掃瞄的文字
(scannabe text) 來吸引並保持使用者的注意力
– 佈局及設計在以 Web 為基礎的表單中也是同等
重要
39
輸入設計
● 輸入控制 (input control)
– 每項資訊都必須可追溯到產生此資訊的輸入資料
– 稽核軌跡 (audit trail)
– 資料安全 (data security)
– 紀錄保留政策 (records retention policy)
– 加密 (encrypted) 或是編碼 (coded) -- 加密程序
(encryption)
40
輸出設計問題
● 在設計輸出之前，你先要自問一些問題
– 輸出的目的是什麼？
– 誰要這些資訊？為何這些資訊是必要的？要如何
使用它們？
– 將包含什麼特定資訊嗎？
– 輸出要列印出來，或是在畫面顯示，或是兩者都
要？
41
輸出設計問題
● 在設計輸出之前，你先要自問一些問題
– 資訊應於何時提供？又要多常更新？
– 有沒有存在安全或是機密性問題？
● 上述的答案會影響你的輸出設計策略
42
輸出設計問題
● 輸出的種類
– 在系統設計階段，你必須設計實際報表、畫面表
格，及其他輸出傳遞方法
– 以網際網路為基礎的資訊傳遞
– 電子郵件 (e-mail or electronic messaging)
– 語音輸出 (audio output)
43
輸出設計問題
44
輸出設計問題
● 輸出的種類
– 自動傳真系統 (automated facsimile systems)
• 回傳系統(faxback systems)
– 電腦輸出縮影膠卷 (COM, computer output
microfilm) –
• 縮影膠卷 (microfilm)
• 縮影膠片 (microfiche)
– 雷射光碟電腦輸出 (COLD, computer output to
laser disk)
45
輸出設計問題
● 輸出的特殊格式
– 在非常多樣化的市場環境下，需要各式各樣特殊的
輸出
– 一個系統的輸出通常可成為另一個系統的輸入
– 雖然數位科技打開了企業通訊上的新紀元，但是列
印輸出仍是常用的輸出形式
46
列印輸出
● 雖然很多組織努力想降低紙張及列印報表的
使用量，但是很少有公司有辦法將列印輸出
完成消除
● 因為它們易於攜帶，列印報表比較方便，且
在某些狀況下甚至是必要的
● 回轉文件 (turnaround documents)
47
列印輸出
● 報表的種類
– 細節報表 (detail report)
• 細節行 (detail line)
• 控制欄位 (control field)
• 控制分段 (control break)
• 控制分段報表 (control break report)
• 它可能相當長
• 一個更好的替代方法是產生例外報表
48
列印輸出
● 報表的種類
– 例外報表 (exception report)
• 當使用者只想要知道可能需要採取行動的紀錄之資訊
，而並不需要知道細節時，例外報表就很有用處
– 彙總報表 (summary report)
• 一般來說，在組織中愈高階層的人所使用之報表，相
較之於低階層員工所使用的報表，包含較少細節資訊
49
列印輸出
● 使用者參與報表設計
– 列印報表是傳遞資訊給使用者很重要的方法，所
以報表的接收者必須要在所有報表設計之前，加
以認可
– 為避免問題，你必須在完成每項設計時，都將之
送交認可，而不是要等到完成整個報表設計，才
做這個工作
– 打樣 (mock-up) 或是雛型
50
列印輸出
● 報表設計原則
– 列印報表必須是具有吸引力、專業化，及易於閱
讀
– 報表標頭 (report header)及報表標尾 (report
footer)
– 頁首 (page header)及頁尾 (page footer)
– 欄標題對齊方式
51
列印輸出
● 報表設計原則
– 欄距 Column Spacing
• 你必須小心安排資訊的欄距
– 欄位次序 Field order
• 欄位必須依照合理次序的方式來顯示及群組化
– 細節行群組化
• 將細節行依照其控制欄位來加以群組化是有意義的
• 群組標頭 (group header)
• 群組標尾 (group footer)
52
列印輸出
● 報表設計的範例
– 再看看圖 7-36 中所顯示的員工工時報表，雖然
此報表已經依循許多前面所討論的設計準則而設
計，你仍然可以再加以改進
– 有太多細節在此頁中，將迫使使用者去尋找他們
所要的資訊。
53
列印輸出
● 其他設計議題
– 好的設計標準產生形式一致的報表
– 當系統產生多份報表時，每一個報表都應該具有
相同的設計元件
– 在報表設計批准後，你必須將此設計以報表分析
表 (report analysis form) 加以歸檔
54
列印輸出
● 設計以文字為基礎的報表
– 仍有許多資訊系統仍會產生一些文字為基礎的報
表 (character-based reports)
– 當報表設計師產生或修改文字為基礎的報表時，
他們使用一種目前仍然使用良好，稱為列印空間
圖(printer spacing chart)的傳統工具
55
列印輸出
● 列印量及時間需求
– 大量的報表也會明顯增加系統的總取得成本
(TCO)
– 長度計算 Length calculations
– 時間計算 Time calculations
• 每分鐘列印頁數 (ppm, pages per minute)
• 行印表機 (line printers) ，
56
列印輸出
● 輸出控制及安全性
– 輸出必須具備正確、完整、及時，及安全性
– 輸出安全 (output security)
– 資訊科技部門是負責輸出控制及安全措施
– 許多公司已經裝置無硬碟工作站 (diskless
workstation)
57
本章總結
● 本章從人與電腦互動概念及圖形使用者介面
(GUI) 開始進行討論
● 你學習到，以使用者為中心的設計原則可用以
了解企業功能、放大圖形的效果、描述系統的
使用者、以使用者的角度思考、使用雛型，設
計一個易於理解的介面，持續回饋程序，及記
錄介面設計文件
58
本章總結
● 減少輸入錯誤的一個有效方法是降低輸入量
● 輸出的一節中包含輸出設計問題的討論與各種
不同類型輸出的描述
● 最後，你學習到有關輸出控制，以及可以用來
達到適當的輸出控制以保證資訊是正確、完整
，及安全的各種不同方法
59
Systems Analysis & Design
5th Edition
Chapter 7 Complete