Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Androidでのお知らせ
Benoît Quenaudon
April 07, 2016
Programming
0
78
Androidでのお知らせ
Benoît Quenaudon
April 07, 2016
Tweet
Share
More Decks by Benoît Quenaudon
See All by Benoît Quenaudon
Managing gRPC with Wire
oldergod
2
190
Wire & Proto3
oldergod
0
37
Effective Reactive Architecture
oldergod
2
160
Wire 3 : Tackling gRPC with Kotlin
oldergod
0
580
Server Driven UI Workflow
oldergod
2
380
Applying Rx Best Practices to Your Architecture
oldergod
1
87
Kotlin's Advanced Language Features
oldergod
2
140
Android における Model-View-Intent アーキテクチャ
oldergod
19
9.4k
KotlinでAndroid開発を気持ちよくしよう
oldergod
2
800
Other Decks in Programming
See All in Programming
Pluggable Storage in PostgreSQL
sira
1
190
それ全部エラーメッセージに書いてあるよ!〜独学でPHPプログラミングが上達するたった一つの方法〜
77web
1
150
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
uggds
32
13k
Untangling Coroutine Testing (Droidcon Berlin 2022)
zsmb
1
490
夕食断食にTRY!/for-lt-12th
pachikuriii
0
240
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
SAM × Dockerでサーバーレス開発が超捗った話
yu_yukk_y
1
370
Rust on Lambda 大きめCSV生成
atsuyokota
1
400
Register-based calling convention for Go functions
cjamhe01385
0
410
ふんわり理解するcontext
rukiadia
1
180
FullStack eXchange, July 2022
brucel
0
200
테라폼으로 ECR 관리하기 (How to Manage ECR with Terraform)
posquit0
0
530
Featured
See All Featured
Navigating Team Friction
lara
175
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Typedesign – Prime Four
hannesfritz
34
1.4k
How STYLIGHT went responsive
nonsquared
85
4k
The Invisible Customer
myddelton
110
11k
The Power of CSS Pseudo Elements
geoffreycrofte
47
4k
GraphQLとの向き合い方2022年版
quramy
16
8.5k
Gamification - CAS2011
davidbonilla
75
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
For a Future-Friendly Web
brad_frost
166
7.5k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.7k
Building Applications with DynamoDB
mza
84
4.8k
Transcript
Android での 適切なお知らせ #toast #snackbar #dialog
アプリ内のお知らせ方法
お知らせ種類 1. ダイヤログ 2. スナックバー 3. トースト
Dialogs ダイヤログ
ダイヤログはいつ使う? ▸ 重要な情報を伝える ▸ アクションを求める
ダイヤログ ▸ モーダルの一種 ▹ 画面の一部も ▹ フル画面も
中断を減らす ▸ ダイヤログはユーザがやっているタスクにとって 中断になる ⇒ 本当にユーザに対して中断を入れる程のものな のか?
上に表示 ▸ ダイヤログは常に上に表示する ▹ ユーザはダイヤログに対するアクションをする必要 ▸ ダイヤログから更に他ダイヤログを開かない ▸ スクロール付きコンテンツを含めない
フルスクリーンダイヤログ例外 ▸ フルスクリーンダイヤログは違うダイヤログを開い てOK ▹ 例:日にちピッカー、カラーピッカー
スクロール付きコンテンツ ▸ 場合によって仕方ない ▹ 例:ユーザ一覧 ▸ タイトルは常にトップに表示する ▹ 選択された事項がタイトルと一緒に表示するが良い ▸
アクションボタンの位置を維持 ▹ スクロールしてもボタンは移動しない
他に表示したコンテンツ ▸ 可能ならインラインで拡張する ▸ ダイヤログ以外のコンポネントを検討する
ダイヤログのクローズ ▸ ダイヤログ外をタッチしたら ▸ バックボタン押下したら ▸ 必要な場合、アクションボタンだけでクローズする ようにもできる
Alerts ▸ 緊急の時 ▸ ユーザに承知が必要 ダイヤログ
タイトル無しのアラート ▸ アラートは殆どタイトルは要らない ▸ 短い ▹ 文書は2つまで ▸ 質問を聞く ▹
例:削除してよろしいですか? ▸ 何かを申告する
タイトル無しのアラート ▸ 良い ▹ アクション名で結果がわかる ▸ 微妙 ▹ 質問の回答になっているけどク リックした後は何が起きるがわ
からない
タイトル有りのアラート ▸ リスクのある場合のみに使用 ▸ タイトルとアクション名だけでユーザが理解できる ようにする ▸ 意味のあるタイトルにする ▹ お詫び、本当によろしい?等は避ける
Simple Dialog ▸ 詳細情報 ▹ ユーザのアイコン ▸ 細かいアクション ▹ アカウント選択
ダイヤログ
シンプルダイヤログの動作 ▸ ダイヤログ外のタッチかバックボタンではアクショ ンがキャンセルされ、ダイヤログがクローズされる ▸ オプションを選択したらダイヤログが自動にクロー ズする
シンプルダイヤログ ▸ Androidだと幅の単位は56dip ▹ モバイル上の最低幅 = 280dip ▻ 56dip *
5 ▸ アクションボタンは付けない dp とは密度非依存ピクセル http://goo.gl/lCIFky
シンプルダイヤログ特徴 ▸ 行の高さは自由 ▸ 画面の真ん中に表示 ▹ top・bottomより24dip離 ▹ left・rightより40dip離
Confirmation Dialogs ▸ ユーザが選択を確認す る必要 ▸ 単一値の時 ダイヤログ
確認ダイヤログ ▸ OKを押さないとダイヤログはク ローズしない ▹ キャンセルやバックボタンでアクション が変更が破壊されクローズ
確認ダイヤログ ▸ 一覧だけじゃない ▹ でも選択できる値は 一つのみ ▸ キャンセルボタンも 確認ボタンもある
Full-screen Dialogs ▸ モバイルのみ ▸ いくつかのタスク ▹ 例:イベント作成 ▸ 「保存」を押さない限り何
も保存しない ダイヤログ
フルスクリーンダイヤログ ▸ アクションボタンは上にある ▹ アクション名は動詞にする ▸ Xボタンやバックボタンは変更を 破壊してクローズする ▸ 変更があった時のみ確認ダイヤ
ログを出す
ナビゲーション ▸ 「X」の場合は変更時に保存しないという事をユー ザに伝える ▸ 「←」の場合は常に保存し続けているとユーザに 伝える
ナビゲーション 常保存 未保存
フルダイヤログ ▸ タイトルは動的ではない ▹ 短く ▸ 長い場合はダイヤログ内に入れる ▹ 例:多言語対応の時
Specs ダイヤログ
ダイヤログの仕様 ▸ ダイヤログ= ▹ 任意なタイトル ▹ コンテンツ ▹ アクションボタン
タイトル ▸ タイトルは省略しない ▸ 必要な時だけ使用 ▸ 何が求められているかを指定
コンテンツ ▸ テキストかUIコンポネント ▸ 単一のタスクのみ
アクション ▸ 細かい、範囲小さい選択肢を提供する ▹ 意味的に「OK」か「NG」のみにする ▹ OKアクション:保存する、削除する等 ▹ NGアクション:キャンセル、リセットする等 ▸
アクションはタイトルに関してわかりやすいアク ションを指定する
アクション NGアクションはOKアクションより 必ず左へ NGアクションは先に!
▸ OKアクションは選択がされるまで無効にしても良 い
承知アクション ▸ 進むにユーザが承知する必要がある時はアクショ ンを一つだけにする ▹ 中断になるため、違う方法で情報を伝えるように
アクション数 ▸ アクションは2つまで ▹ 参考・ヘルプ系のアクションは避ける ▻ 画面が移動したらアクションが決着していないし ▹ 更に情報が必要ならダイヤログ出す前に提供する
色 ▸ 自アプリのテーマに合わせて色を決めよう ▹ デフォルトでシステムのカラーが利用されている ▸ タイトル対コンテンツは対象的な色を使おう ▹ 文字列の無い言語(日本語、韓国語など)に更に重要
Snackbar スナックバー
スナックバー
スナックバー特徴 ▸ 軽重のフィードバックを一時に伝えたい時 ▸ アクションは有り ▸ スナックバーは同時に1つしか表示しない ▸ ほとんどのコンポネントより前に表示される ▹
フローティングアクションボタンと同じレベル ▹ ダイヤログ、ナビゲーションドロワー、ボトムシーツより後ろ
スナックバー動作 ▸ 画面に下からアニメーションで現れる ▹ 現れても入力をブロックしない(中断しない) ▸ 消える方法: ▹ ユーザがスワイプする ▹
時間が経った ▹ ナビゲーションが行われた ▻ スナックバーはコンテキストに紐付いている
スナックバー中身 ▸ テキスト ▹ 複数行は可能 ▹ アイコンの利用はできない ▸ アクション(任意)
儚いスナックバー ▸ 一時しか表示されない ▹ 表示中にダイヤログとか出たらスナックバーのタイマーが リセットされる ▸ ユーザビリティのため、スナックバーのアクション でしかアクセスできない機能は避ける ▸
常に表示するのも避ける ▹ 殆どのコンポネントより前に表示されるため
アクション ▸ アクションは一つまで ▹ 2つが必要ならダイヤログを使用する ▹ アクションが本当に重要ならダイヤログを使用
フローティングアクションボタン ▸ フローティングアクションボタンを踏まない ▹ スナックバーが現れると共にフローティングアクションボタ ンも移動させる
フローティングアクションボタン
Toast トースト
トースト
トースト特徴 ▸ アクションは無い ▸ 一行のみ ▸ 時間が経って消える ▹ スワイプできないので手動で消す事はできない ▸
コンテキストに依存しない ▹ スナックバーと違う
お知らせ方法
スナックバーについて ▸ Android1.0からトーストとダイヤログは存在してい た ▹ ダイヤログは使われすぎてUXにマイナスな影響があって トーストはできる事が少なすぎた ⇒ スナックバーが生まれたわけ
適切なお知らせ方法 状況や目的に応じてユーザの事を考えて お知らせしよう
リファレンス ▸ 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
以上