web-dev-qa-db-ja.com

デスクトップWebサイトの小さな領域の水平スクロール

新しいデザインパターンがモバイルアプリで人気が高まっているようです。 App Storeの最新リリースを見ると、さまざまなセクション間を移動するために水平スワイプパターンを使用しています。このパターンのユースケースは、多くの類似したコンテンツを小さな領域に詰め込むことができるというものです。

enter image description here

大画面のデスクトップデバイスでは、Amazonで見られるように、このパターンはスクロール可能でページ分割された領域に変換できます。

Amazons solution

私の直感では、ユーザーはパターンを見落とすか、面倒だと思います。 Youtubeには関連動画が表示された(垂直方向の)スクロール可能な領域があったことを覚えていますが、それを削除すると、ユーザーが同時により多くを見ることができたため、クリック率が増加しました。このデザインパターンについてどのような経験がありますか?うまくいきますか?避けるべきですか?

2
Tony Bolero

これは新しいデザインパターンではありません。カルーセルです。しかし、あなたが言うように、それは最近のモバイルでより人気があるようです。主な利点は、より多くのコンテンツを閲覧する機能をユーザーに提供しながら、ユーザーをページに留めることです。

うまくいきますか?確かに、小さなスペースでさらにいくつかの二次情報を閲覧したい場合は。つまり、1〜2ページ後にクリック率が大幅に低下するため、重要な情報をそこに隠さないでください。

このパターンの大きな実装はNetflixにあります。カルーセルを使用すると、ユーザーがカテゴリをクリックせずに閲覧し、ホームに戻って別のカテゴリをクリックするために、カテゴリ化された複数の映画の提案を提案できます。

私は最近、リストに複数のアイテムがあり、そのうちの1つが重要でないフォトギャラリーであるモバイルアプリでこれを使用しました。カルーセルを使用することで、いくつかのサムネイル画像を表示し、ユーザーが必要に応じてさらにスワイプして、アプリのメインアクティビティに進むことができます。

このパターンやその他の詳細については、「Designing Web Interfaces」をチェックしてください

3
Joey Cordes

水平スクロールは、垂直スクロールに比べて扱いにくくなっています。マウス入力を使用すると、多くの場合、ハードウェア(スクロールホイール)による水平スクロールのサポートが向上します。タッチUIでは、水平方向のスクロールは垂直方向のスクロールと同じくらい簡単ですが、部分がどちらの方向にスクロールするかが明確でない場合、2つを混合すると問題が発生します(ここではいくつかの視覚的な規則を使用する必要があります)。

したがって、全体的には、水平スクロールの正味のマイナスはわずかにあると思いますが、does限定された垂直領域に物事のコレクションを表示すると便利な場合に、いくつかの問題を解決します。

問題は、「煩わしさを少し増すだけの価値のある問題はあるのか」ということです。

2
obelia