この10年間で、Webサイトの水平スクロールの態度は変わりましたか？
ユーザビリティの第一人者であるJakob Nielsenは、記事「 2002年のWebデザインの間違い1 」を頻繁に引用し、モチベーションのあるWebデザインの誤りとして3水平スクロールに置きませんでした。
ユーザーは左から右へのスクロールを嫌います。垂直スクロールは大丈夫なようです、それは多分それがはるかに一般的だからです。
800x600ピクセルなどの標準サイズのウィンドウで水平スクロールを必要とするWebページは、特に煩わしいものです。何らかの理由で、この解像度は非常にまれであり、追加の5ピクセルは水平スクロールの煩わしさ（および水平スクロールバーによって消費されるスペース）に比べてほとんど提供していませんが、多くのWebサイトは805ピクセル幅のブラウザーウィンドウ用に最適化されているようです。
上記の画面サイズと推奨されるウェブページの幅は過去の回顧であり、今日の画面幅またはウェブサイトの幅では無効ですが、その本質は依然として有効である可能性があります。 Webサイト（SharePoint）を1900ピクセルよりも広くし、結果としてWebサイトが水平方向にスクロールするようにしました。それはまだ私を困らせますが、以前は間違っていました。
水平スクロールのもう1つの見方は、Web Designer Ledgersの記事「 40の最高の水平スクロールWebサイト 」で、次のようなユーザビリティの考えられる問題について説明しています。
しかし、使いやすさはどうですか？
それに直面しよう。使いやすさはWebデザインの非常に重要な部分であり、水平方向のWebサイトはまだユーザーフレンドリーではありません。ただし、ユーザビリティは方程式の最も重要な部分ではありません。とりわけユーザビリティを向上させる人々は、多くの場合、Webデザインの「デザイン」の部分を最小限に抑えます。はい、非常に様式化された使いやすいWebサイトをデザインできますが、縦長の長方形の中で未来的で想像力豊かな考え方はどこにありますか？未来は横長の長方形です。読み込み時間が遅くなるため、インターネット上でJPEGがWebデザインに受け入れられなかった時期があったことを忘れないでください。テクノロジーが進歩し、デザイナーが作成し、ユーザーが適応しました。ある日、同じことが横のウェブサイトで起こります。
使いやすさはさておき、横長のウェブサイトはそのままです。ここでは、最も刺激的で最先端の、どこにでも行けない場所にある水平型サイトのいくつかを見てみましょう。
ですから、ここでは、歴史と慣習の間に、水平方向にスクロールしないように指示することと、水平方向のスクロールが好きかどうかに関係なく、ここに来る未来の中間にあることになります。トレンドに追いつかないおならだけですか？またはWebサイトでの水平スクロールに関する過去10年間の態度は変わりましたか？
私の見解では、横スクロール自体は今日ではあまり受け入れられていません。
応答性が高まっている（ [〜＃〜] rwd [〜＃〜] ＆ 2010年のList Apart記事 ）のように、通常の水平スクロールのあるページは "欠陥のあるデザイン"により、ブラウザに水平スクロールバーが強制的に表示されます。 5〜10年前のように、これはさらに許容範囲が狭くなっています。
それに加えて、Webデザインコミュニティは水平スクロールがユーザーエクスペリエンスを低下させるとの見方を採用しているため、水平スクロールは特にの場違いに見えます。今日それを使用することは、デザイナーが意図的に慣習に反するようであり、iframesやframesetsのようなWebテクノロジーを使用することに匹敵します。
ただし、アプローチを水平スクロールに更新する開発もあります。 RIA´s hainvgが過去5〜10年間で重要性を増しているため、インタラクティブアニメーションとして機能するWebサイトの種類があり、水平スクロールに関しては古い汚名のいくつかを無視することができます。これらで注意する必要があるのは、ブラウザの慣例では水平スクロールが「そのまま」使用されることはほとんどありませんが、何らかの効果やアニメーションナビゲーションがそれに連動していることです。 （たとえば、 視差スクロール の例を参照してください。ここで、ビジュアルアニメーション効果は、水平スクロールをの一部として戻す正当化を与えていますうまく設計されたユーザーエクスペリエンス。）
水平方向の「スクロール」のもう1つの例は、そうだとすれば、オペレーティングシステムとアプリケーションが同じように異なるビュー全体の水平方向のスクロール限られた画面スペースを活用します。 side swipeユーザーインタラクションモデルが、水平スクロールを一種の方法で戻したため。
全体として、ニュースのコンテキストと使用シナリオに適応することによって、水平スクロールに限定された範囲のライバルがあったと思います。普通の古いブラウザの水平スクロールは、いつもの問題と同じ問題に悩まされています。標準のマウスは、ほとんどの場合、垂直スクロールホイールしか備えていません。ユーザーが長いWebページを垂直に読んでいるという事実と合わせて、水平スクロールを効率的に使用して、優れたユーザーエクスペリエンスを提供する非常に特定のシナリオのみがあります。
つまり、ユーザー、タスク、環境です。水平スクロールが「悪い習慣」であった過去の状況は、次のとおりでした。
環境-PCまたはラップトップ上のブラウザー。トラックパッドまたはマウスによるスクロール。
マウスで水平にスクロールするのは本当に厄介です。ご存知のとおり。
「スクロール」の環境が急速に変化しているため、これは急速に変化しています。
- タッチスクリーン付きの携帯電話とタブレットは、水平スワイプを非常に簡単にします
- Windows 8の登場により「ホームコンピューター」が進化し、タッチスクリーン機能を備えたモニターが登場しました。
タッチジェスチャーを使用して水平方向にスクロールすることは難しくありません。実際、それは自然な感じです。そのため、左または右にスクロールすることに意味のあるものが実際に行われるシフトが見られます。
Facebookアプリがその例です。ニュースフィードを表示しているときは下にスクロールしますが、ニュースフィード内にはより多くのスペースに値するコンテンツがあります。たとえば、誰かが4つの画像をアルバムにアップロードした場合、ニュースフィード内を水平方向にスクロールして、さまざまな画像を表示できます。その後、垂直スクロールを続けて、ニュースフィードをさらに表示できます。
別の例は、オペレーティングシステム内での水平スクロールのネイティブな使用です。これは、Windows 8の新しい「メトロ」デザインで非常に高く評価されています。iOSで写真を閲覧する場合は、すべてこれがわかります。
環境のさらなる変化は、ブラウザ機能の進歩です。 Jqueryを使用して人を左または右にスクロールするのが非常に簡単になったので、恐ろしい水平スクロールバーでマウスを使用するよりも、クリックラーターでそれを行うことができます。このように補助的な水平スクロールを使用している（タブレット市場で機能を明確にプッシュしている）大きな組織の良い例は、BBCのホームページです www.bbc.co.uk
今日のユーザーは、幼児から高齢者まで、ほとんどの人口層から、最も貧しい国から最も豊かな国まで、最も開発されていない国から最も高度に開発された国まで来ています。したがって、それは本当にあなたの主要市場に依存します：あなたのユーザーベースは誰ですか？一般的にコンピューターを使用する高齢者であれば、水平スクロールはWebサイトの通常の慣習に反しており、マウスで右に移動するのが難しいため、適切ではありません。すべてのユーザーが20代でタブレットを使用している場合、スクロールせずに見える範囲で追加の機能を使用できる場合は、デザインに水平スクロールを含めてみませんか？
一般的なコンセンサスはこれだと思います：
- 小さなサイト（ポートフォリオなど）を除いて、これを主要なナビゲーションとして使用しないでください。
- プログレッシブエンハンスメントの領域で使用して、タッチスクリーンを使用することを知っている人（Facebookアプリの例など）のWebサイトでの相互作用を強化します。
- チェック：ユーザーはだれですか。サイトへのアクセスにどのデバイスを使用していますか。これらの種類の機能を実装する前に。
結論として、ウェブサイトの場合、水平方向のスクロールはすべて、サイトの垂直方向のスクロールを補足するものであると言って間違いないと思います。これはまさにホームページのスライダーが行うことであり、右にスライドします...それらは長方形のバナー領域を隠します。
横スクロール自体は問題ないと思います。
私にとってスクロールの煩わしさは、コンテンツが垂直に編成されている場合は水平方向にスクロールしなければならないこと、またはコンテンツが水平に編成されている場合は垂直方向にスクロールしなければならないことです。
たとえば、すべてのコンテンツを表示するために下にスクロールするテキストページでは、テキストの行がビューポート内に収まるとは限らないため、左右にもスクロールする必要があります。スクロールせずに列を読むことができるように片側まで十分にスクロールできても、ページのナビゲーションや他の部分が失われたとしても、それは煩わしいでしょう。同様に、たとえば、横に整理されたフォトギャラリーの場合、縦方向にスクロールして写真全体を表示する必要があると、煩わしくなります。
主に次の理由で態度が変化しました：
- タブレットの横スクロール
- 高度なコーディングにより、マウスをより簡単にスクロールできる機能
- 中国語のウェブサイトの重要性の増加
ONE：タブレットが障壁を打ち破ったので、もはや奇妙に思われることはありません。ウェブサイトやあらゆるタイプのスライダーで取り上げられている画像カルーセルを検討してください。ユーザーはスクロールするのではなく、クリックして左または右に移動する必要がありますが、これはWeb上の橋であり、確かに水平スクロールの方向を示しています。
TWO：マウスが原因で、問題がPCで少し粘着性になりますが、垂直スクローラーが水平にスクロールするようにコード化する方法があります： http://css-tricks.com/snippets/jquery/horz-マウスホイールでスクロール/
THREE：漢字ベースの言語（中国語）を水平方向ではなく垂直方向にコーディングできる新しい（ish）CSSコーディングにより、態度も変わる可能性があると思います。
http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/ 右から左または左から右に読んだ場合その場合、詳細情報を取得するには下にスクロールする必要がありますが、上から下に読む言語には水平スクロールが必要です。私は中国語のウェブサイトの専門家ではありませんが、これは今後ますます重要な要素になると思います。
Best Horizontalサイトのリストの最初のいくつかのサイトを見ると、この種のサイトの状態を定義するのに役立つと思われるいくつかのパターンが表示されます。
http://album.alexflueras.ro/ のコンテンツレイアウトは水平方向ですが、マウスを上下にスクロールするとコンテンツが左右にスライドします。この種のセットアップは、慣れるのに余分な時間を必要とせず、多くの場合機能します。ユーザーがコンテンツをフローするために手動でスクロールバーをつかむ（またはシフトスクロールなどのキーの組み合わせを使用する）必要がある場合は、はるかに煩わしいでしょう。
http://www.bartleboglehegarty.com/#/europe 実際には、移動するサイトを取得する必要があります（または上部のカスタム水平スクロールバーを使用します）。これは私が理解するのにしばらく時間がかかり、それが実現されたとき嬉しい驚きではなかったので、これが通常のナビゲーションの良い代替品であると言うのは難しいでしょう。
http://carrotcreative.com/#!/ および http://www.charliegentle.co.uk/ コンテンツを左から右にスクロールしますが、そうしないでください実際には、ユーザーはそれを達成するために何らかの特別なナビゲーションを行う必要があります。リンクをクリックすると、コンテンツがスライドインおよびスライドアウトしますが、ナビゲーションには影響しませんが、害はないようです。それらを「水平スクロールサイト」と呼ぶのは難しいかもしれませんが。
http://www.clholloway.co.za/ は最初のサイトと同じで、コンテンツは水平方向に移動しますが、ナビゲーションを処理するために垂直方向にスクロールできます。そしてそれは機能します。
続けてもいいのですが、正しく扱えば、使い勝手に問題がないようにする方法があるようです。
Windows 8は、垂直スクロールホイールを操作してデスクトップを水平方向にスクロールする（完全ではない）ではない）素晴らしい仕事をします。それほど悪くはありませんが、実際のコンテンツはありません）画面、アプリのアイコンのみ。
水平スクロールと水平ページングの間にも違いがあります。連続してスクロールする必要があるからといって、UIが水平でも垂直でもよいとは言えません。垂直スクロールの概念は、少なくとも米国では）ページの上部から下部に向かって読んでいるため、現在表示しているコンテンツをページの上部に移動してこのプロセスを続行するのは当然のことです。少なくとも1つのサイトがページングが採用されている上位40の水平スクロールサイトを参照するOPをリンクします。スクロールすると、左から右に見ているときに下に移動する目の自然なプロセスが妨げられるため、水平サイトの方がおそらく良いでしょう。意味がある場合は、ページをスクロールしながら、下、左から右、およびmore左に移動します。説明を簡単にするために、ユーザーはページ全体をスクロールしてから、残りのコンテンツ、それは私がやることです。これで、ユーザーがコンテンツを表示するのが難しくなり、それは良くありません。設計者は、水平方向に適切なページングを実装して、この問題を軽減できます。