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

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

レスポンシブデザインのデバイス画面サイズ

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

ユーザーを最優先する

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

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

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

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

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

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

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

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

ユーザーの目標に焦点を合わせる

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

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

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

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

レスポンシブデザインを使用するウェブサイトのメディアクエリ

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

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

常に物事を簡単にする

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

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

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

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

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

Ruby onRailsで何ができるか

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

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

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

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

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

モバイルレイアウトの設計は、他の種類のレイアウトの設計と完全に異なるわけではありませんが、設計者が考慮する必要のある特定の考慮事項があります。

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

考慮すべき関連分野は、手の位置制御と「 親指ゾーン モバイルデバイスの「」—人が片手で携帯電話を持っているときに親指で簡単にアクセスできる携帯電話の画面の領域。インタラクティブコンテンツ（特に行動を促すフレーズ）の大部分をこのゾーンに配置することは、ポジティブなユーザーエクスペリエンスを生み出すために不可欠です。

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

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

プロジェクト分析で最も重要なステップは次のとおりです。

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

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

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

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

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

スピードに焦点を当てる

4Gデータの可用性が広まっているにもかかわらず、モバイルネットワークは一般的にwifiやブロードバンドサービスよりも低速です。また、世界の多くの地域では4Gが存在せず、モバイルユーザーは3G以下のデータ速度に悩まされています。

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

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

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

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

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

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

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

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

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

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

結論

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

nodejsは関数から値を返します

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

•••

ApeeScapeデザインブログの詳細：

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

基本を理解する

なぜUXが必要なのですか？

UXは単にユーザーエクスペリエンスを指します。デザイナーがUXの原則とパターンに積極的に従うかどうかにかかわらず、ユーザーエクスペリエンスは存在します。しかし、確立されたUXデザインプロセスとモバイルUXデザインの原則に従うことで、デザイナーは訪問者を喜ばせ、満足させるユーザーエクスペリエンスを作成できます。

UXとUIの違いは何ですか？

UXはユーザーエクスペリエンスを指し、UIはユーザーインターフェイスを表します。ユーザーインターフェイスのデザインは、ユーザーエクスペリエンスに直接影響します。優れたUXプラクティスには、UIデザイン、ユーザーリサーチ、ユーザビリティ、ブランディング、機能、モバイルUXデザインの原則がデザインの他の側面の中でも組み込まれています。

モバイルファーストアプローチとは何ですか？

モバイルUXのベストプラクティスには、モバイルファーストのアプローチが必要です。 UXデザイナーがウェブサイトのモバイルバージョンから始めて、その逆ではなく、その拡張としてデスクトップバージョンを作成するときです。ほとんどのモバイルUXパターンはデスクトップサイトでうまく機能しますが、その逆が常に当てはまるとは限りません。

UXのUCDとは何ですか？

ユーザー中心設計（UCD）は、設計プロセスのすべての段階でユーザーのニーズに焦点を当てた設計の問題解決フレームワークです。製品のタスクやワークフローから、使いやすさの目標やユーザーの特性まで、すべてがすべてのステップで考慮されます。これは、モバイルUXプロジェクトで特に役立ちます。

ユーザー中心設計が重要なのはなぜですか？

ユーザー中心設計は、効果的なユーザーエクスペリエンス（UX）を備えたデザインを作成するための重要なフレームワークです。モバイルUXのベストプラクティスにおけるUCDは、ユーザーが製品の動作に自分の行動を適応させることを期待するのではなく、ユーザーが実際に製品（モバイルアプリやWebサイトを含む）をどのように使用するかに焦点を当てています。