モバイルアプリデザインの十戒

公開: 2017-09-20

物事を過度に複雑にしてはならない

Google Play ストアには 340 万以上のアプリがあり、Apple の App Store には 200 万以上のアプリがあります。 つまり、平均して 1 日あたり 3,389 個のアプリが Google Play ストアに追加されていることになります。Apple はもう少し厳選していますが、毎日 1,557 個のアプリが App Store に追加されています。

あなたのアプリが日々の大洪水から際立つようにしたいモバイルアプリのデザイナーなら、美しくて楽しく使える製品を作らなければなりません。

成功するアプリを設計するためにできる限りのことを行っていることを確認するためのちょっとしたガイダンスが必要ですか? 山に登る必要はありません。モバイル アプリの設計に関する 10 の戒律をここに示します。

物事を過度に複雑にしてはならない

アプリ デザイナーとして、夢中になるのは簡単です。 新しいアプリを市場に投入するときは、(現時点では) 必要だと感じるあらゆる種類の機能を詰め込む必要があるという感覚があります。 これは、チームでプロジェクトに取り組んでいる場合に特に当てはまります。 他人のアイデアに常に斧を振りかざしているような人や、プロジェクトからキラー機能を削除することで知られるような人になりたいと思う人はいません。 しかし、モバイル アプリの設計では、周辺に余分な機能を含めると、多くの場合、ユーザーが混乱したり、UI が雑然としたり、焦点が合っていなかったりします。

「モバイル ユーザーは、洗練された高速なユーザー エクスペリエンスを求めています。 余分な手順をたくさん使ってアプリをロードしたり、製品のデスクトップ エクスペリエンスをコピーしようとしたりすることは、間違った設計アプローチです」と、Geeks Chicago の社長である Mark Tuchscherer 氏は述べています。 「モバイル ユーザーは、何よりもミニマリストのアプローチを採用するでしょう。」

同意します — 機能を必要なものだけに制限し、同時に、UI が同様の考え方を反映していることを確認してください。 UI は、ユーザーが必要とすることだけを行う必要があります。

モバイル UI には、ユーザーが必要とするものだけを含める必要があります。

デザインがアクセシブルであることを確認する必要があります

前に述べたように、アクセシビリティは単にあると便利なものではなく、アプリに絶対に存在しなければならない重要な機能です。 率直に言うと、アクセシビリティをモバイル アプリの設計の最前線に置いていないのであれば、最初からやり直す必要があります。

1 つには、5,700 万人のアメリカ人が障害を持っていることを考えると、代表的な聴衆を獲得することが絶対に必要です。 実際、世界中の全イタリア人よりも多くの聴覚障害を持つアメリカ人がインターネット上にいます. 同じことが視覚障害のあるアメリカ人にも当てはまります。 心に留めておいてください - それはただのアメリカ人です!

それ以上に、アクセシブルなデザインは単に良いデザインです。 Apple と Android の両方が提案するアクセシビリティ設計のベスト プラクティスは、UI コントロールに正確なラベルを付ける、フォーカス ベースのナビゲーションを提供する、音声のみのアプリ フィードバックを回避するなど、いずれにせよ絶対に行うべきことを強調しています。

そしてもちろん、Android 向けか iOS 向けかに関係なく、幅広いユーザーにアプリをテストしてもらう必要があります。 オフィスにまわすだけでなく、多様な人々の手に渡ってください。 アプリが市場の大部分で使用できなくなることは、最も避けたいことです。

車輪の再発明をしてはならない

世の中にはたくさんのデバイスがあるかもしれませんが、ほとんどの人が従うユニバーサル デザインと UX の手がかりがいくつかあります。 アプリを使ったあなた自身の経験を考えてみてください。画面を操作するとき、特定のことが起こることを期待します。 一部のアプリでは、親指を上にスライドさせると横からメニューが飛び出すことを期待している可能性があります。 ドラッグ アンド ドロップでオブジェクトを移動するなど、論理的で使い慣れたタッチ ジェスチャを意味する場合もあります。

認識可能なジェスチャと直感的な UX を使用するモバイル アプリを設計します。

すでに出回っている UI 要素に基づいてアプリを断片的にまとめることを提案しているわけではありませんが、ユーザーがアプリ エクスペリエンスに何を期待しているかを認識しておく必要があります。 追加する新しい要素は、カスタム オンボーディング プロセスまたは直感的な学習によって説明する必要があります。 これにより、ユーザーにとってさらに複雑なレイヤーが追加されます。 他に選択肢がない場合を除き、避けるべきです。

次のように考えてみてください。写真を閲覧するためのアプリをダウンロードし、画面を操作するためのまったく新しい方法を学ぶ必要がある場合 (たとえば、慣れていないジェスチャーを使用するなど)、引き続き使用しますか?それ? 使い慣れたジェスチャーを使用できるアプリが他にあるとしたらどうでしょうか。

競合他社と差別化するためだけに慣習を捨てないでください。新しい要素の追加が避けられず、アプリのエクスペリエンスに何かを追加する場合を除き、常にユーザーが使い慣れたデザイン言語で作業する必要があります。

