第八章 : 人機界面之設計 dfd structure english e-r model 畫面、 報表 設計 資料庫...

第八章 : 人機界面之設計

DFD Structure

English

E-R Model

畫面、 報表設計

資料庫設計 程式模組

處理邏輯設計

1. 輸出入畫面畫面與報表報表之設計

輸出入畫面或報表與 DFDDFD 之對應關係

畫面、報表或單據 也可能來自 E-R E-R 模型模型

供應商

付款

order

checkcheck

輸出入資料範例

輸入範例 : 產品之訂單、新進員工人事資料、學生選課單、自動提款機之輸入畫面、…

輸出範例 : 客戶收據、銷貨週報表、統計圖表、郵寄標籤、… .

輸出入資料之設計過程

1) 收集並了解使用者之需求

2) 建構一個雛型供使用單位確認3) 不斷地修正雛型直到使用單位滿意為止

4 W

1 H

非視窗系統使用之方格紙方格紙 (Coding Sheet )

25 x 80

冒號均設定在

27 行

視窗界面之設計範例

包含三部份之 包含三部份之 文件設計規範文件設計規範

1) 文件內涵描述

2) 設計樣本

3) 使用單位對文件試用後之評估

文件設計範例 文件設計範例 :: PVF PVF 公司公司客戶資訊客戶資訊畫面畫面

文件內容描述

設計樣本

使用單位評估

2. 輸出入設計之基本原則

1) 說明必須有其意義

2) 剔除無意義之資訊

3) 項目安排力求平衡

4) 頁碼之索取、 翻閱 應標示清楚

未依照 設計基本原則 規劃之畫面

表頭說明不清楚

缺乏平衡

資料表達不清

未標示頁碼

依 設計基本原則 規劃之畫面

表頭說明清楚

欄位間距平衡

欄位說明清晰

標示

頁碼

畫面切換標示清楚

2.1. 各種提醒操作人員注意之設計

閃爍及音效顏色區隔

粗細差異差異

字體大小

字型差異反白反白

加框加底線

全部使用大寫差異列印

提醒注意之畫面設計範例 ( 利用大小寫、字型、字體粗細、區隔線段 … )

提醒操作人員注意之時機

1) 當有錯誤輸入或須告知作業正在處理中時

2) 當輸入異常資料值或系統內某一裝置無法使用時給予警告訊息

3) 向操作人員提示關鍵字、指令名稱、優先度最高之訊息、不合理的資料更新或計算、 ...

2.2. 文字資料 文字資料 之輸出規則

1) 大小寫字母之運用2) 空白欄之使用3) 向左靠齊之規矩4) 避免使用連接符號5) 少用縮寫的情形

未按照輸出規則設計之畫面

依照輸出規則設計之畫面

大小寫字母

適度的留白

向左靠

2.3. 圖表之設計

一般性規則

拙劣之設計範例

不同性質資料在

同一欄位

數值欄位向左

靠

較為優異之設計範例

欄位標示清楚

數值資料向右靠

PVF 公司之報表設計範例 ( 符合設計規則但不夠清晰 )

可否以更清晰方式

表達 ?

採用圖形取代報表 ( 一圖勝於千言萬語 )

每況愈下

漸入佳境

2.4. 螢幕畫面與報表列印

雷射印表機與噴墨印表機可完整地列印螢幕畫面之圖形及表格資料

撞擊式印表機撞擊式印表機具快速、高可靠性、低價等特性 , 卻無法將畫面之圖形予以列印

3. 人機界面之設計

螢幕畫面或單據之資料分類

1) 表頭資訊 ( Header Information )

2) 日期、時間及單據序號 ( Sequence & Time )

3) 注意事項之提示訊息 ( Instruction … ) 4) 主體資料或明細資料 ( Body or Data Details ) 5) 合計或彙總資料 ( Totals or Data Summary ) 6) 確認或簽名欄位 ( Authorization or Signatures )

7) 備註欄 ( Comments )

PVF 公司銷售資料之設計

售貨發票之設計 2

1

4

5

6

對應於 售貨發票 之 螢幕畫面螢幕畫面 設計

1 2

4

5

人手填寫之單據欄位 與 螢幕欄位螢幕欄位 輸入之配合

由上而下

由左而右

不當的 螢幕欄位 設計將造成輸入之不便

1 23

4

5

6

欄位編號為單據單據上出現之順序

螢幕畫面設計 時之注意事項

1) 儘量將 輸入欄位區輸入欄位區 予以 隔離

2)每一畫面使用之 指令 指令 或 功能鍵功能鍵應力求統一

3) 資料輸入時 , 應具有游標控制、欄位內資料編輯、表單畫面間之切換、呼叫支援註解機制、… .

提高 螢幕畫面設計 的有效機制

游標控制

欄位內資料編輯

表單畫面間之切換

呼叫支援註解機制呼叫支援註解機制

單一輸入欄位之設計

基本原則避免輸入可由資料庫或計算取得者

使用預設值必要時須清楚標示輸入資料之單位避免輸入

冗長文字 清楚的欄位提示示範輸

入格式資料輸入後

自動靠齊提供呼救機制

單一輸入欄位 設計原則 說明

