カード内のスクロールは良いですか悪いですか？ （デスクトップ）
大量のデータを含むカードデザインを含むボードビューをデザインしています。それで、私はカードでスクロールを使用しています。それは良いユーザーエクスペリエンスですか、それとももっと良い解決策がありますか？
- デスクトップ：展開とスクロールの方法を使用できます。
材料設計 によると：
デスクトップでは、カードのコンテンツを内部で展開およびスクロールできます
- モバイル：カード内のスクロールを使用せず、代わりに展開します。
カードコレクションは垂直方向にのみスクロールします。
カードの最大の高さを超えるカードの内容は切り捨てられ、スクロールされませんが、カードは展開できます。展開すると、カードはビューの最大の高さを超える可能性があります。この場合、カードはカードコレクションとともにスクロールします。
する
カードは、スクロールせずに展開して、より多くのコンテンツを表示できます。
しないでください
モバイルでは、カード内にスクロール可能なスペースを配置しないでください。スクロールバーが既に存在する場合、2セットのスクロールバーが表示される可能性があります。
2つのスクロールを1つのビューに収めようとしているのがわかります。これは好ましくありません。アフォーダンスに反しています。 2つのイベントが発生している可能性があり、スクロール（スワイプ）中にユーザーが失敗する可能性が高いです。また、イベントに変更があった場合は、急に急上昇します。タブに行ってみてください。お役に立てれば ！！！乾杯
私たちは常にUXデザインのコンテキスト（「依存する」要素）について話します。そのため、カードにスクロールを導入することが適切な場合があります。
この例では、これはボードであり、内部にたくさんのカードが何らかの順序で配置されていると思います。カードのサイズを一定に保つ方法としてスクロールを使用していると思います。ただし、カード内のコンテンツを構造化して提示した方法では、ユーザーが非常に多くの情報を処理する必要があるので、ユーザーにとって不利益であるように思われます（5〜10枚のカードを見て、ページ）。
明確で論理的な情報アーキテクチャを作成する理想的な方法は、各カードまたはカードのタイプで提示している情報のレベルと深さを見て、ユーザーに十分な情報を提供できる適切なレベルを見つけることができるかどうかを確認することですボード上をスキャンし、デスクトップ上に非常に多くのスペースがあるときにカード内をスクロールして作業するのではなく、どこかにそれらを向けることによって情報をドリルダウンさせます。
たとえば、上位3つの最も重要な成長指標を提供したい場合があります。ユーザーが[もっと見る]リンクをクリックすると、会社に関する詳細情報ページ、または会社が並べ替えられているページに移動できます。そして、それらのメトリックによって比較されます（ユーザーが本当に何をしたいか、またはどのようにユーザーが情報を使用するかに依存します）。これらは、データを構造化し、最初のステップで圧倒するだけでなく、ユーザーが実行する可能性のあるタスクにデータを合わせる良い例だと思います。
その小さいタイプのすべてでそのカードをスクロールすると、ユーザーを先延ばしにする可能性があります。
ユーザーに[詳細情報]ボタンを設置することを検討した後、追加情報に対応するためにカードを縦に拡大しましたか？マテリアルデザインでは、この拡張には通常、カードのz-indexとシャドウの増加も含まれ、拡張されたことを示します。カードのどこかをタップすると、デフォルトのビューに戻ります。
または、追加のデータを下にスライドする[詳細]リンクをクリックして、カードの高さを広げることもできます。
設計する前に、これを分解してみましょう。フォトショップや使用するものにジャンプする前に、これらの質問をしてください...
- デスクトップ向けの設計
- モバイルでも表示できるように応答しますか？
- 1枚のカードに大量の情報を表示する必要はありますか？
- 情報アーキテクチャについて確信がありますか？
- レイアウトの選択について確信がありますか？
さらに2つのこと
- UXデザインの決定をしていますか？
- または、UIを設計するために誰か他のux入力を使用していますか？
今、あなたの質問に答える時間です
しかし、まず最初に。 UX設計の決定を行わず、UI設計の演習に参加するだけの場合、UI設計の決定について他の人を説得することは困難です。
はい！あなたのデザインにジャンプしましょう。
デスクトップのみ-これはデスクトップでのみ実行され、モバイルでは実行されませんか？はいの場合、これを続行できます。それでも、これは悪い設計上の決定です。これについては、下で詳しく説明します。
Responsive ui-いいえの場合、それは間違いなく設計上の決定です。 「モバイルでは、カード内にスクロール可能なスペースを配置しないでください。スクロールバーが既に存在する場合、2セットのスクロールバーが表示される可能性があります。」 -材料設計ガイドライン
なぜその小さなカードに多くの情報を入れる必要があるのですか？あなたがしなければならないなら、それは情報アーキテクチャの悪い設計のしるしです。情報の階層構造を構築する際に、あまり考慮していません。
レイアウト時にカードが必要なのはなぜですか？ダッシュボードなどを設計していますか？はいの場合は、他のことを考えた方がよいでしょう。カードは良いですが、モバイルに適しています。これらは、展開、却下、またはその他の種類のCTAと同様に何らかのアクションを実行することを目的としています。それらはデスクトップのUIと同じように見えますが、経験的には、複数の列がない場合にカードが役立つため、期待どおりではありません。たとえば、facebookにはカードuiがありますが、カードの列は1列しかありません。私はあなたが複数の列のカードを持っていると思いますよね？そうであれば、あなたは何か他のものを考える必要があります。 ドリブルエフェクトを食べさせないでください。ドリブルのUIは見た目は良いですが、使用できません。
また、これについて決定を下すことが手元にない場合は、先に進んでください。いくつかの改善を提案します。最初に、デスクトップでもモバイルでも、カードのどこにもスクロールビューを配置しないでください。むしろ、クリックして同じビューで展開するなどのCTAを使用するか、モーダルウィンドウを開いて完全な情報を表示します。アプリに適していると思うものをすべて選択します。
フルスクリーンのUIを1つ示していただければ、より良い洞察が得られるでしょう。