web-dev-qa-db-ja.com

なぜ垂直スクロールがパターンになったのですか?

今日のほとんどのWebサイト、特にニュースやブログで、ほとんど垂直スクロールが使用されているのはなぜですか?

また、なぜ下にスクロールするほど、左から右にスクロールするのではなく、古い資料が見つかるというパターンになっているのですか(ほとんどの世界では、これは自然な読書方向の習慣であり、過去からタイムラインを描く自然な方法でもあります)未来へ)?

TheWall のようなインターフェイスは、下ではなく右にスクロールすることで機能すると思いますか?

30
Thanos

他のすべての機能と同様に水平スクロールでは、快適にするために特定の条件が存在する必要があります。これらの条件には、表示技術(画面とレイアウト)とナビゲーション制御技術(入力デバイス)が含まれます。

それらすべての簡単な歴史を見てみましょう。

情報を提示するほとんどすべてのアナログ手段は水平スクロールを備えています。古い学校の羊皮紙の巻物でも、製本されたものでも(「ページ」は幅ではなく高さに沿って回転していました)。 (縦の巻物もあったと思いますが、写真はありませんでした。)

enter image description here

デジタル時代にジャンプすると、初期のコンピューターのビデオチップの解像度はかなり小さいことがわかりました(たとえば、Commodore 64は320×200ピクセルしかなく、画面あたりわずか10行に変換されました)。初期のコンピューターの2番目の特徴(パンチカードの時代はスキップしました)は、GUIがないことでした。つまり、入力コマンドと出力がすべて同じ画面に入力されて表示されていました。
私は推測します元のCLIデザイナーの考えはこれらの線に沿っていたと思います:

入力中に行の終わりに達したら、入力したテキストを押し上げて、新しい行で入力を続けます。画面がテキストで一杯になったら、必要に応じて行を追加していきましょう。このようにして、何とかして上または下にスクロールする必要がある、無限に高い用紙を用意します。驚くばかり!

興味深いことに、前述のCommodore 64には専用のページアップ/ページダウンキーがありませんでした(一部のマニュアルによると、右側のFキーと組み合わせられていました)。

enter image description here

別の10〜15年先の1980年代後半と最初のGUIにジャンプすると、スプレッドシートとリッチテキストエディターが日常のオフィスライフでの地位を獲得したコンピューターが見られます。後者は垂直スクロールの現代的な理由です。低解像度( 1987年のIBMのハイエンド640×480 VGA であっても)は、フルスクリーンで1文字サイズのページ(ヨーロッパではA4)を表示できませんでした。縦にスクロールして1ページを読む以外に方法はありませんでした。この状況を改善するために、 Microsoftは1993年から1994年にズーム/スクロールホイールを発明しました および 1992年に親指でスクロールできるマイティマウスの特許を取得したApple です。マウスコントロールは明らかに、既存のスクロールパラダイムに従うように作成されています。

今日でも、縦方向の解像度は、横方向に2ページを許可しても、レターページに収まるほど高くありません。これは、1920×1080上のMicrosoft Word 2007のスクリーンショットです(Windows 7タスクバー用に保存)。

enter image description here

私たちが知っているインターネットは1990年代初頭に誕生し、キーボードにPage UpキーまたはPage Downキーがあったときに簡単に対応することができなかったデスクトップアプリケーションの規則とパラダイムに従う必要がありました。規則は、デザインガイドラインだけでなく、HTMLレンダリングのアーキテクチャにも影響しました。DOM要素は、未使用のスペースがある限り前の要素の右側に配置され、その下の次の行に移動してページの高さが増加します。それでも verticalWebでのスクロールは1997年までお勧めできませんでした

近年、いくつかの重要な進展があり、将来的に水平スクロールへの潜在的なシフトを示唆しています。

  • 一部のマウスには現在、水平スクロール用の「傾斜」ホイールが含まれていますが、まだ一般的ではありません。
  • ワイドスクリーンが普及し、ほぼすべてのラップトップとほとんどのデスクトップで標準となっています。
  • CSS3に複数列のレイアウトコントロールが追加されました ;
  • モバイルデバイス(iOS、Android、およびWindows Phone)は、ナビゲーションのために水平方向のスワイプジェスチャーを広範囲に使用し始めています。

ただし、水平スクロールは、フルサイズの画面での採用にはほど遠いものです。 WWW2009で発表された研究 (PDF)は、ユーザーが水平スクロールではなく垂直スクロールに慣れていることを好み、水平スクロールは「目を垂直に上に動かすことを余儀なくされた」と指摘した画面の高さいっぱいに下げます」。これは、垂直スクロールの場合とは異なります。後者の理由は、垂直スクロールの人間工学的好みの強い指標です。

24
dnbrv

水平スクロールはひどいです。 ユーザーはほとんど常に不満を感じます。垂直スクロールと組み合わせると特に問題になります。誤って水平にスクロールし続けるときに、モバイルでサイトをスクロールしようとするよりも悪いことはありません。

たくさんのデータがこの考えをWebユーザーの行動に裏付けています。 Horizo​​ntal Attention Leans Left (もちろん、左から右の言語の場合)。すべてを垂直に保つことで、垂直スクロールはスキャンと、水平レイアウトでは常に可能とは限らない明確な階層を可能にします。

だからといって、慣例と期待のためだけに水平スクロールがうまくいくとは私は本当に思いません。さらに、入力メソッドがverticalスクロールよりも水平に適応するようになりました。マウスの垂直スクロールバー、ページアップ/ダウンキー。

