モバイルUXを改善する方法：11の効果的な戦略

公開: 2022-03-18

モバイルユーザーに焦点を当てる必要がある理由

あなたはモバイルフレンドリーなウェブサイトを持っていますね？関連するコンテンツで最新の状態に保ち、最新のSEOガイドラインに従っていますか？もちろん、あなたはそうします！そして、私はそれがあなたのデスクトップまたはラップトップで素晴らしいユーザーエクスペリエンスを提供すると確信しています。

しかし、それはモバイルデバイスで変換されますか？モバイルインターネットの使用は年々爆発的に増加しているため、モバイルユーザーエクスペリエンス（またはモバイルUX）は、デスクトップWebサイトのユーザーエクスペリエンスと同じくらい注目を集める必要があります。

2022年には、Webトラフィックの最大70％がモバイルデバイスからのものでした— TECHJURY

モバイルUXを改善する方法を知っていますか？残念ながら、ほとんどのモバイルエクスペリエンスは、1つの単純な理由で、UXの低下に悩まされています。それは、作成者がモバイルUXデザインのベストプラクティス、標準、および規則を順守できなかったことです。

Googleがモバイルバージョンに基づいてサイトを評価することが増えているため、モバイルユーザーエクスペリエンスの向上はさらに重要になります。この投稿では、モバイルWebサイトのユーザーエクスペリエンス（UX）を強化するための11の実践的な戦略を共有したいと思います。

この投稿で言及されていることはすべてタブレットにも当てはまりますが、この投稿を書くときはスマートフォンを念頭に置いていました。しかし、2022年には、他の多くのデバイスがコンテンツを消費する可能性があるため、スマートフォンを念頭に置く必要があるだけではありません。あなたの何人かはあなたのスマートウォッチでこの投稿を読むかもしれません。

モバイルUXを改善する方法

1.タスクベースの設計を使用する

質問：ユーザーがあなたのウェブサイトにアクセスする主な理由は何ですか？

モバイルSEOを忘れずに、ユーザーを念頭に置いてモバイルWebサイトとその構造を設計します。あなたの訪問者は彼らの携帯電話を使用します。たぶん彼らは何にでも向かっていて、あなたのウェブサイトで何かをチェックする必要があります。それは何でしょうか？訪問者があなたのウェブサイトで行うことについて少し考えてみてください（Google Analyticsをチェックするか、あなたのビジネスについての常識を使用するか、適切なテストを実施してください）。次に、モバイルWebサイトの上位のタスクを決定します。

上位のタスクは、訪問者にとって最も重要なタスクの小さなセット（通常は10未満、多くの場合5未満）です。これらは、ユーザーがサイトで実行することを期待する重要なタスクです。これらのタスクに可能な限り簡単にアクセスできるように、モバイルサイトを最適化します。

あなたのウェブサイトの主な目的は、訪問者が物事を成し遂げるのを助けることです。誰かがあなたのウェブサイトを見つけてそれを閲覧し始めたら、彼らがやりたいことを簡単に見つけて完了することができることを確認してください。彼らが使用することに慣れている彼らの携帯電話にはおそらくたくさんのアプリがあります。モバイルデバイスを使用していると、ユーザーが集中しにくくなる可能性があります。気を散らすものは、電話だけでなく、いたるところにあります。代わりに他のアプリに切り替える前に、モバイルUXが確実に実行されるようにモバイルUXを設計してください。

2.シンプルに保つ

デスクトップサイトはヒーロー画像と巨大なテキストで素晴らしいと思うかもしれません。ただし、モバイルWebサイトでは、ユーザーはその効果を異なる方法で認識します。焦点が少なくなります。 Webサイトは白黒だけである必要はありませんが、より優れたモバイルUXを実現するには、単純な白い背景、黒い文字、および1つまたはおそらく2つのサポート色で十分です。

モバイルサイトとデスクトップサイトが同じユーザーエクスペリエンスを提供することを確認してください。一貫性はコンテンツに適用され、デザインにも適用される必要があります。さらに、今日、サイトを評価するときは、常にモバイルファーストの観点からサイトを確認する必要があります。したがって、サイトの再設計プロジェクトを開始する場合は、モバイルファーストであることを確認してください。

