45

ユーザーフレンドリーな GUI を作成するために知っている\使用するテクニックは何ですか?

特に役立つと思われる次のテクニックを挙げることができます。

  • ノンブロッキング通知 (Firefox3 や Vista のトレイ領域のポップアップ メッセージのようなフローティング ダイアログ)
  • 例として「保存」ボタンが
    ないMS OneNote。
    IM クライアントは会話履歴を自動的に保存できます
  • 統合検索
    ヘルプ ファイルを検索するだけでなく、UI 要素を検索可能にします。
    Vista は、そのような GUI に向けて良い一歩を踏み出しました。
    Scoutアドイン Microsoft Office は本当に素晴らしいアイデアでした。
  • コンテキスト指向の UI (MS Office 2007 のリボン バー)

リストされたテクニックのようなものをソフトウェアに実装していますか?

編集: Ryan P
が述べた ように、使用可能なアプリを作成する最良の方法の 1 つは、ユーザーの立場に身を置くことです。私はそれに完全に同意しますが、このトピックで見たいのは、一般的な推奨事項ではなく、特定のテクニック (上記のような) です。

4

21 に答える 21

32

ユーザーに質問をする場合は、はい/いいえの質問にしないでください。時間をかけて新しいフォームを作成し、動詞を mac のように選択肢として入れます。

例えば：

 Would you like to save?    
     Yes        No

あるべき:

  Would you like to save?
    Save        Don't Save

ここに詳しい説明があります。

于 2008-09-04T00:18:12.593 に答える
26

スティーブ・クリュッグの素晴らしい本Don't make me thinkをチェックしてください。
これは Web に焦点を当てていますが、コンセプトの多くはブレンダーから車のダッシュボードまで、あらゆるものに適用できます。
取り上げるトピック:

  • ユーザーパターン
  • スキャン用の設計
  • コピーの賢明な使用
  • ナビゲーションデザイン
  • ホームページのレイアウト
  • ユーザビリティテスト

彼はAdvanced Common Senseというブログも持っています。

そしていくつか のランダムな UI 関連
のリンク
:

于 2008-09-04T03:25:15.293 に答える
16

第一原則：ウィルフレッド・ジェームズ・ハンセン

  • ユーザーを知る
  • 暗記を最小限に抑える
  • オペレーションの最適化
  • エラーのエンジニア

その後の展開:テオ・マンデル博士

ユーザーを管理下に置く

  • モードを慎重に使用する(モードレス)
  • ユーザーがキーボードまたはマウスを使用できるようにする(柔軟)
  • ユーザーがフォーカスを変更できるようにする(中断可能)
  • 説明的なメッセージとテキストを表示する(役立つ)
  • 即時かつ可逆的なアクションとフィードバックを提供する(寛容)
  • 意味のあるパスと出口を提供する(ナビゲート可能)
  • さまざまなスキル レベルのユーザーに対応する(アクセス可能)
  • ユーザー インターフェイスを透明にする (促進的)
  • ユーザーがインターフェイスをカスタマイズできるようにする(設定)
  • ユーザーがインターフェイス オブジェクトを直接操作できるようにする(対話型)

ユーザーのメモリ負荷を軽減

  • 短期記憶を解放する（覚えておく）
  • Recall (認識)ではなく、Recognition に頼る
  • 視覚的な合図を提供する(知らせる)
  • デフォルト、元に戻す、およびやり直しを提供する(寛容)
  • インターフェイスのショートカットを提供する(頻度)
  • オブジェクトとアクションの構文を促進する(直感的)
  • 現実世界のメタファーを使用する(転送)
  • ユーザー プログレッシブ開示(コンテキスト)
  • 視覚的な明快さを促進する(整理する)

インターフェイスの一貫性を保つ

  • ユーザーのタスクのコンテキストを維持する(継続性)
  • 製品内および製品間で一貫性を維持する(経験)
  • インタラクションの結果を同じに保つ(期待)
  • 美的魅力と誠実さ（態度）を提供する
  • 探索を促す(予測可能)
于 2008-10-08T18:01:58.703 に答える
11

