検索アイコン機能の動作に関するベストプラクティス
アイコンをクリックしたときに検索アイコン機能がどのように機能するかを調べようとしています。これはレスポンシブウェブサイト用です。
私には3つのシナリオがあります小さいビューポートで表示してください：
1）検索ボックスが表示され、オーバーレイが画面の残りの部分を覆います。 （例 http://www.woolworths.co.za/ ）
2）検索ボックスが表示され、画面のコンテンツが押し下げられます。 （例 http://www.Microsoft.com/ ）
3）検索ボックスが表示され、コンテンツの一部が覆われます（例はありません）。
私の知る限り、モバイルのオーバーレイにはいくつか問題がありますか？
あなたが与えたすべての例はうまくいくでしょう。 1つは他のよりもデザイン内でうまく機能する場合があります。
ユーザーは、検索入力がポップアップする方法を気にしません。最高の検索フィールド
- バグがない
- 使いやすい
- 関連する結果を与える
- ユーザーが探しているものを見つけるのに役立つ（自動入力または代替）
したがって、私は機能性に重点を置き、審美性には重点を置きません。
（私は数か月前に検索フィールドで素晴らしい記事を読んだので、興味があるかもしれません。見つけたら、ここに投稿します）
他の人は違いは小さいと言っていますが、正しく理解するためにいくつかの詳細があります：
- コンテンツがカバーされている場合（オプション2および3）、誰かが誤って検索アイコンを押したり、気が変わったりした場合のために、カバーを取り除くの明確でシンプルな方法が必要です。理由。これは、オプション1または2を支持する点かもしれません。2の場合、オーバーレイの背景を「クリックオフ」（またはタップオフ）してクリアするのが一般的ですが、オーバーレイがない場合、クリックオフは、ユーザーがアクセスしたくないページに移動する可能性のあるリンクされた画像。
- オプション1のようにコンテンツがプッシュダウンされた場合、パフォーマンスの問題はありますか？一部のタイプのコンテンツまたはレイアウトは、一部のブラウザーでアニメーション化されたスライドダウン時に気が散るほどにぎこちないになる可能性があります。ユーザーが検索に集中できるようにすることが目的である場合、これは目的に反する可能性があります。テストしてください。
- 高度な検索リンク、ファセットドロップダウン、オートコンプリートなどなどの他に何かありますか？もしそうなら、それらを目立たせて気づかせたいのか、またはトランジションの一部として目立たないように見せたいのか、主にそれらを探している人が気づくのかという観点から、これらがいつどのように現れるかについて考える価値があります。
検索アイコンの操作と場所は、使用されているコンテキストに完全に依存します。 eコマースサイトの場合、アイテムの検索に使用されますか、それともサイト（専門家/会社のサイト）内の何かの検索に使用されますか？
その意図はあなたに答えを与えるでしょう。検索が目的のタスクフローにとって本当に重要である場合は、おそらく検索ボックスを常に開いたままにしておきます。