web-dev-qa-db-ja.com

GUI設計のベストプラクティスと原則

あなたにとって最も実用的で使いやすいユーザーインターフェースの設計または原則は何ですか？

あなたが実際に物事を本当に役立つものにしていると思うこれらのプラクティスを提出してください-それがあなたのユーザーのために働くなら、それを共有してください！

要約/照合

原則

  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]
user-interfaceprinciples
63
slashmais

ダイアログボックスで動詞を使用してみてください。

それは使用を意味します

alt text

の代わりに

alt text

53
kzotin

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

54
Victor

基本的な設計原則に従う

  • [〜＃〜] c [〜＃〜]ontrast-異なるものを作成するlook異なる
  • [〜＃〜] r [〜＃〜]epetition-画面および他の画面で同じスタイルを繰り返します
  • [〜＃〜] a [〜＃〜]lignment-画面要素を上に並べる！はい、テキスト、画像、コントロール、ラベルが含まれます。
  • [〜＃〜] p [〜＃〜]roximity-関連する要素をグループ化します。住所を入力するための一連の入力フィールドはグループ化され、クレジットカード情報を入力するための入力フィールドのグループとは区別される必要があります。これは基本的なものです ゲシュタルト設計法 。
26
Craig Pickering

決して「本当によろしいですか？」と尋ねます。無制限で信頼性の高い元に戻す/やり直しを許可します。

25
Jörg W Mittag

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

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

そのため、アプリケーションが何をしなければならないかを考えずに、おそらく退屈しそうなユーザーを考え、彼の意図に基づいて設計し、人生を楽にするようにしてください。

11
Jorge Córdoba

あなたがウェブのために何かをしている場合、またはそのことに関してフロント向きのソフトウェアアプリケーションをしているなら、あなたは本当にあなた自身にそれを読む義務があります...

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

8
Ali Parr

Webappsのパンくずリスト：
Tell-> The-> User-> Where-> She-> システム内にあります

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

7
kosoant

私は環境に適応しようとします。

Windowsアプリケーション用に開発する場合、 Windows Vistaユーザーエクスペリエンスガイドライン を使用しますが、Webアプリケーションを開発する場合、適切なガイドラインを使用します。オランダのWebサイトを開発するため、 " Drempelvrij "ガイドライン これは、World Wide Web Consortium（W3C）による Webコンテンツアクセシビリティガイドライン（WCAG 1.0） に基づいています。

これを行う理由は、新しいユーザーの学習曲線を減らすためです。

6
Davy Landman

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

最良の例は、誰かが OK そして Cancel 一部のWebサイトのボタン。ユーザーは OK 左側にあるボタン、および Cancel ボタンが右側にあります。つまり、アプリケーションの動作がユーザーが期待するものと異なる場合、ユーザーインターフェイスの設計に問題があります。

ただし、どの設計または設計パターンに従う場合でも、アプリケーション全体で設計と規則の一貫性を保つことをお勧めします。

6
Chad

可能な場合はいつでもユーザーに選択を求めないでください（つまり、構成ダイアログでフォークを作成しないでください！）

すべてのオプションとすべてのメッセージボックスについて、次のことを自問してください。

  • 理にかなっていますか？
  • ユーザーの邪魔にならない？
  • 私は彼にこれを課すことはユーザーにほとんど費用がかからないことを知るのに十分簡単ですか？

Palmハンドヘルドを例として使用できます。設定は本当に最小限であり、非常に満足しています。基本的なアプリケーションは十分に設計されているため、微調整の必要性を感じずに簡単に使用できます。わかりません、できないことがいくつかあります。実際、ツールに（反対ではなく）適応しなければなりませんでしたが、最終的にはこれが本当に私の人生を楽にします。

このWebサイトは別の例です。何も設定することはできませんが、使用するのは本当に素晴らしいと思います。

