Software-engineering-software-user-interface-design

提供:Dev Guides
移動先:案内検索

ソフトウェアユーザーインターフェイスの設計

ユーザーインターフェイスは、ユーザーがソフトウェアを使用するために対話するフロントエンドアプリケーションビューです。 ユーザーは、ユーザーインターフェイスを使用して、ソフトウェアとハ​​ードウェアを操作および制御できます。 今日、ユーザーインターフェースは、コンピューター、携帯電話、車、音楽プレーヤー、飛行機、船など、デジタルテクノロジーが存在するほぼすべての場所にあります。

ユーザーインターフェイスはソフトウェアの一部であり、ユーザーがソフトウェアを理解できるように設計されています。 UIは、人間とコンピューターの対話のための基本的なプラットフォームを提供します。

UIは、基盤となるハードウェアとソフトウェアの組み合わせに応じて、グラフィカル、テキストベース、オーディオビデオベースにすることができます。 UIは、ハードウェアまたはソフトウェア、あるいはその両方の組み合わせにすることができます。

ソフトウェアは、ユーザーインターフェイスが次の場合に人気があります。

  • 魅力的
  • 使い方が簡単
  • 短時間で応答する
  • わかりやすい
  • すべてのインターフェース画面で一貫

UIは大きく2つのカテゴリに分類されます。

  • コマンドラインインターフェース
  • グラフィカル・ユーザー・インターフェース

コマンドラインインターフェース(CLI)

ビデオディスプレイモニターが登場するまで、CLIはコンピューターとの対話の優れたツールでした。 CLIは、多くの技術ユーザーおよびプログラマーの最初の選択肢です。 CLIは、ソフトウェアがユーザーに提供できる最小限のインターフェイスです。

CLIは、ユーザーがコマンドを入力してシス​​テムに入力するコマンドプロンプトを提供します。 ユーザーは、コマンドの構文とその使用法を覚えておく必要があります。 以前のCLIは、ユーザーエラーを効果的に処理するようにプログラムされていませんでした。

コマンドは、システムによって実行されることが期待される一連の命令へのテキストベースの参照です。 ユーザーが簡単に操作できるようにするマクロやスクリプトなどのメソッドがあります。

CLIは、GUIと比較して使用するコンピューターリソースの量が少なくなります。

CLI要素

コマンドラインインターフェイス(CLI)

テキストベースのコマンドラインインターフェイスには、次の要素を含めることができます。

  • コマンドプロンプト-テキストベースの通知機能で、ユーザーが作業しているコンテキストを主に表示します。 ソフトウェアシステムによって生成されます。
  • カーソル-入力中の文字の位置を表す小さな水平線または行の高さの垂直バーです。 カーソルはほとんどが点滅状態にあります。 ユーザーが何かを書き込んだり削除したりすると移動します。
  • コマンド-コマンドは実行可能な命令です。 1つ以上のパラメーターがあります。 コマンド実行時の出力は、画面にインラインで表示されます。 出力が生成されると、コマンドプロンプトが次の行に表示されます。

グラフィカル・ユーザー・インターフェース

グラフィカルユーザーインターフェイスは、システムと対話するためのユーザーグラフィカル手段を提供します。 GUIは、ハードウェアとソフトウェアの両方を組み合わせることができます。 GUIを使用して、ユーザーはソフトウェアを解釈します。

通常、GUIはCLIよりも多くのリソースを消費します。 高度な技術を使用して、プログラマーとデザイナーは、より効率的、正確、高速に動作する複雑なGUIデザインを作成します。

GUI要素

GUIは、ソフトウェアまたはハードウェアと対話するためのコンポーネントのセットを提供します。

すべてのグラフィカルコンポーネントは、システムを操作する方法を提供します。 GUIシステムには、次のような要素があります。

