Androidでのお知らせ

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. タイトル無しのアラート ▸ アラートは殆どタイトルは要らない ▸ 短い ▹ 文書は２つまで ▸ 質問を聞く ▹ 例：削除してよろしいですか？ ▸ 何かを申告する
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. スナックバー特徴 ▸ 軽重のフィードバックを一時に伝えたい時 ▸ アクションは有り ▸ スナックバーは同時に１つしか表示しない ▸ ほとんどのコンポネントより前に表示される ▹ フローティングアクションボタンと同じレベル ▹ ダイヤログ、ナビゲーションドロワー、ボトムシーツより後ろ
42. スナックバー動作 ▸ 画面に下からアニメーションで現れる ▹ 現れても入力をブロックしない（中断しない） ▸ 消える方法： ▹ ユーザがスワイプする ▹ 時間が経った ▹ ナビゲーションが行われた ▻ スナックバーはコンテキストに紐付いている
43. スナックバー中身 ▸ テキスト ▹ 複数行は可能 ▹ アイコンの利用はできない ▸ アクション（任意）
44. 儚いスナックバー ▸ 一時しか表示されない ▹ 表示中にダイヤログとか出たらスナックバーのタイマーが リセットされる ▸ ユーザビリティのため、スナックバーのアクション でしかアクセスできない機能は避ける ▸ 常に表示するのも避ける ▹ 殆どのコンポネントより前に表示されるため
45. アクション ▸ アクションは一つまで ▹ ２つが必要ならダイヤログを使用する ▹ アクションが本当に重要ならダイヤログを使用
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. 以上