物事をトーンダウンすることは、アニメーションやその他のマイクロインタラクションにも当てはまります。サイトに追加するJavaScriptの重要でない部分はすべて、ロードと実行を困難にします。さらに、アニメーションはモバイルサイトでは必ずしも意味がありません。だからあなたのサイトを無駄のない、意地悪なものにしてください！

3.速度を最適化する

モバイルサイトをできるだけシンプルに保つことは、モバイルデバイスでのページの読み込み速度を向上させるのにも役立ちます。ページ速度は、モバイルユーザーエクスペリエンスに大きく貢献します。サイトの速度をチェックするための多くのツールがあります。多くの場合、ページ速度を最適化するためにできることがいくつかあります。

サイトの速度もGoogleのホットトピックです。 2021年に、検索エンジンはCoreWebVitalsと呼ばれる新しい一連の指標を発表しました。これらの指標は、新しいランキング要素であるページエクスペリエンスに関するGoogleの洞察を提供します。 2022年に、ユーザーはユーザーに提供するエクスペリエンスによってモバイルサイトを判断します。そして、ご想像のとおり、サイトの速度はそれらの要因の1つです。

あなたができる最も簡単で最も効果的なことの1つは、SEOとユーザーエクスペリエンスのために画像を最適化することです。それを支援するいくつかのツールがあります。私はImagifyが好きですが、SmushとShortPixelは実行可能な代替手段です。

それに加えて、ロードされたCSSファイルとJavaScriptファイルを組み合わせて縮小する必要があります。サーバーへの必要な接続が少ないほど、Webサイトは高速になり、モバイルユーザーエクスペリエンスは向上します。ただし、この手順はWebサイトを破壊する可能性があるため、プロのWebデザイナーに支援を依頼する必要があります。

もちろん、プレミアムホスティングも使用する必要があります。これは、多くのサイトですぐに成功することが多いためです。

4.クリック可能なボタンを使用する

それは非常に明白ですが、それでも懸念の原因です。訪問者は指と親指を使用してモバイルWebサイトを閲覧しますが、ボタンを押すだけで十分なスペースが得られるとは限りません。これは、Googleの開発者向けドキュメントのAccessibleTapTargetsにあります。そして、その親指で要素をクリックできるようにする必要があります。

上にリンクされているそのGoogleの記事では、そのタップターゲットの数値を見つけることができます。

推奨される最小のタッチターゲットサイズは、モバイルビューポートが正しく設定されているサイトでデバイスに依存しない約48ピクセルです。 たとえば、アイコンの幅と高さは24ピクセルしかない場合でも、追加のパディングを使用して、タップのターゲットサイズを最大48ピクセルにすることができます。 48×48ピクセルの領域は約9mmに相当し、これは人の指の腹の領域とほぼ同じサイズです。

さらに、ニールセンのユーザビリティの専門家は、エラーやフラストレーションを防ぐために、モバイルのタッチターゲットのレンダリングサイズを少なくとも1 cm x1cmにする必要があることを発見しました。ボタンのヒット領域に関連するのは、タッチ要素が近すぎることが多いことです。これは、ニールセンがその調査記事でも説明していることです。たとえば、リンクをクリックして別の場所に移動することは、その隣のリンクが目的のリンクに近すぎるため、有益ではありません。

5.モバイルサムゾーンに焦点を当てる

画面サイズが大きくなるにつれて、「モバイルサムゾーン」という用語は、デザイナーの言葉で突然重要になりました。ほとんどの人はモバイルデバイスを片手で持ち、親指を使ってサイトをナビゲートします。

当然のことながら、モバイルユーザーインターフェイスは、親指で快適に手の届く範囲に、クリック可能な要素と重要なナビゲーションボタンの大部分を提供する必要があります。したがって、ユーザーの親指の周りのこの快適に到達可能なゾーンは、モバイル親指ゾーンと見なされます。

