web-dev-qa-db-ja.com

スクロール時にコントロールがフェードアウトしますか?

バックグラウンド

このアプリケーションには、連絡先のリストビューがあります。リストに加えて、セグメントコントロールを介した連絡先タイプのフィルタリングを提供するフィルターパネルがリストの上部にあります。

また、セグメントコントロールの下にある連絡先を無料で検索するためのテキストフィールド。 (このフィルターパネルの上にはメインタブバーもあるので、簡単に言うと、3列のインタラクティブコントロールがあります)

問題

このフィルターパネルはビューポート内でかなりのスペースを占め、ユーザーがスキャンしたときにリストに表示される連絡先の量が損なわれます。

したがって、ユーザーがスクロールを開始したときにフィルターパネルをフェードアウトさせて、ユーザーがスクロールを停止した後、少し遅れて後でフェード/ポップインする機能を導入することに興味があります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

質問

私の質問は、これが良いアイデアになるかどうかです。リストのスキャン可能性が向上するので良いのでしょうか、それとも、パネルがスクロール時にフェードイン/フェードアウトし続けると邪魔になるか混乱するように見えるので、悪い考えでしょうか?

免責事項:私は、正しいアプローチを見つけるために、これについてA/Bテストを実行する必要があると考える人が多いと思います。これはもちろん、このアイデアが前進して適切なフェージング遅延などを見つける場合に行われます。しかし、現時点ではまだ可能ではありません。理論的または事実的なアイデアを聞いて、それが良いかどうかに興味があるだけですアイデア

9
AndroidHustle

あなたが提案しているパターンは、Google Nowで使用されているパターンに似ています。これは、コントロールをフェードアウトするだけでなく、モーションを考慮するという点で素晴らしいと思います。同じことをお勧めします。

基本的な考え方は次のとおりです。最初に、画面を表示すると、検索ボックスとその他のコントロールが上部に固定されています。

enter image description here

下にスクロールし始めると、上部に固定されているかのように、コントロールが消え始めます。

enter image description here

これで、ユーザーとして、下にスクロールするとコントロールが離れてしまったことがわかります。したがって、それらを元に戻すために、自然に上昇したいと考えています。しかし、上に戻る必要はなく、上にスクロールし始めるとすぐに、Google Nowは次のようにコントロールを押し下げ始めます。

enter image description here

このようにして、コントロールを非常に迅速に戻し、コンテンツの上に浮かびます。

enter image description here

コントロールを元に戻したので、再び下にスクロールし始めるまで、コントロールは一番上に残ります。

これは少し混乱するように見えるかもしれませんが、実際には非常に流動的です。

5
dhm

面白い小説ではあるが、それは悪い考えだと私は主張する。

スクロールするときだけビューポートを大きくするのは意味がありません。本当にスペースが必要なのはそれを読むとき、つまりスクロールしないときだからです。さらに、オプションが表示された後、2番目のアクションで再び表示されると、混乱や混乱を招く可能性があります。

考えられる改善の1つ(ただし、独自の問題があるもの)は、メニューと検索バーをスクロール可能な領域の内側上部に接続することです。そうすれば、ユーザーはそれを非表示にするコントロールを感じる可能性が高くなり、より大きなビューポートを提供しながら、それを元に戻す方法がわかります。問題は、使用するたびに一番上までスクロールする必要があることです。アプリケーションによっては、これがメリットよりも大きな不快感になる場合があります。

5
JohnGB

ユーザーが連絡先領域に指を置くか、スクロールを開始するとすぐに、メニューがほぼ透明になった場合はどうなりますか?連絡先のリストが長い場合は、一番上までスクロールするのは良くない経験になる可能性があることに同意します。良いニュースは、タッチスクリーンタブレットでは スクロールを気にしないでください ですが、Webサイトでは約75%の人がスクロールしません。これが携帯電話のアプリにどのように変換されるのか知りたいのですが、私は人々がスクロールして自分の欲しいものを見つけることに消極的ではないことを想定しています。

私の個人的な観察から、iPhoneにiBooksを使用していて、自分のライブラリーを検索したい場合、検索バーを検索するのは常に骨の折れることです。これが初めて起こったとき、私は混乱しましたそれは私に発生しなかった検索が画面から消えた下にスクロールしたとき。したがって、この問題は間違いなく関連しています。

検索とフィルターが多くの領域を占める場合、多分 tab が追加機能で開きます。

1
Tyler Langan

これに注意してください。たとえば、携帯電話によくアクセスするニュースサイトでは、スクロール中に広告が非表示になります(バグが原因の可能性があります)。物事をフラッシュインおよびフラッシュアウトすることはかなり気を散らし、スクロールをほとんど中断します。

スクロール中にコントロールが上部領域にスライドする、微妙で迅速な移行を回避できる場合がありますが、目をそらすように注意してください。スクロールは通常、ユーザーが何かをスキャンしていることを意味しますが、これは難しい視覚的な作業です。

別のオプションは、ユーザーが下にスクロールするとツールバーを圧縮することです。多くのアプリはすでにこれを行っており、アップスクロールでの検索のみを明らかにしています。デスクトップアプリを下にスクロールすると、Facebookも物事を凝縮すると思います。凝縮は視覚的にはスクロールの一部なので、煩わしさが軽減されます。これは明らかに、ユーザーが残りのコントロールにアクセスするために最上部にスクロールして戻ることができるかどうかに依存します。

1
Alex Feinman

まあ、私はこれらを常にあなたの顔に持っていることは負担だと思います、小さな画面で同時に情報が多すぎます。

それについて考えてみましょう。ユーザーが1回のセッションで何回フィルターをクリックするでしょうか。つまり、この画面で連絡先をスキャンすると、関数としてより頻繁に使用され、何がより少なくなります。 (重要度が低いほど重要)1-上部のボックス2-連結リスト3-検索ボックス4-機能フィルター。

これらすべてをモバイルデバイスの同じ画面に表示することは、認知的負荷が大きすぎるため、少なくとも1つを犠牲にする必要があります。この場合、それは機能フィルターです。

それらを常にそこに置くことができると同時に、それらを非表示にしない方法があります。ヘッダーの右上隅で、それは自然に感じられ、さらに、それはメンタルモデルです。

Facebook iPhoneアプリに移動し、右上隅のフィルターオプションを見て、そこに機能を含めます。並べ替え:A-トップストーリーB-最新。

デフォルトのiphoneキットに付いているヘッダーストリップがないことは知っています。しかし、それでも、その下にトップレベルのボックスをスクロールさせることができます。

0
Motaz Al-Thaher