すべてのデザイナーが従うべき5つのモバイルUXのヒント

現在、モバイルの問題の修正に多くの焦点が当てられています。これには、ユーザーが小さなデバイスにとらわれ続けているため、モバイルのパフォーマンスの問題も含まれます。

通常、これらの問題は、サイトの立ち上げ後、モバイルユーザビリティに関するGoogle検索コンソールレポートにエラーが表示され始めたときに対処されます。 開発チームはこのようなエラーを解決できることがよくありますが、設計者がモバイルUXのベストプラクティスを最初から理解して実装する方がはるかに効率的です。

モバイルの速度も検索エンジン最適化の大きな要因であるため、デザイナーと開発者は、アニメーションから画像まですべてがこれらの指標にどのように影響するかを考慮する必要があります。

デザイン要素の間隔に焦点を当てる

デザイン要素の間隔は、見栄えのするフローを作成するだけではありません。 それは、モバイルデバイスを含むすべての訪問者がサイトを使いやすくすることです。

Google検索コンソールでよくあるモバイルユーザビリティエラーは、「クリック可能な要素が近すぎる」ことです。

これにより、サイトをナビゲートしようとしているときに誤って要素をクリックしている小さなデバイスの訪問者にとって、苛立たしい体験が生まれます。

モバイルUXデザインの観点からは、ボタンとインタラクティブまたはクリック可能な要素は十分に大きく、デザイン内で十分に離れて配置する必要があります。

デスクトップでは、訪問者は非常に正確なツールであるマウスを使用してナビゲートしますが、モバイルでは、ほとんどのユーザーが親指を使用しています。 親指は通常、小さなマウスカーソルよりも大きく、特にウォーキングやマルチタスク中にサイトをナビゲートしようとしている場合は、少し不器用になる可能性があります。

したがって、訪問者がイライラするモバイルエクスペリエンスを体験できないように、ボタンと要素の間に十分なスペースを設計する必要があります。

また、アクセシビリティと、訪問者が小さなデバイスをどのように持っているかを考慮する必要があります。 スマートフォンやタブレットを左手で持っている人もいれば、右手で持っている人もいれば、両手で持っている人もいます。 それにもかかわらず、サイトのデザインはナビゲートしやすいものである必要があります。

最後に、訪問者は親指を使ってデバイスをスクロールし、Webページを移動しているため、スクロール中に誤ってタップする可能性のある大きなクリック可能な要素がないことを確認する必要があります。

テキストとフォントの読みやすさを確認します

間隔に加えて、Google検索コンソールレポートのもう1つの一般的なモバイルユーザビリティエラーは、「テキストが小さすぎて読めない」です。 開発者はフォントサイズのいくつかの側面を調整できますが、読みやすさの観点から、設計チームが最初から実装できるUXのベストプラクティスがいくつかあります。

読みやすい書体を選択することから始めます。 ユーザーは、小さなデバイスを使用しているときに、歩いたり、マルチタスクを行ったり、外に出たりすることが多く、サイトをナビゲートしようとしているときに理想的ではないシナリオになっている可能性があることに注意してください。

フォントサイズの観点から視覚的な階層を作成することは、モバイルユーザーがページのコンテンツをすばやくスキャンして理解するのに役立つもう1つの方法です。 また、見出しのテキストが次の行に折り返される可能性があるモバイルデバイスやタブレットデバイスでも役立ちます。 ページ全体で同じフォントとサイズを使用すると、ページの意味に混乱が生じる可能性があります。

デザインでは、ページの読みやすさを向上させるために、テキストの行間の行の高さを増やすこともできます。

フォントとサイズを決定したら、色のコントラスト比も考慮する必要があります。

訪問者は屋内または屋外、あるいは照明が不十分な場合があるため、背景色と前景色のコントラストの基準に従うことが重要です。

これは、アクセシビリティとADA準拠のWebサイトの作成にも役割を果たします。 WCAG 2.1標準によると、通常のテキストでは少なくとも4.5：1、大きなテキストでは3：1のコントラスト比が推奨されます。

ホバーオーバーとアニメーションがベストプラクティスに従っていることを確認してください

今日のほとんどのWebデザインには、いくつかのマイクロアニメーションとインタラクティブコンポーネントが組み込まれています。 これは、再設計プロセスにおけるクライアントからの一般的な要求です。

アニメーションはページの読み込み時間に影響を与え、適切にコーディングされていないと無限のQCを引き起こす可能性があるため、サイトに動きを追加することは、多くの場合、デザイナーと開発者の間のコラボレーションです。 設計プロセスでアニメーションを選択するときは、それらの相互作用がモバイルデバイスで発生するかどうかも計画する必要があります。

パフォーマンスの問題があるため、モバイルでは複雑なアニメーションや動画の背景をオフにするのが一般的です。これは、特にモバイルネットワークの訪問者にとって、サイトの読み込み時間が遅くなる可能性があるためです。 この種の変更は、モバイルページの速度がGoogleのランキング要素の1つになった2018年以降ますます一般的になっています。