あなたのリストに追加するには、aku、私は探索可能性を私の最優先事項の 1 つに挙げます。基本的には、ユーザーに安心して機能を試してもらいたいです。彼らは、自分の行動が取り返しのつかないものになるのではないかと恐れて、何かを使うことを決してやめるべきではありません。最も一般的には、これは元に戻す/やり直しコマンドを使用して実装されますが、自動バックアップなどの他のオプションが利用可能であることは間違いありません。

また、(データ入力アプリケーションではなく) よりプロセス指向のアプリケーションの場合は、ユーザーをもう少しガイドするインターフェイスを実装することを検討します。ここではMicrosoft のInductive User Interface ガイドラインが役に立ちますが、やりすぎないように十分注意する必要があります。

最後に、テキストを含むあらゆるものと同様に、ユーザー インターフェイスをできるだけスキャンできるようにします。たとえば、コマンド/オプションが表示される見出しがある場合は、疑問語ではなくアクション ワードを最初に配置することを検討してください。「保存しない」ボタンのテキストは前の段落のコンテキストに依存していないため、Maudite の指摘もスキャン可能性の良い例です。

于 2008-09-16T17:12:08.340 に答える
6

誰も使用していない便利なテクニックは、無効になっている UI コントロールにツールチップを追加して、コントロールが無効になっている理由を説明することです。したがって、無効になっているリストボックスがあり、無効になっている理由が明確でない場合は、その上にカーソルを合わせると、無効になっている理由が表示されます。「画面上の 2 つのテキスト ボックスが空白のままになっているため、または一部のフィールドに十分な文字を入力していないため、または特定の操作を行っていないため、無効になっています。」のようなものを見たいです。

私はそのような状況に非常に多く陥り、イライラします。ときどき、ソフトウェアのフォーラムに投稿して、ツールチップがすぐに役立つはずなのに、コントロールがグレー表示されている理由を尋ねることになります! これらのソフトウェアのほとんどには、この種のシナリオでは役に立たないヘルプ ファイルがあります。

ソフトウェアについて何も知らないふりをして、使ってみてください。ただし、アプリに対してすでに特定の心構えがあるため、これは実用的ではありません。そのため、仲間の開発者や友人がアプリを使用しているのを見て、問題点を探し、フィードバックを求めてください。

于 2009-03-11T19:49:52.253 に答える
4

デザインについて考えるのに役立つ古典的な本の 1 つは、Donald Norman の「The Design of Everyday Things」です。彼は素晴らしい実例を挙げています。たとえば、ドアを適切に設計する場合、「押す」および「引く」というラベルを追加する必要はありません。引っ張ってもらいたい場合は、ハンドルを置きます。押してもらいたい場合は、平板を置きます。それを間違って行う方法はありません。彼らはそれについて考える必要さえありません。

これは良い目標です。物事を明確にすることです。ユーザーが間違ったことをしようとは決して思わないことは明らかです。ストーブに 4 つのノブがあり、それぞれが目の横にある場合、各ノブが隣の目を制御していることは明らかです。ノブがすべて左側に一直線に並んでいる場合は、それらにラベルを付ける必要があり、ユーザーは立ち止まって考える必要があります。悪いデザイン。彼らに考えさせないでください。

別の原則: ユーザーが間違いを犯した場合、非常に簡単に元に戻すことができます。Google の画像ソフトウェア、Picasa がその良い例です。写真の切り抜き、色の変更、修正を自由に行うことができます。気が変わった場合は、たとえ 1 か月後であっても、変更を元に戻すことができます。明示的に変更を保存した場合でも、Picasa はバックアップを作成します。これにより、何も害を及ぼさないため、ユーザーは自由に遊んだり探索したりできます。

于 2008-09-04T00:59:20.323 に答える
3

私は、UIパターンがこの種のものの有用なリファレンスであることに気づきました。これは、古典的なGoFデザインパターンの本のように配置されており、各パターンの説明には次のものが含まれています。

  • パターンが解決する問題
  • 動作中のパターンの例
  • パターンのサンプルユースケース
  • パターンを実装するためのソリューション
  • ソリューションの理論的根拠
