iOSおよびAndroidデザインでの不正行為の回避

公開: 2022-03-11

iOSデバイスとAndroidデバイスの両方を同時に使用している平均的な人は何人いますか？この調査による公式の数値は10％から20％の範囲ですが、この数値にはモバイルユーザーだけでなくMacユーザーも含まれています。実際には、人々は特定の期間に1台の電話またはタブレットのみを使用する傾向があります。彼らがたまたま2つのデバイスを使用している場合、ほとんどの場合、両方が同じOSを実行しています。

つまり、アプリのUIデザインのピクセル単位で完全なコピーを作成する必要はなく、両方のプラットフォームに対応し、数十の異なる画面サイズ、アスペクト比、解像度を備えています（ノッチ、ステータスバーも表示しないでください）。、ナビゲーションバー、ハードウェアボタンなど）。

それどころか、ユーザーがiOSとAndroidの両方で同じアプリを見ている場合でも、両方でネイティブな感覚を体験したいと思う可能性があります。これが、モバイル開発で多くのプロジェクトマネージャーや製品所有者が採用しているアプローチが最適ではないことが多く、微調整する必要がある理由です。

なぜこれがまだ問題なのですか？

しかし、なぜ利害関係者と管理者は、ユーザーエクスペリエンスを頻繁に低下させ、自社の製品を損なうような意思決定を行っているのでしょうか。誰もがまだiOSとAndroidの開発に取り組んでいた10年の初めには理解できましたが、この厄介な問題は今日まで続いています。

この状況が発生する主な理由は、プロジェクトマネージャーやモバイル開発者が、同じアプリを別のプラットフォームで見た場合にユーザーが混乱し、まったく同じ感覚やUIを提供しないことに気付く可能性があるという懸念である可能性があります。ある程度の類似性が必要であり、歓迎されるので、ある程度、この考え方は理にかなっていると言っても過言ではありません。ただし、やりすぎて、極端な場合には、さまざまなプラットフォーム用のアプリの正確なクローンを作成すると、実際には、利益よりもはるかに害を及ぼす傾向があります。

最終的な目標は、適切なバランスをとることです。ピクセル単位の一貫性を強制するのではなく、共通の設計アイデアに固執し、アプリのナビゲーションマップを両方のプラットフォームで同様に保つことです。同じ機能と同じワークフローを提供しますが、可能な限りネイティブの動作に固執するようにしてください。

誰もがカスタムボタンや派手なアニメーションをあちこちで気に入っていますが、ネイティブ要素は人々が慣れ親しんでいて、より簡単で直感的に使用できるものです。

外観ではなく、ユーザーに焦点を当てる

このジレンマに対処するための適切なアプローチを見つけるには、行の終わり、つまりエンドユーザーから始める必要があります。調査によると、AndroidとiPhoneのユーザーは非常に異なる人々であり、最適なUXをターゲットにしている場合は、それらの使用パターンを調べてみる必要があります。

人々が1か月あたりの技術に費やすことを決めた平均予算（ iPhone：$ 100.88、Android：$ 50.83 ）から始めて、1日あたりに作成するselfiesの数を渡すiPhone：12、Android：7そして毎日送信するテキストに到達するiPhone ：57、Android：26 、違いが大きいことは簡単にわかります。動作に相違があり、それがデバイスの使用方法を左右していると結論付けることができます。

では、両方のプラットフォームのアプリケーションを同時に設計する場合、何に焦点を当てるべきでしょうか。

まず、可能な場合はネイティブ要素を探します。クロスプラットフォームフレームワークを使用している場合でも、ほとんどのコンポーネントは純粋なネイティブビューに基づいています。したがって、本当にカスタムのものが必要な場合を除いて、基本に固執してください。人々は彼らが慣れているものを使うのが好きで、あなたはより重要な機能（そしてコードレビュー！）のために開発時間を節約するでしょう。

カスタムビューは、一般的なものと同じ一般的なアイデアと使用感を維持している限り、アプリに個性と独自性を確実にもたらすことができます。少なすぎてアプリが退屈で多すぎて、不必要に派手で使いにくいです。

カスタムビューが少し異なる小さなタッチでもアプリのゲームチェンジャーになることがありますが、ユーザーが探索できる新しい要素ですべての画面を埋めると、重要な情報を探しているときに圧倒されて迷子になる可能性があります。これらの小さなタッチが「ポリッシュ」と呼ばれるのは偶然ではありません。

さまざまな設計コンポーネントにアプローチする方法

経験則として、各プラットフォームには独自の設計ガイドラインがあることを常に忘れないでください。 Androidの一連のアプローチはマテリアルデザインを踏襲していますが、Appleはヒューマンインターフェイスデザインを信頼しています。設計を計画するときに考慮する必要のある特定のコンポーネントに入ると、焦点を当てるべきいくつかの主要な部分があります。