つまり、モバイルサイトのエクスペリエンスを「サムゾーン」（人が片手で携帯電話を持っているときに親指で簡単にアクセスできる携帯電話の画面の領域）に合わせて最適化する必要があります。

本質的には、主要なインタラクションを前面と中央（画面の到達しやすい領域）に配置し、重要度の低いインタラクションを画面の上部と下部の端に配置します。画面サイズが大きくなると、サムゾーンが小さくなることに注意してください。

6.シンプルなメニューと検索オプションを追加します

モバイルUXの主な要素の1つは検索です。すぐに検索できるようにする必要があります。したがって、別のページをクリックしてページを読むときは、検索オプションを常に使用できるようにする必要があります。重要なのは、可能な限り最もわかりやすいWebサイトを提示するように努めていますが、それに簡単に適合しない要素が常に存在するということです。したがって、そのすべてのコンテンツについては、モバイル検索オプションを使用することをお勧めします。

あなたが不動産ブローカーであるか、オンラインで洋服を販売している場合、その検索オプションはあなたのモバイルホームページの重要な要素でもあるかもしれません。その場合は、コンテンツエリアにその検索オプションを表示し、他のページのメニューバーから利用できるようにしてください。

検索に関連するモバイルUXについてもう1つ、オプションがあるのはステップ1です。内部検索結果ページも見栄えがするようにしてください。結果は、デスクトップとモバイルなどの関連性に基づいて並べ替える必要があります。個々の結果を区別できるようにして、結果の分離を改善します。

7.ビジュアルセパレーターを利用する

分離がないからといって、モバイルWebサイトであらゆる種類の仕切りを使用する必要があるわけではありません。仕切りはスペースを占有し、代わりにモバイルUXに悪影響を及ぼします。

仕切りを必要とせずに、すべてが別々のセクションのように見えるように要素のスタイルを設定する方法を考えてください。境界線、空白、見出しなどを使用します。スペースを占める線要素を追加せずに、モバイルUXを改善するために多くのことを行うことができます。もちろん、それらを使用することに対する規則はありません。それらが適合していることを確認し、ユーザーがタスクを実行するのを妨げないようにしてください。

8.ショートフォームを使用する

デスクトップのウェブサイトと同様に、モバイルサイトはコンバージョンを目指すことができます。たとえば、訪問者は製品を購入したり、サービスの見積もりを取得したりする予定です。ニュースレターを購読するか、単にお問い合わせフォームに記入することは、すべてユーザー入力を必要とするアクションです。携帯電話では、複数ページのフォームがモバイルUXを台無しにします。ユーザーはこれらに記入するかもしれませんが、それは多くのことを求めています。率直に言って、私はデスクトップやラップトップの複数ページのフォームはあまり好きではありません。

最適なモバイルUXのために、フォームをできるだけ短くしたいと考えています。聞きたいが必要ではないものをすべて削除します。

ニュースレター？電子メールアドレスのみ（<input type =” email”>入力フィールドを使用）。
引用？姓名と電子メールアドレス。
店？配達、請求書、および電子メールアドレス。配送先住所を請求書住所にコピーするオプションのボーナスポイント。

ただし、GDPRガイドラインに準拠していることを確認してください。

9.フォントサイズを制限する

タイポグラフィは、モバイルWebサイトを作成または破壊する可能性があります。重要なフォントの種類だけでなく、それらのフォントのサイズも重要です。残念ながら、モバイルWebサイトですべてのデスクトップフォントサイズを使用することはできません。それには2つの理由があります。

モバイル画面サイズ。 タイトルが画面全体に表示されることは望ましくありません。記事がページの最初のビュー内で開始することを確認する必要があります。また、ベースフォント（段落フォントなど）が小さすぎて、ピンチしたりズームしたりせずに読むことができないようにする必要もありません。
3つ以上のフォントサイズを使用すると、モバイルUXに問題が発生します。 サイズの違いがよりはっきりとわかります。フォントサイズの数を2つ、おそらく3つに制限する必要があります。

