これらのモバイルアプリデザインのベストプラクティスでユーザーを喜ばせる

モバイルアプリは、接続されたエクスペリエンスのコレクションです。 それらの体験をまとまりのある摩擦のないものにするのはデザイナーの仕事です。 これは簡単な作業ではありません。 UIパターンとコンポーネントは、すべての画面で一貫して表示および動作する必要があります。 インタラクションは直感的で、ユーザーの希望する結果と一致している必要があります。 アプリ全体にアクセシビリティガイドラインを組み込む必要があります。

ユーザーの調査とテストは、アプリが永続的な成功を収めるために必要な微妙な洞察を明らかにするための最良の方法です。 ただし、ユーザーを喜ばせ、長期にわたって維持するモバイルアプリの設計に役立つ、広く適用可能なベストプラクティスがあります。

オンボーディングプロセスを簡素化および合理化する

調査によると、オンボーディングチュートリアルを提示されたユーザーは、チュートリアルを表示されていないユーザーと比較して、タスクをより困難に感じる傾向があります。 特定の状況では、オンボーディング画面とツールチップは、アプリの主要な機能を紹介し、ユーザーが日常業務の一部としてアプリを利用するように促す効果的な方法です。 ただし、3つまたは4つを超えるオンボーディング画面を確認したり、事前に多くの情報を読んだりするようにユーザーに依頼することは、煩わしい場合があります。 ユーザーは、自分で物事を理解したいと思うことがよくあります。

一般に、アプリのUIは、チュートリアルを必要としないほど、すぐに馴染みがあり、直感的である必要があります。 ただし、オンボーディング戦略を使用する必要がある場合は、チュートリアルのステップ数を制限し、可能であれば、ユーザーがすでに実行しているアクションに関連するコンテキストでのみステップを表示してください。 さらに、ツールチップをアプリの最も重要な機能のいくつかに制限します。

アプリとデスクトップのバージョンで同じ機能を提供する

モバイルWebトラフィックが増加するにつれ、ほとんどのユーザーは、デスクトップと同じタスクをモバイルデバイスで実行できることを期待しています。 ある調査によると、ユーザーの大多数は依然としてデスクトップで複雑なタスクを完了することを好みますが、Pewの調査によると、アメリカの成人の15％がインターネットにアクセスする唯一の手段としてスマートフォンを使用しています。 たとえば、モバイルバンキングアプリのすべての機能にアクセスできないことは、最終的にユーザーがビジネスを別の場所に移す原因となるフラストレーションの原因となる可能性があります。

機能の展開の期待を管理することは、良いアプリのレビューと悪いアプリのレビューの違いになる可能性があります。 全機能セットを実装する前にアプリを起動する必要がある場合は、「近日公開」画面を投稿するだけでなく、一般公開されている機能ロードマップを作成して、正確な期待値を確立します。

通知を賢く使用する

通知は、ユーザーを維持するための最も強力なツールの1つであり、アプリを再入力してコンテンツを操作するためのタイムリーなナッジを提供します。 ただし、プッシュ通知の頻度とタイミング、およびプッシュ通知が提供するコンテンツを考慮することが重要です。 あまりにも多くのpingまたは不規則なバーストを受信すると、ユーザーは通知を完全に無効にする可能性があります。

通知を表示するときは、状況に応じてください。 たとえば、ユーザーが写真を撮ろうとするときに、カメラへのアクセス許可を求めます。 ユーザーがニーズに合わせて通知を調整できるように、アクセスしやすいきめ細かい通知設定を追加します。 また、ユーザーがアプリとそれが提供する価値を体験した後、ユーザーが製品を操作する3回目または4回目まで、通知を許可するようにユーザーに依頼することは控えてください。

Webビューをフラストレーションのない状態に保つ

Webビューを使用すると、開発者とデザイナーは迅速かつ安価に反復でき、アプリの更新の合間に変更を加えることができます。 巧みに使用すると、ユーザーをアプリ内にとどめ、所定のページを表示することで、開発時間を節約し、UXを簡素化できます。

Webビューもユーザーにメリットをもたらします。 たとえば、アプリがカメラなどのデバイスのハードウェアに簡単にアクセスできるようにします。 また、多くのアプリはWebビューを使用してユーザーを認証します。ユーザーは、パスワードマネージャーを使用してサインインし、シームレスにアプリにリダイレクトされます。