グラフィカルユーザーインターフェイス

  • ウィンドウ-アプリケーションのコンテンツが表示される領域。 ウィンドウがファイル構造を表す場合、ウィンドウの内容はアイコンまたはリストの形式で表示できます。 ユーザーは、探索ウィンドウ内のファイルシステム内を簡単に移動できます。 ウィンドウは、画面のサイズに合わせて最小化、サイズ変更、または最大化できます。 画面上のどこにでも移動できます。 ウィンドウには、子ウィンドウと呼ばれる同じアプリケーションの別のウィンドウを含めることができます。
  • タブ-アプリケーションがそれ自体の複数のインスタンスの実行を許可する場合、それらは別々のウィンドウとして画面に表示されます。 Tabbed Document Interface が、同じウィンドウで複数のドキュメントを開くようになりました。 このインターフェイスは、アプリケーションの設定パネルの表示にも役立ちます。 最新のWebブラウザはすべてこの機能を使用しています。
  • メニュー-メニューは標準コマンドの配列であり、グループ化されてアプリケーションウィンドウ内の表示場所(通常は上部)に配置されます。 メニューは、マウスクリックで表示または非表示になるようにプログラムできます。
  • アイコン-アイコンは、関連するアプリケーションを表す小さな画像です。 これらのアイコンをクリックまたはダブルクリックすると、アプリケーションウィンドウが開きます。 アイコンは、システムにインストールされているアプリケーションとプログラムを小さな写真の形で表示します。
  • カーソル-マウス、タッチパッド、デジタルペンなどの対話型デバイスは、GUIではカーソルとして表されます。 画面上のカーソルは、ほぼリアルタイムでハードウェアからの指示に従います。 カーソルは、GUIシステムではポインターとも呼ばれます。 メニュー、ウィンドウ、その他のアプリケーション機能を選択するために使用されます。

アプリケーション固有のGUIコンポーネント

アプリケーションのGUIには、リストされた1つ以上のGUI要素が含まれます。

  • アプリケーションウィンドウ-ほとんどのアプリケーションウィンドウは、オペレーティングシステムが提供する構成を使用しますが、多くは、アプリケーションのコンテンツを含めるために顧客が作成した独自のウィンドウを使用します。
  • ダイアログボックス-ユーザーへのメッセージと実行するアクションの要求を含む子ウィンドウです。 例:アプリケーションは、ファイルを削除するための確認をユーザーから取得するダイアログを生成します。 + ダイアログボックス
  • テキストボックス-ユーザーがテキストベースのデータを入力および入力するための領域を提供します。
  • ボタン-実際のボタンを模倣し、ソフトウェアに入力を送信するために使用されます。 + ラジオボタン
  • ラジオボタン-選択可能なオプションを表示します。 提供されるすべての中から1つだけを選択できます。
  • チェックボックス-リストボックスに似た機能。 オプションを選択すると、ボックスにチェックマークが付きます。 チェックボックスで表される複数のオプションを選択できます。
  • リストボックス-選択可能な項目のリストを提供します。 複数のアイテムを選択できます。 + リストボックス

他の印象的なGUIコンポーネントは次のとおりです。

  • スライダー
  • コンボボックス
  • データグリッド
  • ドロップダウンリスト

ユーザーインターフェイスのデザインアクティビティ

ユーザーインターフェイスを設計するために実行されるアクティビティは多数あります。 GUIの設計と実装のプロセスは、SDLCに似ています。 ウォーターフォールモデル、反復モデル、またはスパイラルモデルの間で、GUIの実装に任意のモデルを使用できます。

GUIの設計と開発に使用されるモデルは、これらのGUI固有のステップを満たす必要があります。

