クロスデバイス最適化のための15のヒント

Oct 8, 2025

操作方法

すべての機器の設計！ AnnaDahlström. の重要性について話します 建物デバイス - アジノスティックUXシステム at ロンドンを生成します 9月21-23日。彼女はなぜデバイスの不具合のデザインが重要なのか、それが意味するのか、そしてそれについてどのようにそれについて行くのかを歩きます。 今予約する ！

私は15年以上前にHTTPログファイルとユーザーエージェント文字列をめくると、エコンルイスeコマースの初期のeCommerceのWebサイトでロッキングしたすべての異なるデバイスを分析し、検討しました。私が時間を過ごしたら、私は自分自身を与えることができますか？

それはこれになるでしょう。あなたがこれらの欠陥を狩るならば、あなたがほとんどすべてのあなたの他の仕事をまとめるよりも簡単にお金を稼ぐでしょう。

顧客がすぐに不平を言う傾向にもかかわらず、あなたのデバイスの経験にバグを報告することはありません。あなたが少数の苦情を受け取るならば、あなたはおそらくあなたの手に大きな災害を起こします。苦情がない場合は、まだ壊れている可能性があります。

デバイスとブラウザの問題については、Webサイトの訪問者に頼ることはできません。デバイスの互換性は権利ではなく、それを間違っているのは、無視された差別の形式です。

この記事では、クロスデバイスの最適化とA / Bテストを覚えておくべきキー規則の概要を示します。最初に最適化のヒントに取り組みます。デバイスの互換性、パフォーマンスとユーザビリティで基本的な間違いをしている場合は、A / Bテストに悩まされていません。最初に壊れたことを見つけて固定してください。その後、A / Bテストを実行するのに十分なトラフィックを持っているとき（少なくとも500の変換または1ヶ月のチェックアウト） - いくつかの新しい間違いをすることができます。

01.レスポンシブがすべてを解決しないでください

私はかつて敏感ではない小さなモバイルサイトを建てていますが、毎年10億ユーロの最良の部分を取り入れています。必要なタスクのために、それは完璧です。流体のレイアウトの用語では反応しませんが、それを使用しているほとんどすべての人のニーズに応答しています。違いを知っています。

時々人々はそれを考えます レスポンシブウェブデザイン デジタルマスタリーの兆候です。「ウェブサイトを持っている」や「私たちのウェブサイトを持っている」と言うのと同じようなものは何も伝えている属性です。それは素晴らしいクロスデバイスの経験の保証なしです。

私は、そのチームが顧客の知識を無視しているので、私は表面的な濃さを持っているが使いやすさに失敗する多くの敏感なサイトを見ます。 1つの良い例がAです eコマースのウェブサイト それは答えに行き、その収益の40パーセントを失いました。それは素晴らしいモバイルエクスペリエンスを構築しましたが、デスクトップのバージョンは吸っています、そしてそれはお金の80パーセントが来たところです。あなたがそれを殺すのを避けたいのであれば、ゴールデンガチョウがどこにあるかを知ることができます！

02.あなたの研究を命令してください

サイトを最適化すると、ページ内容でのハッキングから始まりません。あなたの唇が「顧客の旅」と言うとき、それはあなたの研究をやり直して始まります、それは抜け出していないものはおとぎ話ではありません。訪問者、彼らのタスク、目標、エントリーポイント、デバイスミックス、パス、フロー、放棄エリアを最初に知ることは不可欠です。理解していない問題を解決することは非常に困難です。

Analyticsデータの使用 ユーザー体験 研究、調査、またはフィードバックは、「旅」についてのでたらし、自我と仮定を削除するための急速で軽量な方法です。 1時間の情報依頼データは、千時間の未チェックの意見の価値があります。

参考文献： ' 1時間での変換研究 '; ' 調査のためのセッション再生ツール '。

03.デバイスではなく、人々を追跡します

A Google Analytics User ID view showing overlapping device usage — 重複するデバイス使用を示すGoogle AnalyticsユーザーIDビュー

ユーザーを追跡する分析セットアップを使用していない限り、代わりにトラッキングデバイスを終了するだけです。企業は、彼らの「モバイル」トラフィックが変わっていないことを不平に言っています - そして我々は実際には完全に異なるデバイス上で実際に変換されていることを見つけました。

人々は自分の携帯電話を使って自分のバスケットに商品を閲覧して追加することができますが、チェックアウトを通過するのは難しいことを見つけるので、彼らのラップトップで販売を終えましょう。このサイトは、これらのものを2人として考えています。モバイル顧客とデスクトップの顧客。

したがって、変換の問題は実際には帰属問題です。顧客が複数のデバイスを使用している場合は、デバイスの経験への販売をどのように信用できますか？ Google Analyticsには、デバイスではなく、人々を追跡できるユーザービュー（ログインユーザーがログインユーザーの場合）があり、これを理解するのに役立つ多くの分析ツールがあります。

04.より広いコンテキストを無視しないでください