あなたは誰のためにデザインしているのかを常に覚えておくべきです

写真家向けのモバイル写真編集アプリをデザインしている場合は、幼児向けの単語暗記ゲームをデザインしている場合とは優先順位が異なります。 あなたがデザインする対象者はそれぞれ異なる期待を持っており、それぞれが異なるタイプのデザインに反応します.

アプリの架空のユーザーのペルソナを作成して、人々がアプリとどのようにやり取りするかをモデル化すると役立つ場合があります。 プロ向けのデザインですか? 学生? 医者? 企業? 中小企業? 顧客やスタッフが使用するように設計されたものを作成していますか? プログラマーかデザイナーか? ミュージシャンやランナー?

デザインのスケッチを始める前に、何を作成しているのか、誰のために作成しているのかを正確に把握してください。 目標とターゲット層を 1 つのシンプルなフレーズに要約できるはずです。「旅行好きのための出会い系アプリ」. 「初心者プロデューサー向けのスタジオ ミキシング アプリ。」 「IT プロフェッショナル向けのネットワーク診断ツールです。」

あなたにおすすめ:

メタバースがインドの自動車産業をどのように変革するか

メタバースがインドの自動車産業をどのように変革するか

反営利条項はインドのスタートアップ企業にとって何を意味するのか?

反営利条項はインドのスタートアップ企業にとって何を意味するのか?

Edtech の新興企業がどのようにスキルアップを支援し、従業員を将来に備えさせるか

Edtech スタートアップがインドの労働力のスキルアップと将来への準備をどのように支援しているか...

今週の新時代のテック株:Zomatoのトラブルは続き、EaseMyTripはスト...

インドの新興企業は資金調達を求めて近道をする

インドの新興企業は資金調達を求めて近道をする

デジタル マーケティングのスタートアップ Logicserve Digital は、代替資産管理会社 Florintree Advisors から 80 Cr の資金を調達したと伝えられています。

デジタル マーケティング プラットフォームの Logicserve が 80 億ルピーの資金を調達し、LS Dig...

それが難しい場合は、その理由を考えてみてください。ユーザーにとって最高のエクスペリエンスを生み出すことに本当に集中していますか?それとも、自分にとってクールに見えるものをデザインしようとしているだけですか? ターゲットの焦点を失うことはありません。

不快にならないフォントを使用する

この設計上の罪は、私たち全員が経験したことです。 それがアプリであろうと、診療所のレターヘッドであろうと、PowerPoint のスライドであろうと、フォントが適切でない場合、私たちはそれに気づきます。

Comic Sans や Papyrus の没落については、モバイル アプリのデザイナーがデザインに使用するフォントにもう少し注意を払うようになると思うほどたくさん書かれていますが、必ずしもそうとは限りません。 アプリを美しくするには、いくつかの不適切なフォントを避けるだけでは十分ではありません。 アプリに適合し、UX を損なわないフォントを見つける必要があります。

Pointman のシニア UX/UI エンジニアである Mike Spencer 氏は、次のように述べています。 「私はモバイル アプリ用のサンセリフ フォントを好みますが、本当に重要なのは、それがデザインに合っていて読みやすいことです。」

あなたは一貫性を保つべきです

デザインを選択し、アプリ全体でそれを維持する必要があります。 いくつかの選択画面でスライドアウトサイドパネルに突然切り替える前に、すべてのページにトップナビゲーションバーを配置しないでください. スプラッシュ スクリーンにはまろやかなアース トーンを使用せず、ロードしたらパステルに切り替えます。 アプリ内の 1 つのボタンに一定量のパディングがある場合、すべてのボタンに同じパディングが必要です。 アプリは全体を通して統一感を持たせる必要があります。そうしないと、ユーザーにとって耳障りで不快なものになります。

モバイル デザインは、アプリ全体で一貫性を保つ必要があります。

一貫性を維持することは美学だけではありません。 使用するデザイン要素は、潜在的なユーザーにアプリについて何かを微妙に教えています。 ルールを突然変更すると、それらを破棄して混乱させることになります。

あなたのアプリに似たアプリが他にもある場合は、それらが設計上何をしているのかを書き留めてください。 これにより、ユーザーがアプリにどのような期待を寄せているかがわかります。 Google のアプリはどれも一貫した外観を持っていることに気付くでしょう。Apple も同じです。 特定の企業や業界向けに何かをデザインしている場合は、アプリがそのスタイルに合っていることを確認してください。 同様に、特定の業界向けのアプリを構築している場合、その業界に見合った「適切な」アプリにする必要があります。

モバイルを念頭に置いておく必要があります

モバイルアプリのデザインは…まあ、モバイルです。 それにもかかわらず、多くの設計者は、ユーザーが指で (多くの場合、親指だけで) アプリをナビゲートすることを忘れているようです。 ここ数年で携帯電話は大きくなりましたが、片手での操作性を必要とするユーザーやユースケースはまだまだたくさんあります。

ユーザーは外出先でモバイル アプリを操作します。 それに応じて設計します。

