モバイルアプリのデザイン。 最良の結果を達成する方法は?





モバイルアプリケーションの設計について多くのことが書かれています。 それにもかかわらず、このエリアには膨大な数のニュアンスがあります。 誰も知らないものもあれば、すぐに忘れられるものもあります。 この投稿では、アプリケーションの設計を操作するいくつかの方法について説明します。これらの方法は、効果的でテスト済みと言えます。



理想的には、モバイルアプリケーションは思考の速度で実行する必要があります。 さらに、アプリケーションインターフェースは初心者にとっても明確でなければなりません。



1.常に機能するルール



アプリケーションとの対話の設計で重要な5つの主要な要因を強調する価値があります。



ターゲティング 。 特定のユーザーのデザインを作成します。 現在、Webにはさまざまなカテゴリのユーザーに関する大量のデータがあり、多くの資料(研究、レビュー)は無料で入手できます。 この情報を学習することで、対象読者のニーズを完全に満たすアプリケーションを作成できます。



使いやすさ 。 アプリケーションは、ユーザーフレンドリーで直感的でなければなりません。 たとえば、サードパーティのリソースに移動するリンクを指定する場合は、下線付きの青いテキストを使用して、通常の方法でリンクを設計します。 利便性と実用性は、プログラムをユーザーにとって望ましいものにするための最初のステップです。



機会アフォーダンス )と象徴。 アフォーダンスは機能です。 簡単にするために、ここでもリンクを使用したトリックを使用します。 そのため、青い下線付きのテキストは、クリックするとユーザーが特定のアドレスに移動することを示します。 このようなシンボルは、ユーザーがインターフェイスのこの要素またはその要素が何を意味するのかを反映しないように使用する必要があります。 実用性と合理性は私たちのすべてです。



学習可能性 。 理想的には、ユーザーはプログラムの操作方法を簡単に推測できるはずです。 ここでは、使い慣れたアプリケーション設計スキームが役立ちます。 彼らは問題なくプログラムに慣れるのを助けるべきです。



フィードバックと応答時間 。 アプリケーションの応答により、ユーザーはタスクが完了したかどうかを知ることができます。 通常の音声信号またはより複雑なもの(モーダルウィンドウなど)を使用できます。 アプリのフィードバックがNielsen Norman Groupによって設定されたガイドライン準拠していることを確認してください。



Andrew Maierが彼の記事で正しく述べているように、これら5つのルールは、あらゆるタイプの相互作用の設計を決定するための基礎になるはずです。



2.ユーザーを知る



目標指向のインターフェイスを作成する最初のステップは、視聴者を調査することです。 モバイルアプリケーションを開発する際の制限は、ディスプレイサイズだけではありません。 また、ユーザーはインターフェイスの要件を策定し、考慮する必要があります。



スクリーンショット2015-07-01 at 09.16.33



この問題には明確な戦術があり、3つの条項で構成されています。



ペルソナ :アプリケーション内でアクションを実行するようユーザーに促すものを理解するのに役立ちます。 これらは、実際のユーザーの正式な理論モデルです。



ユーザーシナリオ :さまざまな状況のモデリングを提供し、ユーザーアクションの予測に役立ちます。 これにより、シミュレートされたユーザーとユーザーが実行したいタスクに最適なインターフェイスを開発できます。



経験マップ :ここでは、個別の相互作用のすべての可能な条件を調べます。 このスキームは、アプリケーションの特定の作業段階で高い確率で実行されるユーザーの各ステップを記述するのに役立ちます。 このようなスキームは、各アクションの実装につながる感情と状況を理解するのに役立ちます。



これらの手順を完了する最も簡単な方法は、たとえば、 UserTestingなどのサービスを使用したリモートユーザビリティテストです 。これは、in vivoでのユーザーの行動を調査するのに役立ちます。 この問題をよりよく研究するには(たとえば、ジェスチャーや体の位置まで考慮に入れるため)、実際のユーザー(少なくとも5人)と協力する価値があります。



ジェフ・サウロスはこれについて素晴らしいヒントを与えます。



3.コンテンツとユーザーの行動



このアイテムを使用すると、アプリケーションを同時に開発し、可能なユーザーの行動を調べることができます。 理想的なオプションは、ユーザーとコンテンツの相互作用を探るスケッチです。 そして、これには馬鹿げたものは何もありません-プログラムの内容を使った人の仕事は、紙で説明することができます。 これは、アプリケーション内のユーザーがどの程度動作するかを理解するのに役立ちます。



スクリーンショット2015-07-01 at 09.17.18



たとえば、銀行業務アプリケーションを作成します。 推定シナリオ:ユーザーがアカウントへの自動入金機能を有効にしたい場合:



自動入金



[自動入金設定]



期間を選択してください



[月に1回] [月に2回]



[1週間後] [毎週]



入金



月に一度



[暦日を選択]



設定金額



[金額を入力]



[自動入金設定]



