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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
87
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
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
tatsukoni
0
200
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
oracle4engineer
PRO
2
14k
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
coconala_engineer
2
590
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
150
CDKで始めるTypeScript開発のススメ
tsukuboshi
1
320
Mosaic AI Gatewayでコーディングエージェントを配るための運用Tips / JEDAI 2026 新春 Meetup! AIコーディング特集
genda
0
150
今日から始めるAmazon Bedrock AgentCore
har1101
4
390
Deno・Bunの標準機能やElysiaJSを使ったWebSocketサーバー実装 / ラーメン屋を貸し切ってLT会! IoTLT 2026新年会
you
PRO
0
290
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
muziyoshiz
1
1.5k
Webhook best practices for rock solid and resilient deployments
glaforge
1
260
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
42k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
3k
Featured
See All Featured
Done Done
chrislema
186
16k
Discover your Explorer Soul
emna__ayadi
2
1.1k
Visualization
eitanlees
150
17k
The Cult of Friendly URLs
andyhume
79
6.8k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
290
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
The World Runs on Bad Software
bkeepers
PRO
72
12k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
200
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
270
The Limits of Empathy - UXLibs8
cassininazir
1
210
30 Presentation Tips
portentint
PRO
1
210
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.2k
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を単純化すること は、モーダルの大きな利点です
しかし
操作を中断し、 ダイアログでコンテンツを隠してしまうという 欠点があります
いつモーダルを表示しますか? どのようにモーダルを表示しますか? モーダルの外観はどうですか? どのような情報を収集しますか?
ユーザーとそのタスクに最適なものを 見つけるようにしましょう