web-dev-qa-db-ja.com

全幅の流動的なレイアウトを使用するeコマースWebサイトがほとんどないのはなぜですか?

いくつかのトップeコマースWebサイト(Flipkart、Etsy、Amazon、Bestbuy)を見ると、Amazonだけが全幅レイアウトを利用しており、それも流動的ではないことがわかりました。

読書とコンテンツの消費に関する限り、全幅のWebサイトのデメリットを理解していますが、これらのeコマースWebサイトのほとんどが乱雑で狭いレイアウトになっているのはなぜですか?

流体設計を支持する私のポイント:

  • Eコマースプラットフォームは豊富な画像に依存しており、流動的なレイアウトではより大きな画像を使用できます。
  • EコマースのWebサイトには、紹介する商品がたくさんあります。
  • EコマースのWebサイトでは、長いテキスト行がほとんどなく、スペースがセクションに分割されています。
  • 960pxはまあまあで、ほとんどのユーザーは現在16:9のモニターを持っています。
  • 流体設計は、クリーンで没入型のエクスペリエンスを提供します。
  • グリッドシステムは非常に強力になり、使いやすくなりました。そのため、流動的なデザインを作成するのは簡単です。

ポイント:

(答え!)

現在のシナリオが存在すると思う理由:

  • これらのWebサイトの一部は、960が標準になったときに誕生しましたが、規模が大きくなりすぎて、面倒くさくなったり、イノベーションが欠けたり、新しいスキームに適応するための十分なリソースがありません(しかし、彼らは巨大な人材を持っています!
  • 彼らは正統派のユーザーを遠ざけるかもしれないと懐疑的ですか? (しかし次世代ユーザーはどうですか?
  • レイアウトの大幅な変更により、忠実なユーザーがナビゲーションを最初から再学習するようになると感じています(が、ここでレイアウトを変更することについて話しているので、機能は同じままです!google/fb再設計する勇気があるのに、なぜそうしないのですか?
  • 彼らは安全にプレーし、十分にテストされたものを使いたいと思っています。

私は個人的に、クリーンでモダンなレイアウト(および大量の空白)を使用するいくつかの最新のeコマースWebサイトを見て、非常に魅力的であることがわかりました。 (現在、名前を思い出せません)

16
Shubham Kanodia

想定を確認する

あなたの質問には検証を必要とするいくつかの仮定があります(そして私はecommジャイアントがテストしていることを保証します)。

  1. ほとんどの人が大きなモニターを持っています:多分。しかし、彼らのビューポートはどうですか?また、ターゲットが全員(Amazonなど)の場合、誰を除外する可能性がありますか?高齢のユーザーはブラウザをズームしていて、それに気づかないこともよくあります。そして、彼らはまだIE 8。
  2. 大きい画像の方が良いです:それらはきれいですが、それは彼らがもっと売れるという意味ではありません。私は実際にecommサイトでこれを試しました(そして私はknew私は正しかったです)—明らかな副作用なしに画像を約20%上げました。コンバージョン、収益、直帰率には何の効果もないというほぼ100%の信頼に達しました。
  3. スペースを使用して、より多くの製品を表示します:この仮説もテストしましたが、コンバージョンは実際に減少しました。いくつかのフォローアップテストと他の最適化の後、より良いキュレーションとより狭い選択肢のセットがより迅速な決定、チェックアウトファンネルのより多くの人々、そして銀行のより多くのお金につながると判断しました。
  4. 流体設計は「よりクリーン」で「より没入型」です。適切に設計されたサイトは、適切に設計されたサイトです。私は新しいプロジェクトで流動的なレイアウトを設計するのが好きですが、固定レイアウトでうまく機能している大規模なサイトがある場合、投資を回収するまでにしばらくかかるかもしれません。
  5. 流体デザインは今簡単に作成できます:ほとんどのecommデザインは新聞紙の循環に根ざしていることに注意してください。これらのクリエイティブ部門は、製品のプレゼンテーションを極端に制御したいと考えています。流動作物とbackground: cover作物が「まあまあ」でなければならない場合、作業は非常に困難です。そして彼らのアプローチは長い間ジャンクを売るという素晴らしい仕事をしてきました。

実験が発生しています

Amazon

レスポンシブページを含むレイアウトソリューションを継続的にテストしています。明らかに、お得な情報ページは彼らにとって人気のある物件です...

Amazon's deals page

Ebay

それほど遠くないですが、彼らは繰り返してきました。このコレクションテンプレートのように、彼らのキュレートされたエクスペリエンスの一部は完全にレスポンシブになっています。

Ebay collections page template

ウォルマート

彼らは技術面でハードにプッシュしました(エンジニアリング会社を買収することさえありました)。彼らは完全なレスポンシブサイトにリファクタリングしました(カタログのサイズで小さな偉業はありません)。

Walmart's homepage

Fab.com

かなり長い間、Fabは完全に応答しています。早い段階で、彼らはいくつかの本当に興味深いecommのアイデアを開拓しました。おそらく無関係ではないかもしれませんが、彼らは財政的にも厳しい時期を過ごしてきました。

Fab homepage

ボトムライン

私がゼロから始めた場合、または「私たちは本当に今までにレスポンシブである必要があります」を超えて何らかの説得力のある理由でリファクタリングする必要があった場合、流動的またはレスポンシブサイトを確実に構築します

先駆者が最終的に群衆を運ぶことは間違いありません。しかし、行の金額で、それはテストのロットと疑いもなく高い程度の統計的信頼なしには起こりません。

10
plainclothes

全幅と流動性は2つの異なるものです。

テキストのページがある場合、それを 読みやすい幅(スペースなど、1行あたり52〜68文字) より広くしたくありません。このような場合、空白は、すっきりとした整然とした感触を与え、テキストから読者をそらすのを防ぎます。

画像ギャラリーがある場合、理想的にはそれが必要です in flexboxそれにより、さまざまな画面サイズに最適化されるように 。製品を展示する場合、ユーザーはズームインできるので、多くのeコマースサイトでは lightbox または同様のものが使用されます。

レスポンシブデザインを支援するためのリソースはますます増えていますが、大規模で複雑なサイトでは、コードをリファクタリングするコストが非常に高くなる可能性があります。

3
Yvonne Aburrow

レスポンシブなレイアウトや流動的なレイアウトではなく、固定レイアウトを選択する理由はたくさんあります。この答え(私の意見では)は、特定のケースに適用しない限り、網羅的ではありません。常に使用する必要があるbestソリューションがあるとは思いません。

fluid レイアウト(幅のパーセンテージを使用して作成)について質問しているが、 responsive レイアウト(流体グリッドを使用して作成され、メディアクエリ)、 adaptive レイアウト(固定、ただしメディアクエリを使用)および elastic レイアウト(ブレークポイントまで流動)。

もちろん、より高い解像度でユーザーエクスペリエンスを向上させることもできます(レスポンシブレイアウトに飛び込むことはありません。これも妥協点です)。それは良いことですが、 fluidレイアウトではページの外観の制御が少なすぎます。最終結果は非常に大きな妥協点になる可能性があります(低解像度と高解像度の両方で見栄えが良いためです) resが表示されます)。この場合、 elastic layout を強く検討する必要があります(これは、現時点ではAmazonが行っていることです)。

より多くの利用可能なスペースは、TIがユーザーエクスペリエンスを再設計する必要があることを意味します

大声で申し訳ありませんが、それは重要です。さらに、それは基本的なです。いくつかの画像をストレッチし、UIをランダムにズームしても、サイトは改善されません。各ページに表示される製品を2倍にするだけで、同じUXは必要ありません。 より多くのスペースがある場合は、それをよりよく使用する必要があります。小さい画面に対して行った妥協と決定を破棄します。


拡張ディスカッション...

Eコマースプラットフォームは豊富な画像に依存しており、流動的なレイアウトではより大きな画像を使用できます。

もちろん、大きな画像を作成するのはかっこいいですが、大きな画像をダウンロードして保存するのも重くなります。必要なサイズの画像を提供するためのすべてのコードについても言及していません(また、それらをキャッシュします。また、ウィンドウサイズが異なる場合があるため、ブラウザーに完全に依存することはできません)。

この瞬間、Amazonは126x135で画像を提供しています。 1900×1200の固定幅で問題ありませんが、4Kモニターで画像サイズを大きくするには、解像度を(少なくとも)2倍にする必要があります。大きな画像は間違いなくメリットですが、帯域幅とストレージを使用します。これは私たちのポートフォリオサイトにとって問題ではないかもしれませんが、Amazon(およびその他の人々)にとっては考慮すべき問題かもしれません。最新のデータはありませんが:

  • 私のホームページでは、約50の製品を紹介しています。
  • 各画像の平均サイズは4 KBであり、画像がキャッシュされていない場合は、200 KBのデータをダウンロードしたことを意味します(HTTP 1.1で50以上のサーバー接続がある場合)。
  • Amazonの1日あたりのユーザー数は2,000万人を超えます。つまり、ホームページのみで、最悪の場合、4 GBを使用しています(サーバー側の帯域幅!ストレージ)。これを2倍にして、サイト全体の各商品画像に適用します。このため、ハードウェアの変更が必要になる場合があります。

256×256プレビューを使用しますか? client-side download time(大声でもう一度):

まず最初に web-siteはFAST でなければなりません。 128×128のプレビューをお願いしますが、可能な限り高速にしてください。画像サイズを2倍にすると、読み込み時間もほぼ倍になります。

コメントから:いいえ、クライアント側で低解像度の画像を拡大縮小しないでください。どれほど簡単かは関係ありません。見た目は醜く、専門的ではありません。

EコマースのWebサイトには、紹介する商品がたくさんあります。

流動的なレイアウトを使用する場合、より多くの部屋は、各製品ボックスの周囲により多くの空白を意味します。役立つものもありますが、多すぎると役に立たず、逆効果になります。レスポンシブレイアウトについて話している場合は、そのとおりです。より多くのスペースがより良いですが、この場合も制限を設定します。画面が3840×2160の場合でも、128×128の画像(プレビューにはまともなサイズ)で埋めたいとは思わないかもしれませんが、同じページに400〜500の製品があることを意味します多すぎますユーザーが画像ギャラリーをスクロールしていない限り。

EコマースのWebサイトでは、長いテキスト行がほとんどなく、スペースがセクションに分割されています。

販売する商品によって異なります。 Amazon(たとえば)の製品説明は非常に長くなることが多く、流動的なレイアウト(単独)はそれらを処理するための最良のオプションではありません。よくできたレスポンシブレイアウトで長い行を処理できることに注意してください。

960pxはまあまあ...

これを前提にしないでくださいStatistics は、対象者を絞って人口を減らす必要があるため誤解を招きますが、一般的に言えば、最も一般的な解像度は現在(2015年末)1366×768です。 1920×1080は1024×768よりもわずかに一般的です。

...そして現在、ほとんどのユーザーは16:9のモニターを使用しています。

画面の解像度とディスプレイのアスペクト比は関連していますが、別々のものです。たとえば、真新しい製品(Apple iPadPro、1か月前にリリースされたもの)の解像度は2732×2048で、ディスプレイのアスペクト比は4:3です。

流体設計は、クリーンで没入型のエクスペリエンスを提供します。

固定幅のレイアウトも、それをどのように作成するか、および提示する必要があるコンテンツのタイプによって異なります。 アダプティブレイアウト(修正済みですがメディアクエリを使用)は、多くの場合、優れた簡単なソリューションです。

グリッドシステムは非常に強力になり、使いやすくなりました。そのため、流動的なデザインを作成するのは簡単です。

私は完全に同意しますが、createという1つの単語に重点を置きます。


これらのウェブサイトのいくつかは、960が標準になったときに誕生しました。

それは本当かもしれませんが、推測することはできます。

彼らは正統派のユーザーを遠ざけるかもしれないと懐疑的ですか? (しかし、次世代ユーザーはどうですか?)

私はそうは思いませんが、それは私自身の意見です。とにかく、1〜2年間何も売らないつもりでない限り、orthodoxユーザーを次の世代を待って不満にさせることはできないと考えてください。ユーザーではなくファンがいない場合を除いて、多くの場合、段階的な変更が鍵となります(私は誰にも言及しません)。

彼らは、レイアウトの大幅な変更により、忠実なユーザーがナビゲーションを最初から再学習するようになると感じています...

それは本当かもしれませんが、再び漸進的な変更はスムーズなアップグレードに役立ちます。オプションとして両方のレイアウト(当時は固定と流動的)を備えたいくつかの統治的なWebサイトを見ました。それはかなり一般的なアプローチです:WindowsでMicrosoftを考えるXP(そしてそれはgummyUIです)o Facebookと日記への移行(2つだけ言及します) 。

彼らは安全にプレーし、十分にテストされたものを使いたいと思っています。

私は完全に強く同意します。 test 流体レイアウトは、少なくとも最も一般的な解像度とアスペクト比に加えてエッジケースをテストする必要があるため(流体はパーセンテージであることに注意してください)、5倍の拡張性と長い時間になる可能性があります。 (幅だけでなく)レイアウトが変更されるため、レスポンシブレイアウトは(テスト用に)さらに悪化する可能性があります。


以下の場合、レスポンシブ(流動的ではない)レイアウトはかなり良い COMPROMISEソリューションであると思います。

  • ターゲットが異なるデバイスの場合。
  • コンテンツで必要な場合。

両方のifsにyesと答えた場合、より多くの(はるかに)より多くのテストとより慎重な設計を数える必要があることを覚えておいてください。これは、最初のリリースと将来の更新の両方でより多くのお金を意味します。より大きなサイトは、 true needing とコストのバランスを慎重にとります(Stack Exchangeについて考えてください(部分的にレスポンシブレイアウト 助けて?)。また、XGAから4K(または8K)まで優れたレスポンシブレイアウトを作成するのは簡単ではありませんが、.

3
Adriano Repetti

私はこれに関連することができます。長い間、私たちはeコマースWebサイトに対して少なくとも部分的に応答するように求めてきました。私が信じている主な理由は、コンバージョンです。すでにうまく機能しているものに対する恐怖は、その過程で壊されます。

レスポンシブはトレンドであり、おそらくデバイスと解像度の増加に対応する傾向にありますが、実際にはレスポンシブは、UIが次から次へと変換できるように各レイアウトに妥協が必要なソリューションです。つまり、最適なレイアウトはありません。これは、UIを変換用に最適化したい企業にとっては問題です。つまり、特定のui要素とそのページ上の配置を決定するためにテストが行​​われた場合、表示されているデバイスに基づいてこの配置が変更される可能性があるため、妥協する必要があります。それが理にかなっていると思います

2
Ameen Akbar

真実は、技術はまだ下手だということです。あなたはまだレスポンシブなウェブサイトとパフォーマンスの両方を持つことはできません。応答性の高いWebサイトのレンダリングはリソースを消費します。それはあなたが電子商取引に持ちたいフローを殺します。多分ある日。

0
Julien Reszka