1) 若某一欄位可由系統中取得或欄位間之運算求得則不應要求使用者再輸入 ( ie 日期或時間 .. )

2)主動提供預設值 ( Defaults ) 並允許例外處理之修正 ( ie 銀行放款客戶每月繳交固定本息… )

各種不同形式之輸入欄位提示

如何避免資料輸入錯誤

輸入資料之檢核 ( Data Validation ) 避免垃圾進垃圾出 ( Garbage In Garbage Out : GIGO )

資料輸入錯誤之原因 ( Table 8-9 ) 1)多輸入了額外之字元 ( Appending )

2) 遺漏了應輸入之字元 ( Truncating )

3) 輸錯了部分字元 ( Transcription )

4) 將二個字元之順序弄反 ( Transposing )

10 種確保輸入資料正確之技巧 ((Table 8-10)Table 8-10)

1) 檢查欄位之類別屬性 ( 文字、數值、… )

2) 欄位合理性檢核 ( 某個人戶之水電使用度數為天文數值 )

3) 是否為預期之資料值

4) 某些欄位值不准為空白 ( Missing Data )

5) 是否滿足預定之格式

6) 資料值是否介於一區間範圍 (ie 考試分數 )

7) 一致性檢查 ( 某一類客戶其合理之手續費介於某一數值區間 )

8) 檢查碼計算 ( 在原有資料上附加檢查碼 )

( 使用範例 : 存款帳號、身分證統一編號、學號… )

( 可避免輸錯了部分字元或二個字元之順序弄反 )

( 計算範例 1 : Modulus 10 ( 表 8- 15 ) )

Modulus 10 之計算範例

原本欄位上附加新欄位

計算過程

範例

( 計算範例 2 : 身分證統一編號 ( 詳見附件 ) )

9) 欄位長度檢查

10) 欄位值範疇檢驗

採用檢查碼之時機時機與目的目的

當資料輸入欄位超過 7 位且為識別用屬性

資料欄位過長易造成錯誤

當識別用資料欄位錯誤將造成張冠李戴

實務上避免檢查碼錯誤輸入之方法 ( 減少輸入機會減少輸入機會 )

學號儲存在學生證之磁條上

超市以商品條碼取代數值代號

銀行將帳號存放於存摺磁條上

在支票下方預印磁性墨水 (MICR)

發現資料輸入錯誤時之處理方式

1) 連線交易的環境下可即時回應

2) 批次作業時可將錯誤之輸入資料寫入流水檔中

流水檔還可做為 稽核稽核 及 檔案復原 檔案復原 使用

系統內部如何提供欄位檢查機制

1) 經由系統程式具備之功能 ( 例如 DBMS 之內涵機能 … )

2) 自行撰寫之模組

三種常見之系統回應資料輸入之方式

1) 回應已處理完成或處理中之訊息 ( Status Information )

2) 提示操作人員應輸入之格式形態 ( Prompting Cues )

3) 顯示錯誤或警告訊息 ( Error or Warning )

系統回應訊息應避免使用技術性用語

使用技術用語

說明錯誤原因及對策語意

不清

系統如何提供操作者 Help 機制

Help 機制之設計原則

長話短說

恰當地組織訊息

範例說明

優質畫面 vs. 差勁畫面之設計

恰當地組織訊息 使用簡

潔文字

不同種類與層次之 Help 設計與範例

使用者在操作時遭遇之各類問題均

可依賴 Help

恰當地分類各類問題

4. 螢幕畫面切換之流程設計

基本設計原則

設計原則說明

1) 格式、機能、畫面呈現風格應 力求一致性

2) 可使用快速處理鍵 ; 輸入程序不宜標新立異

3) 系統應有回饋機制

4) 畫面間之切換、連貫、終止應清楚標示

設計原則說明

5) 各種錯誤狀況之說明與處理

6) 允許使用者取消部分已處理之作業

7) 讓使用者感受一切在其操控中

8) 提供方便簡易之操作界面

畫面切換流程設計之 三個步驟 三個步驟

Step 1 : 設計畫面切換流程圖 設計畫面切換流程圖 ( ( Dialogue Dialogue Diagram)Diagram)

( 使用長方形符號內涵三項資料 )畫面編號

機能描述

回溯畫面編號

流程圖之特色

每個畫面切換流程圖均包含編號、畫面名稱、回溯畫面

連結線不使用箭頭代表雙向流動

畫面切換流程圖和程式處理之邏輯相似

繪製範例 ( 流程圖中亦包含順序順序、選擇選擇和迴路迴路 )

個案探討個案探討 : PVF 公司四種四種主要作業機能

畫面切換流程設計之 三個步驟 三個步驟 ( ( 續 續 ))

Step 2 : 建構一個雛型 ( 可利用 CASE 或 視覺化程式語言協助 )

Step 3 : 評估其可行性

個案探討 個案探討 : PVF 公司之網路商店

四個設計特色 :

1) 讓使用者了解目前上網瀏覽的處理階段 2) 適當地使用圖形圖形 ( Lightweight Graphics )

3) 畫面及輸入資料之完整性 ( 資料輸入查核在 Client 端完成 )

4) 儘量使用統一規格使用統一規格 ( Template ) 來設計