于 2008-09-04T17:41:17.717 に答える
2

本当に良いフィードバックは非常に重要です。クリックできるものとできないものを明確にするなどの単純なことでも、見落とされたり、微妙すぎたりする可能性があります。バックグラウンドで何かが発生する可能性がある場合のフィードバックは素晴らしいです。Gmailでは、何かが送信中か読み込み中かを知らせるステータスリボンが上部に表示されるのは素晴らしいことですが、何かが正常に送信されたか、まだ読み込まれていることを知らせるのはさらに良いことです。

「イエローフェード」テクニックは、RoRの群衆の間で人気があり、同様のことを実現するものです。ユーザーに「何が起こったのか」という質問をしてほしくない。または「これを行うとどうなりますか？」

私がよく使っている最近人気が高まっているもう1つのトリックは、適切な編集です。別の「編集」画面で一部のデータを表示する（または表示をスキップして編集画面のみを表示する）代わりに、一部のデータを適切にレイアウトしてクリックするだけで編集できる方が、多くの場合、よりユーザーフレンドリーです。その一部。この手法は、実際には、データの読み取りが編集よりも頻繁に行われる場合にのみ適切であり、本格的なデータ入力には適していません。

于 2008-09-04T18:00:05.067 に答える
2

明らかなことの1つは、同じタイプのアクションを実行する場合、画面間のボタン、メニュー、リンクなどの位置、色、フォントサイズなどを（少しでも）変更しないことです。

于 2008-09-04T08:34:29.327 に答える
2

検索を実装する場合は、 Locate32や Google Suggest が現在行っているようなライブ検索にします。今では検索ボックスで「Enter」を押さなくてもよくなりました。

于 2008-09-04T00:43:14.637 に答える
1

エンタープライズソフトウェアを使用している場合、多くのユーザーは低解像度の小さなモニターを使用します。または、古い場合は低解像度で表示されるため、巨大なボタンが表示されます（24インチのモニターで800x600を見たことがあります）。古い15インチのモニターは低解像度（800 x 600）であるためです。私は時々、アイドル状態よりも少ない状態でプログラムがどのように見えるかを見ることができます。エンタープライズユーザーは与えられたものをほとんど受け入れる必要があることを私は知っていますが、800x600の画面に収まらないWinFormを設計する場合、それは誰にも役立ちません。

于 2008-09-04T17:30:04.063 に答える
1

これは、Mark Miller が優れた UIの作成方法について語っている DotNetRocks ポッドキャスト エピソードです。番組のタイトルは .NET rocks ですが、このエピソードでは、プログラム ユーザーの生産性を向上させる UI の作成方法に関する一般的な経験則について説明しています。

エピソード抜粋はこちら

優れたユーザー インターフェイスの設計は、いくつかの優れたルールを守り、よくある間違いを避けることで実現できます。機能するユーザー インターフェイスを作成するのに、ラテ シッピンのタトゥーを入れて MacBook を運ぶデザイナーである必要はありません。

于 2009-03-11T19:54:44.097 に答える
1

ソフトウェアを使用するときに実行する個々のタスクを決定する前に、まずユーザーの最終目標について考えてみてください。About Faceという本には、この種のことについて優れた議論があり、かなり長いですが、非常に興味深く、洞察力に富んでいます。ソフトウェア設計の改善に関する彼らの提案の多くが google docs で使用されているように見えることに注目するのは興味深いことです...

もう 1 つは、ユーザー インターフェイスをできるだけシンプルかつクリーンに保つことです。

于 2009-03-11T20:03:14.950 に答える
1

私は次の 3 つのガイドラインに従うのが好きです。

  1. 標準 - 既知の標準/パターンに従い、尊重するすべての製品のアイデアを再利用します
  2. シンプル - ソリューションをシンプルに保ち、簡単に変更できるようにします (必要な場合)。
  3. エレガント - 少ないものでより多くを達成
于 2010-05-04T17:18:42.057 に答える
0

