web-dev-qa-db-ja.com

ダッシュボードUIでスクロールバーの使用を回避する方法

1ページに4つのタブコンテナーがあり、スペースがないため、ユーザーはスクロールバーを使用する必要があります。

問題は、グリッドにすでにスクロールバーがあり、デザインがひどいように見えることです。

1-)ダッシュボードアプリケーションのスクロールバーが嫌いで、使用したくありません。

2-)素晴らしいデザインのアイデアでスクロールバーを非表示にする方法を教えてください:)

これがSSです。問題は、赤い線でスクロールバーを確認できることです。

enter image description here

5
john true

ここではいくつかのことが行われています:

  1. 右側にあるスクロールバーが互いに近すぎる-テーブルに関連付けられているスクロールバーがテーブルに明確に関連付けられるように、スクロールバーを少し離す必要があります。タブコンテナー間の色を明るくして、それらをより明確に区別することも試みます。

  2. 配色が原因で、スクロールバーのどの部分が「ハンドル」であるのかさえわかりません。暗い部分ですか、それとも明るい部分ですか?おそらく矢印が暗いため、ハンドルも暗い部分であると確信しました-右端のバーに2つの類似した暗い部分があることを確認するまで、つまり、ハンドルは明るい部分である必要がありますテーマ)とページを途中までスクロールする必要があります。スクロールバーがあいまいに表示されるべきではありませんが、何らかの理由でここで誤解されました。

これらの変更を示す簡単な変更を次に示します。

enter image description here

スクロールバーを完全に取り除く方法については、オプションには

  • 概要ビューと詳細ビュー:ユーザーがダッシュボードモードとエクスプローラモードを切り替えられるようにします。現在のダッシュボードモードではないため、ここにはダッシュボードの情報が多すぎます。ダッシュボードモードでは、重要な情報が一目でわかるようになり(気にする必要のあるものはすべて強調表示されます)、スクロールバーは必要ありません。これがどこかの壁の実際のモニターにあった場合、同じ情報を示しますか?

  • スクロールではなくページ付けですが、それはそれほどフレンドリーではありませんか?

  • 各テーブルの増減。展開してすべてのアイテムを表示し、折りたたんでトップ5を表示します。これは、概要オプションと詳細オプションの間の一種の妥協です。

  • 各グリッドの展開と折りたたみ 1つのグリッドを1つのバーに折りたたんで、他のスペースを広げます。これはユーザーごとのカスタマイズである可能性がありますが、データの量によっては、すべてのスクロールバーが完全になくなるわけではありません。または、表示するパネルをユーザーがカスタマイズできるようにします。

  • グリッドごとのフルスクリーンオプション。繰り返しになりますが、入れ子になったスクロールバーで終わるべきではない方法で、ユーザーが全画面モードで関心のあるデータに集中できるようにする別の妥協案。

私はあなたがあなたの特定のシナリオに適した同様の線に沿ってより多くのオプションを考えることができると確信しています。

11
Roger Attrill

何かを再設計する時間を無駄にする前に、現在のユーザーで設計をテストして、これが実際に問題であることを確認する必要があります

スクロールバーが嫌い

この事実は、特定のコンポーネントを使用するという決定とは無関係です。ボタンが嫌いならどうしますか?それからあなたは困るだろう。

多くの場合、個人の好みや利害関係者による単一のコメントのために、設計者は特定の設計要素に集中しすぎますが、実際にはユーザーはそのことを気にせず、さまざまな問題に苦しんでいます。

ユーザーは私たちの好きなものと嫌いなものを共有すると思いますが、そうでない場合が多いです。

これらのタブの操作を含むいくつかの重要なタスクをテストユーザーに実行してもらうことをお勧めします。ほとんどのユーザーがスクロールバーに関連する問題に遭遇した場合は、再設計を検討してください。そうでない場合は、時間を浪費している可能性があります。

2
dennislees