ただし、ネイティブアプリとWebビュー間のコンテキスト切り替えに関しては、ユーザーは摩擦を許容しません。 タスクを完了するためにアプリとブラウザーの間を行ったり来たりしなければならないのは、ユーザーエクスペリエンスが悪いことです。

接続性が悪い場合にアプリを最適化する

接続性が低い場合に最も重要なタスクを処理するように最適化されていないアプリは、標準以下です。 たとえば、ユーザーが旅行プランを予約したり、eコマースの支払いを行ったりしている場合は、アクションが保存され、接続が回復したらすぐに実行されるようにします。

アプリで常に接続が必要な場合は、エンドレススピナーを提示したり、さらに悪いことに何も提示したりするのではなく、続行するには接続が必要であることをユーザーに伝えます。 二重請求されることを恐れているユーザーは、信頼を失い、最終的にアプリを放棄します。

パターンとコンポーネントの一貫性を保つ

デジタル製品に関しては、視覚的な一貫性が必須です。 視覚的なガイドラインの実装と維持に失敗すると、プロ意識の欠如が伝わり、ユーザー間の信頼が損なわれる可能性があります。 経験的な結束も同様に重要です。 たとえば、ボタン、フォーム、メニュー、ダッシュボードなどのコンポーネントとパターンは、均一にスタイル設定するだけでなく、ページの種類に関係なく、アプリ全体で一貫して動作する必要があります。

モバイルアプリデザイナーとして、あなたはビューのコレクション以上のものを作成しています。 あなたはUIシステムの設計者です。 新しいプロジェクトを開始するときに一貫性を植え付けるには、AppleのヒューマンインターフェイスガイドラインやGoogleのマテリアルデザインなどのさまざまな設計システムを試して、ユーザーのデバイスに最適なものを決定します。

UIのノイズを減らす

ボクシーに見えるUIは、90年代のソフトウェア設計から引き継がれたものです。 時代遅れに見えることに加えて、スタイルは、過度の視覚的ノイズを作成し、ユーザーが画面上の情報を処理するのを困難にする、あまりにも多くの線、境界線、および立体形状を特徴としています。

ただし、ユーザーがページの視覚的な階層を理解できるようにするには、いくつかのサポート構造が必要です。 魔法の公式はありませんが、lessの側で誤りを犯し、線、無地の背景、ドロップシャドウなどのサポート構造を控えめに使用してください。 慎重に使用すると、コンポジション内に十分なスペースがあれば、パディングは線と同じくらい明確な区別を提供できます。

アプリを完全にアクセス可能にする

ニューモフィズムは、インターフェイスコンポーネントが微妙な影、グラデーションオーバーレイ、単色を使用してレンダリングされるデザイントレンドです。 ニューモルフィックコンポーネントは、触覚的に見え、相互作用を促すことを目的としていますが、単色の色と低コントラストに依存しているため、はっきりと表示するのが難しい場合があります。 視覚障害のあるユーザーは、ニューモルフィズムにほとんどアクセスできません。この傾向は、包括的なデジタル製品に対する需要の拡大と対立しています。

さらに、ニューモルフィックコンポーネントはコーディングが難しいことが多く、この美学を企業の視覚的ガイドラインと組み合わせるのは困難です。 ニューモルフィックコンポーネントを使用する場合は、適度に使用し、製品が引き続きアクセシビリティ基準を満たしていることを確認してください。

継続的な学習に取り組む

モバイルアプリの設計のベストプラクティスを順守するには、継続的な学習が必要です。設計サイトや記事を読んだり、他の設計者とヒントやコツを交換したり、新しいツールやプロセスを常に把握したりする必要があります。 また、現在ユーザーにとって本当に最適なものを設計するのではなく、新しいデバイスやプラットフォームがもたらす課題に直面し、快適なパターンや手法に依存していることを認識することも意味します。

編集者注：このストーリーにデザインの洞察を提供してくれたToptalネットワークメンバーのDamirKotoricに感謝します。

Toptalブログでさらに読む：

• モバイルUXの設計原則
• モバイル向けの情報アーキテクチャの原則（インフォグラフィック付き）
• モバイルインターフェースのヒューリスティック原則
• モバイルUXの設計上の制約、ベストプラクティス、および開発者との連携