ホーム‎ > ‎Patterns‎ > ‎

Settings

設定


設定は、アプリがどのように振る舞うべきかを決めたり、ユーザが自分の好みを反映させるための項目です。ユーザの利点:

デベロッパードキュメント
Settings

  • 特定の状況が何度発生しても、設定を定めておくことで同じ質問の繰り返しにより作業が中断されることがありません。設定は特定の状況で常に何が起こるのかあらかじめ決めておきます。デザイン原則のDecide for me but let me have the final sayを見てください。
  • アプリが設定の管理下にあることで安心するように設計してください。デザイン原則のLet me make it mineを見てください。

フローと構造

アクションオーバーフローで設定へのアクセスを提供する
設定は頻繁には必要ないのでUI内であまり目立たないようにします。アクションバーの入る場所がある場合でも、「設定」のアクションボタンを作ってはいけません。設定メニューは、常にアクションオーバーフローに設置し、「設定」(Settings)というラベルを付けて、「ヘルプ」(Help)を除く全ての項目の下に配置します。


全ての設定を行うことは避ける
たとえどれだけ多くのアイテムがあるようなアプリであれ、設定は僅かなナビゲーションでこれらを設定できるため、アプリUIの中核部分を邪魔することはないでしょう。これは良いニュースのように聞こえますが、問題点となる可能性も秘めています。

設定は、多くのものを置いておくための魅力的な場所かもしれません(来客が来る前に小さなクローゼットに片付けるような)。また、設定はユーザがアプリの中で多くの時間を過ごす場所ではないので、散らかった状態を正当化し無視するのは簡単です。しかし、稀にユーザが設定を編集したいときにも、ユーザはアプリの他の項目と同様に編集できることを期待しています。設定を多彩にすることは選択肢を広げることにつながります。このような多すぎる項目は圧迫感を与えます。

そのため、設定だけですべての項目をコントロールしたいという考えを持ちだして、製品をより複雑にしてはいけません。コントロールしたい項目ごとに設定を追加することを検討し、下の図の線を満たしているか確認してください。


多くの設定がある場合には関連グループをまとめる
人間が短期的に保持できる記憶の数は、平均して7± 2です。10以上の設定項目があるリストが提示された場合(たとえ上記の基準を適用しても)、すべてを確認すること、理解、処理することが難しくなります。

あなたは長いリストを短いリストに変え、グループの設定の一部または全てを分割することでこの問題を解決することができます。関連する設定のグループ次のはいずれかの方法で表示することができます。
  1. セクション区切り
  2. サブスクリーン分割
アプリの設定を整理するために、これらのテクニックを単独、もしくは組み合わせて使うことができます。

例えば、Android設定アプリのメイン画面は、リスト内のそれぞれの項目に関連する設定のサブ画面に移動します。また、項目自体はセクション区切りによってグループ化されます。

学術的な厳格な理論に基づいたものではありませんが、設定項目の総数に基づいた設定のグループ化の方法についてのアプローチを示します。

7以下
グループ化してはいけません。 ユーザが恩恵を受けませんし、グループ化はやり過ぎのように思われます。
8~10
1、2個のセクション区切りを用いて、設定をグループ化してください。どこにも属さない設定(シングルトン)がある場合、以下のように扱います。
  • 最も重要な設定が含まれている場合、セクション区切りよりも前にリスト化します。
  • それ以外の場合はセクション区切りの最後に「その他(OTHER)」という名前でリスト化します。
11~15
上記と同じですが、2~4個のセクション区切りを用います。

また、リストを減らすために以下の事を検討してください。
  • 詳しい人向けの設定が2つ以上ある場合には、それらを設定の「メイン画面」から「詳細設定」というサブ画面に移動してください。そして「詳細設定」に移動するためのアイテムをアクションオーバーフロー内に配置します。
  • 相互に関連があるが、他の設定とは関連しないような、機能の重複を探してください。このセクションで後述するデザインパターンを使用して、1つの設定にそれらを組み合わせるようにしてください。例えば、関連する2つのチェックボックスをマルチプルチョイス設定として再設計できるかもしれません。
16以上
4つ以上関連する設定項目がある場合は、サブ画面にグループ化してください。 そして上述した内容でリストを減らすよう検討して下さい。

デザインパターン

チェックボックス
選択・非選択の確認のために使用します。
複数選択
連続ではない選択肢のセットから、ユーザが1つを選択する場合に、このパターンを使用します。
スライダー
値の範囲が連続している場合の設定のために、このパターンを使用します。
日付・時間
ユーザが時間、時刻の情報を合わせる際にこのパターンを使用します。
サブスクリーンへの移動
サブスクリーンへのナビゲーションや複雑なセットアッププロセスガイド用の連続したサブスクリーンにはこのパターンを使用します。
  • 1つのサブ画面に移動する場合は、サブ画面とそこに移動するラベルに同じタイトルを使用します。
  • この例のように連続するサブ画面に移動する場合は、シーケンスの最初のステップを説明するタイトルを使用します。
