モバイルファーストやスマートフォン経由での流入増加にともない、企業側ではこれまで以上にサイトのスマホ最適化が進んでいるように感じます。しかし、単純にレスポンシブルでスマートフォン向けに画面のサイズを合わせただけでは、スマホユーザーの満足度をあげるのに十分とは言えません。
スマホとデスクトップでは、それぞれのデバイスでページ内のユーザーの行動が異なります。UXを上げるためにはスマホユーザーの特徴を知りサイトを構成することが重要です。
今回は、スマホサイトのUXを向上させるために確認しておきたいポイントを５つお伝えします。
目次
１）ページはシンプルでわかりやすく
スマホユーザーはデスクトップユーザーと違い、画面内で取得できる情報が異なることからページの閲覧の仕方に違いがあります。サイトユーザーの行動研究をしているClicktale社によると、スマホユーザーは、ページへ到着すると下までスクロールし、そのページでの動作にどのくらい時間がかかりそうか予測を立ててから、ページにとどまるか否かの判断をする傾向があるといいます。
そのため、ページの長さに制限をかけることで、ユーザーの離脱を防げる可能性があがります。不必要な空白を詰めたり指で押しやすいナビゲーションにするなど、構成を短くシンプルにまとめ、ユーザー操作に負担のかからないデザインを心がけましょう。
2）実機で画面を確認しサイズを合わせる
スマホページのデザインはデスクトップからでも確認はできますが、実際の端末で見た際に「思ったより文字が小さかった」という話をよく聞きます。ユーザーが画面を縮小、拡大する必要のないよう、スマホサイトのデザインは必ずスマホの実機で確認しましょう。
また、ページの見出しを短く簡潔にするなど、デバイスの幅に合わせてメッセージ量も調整をしましょう。サイトのコンテンツをスライドメニューで表示させたり、検索機能を設置するなど、ユーザーが各コンテンツへアクセスしやすくすることもサイトの操作性に貢献します。
３）CTAボタンをいくつも並べない
「商品の購入」や「アプリのダウンロード」など、1ページ内にいくつもCTA（コールトゥーアクション）リンクを配置しているサイトを見ることがあります。スマホサイトは画面サイズに制限があるため、小さなリンクボタンや複雑なCTAの配置はユーザーの混乱や不満を招く原因となります。
CTAは最終目標につながる重要なものだけを配置し、デバイスの幅に合わせて間隔やサイズが最適なデザインを用意しましょう。ユーザーに最もとって欲しい行動を明確にすることが、コンバージョンの増加へとつながります。
4）フォームの入力項目は最小限にする
デスクトップ以上に、スマホでのフォーム入力は操作の難易度があがります。フォームを構成する際は、ユーザーに入力させる項目は最小限にとどめ、画面のスクロールはさせずにページにおさまるようにしましょう。ページを分割し、4ステップ以内で入力工程が完結できると理想的です。
ユーザー操作を快適にすることが、不必要なフォームからのユーザーの離脱を減らすことにつながります。
5）ページの読み込み速度を上げる
スマホユーザーはデスクトップと比べ、サイト内の動作が素早い傾向にあります。そのため、ページを遷移する際に、読み込み時間中ユーザーがストレスを感じないよう、ページを軽量化させることが重要です。
たとえば、下記のような方法でページの軽量化が可能です。
- 画像の容量の削減
- カルーセルのような複雑で重いナビゲーションギミックを避ける
- JavaScriptや他のコードを最適化する
- CSSを単純化する
また、ページの読み込み中は可能な限り画面にフィードバックを表示させてください。たとえば、ユーザーがフォームを送信した後に、「データ送信中」などのグラフィックを表示させることで、ページの状態をユーザー側で把握することができます。
ユーザー行動の理解はUX向上へつながる
今回あげたとおり、同じユーザーでも使用するデバイスによってサイト上での行動が異なります。
理想的なのは、モバイルアプリと同じような操作体験をスマホサイトで実現させることですが、デバイスごとのユーザー特徴を理解することで、UX向上につながるデザインを作ることができるでしょう。
※この記事は、以下の記事を翻訳・加筆修正したものです。
-「Five tips for creating a better customer experience on your mobile site」