このハイパーモバイルデバイスの世界では、コンテキストはすべてです。航空会社のアプリから必要なものは、ゲートのために走っているときに、フライトの48時間前に非常に異なるかもしれません。電話でその人のために、あなたは経験に影響を与える要因を考慮する必要があります。これらには、タスク、目標、デバイス、場所、データレート、ビューポート、緊急性、動機、データコスト、通話費用、または訪問時の天候でさえ含めることができます。

05.オフィスから出てください

より良い製品を作ることは、オフィスで過ごした長い日を伴うべきではありません。コーヒーショップやパブへの訪問で就業日を分割しないのはなぜですか？これはUX研究のための顧客を見つけるための最も安い方法の1つです。プロトタイプやデザインに関するフィードバックと引き換えにビールやコーヒーを提供することは、貴重な投資収益率です。そしてウェブサイトを忘れないでください - あなたがトラフィックを持っているならば、あなたは人々を募集し、彼らとオンラインでテストを実行することができます。

参考文献： ' それらすべてを支配するためのUXツール '。

06.誰もがiPhoneを使っていると仮定しないでください

Diagram showing the percentage splits across device classes, OS and models — デバイスクラス、OS、モデル間の分割パーセンテージを示す図

ほとんどの分析セットアップでは、iPhoneモデルはまとめられており、これらが主な顧客デバイスであることを提案します。あなたのデータのモデルを見るだけで、これはあなたの考えをゆるみさせます。実際の写真を見るためにOSまたはプラットフォームによってデバイスを分割する必要があります。 Google Analyticsは、私のトップモデルが「iPhone」であると言うかもしれませんが、一握りのサムスンモデルでさえも、はるかに大きな聴衆を上げることができます。

誰かが顧客ミックスの代わりに自分の個人的なデバイスの好みに集中するように誘惑されるたびに、データが言うことを彼らに思い出させるために彼らに右の図を指示する（それはあなたのオフィスの壁にそれをくっつく価値がある価値がある）。

参考文献： ' クロスデバイス最適化のためのGoogle Analyticsを使用するための究極のガイド '。

Discover why your designs should be device-agnostic at Generate London — デザインがLondonの生成時にデバイスの不具合であるべきかを発見

07.通話追跡を忘れないでください

自由でめったに使用されていない技術への言及。電話をかけることができるタッチデバイスがある場合は、通話を追跡できます。誰かが電話番号をタップするたびに、分析データにイベント（またはPageView）を追加するだけです。それから、あなたが求められた何枚の電話がかかってきたのか、そしてどのマーケティングキャンペーンやソースが最も呼ばれているのかを正確に把握するのか知っているあなたはいくつか知っています。

私はこのデータを使って大企業のためのPPCアカウントを分析しました。電話から来る販売に想定されているとき、それは私たちの入札を完全に変えました。節約は、PPCのための40から70パーセントの紙幣でしたが、同じ量の収益でした。

08. Webサイトのスピードを追跡するために実データを使用してください

Google Analyticsがあなたのページがどれほど遅くなっているかについて、Google Analyticsが本当の訪問者の測定値を収集することを知っていません。（Wi-FiConnectionでサイトを参照すると）パフォーマンスを想像するのではなく、データに吸う場所を教えてください。 DOMタイミングレポートを参照してください。これにより、Webページ構造とコンテンツがロードにかかる時間が記録されます。サイトを迅速にすることはゲームチェンジャーです。

パフォーマンスと変換率の間に大きな相関がありますので、遅い場合は、競合他社に人々を送るためだけにマーケティングのお金を費やしています！

参考文献： ' サイトスピードを解釈する '。

09.クリエイティブではなくテスト方法をコピーする

テストを見ると、他の会社が実行してきた場合は、完全にテストを開始した場合はわかりません。彼らのデータ、メソッド、QA、またはサンプルサイズは、彼らが基本的な間違いをしたことを示すかもしれません。データを正確に収集しているかどうかを確認した場合、テストを実行したりチェックしたりしていない可能性があります。あなたはわからない。

そして、あなたがすべての背景情報を持っていたとしても、あなたは彼らの方法があなたのために機能するかどうかを予測することができませんでした。あなたの顧客、マーケティング、ウェブサイト、そして他のすべては完全に異なります。要するに、テストのためのベストプラクティスルールは主に創造的ではなくメソッドのコピーに関するものです。

参考文献： ' ベストプラクティスと最適化専門家の無限の吸い '; ' 変換最適化の最適化のベストプラクティスが失敗するとき '。

10.計画なしでテストしないでください

あなたのサイト全体の場所でテストできることに何百万もあります。あなたが「始める」だけの場合、あなたは最終的に最適なウェブサイトを得るかもしれません - しかし宇宙の熱死はあなたを最初にもらうでしょう。あなたの経験に壊れたものがある場合は、それ以外のように（テストの前に）最初に修正する必要があります。パフォーマンスとデバイスの互換性の基本があると、分析を使用して機会を特定します。

「ただのものを変える」はテストするのに十分な理由ではありません。良いテストを推進するための証拠や洞察が必要です。最高の学習はあなたのテストにチャネルするための素晴らしい質問をすることから来ています。

11.仮説を確立する

