作業: 設計使用者介面
這項作業說明如何進行 GUI 設計,並強調可用性。
規範: 分析 設計
目的
  • 設計出可以支援推論及加強可用性的使用者介面
關係
角色主要執行者: 其他執行者:
輸入強制: 選用:
輸出
流程用法
主要說明

設計使用者介面時,請記得在需求界定期間建立的任何分鏡腳本、專案特有準則中的使用者介面準則,以及任何現有的使用者介面原型。如果在進行這項作業後發現需要修正「分鏡腳本」,這些更新會由系統分析師執行(請參閱作業:找出關係人需求)。

步驟
說明相關使用者的特性

說明會和系統互動,以執行在現行反覆作業中考慮的需求之(人員)使用者的特性。這裡的重點是要說明主要使用者,因為大部分的互動都是和這些使用者有關。這項資訊對後續的步驟極為重要。

和「系統分析師」合作,以決定是否需要變更參與者說明,來反映特性說明。如需詳細資料,請參閱工作成果準則:參與者、特性

指出主要使用者介面元素

檢查在現行反覆作業中考慮的需求(特別是任何使用案例及/或分鏡腳本),找出系統使用者介面的主視窗。這裡所說的「主視窗」是指使用者最常進行互動的視窗(使用者對系統的印象之中心使用者介面元素)。主視窗中包含功能表,並且也可能包含子視窗或表單。主視窗是使用者來回瀏覽的視窗。非主視窗可能會成為主視窗的一部分。

主要的主視窗應該是當使用者啟動應用程式時,所開啟的視窗。此視窗在應用程式執行期間會維持開啟,並且是使用者進行大部分「使用時間」的地方。由於這個視窗會維持開啟,並且它是使用者和系統的第一個接觸點,因此這個視窗是加深使用者對系統的印象的最重要工具。主要的主視窗通常稱為「首頁」。

如果使用者介面元素需要一起顯示,或是與其他使用者介面元素具有空間相關關係,就嘗試將使用者介面元素組合在相同的主視窗中。不過,由於螢幕大小的關係,並不一定能做到這一點。請注意,平均物件大小是這個步驟的重要輸入,因為這會指出一次大約需要顯示多少物件。物件太多時,可能表示物件無法全部出現在同一個視窗中;因此某個主視窗可能包含物件的精簡呈現,再針對每個物件(或一組物件)定義別的主視窗。

以下是對主視窗的一些建議:

  • 構成使用者對系統印象的重要視窗
  • 使用者會使用大部分時間的視窗
  • 提供初始使用案例的視窗

請記得這裡的目標是要將主視窗數目和在主視窗之間瀏覽的途徑減到最少。

定義導覽圖

依據所指出的一組主視窗以及分鏡腳本,定義系統的導覽圖

「導覽圖」中應該包括主要的使用者介面元素以及元素的導覽途徑。它不需要包含通過使用者介面元素的所有可能途徑,只要主要路徑即可。這裡的目標是要讓「導覽圖」作為系統使用者介面的藍圖。

在「導覽圖」中最明顯的候選「頂層」使用者介面元素是主要的主視窗(使用者使用大部分時間的視窗)。

「導覽圖」應該要清楚指出使用者需要「按幾次」,才能進入特定的畫面或功能。通常您會希望只要在主視窗按一次,就立即到達應用程式的最重要區域。視窗的導覽途徑若太長時,除了會增加不必要的互動額外負荷外,也很可能會導致使用者在系統中迷失方向。理想的狀況是所有視窗都可以從主要的主視窗開啟,因此視窗導覽長度最多只有兩個。請嘗試避免視窗的導覽長度超過三個。

「導覽圖」也應該符合及反映如專案特有準則中記載的系統使用者介面用法隱喻。

「導覽圖」可以採用多種呈現方式。以下是一些範例:

  • 階層式「目錄樹」圖,圖解的每一層顯示要到達特定的使用者介面元素時,所需的滑鼠點按次數
  • 開放式圖形,其中包含自訂圖示
  • UML 類別圖,其中的類別是供使用者介面元素使用,關聯則供導覽途徑使用

