アプリの設定UXを改善する方法

公開: 2022-03-11

他の未発表のUIパターンと同様に、設定パネルを使用するとアプリが使いやすくなりますが、欠陥がある場合にのみ関心を集めるように見えます。 ユーザーは当然の設定をとることができますが、設計者はそうすべきではありません。 適切に設計された設定パネルにより、ユーザーはアプリをニーズに合わせて調整し、企業がカスタマーサポートのコストを削減できるようになります。

アプリの設定は、ユーザーがプッシュ通知、タイムゾーン、ログイン資格情報などの項目を管理するのに役立ちます。 すべてのアプリには設定がありますが、ユーザーとデザイナーは、それらを制御するインターフェースパネルを見落としがちです。 ユーザーは設定を無視する傾向があり、デザイナーはアプリの設計プロセスの後半まで設定を無視しているようです。

ユーザーがアプリの設定について熟考する理由はほとんどありませんが、デザイナーには十分なインセンティブがあります。 適切に設計された設定は、ユーザーがオンデマンドでアプリをカスタマイズできるようにすることで、カスタマーサポートのコストを削減し、エンゲージメントを高めます。 目標は、ユーザーが自分の好みを簡単に管理できるようにすることですが、ユーザーのニーズに合わせた設定を設計することは困難です。 ユーザーが電子メールアドレスを更新できるようにするような単純なものでも、慎重な計画が必要です。

どのような設計手法により、UXの設定が簡単になりますか?

このユーザーフローは、電子メールアドレスを更新するために必要なアクションを表します。
このユーザーフローは、電子メールアドレスを更新するために必要なアクションを表します。

より良いアプリ設定UXのガイドライン

グループカテゴリ

アプリに複数の設定がある場合、ユーザーが必要なものを見つけるのが難しい場合があります。 解決策は、設定をカテゴリにグループ化することです。 たとえば、Shopifyには設定の長いリストがありますが、それらは閲覧しやすいカテゴリに配置されています。

Shopifyの設定は慎重に分類されています。
Shopifyの設定は慎重に分類されています。

視覚的階層を確立する

設定パネルは、視覚的な階層がないと成功しません。 頻繁に使用する設定を最前線に置きます。 オプションが多すぎる場合は、認知的負荷を軽減するためにカテゴリをサブページに分けてください。

Facebookは、頻繁に使用される設定を高レベルで表示します。 N26は、カテゴリをサブページに分割します。
Facebookは、頻繁に使用される設定を高レベルで表示します。 N26は、カテゴリをサブページに分割します。

専門用語で名前を避ける

専門用語は、ユーザーが設定パネルの外でコンテキストを探すように導きます。 設定は、機能を示すわかりやすい言葉で説明するのが最適です。 製品やマーケティングチームをなだめるが、ユーザーを混乱させるような技術的または巧妙な名前は避けてください。

Calmの設定カテゴリは理解しやすいです。
Calmの設定カテゴリは理解しやすいです。

明確な説明を提供する

設定には、その影響を説明する説明が必要です。 設定の機能を明確に定義しますが、ユーザーが重要な詳細を理解するほど多くの情報を提供しないでください。 繰り返しになりますが、日常の言葉を使用し、デフォルト設定を復元するオプションを有効にします。

ブレイブの説明は、各設定の影響を明確に説明しています。
ブレイブの説明は、各設定の影響を明確に説明しています。

保存された状態に関するステータスインジケータとフィードバックを提供する

多くのアプリでは、更新された設定は自動的に保存されますが、ユーザーは変更を確認するフィードバックが必要です。 ユーザーが「保存」ボタンをクリックする必要がある場合は、目立つようにしてください。 ユーザーにスクロールを強制すると、設定が保存されなくなります。

Atlassian Jiraは、設定が更新されたときにユーザーに即座にフィードバックを提供します。
Atlassian Jiraは、設定が更新されたときにユーザーに即座にフィードバックを提供します。

適切なUIコントロールを使用する

ラジオボタンとチェックボックスは設定パネルの標準のUIコントロールですが、互換性はありません。

  • ラジオボタンでは、ユーザーはオプションのリストから1つ(そして1つだけ)を選択する必要があります。
  • チェックボックスを使用すると、ユーザーはオプションのリストから複数の選択を行う(またはまったく選択しない)ことができます。

アクションに確認や確認が必要ない場合は、トグルスイッチを使用し、わかりやすくするために「オン/オフ」ラベルを追加することを検討してください。

