Win7: Windows 7 らしい UX(TaskDialog 編)

エンタープライズ分野でも Windows 7 対応アプリケーションが増えてきました。
ただ、ほとんどが互換性を重視するもので、UX も、Windows 7 に最適化されているものではなく
ちょっと残念な気がします。

そこで、ほんのちょっとの変更で、Windows 7 らしい UX に対応できる Tips をいつくか紹介しようと
思います。まずは、TaskDialog を紹介します。
(ちなみに、TaskDialog は、Windows Vista からサポートされています)

そもそも、TaskDialog ってなんだ?ってことになるのですが、一言で言えば、ゴージャスなメッセージボックスです。
いや、まじめに書きます。

タスクダイアログですが、Vista 以降、メッセージボックスに置き換わるものとして提供されています。
メッセージボックスは単純なユーザー応答(はい/いいえ/キャンセル)だけを求めるものでしたが、
タスクダイアログは、もっと幅広くユーザーからの情報を収集するために使用するという位置づけになりました。
(これもエクスペリエンスの 1 つです)
要は、”メッセージボックス以外の機能であれば、ダイアログを開発者が作ってね”というものを
”OS 機能として提供するから使ってね”ということです。

まずは、お馴染みのメッセージボックスから。

コード例
MessageBox(hWnd,
    TEXT("今日の天気は、晴れですか?"), TEXT("メッセージボックスの例"),
    MB_YESNO | MB_ICONQUESTION);

次にタスクダイアログです。例としては、良くありませんが、こんな UI です。

コード例
int nRes = 0;
TaskDialog(
    hWnd, _Module.GetResourceInstance(),
    TEXT("タスクダイアログの例"),
    TEXT("今日の天気を教えてください"),
    TEXT("今日の天気は、晴れですか?"),
    TDCBF_YES_BUTTON | TDCBF_NO_BUTTON,
    TD_INFORMATION_ICON,
    &nRes);

これだけだと、単に MessageBox が TaskDialog に変わっただけなので、少し TaskDialog らしくします。

メッセージボックスと比べるとずいぶんと見た目も変わりました。
メッセージボックスの例では、晴れですか?の質問に対して「はい」「いいえ」だけの応答でしたが
タスクタイアログでは、天気の種類を問うことができるようになりました。

ここに(MFC の説明ですが)タスクダイアログの画面説明が記載されていますので、参考になります。

次は、実装方法についての情報です。上記のタスクダイアログの例で、TaskDialog() という API を使っています。

この API では、MessageBox() と同じくらいのお手軽さでタスクダイアログを表示することができます。
タスクダイアログ(その2)の画面を表示するには、TaskDialogIndirect() を使う必要があります。

TaskDialogIndirect() を使うと、様々なカスタマイズができます。
タスクダイアログ(その2)の画面は、こんなコードになります。

enum
{
  TASKDIALOG_BUTTON_FINE = 101,
  TASKDIALOG_BUTTON_CLOUD,
  TASKDIALOG_BUTTON_RAIN,
  TASKDIALOG_BUTTON_SNOW
};
TASKDIALOG_BUTTON buttons[] =
{
  { TASKDIALOG_BUTTON_FINE, TEXT("晴れ(&F)") },
  { TASKDIALOG_BUTTON_CLOUD, TEXT("くもり(&C)") },
  { TASKDIALOG_BUTTON_RAIN, TEXT("雨(&R)") },
  { TASKDIALOG_BUTTON_SNOW, TEXT("雪(&S)") }
};

TASKDIALOGCONFIG TaskConfig = {0};

TaskConfig.cbSize = sizeof(TaskConfig);
TaskConfig.hInstance = _Module.GetResourceInstance();
TaskConfig.hwndParent = m_hWnd;
TaskConfig.pButtons = buttons;
TaskConfig.cButtons = ARRAYSIZE(buttons);
TaskConfig.dwFlags = TDF_ALLOW_DIALOG_CANCELLATION | TDF_USE_COMMAND_LINKS;
TaskConfig.pszMainIcon = TD_INFORMATION_ICON;
TaskConfig.pszWindowTitle = TEXT("タスクダイアログの例 (その2)");
TaskConfig.pszMainInstruction = TEXT("お天気アンケートです");
TaskConfig.pszContent = TEXT("あなたのお住まいの地域の天気を選択してください");
TaskConfig.pszFooterIcon = TD_INFORMATION_ICON;
TaskConfig.pszFooter = TEXT("お天気アンケートにご協力お願いします");

int selected;
TaskDialogIndirect(&TaskConfig, &selected, NULL, NULL);
switch (selected)
{
case TASKDIALOG_BUTTON_FINE:
  // 晴れが選択された
  break;
case TASKDIALOG_BUTTON_CLOUD:
  // くもりが選択された
  break;
case TASKDIALOG_BUTTON_RAIN:
  // 雨が選択された
  break;
case TASKDIALOG_BUTTON_SNOW:
  // 雪が選択された
  break;
default:
  break;
}

ポイントは、TASKDIALOGCONFIG 構造体です。このメンバーを必要に応じてカスタマイズします。
MFC や、WTL を使うもっと簡単にできます。

重要なポイントがあります。使えるアイコンは、4 種類のみなのです。
TASKDIALOGCONFIG 構造体の説明、もしくは、CommCtrl.h を見るとわかりますが、用意されているアイコンは、

#define TD_WARNING_ICON         MAKEINTRESOURCEW(-1)
#define TD_ERROR_ICON           MAKEINTRESOURCEW(-2)
#define TD_INFORMATION_ICON     MAKEINTRESOURCEW(-3)
#define TD_SHIELD_ICON          MAKEINTRESOURCEW(-4)

だけです。これを見ると、感嘆符疑問符(?マーク)がありません。

この中の「Question mark icons」を見ると、

  • Use the question mark icon only for Help entry points.
    For more information, see the Help entry point guidelines.
  • Don’t use the question mark icon to ask questions.
    Again, use the question mark icon only for Help entry points.
    There is no need to ask questions using the question mark icon anyway—it’s sufficient to present a main instruction as a question.
  • Don’t routinely replace question mark icons with warning icons.
    Replace a question mark icon with a warning icon only if the question has significant consequences.
    Otherwise, use no icon.

とあり、感嘆符疑問符(?マーク)は、ヘルプ用に使いなさい。質問用に使うなとあります。
Windows の UX 的には、タスクダイアログに感嘆符疑問符(?マーク)は使わないことになっているようです。

やろうと思えば、自前で Shell アイコンを読み込んでセットすることで表示することは可能ですが、やらない方がよさそうです。
タスクダイアログを質問用に使うのなら、感嘆符疑問符(?マーク)は表示せずに、フッターに情報アイコン、警告アイコンを
使って、さらにフッターに説明を書いておくというのが、UX 的によいものとなります。

というわけで、タスクダイアログ(その2)の画面は、UX 的にはよろしくなく、
タスクダイアログ(その3)の画面がより良いということになります。

うーん、奥が深い。

3 Responses to Win7: Windows 7 らしい UX(TaskDialog 編)

  1. 鈴見咲 君高 より:

    「?」は疑問符ですな。感嘆符は「!」です。

  2. ちとく より:

    Warning Icon は警告アイコン、すなわち黄色い三角に黒い!のアイコンです。
    質問を警告アイコンに置き換えるのは控えるべきだ、とされているので、
    青い丸に!の Information Icon は使っても良いような気がします。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。