63

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

あなたが実際に物事を本当に役立つと思う実践を提出してください - それがあなたのユーザーにとってうまくいくなら、それを共有してください!

まとめ・照合

原則

  1. 接吻。
  2. オプションが何を達成するかを明確かつ具体的にしてください。たとえば、選択に続くアクションを示す動詞を使用します (Impl. 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 ]
4

19 に答える 19

57

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

于 2009-12-10T17:50:29.300 に答える
53

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

使用という意味です

代替テキスト

それ以外の

代替テキスト

于 2008-09-18T08:15:43.760 に答える
27

基本的な設計原則に従う

  • コントラスト-異なるものを異なって見えるようにする
  • 繰り返し-画面と他の画面で同じスタイルを繰り返します
  • 配置-画面要素を並べます！はい、テキスト、画像、コントロール、ラベルが含まれます。
  • Proximity-関連する要素をグループ化します。住所を入力するための入力フィールドのセットはグループ化され、クレジットカード情報を入力するための入力フィールドのグループとは異なる必要があります。これは基本的なゲシュタルト設計法です。
于 2008-09-19T01:44:42.880 に答える
25

「よろしいですか？」と聞かないでください。無制限で信頼性の高い元に戻す/やり直しを許可するだけです。

于 2008-09-18T11:45:38.187 に答える
11

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

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

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

于 2008-09-18T08:31:50.150 に答える
8

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

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

于 2008-09-18T08:27:18.227 に答える
7

webapps のブレッドクラム:
Tell -> The -> User -> Where -> She -> Is in the system

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

于 2008-09-18T08:44:52.910 に答える
6

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

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

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

于 2008-09-18T08:02:57.533 に答える
6

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

最良の例は、誰かがいくつかのWebサイトのボタンOKとボタンを入れ替えた場合です。Cancelユーザーは、OKボタンが左側にあり、Cancelボタンが右側にあることを期待しています。つまり、アプリケーションの動作がユーザーが期待するものと異なる場合、ユーザーインターフェイスの設計に問題があります。

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

于 2008-09-18T08:03:00.170 に答える
3

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

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

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

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

この Web サイトは別の例です。何も構成することはできませんが、使用するのは本当にいいと思います。

合理的なデフォルトを理解するのは難しい場合があり、簡単なユーザビリティ テストを行うことで、その解決に役立つ多くの手がかりを得ることができます。

于 2008-09-18T08:57:59.353 に答える
3

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

于 2008-09-18T09:06:04.170 に答える
2

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

  1. どうしたの？

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

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

これは「Human Interface Guidelines: The Apple Desktop Interface」(1987、ISBN 0-201-17753-6) からのものですが、どこのエラー メッセージにも使用できます。Mac OS X 用 の更新版があります。Microsoft のページUser Interface Messages には、同じことが書かれています。 ."

また、固定文字列だけでなく、プログラムが認識している情報も含めてください。たとえば、エラー メッセージの「なぜそれが起こったのか」の部分については、「ファイルが存在しません」の代わりに「Raw スペクトル ファイル L:\refDataForMascotParser\TripleEncoding\Q1LCMS190203_01DoubleArg.wiff が存在しません」を使用します。

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

于 2009-08-06T12:38:54.977 に答える
2

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

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

--

MC

于 2008-09-18T08:39:58.693 に答える
1

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

于 2008-09-18T08:03:46.720 に答える
1

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

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

于 2008-09-18T07:59:08.277 に答える
1

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

  2. アクションの本質を明確に説明する短いタイトル (できれば 1 語) をボタンに付けます。

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

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

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

  6. 構造を深く掘り下げるときは、現在の場所を示す視覚的なヒント (パスの形など) を常に保持してください。

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

于 2014-10-01T07:06:29.780 に答える
0

パワフルかつシンプルに

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

于 2008-09-18T09:50:15.983 に答える
0

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

于 2014-01-07T14:42:46.663 に答える