GUI 設計のベスト プラクティスと原則 [終了]

StackOverflow https://stackoverflow.com/questions/90813

  •  01-07-2019
  •  | 
  •  

質問

実用的で使いやすいユーザー インターフェイスの設計または原則は何ですか?

実際に物事を本当に役立つものにするプラクティスを提出してください。それがユーザーにとって効果的であれば、それを共有してください。

要約・照合

原則

  1. キス。
  2. オプションによって何が達成されるのかを明確かつ具体的に示します。たとえば、選択に基づいて実行されるアクションを示す動詞を使用します (次を参照)。実装1)。
  3. ユーザーが必要とすることや達成したいことに適した、明らかなデフォルトのアクションを使用してください。
  4. UI の外観と動作を環境/プロセス/視聴者に合わせます。スタンドアロン アプリケーション、Web ページ、ポータブル、科学分析、フラッシュ ゲーム、専門家/子供向け、...
  5. 新規ユーザーの学習曲線を短縮します。
  6. オプションを無効にしたり非表示にしたりするのではなく、ユーザーに代替案が存在する場合に限り、代替案が存在する場合に役立つメッセージを提供することを検討してください。利用可能な代替手段がない場合は、オプションを無効にすることをお勧めします。これにより、オプションが利用できないことが視覚的に示されます。利用できないオプションを非表示にするのではなく、マウスオーバーのポップアップでそのオプションが無効になっている理由を説明します。
  7. 広く使用され成功しているアプリケーションで実装されているように、一貫性を保ち、プラクティスとコントロールの配置に準拠します。
  8. ユーザーの期待を導き、プログラムがその期待に従って動作するようにします。
  9. ユーザーの語彙と知識にこだわり、プログラマーや実装の専門用語を使用しないでください。
  10. 基本的な設計原則に従います。コントラスト（明白さ）、繰り返し（一貫性）、整列（外観）、近接性（グループ化）。

実装

  1. (paiNie の回答を参照) 「ダイアログ ボックスでは動詞を使用するようにしてください。」
  2. 元に戻すとやり直しを許可/実装します。