GUIプロセス

  • * GUI要件の収集*-設計者は、GUIのすべての機能要件と非機能要件のリストを作成できます。 これは、ユーザーおよび既存のソフトウェアソリューションから取得できます。
  • ユーザー分析-デザイナーは、ソフトウェアGUIを使用するユーザーを調査します。 ユーザーの知識と能力レベルに応じて設計の詳細が変化するため、対象読者は重要です。 ユーザーが技術に精通している場合、高度で複雑なGUIを組み込むことができます。 初心者ユーザーには、ソフトウェアの使用方法に関する詳細情報が含まれています。
  • タスク分析-設計者は、ソフトウェアソリューションによって実行されるタスクを分析する必要があります。 ここGUIでは、どのように実行されるかは関係ありません。 タスクは、1つの主要なタスクを取得し、それをさらに小さなサブタスクに分割する階層的な方法で表すことができます。 タスクは、GUIプレゼンテーションの目標を提供します。 サブタスク間の情報の流れにより、ソフトウェアのGUIコンテンツの流れが決まります。
  • * GUIの設計と実装*-要件、タスク、ユーザー環境に関する情報を取得した後、デザイナーはGUIを設計し、コードに実装し、バックグラウンドで作業用ソフトウェアまたはダミーソフトウェアを使用してGUIを埋め込みます。 その後、開発者が自己テストします。
  • テスト-GUIテストはさまざまな方法で実行できます。 組織は社内検査を行うことができ、ユーザーの直接関与とベータ版のリリースはほとんどありません。 テストには、ユーザビリティ、互換性、ユーザーの承認などが含まれます。

GUI実装ツール

デザイナーがマウスクリックでGUI全体を作成できるツールがいくつかあります。 一部のツールは、ソフトウェア環境(IDE)に組み込むことができます。

GUI実装ツールは、GUIコントロールの強力な配列を提供します。 ソフトウェアのカスタマイズについては、設計者はそれに応じてコードを変更できます。

さまざまな用途とプラットフォームに応じて、GUIツールにはさまざまなセグメントがあります。

モバイルGUI、コンピューターGUI、タッチスクリーンGUIなど。 GUIを構築するのに便利ないくつかのツールのリストを次に示します。

  • 流体
  • AppInventor(Android)
  • LucidChart
  • ウェーブメーカー
  • ビジュアルスタジオ

ユーザーインターフェイスのゴールデンルール

ShneidermanとPlaisantの本(Designing the User Interface)で説明されているGUIデザインの黄金のルールとして、次のルールが言及されています。

  • 一貫性の確保-同様の状況では、一貫したアクションのシーケンスが必要です。 プロンプト、メニュー、およびヘルプ画面で同じ用語を使用する必要があります。 一貫したコマンドを一貫して使用する必要があります。
  • 頻繁にアクセスするユーザーがショートカットを使用できるようにする-ユーザーの操作回数を減らしたいという要望は、使用頻度とともに増加します。 略語、ファンクションキー、隠しコマンド、マクロ機能は、エキスパートユーザーにとって非常に役立ちます。
  • 有益なフィードバックを提供-オペレーターのアクションごとに、システムフィードバックが必要です。 頻繁でマイナーなアクションの場合、対応は控えめである必要があり、まれでメジャーなアクションの場合、対応はより実質的でなければなりません。
  • 閉鎖をもたらす設計ダイアログ-アクションのシーケンスは、開始、中間、終了のグループに編成する必要があります。 一連のアクションの完了時の有益なフィードバックは、オペレータに達成の満足、安心感、緊急事態計画とオプションを頭から落とす信号を与えます。アクションのグループ。
  • シンプルなエラー処理を提供-可能な限り、ユーザーが重大なエラーを起こさないようにシステムを設計します。 エラーが発生した場合、システムはそれを検出し、エラーを処理するためのシンプルでわかりやすいメカニズムを提供できるはずです。
  • アクションの簡単な反転を許可-ユーザーがエラーを取り消すことができることを知っているため、この機能は不安を和らげます。 アクションの簡単な反転は、なじみのないオプションの調査を促進します。 可逆性の単位は、単一のアクション、データ入力、またはアクションの完全なグループです。
  • 内部統制のサポート-経験豊富なオペレーターは、システムを担当し、システムが自分のアクションに応答するという感覚を強く望んでいます。 ユーザーがレスポンダーではなくアクションのイニシエーターになるようにシステムを設計します。
  • 短期メモリの負荷を軽減-短期メモリでの人間の情報処理の制限により、ディスプレイをシンプルに保ち、複数ページのディスプレイを統合し、ウィンドウモーションの頻度を減らし、コードに十分なトレーニング時間を割り当て、ニーモニック、およびアクションのシーケンス。