web-dev-qa-db-ja.com

スクロール可能なコンテンツボックスを備えたダッシュボードのUXソリューション?

だから私はダッシュボードのUIデザインを思いつきました、それは次のように構築されています:

ダッシュボードには、追加されたボックスの全体の高さに応じてアクティブ化されたスクロールがあります。ここでの問題は、これらのボックスがサイズ変更可能であるため、これらのボックスにも(コンテンツに応じて)スクロールがあることです。したがって、ユーザーがダッシュボードのボックスを表示するために下にスクロールしようとしたときに、コンテンツボックス内を下にスクロールすることがありました。現在、ボックス間に20pxのマージンがありますが、ダッシュボード内でスクロールしたいときに、ユーザーがこれらのスペースをターゲットにしようとするのは面倒です。

かなり、それはひどい経験をもたらします。ダッシュボードでこれらの状況を処理するためのベストプラクティスがあるかどうかはわかりませんが、この問題を解決したヒントや他のページへのリンクは高く評価されます。

編集:

アイデアを視覚化するために、私が達成しようとしているのは https://tweetdeck.Twitter.com のようなものですが、ボックスは水平ではなく垂直に積み重ねられています。

水平方向のデザインを採用しない理由は、水平方向のスクロールが自然に発生せず、コンテンツを垂直方向にスキャンするのも簡単だからです。私はモバイルでは横型のデザインが好きですが、デスクトップデバイスではそれほどではありません...私はどんな解決策にもオープンです。

EDIT2:スクロール中にシフトボタンを押したままにして、親スクロールバーが確実にスクロールするようにしようと考えていました(ユーザーに表示されるプロのヒントとして追加します)。モバイルについては、横型のデザインを適用しますが、皆さんはどう思いますか?

3
pabloBar

ユーザーアクション駆動型のスクロールを使用するとヘルプが表示される場合があります

私が正しく理解していれば、グローバルスクロール(ページ全体に適用)と特定のカード内の別のスクロールがあります。これで、垂直方向にスクロールしているときに、ユーザーの意図したアクション/メンタルモデルに反する動作が発生するため、ネストされたスクロールが苛立ちを引き起こしています。

あなたが試すことができるアプローチはこれです:

状態1:

![enter image description here

デフォルトでスクロールを表示する代わりに、ユーザーが「View More/Load More」ボタンをクリックした場合にのみスクロールを有効にします。

状態2:ユーザーが[もっと見る]/[もっと見る]ボタンをクリックするとすぐに、スクロールがアクティブになります

enter image description here

これで、ユーザーがボックスの外側のどこかをクリックするか、他のボックスをクリックするまでアクティブになります。

状態3:ユーザーが他のボックスをクリックするとすぐに、カードのローカルスクロールがアクティブになり、前のボックスのスクロールがアクティブになります消えてしまいます:

enter image description here

ユーザーがカード内ではなく他の場所をクリックすると、状態1に戻り、グローバルスクロールを使用してダッシュボードをスクロールできます。グローバルスクロールは、ユーザーのマウスがローカルスクロールのあるボックス内に配置されていない場合にも適用されます。

4
Chandan

ネストされたスクロールは、ほとんどの場合、常に悪いUXになります。箱を全高にすることをお勧めします。ユーザーにサイドバーの追加を許可することもできますが、特定の領域に影響するスクロールバーは1つだけにしてください。また、水平スクロールもおそらく悪い考えです。 (コードなど、ラップまたはサイズ変更できないコンテンツにのみ使用することをお勧めします。)

1
Solomon Ucko

シフトキーソリューションは問題に対処する方法となる可能性があるため、ユーザーへのヒントがなければ、ユーザーはそれについて知らないため、それを使用することはほとんどありません。

別の解決策は、かなり直感的で、ユーザーからの推測を​​あまり必要としないものだと思いました。

  • ページ全体の垂直スクロールがフォームのデフォルトのアクションです
  • ユーザーがボックス内でマウスポインタを一定時間(たとえば1秒間)保持すると、このボックスがアクティブになり(ハイライトまたはその他の視覚的なヒントが表示されます)、スクロールアクションはボックス専用になります。
  • マウスポインターが特定のピクセル量(ユーザーがボックスを振り切ったかのように)移動した場合、またはマウスポインターが外部に移動した場合、ボックスはフォーカスを失い、したがってスクロールアクション(およびページ全体がフォーカスとスクロールアクションを取得)ボックス

ボックスをトリガーするために必要な時間は実験的に選択する必要があります。つまり、1秒は、私の考えでは良い出発点です。

1
Mike