参考文献

  1. Windows Vista ユーザー エクスペリエンス ガイドライン [http://msdn.microsoft.com/en-us/library/aa511258.aspx]
  2. オランダのウェブサイト - 「Drempelvrij」ガイドライン [http://www.drempelvrij.nl/richtlijnen]
  3. Web コンテンツ アクセシビリティ ガイドライン (WCAG 1.0) [http://www.w3.org/TR/WCAG10/]
  4. 一貫性 [http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0385267746]
  5. 考えさせないでください [http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pdbbssr_1?ie=UTF8&s=books&qid=1221726383&sr=8-1]
  6. 強力かつシンプルであること [http://msdn.microsoft.com/en-us/library/aa511332.aspx]
  7. ゲシュタルト設計法則 [http://www.squidoo.com/gestaltlaws]
役に立ちましたか？

解決

ダイアログ ボックスでは動詞を使用するようにしてください。

使うという意味です

alt text

の代わりに

alt text

他のヒント

私はおばあちゃんに対して GUI をテストします。

基本的な設計原則に従う

  • Contrast - 他とは違うものを作る 見て 違う
  • R繰り返し - ある画面内および他の画面で同じスタイルを繰り返します。
  • あ配置 - 画面要素を並べて配置します。はい、これにはテキスト、画像、コントロール、ラベルが含まれます。
  • Proximity - 関連する要素をグループ化します。住所を入力する一連の入力フィールドはグループ化され、クレジット カード情報を入力する入力フィールドのグループとは区別される必要があります。これは基本です ゲシュタルトデザインの法則.

一度もない 「本当ですか？」と尋ねてください。無制限で信頼性の高い元に戻す/やり直しを許可してください。

要件が何であるかではなく、ユーザーが何を達成したいかを考えるようにしてください。

ユーザーはシステムに入り、目標を達成するためにそれを使用します。Calc を開くときは、90% の確率で単純で高速な計算を行う必要があるため、デフォルトで簡易モードに設定されています。

したがって、アプリケーションが何をしなければならないかについて考えるのではなく、それを実行するユーザー（おそらく退屈している）のことを考え、ユーザーの意図に基づいてデザインし、ユーザーの作業を楽にするように努めてください。

Web やその他のフロント向けソフトウェア アプリケーションに関して何かを行っている場合は、必ず読む義務があります...

考えさせないで - スティーブ・クルーグ

Web アプリのブレッドクラム:
伝える -> 人 -> ユーザー -> どこ -> 彼女 -> システム内にあります

同じデータへの複数のパスを持つ「動的」システムでこれを実行するのはかなり困難ですが、システムをナビゲートするのに役立つことがよくあります。

環境に適応しようと努めます。

Windows アプリケーションを開発するときは、 Windows Vista ユーザー エクスペリエンス ガイドライン しかし、Web アプリケーションを開発するときは、適切なガイドラインを使用します。オランダの Web サイトを開発しているため、 「ドレンペルヴリ」のガイドライン に基づいています Web コンテンツ アクセシビリティ ガイドライン (WCAG 1.0) World Wide Web Consortium (W3C) による。

これを行う理由は、新規ユーザーの学習曲線を短縮するためです。

この本を読んで、GUI デザインについてしっかりと理解することをお勧めします。 日常のもののデザイン. 。メインの印刷可能なものはからのコメントですが、 ジョエル・スポルスキー:アプリケーションの動作がユーザーの期待と異なる場合は、グラフィカル ユーザー インターフェイスに問題があることになります。

最も良い例は、誰かが交換したときです。 わかりました そして キャンセル 一部の Web サイトのボタン。ユーザーが期待しているのは、 わかりました ボタンを左側に配置し、 キャンセル ボタンを右側に配置します。つまり、アプリケーションの動作がユーザーの予想と異なる場合、ユーザー インターフェイスの設計に問題があることになります。

ただし、どのような設計や設計パターンに従う場合でも、アプリケーション全体で設計と規則の一貫性を保つことが最善のアドバイスです。

できる限り、ユーザーに選択を求めることは避けてください（つまり、構成ダイアログを使用してフォークを作成しないでください。)

すべてのオプションとすべてのメッセージ ボックスについて、次のことを自問してください。代わりに、適切なデフォルトの動作を考え出すことはできますか?

  • 意味はあるのか？
  • ユーザーの邪魔にならないか？
  • これをユーザーに課してもほとんどコストがかからないことを知るのは簡単ですか?

私の Palm ハンドヘルドを例として使用します。設定は本当にミニマルで、とても満足しています。基本的なアプリケーションは十分によく設計されているため、調整の必要性を感じることなく簡単に使用できます。そうですね、できないこともいくつかありますし、実際、ツールに（その逆ではなく）自分自身を適応させる必要があったのですが、最終的にはこれで本当に生活が楽になりました。

この Web サイトは別の例です。何も設定することはできませんが、とても使いやすいと思います。

適切なデフォルトを理解するのは難しい場合がありますが、簡単なユーザビリティ テストでそれを解決するための多くの手がかりが得られます。

ユーザーのサンプルにインターフェイスを見せます。典型的なタスクを実行するように依頼します。彼らの間違いに注意してください。彼らのコメントを聞いてください。変更を加えて繰り返します。

日常のもののデザイン - ドナルド・ノーマン

デザインの伝承の規範であり、世界中の大学の多くの HCI コースの基礎です。Web フォーラムからのいくつかのコメントだけでは、5 分で優れた GUI をデザインすることはできませんが、いくつかの原則はあなたの思考を正しい方向に導くでしょう。

--

MC

エラーメッセージを構築するとき、エラーメッセージをこれらの3つの質問に対する回答にします（その順序で）：

  1. どうしたの？

  2. なぜそうなったのでしょうか?

  3. それについて何ができるでしょうか?

これは「ヒューマン インターフェイス ガイドライン:Appleデスクトップインターフェイス "（1987、ISBN 0-201-17753-6）ですが、どこでもエラーメッセージに使用できます。があります 更新版 Mac OS X用。マイクロソフトのページユーザーインターフェースメッセージ同じことを言います:「...エラーメッセージの場合、問題、原因、ユーザーアクションを修正するためのユーザーアクションを含める必要があります。」

また、固定された文字列だけでなく、プログラムで既知の情報も含めます。例えば。エラーメッセージの「なぜそれが起こったのか」の一部は、「生のスペクトルファイルl： refdataformascotparser tripleencoding q1lcms190203_01doub rearg.wiff」を「ファイル」ではなく存在しません。

これを悪名高いエラー メッセージと比較してください。「エラーが起こりました。」

(ジョエルから盗んだ:o))

オプションを無効にしたり削除したりせず、ユーザーがオプションをクリックまたは選択したときに役立つメッセージを表示します。

データ構造の教授が今日指摘したように、プログラムがどのように動作するかについて平均的なユーザーに説明します。私たちプログラマーは、プログラムを非常に論理的に扱っているとよく考えていますが、平均的なユーザーはおそらく何をすべきかわからないでしょう。

  1. 目立たないシンプルなアニメーション機能を使用して、あるセクションから別のセクションへのシームレスなトランジションを作成します。これは、ユーザーがナビゲーション/構造の精神的な地図を作成するのに役立ちます。

  2. ボタンには、アクションの本質を明確に説明する短い (可能であれば 1 語) タイトルを使用します。

  3. 可能な場合はセマンティック ズームを使用します (良い例は、Google/Bing マップでのズームの仕組みです。領域に焦点を当てるとより多くの情報が表示されます)。

  4. 少なくとも 2 つの移動方法を作成します。垂直と水平。異なるセクション間を移動する場合は垂直方向、セクションまたはサブセクションのコンテンツ内を移動する場合は水平方向になります。

  5. 構造のメイン オプション ノードを常に表示しておいてください (画面のサイズとデバイスの種類が許可する場合)。

  6. 構造を深く掘り下げるときは、常に目に見えるヒントを残しておきます（つまり、パスの形式など) で現在地を示します。

  7. ユーザーにデータに集中してもらいたい場合 (記事を読んだり、プロジェクトを表示したりする場合など)、要素を非表示にします。- ただし、ポイント #5 と #4 には注意してください。

パワフルかつシンプルであること

ああ、デザイナーを雇うか、デザインスキルを学びましょう。:)

GUI の場合、標準は一種のプラットフォーム固有です。例えば。Eclipse で GUI を開発しているとき、これは リンク 適切なガイドラインを提供します。

上記のほとんどを読みましたが、記載されていないことが 1 つあります。

ユーザーがインターフェースを 1 回だけ使用することを意図している場合は、可能であれば使用する必要があるものだけを表示するのが最適です。

ユーザー インターフェイスが同じユーザーによって繰り返し使用されるが、それほど頻繁ではない場合は、コントロールを非表示にするよりも無効にする方が良いでしょう。ユーザー インターフェイスが変化したり、非表示の機能が時折ユーザーに明らかでない (または覚えていない) ことは、ユーザーにとってイライラさせられます。

ユーザー インターフェイスが同じユーザーによって非常に定期的に使用される場合 (そして、仕事の入れ替わりがあまりない場合、つまり、常にオンラインになる新規ユーザーはそれほど多くありません) コントロールを無効にすることは非常に役立ち、ユーザーは問題が発生する理由に慣れますが、不適切なコンテキストで誤ってコントロールを使用することを防ぐことができ、エラーを防ぐことができます。

単なる私の意見ですが、すべては単一のユーザー セッションに必要な内容だけでなく、ユーザー プロファイルを理解することに戻ります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top