软体工程第六版第十二章实行使用者介面设计课件

軟體工程第六版第十二章 實行使用者介面設計1感谢你的观看2019年8月19軟體工程第六版第十二章 實行使用者介面設計1感谢你的观看2使用者介面設計o一棟房子的藍圖(它的架構設計)如果沒有呈現出門、窗和跟水、電及電話(還沒提到有線電視)等公共設施的連接時，它即為不完整的。o電腦軟體的門、窗和公共設施的連接組成一個系統的介面設計。o介面設計聚焦於三個所關心的區域：n軟體元件之間介面的設計n在軟體和其他的非人類資訊生產者與消費者之間(即其他的外部實體)的介面設計n人類(使用者)和電腦之間的介面設計。o本章中我們將專門聚焦於第三種介面設計的範疇n使用者介面設計(user interface design)。2感谢你的观看2019年8月19使用者介面設計一棟房子的藍圖(它的架構設計)如果沒有呈現出門使用者介面設計的重要性oBen Shneiderman在他經典的使用者介面設計書籍序文中說道：n挫折與焦慮是許多電腦化資訊系統使用者每日生活的一部份。n他們努力學習協助他們執行工作的命令語言(command language)或選單點選系統。n某些人會遭遇嚴重的電腦衝擊、對終端機的驚恐或網路經神官能症，使得他們盡量避免使用電腦化的系統。oShneiderman所提到的問題都是真實的。3感谢你的观看2019年8月19使用者介面設計的重要性Ben Shneiderman在他經典快速瀏覽o它是什麼？n使用者介面設計產生人類與電腦之間有效的通訊媒介。n根據一組介面設計原則，設計確認介面物件與動作，然後再創造形成使用者介面雛型的基礎螢幕配置。o誰完成它？n軟體工程師藉由利用廣泛被接受的設計原則所應用的反覆流程設計使用者介面。o它為何重要？n假如軟體難以使用、假如它迫使你出現錯誤、或者假如它使你完成目標的努力感到挫折，則不管它所展現的計算能力或功能多麼的好，你都不會喜歡它。n介面必須是正確的，因為它會形成使用者對軟體的感覺。4感谢你的观看2019年8月19快速瀏覽它是什麼？4感谢你的观看2019年8月19快速瀏覽o步驟為何？n使用者介面設計由確認使用者、任務和環境的需求開始。n一旦使用者任務被確認，使用者情境將被產生出來，以分析定義一組介面物件與動作。o這些形成創造螢幕配置的基礎，它描述圖形化的設計與圖示(icon)的安置、描繪螢幕文字的定義、視窗的規格與標題和主要與次要選單(menu)項目的規格。n使用工具設計出雛型與設計模型最終地實作，並且其結果以品質做為評估。5感谢你的观看2019年8月19快速瀏覽步驟為何？5感谢你的观看2019年8月19快速瀏覽o工作產品為何？n產生使用者情境，並創造出螢幕的配置。n介面的雛型以反覆的形式進行發展與修改。o我如何確定我所做的是正確的？n雛型是測試所主導的，使用者與測試主導所獲得的回饋做為雛型下一個反覆的修正使用。6感谢你的观看2019年8月19快速瀏覽工作產品為何？6感谢你的观看2019年8月19使用者介面設計的研究o圖形使用者介面、視窗、圖示和以滑鼠點選已經消除了大部分可怕的介面問題則是一件事實。n但在視窗世界中，我們全部都會遇到很難學的、很難用的、很困惑的、違反直覺的和不可原諒的使用者介面，它在許多情況下是令人沮喪的。n有些人花費時間與能量在建立這些介面，但建立者並不是故意產生出這些問題的。o如同處理技術的議題一樣，使用者介面設計要做許多關於人的研究。n誰是使用者？n使用者如何學習與一部以電腦為基礎的新系統互動？n使用者如何解釋系統所產生的訊息？n使用者對系統的期待是什麼？7感谢你的观看2019年8月19使用者介面設計的研究圖形使用者介面、視窗、圖示和以滑鼠點選已12.1 黃金規則oTheo Mandel 在他所寫的介面設計專書中，產生出三項黃金規則：n讓使用者處於控制中。n減少使用者的記憶負荷。n使介面一致化。o這些黃金規則實際上形成一組使用者介面設計原則的基礎，以指導此一重要的軟體設計動作。8感谢你的观看2019年8月1912.1 黃金規則Theo Mandel 在他所寫的介面設計12.1.1 讓使用者處於控制中o在一個重要的新資訊系統的需求蒐集會議期間，某位重要的使用者被詢問到關於視窗導向圖形化介面的特性。n使用者嚴肅地說：我真正想要的是一部可以讀取我心思的系統。在我想要執行它以前，它就知道我想要執行的事，讓它對我變得非常容易地執行。這就是全部，也就僅是這樣而已。9感谢你的观看2019年8月1912.1.1 讓使用者處於控制中在一個重要的新資訊系統的需求使用者處於控制中o第一反應是微笑著搖搖頭，但是暫停一下。n對使用者的請求是絕對沒有任何問題的。n她需要一個對她的需要產生反應的系統，並且協助她的工作得以進行。n她想要控制電腦，而不想要讓電腦控制她。o由設計者所強加於大多數介面上的侷限與限制意圖想要簡化互動的模式。n它是為了誰呢？o在許多情況中，設計者可能會引入侷限與限制以簡化介面的實作。n結果可能是一個很容易建立的介面，但使用上卻很蹩腳。10感谢你的观看2019年8月19使用者處於控制中第一反應是微笑著搖搖頭，但是暫停一下。10感Mandel的設計原則oMandel定義一些設計原則以讓使用者維持控制：n用不勉強使用者陷入不必要或不想要動作的方法定義互動的模式。o互動模式是介面目前的狀態。例如，n如果文件處理器選單中拼字檢查(spell check)被選取時，軟體會移往拼字檢查的模式。n如使用者想要順著這個方式進行少許的文字編輯工作，則沒有理由要勉強使用者駐留在拼字檢查的模式中。n使用者應該能夠以最簡單的方式進入與退出此模式。11感谢你的观看2019年8月19Mandel的設計原則Mandel定義一些設計原則以讓使用者Mandel的設計原則n提供有彈性的互動。o因為不同的使用者有不同互動方式的偏好，所以應該提供選擇。例如，n軟體可能讓使用者經由鍵盤命令、滑鼠移動、數位筆(digitizer pen)或語音辨識命令與使用者互動。n但每一項動作並非順應每一個互動的機制。n例如，考慮使用鍵盤命令(或語音輸入)畫出一張複雜圖形的困難性。n允許使用者互動可被中斷與可復原的(undoable)。o即使涉及一系列的動作，使用者應該能夠中斷此序列而執行其他的動作(而不遺失已執行的作業)。o使用者也應該能夠復原(undo)任何的動作。12感谢你的观看2019年8月19Mandel的設計原則提供有彈性的互動。12感谢你的观看2Mandel的設計原則n流線互動(streamline interaction)如同技巧層級提升一樣，允許互動可被客製化。o使用者時常會想找出他們重複地執行互動的相同序列。n於是設計一個巨集機制，使得進階使用者能客製化促進互動的介面是值得的。n對臨時的使用者，將技術隱藏於內部。o使用者介面應該帶領使用者進入應用程式的虛擬世界內。o使用者不應該察覺到作業系統、檔案管理功能或其他的晦澀難解的計算技術。o介面永遠不需要讓使用者與機器的內部層級進行互動。n例如，使用者不應該從應用軟體內鍵入作業系統的指令。13感谢你的观看2019年8月19Mandel的設計原則流線互動(streamline intMandel的設計原則n直接與螢幕上所出現的物件進行互動的設計。o當使用者操縱執行任務所必需要的物件時，若物件所發生的行為如同一個實際的東西一樣，則他就能感受到控制的感覺。n例如，一個允許使用者伸縮物件(按比例擴展其大小)的應用程式介面則是一個直接操作的實行。我總是希望我的電腦會和我的電話一樣地容易使用。我的希望已經實現。我不再知道該如何使用我的電話。Bjarne Stronstrup(C+的原創者)14感谢你的观看2019年8月19Mandel的設計原則直接與螢幕上所出現的物件進行互動的設計12.1.2 減少使用者的記憶負荷o使用者必須記憶得越多，系統將會有更多傾向錯誤的互動。n設計良好的使用者介面不會增加使用者記憶的負荷。n無論何時系統應該盡可能記得用貼切的資訊，並以互動的情境協助使用者回想。15感谢你的观看2019年8月1912.1.2 減少使用者的記憶負荷使用者必須記憶得越多，系統減少使用者記憶負荷的介面設計原則oMandel定義讓一個能夠減少使用者記憶負荷的介面設計原則：n減少對短期記憶的需求。o當使用者涉及複雜的任務時，短期記憶的需求是很顯著的。o介面應該設計成減少回想過去的動作與結果的需求。n可藉由提供視覺上的提示以讓使用者辨識出過去的動作來完成，而不要去回想它們。16感谢你的观看2019年8月19減少使用者記憶負荷的介面設計原則Mandel定義讓一個能夠減減少使用者記憶負荷的介面設計原則n建立有意義的內定值(defaults)。o最初設定值的集合對平均的使用者應該是有意義的，但一位使用者應該能夠指明其個別的偏愛。然而，應該具有一個重置(reset)的選項，以重新定義原始的內定值。n定義直覺式的捷徑。o當使用助憶符號(mnemonics)完成某個系統的功能時(例如，以alt-P鍵啟動列印功能)，助憶符號應該用容易記憶的方法與動作綁在一起(例如要喚回第一封信的任務)。17感谢你的观看2019年8月19減少使用者記憶負荷的介面設計原則建立有意義的內定值(defa減少使用者記憶負荷的介面設計原則n介面的視覺化配置應該以真實世界的象徵(metaphor)為基礎。o例如，一個帳單付款系統應該使用一本支票簿與支票登記簿的象徵方式指導使用者完成帳單付款流程。n這讓使用者能夠仰賴易於瞭解的視覺提示，而不是記住某個晦澀難解的互動順序。18感谢你的观看2019年8月19減少使用者記憶負荷的介面設計原則介面的視覺化配置應該以真實世減少使用者記憶負荷的介面設計原則n以漸進的形式揭露訊息。o介面應該以階層的方式組織。n有關於任務、物件或某些行為的資訊首先應該以高度的抽象化層級呈現。o當使用者以滑鼠選取指出其有興趣的地方時，再呈現出更多的細節。n一個許多文字處理應用程式的共同例子是劃底線的能力。此功能本身是文字型態(text style)選單下許多功能其中的一項。每個劃底線的能力並不表列出來。使用者必須要選取劃底線，接著所有劃底線的選項(例如，單底線、雙底線、虛底線)會出現。19感谢你的观看2019年8月19減少使用者記憶負荷的介面設計原則以漸進的形式揭露訊息。1912.1.3 使介面一致化o介面該以一致性的形式呈現與取得資訊。這意含著：n所有視覺化的資訊依據整個螢幕顯示所維護的設計標準來組織。n輸入機制侷限於一組一致使用於整個應用程式的有限的集合。n一致性地定義與實作從任務到任務的操縱機制。20感谢你的观看2019年8月1912.1.3 使介面一致化介面該以一致性的形式呈現與取得資訊輔助介面一致性的設計原則oMandel 定義一組設計原則以輔助介面的一致性：n讓使用者將目前的任務置於有意義的環境中。o許多介面實作數十個複雜的互動層級畫面。n提供使用者隨時知道目前工作環境的指示(例如，視窗名稱、圖形化的圖示、一致性的色彩編碼)。o使用者應該能夠決定他來自何處，且轉移至一個新的任務有什麼可替代方案存在。21感谢你的观看2019年8月19輔助介面一致性的設計原則Mandel 定義一組設計原則以輔助輔助介面一致性的設計原則n維持橫跨一系列應用程式的一致性。o一組應用程式(或產品)應該全部以相同的設計規則實行，使所有的互動得以維持一致性。n如果過去的互動式模型已經引起使用者的期望，除非有一個無法反駁的理由要這樣做，否則可以不做變更。o一但某個特別的互動順序已經變成事實上的標準(例如，使用alt-S做檔案儲存），使用者會在每個應用程式中期待此一動作。o一個改變(舉例來說，使用alt-S啟動計數)將會引起紊亂。22感谢你的观看2019年8月19輔助介面一致性的設計原則維持橫跨一系列應用程式的一致性。2可使用性(Usability)oLarry Constantine 提出一個與此主題有重要關係的問題：使用者到底想要什麼？，他這樣回答：n使用者真正想要的是好的工具。o所有的軟體系統，從作業系統和語言到資料登錄和決策支援應用程式，全部都只是工具。n終端使用者想要從我們為他們所設計的工具中，得到與我們使用工具一樣的期望。o他們想要容易學習的系統，並可協助他們執行工作。o他們不要會使他們的工作減緩的軟體、不會陷害或困惑他們，那的確較為容易犯錯，並且比較難以完成工作。23感谢你的观看2019年8月19可使用性(Usability)Larry Constanti可使用性的定義oConstantine主張可使用性並不是源自於美學、最新穎的互動機制或建立智慧的介面。n當介面的架構符合使用它的人的需要時就會發生。o可使用性的正式定義是有點不實際的。oDonahue與他的同事以下列的方法定義：n可使用性是衡量電腦系統在促進學習上有多好；協助學習者記得他們已經學得的；減少可能的錯誤；使他們能夠具有效率，並讓他們滿意這個系統。24感谢你的观看2019年8月19可使用性的定義Constantine主張可使用性並不是源自於可使用性評估o唯一用來決定可使用性是否存於你所建構系統中的方法是導入可使用性評估或測試。o觀察使用者與系統的互動並回答下列的問題：n當沒有持續不斷的說明或指示時，系統是否是可使用嗎？n互動的規則協助有知識的使用者能有效率地工作嗎？n當使用者變得更為有知識時，互動的機制會變得更為彈性嗎？n系統已經調整到它所被使用的實際與社會的環境中嗎？25感谢你的观看2019年8月19可使用性評估唯一用來決定可使用性是否存於你所建構系統中的可使用性評估n使用者會憂慮系統的狀態嗎？使用者隨時都知道他在何處嗎？n介面是以合乎邏輯與一致的方法所建構嗎？n橫跨整個介面的互動機制、圖示和程序都是一致的嗎？n互動能預先考慮到錯誤並協助使用者改正它嗎？n介面對所造成的錯誤是可容忍的嗎？n互動是否夠簡單？o如果這些疑問的每一個都被回答為是，則它很可能已經達成可使用性。26感谢你的观看2019年8月19可使用性評估使用者會憂慮系統的狀態嗎？使用者隨時都知道他在何12.2 使用者介面分析與設計o分析與設計使用者介面的整體流程是由產生系統功能不同的模型所開始(如同從外部感知)。n必要達成系統功能中以人(human-)及以電腦為導向的任務被劃出輪廓；n應用所有介面設計的設計議題被考慮；n使用工具設計雛型與最終地實作設計模型；n並由終端使用者對結果進行品質的評估。27感谢你的观看2019年8月1912.2 使用者介面分析與設計分析與設計使用者介面的整體流程12.2.1 介面分析與設計模型o當要進行一個使用者介面的分析與設計時，由四種不同的模型開始運作。n人因工程師(human engineer)(或軟體工程師)建立一個使用者模型(user model)。n軟體工程師產生一個設計模型(design model)。n終端使用者所發展一個經常被稱為使用者的心智模型(mental model)或系統覺知(system perception)的心智影像。n系統的實作者所產生的一個實作模型(implementation model)。o這些模型的每一個都有著顯著的差異。n介面設計者的角色是調解這些差異，而獲得一致的介面表示。28感谢你的观看2019年8月1912.2.1 介面分析與設計模型當要進行一個使用者介面的分析建立使用者模型o使用者模型建立系統終端使用者的輪廓。n要建立一個有效的使用者介面，所有的設計應該由瞭解預期的使用者的開始，包括他們的年齡、性別、身體上的才能、教育、文化的或種族上的背景、動機、目標和個性。29感谢你的观看2019年8月19建立使用者模型使用者模型建立系統終端使用者的輪廓。29感谢你使用者模型的分類o使用者可被分類成為：n初學者(novices)o通常沒有系統語法上的(syntactic)知識和少許應用程式或電腦使用的語意(semantic)知識。n有知識、間歇的使用者 o具有合理的應用程式語意知識，但必須要使用介面語法資訊的記憶力相對地很低。n有知識、頻繁的使用者o具有良好語意與語法的知識，時常導致power-user症候群(syndrome)，即找尋捷徑與簡化互動模式的個人。30感谢你的观看2019年8月19使用者模型的分類使用者可被分類成為：30感谢你的观看2019使用者的心智模型o使用者的心智模型(mental model)(系統感知能力)是終端使用者記在他們頭腦中的系統影像。n例如，如果某個頁面配置系統的使用者被要求描述它的操作，系統的感知(perception)將指導回應。o描述的準確度將依賴使用者的基本資料(例如，初學者充其量將提供一個概略的回應)，和在應用程式領域中對軟體整體的熟悉度。o一位完全瞭解頁面配置，但只在特定系統上操作過一次的使用者，實際上已經能夠比花費數星期嘗試學習系統的初學者，對它的功能提供更為完整的描述。31感谢你的观看2019年8月19使用者的心智模型使用者的心智模型(mental model)實作模型o實作模型結合以電腦為基礎系統(介面的外觀與感覺(look and feel)的外觀表現形式，聯繫所有支援的資訊(書、手冊、錄影帶、說明檔)以描述系統的語法與語意。n當實作模型與使用者的心智模型相符合時，使用者通常對軟體會感到非常舒適，並且可以有效地使用它。o為完成這個模型的結合，設計模型必須一直發展以調適包含在使用者模型中的資訊，並且實作模型必須要精確地反映有關介面語法與語意的有關資訊。32感谢你的观看2019年8月19實作模型實作模型結合以電腦為基礎系統(介面的外觀與感覺(lo使用者介面設計的關鍵元素o本節所描述的模型是使用者正在做的，或認為他正在做的，或別人認為當他使用互動式系統時他所應該做的事情的抽象化。n這些模型能使介面設計者滿足使用者介面設計最重要原則的一項關鍵元素：o認識使用者，瞭解任務。33感谢你的观看2019年8月19使用者介面設計的關鍵元素本節所描述的模型是使用者正在做的，12.2.2 流程o對於使用者介面的分析與設計流程是反覆的，並且可以使用螺旋形模型表示。o參考圖12.1，使用者介面分析與設計流程含括四種顯著的框架活動：n使用者、任務和環境分析與塑模。n介面設計。n介面建構(實作)。n介面確認。34感谢你的观看2019年8月1912.2.2 流程對於使用者介面的分析與設計流程是反覆的，並圖12.1 使用者介面設計流程 35感谢你的观看2019年8月19圖12.1 使用者介面設計流程 35感谢你的观看2019年8介面分析的聚焦o介面分析聚焦於與系統互動的使用者基本資料(profile)。n技巧的層級、商務的理解，和對新系統一般的接受能力(receptiveness)都會被記錄；n定義不同的使用者種類。n對於每個使用者類型，需求被誘引出來。o軟體工程師嘗試瞭解每一種使用者類型對系統的覺知(第12.2.1節)36感谢你的观看2019年8月19介面分析的聚焦介面分析聚焦於與系統互動的使用者基本資料(pr使用者環境分析o一旦一般的需求被定義後，一個更為詳細的任務分析被導入。n使用者執行以完成系統目標的那些任務則被確認、描述與細化(超過數回合反覆螺旋的次數)。o使用者環境的分析聚焦在實際的工作環境。在此間的問題則是：n介面將實際地設置在那裡？n使用者將是坐著、站著，或執行其他與介面無關的任務？n介面的硬體可以考慮到空間、光線或噪音的侷限？n有受環境因數所主導的特別人為因素(human factors)的考慮嗎？o蒐集做為分析活動一部分的資訊以利用來為介面產生出分析模型。n使用此一模型做為基礎，設計活動於是出現。37感谢你的观看2019年8月19使用者環境分析一旦一般的需求被定義後，一個更為詳細的任務分析介面設計的建構活動o介面設計的目的是定義一組介面物件與動作(和它們在螢幕上的呈現)，讓使用者用一種符合每個為系統所定義的可使用性目標的方法實行所有定義的任務。o建構活動通常由產生可評估使用情境的雛型開始。n當反覆設計的流程繼續時，使用者介面發展工具(請參閱在第12.4節的邊框)或許可利用來完成介面的建構。38感谢你的观看2019年8月19介面設計的建構活動介面設計的目的是定義一組介面物件與動作(和確認的聚焦o確認聚焦於：n正確地實作每位使用者任務的介面能力，調適所有任務的差異，並達成所有一般使用者的需求；n介面容易使用與容易學習的程度；n做為使用者工作上有用的工具時，他們對介面的接受度。o沒有需要在第一回合就嘗試指明每個細節(對於分析或設計模型)。n接下來的回合透過流程細化任務細節、設計資訊和介面的操作性能。39感谢你的观看2019年8月19確認的聚焦確認聚焦於：39感谢你的观看2019年8月1912.3 介面分析o所有軟體工程流程模型的重要的信條是：n在你嘗試設計解決方案之前，最好能先瞭解問題。o在使用者介面設計的情況，瞭解問題意味著瞭解：n將經由介面與系統互動的人(終端使用者)。n終端使用者必須要執行以完成他們工作的任務。n被呈現做為介面一部分的內容。n這些任務將被導入的環境。40感谢你的观看2019年8月1912.3 介面分析所有軟體工程流程模型的重要的信條是：40感12.3.1 使用者分析o每位使用者有一個心智影像或軟體的系統覺知，它或許與其他使用者所發展出來的心智影像不同。n使用者的心智影像或許與軟體工程師的設計模型有著極大的不同。o設計者能讓心智影像與設計模型趨於會合(converge)的唯一方法就是著手瞭解使用者他們自己和這些人將如何使用此一系統。41感谢你的观看2019年8月1912.3.1 使用者分析每位使用者有一個心智影像或軟體的系統使用者分析的資訊來源o可以使用來自廣泛來源的資訊以完成此目標：n使用者面談(User interviews)o最為直接的方式，面談來自軟體團隊中符合終端使用者的代表，以便更為瞭解他們的需求、動機、工作文化和無數的其他議題。o可由一對一的會議或經由聚焦群組(focus group)所完成。n銷售輸入(Sales input)o銷售人員定期與消費者及使用者見面，並且可以蒐集協助軟體團隊分類使用者，並更為瞭解他們的需求。n行銷輸入(Marketing input)o當提供瞭解每個部門如何以巧妙不同的方式使用軟體時，市場分析在市場部門的定義中可是無價的。n支援輸入(Support input)o支援人員每天都與使用者交談，讓他們成為什麼可行與什麼不可行、使用者喜歡什麼和他們討厭什麼、什麼性能會產生問題和什麼性能容易使用等資訊最可能的來源。42感谢你的观看2019年8月19使用者分析的資訊來源可以使用來自廣泛來源的資訊以完成此目標：協助介面設計者瞭解系統使用者的問題o下列的一組問題將協助介面設計者更為瞭解系統使用者：n使用者是受過訓的專業人士、技術人員、職員或製造工人？n使用者平均受正式教育的程度為何？n使用者有從書面教材學習的能力，或者他們已經表達了渴望在教室中訓練？n使用者是打字專家或鍵盤恐懼者(phobic)？n使用者社群的年齡範圍是什麼？n同一個性別中使用者是具有優勢的代表性？43感谢你的观看2019年8月19協助介面設計者瞭解系統使用者的問題下列的一組問題將協助介面設協助介面設計者瞭解系統使用者的問題n使用者對他們所執行的工作如何被補償？n使用者在正常的辦公時間內工作，或他們工作到工作做完為止？n軟體是一位使用者執行工作所不可或缺的一部分，或者只是有時候使用而已？n使用者之間主要的口語(spoken language)是什麼？n如果一位使用者使用系統而犯錯的結果是什麼？n使用者是系統所針對主題內容的專家嗎？n使用者想要知道隱藏在介面之後的技術嗎？44感谢你的观看2019年8月19協助介面設計者瞭解系統使用者的問題使用者對他們所執行的工作如12.3.2 任務分析與塑模o任務分析的目的是回答下列的問題：n使用者將在特定的環境中執行什麼工作？n當使用者工作時，將執行什麼任務與子任務？n當工作執行時，使用者將操縱什麼特定問題領域的物件？n工作任務的順序是什麼-工作流向？n任務的階層是什麼？45感谢你的观看2019年8月1912.3.2 任務分析與塑模任務分析的目的是回答下列的問題：分析使用者介面的技術o軟體工程師必須利用第7章與第8章所討論的分析技術到使用者介面。n使用案例(Use-cases)n任務細化(Task elaboration)n物件細化n階層的表示法46感谢你的观看2019年8月19分析使用者介面的技術軟體工程師必須利用第7章與第8章所討論的使用案例(Use-cases)n使用案例描述參與者(actor)(在使用者介面設計的環境中，參與者經常是一個人)與一個系統互動的方法。n當使用做為任務分析的一部分時，使用案例被發展以顯示一位終端使用者如何執行某些特定工作的相關任務。n在大多數的實例中，使用案例是以第一人稱非正式的型態(簡單的段落)所撰寫。47感谢你的观看2019年8月19使用案例(Use-cases)使用案例描述參與者(actor使用案例的範例o例如，如果一家小型的軟體公司想要為室內設計師明確地建立一個電腦輔助設計系統。n為了更為瞭解他們是如何執行他們的工作，要求真正的室內設計師描述特定的設計功能。48感谢你的观看2019年8月19使用案例的範例例如，如果一家小型的軟體公司想要為室內設計師明使用案例的範例o當被問到你如何決定該把家具放在房間內的那一個地方？時，室內設計師寫出以下的非正式使用案例：n我從描繪房間、大小和窗戶與門的位置平面圖開始。o當進入房間時，我非常重視關於光線的事、關於從窗戶看出去的景色(如果它很美，我會盡量引起對它的注意)、關於無阻檔(unobstructed)牆壁連續的長度、關於通過房間的動線(flow of movement)。o然後我會看看我的客戶與我已經挑選的家具列表n桌子、椅子、沙發、櫥櫃，特色(accents)列表、燈、地毯、畫、雕刻、植物、小件物品和我所提到我的客戶所想安置的任何欲望。n然後我依平面圖的比例使用樣版畫出我表列的每一個項目。o我使用鉛筆標示每個項目，因為我常會搬移東西。o我會考慮一些可供選擇的位置，並決定一個我最喜歡的。o然後，我畫出房間的演繹(rendering)(一張3D的圖片)給我的客戶以瞭解它的樣子。49感谢你的观看2019年8月19使用案例的範例當被問到你如何決定該把家具放在房間內的那一個使用案例的範例o這個使用案例提供給電腦輔助設計系統一個重要工作任務的基本描述。n經由它，軟體工程師能摘錄出任務、物件和互動的整體流向。n讓室內設計師滿意的系統附加功能也可以被構想出。n例如，房間中的每一扇窗戶都可以拍一張向外看的數位相片。o當房間被演繹時，真實的外部景象可以經由每一扇窗戶呈現。50感谢你的观看2019年8月19使用案例的範例這個使用案例提供給電腦輔助設計系統一個重要工作任務細化(Task elaboration)n第9章中討論過逐步的細化(也稱為功能分解或逐步的細化)做為對軟體要完成某些它想要功能所必要處理任務的改進機制。n介面設計的任務分析使用一種細化的方式，以協助瞭解使用者介面必須調適的人類活動。51感谢你的观看2019年8月19任務細化(Task elaboration)第9章中討論過任務分析的應用o任務分析可以兩種方式應用。n一種互動式的、以電腦為基礎的系統時常用來取代手動或半自動的活動。o為瞭解所必須實行以完成活動目標的任務，一位人因工程師(human engineer)必須要瞭解現代人目前所實行的任務(當使用手動的方式時)，然後在使用者介面的環境中，將這些映對到相似(但不必然是相同的)的任務組中實作。n人因工程師可以研究現有以電腦為基礎解決方案的規格，並獲得一組可以顧慮到使用者模型、設計模型和系統覺知(perception)的使用者任務。52感谢你的观看2019年8月19任務分析的應用任務分析可以兩種方式應用。52感谢你的观看20任務的定義與分類o不論對任務分析的整個方式，人因工程師首先必須定義與分類任務。o逐步(stepwise)細化的方式。n例如，假設一家小型的軟體公司想要為室內設計師明確地建構一個電腦輔助設計系統。o藉由觀察工作中的室內設計師，工程師注意到室內設計所組成的一些主要活動：家具陳設(注意先前所討論的使用案例)、織品與材質的挑選、牆壁與窗戶頂蓋的挑選、呈現(對客戶)、成本和採購。53感谢你的观看2019年8月19任務的定義與分類不論對任務分析的整個方式，人因工程師首先必須主要任務的細化o主要任務的每一項都可細化成子任務。n例如，使用包含於使用案例的資訊，家具陳設可以改進成為以下的任務：(1)基於房間的大小畫出平面圖；(2)在適當的位置放置窗與門；(3a)使用家具樣版在平面圖上畫出依比例的家具外形；(3b)使用特色物(accent)樣版在平面圖上畫出依比例的特色物。(4)挪動家具的外形與特色物的外形以得到最好的位置；(5)標示所有的家具與特色物的外形；(6)畫出容積範圍以顯示位置；(7)為客戶畫出透視的演繹景象。54感谢你的观看2019年8月19主要任務的細化主要任務的每一項都可細化成子任務。54感谢你的主要任務細化的說明o子任務1-7的每一項都能進一步的細化。o子任務1-6將可藉由操縱資訊和實行使用者介面中的動作執行。o子任務7可在軟體中自動地執行，並且造成少許的使用者互動。n此介面設計的模型應該用與使用者模型(典型的室內設計師的樣子)與系統覺知(室內設計師對自動化系統期待)相一致的方法調適這些任務的每一個。55感谢你的观看2019年8月19主要任務細化的說明子任務1-7的每一項都能進一步的細化。55物件細化o並非聚焦在一位使用者所必須實行的任務上，軟體工程師檢查使用案例，和其他獲自使用者和摘錄自室內設計師所使用實體物件的資訊。o這些物件可分類而成為類別。n每個類別的屬性被定義，並且應用到每個物件以提供設計者操作列表的動作會被評估。n例如，家具樣版可轉化成為一個可能具有包括size、shape、location和其他屬性而稱為Furniture的類別。o室內設計師將從Furniture類別中挑選(select)物件、將它移動(move)到平面圖上的一個位置(此環境中的另一個物件)，畫(draw)出家具外形等。o挑選、移動和畫的任務都是操作。o使用者介面分析模型可能不提供每個操作逐字的實作。然而，當設計被細化時，每個操作的細節則被定義。56感谢你的观看2019年8月19物件細化並非聚焦在一位使用者所必須實行的任務上，軟體工程師檢工作流向分析o當每個人都扮演著不同的使用者角色，並利用一個使用者介面時，有時候需要超越任務分析與物件細化，而應用工作流向分析。o這個技術可讓軟體工程師瞭解當許多人(與角色)參與時，工作流程是如何完成的。57感谢你的观看2019年8月19工作流向分析當每個人都扮演著不同的使用者角色，並利用一個使用工作流向分析範例o考慮一家想要完全自動化開藥方(prescribing)和遞送處方(prescription)藥品流程的公司。n整個的流程將圍繞在Web-based應用程式上思考，它可由醫師(physicians)(或他們的助理)、藥劑師和病人存取的。n工作流向可以有效地以UML泳道圖(活動圖的一種變化)表示。58感谢你的观看2019年8月19工作流向分析範例考慮一家想要完全自動化開藥方(prescri工作流向分析範例o考慮工作流程的一小部分：n當病人要求再裝填(refill)時，此情形於是發生。n圖12.2泳道圖指出上述所提及三個角色中每一個的任務與決定。n此資訊可能經由面談或每位參與者所撰寫的使用案例而誘引出。59感谢你的观看2019年8月19工作流向分析範例考慮工作流程的一小部分：59感谢你的观看20圖12.2 處方重裝填功能的泳道圖 60感谢你的观看2019年8月19圖12.2 處方重裝填功能的泳道圖 60感谢你的观看2019關鍵介面特性的辨認o事件的流向(如圖顯示)讓介面設計者辨認出三種關鍵的介面特性：n每位使用者經由介面實作不同的任務；o為病人所設計介面的外觀與感覺(look and feel)將不同於藥劑師或醫師所定義的。n為藥劑師與醫師設計的介面必須要能適應從次要資訊來源(例如，為藥劑師存取存貨，並為醫師存取有關於可替代藥物的資訊)的資訊存取與顯示。n在泳道圖中所提到的許多活動可以使用任務分析及/或物件細化o例如，裝填處方(fills prescription)可能意味著以郵購(mail-order)遞送、拜訪藥房或拜訪一間特別的藥品配銷中心而再進一步的細化。61感谢你的观看2019年8月19關鍵介面特性的辨認事件的流向(如圖顯示)讓介面設計者辨認出三階層的表示法o當介面分析後細化的流程於是發生。o一旦工作流向建立後，任務階層可為每個使用者型態而定義。o此階層獲自於為使用者確認每一項任務的逐步式細化。62感谢你的观看2019年8月19階層的表示法當介面分析後細化的流程於是發生。62感谢你的观看任務階層的表示範例o例如，考慮使用者任務要求一個處方重裝填。以下的任務階層被發展出來：n要求一個處方重裝填o提供識別資訊n指明姓名n指明useridn指明PIN與密碼o指明處方數目o指明裝填所需要的日期o完成請求一個裝填處方的任務，三項子任務都被定義。n這些子任務中提供識別資訊的那一個，被進一步細化成為三個附加的子-子任務(sub-subtasks)。63感谢你的观看2019年8月19任務階層的表示範例例如，考慮使用者任務要求一個處方重裝填。以12.3.3 顯示內容的分析o現代的應用程式，內容顯示的範圍可以從以字元為基礎的報表(例如試算表)、圖形化的顯示(例如，長條統計圖、3-D模型、一張人的照片)或特定的資訊(例如，聲音或影像檔案)。o分析模型技術確認由一支應用程式所產生的輸出資料物件。這些資料物件可能是：n由應用程式其他部分的元件(與介面無關的)所產生。n獲取自儲存於資料庫中應用程式可存取的資料。n從系統外部傳送給詢問中的應用程式。64感谢你的观看2019年8月1912.3.3 顯示內容的分析現代的應用程式，內容顯示的範圍可應回答的內容格式與美學問題o介面分析步驟期間，內容的格式與美學(當由介面顯示時)應加以考慮。這些問題中必須要提出與回答的是：n不同的資料型態被指派在螢幕上一致的地理位置上(例如，相片總是出現在右上的角落)嗎？n使用者可以為內容客製化螢幕的位置嗎？n指派給螢幕上所有的內容適當的識別符號嗎？n如何分割一份很大的報表以便更容易地瞭解？n將蒐集的大量資料直接地移往摘要資訊的機制是有效的嗎？n圖形化的輸出將可依比例適用於所使用顯示裝置的界限中嗎？n如何使用色彩以增強理解？n錯誤訊息與警告將如何呈現給使用者？o當這些(和其他的)問題的每一個都被回答時，內容呈現的需求就被建立完成。65感谢你的观看2019年8月19應回答的內容格式與美學問題介面分析步驟期間，內容的格式與美學12.3.4工作環境的分析oHackos與Redish在討論工作環境分析的重要時，他們說道：n人們不再孤立地執行他們的工作。他們被圍繞著他們的活動所影響，工作場所的實際特性、他們所使用的設備型態和他們與其他人的工作關係。如果你所設計的產品不能適用於環境中，他們使用時將會覺得很困難或感到很沮喪。n在某些應用程式中，以電腦為基礎系統中的使用者介面被置於使用者親和的位置(例如，合宜的亮度、良好的顯示高度、容易取得鍵盤)，但是其他的(例如，工廠樓層或飛機駕駛員座艙(cockpit)照明可能會是次佳化的(sub-optimal)、噪音可能是一項要素、鍵盤或滑鼠可能不會是選項、顯示器的安置可能不是太理想。介面設計者可能由於減輕違反使用容易的因素而受到侷限。66感谢你的观看2019年8月1912.3.4工作環境的分析Hackos與Redish在討論o除了實際的環境因素外，工作場所的文化也會起作用。系統互動可用一些方法量測嗎(例如，每個交易的時間或交易的準確性)？在輸入提供之前，二人或更多人必須共享資訊嗎？支援將如何提供給系統的使用者？這些與許多相關的問題應該在介面設計著手前先被回答。67感谢你的观看2019年8月19除了實際的環境因素外，工作場所的文化也會起作用。系統互動可用12.4 介面設計步驟o一旦介面分析完成，終端使用者需要的所有任務(或物件與動作)已經被詳細地確認，並且介面設計的活動著手進行。o就像所有的軟體工程設計，介面設計是一種反覆的流程。每個使用者介面設計步驟發生相當多次，每次細化與改進的資訊在前述的步驟中被發展。68感谢你的观看2019年8月1912.4 介面設計步驟一旦介面分析完成，終端使用者需要的所有組合使用者介面設計模型步驟o雖然有許多不同的使用者介面設計模型都已被提出，但全部都建議由以下的一些步驟所組合：n使用在介面分析(第12.3節)期間所發展的資訊，定義介面物件與動作(操作)。n定義將造成使用者介面狀態改變的事件(使用者動作)。模型化這些行為。n如同它將真實地呈現給終端使用者看一樣，描述每個介面的狀態。n指出使用者如何從介面所提供的資訊解譯系統的狀態。69感谢你的观看2019年8月19組合使用者介面設計模型步驟雖然有許多不同的使用者介面設計模型設計者的設計任務o在某些情況中，介面設計者可以從描繪每個介面狀態(即在不同的環境中使用者介面看起來像什麼)開始，然後往回進行定義物件、動作和其他重要的設計訊息。o不管設計任務的順序，設計者必須：n總是遵循著黃金規律。n塑模將被實作的介面。n考慮所使用的環境(例如，顯示技術、作業系統、發展工具)的使用方式。70感谢你的观看2019年8月19設計者的設計任務在某些情況中，介面設計者可以從描繪每個介面狀12.4.1應用介面設計步驟o介面設計的一個重要步驟是定義介面物件和應用到它們的動作。o採用剖析使用案例的方法。n撰寫使用案例的描述。n名詞(物件)與動詞(動作)被區隔以產生一個物件與動作的列表。o一旦物件與動作已被定義並反覆地細化後，它們藉由型態而被分類。n目標、來源和應用程式物件都已確認。71感谢你的观看2019年8月1912.4.1應用介面設計步驟介面設計的一個重要步驟是定義介來源物件與目標物件o一個來源物件(source object)(例如報表圖示)被拖曳與放置在目標物件(target object)上(例如印表機圖示)。n此一動作的意涵是產生一份實體報表。72感谢你的观看2019年8月19來源物件與目標物件一個來源物件(source object)應用程式物件(application object)o應用程式物件(application object)表示應用程式特定的資料，此資料做為螢幕互動的一部分，但並不被直接操縱。n例如，郵件列表是用來儲存郵件的名字。此列表本身可以被分類、合併或清除(以選單為基礎的動作)，但它不經由使用者互動的拖曳與置放。73感谢你的观看2019年8月19應用程式物件(application object)應用程式螢幕配置o當設計者滿意於所有已經被定義的重要物件與動作(一次設計反覆)，螢幕配置(screen layout)則實行。n螢幕配置是一個互動的流程，它導入圖形設計與圖示安置、描寫螢幕主題的定義、規格與視窗命名和主要與次要選單項目的定義。n如果一個真實世界的譬喻對於此應用程式是相稱的，此時它是明確具體的，且配置可以採取與此譬喻相配的方式來組織。74感谢你的观看2019年8月19螢幕配置當設計者滿意於所有已經被定義的重要物件與動作(一次設安全家系統的使用情境o為了提供先前所提及設計步驟的簡短說明，我們為安全家系統考慮一個使用情境(在先前的章節中討論過)。o介面的初步使用案例(由屋主所寫的)如下：n初步的使用案例：o我想從任何遠端的位置經由網際網路存取我的安全家系統。o在我的筆記型電腦(當我在工作或旅行時)上使用瀏覽器軟體，我可決定：n警報系統的狀態；n設定(arm)或解除設定(disarm)系統；n重新組態安全區域；n經由預先設定的攝影機觀看房子裡的不同房間。75感谢你的观看2019年8月19安全家系統的使用情境為了提供先前所提及設計步驟的簡短說明安全家系統的使用情境o為從遠端的位置存取安全家，我提供一個識別號碼與密碼。n這些定義存取的層級(例如並不是所有的使用者都可以重新組態系統)並提供安全性。n一旦確認，我可以檢查系統的狀態並藉由設定或解除安全家來改變狀態。我可以藉由顯示房子的平面圖、檢視每個安全的感測器、顯示每個目前組態的區域和必要時修改區域來重新組態系統。我可以經由策略上所放置的攝影機觀看房子的內部。我可搖攝(pan)與縮放(zoom)每台攝影機以提供不同的室內景象。76感谢你的观看2019年8月19安全家系統的使用情境為從遠端的位置存取安全家，我提供確認屋主的任務、物件和資料項目o基於此一使用案例，以下屋主的任務、物件和資料項目被確認出：n存取安全家系統n鍵入身分識別(ID)和密碼(password)就可遠端存取n檢查系統的狀態n設定或解除安全家系統n顯示平面圖與感測器位置77感谢你的观看2019年8月19確認屋主的任務、物件和資料項目基於此一使用案例，以下屋主的任確認屋主的任務、物件和資料項目n顯示平面圖上的區域n改變平面圖上的區域n顯示平面圖上的攝影機位置n選擇觀看的攝影機n觀看影帶影像n搖攝或縮放攝影機78感谢你的观看2019年8月19確認屋主的任務、物件和資料項目顯示平面圖上的區域78感谢你的o物件(黑體字)與動作(加底線的文字)由屋主任務的列表中所摘錄出。n大多數所提到的物件是應用程式物件。o攝影機位置(一個來源物件)可拖曳與放置在一個攝影機(一個目標物件)以產生一個影帶影像(一個包含影像顯示的視窗)。79感谢你的观看2019年8月19物件(黑體字)與動作(加底線的文字)由屋主任務的列表中所摘錄建立影像監看螢幕規劃o建立(圖12.3)初步的影像監看螢幕規劃的素描。n為了召喚視訊影像，一個攝影機位置圖示C，選擇設置在監看視窗顯示的平面圖。n一架在客廳的攝影機位置LR，接著拖曳與放置在螢幕左側部分的攝影機圖示上。n影像攝影視窗出現，播著來自位於客廳(LR)攝影機的不間斷影像。n縮放與轉動控制鈕用於控制拍攝影像的放大與方向。n為選擇來自另一台攝影機的某個檢視，使用者只是簡單的拖曳與置放一個不同的影機的位置圖像進入螢幕左側攝影機圖像中。n配置素描所顯示的必須在選單列中做為每個畫面項目展延的輔助，指示什麼行動對影像監看模式(狀態)是有效的。o在使用者情境中對每個屋主任務顯著的一組完整的素描可在介面設計期間建立。80感谢你的观看2019年8月19建立影像監看螢幕規劃建立(圖12.3)初步的影像監看螢幕規劃圖12.3 初期的螢幕配置81感谢你的观看2019年8月19圖12.3 初期的螢幕配置81感谢你的观看2019年8月1912.4.2 使用者介面設計模式o精巧的圖形化使用者介面已變得如此普遍，這使得各種的使用者介面設計模式逐一出現。o設計模式是個抽象的東西，它對一個特定的、區隔良好的設計問題規定其設計解決方案。o呈現在邊框的每一個範例模式(和每個種類中的所有模式)也都有完整的元件層級設計，包括設計類別、屬性、操作和介面。82感谢你的观看2019年8月1912.4.2 使用者介面設計模式精巧的圖形化使用者介面已變得使用者介面模式oTidwell與vanWelie提供使用者介面設計模式的分類法，並將它們組織成10種類型。n整體的Ul：提供上層結構的設計指導與導航。o模式：頂層的導航(top-level navigation)。n簡要描述：提供一個上層的選單，經常是與標識或識別圖聯繫，它可直接導航到系統中的任何一個主要的功能。n頁面配置：針對頁面(為網站)一般的組織或與其他不同螢幕顯示(為互動式應用程式)。o模式：卡片疊(card stack)。o簡要描述：提供一疊貼上標籤卡片的外觀，每個都可由滑鼠點擊而選擇，並且每個都表示特定的子功能或內容種類。83感谢你的观看2019年8月19使用者介面模式Tidwell與vanWelie提供使用者介面使用者介面模式n表格與輸入(Form and input)：考慮各種設計技術以完成表格層級的輸入。o模式：填寫空白欄(fill-in-the-blanks)。o簡要描述：讓字母的資料填入一個文字方塊中。n表格(Tables)：提供產生與操縱所有類型表格資料的設計指導。o模式：可分類的表格(sortable table)。o簡要描述：顯示很長的記錄列表，它可藉由選擇一個觸發器(toggle)機制，以任何行(column)的標記分類。84感谢你的观看2019年8月19使用者介面模式表格與輸入(Form and input)：考使用者介面模式n直接資料操縱(Direct data manipulation)：針對資料編輯、修改和轉態。o模式：麵包屑(bread crumbs)。o簡要描述：當使用者正工作於複雜的頁面或螢幕顯示時，提供一種完整的導航路徑。n導航(Navigation)：協助使用者階層的選單、網頁和互動式顯示螢幕中導航。o模式：即位編輯(edit-in-place)。o簡要描述：在它所顯示的位置上提供簡單的文字編輯能力給某些內容的類型。85感谢你的观看2019年8月19使用者介面模式直接資料操縱(Direct data mani使用者介面模式n導航(Navigation)：協助使用者階層的選單、網頁和互動式顯示螢幕中導航。o模式：即位編輯(edit-in-place)。o簡要描述：在它所顯示的位置上提供簡單的文字編輯能力給某些內容的類型。n搜尋(Searching)：透過網站中所維護的訊息，或包含一個可經由互動式應用程式存取的持續資料的儲存，而能夠進行特定內容的搜尋。o模式：簡單的搜尋(simple search)。o簡要描述：提供以字母字串所描述的簡單資料項目來搜尋一個網站或持續資料來源的能力。86感谢你的观看2019年8月19使用者介面模式導航(Navigation)：協助使用者階層的使用者介面模式n頁面元素(Page elements)：實作一個網頁或顯示螢幕的特定元素。o模式：精靈(wizard)。o簡要描述：帶領使用者一次一步地通過複雜的任務，提供經由簡單視窗顯示的指導來完成一系列的任務。n電子商務(E-commerce)：特別是針對網站的，這些模式實作電子商務應用程式的重複(recurring)元件。o模式：購物車(shopping cart)。o簡要描述：提供選擇購買的項目列表。87感谢你的观看2019年8月19使用者介面模式頁面元素(Page elements)：實作一使用者介面模式n其他的：不容易符合前述任一個模式種類。某些情況中，這些模式是領域依賴的(domain dependent)或只為特別的使用者類別而發生的。o模式：進展指示器(progress indicator)o簡要描述：當操作正在進行時，提供一個進展的指示。88感谢你的观看2019年8月19使用者介面模式其他的：不容易符合前述任一個模式種類。某些情況12.4.3 設計議題o當使用者介面設計演進時，會出現四個普遍的設計議題：n系統的回應時間n使用者說明(help)設施n錯誤訊息處理n命令標記(command labeling)。o許多設計者直到設計流程的末期(直到操作的雛型有效前，有時第一個問題的跡象(inkling)是不會發生的)都沒有針對這些議題。n不必要的反覆、計畫的延遲和消費者的受挫則是經常發生的。n最好在軟體設計開始且改變還很容易、費用很低時，建立所要考慮的每一個設計議題。89感谢你的观看2019年8月1912.4.3 設計議題當使用者介面設計演進時，會出現四個普遍回應時間(Response time)o系統回應時間是許多互動式應用程式的主要抱怨。o系統回應時間的量測是從使用者執行某些控制動作n例如，按下返回鍵(return key)或以滑鼠點一下的時間點開始，到軟體對所要的輸出或動作產生回應為止。90感谢你的观看2019年8月19回應時間(Response time)系統回應時間是許多互動系統回應時間的特性o系統回應時間有兩個重要的特性：長度與變異性(variability)。n如果系統回應時間太長，使用者的挫折與壓力是不可避免的結果。n變異性根據平均回應時間的偏差，在許多方式中