リストサブスクリーン
設定画面や同じ項目のリストを含む設定のカテゴリを表示するために、このパターンを使用します。

ラベルは項目名を表し、補助テキストはステータス表示に使用されます。(この例では、ステータスはラベルの右にあるアイコンで補足されています。)リストに関連付けられている全てのアクションはリスト自体ではなく、アクションバーに表示されます。
マスターオン/オフスイッチ
機能全体のオンオフの切り替えが必要な設定カテゴリのために、このパターンを使用します。

オン・オフスイッチは、サブスクリーンのアクションバー内の最初の項目として配置されます。スイッチがオフになっている場合、リスト内の項目は消えて、空である理由を説明するテキストで置き換えられます。何らかのアクションがオンにすることを要求した場合、それは無効になります。
また、サブスクリーンにつながるメニュー項目でマスターオン/オフスイッチを操作することができます。しかし、この機能の実装は、はじめのセットアップ時以外に、ほとんどサブスクリーンにアクセスする必要がなく、スイッチとトグルに留めたいときにとどめてください。
個別のオン/オフスイッチ
チェックボックス形式よりも詳細な設定を必要とする個別項目の設定のために、このパターンを使用します。

アプリの説明画面を読まないうちはユーザがスイッチを切り替えることができないように、オン/オフスイッチはサブスクリーンにのみ表示されます。現在の選択状況を反映した補助テキストが、設定ラベルの下に表示されます。

この例ではAndroidビームがデフォルトでオンになっています。ユーザがこの設定の詳細を知らない可能性があるので、オンだけよりも記述的な状態にしました。
依存関係
他の設定の値に基づいた変更が可能な設定のために、このパターンを使用します。

設定が独立でない場合、依存している項目の下には設定できない項目が現れます。もし項目が表示されている場合には、「利用不能」という表示がされており、その理由が不明な場合には簡単な説明がステータスに表示されます。

与えられた設定が3つ以上の設定に依存する場合は、メインの設定画面が多くの無効なアイテムによって煩雑にならないように、マスターオン/オフスイッチのあるサブスクリーンの使用を検討してください。

デフォルト