一般に、アニメーションとインタラクションは、ユーザーエクスペリエンスをサポートするために微妙な方法で使用する必要があり、訪問者の気を散らさないようにする必要があります。 また、訪問者が行動を完了するのを助けるのに不可欠な要素であってはなりません。

ホバーオーバーは、モバイルでは異なって見える可能性があるもう1つの一般的なデザイン要素です。 デスクトップでは、ホバーオーバーとは、訪問者がマウスをその上に置いたときにテキストを変更または表示するオブジェクトまたは画像を指します。 これは大型デバイスではうまく機能しますが、モバイルでは、訪問者はマウスを使用していないことに注意してください。つまり、訪問者はホバーを表示するためにタップする必要があります。

したがって、ホバーするとテキストが表示されるボックスまたは画像がある場合は、メッセージが訪問者のステップにとって重要ではないことを確認する必要があります。

アニメーションについて話し合うとき、あなたとあなたの開発チームは、フラッシュや古いテクノロジーに関するエラーを回避するために、ウェブアニメーションガイドラインに関するGoogleのベストプラクティスを確認することもできます。

ポップアップとサードパーティ要素の配置を計画する

Webサイトでポップアップフォームを使用するかどうか、およびそれらをモバイルデバイスに実装するかどうかについては、常に多くの議論がありました。

モバイルでポップアップフォームを回避するための1つの議論は、訪問者がフォームまたはメッセージを閉じるのが難しい場合があるということです。 2017年1月以降、Googleは、ページ上のすべてのコンテンツが訪問者に表示されないようにブロックする侵入型インタースティシャルを使用しないように警告しています。これは、モバイルで特に問題があるためです。

ポップアップフォームに関するクライアントとの話し合いでこれらすべての要素を比較検討し、フォームデザインに最適なユーザーエクスペリエンスを決定できます。

モバイル向けの設計アプローチを採用する場合、要素がより小さなデバイスにどのように配置されるかを検討することが役立ちます。 たとえば、訪問者がスクロールしても画面の右側にあるスティッキーボタンはデスクトップでは問題なく機能する可能性がありますが、これらのタイプのスティッキー要素により、モバイルデバイスでは表示スペースがさらに小さくなる可能性があります。

ライブチャットやアクセシビリティウィジェットなどのいくつかの要素が最後に追加される可能性がありますが、Webデザインプロセスの早い段階でこれらを計画することで、訪問者の混沌とし​​たインターフェイスを回避できます。

ライブチャットは非常に人気のあるツールになり、チャットウィジェットはデザインの右下または左下隅によく見られます。 デザインモックアップに含めることでこれらの要素の配置に関する推奨事項を提供すると、重複するアイテムの問題を予測するのに役立ちます。

フォームのデザインと配置​​を再検討する

モバイルデバイスまたは小型のタブレットを使用しているときにフォームに入力して送信することは、訪問者にとって煩わしい作業になる可能性があります。 そのため、サイトデザインでフォームの代替オプションを検討することが重要です。

モバイルメニューナビゲーションを作成するときは、訪問者が簡単にビジネスにアクセスできるように、ヘッダーに「クリックして電話をかける」電話番号を含めることを検討してください。

サイト上のすべてのフォームを設計するときは、デスクトップとモバイルの両方で、フォームフィールドの数をできるだけ減らし、必須フィールドを明確に示すことがベストプラクティスです。

フォームのモバイルエクスペリエンスのヒントの1つは、フォームフィールドにプレースホルダーテキストを使用するだけでなく、フォームラベルをデザインすることです。 モバイルデバイスの訪問者は、他の通知やインタラクションによって簡単に中断される可能性があるため、フォーム入力プロセスで中断され、プレースホルダーテキストにリストされている内容を忘れてしまう可能性があります。 明確なフォームラベルとエラーメッセージを提供することは、ADAコンプライアンスにとっても重要です。

最後に、フォームの配置は変換に影響を与える可能性があるため、ページ上のフォームの配置と、レスポンシブレイアウトでこれをどのように調整できるかが重要です。

結論

モバイルパフォーマンスへの注目が高まっていることを考えると、プロジェクトを設計するときに上記のアイデアのいくつかを実践することで、それらのプロジェクトを立ち上げる際の時間とフラストレーションを節約できます。 デザインフローに役立つ追加のモバイルUXのヒントはありますか？ 以下にコメントを残してください！

次へ：役立つオンラインコースでウェブデザインスキルセットを構築しましょう！

モバイルUXデザインは、プロのWebデザイナーとして常に把握しなければならない多くのことの1つにすぎません。 スキルを磨くために常に多くの時間が利用できるわけではありませんが、オンラインコースを受講することは、教育を継続していることを確認するための優れた方法です。

この記事では、Webデザイナー向けの最高のオンラインコースのいくつかの包括的なリスト（+費用）を提供しているため、利用可能なすべてのオプションを検索するためにさらに時間を費やす必要はありません。