Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Androidでのお知らせ
Search
Benoît Quenaudon
April 07, 2016
Programming
0
180
Androidでのお知らせ
Benoît Quenaudon
April 07, 2016
Tweet
Share
More Decks by Benoît Quenaudon
See All by Benoît Quenaudon
36・15 Cash App
oldergod
1
200
Heuristics in Everyday Life
oldergod
1
6
Sweet Architecture
oldergod
1
390
Architecture at Scale (droidconNYC 2022)
oldergod
2
630
Managing gRPC with Wire
oldergod
2
560
Wire & Proto3
oldergod
0
89
Effective Reactive Architecture
oldergod
2
210
Wire 3 : Tackling gRPC with Kotlin
oldergod
0
1k
Server Driven UI Workflow
oldergod
2
500
Other Decks in Programming
See All in Programming
XP, Testing and ninja testing
m_seki
3
250
PicoRuby on Rails
makicamel
2
130
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
170
効率的な開発手段として VRTを活用する
ishkawa
0
140
AIともっと楽するE2Eテスト
myohei
7
2.7k
VS Code Update for GitHub Copilot
74th
2
650
GPUを計算資源として使おう!
primenumber
1
120
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
400
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Speed Design
sergeychernyshev
32
1k
Gamification - CAS2011
davidbonilla
81
5.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Raft: Consensus for Rubyists
vanstee
140
7k
Building Applications with DynamoDB
mza
95
6.5k
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
以上