GUIデザイン

はじめに

今日の世界では、数十億のコンピューティングデバイスがあります。 それらのためのより多くのプログラム。 また、それぞれに独自のインターフェイスがあり、これはユーザーコードとマシンコード間の対話の「レバー」です。 驚くことではありませんが、インターフェースが優れているほど、相互作用がより効果的になります。

ただし、すべての開発者やデザイナーでさえ、便利で理解しやすいグラフィカルユーザーインターフェイスの作成を考えているわけではありません。

私自身のために、一般的な原則、作成するインターフェイス要素（EI） 、それらのデザイン、それらを正しく配置する場所、およびそれらの動作を質問することから始めました。
以下では、これらの質問に答えようとします。

一般原則

• インターフェイスは直感的でなければなりません。 ユーザーがそれを使用する方法を説明する必要がないように。
  
  
• 学習プロセスを簡素化するには、ヘルプが必要です。 文字通り-特定のEIの重要性を説明するグラフィック手がかり。 完全なガイドは、いつでもアクセスできるインターフェイスの一部である必要があります。
  
  
  
  
  
  
• ユーザーを最後に終了した場所に戻します。 なぜもう一度プッシュするのですか？
  
  
• ほとんどの場合、インターフェイスのユーザーは最初にエンティティ（名詞）を探し、次にそのエンティティに対するアクション（動詞）を探します。 「名詞->動詞」というルールに従ってください。 たとえば、フォント->変更。
  
  
  
  
  
  
• 人が結果を早く見るほど、より良い結果が得られます。 例は、オプションが検索クエリを入力するプロセスにある「ライブ」検索です。 基本原則： プログラムは、最小の重要な入力単位に基づいてユーザーと対話する必要があります 。
  
  
• 準モードを使用します。 たとえば、Shiftキーを押したままの大文字化は準モードです。 capslock on-モード。 主な違いは、人は自分がどのモードにいるかを忘れることができ、準モード（追加のキーが押された状態）では、実行するのがはるかに難しいことです。
  
  
  
  
  
  
• ユーザーに個人設定を設定する機会を提供するように注意する必要があります。 前のインターフェイスで完全にやり直された場合に、従業員がWordのセットアップに費やす時間を想像してください。
  
  
• ユーザーが特定のタスクを使用すればするほど、そのタスクに集中するようになり、プログラムによって表示されるヒントやメッセージに気付くことが少なくなります。 タスクの重要度が高いほど、ユーザーが特定の潜在的に危険なアクションに関する警告に気付く可能性が低くなります。
  
  
  
  
  
  

作成するEI

• インターフェース開発は通常、製品が対象とするタスクまたはタスクのセットを定義することから始まります
  
  
• シンプルはシンプルのままでなければなりません。 インターフェイスを複雑にしないでください。 インターフェイスをより簡単に理解しやすくする方法を常に考えてください。
  
  
• ユーザーは、プログラムがどのように機能するかを考えません。 表示されるのはインターフェイスのみです。 したがって、消費者の観点から見ると、インターフェースは最終製品です。
  
  
• インターフェースは人間指向、つまり 人のニーズを満たし、彼の弱点を考慮します。 ユーザーがどのような困難に遭遇する可能性があるかを常に考える必要があります。
  
  
• ユーザーの行動と習慣について考えてください。 予期しないもので誰もがよく知っているEIを変更するのではなく、新しいものを直感的にします。
  
  
  
  
  
  
• ユーザーによるアクションの最小数の原則に基づいてインターフェイスを設計します。
  
  

EIの設計はどうあるべきですか？

実際、EIの設計は別の記事のトピックです。 ここでは、色、形、プロポーションから、認知心理学に至るまで、すべてを考慮する必要があります。 ただし、いくつかの原則はまだ注目に値します。

• 色。 色は、暖色（黄色、オレンジ、赤）、寒色（青、緑）、中間色（灰色）に分けられます。 通常、EIには暖色系が使用されます。 これは、知覚の心理学と正確に関連しています。 色に関する意見は非常に主観的であり、ユーザーの気分によっても変わる可能性があることに注意してください。
  
  
  
  
  
  
• フォーム。 ほとんどの場合、角丸長方形。 または円。 完全に長方形のEI、私は個人的にあまり好きではありません。 おそらく、その「シャープネス」のためです。 繰り返しますが、色だけでなく形も非常に主観的です。
  
  
• キーEI（一般的に使用される）を強調表示する必要があります。 たとえば、サイズや色。
  
  
• プログラム内のアイコンは明白なはずです。 そうでない場合は、署名します。 実際、実際には、説明する代わりに、絵文字自体に説明が必要なことがよくあります。
  
  
• 要素を小さくしすぎないようにしてください-それらを通り抜けることは非常に困難です。
  
  

EIを画面に配置する方法は？

