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
Dialog Design
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Kaneko Takeshi
April 14, 2017
Technology
0
43
Dialog Design
Kaneko Takeshi
April 14, 2017
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
31
Eye Tracking on the Browser
tkckaneko
0
88
IEEE754を完全に理解した
tkckaneko
1
76
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
93
多分これが一番早いと思います
tkckaneko
0
27
暗黒面の話
tkckaneko
0
24
CSR / SSR / SSG / JAMstack
tkckaneko
0
73
BOLT
tkckaneko
0
31
CSS Logical Properties and Values
tkckaneko
0
36
Other Decks in Technology
See All in Technology
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
3k
usermode linux without MMU - fosdem2026 kernel devroom
thehajime
0
230
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
riku_423
2
530
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
sashimimochi
0
150
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
150
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3.8k
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.3k
OWASP Top 10:2025 リリースと 少しの日本語化にまつわる裏話
okdt
PRO
3
590
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.3k
茨城の思い出を振り返る ~CDKのセキュリティを添えて~ / 20260201 Mitsutoshi Matsuo
shift_evolve
PRO
1
230
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
oracle4engineer
PRO
1
120
学生・新卒・ジュニアから目指すSRE
hiroyaonoe
2
590
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
290
Product Roadmaps are Hard
iamctodd
PRO
55
12k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
49
BBQ
matthewcrist
89
10k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
160
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
0
1.9k
Designing for Performance
lara
610
70k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.4k
Transcript
Dialog Design
ダイアログってUIの話をします
こんなやつです
None
モーダルウィンドウとか
ポップアップとか
いろいろな呼び方がありますが
とりあえず 同じものとします
ダイアログとは
ユーザーが対話することを要求し
ユーザーが対話することを要求し ユーザーからの応答を引き出すように
ユーザーが対話することを要求し ユーザーからの応答を引き出すように 設計されたオーバーレイ
良い例
None
None
画面を遷移せずにフォームが出てくる!
便利!
悪い例
None
見たらわかるやつ
Appsumoによると、ポップアップが 30日で10万件以上のメアドの収集に 役立ったそうです
http://www.appsumo.com/7-tips-grow-your-emails/
アルバータ大学ではポップアップで、 ニュースレターのサインアップ数が 1日に12件~15件まで増加したそうです
https://blog.kissmetrics.com/a-little-nudge/
コンバージョンには ダイアログは効きます!
でも、最近はユーザに嫌われてます
「うざっ」
と言われないように 以下の点を注意しましょう
1.中断を減らす
ポップアップの出現で ユーザの操作を中断してしまいます 控えめに使用しましょう
◦ ユーザの了承を要求
間違いが起こりやすい場合に 使用するのは理にかなっています
None
None
☓ 突然の表示
None
広告とかよくありますが やめましょう
必ずユーザの操作によって 使用されるべきです
2.見た目の統一
コンテンツと同じ質問や文を使います
None
None
見出し
タイトルを持つことで ユーザにコンテキストを与えます
None
ボタン
ボタンのラベルには わかりやすい名前が必要です
None
タイトルとボタンのラベルが 一致することも大切です
None
悪い例
None
3.構造
None
ポップアップを閉じる方法を ユーザに教えてください
キャンセルボタン
None
キャンセルボタン 閉じるボタン
None
キャンセルボタン 閉じるボタン エスケープキー
None
キャンセルボタン 閉じるボタン エスケープキー ウィンドウの外側をクリック
None
Sizing & Location
ポップアップが大きすぎたり 小さすぎたりしてはいけません
位置 モバイルでは画面の真ん中より 下に配置されると 表示されない可能性があります
サイズ オーバーレイに画面の50%以上を 使用しないでください 超える場合は新しいページを検討してください
None
ポップアップを開く時 ライトボックスエフェクトを使用します (背景を暗くします)
None
ユーザの操作によって ポップアップが開くようにします
予期しないポップアップは ユーザの離脱を促します
アメリカのユーザのうち70%が ポップアップの広告に苛立っている という統計もあります
ダイアログは良いUIには なれないと言う人もいます
http://www.appsumo.com/7-tips-grow-your-emails/
まとめ
コンテキストを維持し、UIを単純化すること は、モーダルの大きな利点です
しかし
操作を中断し、 ダイアログでコンテンツを隠してしまうという 欠点があります
いつモーダルを表示しますか? どのようにモーダルを表示しますか? モーダルの外観はどうですか? どのような情報を収集しますか?
ユーザーとそのタスクに最適なものを 見つけるようにしましょう