設定によりアプリの挙動がきまるため、初期設定状態のアプリがユーザの第一印象になります。ユーザが設定を変更可能だとしても、初期設定で十分であることをユーザは期待しています。以下の質問が初期設定状況の決定に役立つでしょう。
  • デフォルトの設定がない時、ユーザがどのような設定をする可能性が高いでしょうか?
  • どのような状態がベーシックで、極端ではない設定ですか?
  • 危険性のない設定、物議を醸し出さない設定、予想できないことが起きない設定はどれですか?
  • バッテリーやモバイルデータの消費量が最も小さい設定はどれですか?
  • どの選択が「私のものを失わない」( Never lose my stuff)というデザイン原理を最もサポートするでしょうか?
  • どの選択が、「重要な場合だけ、中断して」(Only interrupt me if it's important)というデザイン原則を最もサポートするでしょうか?

記述ガイドライン

ラベルは明確かつ簡潔にする
スペースの都合上、設定のためのわかりやすいラベル表示が難しい場合があります。表示可能な範囲は1行のみであり、最も小さな端末のスペースは信じられないほど短いものです。ラベルを簡潔、有意義かつ読みやすい形式にするために、以下のガイドラインに従ってください。
  • 各ラベルは文章と同じ形式で記入してください。(例えば、最初の単語と固有名詞のみ大文字で書きます。)
  • "Set", "Change", "Edit", "Modify", "Manage", "Use", "Select", or "Choose"のような指令のような動詞でラベルを始めないでください。ユーザはすでに設定で来れらのことを行えることを理解しています。
  • 同様に"settings"や"setting"のような単語でラベルを終わらせないでください。
  • 設定がグループの一部である場合、セクション区切りやサブ画面のタイトルで使用される単語を繰り返してはいけません。
  • "Don't" や "Never"のような否定的な言葉でラベルを開始することは避けてください。例えば、 "Don't allow" は"Block"に置き換えられます。
  • 対象ユーザが一般的に理解できる用語でない限り、専門用語の使用は出来るだけ避けてください。我々が伝えたいのは基礎的な技術ではなく設定の目的なので、一般的な名詞と動詞を使用してください。
  • ユーザに指示してはいけません。例えば、ユーザが通知をオンもしくはオフにすることができる場合には、「通知してください」("Notify me")よりも「通知」(Notifications)とラベルをつけてください。

一度設定のラベルを決めたら、どの端末でもうまく表示できるかどうか、LDPIの携帯電話の縦画面プレビューで確認してください。

補助テキストは、ステータスのためであり、説明のためではありません…
Ice Cream Sandwichまでは、私たちは説明または指示を表すためにラベルの下に補助テキストを使用していましたが、Ice Cream Sandwichからは、ステータス表示のために補助テキストを使用しています。
×Before
スクリーンタイムアウト
画面が自動的にオフになるまでの遅延時間を調整します。
○After
スリープ
非アクティブ状態で10分経過後
補助テキストでのステータス表示には次の利点があります。
  • ユーザが移動することなく、現在の設定値を確認できます。
  • ユーザがとても高く評価する、簡単さを保つ(Keep it brief)デザイン原則が適用されます。

…ただし、チェックボックスでの設定でない限り
補助テキストでのステータス表示を使う上で重要な例外があります。それはチェックボックスの設定で、この際にはステータス表示ではなく説明のために補助テキストを使います。チェックボックス下のステータスは、チェックボックス自身が示しているので表示する必要がありません。チェックボックス設定の補助テキストに説明を表示するのは、チェックボックス画面からダイアログや追加情報を提供することができる別の画面に移動することがないためです。

つまり、チェックボックス設定のラベル自体で十分設定を理解できる場合、説明を提供する必要はありません。
チェックボックスの設定の説明を書くために次のガイドラインに従ってください。
  • 1つの文を保ち、末尾に句読点を使用しないでください。
  • 設定がチェックされた時に何が起こるかは命令形で伝えます。例:「データ交換を許可します」("Allows data exchange")ではなく、「データ交換を許可する」("Allow data exchange")
  • ラベルにすでに表示される単語を使わないことで繰り返しを避けます。
  • 設定を理解するために必要な場合を除き、ユーザに指示してはいけません。
  • ユーザに指示する場合は、一人称(私、I)よりも二人称(あなた、you)を使ってください。 Androidではなく、ユーザに語りかけるようにしてください。

記述サンプル
以下は、私たちがIce Cream Sandwichの設定アプリでラベルと補助テキストに加えた変更例です。

×Before
Use tactile feedback
○After
Vibrate on touch
このチェックボックスでは、使い捨ての単語"Use"を除去し、ラベルをより直接的で理解できるように言い換えました。
×Before
Screen timeout
Adjust the delay before the screen automatically turns off
○After
Sleep
After 10 minutes of inactivity
この複数選択の設定では、ラベルの用語を柔らかい表現に変更し、説明をステータスに置き換えました。「10分」(10 minutes)では「10分間のスリープ」 (sleep for 10 minutes)と誤解される可能性があるため、選択された値の周囲に説明を置きました。
×Before
Change screen lock
Change or disable pattern, PIN, or password security
○After
Screen lock
Pattern
この設定は、ユーザが画面ロックの種類を選択し、その設定を行うための連続したサブスクリーンを示しています。私たちは、使い捨ての単語"Change"をラベル内から除去し、内容の説明をユーザによって設定された現在の画面ロックタイプの表示に置き換えました。ユーザが画面ロックを設定していない場合には、補助テキストは"None"と表示します。
×Before
NFC
Use Near Field Communication to read and exchange tags
○After
NFC
Allow data exchange when the phone touches another device
このチェックボックスの設定では、専門用語であるNFCの表記を保ちました。この理由は、(1)私たちは明確で簡潔な代わりの用語を見つけることができませんでしたし、(2)今後数年間でこの略語が劇的に増加すると予想され、ユーザに広く知れ渡ると考えたためです。

しかし、私たちは説明については修正しました。以前に比べると専門的でなく、ユーザがどうやって、またなぜNFCを使用するかをうまく伝えます。ほとんどのユーザに意味がなく、表記に多くのスペースを使うので、略語が何の略なのかは示していません。

チェックリスト

  • 設定の各項目が表示の基準を満たしていることを確認してください。
  • 7つ以上の項目がある場合は、関連する設定をグループ化する方法を探ってください。
  • ユーザがデザインになれるまで待つことはできないので、適用出来るところはどこでもデザインパターンを使ってください。
  • 安全で、中立で多くのユーザに合うデフォルトを選択してください。
  • 各設定に明確で簡潔なラベルを与えて、適切な補助テキストを使用してください。



原文はこちら > Settings

Except as noted, this content is licensed under Creative Commons Attribution 2.5. For details and restrictions, see the Content License.

Comments