モバイル アプリのユーザー インターフェース設計に関する 10 のヒント

ヒント1: 集中力を保つ

最高のモバイル アプリは、1 つのことを非常にうまく行うことに重点を置いています。 「詳細」を一切述べずに、アプリケーションが何を行うかを 1 文で説明できる必要があります。 ユーザーはそれを起動し、使用し、数秒以内に目的を達成できる必要があります。 ユーザーがアプリを使用するために 4 レベル以上のメニューを経由する必要がある場合、そのアプリはすぐにアンインストールされます。

ヒント2: 戻るボタンを適切に使用する

Android では、システムが提供する戻るボタンを使用して、ユーザーはアプリ内に戻ることができます。 iOS では戻るボタンはソフトウェアによって制御されますが、常に戻るボタンを提供する必要があり、原則としてユーザーは左上隅にある戻るボタンに慣れています。 アプリがユーザーの期待に応えるためには、戻るボタンの従来の動作と OS 固有の配置に従うことが重要です。

ヒント3: ソフトキーボードの動作を考慮する

ほとんどのモバイル アプリケーションでは、1 つ以上の画面でキーボード入力が必要です。 残念ながら、多くのデザイナーは、オンスクリーンキーボードがアクティブになったときにインターフェースがどのように表示されるかを考慮していません。 テストを行うときは、オンスクリーン キーボードがアクティブになっている場合でも、ユーザーが操作内容を把握できるだけの十分なスペースが画面上に確保されていることを確認してください。

ヒント4: 思慮深い空白プロンプトプレースホルダー

アプリケーションにデータ入力フィールドが少数しかない場合は、空白のプロンプトを表示するとユーザーフレンドリーになり、アプリケーションの見た目もすっきりします。 アプリケーションに多数のデータ入力フィールドがある場合、ラベルの代わりにプレースホルダーを使用すると、非常に乱雑になる可能性があります。 ユーザーが入力フィールドに何らかの情報を入力すると、その情報が自明でない限り、ユーザーはその情報を推測する必要があります。

ヒント5: 新しい機能に挑戦する

以前のアプリケーション設計では、ソフトウェア開発者はプログラムにできるだけ多くの機能を追加することに重点を置いていました。 彼らの成功の尺度は、競合他社よりも多くの特徴と機能を備える能力です。 モバイル革命によって状況は変わりました。
デスクトップ アプリケーションでは、あまり使用されない機能がサブメニューに追加されますが、パワー ユーザーにとっては、この機能はアプリケーションを競合他社と差別化するため、良いアイデアであると考えられます。 モバイル アプリでは、あまり役に立たない機能があると、ユーザー インターフェイスが乱雑になり、使いにくくなる可能性があります。

ヒント6: タブを正しい位置に置く

iOS では、プライマリ タブ ナビゲーションはタブのようには見えません。 これらは画面の下部にあるアイコンで、ユーザーはこれを使用してアプリの主な機能間を切り替えることができます。 ほとんどの iOS ユーザーは、この機能がウィンドウの上部に表示されることに慣れていませんが、Android ユーザーは慣れています。 Android では、タブは通常アプリの上部に配置され、左または右にスワイプすることで切り替えることができます。
ここで重要な点は、アプリの主要機能へのナビゲーションに単一の「タブ」に依存している場合、iOS と Android でそれらを異なる場所に配置する必要があるということです。

ヒント7: ボタンのサイズに注意する

シンプルなデザインでは、何かを追加するには、ボタンやフォントのサイズを少し小さくするだけで収まると言われる傾向があります。 これは危険で悲惨です!!! モバイル デバイス向けに最適化されていない Web ページをスマートフォンで開いたことがあるなら、ハイパーリンクをクリックできないことがいかにイライラするかがわかるでしょう。 アプリでは、ユーザーにズームインのオプションがない場合、さらに大きな問題になります。
ボタンは使いやすい大きさにして、iPhone 4 などの小さな画面のデバイスでアプリをテストして、快適に使用できることを確認します。

ヒント8: ボタンの配置を考慮する

ユーザーがスマートフォンを手に持つと、親指で画面の下半分に簡単にアクセスできます。 右利きのユーザーは右下隅に届き、左利きのユーザーは右下隅に届きます。
片手で操作できるようにしたい場合は、この点に留意してください。

ヒント9: 必要なプロンプト情報を提供する

ユーザーに入力を要求するときは常に、ユーザーがどのようなアクションを取るかを決定するために必要な情報を検討してください。 UI がこれらの入力ボックスを同じ場所に提供していない場合、ユーザーはキャンセルして前のページに戻って決定を下す必要がある場合があります。
ユーザーの負担を軽減し、ユーザーが意思決定を行う必要があるときに適切な場所で必要な情報を提供します。

ヒント10: 画像の解像度に注意する

最近のスマートフォンは驚くほど高解像度で、見た目も非常に美しいです。 残念ながら、アイコンに低解像度の画像を使用している場合、特にオペレーティング システムがフォントやグラデーションをレンダリングするときに、アプリがギザギザでぼやけて見えます。 264 ppi 以上の解像度を使用すると、鮮明できれいな画像が表示されます。 Retina iPad よりも解像度の高いタブレット (300 ppi の Nexus 10 など) でも、264 ppi の画像は鮮明できれいに見えます。
より良いアプローチは、任意の解像度に拡大縮小できるベクター グラフィックを使用することです。

結論は

ユーザー インターフェイスはモバイル アプリの成功を左右します。 優れた UI デザインを備えたモバイル アプリが、より高速で、より機能が豊富であるが平均的な UI デザインを備えたアプリに勝る例は数多くあります。 ユーザーが簡単に習得してすぐに使用できるアプリであれば、競争の激しいアプリ市場で成功する可能性が高くなります。

著者について:
David Talbot は現在、EverBank のチーフアーキテクトです。 ソフトウェア業界で 15 年以上の経験があり、リッチ UI の Web アプリケーションの構築に関する専門的な経験があります。 彼はまた、『Applied ADO.NET』や多数の技術記事の著者でもあります。 メールアドレスは[email protected]です。