合理的なデフォルトを把握するのは困難です。また、簡単なユーザビリティテストでは、そのための多くの手がかりが得られます。

3
Carl Seleborg

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

3
Kramii

エラーメッセージを作成するときは、エラーメッセージを次の3つの質問への回答にします（この順序で）。

  1. どうした？

  2. なぜそれが起こったのですか？

  3. それについて何ができますか？

これは「Human Interface Guidelines：The Apple Desktop Interface」（1987、ISBN 0-201-17753-6）からのものですが、どこでもエラーメッセージに使用できます。 更新バージョン Mac OS Xの場合。Microsoftページ ユーザーインターフェイスメッセージ は同じことを言います： "...エラーメッセージの場合、問題を含める必要があります。原因、および問題を修正するためのユーザーアクション。」

また、いくつかの固定文字列だけでなく、プログラムが知っている情報も含めます。例えば。エラーメッセージの「なぜ発生したのか」の部分では、「ファイルが存在しません」ではなく、「生スペクトルファイルL：\ refDataForMascotParser\TripleEncoding\Q1LCMS190203_01Doub leArg.wiffが存在しません」を使用します。

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

2
Peter Mortensen

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

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

-

MC

2
Michael Carden

  1. 控えめでシンプルなアニメーション機能を使用して、あるセクションから別のセクションへのシームレスなトランジションを作成します。これは、ユーザーがナビゲーション/構造のメンタルマップを作成するのに役立ちます。

  2. アクションの本質を明確に説明する短い（できれば1ワード）タイトルをボタンに使用します。

  3. 可能な場合はセマンティックズームを使用します（良い例は、Google/Bingマップでズームがどのように機能するかです。エリアにフォーカスを当てるとより多くの情報が表示されます）。

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

  5. 常に構造のメインオプションノードを表示したままにします（画面のサイズとデバイスのタイプが許す場合）。

  6. 構造を深く掘り下げるときは、常に自分がどこにいるかを示す目に見えるヒント（パスなど）を保持してください。

  7. ユーザーがデータ（記事の閲覧やプロジェクトの表示など）に集中できるようにする場合は、要素を非表示にします。 -ただし、ポイント5と4に注意してください。

1
vasilis

（ジョエルから盗まれた：o））

オプションを無効にしたり削除したりしないでください。ユーザーがクリックまたは選択したときに役立つメッセージを表示してください。

1
slashmais

私のデータ構造の教授が今日指摘したように：あなたのプログラムがどのように機能するかについての指示を平均的なユーザーに与えてください。私たちのプログラマーは私たちのプログラムについてかなり論理的だと思うことがよくありますが、平均的なユーザーはおそらく何をすべきか分からないでしょう。

1
marioBonales

GUIでは、標準はプラットフォーム固有の種類で​​す。例えば。 EclipseでGUIを開発する際、この link は適切なガイドラインを提供します。

0
Hammad

強力かつシンプルに

ああ、デザイナーを雇う/デザインスキルを学ぶ。 :)

0
Nidonocu

私は上記のほとんどを読みましたが、私が言及していないことの1つは言及しました：

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

同じユーザーがユーザーインターフェイスを繰り返し使用する場合、あまり頻繁に使用しない場合は、コントロールを無効にする方が非表示よりも優れています。ユーザーインターフェイスの変更や非表示の機能は、ときどきユーザーにわかりにくい（または記憶されない）ユーザー。

同じユーザーが非常に定期的にユーザーインターフェイスを使用する場合（そして、ジョブに離職者が多くない、つまり常に多くの新しいユーザーがオンラインにならない場合）、コントロールを無効にすることは絶対に役立ちます。物事が発生する理由に慣れていたが、不適切な状況で誤ってコントロールを使用することを防ぎ、エラーを防止しました。

ただ私の意見ですが、それはすべて、単一のユーザーセッションに伴うものではなく、ユーザープロファイルの理解に戻ります。

0
Ryan Germann