COMSOL Multiphysics® シミュレーションソフトウェアのアプリケーションビルダーは, アプリの設計においてほぼ無制限の自由度を提供します. しかし, エンジニアとして, シミュレーションアプリの設計が乱雑にならないように, 創造性と集中力のバランスを取る必要があります. 2部構成のブログシリーズの最初の記事では, 明確で合理化された設計と構造を持つアプリを作成するのに役立つガイドラインをいくつかご紹介します.
シミュレーションアプリのユーザー体験を向上させる
アプリケーションビルダーを使用すると, 特定の目的のためのユーザーインターフェース (UI) を含む既存のモデルに基づいてアプリを構築できます. たとえば, 非常にシンプルなアプリでは, ユーザーは電気モーターの長さなどの幾何学的寸法のみを変更し, ボタンを押すと電気モーターの電力やトルクなどのシミュレーション結果を計算することができます.
アプリ UI の設計では, アプリケーションビルダーのフォームエディターとメソッドエディターによってほぼ無制限の自由度が提供されます. ただし, エンジニアとして, わかりやすく効果的なシミュレーションアプリの設計を作成するには, いくつかのガイドラインに従う必要があります. アプリの UI は, ユーザーがアプリで何をすべきか, またその理由を最小限の説明で理解できるように, 明確かつ教育的に構成する必要があります.
図 1. 放射状および軸方向の組成と温度変化を伴う管状反応器をモデル化する教育用アプリ. 学生は, 最小限の指示で, いくつかのパラメーターを変更し, シミュレーション結果を計算して解析し, 解析結果からレポートを作成できます.
アプリケーションライブラリに含まれるデモアプリをレビューした経験から, 機能的なアプリ UI を作成するための一般的なヒントをいくつか思いつきました. デザインと構造を念頭に置いてアプリを構築する方法については, 以下をお読みください.
クリエイティブで保守的なグラフィックスデザインを選択する
シミュレーションアプリを構築するときは, クリエイティブであると同時に目的を持って行う必要があります. ユーザーインターフェースは, アプリの操作を制御する手段です. したがって, グラフィックスデザインによってアプリ自体から注意が逸れるようなことは避けてください.
COMSOL Multiphysics ユーザーのほとんどはエンジニアであり, デザイナーではありません. つまり, 非常に正当な理由と十分なリソースがない限り, 新しいユーザーインターフェースデザインを考案すべきではありません. デザインはモダンに見せたいですが, 関連するオペレーティングシステムの標準に従う必要があります. Windows® オペレーティング システムと Mac OS の場合, ビジネス向けのアプリは, オペレーティングシステムの外観と操作感にかなり厳密に従う必要があります.
よく知られたデザイン標準を使用する
特定のデザイン標準に従うことで, 潜在的な混乱を避け, アプリユーザーに安心感を与えます. ユーザーインターフェースに関してユーザーがすでに慣れているものを活用すれば, ユーザーはよく知られた地形を移動しているように感じるでしょう. これが, 可能であれば, 標準メニュー, ウィジェット, ボタンを常に標準の位置に保つべき理由です.
たとえば, Windows® および Mac ユーザーは, メインメニューとツールバーの位置について深く考えることはありません. 上部の水平ツールバーには, 最も一般的な重要なコマンドが含まれていることを知っているからです. 最も頻繁に使用される基本的なコマンドは左側に配置されているため, UI の左上隅が通常, 最も重要な位置と見なされます. マウスの動きを最小限に抑えるために, メインツールバーがウィンドウの下部または右側に垂直に配置されているアプリを見たことがあります. ただし, ユーザーの期待に沿ったアプリの設計の方が重要です. 別の例では, ファイル メニューに 保存 と 名前を付けて保存 があり, OK ボタンと キャンセル ボタンがその順序で表示されることを期待しており, キャンセル の後に OK が表示されることを期待していません. UI コンポーネント, ウィジェット, およびボタンのサイズも, Windows® および Mac アプリでは標準です.
これらの項目の間隔と配置を標準に保つことも重要です. フォームとウィジェットの間にスペースが多すぎたり少なすぎたり, フォーム間のスペースが一定でなかったりすると, ユーザーインターフェースがプロフェッショナルに見えなくなるのは簡単です. フォームはほとんどの場合, 左揃えで上から下まで埋められます. また, プロフェッショナルアプリを見ると, フォームコレクションの右側または UI のメインセクションの下にのみ空白が残っていることがよくあります.
図 2. ヘリカルスタティックミキサーアプリは, 設計標準によく従っています. グラフィックスツールバー (タスク固有のツールバー) が グラフィックス フォーム内にあることに注意してください. グラフィックスツールバーは垂直になることがあります. これは, Windows® および Mac アプリのタスク固有のツールバーでは珍しいことではありません.
図2は, さまざまな動作条件下でさまざまなサイズと構成のヘリカルスタティックミキサーをモデル化するアプリを示しています. このアプリの UI はすっきりしており, 入力とコマンドの位置はほとんどの Windows® および Mac アプリの標準に従っています. アイコンとメニューのサイズ, およびフォームとウィジェットの間隔も一貫した標準に従っています. 空白は, フォームとウィジェットの右側, または UI のメインセクションの下にのみあります.
タスク固有のセクションで構造を作成する
機能的なデザインを実現するには, アプリの UI をタスク固有の領域に分割します. これらの特定のタスクは, 各セクションのタイトルで明確に記述できます. 図2 に示すアプリでは, 次のようになります.
- 重要なコマンドはメインツールバー (Windows® の リボン) にあり, それぞれに独自のセクションがあります.
- テキストと数値の入力および出力フォームは左側にあり, それぞれにタスク固有のセクションがあります (入力と結果 フォームコレクション内).
- すべてのグラフィックス出力は グラフィックス フォームコレクションにあり, それぞれにタスク固有のタブがあります.
このアプリでは, メインツールバーの各タスクに, 入力, シミュレーション, ドキュメント という独自のセクションがあります. 入力と結果 フォームコレクションも, ジオメトリ, 動作条件, 結果, 計算情報 などのヘッダーと内部階層を含むフォームを持つセクションに分割されています.
1つのタスクのすべての入力, 出力, およびグラフィックス出力を1つのフォームにまとめたくなるものです. ジオメトリ入力とグラフィックスジオメトリ出力が1つのフォームにあり, シミュレーション結果のグラフィックス出力が UI の別の領域にあるアプリを見たことがあります. 特定のタスクに対応している場合でも, UI 全体のさまざまな領域に入力と出力が混在していると混乱を招きます. より適切な方法は, 同様の入力と出力を同じ場所に配置することです. つまり, 図2 のように, すべてのグラフィックス出力を1つの グラフィックス フォームコレクションに配置します.
現在使用しているコンピューターの画面は大きく, 解像度も高いため, すべての入力と出力を1つの画面にまとめたくなります. しかし, 画面に十分なスペースがあっても, 表示が処理しにくい場合があります. そのため, フォームコレクションを使用して, さまざまな入力と出力をさまざまなフォームに配置し, 一度に1つずつ表示することを検討する必要があります.
図 3. タブ付きフォームコレクションとコンボボックスを使用すると, 一度に1つの画面を表示して, ユーザーインターフェースが乱雑になったり窮屈になったりすることを避けることができます.
上の図3は, 電子機器の冷却に使用されるヒートシンクのモデリングとシミュレーションを行うアプリの UI を示しています. ヒートシンク ジオメトリ入力フォームコレクションは, ベースジオメトリ 入力用のタブと フィンジオメトリ 入力用のタブが1つずつあるタブ付きフォームコレクションです. 両方の入力フォームを表示するスペースはありますが, 一度に1つのフォームを表示すると, UI がより明確になり, 概要を把握しやすくなります. ここでは, ヒートシンクジオメトリ用のタブ付きフォームコレクションを使用しても, UI が少し過負荷に見えるため, 入力と結果 フォームコレクション全体のタブ付きフォームコレクションを検討する必要があります.
タブ付きフォームコレクションとコンボボックスは, 現在選択されているタブに代わる入力と情報があることをユーザーに知らせることができるため便利です. タブやコンボボックスと同じ機能をボタンで実行することは, ボタンの直感的な使用法ではないため, 避けるべきです. タブやコンボボックスの背後に代替フォームを使用すると, 明確でクリーンなデザインになり, フォームの過負荷を防ぐのに役立ちます.
Windows® アプリのメインツールバー (リボン) にも同じ戦略を使用できます. リボンを使用すると, コマンドをさまざまなタブにグループ化して, 概要を把握しやすくすると同時に, メインツールバーがメニューで過負荷になるのを防ぐことができます. 図4は, ミキサーをシミュレートするアプリを示しています. このアプリでは, バッフルと中央のインペラを組み合わせて混合が行われます. ミキサーアプリのリボンには, メインツールバーが過負荷になるのを防ぐため, 2つの異なるタブが含まれています. 1つは一般的なコマンドを含む ホーム タブ, もう1つはインペラーを追加および定義するためのタスク固有のタブである インペラー タブです. さらに, 入力と結果 フォームコレクションはタブ化されており, インペラー入力とミキサーのより一般的な入力を区別しています.
図 4. ミキサーアプリの2つのリボンタブ.
シミュレーションアプリの設計と構造に一貫性を持たせる
すべてのアプリで同じまたは類似の基本構造を使用することで, ユーザーは作成するアプリごとに新しい構造を操作する方法を学ぶ必要がありません. 前述のように, 類似の入力とコマンドを類似の場所に配置すると, わかりやすくなります. タブ付きフォームコレクションを使用して異なるグラフィックス出力を分離することで, 異なるグラフィックス出力のグラフィックス領域を同じ位置に配置できます.
上で説明したヘリカルスタティックミキサーアプリとヒートシンクアプリを見ると, 必要なコマンドは同じです: デフォルトにリセット, ジオメトリを更新, メッシュ, 計算, PDF 説明書を開く, および レポート. 目的がまったく異なるアプリを構築する場合は, 異なる設計が必要になる場合があることに注意してください.
図 5. 左のヒートシンクアプリの UI と右のヘリカルスタティックミキサーアプリの UI の比較. リボンは同一です. 両方のアプリで同じコマンドが必要なためです.
テキスト, 色, 形状, アイコンに関しても, 一貫性は非常に重要です. たとえば, 上のツールバーにある PDF ファイル アイコンはすぐにわかります. アイコンや色はクリエイティブに使用できますが, ユーザーがすでに知っているものを活用し, 他のソフトウェアや独自のデザインとの一貫性を保つ必要があります. アプリケーションビルダーでは, COMSOL Multiphysics ソフトウェアのすべてのアイコンにアクセスしてアプリで使用できますが, これらのアイコンを意図された方法で使用することが重要です. COMSOL Multiphysics ユーザーがアプリに遭遇し, アイコンが本来の目的とは異なるコマンドに使用されている場合, 非常に混乱する可能性があります.
説明とコマンドテキストの一貫性も見落とされがちです. たとえば, 上のツールバーのコマンドはすべて, リセット, ジオメトリの更新, メッシュ などの類似の操作に対して命令形で記述されています. ただし, 入力フィールドには, 長さ や 厚さ などの説明テキストが含まれています. これらは, 長さの設定 や 幅の設定 などのコマンドとして記述されていません. これらのコマンドは技術的には間違っていませんが, 時制の不一致が混乱を招きます. 細かい点はすべて明らかなように思えるかもしれませんが, このようなコマンドの定式化と説明を混在させているアプリを見たことがあります. これは, ユーザーに悪い第一印象を与えます.
また, フォントの種類と色を使用して, ユーザーがアプリを探索する際のガイドとして使用することもできます. たとえば, 下の図6では, 灰色のテキストと太字のフォントの種類は, 入力と結果と グラフィックス フォームの見出しが同じ階層レベルにあることを示しています. ジオメトリ, 動作条件, 結果 の明るいフォントと色は, これらのフォームが同じレベルにあり, 入力と結果 フォームの1つ下のレベルにあることを示しています. 同様に, ヒートシンク と ボックス は同じレベルにあり, ジオメトリ のさらに1つ下のレベルにあります. 大文字の使用の一貫性によって, 順序と階層も明らかになります. 動作条件 はすべて大文字ですが, ヒートシンク はそうではありません. もちろん, これらの細かい詳細はソフトウェアの種類によって異なる場合がありますが, アプリ内およびすべてのアプリ間で一貫性を保つことが重要です.
図 6. フォントと色の一貫性により, ユーザーインターフェースに構造がもたらされます.
シミュレーションアプリのデザインヒントのまとめ
これまでの議論をまとめると, アプリのユーザーインターフェースをデザインするときに私が常に従うルールのチェックリストは次のようになります:
- 共通の標準を使用し, ユーザーが期待する場所に要素を配置することで, デザインと構造に一貫性を持たせます.
- 明確な階層を使用して, 見出しレベルを参照するだけで, そのセクションの内容がわかるようにします.
- 可能であれば, アプリのコレクションに同じ構造を使用します.
- セクションとフォームをフレーム化するか, 区切り線を使用して, さまざまなユーザーインターフェースコンポーネントを明確に区別します.
- フォームセクション, 見出し, ボタン, 入力フィールド, 出力フィールド, その他のウィジェットなどのユーザーインターフェースコンポーネントを揃えて, 秩序感を生み出します.
- ウィジェットには標準サイズを使用します. たとえば, 大きなボタンはタッチパッドには適しているかもしれませんが, Windows® や Mac の UI では見栄えがよくありません.
- 間隔と配置には細心の注意を払ってください.
- 色は, 構造や階層を示す場合, または重要なメッセージやコマンドを強調表示する必要がある場合のみ使用してください.
- フォントの種類は少なく (可能であればオペレーティングシステムのフォント), セリフフォントはユーザーインターフェースでは見栄えがよくないため使用しないでください.
これらのヒントは, マルチフィジックスモデリングアプリをレビューする際に私が遭遇した2つの一般的な落とし穴を回避するのに役立ちます.
- 古く見えるアプリ: デザインは時代遅れではなく, 最新のものにする必要があります.
- 奇妙に見えるアプリ: デザインは手作りではなく, プロフェッショナルに見えなければなりません.
このブログで説明したガイドラインを使用すると, すぐにデザインと構造が改善されたアプリを構築できるようになります. このブログシリーズの第2部では, シミュレーションアプリのワークフローとユーザー体験を最適化する方法について説明します.
その他の資料
- デモアプリや他の COMSOL Multiphysics ユーザーがデザインしたアプリに関するブログをご覧ください:
- 入門用チュートリアルビデオシリーズ では, アプリケーションビルダーの使用方法について説明しています
Mac および Mac OS は, 米国およびその他の国で登録された Apple Inc. の商標です.
Windows は, 米国およびその他の国で Microsoft Corporation の登録商標または商標です.
コメント (0)