モバイルUXの設計原則

良いデザインは良いデザインですよね？ 本当ですが、そのデザインの媒体に応じて、特別な考慮事項が関係します。 デスクトップコンピューターで実行するように作成されたアプリのようなものの設計原則は、通常、最も効果的なモバイルUXの設計規則とは少し異なります。

「モバイルUXデザイン」のような包括的なカテゴリ内でも、アプリのデザインとモバイルWebサイトのデザインには違いがあります。 ユーザーがアプリをダウンロードするとき、モバイル版のWebサイトだけが必要なわけではありません。 彼らは、アプリのダウンロードに費やした時間（および携帯電話で占めるスペース）を正当化するユニークなエクスペリエンスを望んでいます。 ユーザーは、価値のないアプリを削除することに何の不安もありません。アプリのダウンロードの75％は一度だけ開かれます。

一般的に、モバイルデザインは見逃せません。 世界中で、デスクトップコンピュータよりもモバイルデバイスやタブレットデバイスからインターネットにアクセスする人が増えています。 これらのユーザーを無視することは、UXデザイナーが正当化できることではなくなりました。 モバイルデザイナーにとって、デザインプロセスのすべてのステップでモバイルUXのベストプラクティスを検討することが重要です。

ユーザーを最優先する

これは言うまでもありませんが、どの設計プロジェクトでも、ユーザーが常に最初に来る必要があり、モバイルデバイスではユーザーのニーズがさらに重要になります（より具体的になります）。 デザイナーがモバイルユーザーのニーズに応えない場合、それらのユーザーはすぐに他のWebサイト、アプリ、または気を散らすものに移動します。

以下は、モバイルユーザーの特定のニーズを満たすためにデザイナーができることのいくつかです。

ナビゲーションを直感的にする

モバイルサイトやアプリでのナビゲーションは、デスクトップサイトよりも直感的である必要があります。 ユーザーは、モバイルアプリやウェブサイトを回避する方法をすぐに特定できる必要があります。 これは、認識可能なデザインパターン（ハンバーガーメニューなど）と認識可能なアイコン（ホーム画面の「ホーム」アイコン、メッセージング用のチャットバブルなど）によって実現できます。

ユーザーがナビゲートする方法を考えなければならない場合、ユーザーはWebサイトから離れるか、アプリを閉じてより簡単な解決策を探す可能性が高くなります。

デバイス間でシームレスなエクスペリエンスを作成する

ユーザーがアプリ、モバイルWebサイト、またはデスクトップWebサイトのコンテンツにアクセスしているかどうかにかかわらず、それらを使用する間の移行はシームレスである必要があります。 デザイン要素は相互にミラーリングする必要があります（たとえば、デザイナーはアプリに青を使用し、Webサイトに赤を使用しないでください）。

シームレスなエクスペリエンスは、Webサイトやアプリを使用する人々にとって物事を容易にするだけでなく、ブランドとの信頼を築きます。

ユーザーの目標に焦点を当てる

モバイルアプリやウェブサイトでの目標は、フルデスクトップサイトでの目標とはおそらく異なります。 たとえば、レストランアプリでは、訪問者は、メニューの表示、予約、道順の取得など、ほんの一握りのことをしたいと思うでしょう。 ほとんどの場合、彼らは携帯電話でビジネスの完全な履歴を調べていません。そのようなコンテンツはメニューやサブメニューに隠すことができます。

ユーザーがモバイルアプリで実際に何をしたいのかを考えてください。 設計者が見落としがちな重要なことの1つは、基本的なタスクのためにログインを要求することです。 たとえば、銀行のアプリは、アプリで何かをするためにログインを要求することがよくあります。 ただし、最寄りのATMの場所を見つけるなどのタスクでは、ユーザーがサインインする必要はありません。これらの機能に簡単にアクセスできるようにすることは、UXを向上させるための優れた方法です。

パーソナライズを可能にする

モバイルアプリの場合、パーソナライズはユーザーエクスペリエンスを向上させるための鍵です。 パーソナライズは、マーケティング目標の達成にも役立ちます。 これは、関係するすべての利害関係者にとって双方にメリットがあります。

パーソナライズは、ユーザーが探しているコンテンツに向かって、自分に関係のないコンテンツから離れるようにユーザーをプッシュする必要があります。 また、サイトの気を散らすものを排除し、購入プロセスなどのコンポーネントを合理化し、マーケティングメッセージが訪問者が実際に望んでいるものと同期していることを確認できます。

ただし、パーソナライズが多すぎると、簡単に陥りやすくなります。 パーソナライズのレベルは、ユーザーがアプリや会社に対して持っている信頼のレベルと一致する必要があります。 ウェブサイトに、自分が考えている（または話している）ものの、検索すらしていないものの広告が表示されたときに、人々はどのくらいの頻度で戸惑ったり奇妙に感じたりしますか？ 確かに、それは高度な広告アルゴリズムの予測的な性質にすぎませんが、そのレベルのパーソナライズは、訪問者に不安を感じさせる可能性があります。