ラジオボタン、チェックボックス、およびトグルスイッチは、アプリ設定パネルの一般的なUIコンポーネントです。
ラジオボタン、チェックボックス、およびトグルスイッチは、アプリ設定パネルの一般的なUIコンポーネントです。

基本設定と詳細設定を提供する

多数の設定を持つアプリを処理する賢い方法は、2つのレベルの入力を提供することです。 基本設定はデフォルトで設定パネルに表示され、平均的なユーザーのニーズを満たしますが、詳細設定はよりきめ細かい制御が必要なユーザーにアピールします。

Spotifyの詳細設定により、ユーザーはリスニング体験を微調整できます。
Spotifyの詳細設定により、ユーザーはリスニング体験を微調整できます。

確認メールを送信する

多くのアプリには、財務情報などの機密データが含まれています。 メールの確認は設定パネルの外にありますが、アカウントの詳細が変更されたときにユーザーにアラートを送信する必要があるため、確認は重要です。 関連するアプリや設定によっては、更新のたびに確認を送信する必要がない場合があります。

ユーザーがログイン資格情報を更新するたびに、確認メールを送信する必要があります。
ユーザーがログイン資格情報を更新するたびに、確認メールを送信する必要があります。

アプリ設定の設計プロセスのヒント

情報アーキテクチャとユーザーフローから始める

情報アーキテクチャは、設定設計プロセスを開始するのに最適な場所です。 カードの並べ替えの演習を使用して、ユーザーが設定をグループ化する方法を理解し、出現するカテゴリ間の階層を確立します。 各設定のユーザーフローを設計し、ユーザーの期待に沿った設定ラベルを生成し、トップレベルのカテゴリの数を4つまたは5つに保つように努めます。

デフォルトモードの定義

デフォルト設定は、ユーザーに最初の対話から理論的に最適なエクスペリエンスを提供します。 目的は、オンボーディングを簡単にし、ユーザーに目標​​をサポートする設定を提供することです(ユーザー調査が非常に重要であるもう1つの理由)。 たとえば、1PasswordやLastPassなどのパスワードセキュリティアプリには、ユーザーの機密情報を保護するように設計されたデフォルト設定があります。

1PasswordとLastPassには、ユーザーの機密データを保護するデフォルト設定があります。
1PasswordとLastPassには、ユーザーの機密データを保護するデフォルト設定があります。

設計プロセスの早い段階で利害関係者に連絡する

すぐにコラボレーションを開始し、設定関連のニーズについて関係者と話し合います。 プロダクトマネージャー、セキュリティエキスパート、デザイナー、エンジニア、および設定に関心のある他の人と会ってください。設定の設計プロセスの後半まで待つと、費用のかかる再設計につながる可能性があります。

カスタマーサポートに相談する

デザインの改良は、ユーザーの問題点を特定することから始まり、カスタマーサポートチームはユーザーの問題に毎日対処します。 彼らは、アプリのどの側面が混乱し、どの設定を管理するのが難しいかを知っています。 可能であれば、カスタマーサポートミーティングに定期的に参加して、設定パネルの将来の反復についての洞察を得てください。

プロトタイプとテスト

プロトタイプを作成してテストし、コア製品の機能とともに設定がどのように機能するかを確認します。 忠実度の高いプロトタイプは、ユーザビリティセッションでUIコントロールの有効性をテストするための優れた方法です。 ここでも、最後の最後まで待つのはコストがかかる可能性があります。

思いやりのあるアプリ設定はUXを向上させます

デザイナーは、アプリを使いやすくするよう努めています。 目立つ機能が最も注目されますが、多くの場合、使いやすさを向上させるのはデザインの細部が目立たないことです。 優れた設定エクスペリエンスは、整理された直感的なものであり、ユーザーは日常のやり取りを微調整できます。 関連するフィードバックを提供し、ユーザーのメンタルモデルに合わせた有名なUIコンポーネントを採用し、ユーザーがカスタマーサポートに連絡することなく更新を行えるようにします。

•••

Toptal Designブログでさらに読む:

  • モバイルUXの設計原則
  • モバイルインターフェースのヒューリスティック原則
  • モバイルユーザビリティの基本ガイド
  • UXのモバイルeコマースのベストプラクティス(インフォグラフィック付き)
  • モバイルUXの設計上の制約、ベストプラクティス、および開発者との連携