また、ユーザーがいる環境についても考慮する必要があります。ユーザーは、移動中の車に座っているか、歩きながらボタンをタップしている可能性があります。 ボタンが密集しすぎていたり、不要なデザイン要素が画面に散らばっていたりすると、アプリがわかりづらく、使いにくくなります。 ユーザーが必要な機能を見つけて適切なボタンを簡単に押せるように、UI はすっきりと整理されている必要があります。

OneSpring の CIO および CEO である Robert Grashuis と Jason Moccia は、ユーザーがアプリを操作しやすくするために十分な余白を使用することの重要性を指摘しています。 「画面上でのアクティビティが多すぎると、読者の注意が散漫になります。 余白を慎重に使用して混乱を減らし、ユーザーが集中できるようにします。」

ユーザー フローを忘れないでください

どんなにきれいなデザインでも、アプリに自然な流れがなければ、ユーザーを獲得することはできません。 モバイル アプリの設計に入る前に、次のようないくつかの基本的な質問を自問する必要があります。

  • あなたのアプリはユーザーにとってどのような目的を果たしますか?
  • 必要な機能にたどり着くために、どのようにナビゲートするのでしょうか?
  • 何ページを解析する必要がありますか?
  • 特定のボタンにアクセスするには、何回のメニュー クリックが必要ですか?
  • 最もアクセスしやすくする必要があるのはどの機能ですか?

これは、各ページに何を含める必要があるかを正確に示すことで、デザインの指針となります。 理想的には、アプリのスケッチ (またはプロトタイピング) を開始する前に、この手順を実行する必要があります。 空白のドキュメントまたは紙に、さまざまなタスクのユーザー フローをマップできます。 たとえば、ミュージシャンが楽器をチューニングするのに役立つアプリを設計している場合、次のようなフローを作成できます。

メイン画面 > 楽器の選択 [Guitar] > チューニングの選択 [Standard] > 弦の選択 [E]

一般的なタスクのフローを単純化することもできます。 たとえば、チューナーを使用して、ユーザーが特定の楽器とチューニングの組み合わせをメイン画面のボタンに保存できるようにすることができます。 好みの楽器とチューニングを選択したら、フローは次のようになります。

メイン画面 > 保存された楽器/チューニング > 弦の選択 [E]

このようにユーザーの行動をマッピングすると、自然に流れるアプリを設計するのに役立ちます。 また、アプリの成功に不可欠な特定のデザイン要素を追加することを忘れないようにします。

現実的なプロトタイプを作成する必要があります

アプリの設計は、コーディングは言うまでもなく、長くてイライラするプロセスになる可能性があります。 ほぼすべてのデザイナーや開発者は、素晴らしいデザインを思いつき、それをコーディングしてクライアントに送った経験がありますが、それは彼らが探しているものではないと言われました.

同様に、スケッチをジャグリングしても、これまでのところしか達成できません。 ナプキンの裏側にエッチングされたものと、実際にテストできる現実的なプロトタイプとの間には、かなり大きな違いがあります。 スケッチで大まかなアイデアが伝わるかもしれませんが、インタラクティブでリアルなプロトタイプは、クライアントを席から飛び立たせることができます。 そして、彼らがそれに興奮していなくても、プロトタイプが機能していれば、フィードバックを得て必要な変更を加えるのがはるかに簡単になります.

Proto.io を使用すると、コードを 1 行も書かなくても、「本物の」アプリのように動作する、現実的でインタラクティブな肉付けされたプロトタイプを設計できます。 そうすれば、深入りする前に、クライアントと QA チームに真のハンズオン体験を提供できます。

QAといえば…

あなたはテストしなければならない — その後、さらにテストする

正直なところ、このブログ投稿の概要を説明し始めたとき、1 ~ 10 の「テスト」を行いたいという衝動に駆られました。これが QA の重要性です。 これは当然のことです。実際、地球上のほぼすべての開発者やデザイナーは、スムーズな UX を作成するにはテストが不可欠であると言うでしょう。

モバイル アプリをどれだけ慎重に計画しても、テストは非常に重要です。

それでも、私たちは皆、アプリをダウンロードして、その動作の悪さに完全に困惑するという同じ経験をしたことがある.それ。 または、技術的には問題なく動作するが、意味をなさないデザイン要素や判読できないテキストが含まれている場合があります。

アプリに致命的な欠陥がなくても、ユーザーは気まぐれです。 たった 1 つの小さな間違いで、彼らがあなたのアプリを二度と使わなくなるかもしれません。 これを回避するには、プロセス全体でアプリをテストしてください。 最初のプロトタイプから、リリース準備完了のアプリを検証のために送信する瞬間まで、常に修正または改善すべき点を探している必要があります。

これらの 10 のルールは正しい軌道に乗るのに役立ちますが、モバイル アプリの設計は、ガイドに従うことや、やることリストの項目をチェックすることだけではありません。 創造性を発揮する必要があります。最高のアプリは、複雑な問題を見つけてエレガントに解決します。


[この投稿はProto.ioに最初に掲載されたもので、許可を得て転載しています。]