よく知られているUIコンポーネントの固定機能と使用法を最もよく説明する方法
多くの場合、UIコンポーネントと明確に指定された機能を組み合わせて問題ないかどうかについて質問されます。ラジオボタンとチェックボックス。
時々私はそれが使い古された地面を踏んでいると感じて、誰かがリソースの良いリストを持っているかどうか、または標準化されたUIコンポーネント機能を人々に知らせることに焦点を当てているサイトを知っているかどうか知りたいです。すでに十分に確立されていて、実験したり、そこから離れたりする必要がないパターン。
多くの個人 companies には独自のコンポーネントライブラリがあり、よく知られているコンポーネントとその使用法には多くの重複があることは明らかです。フォームフィールドはユーザーが情報を入力し、ボタンはクリックするためのものであることは自明のようですが、よく知られているコンポーネントとその使用法の定義の中央リストは、人々がよく尋ねるいくつかの質問を解決するのに役立つでしょうUI/UXの動作と発生する問題について。たとえば、「ラジオボタンのリストでユーザーが2つのオプションを選択できるようにしてもよいですか？」明らかに、これはラジオのポイントを打ち負かし、チェックボックスまたは他のUIの代替案を必要としますが、どこかで明確に定義されている場合、人々はこれらの質問をする必要はありません。
UIコンポーネントとパターンについて通知するWebサイトがいくつかあります。最も有用なものをリストしています：
1。ウェリー
ユーザーのニーズ、アプリケーションのニーズ、デザインのコンテキストに分割されたUIコンポーネント、原則、パターンの包括的なリスト。彼らのライブラリは、ナビゲーション、検索、データ、ショッピング、入力、フィードバック、その他のパターンで構成されています。各パターンは次の点で説明されています。
- 問題
- 解決
- いつ使用するか
- どうやって
- なぜ
- 例
- 実装
- 文献
2。UI-パターン
このサイトでは、ユーザーインターフェイスのデザインパターンと説得力のあるデザインパターンのリストを提供しています。各パターンは次の点で説明されています。
- 問題の概要
- 例
- 使用法
- 解決
。パターン
UIコンポーネントとパターンは、次の点で説明されています。
- パターンはどのような問題を解決しますか？
- いつそれを使うのですか？
- それの使い方？
4。ZURBライブラリ
ZURBには、スタイル、タイプ、色、デバイスに応じてフィルタリングできるUIコンポーネントのリストがあります。さらに、ボタン、アコーディオン、カードなどのビルディングブロックの情報とコードを提供します。UIの決定を迅速に行うためのヒントも提供されます。例えば -
「フォスターのテストによると、3行（ハンバーガーアイコン）の下に「メニュー」という単語を追加すると、ボタンの使用が7.2％増加します。」
デザイナーや開発者にとって本当に役立つサイト。
5。梨
マークアップとスタイルの一般的なパターンのコード例が含まれています。これは、開発者にとって非常に役立ちます。
さらに、本Designing Interfacesもお勧めします。 IAとUIの原則とパターンに関する多くの有用な情報があります。
お役に立てれば！
ウォータークーラーです。以前に使用した可能性があります。
タップは赤と青です。それはあなたにとってどういう意味ですか？青い蛇口を押すとお湯が出てきたらビックリしますか？やけどする可能性はありますか？
インタラクティブなものには 知覚されたアフォーダンス ;があります。彼らがどのように見えるかは、彼らが何をし、どのように使うかを教えてくれます。そのため、チェックボックスはチェックボックスのように見え、ラジオボタンはラジオボタンのように見えます。彼らの外見はショーのためだけのものではなく、彼らに何を期待すべきかを示しています。外観や動作の切り替えは、青色の蛇口からお湯を出すようにしたり、ドアの「プッシュ」側に「プル」というラベルを付けたりするようなものです。
よく知られているソースからの引用が必要な場合は、Jakob Neilsonによる Checkboxes vs. Radio Buttons を参照してください。特にこれらのガイドラインが重要である理由 セクション：
チェックボックスとラジオボタンの正しい使い方を主張するとき、私はうるさいだけですか？いいえ。GUIの標準に従い、コントロールを正しく使用することには、使い勝手の良い理由があります。
最も重要なことは、以下の設計基準は、コントロールが何をするか、そしてどのように操作するかを予測するユーザーの能力を強化します。チェックボックスのリストを見ると、ユーザーは複数のオプションを選択できることがわかります。ラジオボタンのリストを見ると、1つしか選択できないことがわかります。 （もちろん、すべてのユーザーがこれを知っているわけではありませんが、特に1984年以来、これが設計標準となっているため、多くの人が知っています。）
多くの人々が標準のGUIウィジェットの操作方法を知っているため、これらのデザイン要素を採用することで、テクノロジーに対するユーザーの習熟感が正しく向上します。逆に、標準に違反すると、ユーザーインターフェースが不安定になり、警告なしに何かが発生する可能性があります。たとえば、ラジオボタンをクリックしてもすぐには影響がないと想定しているため、選択を行った後、「OK」を押す前に選択を検討できるとします。このような場合、Webサイトがこの標準に違反し、選択項目を入力すると予期せず次のページに移動するのは不快です。さらに悪いことに、サイトの他の場所でフォームを操作するときに何が起こるかを恐れてしまいます。
[...]
ラジオボタンが必要なときにチェックボックスを使用するというミスをプロのインタラクションデザイナーが犯すことはありません。これら2つのコントロールの違いは、インタラクションデザインクラスで最初に教えられることの1つです。したがって、正しいウィジェットを使用する最後の理由は次のとおりです。そうしないと、アマチュアと見なされます。
あなたが求めているのは、標準的なUIコンポーネントの定義/ガイドラインの標準的なセットだと思います。
私にとって、便利なセットは次のとおりです。
- 簡潔なので、読者はすばやく参照できます。
- 正確ではあるがあまり技術的ではないので、専門家と一般の視聴者の両方に役立ちます。
- すべての主要なコントロールをカバーするのに十分包括的ですが、見た目が悪くなるほど見た目が広いわけではありません。
私にとってその目的に合うリファレンスは、標準のUIコントロールのusability.govページです。
例、使用方法の推奨事項、追加の参考文献など、特定のコントロールの使用に関するガイドラインについては、usability.comの 詳細なガイドライン （第13章）を参照してください。
Usability.govは米国の保健福祉省によって管理されており、サイトはユーザーエクスペリエンスとインターフェイスの設計、実践、および原則のための公開情報ポータルとして明示的に設計されています。
nb。経験豊富なコメンタの避けられない群れにとっての課題は、OPが指摘するように、異なるフレームワークとプラットフォームが標準コントロールをわずかに異なる方法で実装するため、真に標準的なソリューションには各フレームワーク（MSDN、Androidなど）の詳細が含まれるということです。しかし、デザイナーは常に実用性を選択しており、usability.govサイトでは、このトピックに関する一般性と具体性のwikiのようなバランスがうまく機能しているようです
信頼できる情報源： "About Face 3"-Chapter 21
http://www.Amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111
これらのアイテムのほとんどは、コンシューマコンピュータが視覚化される前の時代からまだ変則的な要素であると思います。
- フロッピーディスク
- 電話のアイコン
- ラジオボタン
- フォルダー
彼らは、デジタルの世界への大きな飛躍に対応するのを助けられました。現在、これらのアイテムのほとんどは本当に時代遅れであるか、まったく知られていない（フロッピー、クラシックな電話アイコン）。そのため、ラジオボタンがラジオボタンと同じように機能する理由を説明する手助けにはならないでしょう。現実との触れ合いがなくなったので、慣例と一貫性を残しました。ハンバーガーアイコンはその1つの例です。それは実際の同等物はありませんが、ほとんどすべての人がおそらく取得するほぼすべての場所で使用されているため、（まだ形成中の）慣習として使用されています（ただし、私見は銀の弾丸として誤用されています）。それでもグラバー（実生活で同等のもの）と間違われる可能性があります。
実際のところ、大規模なウェブサイトに記載された世界規模の慣例がいくつかありますが、ほとんどの企業は、競争からアイデアを取り入れたくありません彼らは競争よりもよく知っているためです、これらの例の1つは共有ボタンです： https://bold.pixelapse.com/minming/share-the-icon-no-one-agrees-on
私にとって、良い方向への1つの方法は、OS規則（アプリ間規則）とアプリ内規則の使用です。前者と後者は、多くの場合、パターンライブラリ（別名スタイルガイド、別名ウィジェットライブラリ...）で記述されています。これは私にルールを伝えるのに役立ち、プラットフォーム内でルールを実際に正しく使用するようにプッシュします。
さて、最大の混乱は実際には、1つの企業または個人が慣習に従わないために（多くの場合、創造性と誤解されるため）従わないためだと思います。あなたが逸脱することを許されているのはごく一部のケースだけであり、その理由には非常に正当な理由があるはずです（+それを証明するユーザーデータでバックアップされています）。
以下のリンクでUI要素の定義を見つけることができます。
チェックボックスとラジオボタンの定義方法を次に示します。
チェックボックスチェックボックスを使用すると、ユーザーはセットから1つ以上のオプションを選択できます。通常は、縦のリストにチェックボックスを表示するのが最善です。リストが長すぎてスクロールが必要な場合や、用語の比較が必要な場合も、複数の列を使用できます。
ラジオボタンラジオボタンは、ユーザーが一度に1つの項目を選択できるようにするために使用されます。
http://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html
私がMicrosoftにいて、UIコンポーネントライブラリを構築しているときに、少し実験を試みました。つまり、DataGridとTree Controlを保持しました。これらも同様に作成するのに費用のかかるコントロールである場合、ユーザーベースがどのように反応するかを確認したかったのです。
面白いことが起こった、ListBoxes、Radio + Checkboxesがいくつかの興味深い方法で使用され始めました。すべてのアイデアが素晴らしかったわけではありませんが、それは今日私たちの前にある開発者中心のアートの混乱の瞬間になりました。
その仕事のインタビューループで、私のインタビュアーの1人がWindowsのスタートボタンの後ろの男でした。私は彼に尋ねました-「どうやって...どうやってそれを思いついたのですか、それがどのように機能することを知っていましたか？」 -答えは「それはプレースホルダーであり、他の誰かがそれに取り組んでいると思った」でした。
ここでの私のポイントは単純です。多くの場合、これらの制御の多くに関わる決定には行動科学があると想定しますが、実際には、「 猿のたとえ 。効率的で使い古された道路があるという仮定の下で、同じパターンを繰り返し続けるだけです。なぜそれを変更するのでしょうか。
すべてのユーザーインターフェースは予想される質問への回答です。私たちは、UXスペースで多くの時間とエネルギーを費やして、作品を使用する可能性のある人間について考えています。私たちは彼らの行動を考え、彼らが尋ねようとしている質問の種類に関する潜在的な理論を熟考またはテストし、次にそれらにどのように答えるべきかについてより多くの理論を提供します。データを収集し、すすぎ、繰り返します。
今後の方向性は、物事をさらに破壊し始め、もう一度テストすることです。たとえば、最近私はテストを実行して、ユーザーが許容できるグレーの色合いを調べました。私たちは皆、AAアクセシビリティのコンプライアンスマトリックスを見てきましたが、私にとっては、マーケティング部門にグレイの選択が悪いことを証明したかったのですが、意見ではなくデータが必要でした。
回答にすぐに気が付きました-結局のところ、ほとんどのユーザーは気にしていませんでした！ -それらが無効にされなかったのは確かですが、それでも、知って作業するのは興味深いです。
iOSはプルダウン/コンボメニューの動作方法を変更しましたが、大量脱出を作成しませんでしたか？私たちはパターンを見て、自然に感じ、次に進みました。