モバイルファーストのデザイン

モバイルファーストデザインとは、まず最小かつ最も制約の多い環境向けに設計・構築し、その後、より大きな画面やより高度な機能に対応するように段階的に強化していく手法です。ルーク・ウォロブレフスキー氏によって広められたこの手法は、デスクトップ版の完全なエクスペリエンスを設計してからモバイル版で何を削除するかを決定するという従来のやり方を逆転させたものです。従来のやり方では、モバイル版でも何かが欠けているような印象を受けることが少なくありませんでした。

その理由は、制約があることで優先順位付けが必然的に生じるからである。小さな画面ではすべての情報を表示できないため、チームは最も重要な要素を決定する必要があり、その決定はデスクトップ版の改善にもつながる。なぜなら、明確な階層構造はあらゆる画面サイズにおいて価値があるからだ。これとは逆の方向で作業を進めると、この問題は最後まで先送りされ、最終的にはブレークポイントを実装する担当者が時間的プレッシャーの中で選択を迫られることになる。しかも、その選択には、本来であれば議論を交わすであろう関係者の意見が反映されないことが多い。

モバイルファーストは、デザイン戦略だけでなく、技術戦略でもあります。制約のあるデバイス向けに基本となるエクスペリエンスを構築し、その上に機能強化を重ねていくことで、デフォルトのペイロードは小さくなり、コアコンテンツと機能は重いJavaScriptを使わずに動作し、サポート可能な追加機能が追加されます。これとは逆のアプローチでは、デスクトップ版の完全な実装をすべてのデバイスに提供し、その一部を非表示または無効化しようとしますが、これは表示される内容を減らすだけで、ダウンロードおよび実行される内容を減らすことはありません。

コンテキストに関する議論はしばしば誇張されており、正確に述べる価値がある。モバイルユーザーを、移動中に注意散漫になり、狭く差し迫ったニーズを持つ人々として捉える初期の考え方はもはや通用しない。モバイルは、自宅を含め多くの人々にとって主要な、そして多くの場合唯一のアクセス手段であり、モバイルユーザーは複雑で価値の高いタスクを日常的にこなしている。真に異なるのは、画面の物理的な制約、タッチ操作の不正確さ、接続の不安定さ、そして中断の頻度である。これらの制約を考慮した設計は妥当であるが、より狭い意図を想定した設計は妥当ではなく、人々が実際に必要とする情報が欠落したモバイルサイトというよくある失敗を生み出す。

この点を誤ると、測定可能な結果が生じることはほぼすべてのコマースデータセットで明らかです。モバイルトラフィックの割合はデスクトップを上回っているにもかかわらず、モバイルコンバージョン率は大幅に下回っています。この差の一部は、モバイルに関する調査結果とデスクトップでの購入状況を反映したものであり、確かに存在しますが、その大部分は、使い勝手の悪さ、つまり、フォームの窮屈さ、ページの読み込み速度の遅さ、チェックアウトの煩雑さ、そして追加タップが必要なコンテンツなど、ユーザーエクスペリエンスの悪さに起因しています。この差を診断可能な問題として捉えるのではなく、避けられない問題として扱うことは、企業が犯しうる最も大きな過ちの一つです。

モバイルファーストの取り組みで明示的に対処しなければならないもう1つの制約は、中断です。モバイルセッションはデスクトップセッションよりも頻繁に一時停止、バックグラウンド実行、再開されるため、こうした状況で状態が失われるプロセスは、まさにその状況で起こりうる動作を阻害します。入力されたフォームの進行状況を保存すること、セッションを中断したところから再開できるようにすること、入力されたデータを破棄するハードタイムアウトを回避すること、銀行認証ステップなどの外部アプリケーションからの戻り時にトランザクションが失われないようにすることなどは、改良ではなく必須要件です。認証ステップにリダイレクトされ、ユーザーが時間がかかりすぎると復旧できない決済フローは、具体的かつコストのかかる例であり、リリース後に初めて発見されることがよくあります。

それを閉じるには通常、2つの側面で同時に作業する必要があります。インタラクションとレイアウトの側面は、 製品設計読み込みとレンダリング側は Webパフォーマンスモバイルデバイスとネットワークは、あらゆる重量とブロッキングリソースの問題を増幅させるため、特に商取引においては、最も価値の高いターゲットはほぼ常にモバイルチェックアウトであり、 eコマース 通常、問題解決は、損失が発生している箇所を隠してしまう複合的な数値を読むのではなく、モバイルファネルを個別に測定することから始まります。