私が見つけた最良のテクニックは、自分自身をユーザーの立場に置くことです。GUI から何を見たいか、それを前面に出します。これにより、これらのことを最初に実行してから、そこから作業する必要があるため、優先順位を付けることができます。

これを行うために、「有用なレイヤー」を見つけて、きれいに見えるまでレイヤーを追加/削除しようとします。基本的にレイヤーを見つけるために、GUI に必要なすべての機能、GUI に必要なすべての機能、および GUI が持つと便利なすべての機能のリストを作成します。次に、それらをグループ化して、すべてに論理的な順序があり、グループ化が「レイヤー」になるようにします。レイヤーから、最も重要な機能 (または日常の操作に使用されるもの) を追加すると、それが最も重要な部分になり、それらのアイテムの周りの機能に取り掛かります。

最も難しいことの 1 つはナビゲーションです。これをどのように役立つようにするかという用途が非常に多いためです。これは、レイヤーが本当に役立つ場所です。メニューをレイアウトする方法、他の部分がどのように相互作用するか、どの部分を非表示にできるかなどを簡単に確認できます.

これを行う最も簡単な方法は、ユーザーが日常的に何をどのように機能しているかを確認することから始めることです。これにより、ユーザーの立場に立つことが容易になります (さらに良いのは、数日間仕事をすることです)。 . 次に、いくつかのデモンストレーションを作成し、それらがペーパー プロトタイプであってもユーザーの前に置きます (このプロセスについては、Carolyn Snyder による Paper Prototyping という本があります)。それからビルドを開始し、頻繁にビルドされるため、ユーザーの前に置きます。

また、O'Reilly から出版された Jenifer Tidwell による Designing Interfaces という本もお勧めします。

于 2008-09-03T23:35:36.797 に答える
0

提示されたリストの項目は、実際には状況に依存します。アプリケーションごとに異なります。保存ボタンが必要なアプリケーションもあれば、不要なアプリケーションもあります。いくつかの条件では、モーダル ダイアログ ボックスが保証されますが、保証されない場合もあります。

使いやすいインターフェイスを設計するための私の一番のルールは、既存の UI 規則に従うことです。ユーザーが今まで使ったことのない UI ほど、ユーザーを混乱させるものはありません。Lotus Notes はこれまでに作成された中で最悪のユーザー インターフェイスの 1 つを持っています。それは、ほぼすべての操作で一般的な UI 規則に反していたためです。

UI の特定の部分をどのように設計すべきか疑問に思っている場合は、同様の機能を提供するいくつかの標準的でよく知られているアプリケーションを考えて、それらがどのように機能するかを確認してください。

于 2008-09-04T00:01:24.083 に答える
0

UI にデータ入力や操作 (ビジネス アプリの典型) が含まれる場合は、ユーザーが一連のデータ項目を可能な限り操作できるようにすることをお勧めします。また、経験豊富なユーザーが UI をシーケンシャルな方法 (アクセラレータ キー、ハイパーリンクなど) ではなく、非常にランダムに操作できるように設計するようにしてください。

于 2008-09-04T00:05:17.413 に答える
0

私の個人的なお気に入りの 1 つを紹介します。ダイアログ ボックスは絶対に避けてください。真に優れた UI では、ダイアログ ボックスをポップアップ表示する必要はほとんどありません。本当に最後の手段としてのみ、それらをプログラムに追加してください。

詳細については、開発者向けのわかりやすい UI のヒントをご覧ください。

于 2009-04-07T17:30:22.497 に答える
0

Coding Horror ブログでは、定期的にすばらしいアイデアが提供されています。いくつかの例:

  • 探索的および漸進的な学習
  • 自己文書化ユーザー インターフェイス
  • 機能のインクリメンタル検索/スマート キーボード アクセス
  • タスク指向のデザイン (メニューとツールバーの代わりにリボン)
  • 常に確認する代わりに元に戻す機能を提供する

別の側面:スケーラブルなアイコンを使用して、異なる解像度のビットマップを維持することなく、複数のユーザーの画面解像度の問題を解決します。

于 2009-05-09T21:32:06.417 に答える