一般的なスタイル：クロスプラットフォームアプリケーションについて話しているのでない限り、各プラットフォームの一般的なスタイルガイドラインに従うことを検討する必要があります。全体として、iOSのデザインはよりフラットになる傾向がありますが、Androidはより階層化されたアプローチを採用しています。
歴史的に言えば、モバイルプラットフォームは10年以上にわたって相互に影響を及ぼしており、iOSでAndroidの概念を簡単に見つけることができ、その逆も可能です。たとえば、指紋センサーがモバイルの世界に登場し始めたとき、メーカーはセンサーのサイズと場所を実験しており、できるだけ多くのユーザーが快適に使用できるように努めていました。同時に、デザイナーと開発者も新機能に適応していたため、最終的に、視覚要素とフィードバックは両方のプラットフォームでほぼ同じになりました（いくつかのエキゾチックなアプローチを除いて）。
ハードウェアの詳細とナビゲーションパターン：これは、アプリの完全なクローン作成の欠点の最も印象的な例の1つです。ほとんどのAndroidデバイスには、戻るボタンなど、追加のナビゲーションバー（異なるデバイス上のハードウェアまたはソフトウェア）の快適さがまだあります。 iOSはそれを提供しないため、アプリケーションは、通常はすべての画面の左上隅にある戻るボタンをいつどこに提供するかを検討する必要があります。
メニューボタン（この例では四角いボタン）は、Androidアプリに追加機能を提供することもできます。これはどこに関連していますか？たとえば、設定メニューまたは同様のナビゲーション機能を開くとき。

最近まで、iPhoneにはAppleの従来のホームボタンも搭載されていましたが、iPhone Xの導入以来、iPhoneは廃止され、iOSのフローはジェスチャーに基づいています。スワイプがアプリの重要な部分である場合は、アプリコンテナの端とスワイプ領域の間に十分なクッションを確保して、トリッキーなスワイプの一致を回避してください。
アプリがBluetooth、NFC、有線ヘッドホンなどのハードウェア固有の機能に依存している場合は、サポートしているさまざまなハードウェア仕様の範囲を常に考慮する必要があります。ユーザーが特定の機能を操作しようとするときに、ユーザーに適切なフィードバックを提供するようにしてください。何らかの理由で、2つのプラットフォームのうち1つだけにハードウェア固有の機能を提供する必要がある場合は、違いについてユーザーに通知してください。
グローバル要素（ステータスバー、ヘッダーなど）：ステータスバーやナビゲーションヘッダーなど、デザインのすべてのページに表示されるコンポーネントは、ネイティブな感覚を提供することを厳密に目的としている必要があるため、変更しないでください。それらのバーの高さとスタイル。両方のプラットフォームでグローバル要素のスタイルを設定する方法には、わずかな違いがあります。たとえば、Androidは左揃えのテキストを使用しますが、iOSは中央揃えのタイトルを使用します。ステータスバーはネイティブコンポーネントであるため、心配する必要はありませんが、アプリの上部を計画するときは、ノッチと画面のアスペクト比が異なることに注意してください。
ナビゲーション： Googleの古き良きマテリアルデザインガイドラインでは、Androidアプリケーションでドロワーメニューナビゲーションを使用することを提案しています。下部のナビゲーションは遅れていますが、それでも実行可能なオプションです。 iOSはタブバーのみを使用する傾向があり、トップレベルのナビゲーションオプションが制限される可能性がありますが、一度にすべてのオプションを明確に表示できます。この場合、両方のオペレーティングシステムは、アプリの複雑さに応じて使用できる同様のコンポーネントを提供しますが、2つのシステムの視覚的な違いにより、当然、AndroidのグローバルナビゲーションバーやiOSの欠如などがわかります。

近年のモバイルハードウェアの急速な進化により、多くの変数と未知数が導入されました。全画面電話、さまざまな形状とサイズのノッチ、デバイス全体のナビゲーションのためのジェスチャの使用の増加などです。これらの変更はすべて、ユーザーに前例のない力を提供しますが、アプリ内の特定の画面のすべてのユースケースを把握しようとすると、苦痛になる可能性があります。これらの懸念を考えると、ユーザーの混乱を避けるための良いアプローチは、ジェスチャー、バー、多方向スワイプオプションが多すぎてアプリに過負荷をかけずに、ナビゲーションパターンをシンプルで一貫性のあるものに保つことです。
タイポグラフィ：どちらのプラットフォームにもデフォルトの書体があります。iOSの場合はサンフランシスコ、Androidの場合はRobotoです。一般的なアプリのスタイルと厳密に一致するカスタムフォントを使用する場合を除いて、デフォルトを使用する必要があります。ユーザーがデフォルトのシステムフォントを変更する可能性があることに注意してください。これは、特定の書体でカスタマイズしたビューには影響しません。
たとえば、失読症のユーザーは、デフォルトのフォントを自分のニーズに特に合ったフォントに置き換えた場合、アプリで最高の時間を過ごすことができない可能性があります。非ラテンフォント（キリル文字、アラビア語など）を使用している可能性のあるユーザーをサポートしている場合は、カスタムフォントがそれらの余分な文字も提供していることを確認してください。ゲームに興味がある場合は、フォントが異なるために名前が目立つロシアのプレーヤーによって達成された高得点のリーダーボードを見たことがあるでしょう。これは開発段階での小さな間違いであり、特定のプレーヤー向けの「機能」ではありません。ユーザーがアプリを捨てることはおそらくないでしょうが、ユーザーエクスペリエンスが低下したり、苦情やレビューが不十分になったりする可能性があります。
その他のコンポーネント：ボタン、画面遷移、アニメーション、マイクロインタラクション、アクションシート、アラート、およびその他すべてのタイプのフローコントロールは、この記事の範囲を超えていますが、これまでに他の設計要素に適用した一般原則に従う必要があります。どちらのプラットフォームも、ユーザーの気を散らして混乱させる可能性があるため、過度のカスタム要素を推奨しません。デザインに関しては、第一印象は通常多くのユーザーにとって最後であり、そのため、最初からユーザーの注意を引き付け、いわばアットホームな雰囲気を与えることが非常に重要です。

