web-dev-qa-db-ja.com

全画面スクロールWebページについて

AppleはiPhone 5Cで独自にローンチしたため、最近、フルスクリーンスクロールページを使用する多くのウェブサイトがあります。(ウェブサイトはもう利用できませんが、複製を見つけることができます here

その他の例は次のとおりです。

UXの観点からこのプラクティスについての研究はありますか?スクロールハイジャックよりも、フルスクリーンコンテンツの使用について?

これは、適切なPower Pointプレゼンテーションのように、適切に使用されたときに簡単にユーザーに情報を提示する簡単な方法のようです。ユーザーに最も重要なことを美しくスマートな方法で示す方法。

この種のサイトについては、主にスクローリングハイジャックが原因で、多くの開発者が不満を言っているのを目にしますが、ユーザーだけでなく、クライアントのように、一般的にもそうです。

これについての考えは?

34
Steve

これらのサイトの視覚的な魅力は否定できません。ただし、使いやすさの点で深刻な問題があります。

  • すべてのコントロールはユーザーから奪われます。これらのサイトはすべて、ユーザーが望むかどうかにかかわらず、すべてのユーザーに複数ページの光沢のある広告を表示することを強制します。製品を購入したい場合はどうなりますか?連絡先情報をすばやく入手したい場合はどうなりますか?気にしないで。これは、デザインからの提出に驚かされていないすべての人にとって非常に迷惑になります。

  • 非常に低い情報密度。優れたサイトでは、すべての重要な情報が一目で、または少なくとも1回のクリックで提供されます。これらのサイトは、1ページ分の情報を多くのページに分散しています。 10ワードの文章を伝えるには、画面全体が本当に必要ですか?

  • どこにいるのですか?通常、目的の場所に移動する方法はありません。また、他のコンテンツとの関係を確認する方法もありません。ユーザーがサイトを直線的に移動している限り、問題なく機能します。しかし、非線形のものはすべて本当の混乱になります。上記の 新しいJUMOコンセプトの例 で、特定のランプの1つをクリックしてからランプ自体をクリックすると、構造に関連してどこに到達したかが不明確になります。サイトの。ベアリングが表示されるまでスクロールする必要があります。

  • 不慣れなナビゲーションパラダイム。これらのサイトのいくつかは、最初のページをスクロールするための指示を提供しています。サイトを提示されたユーザーが指示なしに最も基本的なナビゲーションを理解できない場合、これは完全なUX障害の兆候ではないでしょうか?

  • サイトが画面に収まらない場合のフォールバックはありません。デザインがどのようなサイズの画面でも機能することを100%確認する必要があります。機能しない場合、ユーザーはコンテンツをスクロールして表示することができません。ウィンドウを小さくすると、これらのサイトのいくつかが壊れます。

私は個人的に、このデザインから離れます。使い勝手が悪い。うまくできていれば格好良く見えますが、その大部分は目新しさです。

更新:この回答について一部の人々からの反論があります。これらのページは(先ほど触れたように)見栄えがよく、場合によっては問題ないかもしれません。しかし、デザイナーにとっては、美しいデザインの重要性を過大評価し、機能的なWebページの重要性を過小評価する危険があると思います。

また、「このデザインでナビゲーションが可能」は、主要な異論の1つであるようです。これは少しは役に立ちますが、与えられた例のどれも通常のウェブサイトと同じくらい良いナビゲーションはありません。右側の小さな点はほとんどナビゲーションとしてカウントされません。トップメニューのデザインは優れていますが、理想とはほど遠いものです。 MediaFire サイトでは、「信頼できる」などの直感的でないものをクリックして、かなりコンテンツのないページを表示できます。 「詳細」をクリックして、ページの下部に移動し、会社やサポートなどに関する実際の情報を確認する必要があります。 カーペットサイト では、あなたがどこにいるかを明確にしてください、そしてあなたが非線形なことをすると混乱を招きます。ナビゲーションをもっとよくすることは可能かもしれませんが、少なくともうまくいった例を1つ見たいと思います。

52
user31143

このデザインはすべての斬新さを失いますインスタントあなたはそれがスライドショーであることを理解しています。

ただし、スライドショーとして、次の分野で勝っています。

  • スワイプ/スクロールする単一の方向を持つことで、Preziのようなものよりも「ここからどこへ行くのか」を理解しやすくなります(「次の」方向はどこにでも、ページの内外にでも)
  • あるページから次のページへのスムーズな移行により、表示している(スクロールを制御していない)方がどの方向に進んでいるかを簡単に確認できます。
  • powerPointで悪用しやすい不快なアニメーションやノイズは、jQueryまたはJavaScriptで構築するのがわずかに難しく、結果としてプレゼンテーションの平均品質が高くなります。
  • 視覚的な進行状況インジケーター(Mac Pro広告の横にあるドットなど)は、読みやすさを向上させることができます。また、何らかの理由でスライドショーには通常ありません。

ただし、スライドショーとしては、次の領域で失われます。

  • なじみのない制御パラダイム
  • あなたはおそらくページに到着しますnotスライドショーを期待していて、スクロールしなかったという理由だけでそれを経験せずに去ります
  • フロントページに「スクロールしてもっと見る」というメッセージを貼るのは素人であり、完全に上記の2つの点が原因です。
16
hoosierEE

dan1111はこのデザインの潜在的な問題を指摘しましたが、正しく実行すればかなり強力なアイデアだと思います。

事例は Mac Pro紹介Webサイト です。これは発売時に多くの注目を集め、ユーザーに新製品を紹介する良い方法を提供しました。

彼らが成功したこと:

1。見栄えがいい

黒のバッキング、適切なフォントスタイルと色の選択、優れたグラフィックスなど。

2。ナビゲーションがあります

横にドット、ホバリングはそのページのタイトルを示します。これにより、ユーザーは必要な場所にすばやく移動できます。テキストを常に表示するよりも少し遅いですが、よりエレガントです。ナビゲーション内のあなたの位置は、塗りつぶされたドットでも確認できます。

3。ビューには豊富なコンテンツがあります

1つのグラフィックの中心にあり、非常に詳細な仕様を提供し、特定の部分は側面のグラフィックで強調表示されています。各ページには読むべきものがたくさんあるので、アニメーションに費やされる時間は比例して低くなります。最後にI/Oビューのみが「OKショーに取り掛かる」ポイントに近づきます。

4。 「レスポンシブ」デザイン

HD画面、MacBook Pro画面、および小さなiPhone 4S画面で問題なく見えます。私が奇妙なことをすると、見栄えがしません-Chromeユーザーエージェントの偽装、デスクトップの非常に薄いウィンドウなど。ユーザーがどのようにしているかわからない。ユーザーエージェントがスニッフィングしているようだ。しかし、それは機能します-平均的なユーザーにとってページは壊れていないように見えます。

5。代替ページ

specs ページは、ユーザーに代替手段を効果的に提供します。古いブラウザを持っている人、またはすでにそれを見ていて、情報の一部だけが欲しい人のためにありそうです。

これは、「なじみのない」ものを除いて、ほとんどの不満を満たします。技術や社会は必然的に見知らぬ場所に進んでいくので、見慣れないことは問題ではないと思います。ユーザーを教育する必要があるだけです。 「下にスクロールするか、矢印を押して続行します」。

このデザインはユーザーにとってまともなエクスペリエンスだと思います。適切な場所でのみ使用する必要があるだけでなく、上記のように、適切に実行する必要があります。

6
andrewb

これらの単一ページのアプリはトレンドであり、同様のビューをより良い方法で実現できるいくつかのフレームワークへの道を導きました。

重要なのは、ユーザーは大量のスクロールを使用して、上に移動する(上へのリンクが提供されていない場合)か、下にスクロールする必要があり、「について、製品/ページ '。

これを克服するために、左側または上部にナビゲーションを提供できます。これは、ユーザーがページ内を移動するのに役立ちますが、コンテンツのカテゴリ全体に this のように表示されます。

2
user3464111

これをアンドリューブの回答に対するコメントとして投稿したかったのですが、部屋が足りなくなりました。

andrewbはこれらのウェブサイトについて多くの良い点を述べました。

問題は、これらの優れた点のすべてが、全画面表示ではないスクロールページにも適用できることです。

スクロールページを使用すると、ユーザーが何をどのように表示するかを細かく制御でき、実質的にはプレゼンテーションやビデオに似ています。これは、ユーザーにフォローしてもらいたいフローがWebサイトにあるときに最適であることを意味します。製品のアナウンス(UbisoftがAssassin's Creed:Unityの http://assassinscreed.ubi.com/en-us/ games/assassins-creed-unity.aspx (フルスクリーンページの[詳細]ボタンをクリック)、またはApple)。

ことは、ユーザーがサードパーティを介して情報を取得できるとしても、このページがユーザーがこの情報にアクセスできる唯一の方法になりたくないということです。ユーザーは、表示したい機能をサポートするデバイスを使用していない可能性があります。または、彼はあなたの製品について1つの特定のファクトイドを探していて、あなたのああまあ美しいが、まあ遅いプレゼンテーションでそれより前にある他の643個のファクトイドすべてに興味はありません。または、セレモニー全体をスクロールする時間がないのです。あなたはそれらのユーザーに余計な装飾をせずにあなたのウェブサイトを閲覧するオプションを与えるべきです。

2
Nzall

Appleデモ は、私に3台半の電話だけを表示します。ページをスクロールすることすらできません。

enter image description here

私はポートレートモニターを使用していて、マウスの代わりに Vimperator を使用しているため、特別なケースと呼ばれるかもしれません。しかし、スクリーンリーダーやその他の非従来型の入出力デバイスを使用するかなりの数のユーザーを知っています。

ユーザーの100%が従来の画面、横向きのランドスケープ、およびマウスを使用していると想定できる場合は、そのようなトリックページを使用できます。そうでなければ、しないでください。十分な数の人々があなたのウェブページを使うことができなくなります。

0
dotancohen