上一篇關於 Dialog 的文章中，我們跟你介紹了對話框重要的無障礙功能、操作方式與 ARIA 屬性等在製作對話框的時候，需要從開發方面重視的要點。
在這篇文章中，我們將從設計與使用者體驗的角度來介紹對話框可以考量哪些部分來提升整體的使用者體驗。
eBay 的設計系統將對話框分成兩種主要形式：
- 被使用者的行為所觸發的對話框：使用者點擊按鈕而觸發的對話框
- 系統觸發的對話框：自動被系統打開的對話框
以大家常用的線上產品為例來舉一些常見的對話框應用場景與案例：
A. 被使用者的行為所觸發的對話框
- 確認刪除對話框
- 創建新的資料夾的對話框
B. 系統觸發的對話框
- 系統自動登出使用者後出現的對話框
不論是哪一種類型，對話框都是會打斷使用者當前行為、尋求使用者高度關注的表現形式，因此在使用時也必須要留意這個特性。
關於對話框更多的特性、優缺點，以及如何決定在合適時機使用對話框或其他元件，推薦閱讀以下這篇文章獲得更深入的解析：Modal & Nonmodal Dialogs: When (& When Not) to Use Them
1. 決定進入對話框時焦點所在位置
在上一篇Dialog文章的時候，我們提到：
- 當對話框被開啟時，焦點應自動移動到對話框中的元素上
- 初始焦點的設定和可訪問性描述可能會依據情況而有所不同
作為設計師，我們需要關心初始焦點要放在哪一個元素上，這可以為所有的使用者提供一個具有邏輯性的預設選項，也可以快速地讓螢幕閱讀器使用者和鍵盤使用者開始進行需要的動作。
那麼，具體而言我們應該如何決定初始焦點呢？這邊我們舉兩個大設計系統的設計原則給大家做參考：
IBM的設計系統: 根據對話框類型不同而不同
- 基本上初始焦點都會在對話框中的按鈕上
- 例外是只有當對話框中有輸入框時，焦點會在輸入框上，而設計師必須在設計稿中標註出來讓工程師知道
- 被動型的（無按鈕的）對話框只有一個關閉按鈕，因此可以將焦點放在關閉按鈕上
- 一般需要使用者做確認的對話框上，不論有幾個按鈕都應該將焦點放在Primary按鈕上
- 具有毀滅性的按鈕（例如確認是否刪除資料），則應該將焦點放在取消按鈕上
Salesforce：根據場景決定
Salesforce的決策則比較複雜。在他們 Global Focus Guidelines 中其實有提到他們如何去決定初始焦點，我們根據原內容將他們的決策過程做成決策樹供大家參考：
簡單而言有幾個重點：
- 可以選擇聚焦在第一個可互動的元素、關閉按鈕或是Header上
- 當第一個可互動元素為 Tooltips（輔助性的互動元素）時就不算
2. 提供多種離開對話框的管道
在上一篇文章中，我們提到幾個關於離開對話框時常見的錯誤，例如沒辦法使用 Escape 鍵來關閉對話框。
所以在設計或使用對話框時，我們也要留意要提供給使用者合適的離開管道。
正如前文所述，對話框的出現會打斷使用者現在的行為，也因為對話框會限制使用者與頁面其他部分的互動，也因此當使用者想要離開系統彈出的對話框時，我們也應該提供相應的合理管道來幫助使用者。
在 Workday 設計系統中例舉了常見的離開對話框的方法：
- 使用鍵盤上的 Esc 鍵
- 在對話框下方出現的「取消」按鈕
- 在對話框上方出現的「關閉」按鈕（通常顯示為「X」）
- 點選除了對話框之外的空白區域
我們會鼓勵設計師可以考慮在一個對話框中設計多種的離開方式，因為每個人習慣離開對話框的方式不同，在可能的範圍下，我們會鼓勵提供多種的方式來增加使用者的自由度，以及確保不同操作方式的使用者都可以有效地離開。
當然，這也必須考慮設計情境與具體案例，例如雖然「取消」和「關閉」都是離開對話框，但是其內含的意義可能有所不同。對這個話題有興趣的話，可以參考這篇 nn/g 的 Cancel vs Close: Design to Distinguish the Difference 的文章獲得更多的資訊。
3. 提供清晰易懂的對話框標題
有一個清晰易懂的標題不但可以讓所有使用者更快速且容易地理解，有些螢幕閱讀器在打開對話框時也會先報讀出標題內容，因此對於增加易用性與無障礙都是至關重要的設計考量點。
以下是一個簡單的原則：
- 提供對話框一個標題，並且可以在螢幕上顯示出標題
- 提供清晰、簡潔易懂的標題文字
雖然在中文中較少有 Content Design 相關的內容，但是我們也可以參考英文的設計原則來思考。
Shopify 的設計系統有提到他們的對話框標題遵循幾個原則：
- 提供具有行動指導性的內容
- 使用清晰的動詞加名詞的文體
好的標題：
- 要刪除這個對話嗎？
- 編輯聯絡人
- 要離開這個頁面嗎？
不好的標題：
- 你真的確定要刪除這個對話嗎？
- 編輯這個聯絡人的資訊
- 確定離開？
尤其是上文提到的由系統觸發的對話框，因為不是由使用者的行為所觸發的，往往在彈跳出來的時候對使用者而言都是沒有任何脈絡的，這時候除了提供適當的可訪問名稱之外，標題內容設計也會深刻影響使用者理解對話框的效率，進而促進使用者能夠更有效地跟產品互動喔！