なぜパターンになったのかというと、色んなことが要因だと思います。

読み順を表示します...私たちは左から右に(英語などで)読みますが、 最適な行の長さ ;があります。すべてのテキストを1本の水平線に引き伸ばすだけではありません。したがって、ある時点で垂直の列ができます。本と同じように、テキストを水平方向に複数の列に分割することができますが、紙の制限のために必要です。水平方向のページ付けは、デフォルトでは垂直方向よりもコンピュータ上で意味がありません。

コマンドラインインターフェイスの昔は、おそらく垂直スクロールが始まりました。新しいラインは常に下向きに働きました。 1次元までスクロールし続けるのが最も簡単です。typwritersは、常にページの終わりまで下にスクロールするという規則を開始しました。もちろん、コンピュータ上での「ページ」は、任意の長さまたは無限の長さにすることができます。人々はタイプライターがどのように機能するかを知っていたので、コマンドラインインターフェイスをタイプライターのように多くの点で機能させることは理にかなっています。 GUIの時期になったとき、CLIのいくつかの規則を守ることは理にかなっています。 IMO垂直スクロールは、引き継がれる数少ない適用可能な規則の1つです。

水平スクロールは通常、問題のあるスペースで必要な場合(マップ)、またはページ分割されたフォーマットに従っている場合にのみ機能します。ページのエミュレーションはうまく機能しますが、多くの場合、デジタル形式である必要はありません。古いメディアの一部の規約は適用されず、普遍的な意味があるためではなく、必要から作成されました。

24
Ben Brocka

垂直スクロールの明らかな利点は、ユーザーが画面上のテキストのどの部分を制御できるかです。

本(または水平方向にスクロールする必要のあるページが設定されたドキュメント)を読んでいる場合、関連するテキストの2つの部分(またはテキストとイラスト)。垂直スクロールを使用すると、両方の部分が表示されるまでページを調整できます。

ユーザーは、ページの境界ではなく、同時に表示することが重要な部分を制御します。

6
AShelly

テキストの行は左から右に読みますが、上から下に読みます。歴史を通してのみではありませんが、ほとんどの場合、ほとんどのドキュメントは本質的に常に垂直であり、1つは上から下にそれらを読みます。

4
DA01

垂直スクロールのこのパターンからすぐに脱線する可能性があることに注意することは興味深いと思います。 Windows 8はhorizo​​ntalコンテンツのスクロールに重点を置いているようです。これはWindows Phone 7で既に開始されていますが、Windows 8のコンシューマープレビューから判断すると、Windows 8の方がはるかに注目されます。コンテンツは列に表示され、左にスクロールしてさらに多くのコンテンツを表示できます。権利。

通常のラップトップでシステムを使って試したところ、特に心地よいものは見つかりませんでしたが、これは主に非タッチ最適化システムを使用することの制限によるものだと思います。タッチ対応のタブレットでは、実際には非常にうまく機能すると思います。それでも、私はそれを試す必要があるでしょう、そしてそれさえ実際の適切なユーザーテストをすることから非常に遠いです。

2
André

西洋言語では、一般的な読み方向は左から右、次に上から下です。私には便利な情報源はありませんが、テキストのページはずっと前にこのように設定されました。なぜなら、人間の視野とスキャンする能力は、上向きに見るよりも、左から右に見る方がはるかに適しているからです。 and-down、「行」を左から右に移動します。

これが、左から右、上から下の形式のテキストレイアウトの基礎であり、デジタルへの移行が行われたとき、印刷のアーティファクトは一般に、単にコピーされただけでした。最初は印刷の拡張。

人間の視覚の仕組みと、コンピューティングの世界における西欧言語の普及を考えると、大量の線形データをすばやくスキャンして処理する必要があるときに同じ形式が「スタック」するのは当然のことです。

2
cdeszaq

垂直スクロールパターンは、新聞の遺産に由来する場合があります。実際、テキストを細い列に折り返すことで、訓練を受けた読者は、一目で完全な行(4〜7ワード)をキャッチできます。

さらに、textをたどるのは、単にドキュメントの上から下に行くよりも、頭を左から右にジグザグに動かすのに疲れるようです。

私たちはすべてこのパターンに慣れているので、テキスト/記事の各部分が列にラップされ、すべての列が水平にレイアウトされない限り、それを水平に変更するのは非常に奇妙に見えると思います。したがって、この考えに従って、水平のTheWallは驚くべきですが読みやすいと思います。

1
Martin

この答えは、Ben BrockaとAShellyによってすでに与えられたものを補強します。

テキストの任意の部分(AShellyの回答で説明)にアクセスする利便性を最適な行の長さ(Brockaの回答で説明)に接続すると、利用できる唯一の賢明なオプションとして垂直スクロールがあります。

終わりのない行を含めることはできません。タブレットで本を読むことを想像してみてください(タブレットはどちらの方向にも簡単にスクロールできるプラットフォームの1つなので、タブレットと言います*)。必要に応じて水平方向にスクロールできますが、その悲惨さを免れることはできません。

私が提案したいもう1つの考えられる実験は、このQ&Aを読んで、答えとそれに続くコメントを横に並べて読むことを想像することです。意味がありません。

*水平スワイプの方が簡単(またはその逆)であると言いたくなる場合は、バイオメカニクスの講義を控えてください。 「ほぼ」と同じくらい簡単です。

1
Shashank Sawant