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
160
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
180
Sweet Architecture
oldergod
1
360
Architecture at Scale (droidconNYC 2022)
oldergod
2
600
Managing gRPC with Wire
oldergod
2
520
Wire & Proto3
oldergod
0
79
Effective Reactive Architecture
oldergod
2
210
Wire 3 : Tackling gRPC with Kotlin
oldergod
0
970
Server Driven UI Workflow
oldergod
2
490
Applying Rx Best Practices to Your Architecture
oldergod
1
230
Other Decks in Programming
See All in Programming
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
210
PEPCは何を変えようとしていたのか
ken7253
3
270
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
390
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
PRレビューのお供にDanger
stoticdev
1
240
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
160
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
SwiftUI Viewの責務分離
elmetal
PRO
2
280
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
930
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
For a Future-Friendly Web
brad_frost
176
9.6k
Building an army of robots
kneath
303
45k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Six Lessons from altMBA
skipperchong
27
3.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Become a Pro
speakerdeck
PRO
26
5.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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
以上