Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Androidでのお知らせ

 Androidでのお知らせ

05162bc961c3654218bf1839974a4f35?s=128

Benoît Quenaudon

April 07, 2016
Tweet

More Decks by Benoît Quenaudon

Other Decks in Programming

Transcript

  1. Android での 適切なお知らせ #toast #snackbar #dialog

  2. アプリ内のお知らせ方法

  3. お知らせ種類 1. ダイヤログ 2. スナックバー 3. トースト

  4. Dialogs ダイヤログ

  5. ダイヤログはいつ使う? ▸ 重要な情報を伝える ▸ アクションを求める

  6. ダイヤログ ▸ モーダルの一種 ▹ 画面の一部も ▹ フル画面も

  7. 中断を減らす ▸ ダイヤログはユーザがやっているタスクにとって 中断になる ⇒ 本当にユーザに対して中断を入れる程のものな のか?

  8. 上に表示 ▸ ダイヤログは常に上に表示する ▹ ユーザはダイヤログに対するアクションをする必要 ▸ ダイヤログから更に他ダイヤログを開かない ▸ スクロール付きコンテンツを含めない

  9. フルスクリーンダイヤログ例外 ▸ フルスクリーンダイヤログは違うダイヤログを開い てOK ▹ 例:日にちピッカー、カラーピッカー

  10. スクロール付きコンテンツ ▸ 場合によって仕方ない ▹ 例:ユーザ一覧 ▸ タイトルは常にトップに表示する ▹ 選択された事項がタイトルと一緒に表示するが良い ▸

    アクションボタンの位置を維持 ▹ スクロールしてもボタンは移動しない
  11. 他に表示したコンテンツ ▸ 可能ならインラインで拡張する ▸ ダイヤログ以外のコンポネントを検討する

  12. ダイヤログのクローズ ▸ ダイヤログ外をタッチしたら ▸ バックボタン押下したら ▸ 必要な場合、アクションボタンだけでクローズする ようにもできる

  13. Alerts ▸ 緊急の時 ▸ ユーザに承知が必要 ダイヤログ

  14. タイトル無しのアラート ▸ アラートは殆どタイトルは要らない ▸ 短い ▹ 文書は2つまで ▸ 質問を聞く ▹

    例:削除してよろしいですか? ▸ 何かを申告する
  15. タイトル無しのアラート ▸ 良い ▹ アクション名で結果がわかる ▸ 微妙 ▹ 質問の回答になっているけどク リックした後は何が起きるがわ

    からない
  16. タイトル有りのアラート ▸ リスクのある場合のみに使用 ▸ タイトルとアクション名だけでユーザが理解できる ようにする ▸ 意味のあるタイトルにする ▹ お詫び、本当によろしい?等は避ける

  17. Simple Dialog ▸ 詳細情報 ▹ ユーザのアイコン ▸ 細かいアクション ▹ アカウント選択

    ダイヤログ
  18. シンプルダイヤログの動作 ▸ ダイヤログ外のタッチかバックボタンではアクショ ンがキャンセルされ、ダイヤログがクローズされる ▸ オプションを選択したらダイヤログが自動にクロー ズする

  19. シンプルダイヤログ ▸ Androidだと幅の単位は56dip ▹ モバイル上の最低幅 = 280dip ▻ 56dip *

    5 ▸ アクションボタンは付けない     dp とは密度非依存ピクセル http://goo.gl/lCIFky
  20. シンプルダイヤログ特徴 ▸ 行の高さは自由 ▸ 画面の真ん中に表示 ▹ top・bottomより24dip離 ▹ left・rightより40dip離

  21. Confirmation Dialogs ▸ ユーザが選択を確認す る必要 ▸ 単一値の時 ダイヤログ

  22. 確認ダイヤログ ▸ OKを押さないとダイヤログはク ローズしない ▹ キャンセルやバックボタンでアクション が変更が破壊されクローズ

  23. 確認ダイヤログ ▸ 一覧だけじゃない ▹ でも選択できる値は 一つのみ ▸ キャンセルボタンも 確認ボタンもある

  24. Full-screen Dialogs ▸ モバイルのみ ▸ いくつかのタスク ▹ 例:イベント作成 ▸ 「保存」を押さない限り何

    も保存しない ダイヤログ
  25. フルスクリーンダイヤログ ▸ アクションボタンは上にある ▹ アクション名は動詞にする ▸ Xボタンやバックボタンは変更を 破壊してクローズする ▸ 変更があった時のみ確認ダイヤ

    ログを出す
  26. ナビゲーション ▸ 「X」の場合は変更時に保存しないという事をユー ザに伝える ▸ 「←」の場合は常に保存し続けているとユーザに 伝える

  27. ナビゲーション 常保存 未保存

  28. フルダイヤログ ▸ タイトルは動的ではない ▹ 短く ▸ 長い場合はダイヤログ内に入れる ▹ 例:多言語対応の時

  29. Specs ダイヤログ

  30. ダイヤログの仕様 ▸ ダイヤログ= ▹ 任意なタイトル ▹ コンテンツ ▹ アクションボタン

  31. タイトル ▸ タイトルは省略しない ▸ 必要な時だけ使用 ▸ 何が求められているかを指定

  32. コンテンツ ▸ テキストかUIコンポネント ▸ 単一のタスクのみ

  33. アクション ▸ 細かい、範囲小さい選択肢を提供する ▹ 意味的に「OK」か「NG」のみにする ▹ OKアクション:保存する、削除する等 ▹ NGアクション:キャンセル、リセットする等 ▸

    アクションはタイトルに関してわかりやすいアク ションを指定する
  34. アクション NGアクションはOKアクションより 必ず左へ NGアクションは先に!

  35. ▸ OKアクションは選択がされるまで無効にしても良 い

  36. 承知アクション ▸ 進むにユーザが承知する必要がある時はアクショ ンを一つだけにする ▹ 中断になるため、違う方法で情報を伝えるように

  37. アクション数 ▸ アクションは2つまで ▹ 参考・ヘルプ系のアクションは避ける ▻ 画面が移動したらアクションが決着していないし ▹ 更に情報が必要ならダイヤログ出す前に提供する

  38. 色 ▸ 自アプリのテーマに合わせて色を決めよう ▹ デフォルトでシステムのカラーが利用されている ▸ タイトル対コンテンツは対象的な色を使おう ▹ 文字列の無い言語(日本語、韓国語など)に更に重要

  39. Snackbar スナックバー

  40. スナックバー

  41. スナックバー特徴 ▸ 軽重のフィードバックを一時に伝えたい時 ▸ アクションは有り ▸ スナックバーは同時に1つしか表示しない ▸ ほとんどのコンポネントより前に表示される ▹

    フローティングアクションボタンと同じレベル ▹ ダイヤログ、ナビゲーションドロワー、ボトムシーツより後ろ
  42. スナックバー動作 ▸ 画面に下からアニメーションで現れる ▹ 現れても入力をブロックしない(中断しない) ▸ 消える方法: ▹ ユーザがスワイプする ▹

    時間が経った ▹ ナビゲーションが行われた ▻ スナックバーはコンテキストに紐付いている
  43. スナックバー中身 ▸ テキスト ▹ 複数行は可能 ▹ アイコンの利用はできない ▸ アクション(任意)

  44. 儚いスナックバー ▸ 一時しか表示されない ▹ 表示中にダイヤログとか出たらスナックバーのタイマーが リセットされる ▸ ユーザビリティのため、スナックバーのアクション でしかアクセスできない機能は避ける ▸

    常に表示するのも避ける ▹ 殆どのコンポネントより前に表示されるため
  45. アクション ▸ アクションは一つまで ▹ 2つが必要ならダイヤログを使用する ▹ アクションが本当に重要ならダイヤログを使用

  46. フローティングアクションボタン ▸ フローティングアクションボタンを踏まない ▹ スナックバーが現れると共にフローティングアクションボタ ンも移動させる

  47. フローティングアクションボタン

  48. Toast トースト

  49. トースト

  50. トースト特徴 ▸ アクションは無い ▸ 一行のみ ▸ 時間が経って消える ▹ スワイプできないので手動で消す事はできない ▸

    コンテキストに依存しない ▹ スナックバーと違う
  51. お知らせ方法

  52. スナックバーについて ▸ Android1.0からトーストとダイヤログは存在してい た ▹ ダイヤログは使われすぎてUXにマイナスな影響があって トーストはできる事が少なすぎた ⇒ スナックバーが生まれたわけ

  53. 適切なお知らせ方法 状況や目的に応じてユーザの事を考えて お知らせしよう

  54. リファレンス ▸ https://www.google.com/design/spec/components/dialogs.html ▸ https://www.google.com/design/spec/components/snackbars-toasts.html ▸ https://www.youtube.com/watch?v=puhfMX8jb9c

  55. 以上