人机界面之设计 -

人機界面之設計1.輸出入畫面與報表之設計@輸出入畫面或報表與DFD

之對應關係@畫面、報表或單據也可能來自E-R模型輸出入資料範例@輸入範例:產品之訂單、新進員工人事資料、學生選課單、自動提款機之輸入畫面、…@輸出範例:客戶收據、銷貨週報表、統計圖表、郵寄標籤、….輸出入資料之設計過程1)收集❹了解使用者之需求(4W1H)建構一個雛型供使用單位確認不斷地修正雛型直到使用單位滿意為止非視窗系統使用之方格紙(Coding

Sheet)視窗界面之設計範例包含三部份之文件設計規範文件內涵描述設計樣本使用單位對文件試用後之評估文件設計範例:PVF公司客戶資訊畫面2.輸出入設計之基本原則說明必須有其意義剔除無意義之資訊項目安排力求平衡頁碼之索取、翻閱應標示清楚未依照設計基本原則規劃之畫面依設計基本原則規劃之畫面2.1.各種提醒操作人員注意之設計提醒注意之畫面設計範例(利用大小寫、字型、字體精細、區隔線段…)提醒操作人員注意之時機當有錯誤輸入或須告知作業正在處理中時當輸入異常資料值或系統內某一裝置無法使用時給予警告訊息向操作人員提示關鍵字、指令名稱、優先度最高之訊息、不合理的資料更新或計

算、...2.2.文字資料之輸出規則大小寫字母之運用空白欄之使用向左靠齊之規矩避免使用連接符號少用縮寫的情形未按照輸出規則設計之畫面依照輸出規則設計之畫面2.3.圖表之設計@一般性規則拙劣之設計範例較為優異之設計範例PVF公司之報表設計範例(符合設計規則但不夠清晰)採用圖形取代報表(一圖勝於千言萬語)2.4.螢幕畫面與報表列印@

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

撞擊式印表機具快速、高可靠性、低價等特性,卻無法將畫面之圖形予以列印3.人機界面之設計@螢幕畫面或單據之資料分類表頭資訊(Header

Information)日期、時間及單據序號(Sequence

&

Time)注意事項之提示訊息(Instruction…)主體資料或明細資料(Body

or

Data

Details)合計或彙總資料(Totals

or

Data

Summary)確認或簽名欄位(Authorization

or

Signatures)備註欄(Comments)PVF公司銷售資料之設計@

售貨發票之設計@

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

人手填寫之單據欄位與螢幕欄位輸入之配合(由上而下由左而右)@

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

螢幕畫面設計時之注意事項儘量將輸入欄位區予以隔離每一畫面使用之指令或功能鍵應力求統一資料輸入時,應具有游標控制、欄位內資料編輯、表單畫面間之切換、呼叫支援註解

機制、….@

提高螢幕畫面設計的有效機制單一輸入欄位之設計@基本原則@

單一輸入欄位設計原則說明若某一欄位可由系統中取得或欄位間之運算求得則不應要求使用者再輸入(ie日期或時間..)主動提供預設值(Defaults)❹允許例外處理之修正(ie銀行放款客戶每月繳交固定本息…)各種不同形式之輸入欄位提示如何避免資料輸入錯誤@輸入資料之檢核(Data

Validation)避免垃圾進垃圾出(Garbage

In

Garbage

Out:GIGO

)@資料輸入錯誤之原因(Table

8-9)多輸入了額外之字元(Appending)遺漏了應輸入之字元(Truncating)輸錯了部分字元(Transcription)將二個字元之順序弄反(Transposing)10種確保輸入資料正確之技巧(Table

8-10)檢查欄位之類別屬性(文字、數值、…)欄位合理性檢核(某個人戶之水電使用度數為天文數值)是否為預期之資料值某些欄位值不准為空白(Missing

Data)是否滿足預定之格式資料值是否介於一區間範圍(ie考試分數)一致性檢查(某一類客戶其合理之手續費介於某一數值區間8)檢查碼計算(在原有資料上附加檢查碼)

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

(可避免輸錯了部分字元或二個字元之順序弄反)(計算範例1:Modulus

10(表8-15))Modulus

10

之計算範例(計算範例2:身分證統一編號(詳見附件))欄位長度檢查欄位值範疇檢驗發現資料輸入錯誤時之處理方式連線交易的環境下可即時回應批次作業時可將錯誤之輸入資料寫入流水檔中@流水檔還可做為稽核及檔案復原使用系統內部如何提供欄位檢查機制經由系統程式具備之功能(例如DBMS之內涵機能…)自行撰寫之模組三種常見之系統回應資料輸入之方式回應已處理完成或處理中之訊息(StatusInformation)提示操作人員應輸入之格式形態(Prompting

Cues)顯示錯誤或警告訊息(Error

or

Warning)系統回應訊息應避免使用技術性用語系統如何提供操作者Help

機制@Help機制之設計原則優質畫面vs.差勁畫面之設計不同種類與層次之Help

設計與範例4.螢幕畫面切換之流程設計@基本設計原則重要設計原則說明格式、機能、畫面呈現風格應力求一致性各種錯誤狀況之說明與處理允許使用者取消部分已處理之作業…..畫面切換流程設計之三個步驟Step

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

Diagram)(使用長方形符號內涵三項資料)流程圖之特色@每個畫面切換流程圖均包含編號、畫面名稱、回溯畫面@連結線不使用箭頭代表雙向流動@畫面切換流程圖和程式處理之邏輯相似繪製範例(流程圖中亦包含順序、選擇和迴路)個案探討:PVF公司四種主要作業機能畫面切換流程設計之三個步驟(續)Step

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

3:評估其可行