Googleのモバイル対応テストでは、推奨フォントサイズを使用しているかどうかも確認されます。もちろん、これは主に本文のフォントに当てはまりますが、それでもなおです。

10.広告とポップアップを制限する

多くのサイトは少しのお金を稼ぐために広告を使用しています、そしてそれは問題ありません。ただし、煩わしいポップアップや大量のサードパーティ広告でユーザーを怖がらせるべきではありません。ニュースレターの登録フォームを最初に体験させる場合、ユーザーを尊重しません。広告とCTAを導入する前に、プライマリコンテンツが読み込まれていることを確認してください。

さらに、広告を上品でトーンダウンさせてください。あなたは接続を構築し、ユーザーとの関係を形成しようとしていますが、モバイルサイトにアクセスした直後にユーザーの顔に「今すぐ購入」をフラッシュしても、それは起こりません。過度に積極的な広告は、ユーザーエクスペリエンスを低下させます。

11.モバイルUXをテストします。繰り返す！

訪問者にモバイルWebサイトを提供するときは、デスクトップサイトとモバイルバージョンのサイトですべての変更をテストする必要があります。これが、モバイルWebサイトが常に最新であることを確認する唯一の方法です。したがって、モバイルサイトを何度もテストしてください。

モバイルUXを改善するメリット

モバイル時代が到来しており、モバイルデバイスでのUXの改善は、デスクトップユーザーにとっての改善と同じくらい重要です。もちろん、それは多くの作業を必要としますが、より幸せなユーザー、改善された検索ランキング、および増加した収益の最終的な利点は、それをすべて価値のあるものにします。

ただし、モバイルUXを改善することは、物事を同じまたは類似した外観にすることではありません。それは、物事をより良く機能させ、採用への障壁を下げることです。ベストプラクティスを習得すると、設計者と開発者は革新と分岐を行って、ルールを曲げたり破ったりする独自の設計を作成できます。

可能な限り最高のモバイルユーザーエクスペリエンスを提供することは、サイト訪問者にあなたの会社が実際に正しい選択であることを奨励するための最良の方法です。

ここで説明したトレンドとヒントのほとんどは、実装が簡単で、多くのリソースや労力を必要としませんが、より徹底的な再設計が必要な場合もあります。

モバイルUXを改善することで、ユーザーがビジネスでどのようなエクスペリエンスを体験できるかを気にかけていることを明確に表明できます。これは、伝えることができる最高のブランドメッセージです。私たちは助けるためにここにいます！

モバイルUXを改善する方法がわかりませんか？

モバイルUXを改善することは、可能な限り最高のユーザーエクスペリエンスを提供するために重要です。ますます要求の厳しいモバイル消費者を引き付け、引き付けるには、ユーザビリティが不可欠です。

オンラインプレゼンスのためにモバイルUXを改善したいですか？私たちのプロのデザイナーチームが喜んでお手伝いいたします。しかし、最初に、私たちのポートフォリオを見て、私たちのケーススタディを読んでください。

次に、モバイルデザインのニーズに適していると思われる場合は、話しましょう。私たちは、企業や製品ブランド向けに幅広いコンサルティングおよび設計ソリューションを提供しています。

モバイルUXの改善がビジネスや製品のブランドにどのように役立つかわからない場合は、私たちがお手伝いします。私たちのチームは、お客様の懸念に耳を傾け、お客様のニーズを評価し、モバイルUXと使いやすさを向上させるために必要なもののリストを作成します。

ウェブサイトのモバイルUXを改善しましたか？

モバイルUXを改善するための私の提案を試してみましたか？どれを試しましたか？また、どのような結果が得られましたか？モバイルUXを改善する方法に関する他のヒントやアイデアはありますか？

次の投稿を見逃さないように、視聴者がフィードを利用して利益を得ることができるように、以下にコメントしてください。そして、私たちの投稿をあなたの聴衆と自由に共有してください！

ありがとうございました！一度に1ピクセルずつ、悪いビジネスWebサイトを終了するためにあなたの助けに感謝します！

グレゴール・サイタ
共同創設者/CXO
@gregorsaita