現実の世界では、私たちが説明したルールのいくつかの非常に人気のある例外を見ることができます。マテリアルデザインガイドラインに準拠するiOSアプリケーションと、Appleのヒューマンインターフェイスガイドラインに準拠する一部のAndroid製品ですが、これらのアプリには独自の実証済みのスタイルがあります。ユーザーはアプリとそのデザインに精通しており、ユーザーにとっては、もう少しカスタム感を与えるのが理にかなっています。

クロスプラットフォームアプローチが正しく行われた

一方、プロジェクトがクロスプラットフォームソリューション（React Native、Flutter、Xamarinなど）に基づいている場合は、焦点を当てたい主要なプラットフォームを検討し、そこから開始する必要があります。

近年、これらの新しいフレームワークにより、クロスプラットフォームアプリケーション開発の生産性が大幅に向上しています。ますます多くの企業がこの開発パラダイムに切り替えています。これは、市場投入までの時間が短く、費用対効果が高く、技術的な障壁が少ないためです。主な欠点は、機能のサポートが制限され、UXが最適でない場合があります。

クロスプラットフォーム開発のほとんどすべての古いソリューションはWebビューに基づいていたため、多くのデバイスで応答性に深刻な問題が発生しましたが、現在では、クロスプラットフォームアプローチでもネイティブコンポーネントを使用できます。この大きな改善は多くの点で市場に影響を与え、すべてのモバイルプラットフォームを、さまざまなデバイスやプラットフォームでのユーザーの視覚的体験の統合に向けて一歩近づけました。

クロスプラットフォームソリューションを選択する場合は、アプリのスケルトンを構築することで、標準のネイティブアプリと同じように開始できます。主な優先順位を設定して実行すると（基本依存関係の設定、MVPの構築、プロジェクト固有のマイルストーンの達成、最初のバージョンのリリースなど）、プラットフォームを使用して2つのアプリケーションの主な設計を簡単に分離できます-各フレームワークが提供する特定のツール。チームの規模と利用可能な時間枠によっては、特定のプラットフォームバージョンで物事が同じように見えなくなった場合の将来の混乱を避けるために、バージョン1にこれらの調整を含めることを検討することもできます。

結局のところ、これらの原則のどれがアプリに有効であるかを評価する必要があります。私たちの業界のほとんどすべての取り組みと同様に、特定のニーズに合わせてガイドラインをわずかに調整しながら、ガイドラインに従うようにしてください。たとえば、ドロワーナビゲーションが、単純な5画面アプリにとって本当に意味のあるものである場合、プラットフォームごとに複雑なソリューションを考え出す必要はありません。主要なコンポーネントであろうと、単なるマイナーなカスタマイズであろうと、ユーザーがカスタムボタンとツールを簡単に認識できるようにします。

優れたデザインはユーザーの習慣を尊重します

要約すると、すでに知っていることを繰り返すことができます。優れた設計とは、各オペレーティングシステムでのユーザーの習慣を尊重する設計です。最後に少し磨くだけで、平均的なアプリと優れたアプリの違いが生まれる可能性があります。

多くの場合、アプリは、コンテンツだけでユーザーを引き付けるのに十分な独自の機能を提供しません。ほとんどの人は、ある製品を別の製品よりも選ぶという彼らの決定を「直感」で説明します。このカテゴリのユーザーは、主に、画面に表示される応答性、一般的なスタイルの選択、カラーパレット、および個々のビジュアルコンポーネントを暗黙的に評価することにより、アプリを使用するときの感覚に基づいて選択します。

したがって、その驚くべき機能だけでなく、提供するサービスの品質に合わせた高品質のパッケージを使用して、製品を際立たせるようにしてください。