常に物事を簡単にする

人がモバイルデバイスでWebサイトまたはアプリにアクセスするとき、彼らは手元のタスクをできるだけ早く完了したいと考えています。 必要なタスクをできるだけ簡単に完了するのは設計者の責任です。 各タスクに絶対に不可欠ではないものをすべて排除することは、開始するのに最適な場所です。 モバイルインターフェースで必要なタスクを簡単にすることも重要です。

たとえば、多くのeコマースアプリやサイトでは、クレジットカード情報を入力するためのカメラオプションが提供されています。 買い物客はカード番号を入力する代わりに、カメラをクレジットカードに向けることができ、アプリは自動的に番号を読み取ります。

フォームフィールドでの入力の種類の指定などの他のこと（たとえば、電子メールアドレスが予想される入力である場合、メインのキーボード画面に@記号と「.com」がポップアップ表示されます）。

優れたオンボーディングプラクティス

モバイルアプリには、優れたオンボーディングが不可欠です。 ただし、「良い」の定義は、アプリの種類によって大きく異なります。 簡単に使用できるアプリ（やることリストやWebブラウザーなど）は、最小限のオンボーディングで済みます。 独自の機能を示すいくつかのスプラッシュ画面は、ほとんどのユーザーが開始する必要があるすべてです。

ただし、金融サービスやプロジェクト管理用のアプリなど、より複雑なアプリには、より包括的なオンボーディングが必要です。

確立されたジェスチャを使用する

これは言うまでもありませんが、モバイルデザイナーは、人々がデバイスで使用することにすでに慣れている確立されたジェスチャーを考慮する必要があります。 ピンチしてズームしたりスワイプしたりすることは、ほとんどのユーザーにとって直感的になり、可能な限り採用する必要があります。

設計者が確立されたジェスチャから逸脱することを決定した場合、オンボーディングプロセス中、またはユースケースが初めて表示されたときに、ユーザーをこの逸脱に導くことが重要です。

モバイルレイアウトデザイン

モバイルレイアウトの設計は、他の種類のレイアウトの設計とまったく同じですが、設計者が考慮する必要のある特定の考慮事項があります。

最大の考慮事項の1つは、タッチスクリーンターゲットのサイズです。 マウスやトラックパッドはピンポイントの精度でクリックできますが、指先の精度ははるかに低くなります。 理想的には、ターゲットはモバイルデバイスの画面上で7〜10mmである必要があります。 これにより、注意深く照準を合わせる必要なしに、指先でターゲットをタップすることができます。

考慮すべき関連領域は、手の位置制御とモバイルデバイスの「サムゾーン」です。これは、人が片手で電話を持っているときに親指で簡単にアクセスできる電話の画面の領域です。 インタラクティブコンテンツ（特に召喚状）の大部分をこのゾーンに配置することは、ポジティブなユーザーエクスペリエンスを作成するために不可欠です。

モバイルデザインでは、できるだけ雑然としたものを取り除くことが重要です。 ミニマリズムは、モバイルアプリに関してはデザイナーの友です。 デスクトップUIのすべてを数分の1のサイズの画面に詰め込もうとすると、デザインが窮屈に見え、圧倒される可能性があります。

目標に焦点を合わせ、ナビゲーションオプションを最小限に抑え（メニューとサブメニューがこれに役立ちます）、一般に、ユーザーが必要なことを実行するために不可欠ではない要素を削除すると、より合理化されたユーザーフレンドリーなUIが作成されます。

画面上の乱雑さを排除する一方で、設計者はいくつかの重要な設計上の考慮事項を見落とさないようにする必要があります。 そのような考慮事項の1つは、さまざまな設計要素に十分なコントラストがあることを確認することです。 人々はしばしば自分のモバイルデバイスを理想的とは言えない状況で見ます。 明るい日光のようなものは、画面上の要素を見えにくくする可能性がありますが、高コントラストは要素をより見やすくするのに役立ちます。

タイポグラフィは、もう1つの重要な考慮事項です。 モバイルデザインでは、明確な活版印刷の階層を設定することが重要です。 タイトルとヘッダーは見つけやすく、フォントは一般的に大きくする必要があります。 携帯電話で大きなテキストブロックを読み込もうとして、画面を見つめるのを楽しむ人は誰もいません。 明確なヘッダー、箇条書きまたは番号付きリスト、短い段落はすべて、モバイルテキストを読みやすくします。

UIの最後の考慮事項は、トランジションとアニメーションの使用です。 アニメーションは、ユーザーが実行したアクションが何かを実行したことをユーザーに知らせる重要なシグナルになる可能性があります。 モバイルアプリの画面または機能間のアニメーションと明確な遷移は、より満足のいくユーザーエクスペリエンスを作成するフィードバックの重要な部分です。