プロトタイプを作成する前に、手書きの図は、アプリケーションの最も重要な部分であるコンテンツを学習するのに役立ちます。 ユーザーがコンテンツと対話する可能性を理解することは、プログラムで必要なページ/画面の数をより正確に推定するのに役立ちます。



次のステップは、各遷移ページの図を作成することです(この場合、これらは4つの図です)。 そしてここでは、紙のスキームからデジタルプロトタイピングに徐々に移行して、反復を継続することがすでに可能です( UXPinのようなツールがこれを支援できます)。



このスキームは、アプリケーションのページとの間で可能な遷移をすばやく探索するのに役立ちます。 スケッチを使用すると、アプリケーションを「復活」させ、プログラムの詳細と構造を理解できます。 そして、すでにデジタルプロトタイプが実際のユーザーの動作をテストするのに役立ちます。



4.使い慣れたパターンを使用して使いやすさを改善する



モバイルアプリケーションの設計は、ユーザーにとって「使い慣れた」ものにする必要があります。 たとえば、ほとんどすべてのマッピングサービスはスライドアウトナビゲーションを使用します。 これにより、ユーザーは「自宅で」感じることができます。 アプリケーションはなじみのないものですが、それを使用する仕組みはよく知られており、理解できます。



スクリーンショット2015-07-01 at 09.17.57



他の開発者のアプリケーションの設計をコピーすることを提供しないことを明確にする価値があります。 パブリックインターフェイス要素の使用についてです。 このアドバイスに従う場合は、アプリケーションの設計がユーザーの期待を満たしていることを確認する必要があります。



アプリケーションインターフェイスでのユーザーインタラクションの2つのカテゴリを使用することをお勧めします。



ジェスチャ :タップ、スワイプ、ダブルタップ、ピンチ、ズーム-これらはすべてユーザーに長く親しまれています。 ジェスチャーの詳細については、 こちらをご覧ください



アニメーション :ここでは、アプリケーションをより生き生きとさせるアニメーションを意味します。 アニメーションとジェスチャーコントロールを組み合わせることをお勧めします。



スクリーンショット2015-07-01 at 09.18.48



アプリケーションインターフェイスとのユーザーインタラクションのスキームにより、その構造と個々の要素が決まります。 たとえば、アプリケーションの下部にあるナビゲーションボタンは、プログラムの上部に配置されたボタンよりもユーザーに馴染みがあります。







Yelpは、直感的なインターフェイスを備えた優れたサンプルアプリケーションです。



5.ユーザーの指のサイズを考慮する



はい、多くのユーザーの指は、洗練されたデザインの愛好家が想像できる以上のものです。 したがって、さまざまなサイズの指にプログラムを適合させる必要があります。



十分なスペースを残すだけです。 ボタンが小さすぎる、または互いに近すぎる場合、単にボタンを押すことができない人もいます。 その結果、ユーザーはいらいらし、そのようなプログラムでの作業を停止する可能性があります。



ボタンやその他のタッチ要素を設計する際に考慮すべき事項を次に示します。



私たちは皆、さまざまな方法で携帯電話やタブレットを持ちます。 さまざまな状況の同じ人でも、さまざまな方法でデバイスを保持します。



私たちの指は本当に大きいです。 それらの幅は約45〜57ピクセルで、これはテストデバイスのほとんどのマニュアルで推奨されている以上です。 たとえば、Appleは、辺のサイズが44ピクセルの正方形のターゲットを推奨しています。 そして、これは常に十分ではありません。



6.グラデーションと影をあきらめないでください



はい、フラットなデザインはすでに新しい標準になりましたが、これは、影やグラデーションが遠い過去であることを意味するものではなく、このデザインオプションを廃止する必要があります。 まったくそうではなく、設計アプローチだけが少し変わっています。



スクリーンショット2015-07-01 at 09.19.59



ボタン、スイッチ、および同様のアイテムを設計する場合、通常、シャドウは非常に重要です。



スクリーンショット2015-07-01 at 09.20.15



個々の要素の影とグラデーションにより、ユーザーはインターフェイスをより理解しやすくなります。 これらの設計手法を使用して、ボリュメトリックボタンと入力フィールドを作成できます。



7.カオスを取り除く



3クリックルールは現在関連性があり、アプリケーション設計の設計時に使用する必要があります。 なんで? はい。アプリケーションのページに本当に必要なものを正確に理解できるためです。



理想的には、ユーザーはすべてのタスクを迅速に、できるだけ少ないアクションで完了する必要があります。 Yahoo CEOのMarissa Mayerは、 2タップルールの使用を提案しています。 この原則が守られない場合、Marissaはアプリケーションをさらに改善し、設計を改善することを提案します。



ユーザーに最小限のアクションを実行させる必要があります。 ユーザーがプログラムと対話するときに努力する必要が少なくなるほど、アプリケーションが成功する可能性が高くなります。



All Articles