究竟要選擇使用哪一種呈現法,會在專案特有準則中指定。

詳述使用者介面元素的設計

到這時,就已經完成高階的使用者介面設計:

  • 已經指出主視窗。
  • 已經定義使用者介面元素及其導覽途徑(導覽圖)。

因此現在可以執行使用者介面元素的詳細設計。以下是設計使用者介面元素時的不同層面。這些會在以下逐一說明:

設計主視窗的視覺呈現

主視窗的視覺呈現以及特別是主視窗本身,會對系統的可用性有重大影響。此視覺呈現的設計是要決定需要呈現包含的使用者介面元素的哪些部分(內容)。可以使用事件的分鏡腳本流程,來協助所要顯示的內容優先順序。如果使用者需要看到使用者介面元素的許多不同內容,您就可以實作主視窗的多個視圖,每一個視圖呈現一組不同的內容。設計此種視覺呈現時,也表示您需要使用所有視覺化維度,查看包含使用者介面元素的內容應該如何呈現。如需詳細資料,請參閱準則:使用者介面(一般)中的「視覺化維度」一節。

如果可能的話,盡量嘗試在各個元素中,找出要顯示在主視窗上的「公分母」。在某些維度中呈現出共同起源,讓使用者可以將元素串連起來,並看出其中的型樣。如此就可以大幅提高使用者介面的「頻寬」。

範例:

假設您有一個客戶服務系統,您要在其中顯示下列層面:

  • 客戶在一段時間的抱怨和問題
  • 客戶在一段時間採購的產品
  • 客戶在一段時間的發票金額

這裡,公分母就是「時間」。因此,在相同的水平時間軸上並列顯示抱怨/問題、採購及發票,可以讓使用者看到這些項目的關聯型樣(如果有相關聯的話)。

設計主視窗的使用者動作

這裡是決定如何「實作」使用者動作,以便從主視窗啟動使用者動作的地方。通常主視窗的使用者動作會提供作為功能表列中的功能表項目,並且也會透過蹦現功能表和工具列,提供作為替代的和補充功能。

針對每個主視窗定義功能表及功能表選項。例如,在文件編輯器中會有一個「編輯」功能表,用來集合諸如剪下、複製等具有凝聚性的作業。

某些使用者動作可能需要和使用者進行複雜的互動,因此就具備擁有次視窗的條件。例如,在文件編輯器中的「文件」處會有一個「列印」作業,而由於列印作業的複雜互動關係,因此需要一個個別的對話框。

如果要在視窗中呈現大量物件,就需要設計使用者動作涵蓋這些物件。以下是這種使用者動作的一些範例:

  • 搜尋多個物件
  • 排序多個物件
  • 瀏覽多個物件的階層
  • 選取多個物件

如需詳細資訊,請參閱準則:使用者介面(一般)

設計各種特性

新增必要的動態行為至使用者介面。大部分的動態行為都是由目標平台提供,像是選取作業參照範例、按兩下加以開啟、按滑鼠右鍵出現蹦現功能表等。不過,您還是需要做一些決定,包括:

  • 如何支援視窗管理
  • 要儲存哪些階段作業資訊,如輸入游標位置、捲動軸位置、開啟的視窗、視窗大小、相對的視窗位置等,到下一個階段作業
  • 要在主視窗支援單一或多重文件介面(SDI 或 MDI)

同時也要評估可以加強可用性的其他共通特性,包括:

  • 是否要提供「線上說明」,包括「精靈」
  • 是否要有「還原」作業,讓系統更便於探索
  • 是否應該提供「代理程式」,來監視使用者事件並積極建議動作
  • 是否應該提供「動態標示」,將關聯視覺化
  • 是否應該支援使用者定義的巨集
  • 是否有特定的區域可讓使用者配置

如需詳細資訊,請參閱準則:使用者介面(一般)

詳細資訊