Ask people to describe the test they want to run using this sentence. If you’re laughing, it’s a bad test — この文を使って実行したいテストを説明するように人々に依頼してください。笑っているなら、それは悪いテストです

仮説キットは、私が教える最も便利なことの1つです。

[データ/フィードバック]を見たから[変更]が[Impact]になると予想しています。 [データメトリック]を使用してこれを測定します。

このようにして自分の質問やA / Bテストを枠組むように頼むように彼らは彼らがテストを実行している理由と成功のどれだけの成功について考えるように彼らに力を与えます。

参考文献： 仮説キット3. 。

12. Test Calculatorを最初に実行します

A / Bテストの前にテスト計算機を実行するのは本当に良い習慣です。それが終わるために90万年前後の年をとると言うならば、あなたはあなたの人生にもっと便利なことをすることができます。

13. 95％の信頼度で止まらないでください

A / Bテストで作るのは非常に一般的なNoob間違いです。テスト時間を事前に決定してから、その時点でそれを実行し、それを停止して分析する必要があります。現実の世界で実行されているテストのほとんどは完全に架空のものです - それが、変換中の約束の「エレベーター」が到着しないときに人々ががっかりする理由です。テストを誤って呼び出したり、結果に対して長く待ってください。避けるべき問題は一般的な問題です。

参考文献： ' 統計的有意性は等しい妥当性ではありません '; ' すべてのインターネットマーケティング担当者が統計技師になるべき理由 '。

14.デバイスクラスによるセグメント

あなたのデザインに異なるデバイスやブレークポイントがある場合は、A / Bテストは完全に異なります。あなたのデザインがすべてのデバイス上でどのように見えるかわからない場合は、それがまったく動作していることを確認できますか？別のデバイスクラスまたは「ブレークポイント」によってデータを分析してセグメント化しない場合は、行動の変化をどのように知っていますか。私のクライアントの1つは、顧客が自分のデータ層に見た正確なデザインを保存します。これは非常に便利です。

モバイル、タブレット、デスクトップのデバイスクラス間で人々をターゲットにしているのか、またはセグメント化する方法を常に理解してください。デバイスの経験が非常に変わると、「平均的な」訪問者はありません。

15. QAテストを忘れないでください

デバイスミックスを取り出していない場合は、おそらくA / Bテストをテストしているのではありません。それは、おそらく壊れているのはかなりの数の意味を意味します - あなたのA / Bテストが壊れている場合、あなたのデータと意思決定は可能性が高いでしょう。高品質の開発者でさえ、私のテストデザインのすべてのテストデザインの約30~40パーセントを失敗させる - それはあなたのためのJavaScriptです！そうでなければ証明されるまで壊れていると仮定する。

概要

ここで私はあなたのクロスデバイスの経験を改善するためのいくつかのヒントをカバーしました。あなたが始めているとき、あなたのデバイスがミックスし、それらのデバイスの背後にある顧客を理解することは不可欠です。次の段階はあなたがあなたの努力を優先するのを助けるためにデータを処理することです。良いテストリストを作成する（Google Analyticsを使用して）開発者のための努力をカットしますが、一般的なデバイスで削除した欠陥の数を増やします。

素晴らしいクロスデバイスの経験の設計は、データ、直感、共感、実験の慎重なバランスです。あなたがこれらがEGOと意見によって満たされたスペースを占めることを許可するならば、良い仕事は繁栄するでしょう。 Stephen Hawkingが言ったように：「知識の最大の敵は無知ではありません、それは知識の幻想です。」

デバイスアンジノスティックデザインの重要性について学ぶ AnnaDahlström. at ロンドンを生成します ！に 建物デバイス - アジノスティックUXシステム 彼女は、コンテンツガイドのレイアウトをレイアウトさせ、それらのビューが構成されているモジュールに集中するようにページの設計から離れて移動する理由を説明します。 あなたのチケットを予約してください ！

この記事は最初に登場しました ネットマガジン 問題279; 今すぐ購読してください ！

クロスデバイス最適化のための15のヒント

01.レスポンシブがすべてを解決しないでください

02.あなたの研究を命令してください

03.デバイスではなく、人々を追跡します

04.より広いコンテキストを無視しないでください

05.オフィスから出てください

06.誰もがiPhoneを使っていると仮定しないでください

07.通話追跡を忘れないでください

08. Webサイトのスピードを追跡するために実データを使用してください

09.クリエイティブではなくテスト方法をコピーする

10.計画なしでテストしないでください

11.仮説を確立する

12. Test Calculatorを最初に実行します

13. 95％の信頼度で止まらないでください

14.デバイスクラスによるセグメント

15. QAテストを忘れないでください

概要

操作方法 - 最も人気のある記事

ライオンを描く方法

マウス制御視差の背景効果を生み出す

ビジュアル開発のヒント：あなたのアートワークで物語を語る

バッドアス芸者を描く

Reactで簡単な音楽プレーヤーを構築する

写真をVRセットに変換する

あなたの静物画絵画を鮮明にする

ゲーム用の様式化された3D文字を作成する方法

カテゴリ