モバイルUXのベストプラクティス

上記のすべては、モバイルアプリやウェブサイトを設計する際の重要な考慮事項です。 ただし、可能な限り最高のユーザーエクスペリエンスを確保するために従うべき、追加のモバイルUXのベストプラクティスがあります。

スピードに焦点を当てる

広範な4Gデータの可用性にもかかわらず、モバイルネットワークは依然として一般的にwifiまたはブロードバンドサービスよりも低速です。 そして、世界の多くの地域では、4Gは存在せず、モバイルユーザーは3G以下のデータ速度で立ち往生しています。

つまり、モバイルWebサイト、特にモバイルアプリは高速である必要があります。 アプリを読み込むたびにダウンロードする必要のないコンテンツをアプリに含めると、アプリが高速になります。 必要に応じてコンテンツをロードするだけです（ただし、必要になるコンテンツを予測して事前にロードすると、ユーザーにアプリがより速く表示される可能性があります）。

これは、使用されないコンテンツをロードしない（およびデータを使い果たす）ことと、ユーザーが次に必要とする可能性が高いコンテンツをプリロードすることによって速度の認識を作成することとの間のバランスを取る行為です。

スピードの錯覚を作り出し、せっかちなユーザーを落ち着かせる1つの方法は、コンテンツが読み込まれるまでプレースホルダーを使用することです。 Facebookのモバイルアプリはこれを実行します。アプリが開くとすぐに洗練されたワイヤーフレームが読み込まれ、ダウンロード時に読み込まれる投稿用のスペースが確保されます。 この移行画面は、コンテンツが実際に読み込まれる前に、コンテンツで何かが発生していることをユーザーに通知します。

ユーザーにフィードバックを提供する

ユーザーがモバイルアプリでアクションを実行するときにフィードバックを提供することは、ユーザーエクスペリエンスを向上させるための重要な側面です。 前述のように、アニメーションとトランジションはフィードバックを提供する1つの方法です。

触覚と音声のフィードバックは、モバイルデバイスでも可能です。 特定のアクションが実行されたときにタッチフィードバックを提供することは、モバイルゲームやエラーメッセージで特に人気があります。 音声フィードバックは、あらゆる種類のアプリの機能で人気があります。 それでも、非常に多くの人が常に電話を黙らせているので、設計者は音声フィードバックに頼るべきではありません。

データ入力を最小限に抑える

もう1つの重要なモバイルUXのベストプラクティスは、必要なデータ入力の量を最小限に抑えることです。 これについては以前に触れましたが、モバイルアプリに入力する必要のあるデータが多いほど、タスクを放棄する可能性が高くなります。

4つまたは5つのフィールドをフォームに入力することは、デスクトップまたはラップトップコンピューターでは大したことではないかもしれませんが、モバイルデバイスでは、特にユーザーが表示されない場合は、これらの4つまたは5つのフィールドでユーザーを遠ざけることができます。目的。 モバイルデバイスで入力するフォームのすべてのフィールドが必要であることを確認してください。 そうでないものはすべて排除してください。

これは、最初からサインアップするのではなく、既存のアカウント（Facebook、Google、Twitterアカウントなど）の1つを使用するオプションをユーザーに提供することで、コンバージョンを大幅に向上させることができる1つの領域です。 ユーザーが新規登録のフォームに入力するのではなく、クリックするだけでアクセスを承認する必要がある場合、ユーザーはそうする可能性が高くなります。 これらのセカンダリアプリだけに依存しないでください。一部のユーザーは、アカウントのリンクに不信感を抱いており、フォームへの入力に時間がかかります。

結論

これらの確立されたモバイルUXの設計原則に従うことで、モバイルサイトにアクセスしたり、モバイルアプリを使用したりするユーザーの全体的なユーザーエクスペリエンスが向上します。 デザイナーは、アプリやサイトを放棄して、よりユーザーフレンドリー、直感的、または合理化されたものを選ぶ前に、人々の注意を引くのにほんの数秒しかありません。

優れたモバイルデザインが一般的になりつつあり、ユーザーがモバイルアプリに期待することに関して、その水準はさらに引き上げられています。 設計者は、モバイルデザインを後付けと見なすことができなくなり、代わりに、他の形式のデザインの場合と同じくらいの時間、考慮事項、およびリソースをモバイルデザインに投入する必要があります。

Toptal Designブログでさらに読む：

• モバイルUXデザイン-ベストプラクティス、制約、および開発者との連携
• これらのモバイルアプリのオンボーディングのインスピレーションでユーザーを維持する
• モバイルユーザビリティの基本ガイド
• モバイルインターフェースのヒューリスティック原則
• モバイルエクスペリエンスのためのeコマースUX