• 視覚的な魅力はプロポーションに基づいているという主張があります。 有名な数字1.62を覚えていますか？ これは、いわゆるゴールデンセクションの原則です。 一番下の行は、セグメント全体がその大部分を参照するということです。ほとんどのセグメントがそれより少ないことを参照するのと同じです。 たとえば、サイトの合計幅は900pxで、900を1.62で割ると、約555pxになります。これは、コンテンツを含むブロックの幅です。 900から555を差し引いて345ピクセルを取得します。 これは、小さい部分の幅です。
  
  
  
  
  
  
• 位置決めの前に、EIを重要度順に並べる（グループ化する）必要があります。 つまり 最も重要なものとそうでないものを決定します。
  
  
• 通常（必須ではありませんが）、要素は次のグラデーションで配置されます：左から右、上から下。 左上には最も重要な要素があり、右下にはそれより少ない要素があります。 これは、テキストが読み取られる順序によるものです。 タッチスクリーンの場合、最も重要な要素は親指の作用領域にあります。
  
  
• ユーザーの習慣を考慮する必要があります。 たとえば、Windowsで閉じるボタンが右上隅にある場合、プログラムは同じ場所に同様のボタンを配置する必要があります。 つまり インターフェースは、ユーザーに知られているものとできるだけ多くの類似性を持つ必要があります。
  
  
• ほとんどの場合、ユーザーカーソルがある場所にEIを近づけます。 そのため、たとえば画面の一方の端からもう一方の端にカーソルを移動する必要はありません。
  
  
• プロポーションを保つ
  
  
• インターフェイス要素は、人間の感覚器官で現在利用可能であるか、または短期記憶から抜け出せないほど最近に知覚された場合に、可視と見なすことができます。 インターフェースが適切に機能するためには、必要なもののみが表示されている必要があります -動作中のシステムの一部を識別するもの、およびユーザーがデバイスと対話する方法を反映しているもの。
  
  
• 互いに等しいまたは複数のEI間のインデント。

EIはどのように振る舞うべきですか？

• ユーザーはそれに慣れます。 たとえば、ファイルを削除すると、確認ウィンドウが表示されます：「はい」または「いいえ」。 時間が経つにつれて、ユーザーは警告の読み取りを停止し、習慣から「はい」をクリックします。 したがって、セキュリティを確保するために設計されたダイアログボックスは、その役割を絶対に果たしません。 したがって、ユーザーにアクションをキャンセルする機会を与える必要があります。
  
  
  
  
  
  
• ユーザーがどこかまたは何らかの方法で入力する必要があるユーザー情報を提供する場合、その情報は、その人がそれを処理する瞬間まで画面上に残るはずです。 さもなければ、彼は単に忘れるかもしれません。
  
  
• あいまいさを避けてください。 たとえば、懐中電灯にはボタンが1つあります。 懐中電灯を押すと、オンになり、もう一度押すとオフになります。 電球が懐中電灯で燃え尽きた場合、ボタンを押したときに、それをオンにするかどうかは明確ではありません。 したがって、単一のスイッチボタンではなく、スイッチ（たとえば、「オン」と「オフ」の2つの位置を持つチェックボックス）を使用することをお勧めします。 タスクの状態が明らかな場合を除きます。
  
  
  
  
  このようなスイッチはEIの状態を直接反映します
  
  
• 単調なインターフェイスを作成します。 単調なインターフェイスは、アクションを1つの方法でのみ実行できるインターフェイスです。 このアプローチにより、プログラムへの迅速な依存とアクションの自動化が実現します。
  
  
• 時間の経過とともに変化するアダプティブインターフェイスを作成しないでください。 タスクを実行するため、複数ではなく1つのインターフェイスのみを調査することをお勧めします。 例は、Chromeブラウザーの開始ページです。
  
  
• プログラムの実行プロセスの遅延が避けられない場合、またはユーザーが実行するアクションが非常に重要な場合は、それらについて通知するフィードバックをインターフェイスで提供することが重要です。 たとえば、進行状況バー（ステータスバー）を使用できます。
  
  
• EIは対応する必要があります。 ユーザーがクリックした場合、EIは、クリックが発生したことを人が理解するために何らかの方法で応答する必要があります。
  
  

結論として

この記事は、インターフェース設計の原則に関する最も包括的な参考資料ではありません。 グラフィカルユーザーインターフェイスは広範にわたるトピックであり、心理学と密接に関連しており、科学者や数百ページの書籍や研究の心を占めています。 このような小さな形式では、トピックの充実度を表現する方法はありません。 ただし、基本原則に準拠することで、ユーザーフレンドリーなインターフェイスを構築でき、設計プロセス自体を簡素化できます。
ご清聴ありがとうございました。

文学

ジェフ・ラスキン 、「インターフェース：コンピューターシステム設計の新しいトレンド」
アラン・クーパー 、「インターフェースについて。 インタラクションデザインの基本
アラン・クーパー 、「患者の手による精神病院」